diff --git a/src/lib/ai/ai-operations.svelte.ts b/src/lib/ai/ai-operations.svelte.ts
index 7a33663..d4c66d4 100644
--- a/src/lib/ai/ai-operations.svelte.ts
+++ b/src/lib/ai/ai-operations.svelte.ts
@@ -4,7 +4,7 @@
  * Handles progressive tool execution with layer ID tracking across tool calls.
  * Refactored to use shared 'mutations.ts' logic.
  */
-import { projectStore } from '$lib/stores/project.svelte';
+import type { ProjectStore } from '$lib/stores/project.svelte';
 import type {
   CreateLayerInput,
   CreateLayerOutput,
@@ -48,9 +48,9 @@ export function resetLayerTracking() {
 // Context Helper
 // ============================================
 
-function getContext(): MutationContext {
+function getContext(projectStore: ProjectStore): MutationContext {
   return {
-    project: projectStore.project,
+    project: projectStore.state,
     layerIdMap: layerIdMap,
     layerCreationIndex: layerCreationIndex
   };
@@ -63,8 +63,11 @@ function getContext(): MutationContext {
 /**
  * Execute create_layer tool
  */
-export function executeCreateLayer(input: CreateLayerInput): CreateLayerOutput {
-  const ctx = getContext();
+export function executeCreateLayer(
+  projectStore: ProjectStore,
+  input: CreateLayerInput
+): CreateLayerOutput {
+  const ctx = getContext(projectStore);
   const result = mutateCreateLayer(ctx, input);
 
   // Update local index tracker
@@ -86,26 +89,36 @@ export function executeCreateLayer(input: CreateLayerInput): CreateLayerOutput {
 /**
  * Execute animate_layer tool
  */
-export function executeAnimateLayer(input: AnimateLayerInput): AnimateLayerOutput {
-  return mutateAnimateLayer(getContext(), input);
+export function executeAnimateLayer(
+  projectStore: ProjectStore,
+  input: AnimateLayerInput
+): AnimateLayerOutput {
+  return mutateAnimateLayer(getContext(projectStore), input);
 }
 
 /**
  * Execute edit_layer tool
  */
-export function executeEditLayer(input: EditLayerInput): EditLayerOutput {
-  return mutateEditLayer(getContext(), input);
+export function executeEditLayer(
+  projectStore: ProjectStore,
+  input: EditLayerInput
+): EditLayerOutput {
+  return mutateEditLayer(getContext(projectStore), input);
 }
 
 /**
  * Execute remove_layer tool
  */
-export function executeRemoveLayer(input: RemoveLayerInput): RemoveLayerOutput {
-  const result = mutateRemoveLayer(getContext(), input);
+export function executeRemoveLayer(
+  projectStore: ProjectStore,
+  input: RemoveLayerInput
+): RemoveLayerOutput {
+  const result = mutateRemoveLayer(getContext(projectStore), input);
   if (result.success) {
     if (
       projectStore.selectedLayerId &&
-      getContext().project.layers.find((l) => l.id === projectStore.selectedLayerId) === undefined
+      getContext(projectStore).project.layers.find((l) => l.id === projectStore.selectedLayerId) ===
+        undefined
     ) {
       projectStore.selectedLayerId = null;
     }
@@ -116,6 +129,9 @@ export function executeRemoveLayer(input: RemoveLayerInput): RemoveLayerOutput {
 /**
  * Execute configure_project tool
  */
-export function executeConfigureProject(input: ConfigureProjectInput): ConfigureProjectOutput {
-  return mutateConfigureProject(getContext(), input);
+export function executeConfigureProject(
+  projectStore: ProjectStore,
+  input: ConfigureProjectInput
+): ConfigureProjectOutput {
+  return mutateConfigureProject(getContext(projectStore), input);
 }
diff --git a/src/lib/components/ai/ai-chat.svelte b/src/lib/components/ai/ai-chat.svelte
index ef62d65..77be9bd 100644
--- a/src/lib/components/ai/ai-chat.svelte
+++ b/src/lib/components/ai/ai-chat.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { projectStore } from '$lib/stores/project.svelte';
+  import { getEditorState } from '$lib/contexts/editor.svelte';
   import { Button } from '$lib/components/ui/button';
   import { Bot, Loader2, User } from '@lucide/svelte';
   import { AI_MODELS, DEFAULT_MODEL_ID } from '$lib/ai/models';
@@ -32,6 +32,9 @@
   import { PersistedState } from 'runed';
   import ToolPart from './tool-part.svelte';
 
+  const editorState = $derived(getEditorState());
+  const projectStore = $derived(editorState.project);
+
   interface Props {
     selectedModelId?: string;
   }
@@ -48,7 +51,7 @@
       api: resolve('/(app)/chat'),
       get body() {
         return {
-          project: projectStore.project,
+          project: projectStore.state,
           modelId: selectedModelId
         } satisfies Omit<GenerateRequest, 'messages'>;
       }
@@ -68,7 +71,7 @@
         const layerType = getLayerTypeFromToolName(toolName);
         if (layerType) {
           const input = toolCall.input as CreateLayerInput;
-          result = executeCreateLayer({
+          result = executeCreateLayer(projectStore, {
             type: layerType,
             name: input.name,
             position: input.position,
@@ -82,16 +85,16 @@
         // Handle other tools
         switch (toolName) {
           case 'animate_layer':
-            result = executeAnimateLayer(toolCall.input as AnimateLayerInput);
+            result = executeAnimateLayer(projectStore, toolCall.input as AnimateLayerInput);
             break;
           case 'edit_layer':
-            result = executeEditLayer(toolCall.input as EditLayerInput);
+            result = executeEditLayer(projectStore, toolCall.input as EditLayerInput);
             break;
           case 'remove_layer':
-            result = executeRemoveLayer(toolCall.input as RemoveLayerInput);
+            result = executeRemoveLayer(projectStore, toolCall.input as RemoveLayerInput);
             break;
           case 'configure_project':
-            result = executeConfigureProject(toolCall.input as ConfigureProjectInput);
+            result = executeConfigureProject(projectStore, toolCall.input as ConfigureProjectInput);
             break;
           default:
             result = { success: false, error: `Unknown tool: ${toolName}` };
diff --git a/src/lib/components/editor/VideoRecorder.svelte b/src/lib/components/editor/VideoRecorder.svelte
index a1d2c8f..ced4739 100644
--- a/src/lib/components/editor/VideoRecorder.svelte
+++ b/src/lib/components/editor/VideoRecorder.svelte
@@ -245,7 +245,9 @@
         <!-- Recording indicator overlay -->
         <div class="absolute top-2 left-2 flex items-center gap-2 rounded bg-black/50 px-2 py-1">
           <div class="h-2 w-2 animate-pulse rounded-full bg-destructive"></div>
-          <span class="text-xs font-medium text-white">Recording {recordingMode === 'screen' ? 'Screen' : 'Camera'}</span>
+          <span class="text-xs font-medium text-white"
+            >Recording {recordingMode === 'screen' ? 'Screen' : 'Camera'}</span
+          >
         </div>
 
         <!-- Duration overlay -->
@@ -291,16 +293,22 @@
     <div class="flex gap-1 rounded border bg-muted/30 p-1">
       <button
         type="button"
-        class="flex flex-1 items-center justify-center gap-1 rounded px-2 py-1.5 text-xs transition-colors {recordingMode === 'camera' ? 'bg-background shadow-sm' : 'hover:bg-background/50'}"
-        onclick={() => recordingMode = 'camera'}
+        class="flex flex-1 items-center justify-center gap-1 rounded px-2 py-1.5 text-xs transition-colors {recordingMode ===
+        'camera'
+          ? 'bg-background shadow-sm'
+          : 'hover:bg-background/50'}"
+        onclick={() => (recordingMode = 'camera')}
       >
         <Camera class="size-3" />
         Camera
       </button>
       <button
         type="button"
-        class="flex flex-1 items-center justify-center gap-1 rounded px-2 py-1.5 text-xs transition-colors {recordingMode === 'screen' ? 'bg-background shadow-sm' : 'hover:bg-background/50'}"
-        onclick={() => recordingMode = 'screen'}
+        class="flex flex-1 items-center justify-center gap-1 rounded px-2 py-1.5 text-xs transition-colors {recordingMode ===
+        'screen'
+          ? 'bg-background shadow-sm'
+          : 'hover:bg-background/50'}"
+        onclick={() => (recordingMode = 'screen')}
       >
         <Monitor class="size-3" />
         Screen
diff --git a/src/lib/components/editor/canvas/canvas-controls.svelte b/src/lib/components/editor/canvas/canvas-controls.svelte
index 1971590..ba3319b 100644
--- a/src/lib/components/editor/canvas/canvas-controls.svelte
+++ b/src/lib/components/editor/canvas/canvas-controls.svelte
@@ -1,7 +1,10 @@
 <script lang="ts">
   import { Button } from '$lib/components/ui/button';
   import { ZoomIn, ZoomOut, Maximize } from '@lucide/svelte';
-  import { projectStore } from '$lib/stores/project.svelte';
+  import { getEditorState } from '$lib/contexts/editor.svelte';
+
+  const editorState = $derived(getEditorState());
+  const projectStore = $derived(editorState.project);
 
   function zoomIn() {
     projectStore.setZoom(projectStore.viewport.zoom * 1.25);
diff --git a/src/lib/components/editor/canvas/canvas.svelte b/src/lib/components/editor/canvas/canvas.svelte
index 438a234..7371fc3 100644
--- a/src/lib/components/editor/canvas/canvas.svelte
+++ b/src/lib/components/editor/canvas/canvas.svelte
@@ -1,12 +1,15 @@
 <script lang="ts">
   import { onMount } from 'svelte';
-  import { projectStore } from '$lib/stores/project.svelte';
+  import { getEditorState } from '$lib/contexts/editor.svelte';
   import CanvasControls from './canvas-controls.svelte';
   import PlaybackControls from './playback-controls.svelte';
   import LayersRenderer from './layers-renderer.svelte';
   import Watermark from './watermark.svelte';
   import { getBackgroundColor, getBackgroundImage } from '$lib/schemas/background';
 
+  const editorState = $derived(getEditorState());
+  const projectStore = $derived(editorState.project);
+
   let canvasContainer: HTMLDivElement | undefined = $state();
 
   let {
@@ -64,10 +67,10 @@
 
       const newTime = projectStore.currentTime + deltaTime;
 
-      if (newTime >= projectStore.project.duration) {
+      if (newTime >= projectStore.state.duration) {
         // When recording, stop at the end instead of looping
         if (projectStore.isRecording) {
-          projectStore.setCurrentTime(projectStore.project.duration);
+          projectStore.setCurrentTime(projectStore.state.duration);
           projectStore.pause();
         } else {
           projectStore.setCurrentTime(0);
@@ -137,13 +140,13 @@
   // Calculate scale factor to fit project dimensions in viewport
   // This maintains aspect ratio and leaves some padding
   const VIEWPORT_PADDING = 0.9; // Use 90% of available space for padding
-  const projectAspectRatio = $derived(projectStore.project.width / projectStore.project.height);
+  const projectAspectRatio = $derived(projectStore.state.width / projectStore.state.height);
   const containerAspectRatio = $derived(containerWidth / containerHeight);
 
   const fitScale = $derived(
     containerAspectRatio > projectAspectRatio
-      ? (containerHeight * VIEWPORT_PADDING) / projectStore.project.height
-      : (containerWidth * VIEWPORT_PADDING) / projectStore.project.width
+      ? (containerHeight * VIEWPORT_PADDING) / projectStore.state.height
+      : (containerWidth * VIEWPORT_PADDING) / projectStore.state.width
   );
 
   // Calculate viewport transform for pan, zoom, and fit scale
@@ -154,8 +157,8 @@
   // Calculate scale for recording mode to fit viewport while maintaining aspect ratio
   const recordingScale = $derived.by(() => {
     if (typeof window === 'undefined') return 1;
-    const scaleX = window.innerWidth / projectStore.project.width;
-    const scaleY = window.innerHeight / projectStore.project.height;
+    const scaleX = window.innerWidth / projectStore.state.width;
+    const scaleY = window.innerHeight / projectStore.state.height;
     return Math.min(1, scaleX, scaleY); // Never scale up, only down
   });
 </script>
@@ -187,7 +190,7 @@
           style:left="-10000px"
           style:top="-10000px"
           style:background-color="rgba(127, 127, 127, 0.6)"
-          style:clip-path={`polygon(evenodd, 0 0, 0 20000px, 20000px 20000px, 20000px 0, 0 0, ${10000 - projectStore.project.width / 2}px ${10000 - projectStore.project.height / 2}px, ${10000 - projectStore.project.width / 2}px ${10000 + projectStore.project.height / 2}px, ${10000 + projectStore.project.width / 2}px ${10000 + projectStore.project.height / 2}px, ${10000 + projectStore.project.width / 2}px ${10000 - projectStore.project.height / 2}px, ${10000 - projectStore.project.width / 2}px ${10000 - projectStore.project.height / 2}px)`}
+          style:clip-path={`polygon(evenodd, 0 0, 0 20000px, 20000px 20000px, 20000px 0, 0 0, ${10000 - projectStore.state.width / 2}px ${10000 - projectStore.state.height / 2}px, ${10000 - projectStore.state.width / 2}px ${10000 + projectStore.state.height / 2}px, ${10000 + projectStore.state.width / 2}px ${10000 + projectStore.state.height / 2}px, ${10000 + projectStore.state.width / 2}px ${10000 - projectStore.state.height / 2}px, ${10000 - projectStore.state.width / 2}px ${10000 - projectStore.state.height / 2}px)`}
           style:pointer-events="none"
         ></div>
       {/if}
@@ -197,17 +200,17 @@
         bind:this={projectViewport}
         class="project-viewport"
         class:project-viewport-recording={isRecording}
-        style:width="{projectStore.project.width}px"
-        style:height="{projectStore.project.height}px"
-        style:left={isRecording ? 'auto' : `-${projectStore.project.width / 2}px`}
-        style:top={isRecording ? 'auto' : `-${projectStore.project.height / 2}px`}
+        style:width="{projectStore.state.width}px"
+        style:height="{projectStore.state.height}px"
+        style:left={isRecording ? 'auto' : `-${projectStore.state.width / 2}px`}
+        style:top={isRecording ? 'auto' : `-${projectStore.state.height / 2}px`}
         style:transform={isRecording ? `scale(${recordingScale})` : undefined}
         style:perspective="1000px"
         style:perspective-origin="center center"
         style:transform-style="preserve-3d"
         style:isolation="isolate"
-        style:background-color={getBackgroundColor(projectStore.project.background)}
-        style:background-image={getBackgroundImage(projectStore.project.background)}
+        style:background-color={getBackgroundColor(projectStore.state.background)}
+        style:background-image={getBackgroundImage(projectStore.state.background)}
         style:cursor={projectStore.isRecording ? 'none' : undefined}
       >
         <!-- Layers -->
@@ -217,9 +220,9 @@
           style:pointer-events={projectStore.isRecording ? 'none' : undefined}
         >
           <LayersRenderer
-            layers={projectStore.project.layers}
+            layers={projectStore.state.layers}
             currentTime={projectStore.currentTime}
-            duration={projectStore.project.duration}
+            duration={projectStore.state.duration}
             isPlaying={projectStore.isPlaying}
             selectedLayerId={projectStore.selectedLayerId}
             disableSelection={projectStore.isRecording}
diff --git a/src/lib/components/editor/canvas/playback-controls.svelte b/src/lib/components/editor/canvas/playback-controls.svelte
index 4e0dd3e..4b4d1bc 100644
--- a/src/lib/components/editor/canvas/playback-controls.svelte
+++ b/src/lib/components/editor/canvas/playback-controls.svelte
@@ -1,7 +1,10 @@
 <script lang="ts">
   import { Button } from '$lib/components/ui/button';
   import { Play, Pause, SkipBack } from '@lucide/svelte';
-  import { projectStore } from '$lib/stores/project.svelte';
+  import { getEditorState } from '$lib/contexts/editor.svelte';
+
+  const editorState = $derived(getEditorState());
+  const projectStore = $derived(editorState.project);
 
   function togglePlayback() {
     if (projectStore.isPlaying) {
diff --git a/src/lib/components/editor/editor-layout.svelte b/src/lib/components/editor/editor-layout.svelte
index da2d84d..0131f3c 100644
--- a/src/lib/components/editor/editor-layout.svelte
+++ b/src/lib/components/editor/editor-layout.svelte
@@ -7,7 +7,7 @@
   import Panel from './panels/panel.svelte';
   import KeyboardHandler from './keyboard-handler.svelte';
   import { ResizableHandle, ResizablePane, ResizablePaneGroup } from '$lib/components/ui/resizable';
-  import { projectStore } from '$lib/stores/project.svelte';
+  import { getEditorState } from '$lib/contexts/editor.svelte';
   import { Layers, Settings, Clock, Sparkles } from '@lucide/svelte';
   import AiChat from '$lib/components/ai/ai-chat.svelte';
   import ModelSelector from '$lib/components/ai/model-selector.svelte';
@@ -15,6 +15,9 @@
   import AddLayer from './panels/add-layer.svelte';
   import { IsMobile } from '$lib/hooks/is-mobile.svelte';
 
+  const editorState = $derived(getEditorState());
+  const projectStore = $derived(editorState.project);
+
   interface Props {
     projectId?: string | null;
     isOwner?: boolean;
@@ -102,7 +105,7 @@
 
         <!-- Layers Panel -->
         <Panel
-          title="Layers ({projectStore.project.layers.length})"
+          title="Layers ({projectStore.state.layers.length})"
           icon={Layers}
           actionsComponent={AddLayer}
           collapsible={true}
@@ -132,7 +135,7 @@
             {/snippet}
             {#snippet actionsSnippet()}
               <span class="text-xs text-muted-foreground">
-                {projectStore.currentTime.toFixed(2)}s / {projectStore.project.duration}s
+                {projectStore.currentTime.toFixed(2)}s / {projectStore.state.duration}s
               </span>
             {/snippet}
           </Panel>
@@ -164,7 +167,7 @@
           <ResizablePaneGroup direction="vertical">
             <ResizablePane defaultSize={60} minSize={30}>
               <Panel
-                title="Layers ({projectStore.project.layers.length})"
+                title="Layers ({projectStore.state.layers.length})"
                 actionsComponent={AddLayer}
               >
                 {#snippet content()}
@@ -208,7 +211,7 @@
                   {/snippet}
                   {#snippet actionsSnippet()}
                     <span class="text-xs text-muted-foreground">
-                      {projectStore.currentTime.toFixed(2)}s / {projectStore.project.duration}s
+                      {projectStore.currentTime.toFixed(2)}s / {projectStore.state.duration}s
                     </span>
                   {/snippet}
                 </Panel>
diff --git a/src/lib/components/editor/export-dialog.svelte b/src/lib/components/editor/export-dialog.svelte
index bfb7a05..df7f466 100644
--- a/src/lib/components/editor/export-dialog.svelte
+++ b/src/lib/components/editor/export-dialog.svelte
@@ -11,10 +11,13 @@
   import { Label } from '$lib/components/ui/label';
   import { Input } from '$lib/components/ui/input';
   import { Progress } from '$lib/components/ui/progress';
-  import { projectStore } from '$lib/stores/project.svelte';
+  import { getEditorState } from '$lib/contexts/editor.svelte';
   import { VideoCapture } from '$lib/utils/video-capture';
   import { Loader2, AlertCircle, Monitor, Server } from '@lucide/svelte';
 
+  const editorState = $derived(getEditorState());
+  const projectStore = $derived(editorState.project);
+
   interface Props {
     open: boolean;
     onOpenChange: (open: boolean) => void;
@@ -43,9 +46,9 @@
 
   let exportSettings = $derived({
     format: 'webm',
-    fps: projectStore.project.fps,
-    width: projectStore.project.width,
-    height: projectStore.project.height
+    fps: projectStore.state.fps,
+    width: projectStore.state.width,
+    height: projectStore.state.height
   });
 
   let exportMode = $derived<ExportMode>(projectId ? 'server' : 'browser');
@@ -123,7 +126,7 @@
 
       // In a streaming response, we have to read it as a blob if we want to trigger a download window
       const blob = await response.blob();
-      const filename = `${projectStore.project.name || 'video'}.mp4`;
+      const filename = `${projectStore.state.name || 'video'}.mp4`;
 
       const url = URL.createObjectURL(blob);
       const a = document.createElement('a');
@@ -209,7 +212,7 @@
         width: exportSettings.width,
         height: exportSettings.height,
         fps: exportSettings.fps,
-        duration: projectStore.project.duration,
+        duration: projectStore.state.duration,
         onReadyToRecord: () => {
           // Start playback synchronized with recording
           projectStore.play();
@@ -233,7 +236,7 @@
 
           try {
             // Download the video
-            const filename = `${projectStore.project.name || 'video'}.mp4`;
+            const filename = `${projectStore.state.name || 'video'}.mp4`;
             VideoCapture.downloadBlob(blob, filename);
 
             // Close dialog after successful export
diff --git a/src/lib/components/editor/keyboard-handler.svelte b/src/lib/components/editor/keyboard-handler.svelte
index 76c3375..36a1a63 100644
--- a/src/lib/components/editor/keyboard-handler.svelte
+++ b/src/lib/components/editor/keyboard-handler.svelte
@@ -1,8 +1,11 @@
 <script lang="ts">
   import { onMount } from 'svelte';
-  import { projectStore } from '$lib/stores/project.svelte';
+  import { getEditorState } from '$lib/contexts/editor.svelte';
   import { createLayer } from '$lib/engine/layer-factory';
 
+  const editorState = $derived(getEditorState());
+  const projectStore = $derived(editorState.project);
+
   onMount(() => {
     function handleKeyDown(e: KeyboardEvent) {
       // Ignore if typing in input
@@ -71,21 +74,21 @@
       // End - Go to end
       if (e.code === 'End') {
         e.preventDefault();
-        projectStore.setCurrentTime(projectStore.project.duration);
+        projectStore.setCurrentTime(projectStore.state.duration);
       }
 
       // Arrow Left - Step backward
       if (e.code === 'ArrowLeft' && !projectStore.isPlaying) {
         e.preventDefault();
-        const newTime = projectStore.currentTime - 1 / projectStore.project.fps;
+        const newTime = projectStore.currentTime - 1 / projectStore.state.fps;
         projectStore.setCurrentTime(Math.max(0, newTime));
       }
 
       // Arrow Right - Step forward
       if (e.code === 'ArrowRight' && !projectStore.isPlaying) {
         e.preventDefault();
-        const newTime = projectStore.currentTime + 1 / projectStore.project.fps;
-        projectStore.setCurrentTime(Math.min(newTime, projectStore.project.duration));
+        const newTime = projectStore.currentTime + 1 / projectStore.state.fps;
+        projectStore.setCurrentTime(Math.min(newTime, projectStore.state.duration));
       }
 
       // + / = - Zoom in
diff --git a/src/lib/components/editor/keyframe-card.svelte b/src/lib/components/editor/keyframe-card.svelte
index ef6bf8f..fbf5f26 100644
--- a/src/lib/components/editor/keyframe-card.svelte
+++ b/src/lib/components/editor/keyframe-card.svelte
@@ -1,11 +1,14 @@
 <script lang="ts">
   import type { Keyframe, Interpolation } from '$lib/types/animation';
-  import { projectStore } from '$lib/stores/project.svelte';
+  import { getEditorState } from '$lib/contexts/editor.svelte';
   import { Button } from '$lib/components/ui/button';
   import * as Popover from '$lib/components/ui/popover';
   import { Trash2, Palette, Move, RotateCw, Scale, Eye, Clock } from '@lucide/svelte';
   import ScrubInput from './panels/scrub-input.svelte';
 
+  const editorState = $derived(getEditorState());
+  const projectStore = $derived(editorState.project);
+
   interface Props {
     keyframe: Keyframe;
     layerId: string;
@@ -118,7 +121,7 @@
   }
 
   function handleTimeChange(newTime: number) {
-    const clampedTime = Math.max(0, Math.min(newTime, projectStore.project.duration));
+    const clampedTime = Math.max(0, Math.min(newTime, projectStore.state.duration));
     projectStore.updateKeyframe(layerId, keyframe.id, { time: clampedTime });
   }
 
@@ -231,7 +234,7 @@
             value={keyframe.time}
             step={0.01}
             min={0}
-            max={projectStore.project.duration}
+            max={projectStore.state.duration}
             onchange={handleTimeChange}
           />
           <span
diff --git a/src/lib/components/editor/login-prompt-dialog.svelte b/src/lib/components/editor/login-prompt-dialog.svelte
index 53404c6..5f42248 100644
--- a/src/lib/components/editor/login-prompt-dialog.svelte
+++ b/src/lib/components/editor/login-prompt-dialog.svelte
@@ -3,8 +3,6 @@
   import { Button } from '$lib/components/ui/button';
   import GoogleIcon from '$lib/assets/svg/google-icon.svelte';
   import { authClient } from '$lib/auth-client';
-  import { resolve } from '$app/paths';
-  import { goto } from '$app/navigation';
 
   interface Props {
     open: boolean;
@@ -24,15 +22,10 @@
       console.error('Google login failed:', error);
     }
   }
-
-  function handleEmailLogin() {
-    open = false;
-    goto(resolve('/login'));
-  }
 </script>
 
 <Dialog.Root bind:open>
-  <Dialog.Content class="max-w-sm">
+  <Dialog.Content class="w-[24rem]">
     <Dialog.Header>
       <Dialog.Title>Login required</Dialog.Title>
       <Dialog.Description>
@@ -42,11 +35,9 @@
 
     <div class="flex flex-col gap-3 pt-2">
       <Button class="w-full" onclick={handleGoogleLogin} icon={GoogleIcon}>
-        Continue with Google — free AI credits included
-      </Button>
-      <Button variant="outline" class="w-full" onclick={handleEmailLogin}>
-        Sign in with email
+        Continue with Google
       </Button>
+      <div class="text-right text-xs text-muted-foreground">free AI credits included</div>
     </div>
   </Dialog.Content>
 </Dialog.Root>
diff --git a/src/lib/components/editor/panels/add-layer.svelte b/src/lib/components/editor/panels/add-layer.svelte
index 3a0bf8f..f97eac5 100644
--- a/src/lib/components/editor/panels/add-layer.svelte
+++ b/src/lib/components/editor/panels/add-layer.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { projectStore } from '$lib/stores/project.svelte';
+  import { getEditorState } from '$lib/contexts/editor.svelte';
   import { Button } from '$lib/components/ui/button';
   import * as DropdownMenu from '$lib/components/ui/dropdown-menu';
   import { Code, Film, LayoutGrid, Plus, Shapes, Type } from '@lucide/svelte';
@@ -11,6 +11,9 @@
   import { SvelteMap } from 'svelte/reactivity';
   import type { Component } from 'svelte';
 
+  const editorState = $derived(getEditorState());
+  const projectStore = $derived(editorState.project);
+
   function addLayer(type: LiteralUnion<LayerTypeString, string>) {
     const layer = createLayer(type, { trasform: { x: 0, y: 0 } });
     projectStore.addLayer(layer);
diff --git a/src/lib/components/editor/panels/input-propery.svelte b/src/lib/components/editor/panels/input-propery.svelte
index 246539d..5760f3b 100644
--- a/src/lib/components/editor/panels/input-propery.svelte
+++ b/src/lib/components/editor/panels/input-propery.svelte
@@ -4,11 +4,14 @@
   import type { PropertyMetadata } from '$lib/layers/base';
   import type { TypedLayer } from '$lib/layers/typed-registry';
   import type { BackgroundValue } from '$lib/schemas/animation';
-  import { projectStore } from '$lib/stores/project.svelte';
+  import { getEditorState } from '$lib/contexts/editor.svelte';
   import FileUpload from '../FileUpload.svelte';
   import BackgroundPicker from './background-picker.svelte';
   import ScrubInput from './scrub-input.svelte';
 
+  const editorState = $derived(getEditorState());
+  const projectStore = $derived(editorState.project);
+
   const {
     metadata,
     value,
@@ -28,7 +31,7 @@
     value={typeof value === 'string' ? value : ''}
     currentFileName={typeof layer.props.fileName === 'string' ? layer.props.fileName : ''}
     mediaType={metadata.meta.mediaType}
-    projectId={projectStore.dbProjectId ?? undefined}
+    projectId={editorState.dbProjectId ?? undefined}
     onUpload={(result) => {
       onUpdateProp(metadata.name, result.url);
       onUpdateProp('fileKey', result.key);
diff --git a/src/lib/components/editor/panels/input-wrapper.svelte b/src/lib/components/editor/panels/input-wrapper.svelte
index 09d6d2c..d8a25bd 100644
--- a/src/lib/components/editor/panels/input-wrapper.svelte
+++ b/src/lib/components/editor/panels/input-wrapper.svelte
@@ -1,10 +1,13 @@
 <script lang="ts">
   import Label from '$lib/components/ui/label/label.svelte';
   import type { AnimatableProperty } from '$lib/schemas/animation';
-  import { projectStore } from '$lib/stores/project.svelte';
+  import { getEditorState } from '$lib/contexts/editor.svelte';
   import type { Snippet } from 'svelte';
   import InputPin from './input-pin.svelte';
 
+  const editorState = $derived(getEditorState());
+  const projectStore = $derived(editorState.project);
+
   const {
     id,
     label,
diff --git a/src/lib/components/editor/panels/layers-panel.svelte b/src/lib/components/editor/panels/layers-panel.svelte
index 36185ba..ae70613 100644
--- a/src/lib/components/editor/panels/layers-panel.svelte
+++ b/src/lib/components/editor/panels/layers-panel.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { projectStore } from '$lib/stores/project.svelte';
+  import { getEditorState } from '$lib/contexts/editor.svelte';
   import { Button } from '$lib/components/ui/button';
   import { Eye, EyeOff, Lock, Unlock, Trash2 } from '@lucide/svelte';
   import * as Popover from '$lib/components/ui/popover';
@@ -7,6 +7,9 @@
   import { cn } from '$lib/utils';
   import type { TypedLayer } from '$lib/layers/typed-registry';
 
+  const editorState = $derived(getEditorState());
+  const projectStore = $derived(editorState.project);
+
   let deletePopoverOpenLayerId = $state<string | null>(null);
 
   function selectLayer(layerId: string) {
@@ -58,7 +61,7 @@
   class:pointer-events-none={projectStore.isRecording}
   class:opacity-50={projectStore.isRecording}
 >
-  {#each projectStore.project.layers as layer, index (layer.id)}
+  {#each projectStore.state.layers as layer, index (layer.id)}
     {@const Icon = getLayerDefinition(layer.type).icon}
     <div
       class="group flex cursor-pointer items-center gap-2 rounded-md px-3 py-2 transition-colors hover:bg-muted/50"
@@ -162,7 +165,7 @@
     </div>
   {/each}
 
-  {#if projectStore.project.layers.length === 0}
+  {#if projectStore.state.layers.length === 0}
     <div class="py-8 text-center text-sm text-muted-foreground">
       <p>No layers yet</p>
       <p class="mt-1 text-xs">Add layers from the toolbar</p>
diff --git a/src/lib/components/editor/panels/properties-panel.svelte b/src/lib/components/editor/panels/properties-panel.svelte
index c6d7c2d..a3a4afe 100644
--- a/src/lib/components/editor/panels/properties-panel.svelte
+++ b/src/lib/components/editor/panels/properties-panel.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { projectStore } from '$lib/stores/project.svelte';
+  import { getEditorState } from '$lib/contexts/editor.svelte';
   import { Label } from '$lib/components/ui/label';
   import { Input } from '$lib/components/ui/input';
   import { Button } from '$lib/components/ui/button';
@@ -47,6 +47,8 @@
   import LayerKeyframes from './layer-keyframes.svelte';
   import type { TypedLayer } from '$lib/layers/typed-registry';
 
+  const editorState = $derived(getEditorState());
+  const projectStore = $derived(editorState.project);
   const selectedLayer = $derived(projectStore.selectedLayer);
 
   // Extract property metadata from the layer's Zod schema
@@ -402,11 +404,11 @@
               min={0}
               max={selectedLayer.contentDuration !== undefined
                 ? Math.min(
-                    projectStore.project.duration,
-                    projectStore.project.duration -
+                    projectStore.state.duration,
+                    projectStore.state.duration -
                       (selectedLayer.contentDuration - (selectedLayer.contentOffset ?? 0))
                   )
-                : projectStore.project.duration}
+                : projectStore.state.duration}
               step={0.1}
               onchange={(v) => projectStore.setLayerEnterTime(selectedLayer.id, v)}
             />
@@ -415,9 +417,9 @@
             <Label class="text-xs text-muted-foreground">Exit (s)</Label>
             <ScrubInput
               id="exit-time"
-              value={selectedLayer.exitTime ?? projectStore.project.duration}
+              value={selectedLayer.exitTime ?? projectStore.state.duration}
               min={0}
-              max={projectStore.project.duration}
+              max={projectStore.state.duration}
               step={0.1}
               onchange={(v) => projectStore.setLayerExitTime(selectedLayer.id, v)}
             />
diff --git a/src/lib/components/editor/project-settings-dialog.svelte b/src/lib/components/editor/project-settings-dialog.svelte
index f91e4e4..63da774 100644
--- a/src/lib/components/editor/project-settings-dialog.svelte
+++ b/src/lib/components/editor/project-settings-dialog.svelte
@@ -22,12 +22,15 @@
   import { Label } from '$lib/components/ui/label';
   import { Input } from '$lib/components/ui/input';
   import { Select } from '$lib/components/ui/select';
-  import { projectStore } from '$lib/stores/project.svelte';
+  import { getEditorState } from '$lib/contexts/editor.svelte';
   import { Settings } from '@lucide/svelte';
   import BackgroundPicker from './panels/background-picker.svelte';
   import { BRAND_COLORS } from '$lib/constants/branding';
   import type { Project } from '$lib/schemas/animation';
 
+  const editorState = $derived(getEditorState());
+  const projectStore = $derived(editorState.project);
+
   interface Props {
     open: boolean;
   }
@@ -35,16 +38,16 @@
   let { open = $bindable() }: Props = $props();
 
   let formData: Pick<Project, 'name' | 'width' | 'height' | 'duration' | 'background'> = $derived({
-    name: projectStore.project.name,
-    width: projectStore.project.width,
-    height: projectStore.project.height,
-    duration: projectStore.project.duration,
-    background: projectStore.project.background
+    name: projectStore.state.name,
+    width: projectStore.state.width,
+    height: projectStore.state.height,
+    duration: projectStore.state.duration,
+    background: projectStore.state.background
   });
 
   let selectedResolution = $derived.by(() => {
     const res = commonResolutions.find(
-      (r) => r.width === projectStore.project.width && r.height === projectStore.project.height
+      (r) => r.width === projectStore.state.width && r.height === projectStore.state.height
     );
     return res ? `${res.width}x${res.height}` : 'custom';
   });
@@ -63,11 +66,11 @@
   }
 
   function handleSave() {
-    projectStore.project.name = formData.name;
-    projectStore.project.width = formData.width;
-    projectStore.project.height = formData.height;
-    projectStore.project.duration = formData.duration;
-    projectStore.project.background = formData.background;
+    projectStore.state.name = formData.name;
+    projectStore.state.width = formData.width;
+    projectStore.state.height = formData.height;
+    projectStore.state.duration = formData.duration;
+    projectStore.state.background = formData.background;
 
     open = false;
   }
@@ -75,14 +78,14 @@
   function handleOpenChange(newOpen: boolean) {
     if (newOpen) {
       // Reset form to current project state when opening
-      formData.name = projectStore.project.name;
-      formData.width = projectStore.project.width;
-      formData.height = projectStore.project.height;
-      formData.duration = projectStore.project.duration;
-      formData.background = projectStore.project.background;
+      formData.name = projectStore.state.name;
+      formData.width = projectStore.state.width;
+      formData.height = projectStore.state.height;
+      formData.duration = projectStore.state.duration;
+      formData.background = projectStore.state.background;
 
       const res = commonResolutions.find(
-        (r) => r.width === projectStore.project.width && r.height === projectStore.project.height
+        (r) => r.width === projectStore.state.width && r.height === projectStore.state.height
       );
       selectedResolution = res ? `${res.width}x${res.height}` : 'custom';
     }
diff --git a/src/lib/components/editor/project-switcher.svelte b/src/lib/components/editor/project-switcher.svelte
index 5d0a032..c107b3e 100644
--- a/src/lib/components/editor/project-switcher.svelte
+++ b/src/lib/components/editor/project-switcher.svelte
@@ -15,11 +15,13 @@
   } from '@lucide/svelte';
   import { getUserProjects, deleteProject, renameProject } from '$lib/functions/projects.remote';
   import { goto } from '$app/navigation';
-  import { projectStore } from '$lib/stores/project.svelte';
+  import { getEditorState } from '$lib/contexts/editor.svelte';
   import { resolve } from '$app/paths';
   import { getUser } from '$lib/functions/auth.remote';
   import Input from '../ui/input/input.svelte';
 
+  const editorState = $derived(getEditorState());
+
   interface Props {
     currentProjectId?: string | null;
   }
@@ -42,7 +44,7 @@
   const user = $derived(await getUser());
 
   function handleNewProject() {
-    projectStore.resetToNew();
+    editorState.resetToNew();
     goto(resolve('/'));
   }
 
diff --git a/src/lib/components/editor/timeline/timeline-keyframe.svelte b/src/lib/components/editor/timeline/timeline-keyframe.svelte
index 548e486..cc6d49f 100644
--- a/src/lib/components/editor/timeline/timeline-keyframe.svelte
+++ b/src/lib/components/editor/timeline/timeline-keyframe.svelte
@@ -1,11 +1,14 @@
 <script lang="ts">
   import type { Keyframe } from '$lib/types/animation';
-  import { projectStore } from '$lib/stores/project.svelte';
+  import { getEditorState } from '$lib/contexts/editor.svelte';
   import * as Popover from '$lib/components/ui/popover';
   import { Button } from '$lib/components/ui/button';
   import { Clock, Trash2 } from '@lucide/svelte';
   import KeyframeCard from '../keyframe-card.svelte';
 
+  const editorState = $derived(getEditorState());
+  const projectStore = $derived(editorState.project);
+
   interface Props {
     keyframes: Keyframe[];
     pixelsPerSecond: number;
diff --git a/src/lib/components/editor/timeline/timeline-layer.svelte b/src/lib/components/editor/timeline/timeline-layer.svelte
index a5b39f9..3faffb8 100644
--- a/src/lib/components/editor/timeline/timeline-layer.svelte
+++ b/src/lib/components/editor/timeline/timeline-layer.svelte
@@ -1,10 +1,13 @@
 <script lang="ts">
   import type { Keyframe } from '$lib/types/animation';
-  import { projectStore } from '$lib/stores/project.svelte';
+  import { getEditorState } from '$lib/contexts/editor.svelte';
   import TimelineKeyframe from './timeline-keyframe.svelte';
   import { onDestroy } from 'svelte';
   import type { TypedLayer } from '$lib/layers/typed-registry';
 
+  const editorState = $derived(getEditorState());
+  const projectStore = $derived(editorState.project);
+
   interface Props {
     layer: TypedLayer;
     pixelsPerSecond: number;
@@ -16,8 +19,8 @@
 
   // Enter/exit time for the layer
   const enterTime = $derived(layer.enterTime ?? 0);
-  const exitTime = $derived(layer.exitTime ?? projectStore.project.duration);
-  const hasTimeRange = $derived(enterTime > 0 || exitTime < projectStore.project.duration);
+  const exitTime = $derived(layer.exitTime ?? projectStore.state.duration);
+  const hasTimeRange = $derived(enterTime > 0 || exitTime < projectStore.state.duration);
 
   const isMediaLayer = $derived(
     layer.type === 'video' || layer.type === 'audio' || layer.type === 'captions'
@@ -103,7 +106,7 @@
     } else if (isDraggingExit) {
       const newExit = Math.max(
         enterTime + 0.1,
-        Math.min(dragStartExit + deltaTime, projectStore.project.duration)
+        Math.min(dragStartExit + deltaTime, projectStore.state.duration)
       );
       projectStore.setLayerExitTime(layer.id, newExit);
     } else if (isDraggingBar) {
@@ -115,8 +118,8 @@
         newEnter = 0;
         newExit = duration;
       }
-      if (newExit > projectStore.project.duration) {
-        newExit = projectStore.project.duration;
+      if (newExit > projectStore.state.duration) {
+        newExit = projectStore.state.duration;
         newEnter = newExit - duration;
       }
 
diff --git a/src/lib/components/editor/timeline/timeline.svelte b/src/lib/components/editor/timeline/timeline.svelte
index 3c257fd..8f15605 100644
--- a/src/lib/components/editor/timeline/timeline.svelte
+++ b/src/lib/components/editor/timeline/timeline.svelte
@@ -1,11 +1,14 @@
 <script lang="ts">
-  import { projectStore } from '$lib/stores/project.svelte';
+  import { getEditorState } from '$lib/contexts/editor.svelte';
   import { SvelteSet } from 'svelte/reactivity';
   import { ScrollArea } from '$lib/components/ui/scroll-area';
   import TimelineRuler from './timeline-ruler.svelte';
   import TimelineLayer from './timeline-layer.svelte';
   import TimelinePlayhead from './timeline-playhead.svelte';
 
+  const editorState = $derived(getEditorState());
+  const projectStore = $derived(editorState.project);
+
   let timelineContainer: HTMLDivElement;
   let isDraggingPlayhead = $state(false);
   let isDraggingTimeline = $state(false);
@@ -20,7 +23,7 @@
     const rect = timelineContainer.getBoundingClientRect();
     const x = e.clientX - rect.left - 200; // 200px for layer names column
     const time = Math.max(0, x / pixelsPerSecond);
-    projectStore.setCurrentTime(Math.min(time, projectStore.project.duration));
+    projectStore.setCurrentTime(Math.min(time, projectStore.state.duration));
   }
 
   function handleTimelineMouseDown(e: MouseEvent) {
@@ -80,7 +83,7 @@
       const layerHeight = 49; // 48px + 1px border
       const activeLayerIds = new SvelteSet<string>();
 
-      projectStore.project.layers.forEach((layer, index) => {
+      projectStore.state.layers.forEach((layer, index) => {
         const layerTop = layerOffset + index * layerHeight;
         const layerBottom = layerTop + layerHeight;
 
@@ -154,7 +157,7 @@
     <div
       bind:this={timelineContainer}
       class="relative min-h-full select-none"
-      style="min-width: {projectStore.project.duration * pixelsPerSecond + 200}px"
+      style="min-width: {projectStore.state.duration * pixelsPerSecond + 200}px"
       onmousedown={handleTimelineMouseDown}
       onkeydown={handleKeyDown}
       role="button"
@@ -162,16 +165,16 @@
     >
       <!-- Ruler -->
       <div class="sticky top-0 z-10 border-b bg-background">
-        <TimelineRuler {pixelsPerSecond} duration={projectStore.project.duration} />
+        <TimelineRuler {pixelsPerSecond} duration={projectStore.state.duration} />
       </div>
 
       <!-- Layers -->
       <div class="relative">
-        {#each projectStore.project.layers as layer (layer.id)}
+        {#each projectStore.state.layers as layer (layer.id)}
           <TimelineLayer {layer} {pixelsPerSecond} />
         {/each}
 
-        {#if projectStore.project.layers.length === 0}
+        {#if projectStore.state.layers.length === 0}
           <div class="flex h-32 items-center justify-center text-sm text-muted-foreground">
             No layers yet. Add a layer to start animating.
           </div>
diff --git a/src/lib/components/editor/toolbar.svelte b/src/lib/components/editor/toolbar.svelte
index ce289ea..d9e919b 100644
--- a/src/lib/components/editor/toolbar.svelte
+++ b/src/lib/components/editor/toolbar.svelte
@@ -14,8 +14,11 @@
     Globe,
     Github
   } from '@lucide/svelte';
-  import { projectStore } from '$lib/stores/project.svelte';
+  import { getEditorState } from '$lib/contexts/editor.svelte';
   import ExportDialog from './export-dialog.svelte';
+
+  const editorState = $derived(getEditorState());
+  const projectStore = $derived(editorState.project);
   import * as DropdownMenu from '$lib/components/ui/dropdown-menu/index.js';
   import ProjectSettingsDialog from './project-settings-dialog.svelte';
   import { uiStore } from '$lib/stores/ui.svelte';
@@ -23,7 +26,8 @@
   import {
     saveProject as saveProjectToDb,
     toggleVisibility,
-    forkProject
+    forkProject,
+    getUserProjects
   } from '$lib/functions/projects.remote';
   import { goto } from '$app/navigation';
   import { resolve } from '$app/paths';
@@ -97,7 +101,7 @@
 
   async function openExportDialog() {
     // Check for unsaved changes
-    if (projectStore.hasUnsavedChanges && user) {
+    if (editorState.hasUnsavedChanges && user) {
       const shouldSave = confirm(
         'You have unsaved changes. Please save your project before exporting.'
       );
@@ -125,11 +129,11 @@
   async function doSaveToCloud() {
     const result = await saveProjectToDb({
       id: projectId || undefined,
-      data: projectStore.project
+      data: projectStore.state
     });
-
+    getUserProjects().refresh();
     if (result.success && result.data.id) {
-      projectStore.markAsSaved();
+      editorState.markAsSaved();
       if (!projectId) {
         goto(resolve(`/p/${result.data.id}`));
       }
@@ -203,7 +207,7 @@
       onclick: handleSaveToCloud,
       disabled: isRecording || !canEdit,
       visible: true,
-      showIndicator: projectStore.hasUnsavedChanges
+      showIndicator: editorState.hasUnsavedChanges
     },
     {
       id: 'visibility',
diff --git a/src/lib/components/layout/app-header.svelte b/src/lib/components/layout/app-header.svelte
index 5bfc831..349665a 100644
--- a/src/lib/components/layout/app-header.svelte
+++ b/src/lib/components/layout/app-header.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
   import Logo from '../editor/Logo.svelte';
   import { Button } from '$lib/components/ui/button';
-  import { Github, Image } from '@lucide/svelte';
+  import { Github } from '@lucide/svelte';
 
   interface Props {
     /**
diff --git a/src/lib/contexts/editor.svelte.ts b/src/lib/contexts/editor.svelte.ts
new file mode 100644
index 0000000..238d3a3
--- /dev/null
+++ b/src/lib/contexts/editor.svelte.ts
@@ -0,0 +1,161 @@
+/**
+ * Editor context for managing project state and persistence
+ */
+import { ProjectStore } from '$lib/stores/project.svelte';
+import type { Project } from '$lib/types/animation';
+import { createContext } from 'svelte';
+import { watch } from 'runed';
+import { nanoid } from 'nanoid';
+
+const STORAGE_KEY = 'devmotion_store';
+const DEBOUNCE_MS = 500;
+
+export type EditorContext = {
+  project: ProjectStore;
+  dbProjectId: string | null;
+  isOwner: boolean;
+  canEdit: boolean;
+  isPublic: boolean;
+  isMcp: boolean;
+  isSaving: boolean;
+  hasUnsavedChanges: boolean;
+  setDbContext: (
+    projectId: string | null,
+    isOwner: boolean,
+    canEdit: boolean,
+    isPublic: boolean
+  ) => void;
+  markAsSaved: () => void;
+  resetToNew: () => void;
+};
+
+function loadFromLocalStorage(): Project | null {
+  if (typeof localStorage === 'undefined') {
+    return null;
+  }
+
+  try {
+    const stored = localStorage.getItem(STORAGE_KEY);
+    if (stored) {
+      return JSON.parse(stored);
+    }
+  } catch (error) {
+    console.error('Failed to load project from localStorage:', error);
+  }
+
+  return null;
+}
+
+function saveToLocalStorage(project: Project) {
+  if (typeof localStorage === 'undefined') return;
+
+  try {
+    localStorage.setItem(STORAGE_KEY, JSON.stringify(project));
+    console.log('Project saved to localStorage');
+  } catch (error) {
+    console.error('Failed to save project to localStorage:', error);
+  }
+}
+
+export function getDefaultProject(): Project {
+  return {
+    id: nanoid(),
+    name: 'Untitled Project',
+    width: 720,
+    height: 1280,
+    duration: 5,
+    fps: 30,
+    background: '#000000',
+    layers: []
+  };
+}
+
+// Create context
+const [getEditorState, setEditorState] = createContext<EditorContext>();
+
+export { getEditorState };
+
+/**
+ * Initialize the editor context with localStorage persistence
+ * Call this once at the app root
+ */
+export function initializeEditorContext() {
+  // Load initial project from localStorage or create new
+  const initialProject = loadFromLocalStorage() ?? getDefaultProject();
+  const projectStore = new ProjectStore(initialProject);
+
+  const editorContext: EditorContext = $state({
+    project: projectStore,
+    dbProjectId: null,
+    isOwner: true,
+    canEdit: true,
+    isPublic: false,
+    isMcp: false,
+    isSaving: false,
+    hasUnsavedChanges: false,
+    setDbContext: (
+      projectId: string | null,
+      isOwner: boolean,
+      canEdit: boolean,
+      isPublic: boolean
+    ) => {
+      editorContext.dbProjectId = projectId;
+      editorContext.isOwner = isOwner;
+      editorContext.canEdit = canEdit;
+      editorContext.isPublic = isPublic;
+
+      // Clear localStorage when switching to a database project
+      if (projectId && typeof localStorage !== 'undefined') {
+        localStorage.removeItem(STORAGE_KEY);
+      }
+    },
+    markAsSaved: () => {
+      editorContext.hasUnsavedChanges = false;
+    },
+    resetToNew: () => {
+      editorContext.dbProjectId = null;
+      editorContext.isOwner = true;
+      editorContext.canEdit = true;
+      editorContext.isPublic = false;
+      editorContext.isMcp = false;
+      editorContext.hasUnsavedChanges = false;
+      projectStore.loadProject(getDefaultProject());
+    }
+  });
+
+  // Watch for project changes and auto-save to localStorage
+  let saveTimeout: ReturnType<typeof setTimeout> | null = null;
+  let initialized = false;
+
+  $effect.root(() => {
+    watch(
+      () => $state.snapshot(projectStore.state),
+      () => {
+        // Skip saving during initial load
+        if (!initialized) {
+          initialized = true;
+          return;
+        }
+
+        // Mark as having unsaved changes
+        editorContext.hasUnsavedChanges = true;
+
+        // Only save to localStorage if this is NOT a database project
+        if (editorContext.dbProjectId === null) {
+          // Debounced save
+          if (saveTimeout) {
+            clearTimeout(saveTimeout);
+          }
+          saveTimeout = setTimeout(() => {
+            saveToLocalStorage(projectStore.state);
+          }, DEBOUNCE_MS);
+        }
+      }
+    );
+  });
+
+  // Set the context
+  setEditorState(editorContext);
+
+  return editorContext;
+}
diff --git a/src/lib/layers/LayerWrapper.svelte b/src/lib/layers/LayerWrapper.svelte
index e7b9401..374c49c 100644
--- a/src/lib/layers/LayerWrapper.svelte
+++ b/src/lib/layers/LayerWrapper.svelte
@@ -1,11 +1,14 @@
 <script lang="ts" generics="T extends Record<string, unknown>">
   import { generateTransformCSS, type BaseLayerProps } from './base';
-  import { projectStore } from '$lib/stores/project.svelte';
+  import { getEditorState } from '$lib/contexts/editor.svelte';
   import { getAnimatedTransform } from '$lib/engine/interpolation';
   import { nanoid } from 'nanoid';
   import type { Component } from 'svelte';
   import { BRAND_COLORS } from '$lib/constants/branding';
 
+  const editorState = $derived(getEditorState());
+  const projectStore = $derived(editorState.project);
+
   interface Props extends BaseLayerProps {
     /**
      * The layer-specific component to render
@@ -60,8 +63,8 @@
     const canvasY = relY / viewport.zoom;
 
     // Canvas coordinates with (0,0) at center of canvas
-    const centerOffsetX = projectStore.project.width / 2;
-    const centerOffsetY = projectStore.project.height / 2;
+    const centerOffsetX = projectStore.state.width / 2;
+    const centerOffsetY = projectStore.state.height / 2;
 
     return {
       x: canvasX - centerOffsetX,
@@ -96,7 +99,7 @@
     if (!isDragging) return;
 
     const canvasPos = screenToCanvas(event.clientX, event.clientY);
-    const layer = projectStore.project.layers.find((l) => l.id === id);
+    const layer = projectStore.state.layers.find((l) => l.id === id);
 
     if (layer) {
       const movementX = canvasPos.x - dragStart.x;
diff --git a/src/lib/layers/components/AudioLayer.svelte b/src/lib/layers/components/AudioLayer.svelte
index aa45c9d..1a05fb7 100644
--- a/src/lib/layers/components/AudioLayer.svelte
+++ b/src/lib/layers/components/AudioLayer.svelte
@@ -5,7 +5,7 @@
   import { Music } from '@lucide/svelte';
   import GenerateCaption from '../properties/GenerateCaption.svelte';
   import { sizeMiddleware } from '$lib/schemas/size';
-  import AspectRatioToggle from '../properties/AspectRatioToggle.svelte';
+  
   import type { Layer } from '$lib/schemas/animation';
 
   /**
diff --git a/src/lib/layers/components/ImageLayer.svelte b/src/lib/layers/components/ImageLayer.svelte
index a5fc1c6..c57a132 100644
--- a/src/lib/layers/components/ImageLayer.svelte
+++ b/src/lib/layers/components/ImageLayer.svelte
@@ -3,7 +3,7 @@
   import type { LayerMeta } from '../registry';
   import { Image } from '@lucide/svelte';
   import { calculateCoverDimensions, ASPECT_RATIOS } from '$lib/utils/media';
-  import { projectStore } from '$lib/stores/project.svelte';
+  import { getEditorState } from '$lib/contexts/editor.svelte';
   import { fieldRegistry } from '../base';
   import { sizeMiddleware } from '$lib/schemas/size';
   import AspectRatioToggle from '../properties/AspectRatioToggle.svelte';
@@ -23,28 +23,28 @@
       .number()
       .min(1)
       .max(5000)
-      .default(
-        () =>
-          calculateCoverDimensions(
-            projectStore.project.width,
-            projectStore.project.height,
-            ASPECT_RATIOS.IMAGE_DEFAULT
-          ).width
-      )
+      .default(() => {
+        const editorState = getEditorState();
+        return calculateCoverDimensions(
+          editorState.project.state.width,
+          editorState.project.state.height,
+          ASPECT_RATIOS.IMAGE_DEFAULT
+        ).width;
+      })
       .describe('Width (px)')
       .register(fieldRegistry, { group: 'size', interpolationFamily: 'continuous' }),
     height: z
       .number()
       .min(1)
       .max(5000)
-      .default(
-        () =>
-          calculateCoverDimensions(
-            projectStore.project.width,
-            projectStore.project.height,
-            ASPECT_RATIOS.IMAGE_DEFAULT
-          ).height
-      )
+      .default(() => {
+        const editorState = getEditorState();
+        return calculateCoverDimensions(
+          editorState.project.state.width,
+          editorState.project.state.height,
+          ASPECT_RATIOS.IMAGE_DEFAULT
+        ).height;
+      })
       .describe('Height (px)')
       .register(fieldRegistry, { group: 'size', interpolationFamily: 'continuous' }),
     objectFit: z
diff --git a/src/lib/layers/components/VideoLayer.svelte b/src/lib/layers/components/VideoLayer.svelte
index e34e8d3..a75acfd 100644
--- a/src/lib/layers/components/VideoLayer.svelte
+++ b/src/lib/layers/components/VideoLayer.svelte
@@ -7,6 +7,7 @@
   import { sizeMiddleware } from '$lib/schemas/size';
   import AspectRatioToggle from '../properties/AspectRatioToggle.svelte';
   import GenerateCaption from '../properties/GenerateCaption.svelte';
+  import { getEditorState } from '$lib/contexts/editor.svelte';
 
   /**
    * Schema for Video Layer custom properties
@@ -21,28 +22,28 @@
       .number()
       .min(1)
       .max(5000)
-      .default(
-        () =>
-          calculateCoverDimensions(
-            projectStore.project.width,
-            projectStore.project.height,
-            ASPECT_RATIOS.VIDEO_DEFAULT
-          ).width
-      )
+      .default(() => {
+        const editorState = getEditorState();
+        return calculateCoverDimensions(
+          editorState.project.state.width,
+          editorState.project.state.height,
+          ASPECT_RATIOS.VIDEO_DEFAULT
+        ).width;
+      })
       .describe('Width (px)')
       .register(fieldRegistry, { group: 'size', interpolationFamily: 'continuous' }),
     height: z
       .number()
       .min(1)
       .max(5000)
-      .default(
-        () =>
-          calculateCoverDimensions(
-            projectStore.project.width,
-            projectStore.project.height,
-            ASPECT_RATIOS.VIDEO_DEFAULT
-          ).height
-      )
+      .default(() => {
+        const editorState = getEditorState();
+        return calculateCoverDimensions(
+          editorState.project.state.width,
+          editorState.project.state.height,
+          ASPECT_RATIOS.VIDEO_DEFAULT
+        ).height;
+      })
       .describe('Height (px)')
       .register(fieldRegistry, { group: 'size', interpolationFamily: 'continuous' }),
     borderRadius: z
@@ -125,7 +126,6 @@
 
 <script lang="ts">
   import type { TypedLayer } from '$lib/layers/typed-registry';
-  import { projectStore } from '$lib/stores/project.svelte';
   import { watch } from 'runed';
 
   let {
diff --git a/src/lib/layers/layer-schemas.ts b/src/lib/layers/layer-schemas.ts
index a6c52a9..6a32b9c 100644
--- a/src/lib/layers/layer-schemas.ts
+++ b/src/lib/layers/layer-schemas.ts
@@ -2,7 +2,7 @@
  * Layer schemas - separated from components to avoid circular dependencies
  * Import and use these schemas in your layer components
  */
-import { z } from 'zod';
+
 import { fieldRegistry } from './base';
 
 // Re-export so layers can import from here
diff --git a/src/lib/layers/properties/GenerateCaption.svelte b/src/lib/layers/properties/GenerateCaption.svelte
index ba2554d..b9131b2 100644
--- a/src/lib/layers/properties/GenerateCaption.svelte
+++ b/src/lib/layers/properties/GenerateCaption.svelte
@@ -1,12 +1,15 @@
 <script lang="ts">
   import Button from '$lib/components/ui/button/button.svelte';
   import Textarea from '$lib/components/ui/textarea/textarea.svelte';
-  import { projectStore } from '$lib/stores/project.svelte';
+  import { getEditorState } from '$lib/contexts/editor.svelte';
   import { Sparkles } from '@lucide/svelte';
   import { createLayer } from '$lib/engine/layer-factory';
   import { generateCaptions } from '$lib/functions/captions.remote';
   import type { TypedLayer } from '../typed-registry';
 
+  const editorState = $derived(getEditorState());
+  const projectStore = $derived(editorState.project);
+
   // Caption generation state
   let isGeneratingCaptions = $state(false);
   let captionError = $state('');
@@ -32,7 +35,7 @@
     try {
       // Calculate timing parameters based on layer properties
       const enterTime = layer.enterTime ?? 0;
-      const exitTime = layer.exitTime ?? projectStore.project.duration;
+      const exitTime = layer.exitTime ?? projectStore.state.duration;
       const contentOffset = layer.contentOffset ?? 0;
       const layerDuration = exitTime - enterTime;
 
diff --git a/src/lib/layers/properties/SourceLayerRef.svelte b/src/lib/layers/properties/SourceLayerRef.svelte
index fb237ff..4dea4a5 100644
--- a/src/lib/layers/properties/SourceLayerRef.svelte
+++ b/src/lib/layers/properties/SourceLayerRef.svelte
@@ -1,16 +1,19 @@
 <script lang="ts">
   import Button from '$lib/components/ui/button/button.svelte';
-  import { projectStore } from '$lib/stores/project.svelte';
+  import { getEditorState } from '$lib/contexts/editor.svelte';
   import { Link } from '@lucide/svelte';
   import type { CustomPropertyComponentProps } from '../base';
 
+  const editorState = $derived(getEditorState());
+  const projectStore = $derived(editorState.project);
+
   const { value }: CustomPropertyComponentProps = $props();
 
   const sourceLayerId = $derived(value as string);
 
   const sourceLayer = $derived.by(() => {
     if (!sourceLayerId) return null;
-    return projectStore.project.layers.find((l) => l.id === sourceLayerId);
+    return projectStore.state.layers.find((l) => l.id === sourceLayerId);
   });
 
   function handleActivateSource() {
diff --git a/src/lib/stores/project.svelte.ts b/src/lib/stores/project.svelte.ts
index d4d8337..c3d1b77 100644
--- a/src/lib/stores/project.svelte.ts
+++ b/src/lib/stores/project.svelte.ts
@@ -1,18 +1,15 @@
 /**
- * Global project store using Svelte 5 runes
+ * Project store using Svelte 5 runes
+ * Manages project state and operations without persistence logic
  */
 import { getPresetById } from '$lib/engine/presets';
 import type { Project, Keyframe, ViewportSettings, Transform } from '$lib/types/animation';
 import { nanoid } from 'nanoid';
-import { watch } from 'runed';
 import { SvelteSet } from 'svelte/reactivity';
 import { getLayerTransform, getLayerStyle, getLayerProps } from '$lib/engine/layer-rendering';
 import { tick } from 'svelte';
 import type { TypedLayer } from '$lib/layers/typed-registry';
 
-const STORAGE_KEY = 'devmotion_store';
-const DEBOUNCE_MS = 500;
-
 /**
  * Cached layer data for a single frame
  */
@@ -31,11 +28,8 @@ export interface FrameCache {
   [layerId: string]: LayerFrameCache;
 }
 
-class ProjectStore {
-  project = $state<Project>(undefined!);
-  #saveTimeout: ReturnType<typeof setTimeout> | null = null;
-  #initialized = false;
-  #isLoading = false;
+export class ProjectStore {
+  state = $state<Project>(undefined!);
 
   selectedLayerId = $state<string | null>(null);
   isPlaying = $state(false);
@@ -47,68 +41,8 @@ class ProjectStore {
   frameCache = $state<Map<number, FrameCache> | null>(null);
   preparingProgress = $state(0);
 
-  // DB context state
-  dbProjectId = $state<string | null>(null);
-  isOwner = $state(true);
-  canEdit = $state(true);
-  isPublic = $state(false);
-  isSaving = $state(false);
-  hasUnsavedChanges = $state(false);
-
-  constructor() {
-    // Load first, before setting up the effect
-    this.#isLoading = true;
-    this.project = this.loadFromLocalStorage();
-    this.#initialized = true;
-    this.#isLoading = false;
-
-    $effect.root(() => {
-      watch(
-        () => $state.snapshot(this.project),
-        () => {
-          // Skip saving during initial load or when explicitly loading
-          if (!this.#initialized || this.#isLoading) {
-            return;
-          }
-
-          // Mark as having unsaved changes
-          this.hasUnsavedChanges = true;
-
-          // Only save to localStorage if this is NOT a database project
-          if (!this.isDbProject) {
-            // Debounced save
-            if (this.#saveTimeout) {
-              clearTimeout(this.#saveTimeout);
-            }
-            this.#saveTimeout = setTimeout(() => {
-              this.saveToLocalStorage();
-            }, DEBOUNCE_MS);
-          }
-        }
-      );
-    });
-  }
-
-  private loadFromLocalStorage(): Project {
-    if (typeof localStorage === 'undefined') {
-      return this.getDefaultProject();
-    }
-
-    try {
-      const stored = localStorage.getItem(STORAGE_KEY);
-      if (stored) {
-        const parsed = JSON.parse(stored);
-        return parsed;
-      }
-    } catch (error) {
-      console.error('Failed to load project from localStorage:', error);
-    }
-
-    return this.getDefaultProject();
-  }
-
-  private getDefaultProject(): Project {
-    return {
+  constructor(initialProject?: Project) {
+    this.state = initialProject ?? {
       id: nanoid(),
       name: 'Untitled Project',
       width: 720,
@@ -120,17 +54,6 @@ class ProjectStore {
     };
   }
 
-  private saveToLocalStorage() {
-    if (typeof localStorage === 'undefined') return;
-
-    try {
-      localStorage.setItem(STORAGE_KEY, JSON.stringify(this.project));
-      console.log('Project saved to localStorage');
-    } catch (error) {
-      console.error('Failed to save project to localStorage:', error);
-    }
-  }
-
   viewport = $state<ViewportSettings>({
     zoom: 1,
     pan: { x: 0, y: 0 },
@@ -138,47 +61,14 @@ class ProjectStore {
     snapToGrid: false
   });
 
-  get isDbProject(): boolean {
-    return this.dbProjectId !== null;
-  }
-
-  /**
-   * Mark the project as saved (no unsaved changes)
-   * Call this after successfully saving to cloud
-   */
-  markAsSaved() {
-    this.hasUnsavedChanges = false;
-  }
-
-  setDbContext(projectId: string | null, isOwner: boolean, canEdit: boolean, isPublic: boolean) {
-    this.dbProjectId = projectId;
-    this.isOwner = isOwner;
-    this.canEdit = canEdit;
-    this.isPublic = isPublic;
-
-    // Clear localStorage when switching to a database project
-    if (projectId && typeof localStorage !== 'undefined') {
-      localStorage.removeItem(STORAGE_KEY);
-    }
-  }
-
-  resetToNew() {
-    this.dbProjectId = null;
-    this.isOwner = true;
-    this.canEdit = true;
-    this.isPublic = false;
-    this.hasUnsavedChanges = false;
-    this.newProject();
-  }
-
   // Layer operations
   addLayer(layer: TypedLayer) {
-    this.project.layers = [...this.project.layers, layer];
+    this.state.layers = [...this.state.layers, layer];
   }
 
   async removeLayer(layerId: string) {
     // Find the layer to check if it has uploaded files to clean up
-    const layer = this.project.layers.find((l) => l.id === layerId);
+    const layer = this.state.layers.find((l) => l.id === layerId);
 
     // Clean up uploaded files if the layer has a fileKey
     if (layer && layer.props.fileKey && typeof layer.props.fileKey === 'string') {
@@ -192,28 +82,28 @@ class ProjectStore {
       }
     }
 
-    this.project.layers = this.project.layers.filter((l) => l.id !== layerId);
+    this.state.layers = this.state.layers.filter((l) => l.id !== layerId);
     if (this.selectedLayerId === layerId) {
       this.selectedLayerId = null;
     }
   }
 
   updateLayer(layerId: string, updates: Partial<TypedLayer>) {
-    this.project.layers = this.project.layers.map((layer) =>
+    this.state.layers = this.state.layers.map((layer) =>
       layer.id === layerId ? { ...layer, ...updates } : layer
     );
   }
 
   reorderLayers(fromIndex: number, toIndex: number) {
-    const layers = [...this.project.layers];
+    const layers = [...this.state.layers];
     const [movedLayer] = layers.splice(fromIndex, 1);
     layers.splice(toIndex, 0, movedLayer);
-    this.project.layers = layers;
+    this.state.layers = layers;
   }
 
   // Keyframe operations
   addKeyframe(layerId: string, keyframe: Keyframe) {
-    this.project.layers = this.project.layers.map((layer) => {
+    this.state.layers = this.state.layers.map((layer) => {
       if (layer.id === layerId) {
         return {
           ...layer,
@@ -225,7 +115,7 @@ class ProjectStore {
   }
 
   removeKeyframe(layerId: string, keyframeId: string) {
-    this.project.layers = this.project.layers.map((layer) => {
+    this.state.layers = this.state.layers.map((layer) => {
       if (layer.id === layerId) {
         return {
           ...layer,
@@ -237,7 +127,7 @@ class ProjectStore {
   }
 
   updateKeyframe(layerId: string, keyframeId: string, updates: Partial<Keyframe>) {
-    this.project.layers = this.project.layers.map((layer) => {
+    this.state.layers = this.state.layers.map((layer) => {
       if (layer.id === layerId) {
         return {
           ...layer,
@@ -276,7 +166,7 @@ class ProjectStore {
     const start = Math.min(startTime, endTime);
     const end = Math.max(startTime, endTime);
 
-    for (const layer of this.project.layers) {
+    for (const layer of this.state.layers) {
       if (layerIds && !layerIds.has(layer.id)) continue;
 
       for (const kf of layer.keyframes) {
@@ -290,10 +180,10 @@ class ProjectStore {
   shiftSelectedKeyframes(deltaTime: number) {
     if (this.selectedKeyframeIds.size === 0) return;
 
-    this.project.layers = this.project.layers.map((layer) => {
+    this.state.layers = this.state.layers.map((layer) => {
       const layerKeyframes = layer.keyframes.map((kf) => {
         if (this.selectedKeyframeIds.has(kf.id)) {
-          const newTime = Math.max(0, Math.min(this.project.duration, kf.time + deltaTime));
+          const newTime = Math.max(0, Math.min(this.state.duration, kf.time + deltaTime));
           return { ...kf, time: newTime };
         }
         return kf;
@@ -314,7 +204,7 @@ class ProjectStore {
    * @param duration - Duration of the animation in seconds
    */
   applyPreset(layerId: string, presetId: string, startTime?: number, duration: number = 1) {
-    const layer = this.project.layers.find((l) => l.id === layerId);
+    const layer = this.state.layers.find((l) => l.id === layerId);
     if (!layer) {
       console.warn(`Layer not found: ${layerId}`);
       return;
@@ -335,7 +225,7 @@ class ProjectStore {
       const scaledTime = actualStartTime + kf.time * duration;
 
       // Clamp to project duration
-      const clampedTime = Math.max(0, Math.min(scaledTime, this.project.duration));
+      const clampedTime = Math.max(0, Math.min(scaledTime, this.state.duration));
 
       // Get the base position from the layer's transform if it's a position property
       let value = kf.value;
@@ -357,7 +247,7 @@ class ProjectStore {
 
   // Timeline operations
   setCurrentTime(time: number) {
-    this.currentTime = Math.max(0, Math.min(time, this.project.duration));
+    this.currentTime = Math.max(0, Math.min(time, this.state.duration));
   }
 
   play() {
@@ -387,28 +277,14 @@ class ProjectStore {
 
   // Project operations
   async loadProject(project: Project) {
-    this.#isLoading = true;
-    this.project = project;
-    await tick();
-    this.selectedLayerId = null;
-    this.isPlaying = false;
-    this.hasUnsavedChanges = false;
-    this.#isLoading = false;
-  }
-
-  async newProject() {
-    this.#isLoading = true;
-    this.project = this.getDefaultProject();
+    this.state = project;
     await tick();
-    this.currentTime = 0;
     this.selectedLayerId = null;
     this.isPlaying = false;
-    this.hasUnsavedChanges = false;
-    this.#isLoading = false;
   }
 
   exportToJSON(): string {
-    return JSON.stringify(this.project, null, 2);
+    return JSON.stringify(this.state, null, 2);
   }
 
   importFromJSON(json: string) {
@@ -422,7 +298,7 @@ class ProjectStore {
 
   get selectedLayer(): TypedLayer | null {
     if (!this.selectedLayerId) return null;
-    return this.project.layers.find((l) => l.id === this.selectedLayerId) || null;
+    return this.state.layers.find((l) => l.id === this.selectedLayerId) || null;
   }
 
   // ========================================
@@ -435,11 +311,11 @@ class ProjectStore {
    * When contentOffset reaches 0, shifts exitTime to maintain visible duration (sliding mode).
    */
   setLayerEnterTime(layerId: string, enterTime: number) {
-    this.project.layers = this.project.layers.map((layer) => {
+    this.state.layers = this.state.layers.map((layer) => {
       if (layer.id !== layerId) return layer;
 
       const oldEnterTime = layer.enterTime ?? 0;
-      const oldExitTime = layer.exitTime ?? this.project.duration;
+      const oldExitTime = layer.exitTime ?? this.state.duration;
       const isMediaLayer = layer.type === 'video' || layer.type === 'audio';
 
       // For media layers with content duration, adjust content offset
@@ -461,10 +337,7 @@ class ProjectStore {
           let newExitTime = oldExitTime + remainingDelta; // shift exit left by remaining delta
 
           // Ensure exit time stays valid
-          newExitTime = Math.max(
-            validEnterTime + 0.1,
-            Math.min(newExitTime, this.project.duration)
-          );
+          newExitTime = Math.max(validEnterTime + 0.1, Math.min(newExitTime, this.state.duration));
 
           // Ensure visible duration doesn't exceed content duration
           if (newExitTime - validEnterTime > contentDuration) {
@@ -489,7 +362,7 @@ class ProjectStore {
         // Ensure enter time is within bounds and before exit time
         validEnterTime = Math.max(
           0,
-          Math.min(validEnterTime, oldExitTime - 0.1, this.project.duration)
+          Math.min(validEnterTime, oldExitTime - 0.1, this.state.duration)
         );
 
         // Ensure visible duration doesn't exceed available content
@@ -508,7 +381,7 @@ class ProjectStore {
       }
 
       // For non-media layers, use simple logic
-      const clampedEnterTime = Math.max(0, Math.min(enterTime, this.project.duration));
+      const clampedEnterTime = Math.max(0, Math.min(enterTime, this.state.duration));
       const validEnterTime = Math.min(clampedEnterTime, oldExitTime - 0.1);
       return { ...layer, enterTime: validEnterTime };
     });
@@ -519,18 +392,18 @@ class ProjectStore {
    * For media layers (video/audio), respects contentDuration constraints
    */
   setLayerExitTime(layerId: string, exitTime: number) {
-    this.project.layers = this.project.layers.map((layer) => {
+    this.state.layers = this.state.layers.map((layer) => {
       if (layer.id !== layerId) return layer;
 
       const enterTime = layer.enterTime ?? 0;
       const isMediaLayer = layer.type === 'video' || layer.type === 'audio';
 
       // Calculate max exit time for media layers
-      let maxExitTime = this.project.duration;
+      let maxExitTime = this.state.duration;
       if (isMediaLayer && layer.contentDuration !== undefined) {
         const contentOffset = layer.contentOffset ?? 0;
         const availableContent = layer.contentDuration - contentOffset;
-        maxExitTime = Math.min(this.project.duration, enterTime + availableContent);
+        maxExitTime = Math.min(this.state.duration, enterTime + availableContent);
       }
 
       // Clamp and validate exit time
@@ -547,7 +420,7 @@ class ProjectStore {
    * @param shiftKeyframes If true, shift all keyframes by the time delta (default: false)
    */
   setLayerTimeRange(layerId: string, enterTime: number, exitTime: number, shiftKeyframes = false) {
-    this.project.layers = this.project.layers.map((layer) => {
+    this.state.layers = this.state.layers.map((layer) => {
       if (layer.id !== layerId) return layer;
 
       const oldEnterTime = layer.enterTime ?? 0;
@@ -560,12 +433,12 @@ class ProjectStore {
         const availableContent = layer.contentDuration - contentOffset;
         const maxDuration = Math.min(duration, availableContent);
 
-        let clampedEnterTime = Math.max(0, Math.min(enterTime, this.project.duration));
+        let clampedEnterTime = Math.max(0, Math.min(enterTime, this.state.duration));
         let clampedExitTime = clampedEnterTime + maxDuration;
 
         // Ensure exit time doesn't exceed project duration
-        if (clampedExitTime > this.project.duration) {
-          clampedExitTime = this.project.duration;
+        if (clampedExitTime > this.state.duration) {
+          clampedExitTime = this.state.duration;
           clampedEnterTime = Math.max(0, clampedExitTime - maxDuration);
         }
 
@@ -576,7 +449,7 @@ class ProjectStore {
             ? layer.keyframes
                 .map((kf) => ({
                   ...kf,
-                  time: Math.max(0, Math.min(this.project.duration, kf.time + timeDelta))
+                  time: Math.max(0, Math.min(this.state.duration, kf.time + timeDelta))
                 }))
                 .sort((a, b) => a.time - b.time)
             : layer.keyframes;
@@ -590,8 +463,8 @@ class ProjectStore {
       }
 
       // For non-media layers, use simple logic
-      const clampedEnterTime = Math.max(0, Math.min(enterTime, this.project.duration));
-      const clampedExitTime = Math.max(0, Math.min(exitTime, this.project.duration));
+      const clampedEnterTime = Math.max(0, Math.min(enterTime, this.state.duration));
+      const clampedExitTime = Math.max(0, Math.min(exitTime, this.state.duration));
       const validExitTime = Math.max(clampedExitTime, clampedEnterTime + 0.1);
 
       // Shift keyframes if requested
@@ -601,7 +474,7 @@ class ProjectStore {
           ? layer.keyframes
               .map((kf) => ({
                 ...kf,
-                time: Math.max(0, Math.min(this.project.duration, kf.time + timeDelta))
+                time: Math.max(0, Math.min(this.state.duration, kf.time + timeDelta))
               }))
               .sort((a, b) => a.time - b.time)
           : layer.keyframes;
@@ -624,12 +497,12 @@ class ProjectStore {
    * Creates two layers from one, each with appropriate time ranges
    */
   splitLayer(layerId: string, splitTime?: number) {
-    const layer = this.project.layers.find((l) => l.id === layerId);
+    const layer = this.state.layers.find((l) => l.id === layerId);
     if (!layer) return;
 
     const time = splitTime ?? this.currentTime;
     const enterTime = layer.enterTime ?? 0;
-    const exitTime = layer.exitTime ?? this.project.duration;
+    const exitTime = layer.exitTime ?? this.state.duration;
 
     // Don't split if time is outside the layer's range
     if (time <= enterTime || time >= exitTime) return;
@@ -651,7 +524,7 @@ class ProjectStore {
     };
 
     // Update the first half (original layer) - keep same contentOffset, just trim exit time
-    this.project.layers = this.project.layers.map((l) => {
+    this.state.layers = this.state.layers.map((l) => {
       if (l.id === layerId) {
         return {
           ...l,
@@ -663,17 +536,17 @@ class ProjectStore {
     });
 
     // Add the second half after the original
-    const insertIndex = this.project.layers.findIndex((l) => l.id === layerId) + 1;
-    const layers = [...this.project.layers];
+    const insertIndex = this.state.layers.findIndex((l) => l.id === layerId) + 1;
+    const layers = [...this.state.layers];
     layers.splice(insertIndex, 0, secondHalf);
-    this.project.layers = layers;
+    this.state.layers = layers;
   }
 
   /**
    * Trim/crop a media layer's source time range
    */
   trimMediaLayer(layerId: string, mediaStartTime: number, mediaEndTime: number) {
-    this.project.layers = this.project.layers.map((layer) => {
+    this.state.layers = this.state.layers.map((layer) => {
       if (layer.id === layerId && (layer.type === 'video' || layer.type === 'audio')) {
         return {
           ...layer,
@@ -692,11 +565,11 @@ class ProjectStore {
    * Check if a layer is visible at the current time based on enter/exit times
    */
   isLayerVisibleAtTime(layerId: string, time?: number): boolean {
-    const layer = this.project.layers.find((l) => l.id === layerId);
+    const layer = this.state.layers.find((l) => l.id === layerId);
     if (!layer) return false;
     const t = time ?? this.currentTime;
     const enterTime = layer.enterTime ?? 0;
-    const exitTime = layer.exitTime ?? this.project.duration;
+    const exitTime = layer.exitTime ?? this.state.duration;
     return t >= enterTime && t <= exitTime;
   }
 
@@ -706,16 +579,17 @@ class ProjectStore {
    * @returns Promise that resolves when preparation is complete
    */
   async prepareRecording(): Promise<void> {
-    const totalFrames = Math.ceil(this.project.fps * this.project.duration);
+    const totalFrames = Math.ceil(this.state.fps * this.state.duration);
+    // eslint-disable-next-line svelte/prefer-svelte-reactivity
     this.frameCache = new Map();
     this.preparingProgress = 0;
 
     for (let frameIndex = 0; frameIndex < totalFrames; frameIndex++) {
-      const time = frameIndex / this.project.fps;
+      const time = frameIndex / this.state.fps;
       const frameData: FrameCache = {};
 
       // Pre-calculate values for all layers using shared rendering functions
-      for (const layer of this.project.layers) {
+      for (const layer of this.state.layers) {
         frameData[layer.id] = {
           transform: getLayerTransform(layer, time),
           style: getLayerStyle(layer, time),
@@ -752,9 +626,7 @@ class ProjectStore {
    */
   getCachedFrame(time: number): FrameCache | null {
     if (!this.frameCache) return null;
-    const frameIndex = Math.floor(time * this.project.fps);
+    const frameIndex = Math.floor(time * this.state.fps);
     return this.frameCache.get(frameIndex) ?? null;
   }
 }
-
-export const projectStore = new ProjectStore();
diff --git a/src/routes/(app)/+layout.svelte b/src/routes/(app)/+layout.svelte
index 68dd09d..4eb2cc6 100644
--- a/src/routes/(app)/+layout.svelte
+++ b/src/routes/(app)/+layout.svelte
@@ -1,4 +1,9 @@
 <script lang="ts">
+  import { initializeEditorContext } from '$lib/contexts/editor.svelte';
+
+  // Initialize the editor context with localStorage persistence
+  initializeEditorContext();
+
   let { children } = $props();
 </script>
 
diff --git a/src/routes/(app)/p/[id]/+page.svelte b/src/routes/(app)/p/[id]/+page.svelte
index fbd4749..5c38407 100644
--- a/src/routes/(app)/p/[id]/+page.svelte
+++ b/src/routes/(app)/p/[id]/+page.svelte
@@ -2,25 +2,27 @@
   import SeoHead from '$lib/components/seo-head.svelte';
   import JsonLd from '$lib/components/json-ld.svelte';
   import EditorLayout from '$lib/components/editor/editor-layout.svelte';
-  import { projectStore } from '$lib/stores/project.svelte';
   import { PUBLIC_BASE_URL } from '$env/static/public';
   import type { PageData } from './$types';
+  import { getEditorState } from '$lib/contexts/editor.svelte';
 
   let { data }: { data: PageData } = $props();
 
+  const editorState = $derived(getEditorState());
+
   const baseUrl = PUBLIC_BASE_URL;
-  const projectName = $derived(data.project.data.name || 'Untitled Project');
+  const projectName = $derived(editorState.project.state.name || 'Untitled Project');
   const projectDescription = $derived(
     `${projectName} - Animated video created with DevMotion. Design with manual controls or use AI-powered suggestions.`
   );
   const projectUrl = $derived(`${baseUrl}/p/${data.project.id}`);
   const ogImage = $derived(`${baseUrl}/p/${data.project.id}/og.png`);
 
-  // Use $effect to react to project changes when switching between projects
+  // Load project data when route changes
   $effect(() => {
     const projectData = data.project.data;
 
-    projectStore.loadProject({
+    editorState.project.loadProject({
       id: data.project.id,
       name: projectData.name,
       width: projectData.width,
@@ -31,7 +33,9 @@
       layers: projectData.layers
     });
 
-    projectStore.setDbContext(data.project.id, data.isOwner, data.canEdit, data.project.isPublic);
+    editorState.setDbContext(data.project.id, data.isOwner, data.canEdit, data.project.isPublic);
+
+    editorState.isMcp = data.project.isMcp;
   });
 </script>