3 files changed, 287 insertions, 223 deletions
diff --git a/apps/web/src/stores/project-store.ts b/apps/web/src/stores/project-store.ts
index 70c11b28..0c67be9f 100644
--- a/apps/web/src/stores/project-store.ts
+++ b/apps/web/src/stores/project-store.ts
@@ -4,7 +4,7 @@ import { storageService } from "@/lib/storage/storage-service";
 import { toast } from "sonner";
 import { useMediaStore } from "./media-store";
 import { useTimelineStore } from "./timeline-store";
-import { useSceneStore } from "./scene-store";
+import { createBackgroundScene, useSceneStore } from "./scene-store";
 import { generateUUID } from "@/lib/utils";
 import { CanvasSize, CanvasMode } from "@/types/editor";
 
@@ -16,6 +16,7 @@ export function createMainScene(): Scene {
     id: generateUUID(),
     name: "Main scene",
     isMain: true,
+    isBackground: false,
     createdAt: new Date(),
     updatedAt: new Date(),
   };
@@ -23,13 +24,15 @@ export function createMainScene(): Scene {
 
 const createDefaultProject = (name: string): TProject => {
   const mainScene = createMainScene();
+  const backgroundScene = createBackgroundScene();
+
   return {
     id: generateUUID(),
     name,
     thumbnail: "",
     createdAt: new Date(),
     updatedAt: new Date(),
-    scenes: [mainScene],
+    scenes: [mainScene, backgroundScene],
     currentSceneId: mainScene.id,
     backgroundColor: "#000000",
     backgroundType: "color",
@@ -226,15 +229,19 @@ export const useProjectStore = create<ProjectStore>((set, get) => ({
       if (project) {
         set({ activeProject: project });
 
+        let currentScene = null;
         if (project.scenes && project.scenes.length > 0) {
           sceneStore.initializeScenes({
             scenes: project.scenes,
             currentSceneId: project.currentSceneId,
           });
+          // Get current scene directly from project data (don't rely on store state)
+          currentScene =
+            project.scenes.find((s) => s.id === project.currentSceneId) ||
+            project.scenes.find((s) => s.isMain) ||
+            project.scenes[0];
         }
 
-        const currentScene = sceneStore.currentScene;
-
         await Promise.all([
           mediaStore.loadProjectMedia(id),
           timelineStore.loadProjectTimeline({
diff --git a/apps/web/src/stores/scene-store.ts b/apps/web/src/stores/scene-store.ts
index e16185e9..1b789427 100644
--- a/apps/web/src/stores/scene-store.ts
+++ b/apps/web/src/stores/scene-store.ts
@@ -1,219 +1,267 @@
-import { create } from "zustand";
-import { Scene } from "@/types/project";
-import { useProjectStore } from "./project-store";
-import { useTimelineStore } from "./timeline-store";
-import { storageService } from "@/lib/storage/storage-service";
-import { generateUUID } from "@/lib/utils";
-
-export function getMainScene({ scenes }: { scenes: Scene[] }): Scene | null {
-  return scenes.find((scene) => scene.isMain) || null;
-}
-
-interface SceneStore {
-  // Current scene state
-  currentScene: Scene | null;
-  scenes: Scene[];
-
-  // Scene management
-  createScene: ({
-    name,
-    isMain,
-  }: {
-    name: string;
-    isMain: boolean;
-  }) => Promise<string>;
-  renameScene: ({
-    sceneId,
-    name,
-  }: {
-    sceneId: string;
-    name: string;
-  }) => Promise<void>;
-  switchToScene: ({ sceneId }: { sceneId: string }) => Promise<void>;
-
-  // Scene utilities
-  getMainScene: () => Scene | null;
-  getCurrentScene: () => Scene | null;
-
-  // Project integration
-  loadProjectScenes: ({ projectId }: { projectId: string }) => Promise<void>;
-  initializeScenes: ({
-    scenes,
-    currentSceneId,
-  }: {
-    scenes: Scene[];
-    currentSceneId?: string;
-  }) => void;
-  clearScenes: () => void;
-}
-
-export const useSceneStore = create<SceneStore>((set, get) => ({
-  currentScene: null,
-  scenes: [],
-
-  createScene: async ({ name, isMain = false }) => {
-    const { scenes } = get();
-
-    const newScene = {
-      id: generateUUID(),
-      name,
-      isMain,
-      createdAt: new Date(),
-      updatedAt: new Date(),
-    };
-    const updatedScenes = [...scenes, newScene];
-
-    const projectStore = useProjectStore.getState();
-    const { activeProject } = projectStore;
-
-    if (!activeProject) {
-      throw new Error("No active project");
-    }
-
-    const updatedProject = {
-      ...activeProject,
-      scenes: updatedScenes,
-      updatedAt: new Date(),
-    };
-
-    try {
-      await storageService.saveProject({ project: updatedProject });
-      useProjectStore.setState({ activeProject: updatedProject });
-      set({ scenes: updatedScenes });
-      return newScene.id;
-    } catch (error) {
-      console.error("Failed to create scene:", error);
-      throw error;
-    }
-  },
-
-  renameScene: async ({ sceneId, name }: { sceneId: string; name: string }) => {
-    const { scenes } = get();
-    const updatedScenes = scenes.map((scene) =>
-      scene.id === sceneId ? { ...scene, name, updatedAt: new Date() } : scene
-    );
-
-    // Update project
-    const projectStore = useProjectStore.getState();
-    const { activeProject } = projectStore;
-
-    if (!activeProject) {
-      throw new Error("No active project");
-    }
-
-    const updatedProject = {
-      ...activeProject,
-      scenes: updatedScenes,
-      updatedAt: new Date(),
-    };
-
-    try {
-      await storageService.saveProject({ project: updatedProject });
-      useProjectStore.setState({ activeProject: updatedProject });
-      set({
-        scenes: updatedScenes,
-        currentScene: updatedScenes.find((s) => s.id === sceneId) || null,
-      });
-    } catch (error) {
-      console.error("Failed to rename scene:", error);
-      throw error;
-    }
-  },
-
-  switchToScene: async ({ sceneId }: { sceneId: string }) => {
-    const { scenes } = get();
-    const targetScene = scenes.find((s) => s.id === sceneId);
-
-    if (!targetScene) {
-      throw new Error("Scene not found");
-    }
-
-    const timelineStore = useTimelineStore.getState();
-    const projectStore = useProjectStore.getState();
-    const { activeProject } = projectStore;
-    const { currentScene } = get();
-
-    if (activeProject && currentScene) {
-      await timelineStore.saveProjectTimeline({
-        projectId: activeProject.id,
-        sceneId: currentScene.id,
-      });
-    }
-
-    if (activeProject) {
-      await timelineStore.loadProjectTimeline({
-        projectId: activeProject.id,
-        sceneId,
-      });
-
-      const updatedProject = {
-        ...activeProject,
-        currentSceneId: sceneId,
-        updatedAt: new Date(),
-      };
-
-      await storageService.saveProject({ project: updatedProject });
-      useProjectStore.setState({ activeProject: updatedProject });
-    }
-
-    set({ currentScene: targetScene });
-  },
-
-  getMainScene: () => {
-    const { scenes } = get();
-    return scenes.find((scene) => scene.isMain) || null;
-  },
-
-  getCurrentScene: () => {
-    return get().currentScene;
-  },
-
-  loadProjectScenes: async ({ projectId }: { projectId: string }) => {
-    try {
-      const project = await storageService.loadProject({ id: projectId });
-      if (project?.scenes) {
-        const ensuredScenes = project.scenes.map((scene) => ({
-          ...scene,
-          isMain: scene.isMain || false,
-        }));
-        const currentScene =
-          ensuredScenes.find((s) => s.id === project.currentSceneId) ||
-          ensuredScenes[0];
-
-        set({
-          scenes: ensuredScenes,
-          currentScene,
-        });
-      }
-    } catch (error) {
-      console.error("Failed to load project scenes:", error);
-      set({ scenes: [], currentScene: null });
-    }
-  },
-
-  initializeScenes: ({
-    scenes,
-    currentSceneId,
-  }: {
-    scenes: Scene[];
-    currentSceneId?: string;
-  }) => {
-    const currentScene = currentSceneId
-      ? scenes.find((s) => s.id === currentSceneId)
-      : null;
-
-    const fallbackScene = getMainScene({ scenes });
-
-    set({
-      scenes,
-      currentScene: currentScene || fallbackScene,
-    });
-  },
-
-  clearScenes: () => {
-    set({
-      scenes: [],
-      currentScene: null,
-    });
-  },
-}));
+import { create } from "zustand";
+import { Scene } from "@/types/project";
+import { useProjectStore } from "./project-store";
+import { useTimelineStore } from "./timeline-store";
+import { storageService } from "@/lib/storage/storage-service";
+import { generateUUID } from "@/lib/utils";
+
+export function getMainScene({ scenes }: { scenes: Scene[] }): Scene | null {
+  return scenes.find((scene) => scene.isMain) || null;
+}
+
+export function getBackgroundScene({
+  scenes,
+}: {
+  scenes: Scene[];
+}): Scene | null {
+  return scenes.find((scene) => scene.isBackground) || null;
+}
+
+export function createBackgroundScene(): Scene {
+  return {
+    id: generateUUID(),
+    name: "Background",
+    isMain: false,
+    isBackground: true,
+    createdAt: new Date(),
+    updatedAt: new Date(),
+  };
+}
+
+function ensureBackgroundScene({ scenes }: { scenes: Scene[] }): Scene[] {
+  const hasBackground = scenes.some((scene) => scene.isBackground);
+  if (!hasBackground) {
+    return [...scenes, createBackgroundScene()];
+  }
+  return scenes;
+}
+
+interface SceneStore {
+  // Current scene state
+  currentScene: Scene | null;
+  scenes: Scene[];
+
+  // Scene management
+  createScene: ({
+    name,
+    isMain,
+  }: {
+    name: string;
+    isMain: boolean;
+  }) => Promise<string>;
+  renameScene: ({
+    sceneId,
+    name,
+  }: {
+    sceneId: string;
+    name: string;
+  }) => Promise<void>;
+  switchToScene: ({ sceneId }: { sceneId: string }) => Promise<void>;
+
+  // Scene utilities
+  getMainScene: () => Scene | null;
+  getCurrentScene: () => Scene | null;
+
+  // Project integration
+  loadProjectScenes: ({ projectId }: { projectId: string }) => Promise<void>;
+  initializeScenes: ({
+    scenes,
+    currentSceneId,
+  }: {
+    scenes: Scene[];
+    currentSceneId?: string;
+  }) => void;
+  clearScenes: () => void;
+}
+
+export const useSceneStore = create<SceneStore>((set, get) => ({
+  currentScene: null,
+  scenes: [],
+
+  createScene: async ({ name, isMain = false }) => {
+    const { scenes } = get();
+
+    const newScene = {
+      id: generateUUID(),
+      name,
+      isMain,
+      isBackground: false,
+      createdAt: new Date(),
+      updatedAt: new Date(),
+    };
+    const updatedScenes = [...scenes, newScene];
+
+    const projectStore = useProjectStore.getState();
+    const { activeProject } = projectStore;
+
+    if (!activeProject) {
+      throw new Error("No active project");
+    }
+
+    const updatedProject = {
+      ...activeProject,
+      scenes: updatedScenes,
+      updatedAt: new Date(),
+    };
+
+    try {
+      await storageService.saveProject({ project: updatedProject });
+      useProjectStore.setState({ activeProject: updatedProject });
+      set({ scenes: updatedScenes });
+      return newScene.id;
+    } catch (error) {
+      console.error("Failed to create scene:", error);
+      throw error;
+    }
+  },
+
+  renameScene: async ({ sceneId, name }: { sceneId: string; name: string }) => {
+    const { scenes } = get();
+    const updatedScenes = scenes.map((scene) =>
+      scene.id === sceneId ? { ...scene, name, updatedAt: new Date() } : scene
+    );
+
+    // Update project
+    const projectStore = useProjectStore.getState();
+    const { activeProject } = projectStore;
+
+    if (!activeProject) {
+      throw new Error("No active project");
+    }
+
+    const updatedProject = {
+      ...activeProject,
+      scenes: updatedScenes,
+      updatedAt: new Date(),
+    };
+
+    try {
+      await storageService.saveProject({ project: updatedProject });
+      useProjectStore.setState({ activeProject: updatedProject });
+      set({
+        scenes: updatedScenes,
+        currentScene: updatedScenes.find((s) => s.id === sceneId) || null,
+      });
+    } catch (error) {
+      console.error("Failed to rename scene:", error);
+      throw error;
+    }
+  },
+
+  switchToScene: async ({ sceneId }: { sceneId: string }) => {
+    const { scenes } = get();
+    const targetScene = scenes.find((s) => s.id === sceneId);
+
+    if (!targetScene) {
+      throw new Error("Scene not found");
+    }
+
+    const timelineStore = useTimelineStore.getState();
+    const projectStore = useProjectStore.getState();
+    const { activeProject } = projectStore;
+    const { currentScene } = get();
+
+    if (activeProject && currentScene) {
+      await timelineStore.saveProjectTimeline({
+        projectId: activeProject.id,
+        sceneId: currentScene.id,
+      });
+    }
+
+    if (activeProject) {
+      await timelineStore.loadProjectTimeline({
+        projectId: activeProject.id,
+        sceneId,
+      });
+
+      const updatedProject = {
+        ...activeProject,
+        currentSceneId: sceneId,
+        updatedAt: new Date(),
+      };
+
+      await storageService.saveProject({ project: updatedProject });
+      useProjectStore.setState({ activeProject: updatedProject });
+    }
+
+    set({ currentScene: targetScene });
+  },
+
+  getMainScene: () => {
+    const { scenes } = get();
+    return scenes.find((scene) => scene.isMain) || null;
+  },
+
+  getCurrentScene: () => {
+    return get().currentScene;
+  },
+
+  loadProjectScenes: async ({ projectId }: { projectId: string }) => {
+    try {
+      const project = await storageService.loadProject({ id: projectId });
+      if (project?.scenes) {
+        const ensuredScenes = project.scenes.map((scene) => ({
+          ...scene,
+          isMain: scene.isMain || false,
+        }));
+        const currentScene =
+          ensuredScenes.find((s) => s.id === project.currentSceneId) ||
+          ensuredScenes[0];
+
+        set({
+          scenes: ensuredScenes,
+          currentScene,
+        });
+      }
+    } catch (error) {
+      console.error("Failed to load project scenes:", error);
+      set({ scenes: [], currentScene: null });
+    }
+  },
+
+  initializeScenes: ({
+    scenes,
+    currentSceneId,
+  }: {
+    scenes: Scene[];
+    currentSceneId?: string;
+  }) => {
+    const ensuredScenes = ensureBackgroundScene({ scenes });
+    const currentScene = currentSceneId
+      ? ensuredScenes.find((s) => s.id === currentSceneId)
+      : null;
+
+    const fallbackScene = getMainScene({ scenes: ensuredScenes });
+
+    set({
+      scenes: ensuredScenes,
+      currentScene: currentScene || fallbackScene,
+    });
+
+    if (ensuredScenes.length > scenes.length) {
+      const projectStore = useProjectStore.getState();
+      const { activeProject } = projectStore;
+      
+      if (activeProject) {
+        const updatedProject = {
+          ...activeProject,
+          scenes: ensuredScenes,
+          updatedAt: new Date(),
+        };
+        
+        storageService.saveProject({ project: updatedProject }).then(() => {
+          useProjectStore.setState({ activeProject: updatedProject });
+        }).catch(error => {
+          console.error("Failed to save project with background scene:", error);
+        });
+      }
+    }
+  },
+
+  clearScenes: () => {
+    set({
+      scenes: [],
+      currentScene: null,
+    });
+  },
+}));
diff --git a/apps/web/src/stores/timeline-store.ts b/apps/web/src/stores/timeline-store.ts
index 8caa71a7..24b6eca3 100644
--- a/apps/web/src/stores/timeline-store.ts
+++ b/apps/web/src/stores/timeline-store.ts
@@ -260,6 +260,15 @@ export const useTimelineStore = create<TimelineStore>((set, get) => {
       } catch (error) {
         console.error("Failed to auto-save timeline:", error);
       }
+    } else {
+      console.warn(
+        "Auto-save skipped - missing activeProject or currentScene:",
+        {
+          hasProject: !!activeProject,
+          hasScene: !!currentScene,
+          sceneName: currentScene?.name,
+        }
+      );
     }
   };