rita-workspace 0.3.1 → 0.4.0

package/README.md

@@ -7,7 +7,9 @@ Multi-drawing workspace feature for Rita (Excalidraw fork based on B310-digital/
 - **Multiple drawings** - Create and manage multiple drawings in one workspace
 - **Menu integration** - Seamlessly integrates with Excalidraw's hamburger menu
 - **Auto-save** - All drawings saved locally in IndexedDB
+- **Auto-sync** - Automatic sync between workspace and Excalidraw canvas
 - **Rename & delete** - Full drawing management via dialog
+- **i18n support** - Swedish and English with automatic Excalidraw language sync
 
 ## Installation
 
@@ -19,99 +21,127 @@ yarn add rita-workspace
 
 ## Integration Guide
 
-Two files need to be modified in the B310/Excalidraw fork:
+Three files need to be modified in the B310/Excalidraw fork:
 
-### 1. `excalidraw-app/App.tsx`
+### 1. `excalidraw-app/App.tsx` - Add Provider and Bridge
 
-**Add import** (at the top with other imports):
+**Add imports:**
 
 ```tsx
-import { WorkspaceProvider } from "rita-workspace";
+import { WorkspaceProvider, WorkspaceBridge } from "rita-workspace";
 ```
 
-**Wrap with WorkspaceProvider** (in the `ExcalidrawApp` component):
+**Wrap ExcalidrawApp with WorkspaceProvider:**
 
 ```tsx
 const ExcalidrawApp = () => {
-  // ...
   return (
     <TopErrorBoundary>
       <Provider store={appJotaiStore}>
-        <WorkspaceProvider>          {/* <-- Add this */}
+        <WorkspaceProvider lang="sv">    {/* <-- Add this */}
           <ExcalidrawWrapper />
-        </WorkspaceProvider>          {/* <-- And this */}
+        </WorkspaceProvider>               {/* <-- And this */}
       </Provider>
     </TopErrorBoundary>
   );
 };
 ```
 
-### 2. `excalidraw-app/components/AppMainMenu.tsx`
+**Add WorkspaceBridge inside ExcalidrawWrapper** (this syncs the canvas automatically):
 
-**Add imports** (at the top):
+```tsx
+const ExcalidrawWrapper = () => {
+  const [excalidrawAPI, excalidrawRefCallback] =
+    useCallbackRefState<ExcalidrawImperativeAPI>();
+
+  // ... existing code ...
+
+  return (
+    <div style={{ height: "100%" }}>
+      {/* === ADD THIS - Auto-syncs workspace with Excalidraw === */}
+      <WorkspaceBridge excalidrawAPI={excalidrawAPI} />
+
+      <Excalidraw
+        excalidrawAPI={excalidrawRefCallback}
+        // ... rest of props ...
+      />
+    </div>
+  );
+};
+```
+
+### 2. `excalidraw-app/components/AppMainMenu.tsx` - Add Menu Items
+
+**Add imports:**
 
 ```tsx
-import React, { useState } from "react";  // Add useState
+import React, { useState } from "react";
 
-// Add after other imports:
 import { WorkspaceMenuItems, DrawingsDialog } from "rita-workspace";
+import { LoadIcon } from "../components/icons";  // Excalidraw's folder icon
 ```
 
-**Add state and menu items** (inside the component):
+**Add state and menu items:**
 
 ```tsx
 export const AppMainMenu: React.FC<{...}> = React.memo((props) => {
-  const [showDrawingsDialog, setShowDrawingsDialog] = useState(false);  // Add this
+  const [showDrawingsDialog, setShowDrawingsDialog] = useState(false);
 
   return (
-    <>                                          {/* Add fragment */}
+    <>
     <MainMenu>
       <MainMenu.DefaultItems.LoadScene />
       <MainMenu.DefaultItems.SaveToActiveFile />
 
-      {/* === RITA WORKSPACE: Add this block === */}
+      {/* === RITA WORKSPACE === */}
       <MainMenu.Sub>
-        <MainMenu.Sub.Trigger>📄 Ritningar</MainMenu.Sub.Trigger>
+        <MainMenu.Sub.Trigger>{LoadIcon} Arbetsyta</MainMenu.Sub.Trigger>
         <MainMenu.Sub.Content>
           <WorkspaceMenuItems
             onManageDrawings={() => setShowDrawingsDialog(true)}
           />
         </MainMenu.Sub.Content>
       </MainMenu.Sub>
-      {/* === END RITA WORKSPACE === */}
 
       <MainMenu.DefaultItems.Export />
       {/* ... rest of menu items ... */}
     </MainMenu>
 
-    {/* === RITA WORKSPACE: Add dialog === */}
     <DrawingsDialog
       open={showDrawingsDialog}
       onClose={() => setShowDrawingsDialog(false)}
     />
-    </>                                         {/* Close fragment */}
+    </>
   );
 });
 ```
 
-## Result
+## How It Works
 
-After integration, a "📄 Ritningar" submenu appears in the hamburger menu:
+1. **WorkspaceProvider** - Manages workspace state (drawings list, active drawing)
+2. **WorkspaceBridge** - Automatically syncs between workspace and Excalidraw:
+   - Loads drawing into canvas when you switch drawings
+   - Auto-saves canvas changes back to workspace
+   - Saves current drawing before switching to another
+3. **WorkspaceMenuItems** - Provides the menu UI for switching drawings
+4. **DrawingsDialog** - Full management UI (rename, delete, create)
 
+## Language Support (i18n)
+
+Pass Excalidraw's `langCode` to `WorkspaceProvider`:
+
+```tsx
+const [langCode] = useAppLangCode();
+
+<WorkspaceProvider lang={langCode}>
+  {/* All components automatically use the same language */}
+</WorkspaceProvider>
 ```
-┌─────────────────────────┐
-│ 📂 Open                 │
-│ 💾 Save                 │
-│ 📄 Ritningar        ▶  │──┐
-│ 📤 Export               │  │  ┌─────────────────────┐
-│ ...                     │  └──│ ✓ Current drawing   │
-└─────────────────────────┘     │   Sketch 2          │
-                                │   Project X         │
-                                │ ─────────────────── │
-                                │ + Ny ritning        │
-                                │ 📄 Hantera...       │
-                                └─────────────────────┘
-```
+
+| Code | Language |
+|------|----------|
+| `sv`, `sv-SE` | 🇸🇪 Swedish |
+| `en`, `en-US` | 🇬🇧 English (default) |
 
 ## API Reference
 
@@ -119,24 +149,32 @@ After integration, a "📄 Ritningar" submenu appears in the hamburger menu:
 
 | Component | Description |
 |-----------|-------------|
-| `WorkspaceProvider` | React context provider - wrap your app with this |
-| `WorkspaceMenuItems` | Menu items for Excalidraw's MainMenu |
-| `DrawingsDialog` | Modal dialog for managing all drawings |
+| `WorkspaceProvider` | React context provider. Props: `lang` |
+| `WorkspaceBridge` | Auto-syncs workspace ↔ Excalidraw. Props: `excalidrawAPI`, `autoSaveInterval` |
+| `WorkspaceMenuItems` | Menu items for MainMenu. Props: `onManageDrawings`, `lang` |
+| `DrawingsDialog` | Management dialog. Props: `open`, `onClose`, `lang` |
 
 ### Hooks
 
 | Hook | Description |
 |------|-------------|
 | `useWorkspace()` | Access workspace state and actions |
+| `useWorkspaceLang()` | Get current language and translations |
 
 ### useWorkspace() returns
 
 ```tsx
 const {
+  // State
   drawings,           // Drawing[] - all drawings
   activeDrawing,      // Drawing | null - currently active
   isLoading,          // boolean
-  createNewDrawing,   // () => Promise<Drawing>
+  error,              // string | null
+  lang,               // string - current language code
+  t,                  // Translations object
+
+  // Actions
+  createNewDrawing,   // (name?: string) => Promise<Drawing>
   switchDrawing,      // (id: string) => Promise<void>
   renameDrawing,      // (id: string, name: string) => Promise<void>
   removeDrawing,      // (id: string) => Promise<void>
@@ -144,9 +182,20 @@ const {
 } = useWorkspace();
 ```
 
+### WorkspaceBridge Props
+
+```tsx
+<WorkspaceBridge
+  excalidrawAPI={excalidrawAPI}     // Required - from Excalidraw
+  autoSaveInterval={2000}            // Optional - ms between saves (default: 2000)
+  onDrawingLoad={(id) => {}}         // Optional - called when drawing loads
+  onDrawingSave={(id) => {}}         // Optional - called when drawing saves
+/>
+```
+
 ## Data Storage
 
-Drawings are stored in IndexedDB with the following structure:
+Drawings are stored in IndexedDB:
 
 ```typescript
 interface Drawing {

package/dist/index.d.mts

@@ -99,7 +99,7 @@ interface WorkspaceContextValue {
     renameDrawing: (id: string, name: string) => Promise<void>;
     removeDrawing: (id: string) => Promise<void>;
     duplicateCurrentDrawing: () => Promise<Drawing | null>;
-    saveCurrentDrawing: (elements: unknown[], appState: Record<string, unknown>) => Promise<void>;
+    saveCurrentDrawing: (elements: unknown[], appState: Record<string, unknown>, files?: Record<string, unknown>) => Promise<void>;
 }
 declare function useWorkspace(): WorkspaceContextValue;
 /**
@@ -262,6 +262,64 @@ declare function useExcalidrawBridge({ excalidrawAPI, autoSaveInterval, }: UseEx
     scheduleSave: () => void;
 };
 
+/**
+ * WorkspaceBridge - Automatic sync between Workspace and Excalidraw
+ *
+ * This component handles:
+ * 1. Loading drawings into Excalidraw when activeDrawing changes
+ * 2. Auto-saving Excalidraw changes back to the workspace
+ * 3. Saving current drawing before switching to another
+ */
+interface ExcalidrawImperativeAPI {
+    getSceneElements: () => unknown[];
+    getAppState: () => Record<string, unknown>;
+    getFiles: () => Record<string, unknown>;
+    updateScene: (scene: {
+        elements?: unknown[];
+        appState?: Record<string, unknown>;
+        commitToStore?: boolean;
+    }) => void;
+    resetScene: () => void;
+    scrollToContent: () => void;
+}
+interface WorkspaceBridgeProps {
+    /**
+     * The Excalidraw imperative API
+     */
+    excalidrawAPI: ExcalidrawImperativeAPI | null;
+    /**
+     * Auto-save interval in milliseconds (default: 2000)
+     * Set to 0 to disable auto-save
+     */
+    autoSaveInterval?: number;
+    /**
+     * Called when a drawing is loaded into Excalidraw
+     */
+    onDrawingLoad?: (drawingId: string) => void;
+    /**
+     * Called when a drawing is saved
+     */
+    onDrawingSave?: (drawingId: string) => void;
+}
+/**
+ * WorkspaceBridge component - place this inside your Excalidraw wrapper
+ *
+ * @example
+ * ```tsx
+ * const ExcalidrawWrapper = () => {
+ *   const [excalidrawAPI, setExcalidrawAPI] = useState(null);
+ *
+ *   return (
+ *     <>
+ *       <WorkspaceBridge excalidrawAPI={excalidrawAPI} />
+ *       <Excalidraw excalidrawAPI={setExcalidrawAPI} />
+ *     </>
+ *   );
+ * };
+ * ```
+ */
+declare function WorkspaceBridge({ excalidrawAPI, autoSaveInterval, onDrawingLoad, onDrawingSave, }: WorkspaceBridgeProps): null;
+
 interface WorkspacePluginProps {
     children: ReactNode;
     defaultSidebarOpen?: boolean;
@@ -285,4 +343,4 @@ interface WorkspacePluginProps {
  */
 declare function WorkspacePlugin(props: WorkspacePluginProps): react_jsx_runtime.JSX.Element;
 
-export { type Drawing, DrawingList, DrawingListItem, DrawingsDialog, type DrawingsDialogProps, Sidebar, type SupportedLanguage, type Translations, type Workspace, type WorkspaceContextValue, WorkspaceMenuItems, type WorkspaceMenuItemsProps, WorkspacePlugin, WorkspaceProvider, addDrawingToWorkspace, closeDB, createDrawing, deleteDrawing, duplicateDrawing, getAllDrawings, getDB, getDrawing, getOrCreateDefaultWorkspace, getTranslations, getWorkspace, isLanguageSupported, removeDrawingFromWorkspace, setActiveDrawing, updateDrawing, updateWorkspace, useExcalidrawBridge, useWorkspace, useWorkspaceLang };
+export { type Drawing, DrawingList, DrawingListItem, DrawingsDialog, type DrawingsDialogProps, type ExcalidrawImperativeAPI, Sidebar, type SupportedLanguage, type Translations, type Workspace, WorkspaceBridge, type WorkspaceBridgeProps, type WorkspaceContextValue, WorkspaceMenuItems, type WorkspaceMenuItemsProps, WorkspacePlugin, WorkspaceProvider, addDrawingToWorkspace, closeDB, createDrawing, deleteDrawing, duplicateDrawing, getAllDrawings, getDB, getDrawing, getOrCreateDefaultWorkspace, getTranslations, getWorkspace, isLanguageSupported, removeDrawingFromWorkspace, setActiveDrawing, updateDrawing, updateWorkspace, useExcalidrawBridge, useWorkspace, useWorkspaceLang };

package/dist/index.d.ts

@@ -99,7 +99,7 @@ interface WorkspaceContextValue {
     renameDrawing: (id: string, name: string) => Promise<void>;
     removeDrawing: (id: string) => Promise<void>;
     duplicateCurrentDrawing: () => Promise<Drawing | null>;
-    saveCurrentDrawing: (elements: unknown[], appState: Record<string, unknown>) => Promise<void>;
+    saveCurrentDrawing: (elements: unknown[], appState: Record<string, unknown>, files?: Record<string, unknown>) => Promise<void>;
 }
 declare function useWorkspace(): WorkspaceContextValue;
 /**
@@ -262,6 +262,64 @@ declare function useExcalidrawBridge({ excalidrawAPI, autoSaveInterval, }: UseEx
     scheduleSave: () => void;
 };
 
+/**
+ * WorkspaceBridge - Automatic sync between Workspace and Excalidraw
+ *
+ * This component handles:
+ * 1. Loading drawings into Excalidraw when activeDrawing changes
+ * 2. Auto-saving Excalidraw changes back to the workspace
+ * 3. Saving current drawing before switching to another
+ */
+interface ExcalidrawImperativeAPI {
+    getSceneElements: () => unknown[];
+    getAppState: () => Record<string, unknown>;
+    getFiles: () => Record<string, unknown>;
+    updateScene: (scene: {
+        elements?: unknown[];
+        appState?: Record<string, unknown>;
+        commitToStore?: boolean;
+    }) => void;
+    resetScene: () => void;
+    scrollToContent: () => void;
+}
+interface WorkspaceBridgeProps {
+    /**
+     * The Excalidraw imperative API
+     */
+    excalidrawAPI: ExcalidrawImperativeAPI | null;
+    /**
+     * Auto-save interval in milliseconds (default: 2000)
+     * Set to 0 to disable auto-save
+     */
+    autoSaveInterval?: number;
+    /**
+     * Called when a drawing is loaded into Excalidraw
+     */
+    onDrawingLoad?: (drawingId: string) => void;
+    /**
+     * Called when a drawing is saved
+     */
+    onDrawingSave?: (drawingId: string) => void;
+}
+/**
+ * WorkspaceBridge component - place this inside your Excalidraw wrapper
+ *
+ * @example
+ * ```tsx
+ * const ExcalidrawWrapper = () => {
+ *   const [excalidrawAPI, setExcalidrawAPI] = useState(null);
+ *
+ *   return (
+ *     <>
+ *       <WorkspaceBridge excalidrawAPI={excalidrawAPI} />
+ *       <Excalidraw excalidrawAPI={setExcalidrawAPI} />
+ *     </>
+ *   );
+ * };
+ * ```
+ */
+declare function WorkspaceBridge({ excalidrawAPI, autoSaveInterval, onDrawingLoad, onDrawingSave, }: WorkspaceBridgeProps): null;
+
 interface WorkspacePluginProps {
     children: ReactNode;
     defaultSidebarOpen?: boolean;
@@ -285,4 +343,4 @@ interface WorkspacePluginProps {
  */
 declare function WorkspacePlugin(props: WorkspacePluginProps): react_jsx_runtime.JSX.Element;
 
-export { type Drawing, DrawingList, DrawingListItem, DrawingsDialog, type DrawingsDialogProps, Sidebar, type SupportedLanguage, type Translations, type Workspace, type WorkspaceContextValue, WorkspaceMenuItems, type WorkspaceMenuItemsProps, WorkspacePlugin, WorkspaceProvider, addDrawingToWorkspace, closeDB, createDrawing, deleteDrawing, duplicateDrawing, getAllDrawings, getDB, getDrawing, getOrCreateDefaultWorkspace, getTranslations, getWorkspace, isLanguageSupported, removeDrawingFromWorkspace, setActiveDrawing, updateDrawing, updateWorkspace, useExcalidrawBridge, useWorkspace, useWorkspaceLang };
+export { type Drawing, DrawingList, DrawingListItem, DrawingsDialog, type DrawingsDialogProps, type ExcalidrawImperativeAPI, Sidebar, type SupportedLanguage, type Translations, type Workspace, WorkspaceBridge, type WorkspaceBridgeProps, type WorkspaceContextValue, WorkspaceMenuItems, type WorkspaceMenuItemsProps, WorkspacePlugin, WorkspaceProvider, addDrawingToWorkspace, closeDB, createDrawing, deleteDrawing, duplicateDrawing, getAllDrawings, getDB, getDrawing, getOrCreateDefaultWorkspace, getTranslations, getWorkspace, isLanguageSupported, removeDrawingFromWorkspace, setActiveDrawing, updateDrawing, updateWorkspace, useExcalidrawBridge, useWorkspace, useWorkspaceLang };

package/dist/index.js

@@ -34,6 +34,7 @@ __export(index_exports, {
   DrawingListItem: () => DrawingListItem,
   DrawingsDialog: () => DrawingsDialog,
   Sidebar: () => Sidebar,
+  WorkspaceBridge: () => WorkspaceBridge,
   WorkspaceMenuItems: () => WorkspaceMenuItems,
   WorkspacePlugin: () => WorkspacePlugin,
   WorkspaceProvider: () => WorkspaceProvider,
@@ -211,11 +212,11 @@ var import_react = require("react");
 // src/i18n/translations.ts
 var sv = {
   // Menu
-  drawings: "Ritningar",
+  drawings: "Arbetsyta",
   newDrawing: "Ny ritning",
-  manageDrawings: "Hantera ritningar...",
+  manageDrawings: "Hantera arbetsyta...",
   // Dialog
-  dialogTitle: "Ritningar",
+  dialogTitle: "Arbetsyta",
   close: "St\xE4ng",
   open: "\xD6ppna",
   rename: "Byt namn",
@@ -233,11 +234,11 @@ var sv = {
 };
 var en = {
   // Menu
-  drawings: "Drawings",
+  drawings: "Workspace",
   newDrawing: "New drawing",
-  manageDrawings: "Manage drawings...",
+  manageDrawings: "Manage workspace...",
   // Dialog
-  dialogTitle: "Drawings",
+  dialogTitle: "Workspace",
   close: "Close",
   open: "Open",
   rename: "Rename",
@@ -398,10 +399,17 @@ function WorkspaceProvider({ children, lang = "en" }) {
       return null;
     }
   }, [activeDrawing, workspace]);
-  const saveCurrentDrawing = (0, import_react.useCallback)(async (elements, appState) => {
+  const saveCurrentDrawing = (0, import_react.useCallback)(async (elements, appState, files) => {
     if (!activeDrawing) return;
     try {
-      const updated = await updateDrawing(activeDrawing.id, { elements, appState });
+      const updateData = {
+        elements,
+        appState
+      };
+      if (files) {
+        updateData.files = files;
+      }
+      const updated = await updateDrawing(activeDrawing.id, updateData);
       if (updated) {
         setActiveDrawing2(updated);
         setDrawings((prev) => prev.map((d) => d.id === updated.id ? updated : d));
@@ -1185,17 +1193,119 @@ function useExcalidrawBridge({
   };
 }
 
-// src/WorkspacePlugin.tsx
+// src/integration/WorkspaceBridge.tsx
 var import_react7 = require("react");
+function WorkspaceBridge({
+  excalidrawAPI,
+  autoSaveInterval = 2e3,
+  onDrawingLoad,
+  onDrawingSave
+}) {
+  const { activeDrawing, saveCurrentDrawing } = useWorkspace();
+  const lastDrawingIdRef = (0, import_react7.useRef)(null);
+  const saveTimeoutRef = (0, import_react7.useRef)(null);
+  const isLoadingRef = (0, import_react7.useRef)(false);
+  const saveDrawing = (0, import_react7.useCallback)(async () => {
+    if (!excalidrawAPI || !activeDrawing || isLoadingRef.current) return;
+    try {
+      const elements = excalidrawAPI.getSceneElements();
+      const appState = excalidrawAPI.getAppState();
+      const files = excalidrawAPI.getFiles();
+      const persistentAppState = {
+        viewBackgroundColor: appState.viewBackgroundColor,
+        zoom: appState.zoom,
+        scrollX: appState.scrollX,
+        scrollY: appState.scrollY
+        // Add other persistent properties as needed
+      };
+      await saveCurrentDrawing(elements, persistentAppState, files);
+      onDrawingSave?.(activeDrawing.id);
+    } catch (error) {
+      console.error("[WorkspaceBridge] Failed to save drawing:", error);
+    }
+  }, [excalidrawAPI, activeDrawing, saveCurrentDrawing, onDrawingSave]);
+  const scheduleSave = (0, import_react7.useCallback)(() => {
+    if (autoSaveInterval <= 0) return;
+    if (saveTimeoutRef.current) {
+      clearTimeout(saveTimeoutRef.current);
+    }
+    saveTimeoutRef.current = setTimeout(saveDrawing, autoSaveInterval);
+  }, [saveDrawing, autoSaveInterval]);
+  (0, import_react7.useEffect)(() => {
+    if (!excalidrawAPI || !activeDrawing) return;
+    if (lastDrawingIdRef.current === activeDrawing.id) return;
+    if (lastDrawingIdRef.current !== null) {
+      if (saveTimeoutRef.current) {
+        clearTimeout(saveTimeoutRef.current);
+        saveTimeoutRef.current = null;
+      }
+      saveDrawing();
+    }
+    isLoadingRef.current = true;
+    lastDrawingIdRef.current = activeDrawing.id;
+    try {
+      excalidrawAPI.updateScene({
+        elements: activeDrawing.elements || [],
+        appState: activeDrawing.appState || {},
+        commitToStore: true
+      });
+      onDrawingLoad?.(activeDrawing.id);
+    } catch (error) {
+      console.error("[WorkspaceBridge] Failed to load drawing:", error);
+    } finally {
+      setTimeout(() => {
+        isLoadingRef.current = false;
+      }, 100);
+    }
+  }, [excalidrawAPI, activeDrawing, saveDrawing, onDrawingLoad]);
+  (0, import_react7.useEffect)(() => {
+    if (!excalidrawAPI || autoSaveInterval <= 0) return;
+    let lastElementCount = 0;
+    let lastChecksum = "";
+    const checkForChanges = () => {
+      if (isLoadingRef.current || !excalidrawAPI) return;
+      try {
+        const elements = excalidrawAPI.getSceneElements();
+        const currentCount = elements.length;
+        const currentChecksum = JSON.stringify(elements.slice(-1));
+        if (currentCount !== lastElementCount || currentChecksum !== lastChecksum) {
+          lastElementCount = currentCount;
+          lastChecksum = currentChecksum;
+          scheduleSave();
+        }
+      } catch {
+      }
+    };
+    const intervalId = setInterval(checkForChanges, 1e3);
+    return () => {
+      clearInterval(intervalId);
+      if (saveTimeoutRef.current) {
+        clearTimeout(saveTimeoutRef.current);
+      }
+    };
+  }, [excalidrawAPI, autoSaveInterval, scheduleSave]);
+  (0, import_react7.useEffect)(() => {
+    return () => {
+      if (saveTimeoutRef.current) {
+        clearTimeout(saveTimeoutRef.current);
+      }
+      saveDrawing();
+    };
+  }, [saveDrawing]);
+  return null;
+}
+
+// src/WorkspacePlugin.tsx
+var import_react8 = require("react");
 var import_jsx_runtime7 = require("react/jsx-runtime");
 function WorkspacePluginInner({
   children,
   defaultSidebarOpen = true,
   sidebarWidth = 250
 }) {
-  const [sidebarOpen, setSidebarOpen] = (0, import_react7.useState)(defaultSidebarOpen);
+  const [sidebarOpen, setSidebarOpen] = (0, import_react8.useState)(defaultSidebarOpen);
   const { activeDrawing } = useWorkspace();
-  (0, import_react7.useEffect)(() => {
+  (0, import_react8.useEffect)(() => {
     const handleKeyDown = (e) => {
       if (e.ctrlKey && e.key === "b") {
         e.preventDefault();
@@ -1208,7 +1318,7 @@ function WorkspacePluginInner({
     window.addEventListener("keydown", handleKeyDown);
     return () => window.removeEventListener("keydown", handleKeyDown);
   }, []);
-  const handleToggleSidebar = (0, import_react7.useCallback)(() => {
+  const handleToggleSidebar = (0, import_react8.useCallback)(() => {
     setSidebarOpen((prev) => !prev);
   }, []);
   return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
@@ -1252,6 +1362,7 @@ function WorkspacePlugin(props) {
   DrawingListItem,
   DrawingsDialog,
   Sidebar,
+  WorkspaceBridge,
   WorkspaceMenuItems,
   WorkspacePlugin,
   WorkspaceProvider,

package/dist/index.mjs

@@ -150,11 +150,11 @@ import { createContext, useContext, useEffect, useState, useCallback } from "rea
 // src/i18n/translations.ts
 var sv = {
   // Menu
-  drawings: "Ritningar",
+  drawings: "Arbetsyta",
   newDrawing: "Ny ritning",
-  manageDrawings: "Hantera ritningar...",
+  manageDrawings: "Hantera arbetsyta...",
   // Dialog
-  dialogTitle: "Ritningar",
+  dialogTitle: "Arbetsyta",
   close: "St\xE4ng",
   open: "\xD6ppna",
   rename: "Byt namn",
@@ -172,11 +172,11 @@ var sv = {
 };
 var en = {
   // Menu
-  drawings: "Drawings",
+  drawings: "Workspace",
   newDrawing: "New drawing",
-  manageDrawings: "Manage drawings...",
+  manageDrawings: "Manage workspace...",
   // Dialog
-  dialogTitle: "Drawings",
+  dialogTitle: "Workspace",
   close: "Close",
   open: "Open",
   rename: "Rename",
@@ -337,10 +337,17 @@ function WorkspaceProvider({ children, lang = "en" }) {
       return null;
     }
   }, [activeDrawing, workspace]);
-  const saveCurrentDrawing = useCallback(async (elements, appState) => {
+  const saveCurrentDrawing = useCallback(async (elements, appState, files) => {
     if (!activeDrawing) return;
     try {
-      const updated = await updateDrawing(activeDrawing.id, { elements, appState });
+      const updateData = {
+        elements,
+        appState
+      };
+      if (files) {
+        updateData.files = files;
+      }
+      const updated = await updateDrawing(activeDrawing.id, updateData);
       if (updated) {
         setActiveDrawing2(updated);
         setDrawings((prev) => prev.map((d) => d.id === updated.id ? updated : d));
@@ -1124,8 +1131,110 @@ function useExcalidrawBridge({
   };
 }
 
+// src/integration/WorkspaceBridge.tsx
+import { useEffect as useEffect4, useRef as useRef3, useCallback as useCallback4 } from "react";
+function WorkspaceBridge({
+  excalidrawAPI,
+  autoSaveInterval = 2e3,
+  onDrawingLoad,
+  onDrawingSave
+}) {
+  const { activeDrawing, saveCurrentDrawing } = useWorkspace();
+  const lastDrawingIdRef = useRef3(null);
+  const saveTimeoutRef = useRef3(null);
+  const isLoadingRef = useRef3(false);
+  const saveDrawing = useCallback4(async () => {
+    if (!excalidrawAPI || !activeDrawing || isLoadingRef.current) return;
+    try {
+      const elements = excalidrawAPI.getSceneElements();
+      const appState = excalidrawAPI.getAppState();
+      const files = excalidrawAPI.getFiles();
+      const persistentAppState = {
+        viewBackgroundColor: appState.viewBackgroundColor,
+        zoom: appState.zoom,
+        scrollX: appState.scrollX,
+        scrollY: appState.scrollY
+        // Add other persistent properties as needed
+      };
+      await saveCurrentDrawing(elements, persistentAppState, files);
+      onDrawingSave?.(activeDrawing.id);
+    } catch (error) {
+      console.error("[WorkspaceBridge] Failed to save drawing:", error);
+    }
+  }, [excalidrawAPI, activeDrawing, saveCurrentDrawing, onDrawingSave]);
+  const scheduleSave = useCallback4(() => {
+    if (autoSaveInterval <= 0) return;
+    if (saveTimeoutRef.current) {
+      clearTimeout(saveTimeoutRef.current);
+    }
+    saveTimeoutRef.current = setTimeout(saveDrawing, autoSaveInterval);
+  }, [saveDrawing, autoSaveInterval]);
+  useEffect4(() => {
+    if (!excalidrawAPI || !activeDrawing) return;
+    if (lastDrawingIdRef.current === activeDrawing.id) return;
+    if (lastDrawingIdRef.current !== null) {
+      if (saveTimeoutRef.current) {
+        clearTimeout(saveTimeoutRef.current);
+        saveTimeoutRef.current = null;
+      }
+      saveDrawing();
+    }
+    isLoadingRef.current = true;
+    lastDrawingIdRef.current = activeDrawing.id;
+    try {
+      excalidrawAPI.updateScene({
+        elements: activeDrawing.elements || [],
+        appState: activeDrawing.appState || {},
+        commitToStore: true
+      });
+      onDrawingLoad?.(activeDrawing.id);
+    } catch (error) {
+      console.error("[WorkspaceBridge] Failed to load drawing:", error);
+    } finally {
+      setTimeout(() => {
+        isLoadingRef.current = false;
+      }, 100);
+    }
+  }, [excalidrawAPI, activeDrawing, saveDrawing, onDrawingLoad]);
+  useEffect4(() => {
+    if (!excalidrawAPI || autoSaveInterval <= 0) return;
+    let lastElementCount = 0;
+    let lastChecksum = "";
+    const checkForChanges = () => {
+      if (isLoadingRef.current || !excalidrawAPI) return;
+      try {
+        const elements = excalidrawAPI.getSceneElements();
+        const currentCount = elements.length;
+        const currentChecksum = JSON.stringify(elements.slice(-1));
+        if (currentCount !== lastElementCount || currentChecksum !== lastChecksum) {
+          lastElementCount = currentCount;
+          lastChecksum = currentChecksum;
+          scheduleSave();
+        }
+      } catch {
+      }
+    };
+    const intervalId = setInterval(checkForChanges, 1e3);
+    return () => {
+      clearInterval(intervalId);
+      if (saveTimeoutRef.current) {
+        clearTimeout(saveTimeoutRef.current);
+      }
+    };
+  }, [excalidrawAPI, autoSaveInterval, scheduleSave]);
+  useEffect4(() => {
+    return () => {
+      if (saveTimeoutRef.current) {
+        clearTimeout(saveTimeoutRef.current);
+      }
+      saveDrawing();
+    };
+  }, [saveDrawing]);
+  return null;
+}
+
 // src/WorkspacePlugin.tsx
-import { useState as useState5, useEffect as useEffect4, useCallback as useCallback4 } from "react";
+import { useState as useState5, useEffect as useEffect5, useCallback as useCallback5 } from "react";
 import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
 function WorkspacePluginInner({
   children,
@@ -1134,7 +1243,7 @@ function WorkspacePluginInner({
 }) {
   const [sidebarOpen, setSidebarOpen] = useState5(defaultSidebarOpen);
   const { activeDrawing } = useWorkspace();
-  useEffect4(() => {
+  useEffect5(() => {
     const handleKeyDown = (e) => {
       if (e.ctrlKey && e.key === "b") {
         e.preventDefault();
@@ -1147,7 +1256,7 @@ function WorkspacePluginInner({
     window.addEventListener("keydown", handleKeyDown);
     return () => window.removeEventListener("keydown", handleKeyDown);
   }, []);
-  const handleToggleSidebar = useCallback4(() => {
+  const handleToggleSidebar = useCallback5(() => {
     setSidebarOpen((prev) => !prev);
   }, []);
   return /* @__PURE__ */ jsxs5(
@@ -1190,6 +1299,7 @@ export {
   DrawingListItem,
   DrawingsDialog,
   Sidebar,
+  WorkspaceBridge,
   WorkspaceMenuItems,
   WorkspacePlugin,
   WorkspaceProvider,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rita-workspace",
-  "version": "0.3.1",
+  "version": "0.4.0",
   "description": "Multi-drawing workspace feature for Rita (Excalidraw fork)",
   "main": "dist/index.js",
   "module": "dist/index.mjs",