rename app provider to editor provider and add it to the editor instead

apps/web/src/app/editor/page.tsx

@@ -13,6 +13,7 @@ import { PreviewPanel } from "../../components/editor/preview-panel";
 import { EditorHeader } from "@/components/editor-header";
 import { usePanelStore } from "@/stores/panel-store";
 import { useProjectStore } from "@/stores/project-store";
+import { EditorProvider } from "@/components/editor-provider";
 
 export default function Editor() {
   const {
@@ -38,59 +39,61 @@ export default function Editor() {
   }, [activeProject, createNewProject]);
 
   return (
-    <div className="h-screen w-screen flex flex-col bg-background">
-      <EditorHeader />
-      <ResizablePanelGroup direction="vertical">
-        <ResizablePanel
-          defaultSize={mainContent}
-          minSize={30}
-          onResize={setMainContent}
-        >
-          {/* Main content area */}
-          <ResizablePanelGroup direction="horizontal">
-            {/* Tools Panel */}
-            <ResizablePanel
-              defaultSize={toolsPanel}
-              minSize={15}
-              onResize={setToolsPanel}
-            >
-              <MediaPanel />
-            </ResizablePanel>
+    <EditorProvider>
+      <div className="h-screen w-screen flex flex-col bg-background">
+        <EditorHeader />
+        <ResizablePanelGroup direction="vertical">
+          <ResizablePanel
+            defaultSize={mainContent}
+            minSize={30}
+            onResize={setMainContent}
+          >
+            {/* Main content area */}
+            <ResizablePanelGroup direction="horizontal">
+              {/* Tools Panel */}
+              <ResizablePanel
+                defaultSize={toolsPanel}
+                minSize={15}
+                onResize={setToolsPanel}
+              >
+                <MediaPanel />
+              </ResizablePanel>
 
-            <ResizableHandle withHandle />
+              <ResizableHandle withHandle />
 
-            {/* Preview Area */}
-            <ResizablePanel
-              defaultSize={previewPanel}
-              onResize={setPreviewPanel}
-            >
-              <PreviewPanel />
-            </ResizablePanel>
+              {/* Preview Area */}
+              <ResizablePanel
+                defaultSize={previewPanel}
+                onResize={setPreviewPanel}
+              >
+                <PreviewPanel />
+              </ResizablePanel>
 
-            <ResizableHandle withHandle />
+              <ResizableHandle withHandle />
 
-            {/* Properties Panel */}
-            <ResizablePanel
-              defaultSize={propertiesPanel}
-              minSize={15}
-              onResize={setPropertiesPanel}
-            >
-              <PropertiesPanel />
-            </ResizablePanel>
-          </ResizablePanelGroup>
-        </ResizablePanel>
+              {/* Properties Panel */}
+              <ResizablePanel
+                defaultSize={propertiesPanel}
+                minSize={15}
+                onResize={setPropertiesPanel}
+              >
+                <PropertiesPanel />
+              </ResizablePanel>
+            </ResizablePanelGroup>
+          </ResizablePanel>
 
-        <ResizableHandle withHandle />
+          <ResizableHandle withHandle />
 
-        {/* Timeline */}
-        <ResizablePanel
-          defaultSize={timeline}
-          minSize={15}
-          onResize={setTimeline}
-        >
-          <Timeline />
-        </ResizablePanel>
-      </ResizablePanelGroup>
-    </div>
+          {/* Timeline */}
+          <ResizablePanel
+            defaultSize={timeline}
+            minSize={15}
+            onResize={setTimeline}
+          >
+            <Timeline />
+          </ResizablePanel>
+        </ResizablePanelGroup>
+      </div>
+    </EditorProvider>
   );
 }

apps/web/src/app/layout.tsx

@@ -5,7 +5,6 @@ import { Analytics } from "@vercel/analytics/react";
 import "./globals.css";
 import { Toaster } from "../components/ui/sonner";
 import { TooltipProvider } from "../components/ui/tooltip";
-import { AppProvider } from "@/components/app-provider";
 
 const inter = Inter({
   subsets: ["latin"],
@@ -26,13 +25,11 @@ export default function RootLayout({
     <html lang="en" suppressHydrationWarning>
       <body className={`${inter.variable} font-sans antialiased`}>
         <ThemeProvider attribute="class" forcedTheme="dark" enableSystem>
-          <AppProvider>
-            <TooltipProvider>
-              {children}
-              <Analytics />
-              <Toaster />
-            </TooltipProvider>
-          </AppProvider>
+          <TooltipProvider>
+            {children}
+            <Analytics />
+            <Toaster />
+          </TooltipProvider>
         </ThemeProvider>
       </body>
     </html>

apps/web/src/components/editor-provider.tsx

@@ -2,14 +2,14 @@
 
 import { useEffect } from "react";
 import { Loader2 } from "lucide-react";
-import { useAppStore } from "@/stores/app-store";
+import { useAppStore } from "@/stores/editor-store";
 import { usePanelStore } from "@/stores/panel-store";
 
-interface AppProviderProps {
+interface EditorProviderProps {
   children: React.ReactNode;
 }
 
-export function AppProvider({ children }: AppProviderProps) {
+export function EditorProvider({ children }: EditorProviderProps) {
   const { isInitializing, isPanelsReady, initializeApp } = useAppStore();
   const { setInitialized } = usePanelStore();