rita-workspace 0.3.2 → 0.4.1

package/README.md

@@ -7,6 +7,7 @@ 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
 
@@ -20,62 +21,67 @@ 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 `ExcalidrawWrapper` component to access `langCode`):
+**Wrap ExcalidrawApp with WorkspaceProvider:**
 
 ```tsx
-const ExcalidrawWrapper = () => {
-  const [langCode] = useAppLangCode();  // Excalidraw's language hook
-
-  // ... existing code ...
-
+const ExcalidrawApp = () => {
   return (
-    <WorkspaceProvider lang={langCode}>   {/* <-- Pass langCode here */}
-      <div style={{ height: "100%" }}>
-        <Excalidraw ... />
-      </div>
-    </WorkspaceProvider>
+    <TopErrorBoundary>
+      <Provider store={appJotaiStore}>
+        <WorkspaceProvider lang="sv">    {/* <-- Add this */}
+          <ExcalidrawWrapper />
+        </WorkspaceProvider>               {/* <-- And this */}
+      </Provider>
+    </TopErrorBoundary>
   );
 };
 ```
 
-Or if you prefer wrapping at the app level:
+**Add WorkspaceBridge inside ExcalidrawWrapper** (this syncs the canvas automatically):
 
 ```tsx
-const ExcalidrawApp = () => {
+const ExcalidrawWrapper = () => {
+  const [excalidrawAPI, excalidrawRefCallback] =
+    useCallbackRefState<ExcalidrawImperativeAPI>();
+
+  // ... existing code ...
+
   return (
-    <TopErrorBoundary>
-      <Provider store={appJotaiStore}>
-        <WorkspaceProvider lang="sv">    {/* <-- Or hardcode language */}
-          <ExcalidrawWrapper />
-        </WorkspaceProvider>
-      </Provider>
-    </TopErrorBoundary>
+    <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`
+### 2. `excalidraw-app/components/AppMainMenu.tsx` - Add Menu Items
 
-**Add imports** (at the top):
+**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) => {
@@ -89,7 +95,7 @@ export const AppMainMenu: React.FC<{...}> = React.memo((props) => {
 
       {/* === 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)}
@@ -110,77 +116,50 @@ export const AppMainMenu: React.FC<{...}> = React.memo((props) => {
 });
 ```
 
-## Language Support (i18n)
+## How It Works
 
-Rita Workspace supports **Swedish** and **English**, with automatic sync to Excalidraw's language setting.
+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)
 
-### Automatic Language Sync
+## Language Support (i18n)
 
-Pass Excalidraw's `langCode` to `WorkspaceProvider` - all child components inherit the language automatically:
+Pass Excalidraw's `langCode` to `WorkspaceProvider`:
 
 ```tsx
-const [langCode] = useAppLangCode();  // From Excalidraw
+const [langCode] = useAppLangCode();
 
 <WorkspaceProvider lang={langCode}>
   {/* All components automatically use the same language */}
-  <WorkspaceMenuItems ... />
-  <DrawingsDialog ... />
-</WorkspaceProvider>
-```
-
-### Manual Override
-
-You can override the language on individual components if needed:
-
-```tsx
-<WorkspaceProvider lang="en">
-  {/* This dialog will be in Swedish despite provider being English */}
-  <DrawingsDialog lang="sv" ... />
 </WorkspaceProvider>
 ```
 
-### Supported Languages
-
 | Code | Language |
 |------|----------|
 | `sv`, `sv-SE` | 🇸🇪 Swedish |
 | `en`, `en-US` | 🇬🇧 English (default) |
 
-## Result
-
-After integration, a "📄 Ritningar" (or "📄 Drawings") submenu appears in the hamburger menu:
-
-```
-┌─────────────────────────┐
-│ 📂 Open                 │
-│ 💾 Save                 │
-│ 📄 Ritningar        ▶  │──┐
-│ 📤 Export               │  │  ┌─────────────────────┐
-│ ...                     │  └──│ ✓ Current drawing   │
-└─────────────────────────┘     │   Sketch 2          │
-                                │   Project X         │
-                                │ ─────────────────── │
-                                │ + Ny ritning        │
-                                │ 📄 Hantera...       │
-                                └─────────────────────┘
-```
-
 ## API Reference
 
 ### Components
 
 | Component | Description |
 |-----------|-------------|
-| `WorkspaceProvider` | React context provider - wrap your app with this. Accepts `lang` prop. |
-| `WorkspaceMenuItems` | Menu items for Excalidraw's MainMenu. Optional `lang` prop for override. |
-| `DrawingsDialog` | Modal dialog for managing all drawings. Optional `lang` prop for override. |
+| `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, actions, and current language |
-| `useWorkspaceLang()` | Get just the current language and translations |
+| `useWorkspace()` | Access workspace state and actions |
+| `useWorkspaceLang()` | Get current language and translations |
 
 ### useWorkspace() returns
 
@@ -191,8 +170,6 @@ const {
   activeDrawing,      // Drawing | null - currently active
   isLoading,          // boolean
   error,              // string | null
-
-  // Language
   lang,               // string - current language code
   t,                  // Translations object
 
@@ -201,13 +178,24 @@ const {
   switchDrawing,      // (id: string) => Promise<void>
   renameDrawing,      // (id: string, name: string) => Promise<void>
   removeDrawing,      // (id: string) => Promise<void>
-  saveCurrentDrawing, // (elements, appState) => Promise<void>
+  saveCurrentDrawing, // (elements, appState, files?) => Promise<void>
 } = 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

@@ -74,6 +74,8 @@ interface Translations {
     clickNewToStart: string;
     modified: string;
     confirmDelete: string;
+    exportWorkspace: string;
+    importWorkspace: string;
     shortcutNewDrawing: string;
 }
 /**
@@ -99,7 +101,9 @@ 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>;
+    exportWorkspace: () => Promise<void>;
+    importWorkspace: () => Promise<void>;
 }
 declare function useWorkspace(): WorkspaceContextValue;
 /**
@@ -262,6 +266,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 +347,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

@@ -74,6 +74,8 @@ interface Translations {
     clickNewToStart: string;
     modified: string;
     confirmDelete: string;
+    exportWorkspace: string;
+    importWorkspace: string;
     shortcutNewDrawing: string;
 }
 /**
@@ -99,7 +101,9 @@ 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>;
+    exportWorkspace: () => Promise<void>;
+    importWorkspace: () => Promise<void>;
 }
 declare function useWorkspace(): WorkspaceContextValue;
 /**
@@ -262,6 +266,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 +347,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: "Min Arbetsyta",
   close: "St\xE4ng",
   open: "\xD6ppna",
   rename: "Byt namn",
@@ -228,16 +229,19 @@ var sv = {
   clickNewToStart: 'Klicka "Ny ritning" f\xF6r att b\xF6rja.',
   modified: "\xC4ndrad",
   confirmDelete: "Vill du ta bort denna ritning?",
+  // Export/Import
+  exportWorkspace: "Exportera",
+  importWorkspace: "Importera",
   // Shortcuts
   shortcutNewDrawing: "Ctrl+Alt+N"
 };
 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",
@@ -250,6 +254,9 @@ var en = {
   clickNewToStart: 'Click "New drawing" to start.',
   modified: "Modified",
   confirmDelete: "Do you want to delete this drawing?",
+  // Export/Import
+  exportWorkspace: "Export",
+  importWorkspace: "Import",
   // Shortcuts
   shortcutNewDrawing: "Ctrl+Alt+N"
 };
@@ -398,18 +405,83 @@ 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 });
-      if (updated) {
-        setActiveDrawing2(updated);
-        setDrawings((prev) => prev.map((d) => d.id === updated.id ? updated : d));
+      const updateData = {
+        elements,
+        appState
+      };
+      if (files) {
+        updateData.files = files;
       }
+      await updateDrawing(activeDrawing.id, updateData);
     } catch (err) {
       setError(err instanceof Error ? err.message : "Failed to save drawing");
     }
   }, [activeDrawing]);
+  const exportWorkspace = (0, import_react.useCallback)(async () => {
+    try {
+      const exportData = {
+        version: 1,
+        name: workspace?.name || "Min Arbetsyta",
+        exportedAt: (/* @__PURE__ */ new Date()).toISOString(),
+        drawings: drawings.map((d) => ({
+          name: d.name,
+          elements: d.elements,
+          appState: d.appState,
+          files: d.files,
+          createdAt: d.createdAt,
+          updatedAt: d.updatedAt
+        }))
+      };
+      const blob = new Blob([JSON.stringify(exportData, null, 2)], { type: "application/json" });
+      const url = URL.createObjectURL(blob);
+      const a = document.createElement("a");
+      a.href = url;
+      a.download = `arbetsyta-${(/* @__PURE__ */ new Date()).toISOString().slice(0, 10)}.json`;
+      document.body.appendChild(a);
+      a.click();
+      document.body.removeChild(a);
+      URL.revokeObjectURL(url);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Failed to export workspace");
+    }
+  }, [workspace, drawings]);
+  const importWorkspace = (0, import_react.useCallback)(async () => {
+    if (!workspace) return;
+    try {
+      const input = document.createElement("input");
+      input.type = "file";
+      input.accept = ".json";
+      const file = await new Promise((resolve) => {
+        input.onchange = () => resolve(input.files?.[0] || null);
+        input.click();
+      });
+      if (!file) return;
+      const text = await file.text();
+      const data = JSON.parse(text);
+      if (!data.version || !Array.isArray(data.drawings)) {
+        throw new Error("Invalid workspace file");
+      }
+      for (const d of data.drawings) {
+        const drawing = await createDrawing(d.name || t.newDrawing);
+        await updateDrawing(drawing.id, {
+          elements: d.elements || [],
+          appState: d.appState || {},
+          files: d.files || {}
+        });
+        await addDrawingToWorkspace(workspace.id, drawing.id);
+      }
+      const allDrawings = await getAllDrawings();
+      const ws = await getOrCreateDefaultWorkspace();
+      const wsDrawings = allDrawings.filter((dr) => ws.drawingIds.includes(dr.id));
+      setWorkspace(ws);
+      setDrawings(wsDrawings);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Failed to import workspace");
+    }
+  }, [workspace, t]);
   const value = {
     workspace,
     drawings,
@@ -423,7 +495,9 @@ function WorkspaceProvider({ children, lang = "en" }) {
     renameDrawing,
     removeDrawing,
     duplicateCurrentDrawing,
-    saveCurrentDrawing
+    saveCurrentDrawing,
+    exportWorkspace,
+    importWorkspace
   };
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(WorkspaceContext.Provider, { value, children });
 }
@@ -747,6 +821,8 @@ var DrawingsDialog = ({
     createNewDrawing,
     renameDrawing,
     removeDrawing,
+    exportWorkspace,
+    importWorkspace,
     t: contextT,
     lang: contextLang
   } = useWorkspace();
@@ -758,15 +834,13 @@ var DrawingsDialog = ({
   const handleSelect = (0, import_react5.useCallback)(async (drawing) => {
     await switchDrawing(drawing.id);
     onDrawingSelect?.(drawing);
-    onClose();
-  }, [switchDrawing, onDrawingSelect, onClose]);
+  }, [switchDrawing, onDrawingSelect]);
   const handleCreate = (0, import_react5.useCallback)(async () => {
     const newDrawing = await createNewDrawing();
     if (newDrawing) {
       onDrawingSelect?.(newDrawing);
-      onClose();
     }
-  }, [createNewDrawing, onDrawingSelect, onClose]);
+  }, [createNewDrawing, onDrawingSelect]);
   const handleStartEdit = (0, import_react5.useCallback)((drawing) => {
     setEditingId(drawing.id);
     setEditName(drawing.name);
@@ -1098,26 +1172,67 @@ var DrawingsDialog = ({
                   alignItems: "center"
                 },
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
-                    "button",
-                    {
-                      onClick: handleCreate,
-                      style: {
-                        padding: "10px 20px",
-                        fontSize: "14px",
-                        backgroundColor: "var(--color-primary, #6c63ff)",
-                        color: "#fff",
-                        border: "none",
-                        borderRadius: "6px",
-                        cursor: "pointer",
-                        fontWeight: 500
-                      },
-                      children: [
-                        "+ ",
-                        t.newDrawing
-                      ]
-                    }
-                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: { display: "flex", gap: "8px" }, children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+                      "button",
+                      {
+                        onClick: handleCreate,
+                        style: {
+                          padding: "10px 20px",
+                          fontSize: "14px",
+                          backgroundColor: "var(--color-primary, #6c63ff)",
+                          color: "#fff",
+                          border: "none",
+                          borderRadius: "6px",
+                          cursor: "pointer",
+                          fontWeight: 500
+                        },
+                        children: [
+                          "+ ",
+                          t.newDrawing
+                        ]
+                      }
+                    ),
+                    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+                      "button",
+                      {
+                        onClick: importWorkspace,
+                        style: {
+                          padding: "10px 20px",
+                          fontSize: "14px",
+                          backgroundColor: "transparent",
+                          border: "1px solid var(--default-border-color, #ccc)",
+                          borderRadius: "6px",
+                          cursor: "pointer",
+                          color: "inherit"
+                        },
+                        children: [
+                          "\u{1F4E5} ",
+                          t.importWorkspace
+                        ]
+                      }
+                    ),
+                    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+                      "button",
+                      {
+                        onClick: exportWorkspace,
+                        style: {
+                          padding: "10px 20px",
+                          fontSize: "14px",
+                          backgroundColor: "transparent",
+                          border: "1px solid var(--default-border-color, #ccc)",
+                          borderRadius: "6px",
+                          cursor: "pointer",
+                          color: "inherit"
+                        },
+                        disabled: drawings.length === 0,
+                        children: [
+                          "\u{1F4E4} ",
+                          t.exportWorkspace
+                        ]
+                      }
+                    )
+                  ] }),
                   /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
                     "button",
                     {
@@ -1185,17 +1300,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 +1425,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 +1469,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: "Min Arbetsyta",
   close: "St\xE4ng",
   open: "\xD6ppna",
   rename: "Byt namn",
@@ -167,16 +167,19 @@ var sv = {
   clickNewToStart: 'Klicka "Ny ritning" f\xF6r att b\xF6rja.',
   modified: "\xC4ndrad",
   confirmDelete: "Vill du ta bort denna ritning?",
+  // Export/Import
+  exportWorkspace: "Exportera",
+  importWorkspace: "Importera",
   // Shortcuts
   shortcutNewDrawing: "Ctrl+Alt+N"
 };
 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",
@@ -189,6 +192,9 @@ var en = {
   clickNewToStart: 'Click "New drawing" to start.',
   modified: "Modified",
   confirmDelete: "Do you want to delete this drawing?",
+  // Export/Import
+  exportWorkspace: "Export",
+  importWorkspace: "Import",
   // Shortcuts
   shortcutNewDrawing: "Ctrl+Alt+N"
 };
@@ -337,18 +343,83 @@ 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 });
-      if (updated) {
-        setActiveDrawing2(updated);
-        setDrawings((prev) => prev.map((d) => d.id === updated.id ? updated : d));
+      const updateData = {
+        elements,
+        appState
+      };
+      if (files) {
+        updateData.files = files;
       }
+      await updateDrawing(activeDrawing.id, updateData);
     } catch (err) {
       setError(err instanceof Error ? err.message : "Failed to save drawing");
     }
   }, [activeDrawing]);
+  const exportWorkspace = useCallback(async () => {
+    try {
+      const exportData = {
+        version: 1,
+        name: workspace?.name || "Min Arbetsyta",
+        exportedAt: (/* @__PURE__ */ new Date()).toISOString(),
+        drawings: drawings.map((d) => ({
+          name: d.name,
+          elements: d.elements,
+          appState: d.appState,
+          files: d.files,
+          createdAt: d.createdAt,
+          updatedAt: d.updatedAt
+        }))
+      };
+      const blob = new Blob([JSON.stringify(exportData, null, 2)], { type: "application/json" });
+      const url = URL.createObjectURL(blob);
+      const a = document.createElement("a");
+      a.href = url;
+      a.download = `arbetsyta-${(/* @__PURE__ */ new Date()).toISOString().slice(0, 10)}.json`;
+      document.body.appendChild(a);
+      a.click();
+      document.body.removeChild(a);
+      URL.revokeObjectURL(url);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Failed to export workspace");
+    }
+  }, [workspace, drawings]);
+  const importWorkspace = useCallback(async () => {
+    if (!workspace) return;
+    try {
+      const input = document.createElement("input");
+      input.type = "file";
+      input.accept = ".json";
+      const file = await new Promise((resolve) => {
+        input.onchange = () => resolve(input.files?.[0] || null);
+        input.click();
+      });
+      if (!file) return;
+      const text = await file.text();
+      const data = JSON.parse(text);
+      if (!data.version || !Array.isArray(data.drawings)) {
+        throw new Error("Invalid workspace file");
+      }
+      for (const d of data.drawings) {
+        const drawing = await createDrawing(d.name || t.newDrawing);
+        await updateDrawing(drawing.id, {
+          elements: d.elements || [],
+          appState: d.appState || {},
+          files: d.files || {}
+        });
+        await addDrawingToWorkspace(workspace.id, drawing.id);
+      }
+      const allDrawings = await getAllDrawings();
+      const ws = await getOrCreateDefaultWorkspace();
+      const wsDrawings = allDrawings.filter((dr) => ws.drawingIds.includes(dr.id));
+      setWorkspace(ws);
+      setDrawings(wsDrawings);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Failed to import workspace");
+    }
+  }, [workspace, t]);
   const value = {
     workspace,
     drawings,
@@ -362,7 +433,9 @@ function WorkspaceProvider({ children, lang = "en" }) {
     renameDrawing,
     removeDrawing,
     duplicateCurrentDrawing,
-    saveCurrentDrawing
+    saveCurrentDrawing,
+    exportWorkspace,
+    importWorkspace
   };
   return /* @__PURE__ */ jsx(WorkspaceContext.Provider, { value, children });
 }
@@ -686,6 +759,8 @@ var DrawingsDialog = ({
     createNewDrawing,
     renameDrawing,
     removeDrawing,
+    exportWorkspace,
+    importWorkspace,
     t: contextT,
     lang: contextLang
   } = useWorkspace();
@@ -697,15 +772,13 @@ var DrawingsDialog = ({
   const handleSelect = useCallback2(async (drawing) => {
     await switchDrawing(drawing.id);
     onDrawingSelect?.(drawing);
-    onClose();
-  }, [switchDrawing, onDrawingSelect, onClose]);
+  }, [switchDrawing, onDrawingSelect]);
   const handleCreate = useCallback2(async () => {
     const newDrawing = await createNewDrawing();
     if (newDrawing) {
       onDrawingSelect?.(newDrawing);
-      onClose();
     }
-  }, [createNewDrawing, onDrawingSelect, onClose]);
+  }, [createNewDrawing, onDrawingSelect]);
   const handleStartEdit = useCallback2((drawing) => {
     setEditingId(drawing.id);
     setEditName(drawing.name);
@@ -1037,26 +1110,67 @@ var DrawingsDialog = ({
                   alignItems: "center"
                 },
                 children: [
-                  /* @__PURE__ */ jsxs4(
-                    "button",
-                    {
-                      onClick: handleCreate,
-                      style: {
-                        padding: "10px 20px",
-                        fontSize: "14px",
-                        backgroundColor: "var(--color-primary, #6c63ff)",
-                        color: "#fff",
-                        border: "none",
-                        borderRadius: "6px",
-                        cursor: "pointer",
-                        fontWeight: 500
-                      },
-                      children: [
-                        "+ ",
-                        t.newDrawing
-                      ]
-                    }
-                  ),
+                  /* @__PURE__ */ jsxs4("div", { style: { display: "flex", gap: "8px" }, children: [
+                    /* @__PURE__ */ jsxs4(
+                      "button",
+                      {
+                        onClick: handleCreate,
+                        style: {
+                          padding: "10px 20px",
+                          fontSize: "14px",
+                          backgroundColor: "var(--color-primary, #6c63ff)",
+                          color: "#fff",
+                          border: "none",
+                          borderRadius: "6px",
+                          cursor: "pointer",
+                          fontWeight: 500
+                        },
+                        children: [
+                          "+ ",
+                          t.newDrawing
+                        ]
+                      }
+                    ),
+                    /* @__PURE__ */ jsxs4(
+                      "button",
+                      {
+                        onClick: importWorkspace,
+                        style: {
+                          padding: "10px 20px",
+                          fontSize: "14px",
+                          backgroundColor: "transparent",
+                          border: "1px solid var(--default-border-color, #ccc)",
+                          borderRadius: "6px",
+                          cursor: "pointer",
+                          color: "inherit"
+                        },
+                        children: [
+                          "\u{1F4E5} ",
+                          t.importWorkspace
+                        ]
+                      }
+                    ),
+                    /* @__PURE__ */ jsxs4(
+                      "button",
+                      {
+                        onClick: exportWorkspace,
+                        style: {
+                          padding: "10px 20px",
+                          fontSize: "14px",
+                          backgroundColor: "transparent",
+                          border: "1px solid var(--default-border-color, #ccc)",
+                          borderRadius: "6px",
+                          cursor: "pointer",
+                          color: "inherit"
+                        },
+                        disabled: drawings.length === 0,
+                        children: [
+                          "\u{1F4E4} ",
+                          t.exportWorkspace
+                        ]
+                      }
+                    )
+                  ] }),
                   /* @__PURE__ */ jsx6(
                     "button",
                     {
@@ -1124,8 +1238,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 +1350,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 +1363,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 +1406,7 @@ export {
   DrawingListItem,
   DrawingsDialog,
   Sidebar,
+  WorkspaceBridge,
   WorkspaceMenuItems,
   WorkspacePlugin,
   WorkspaceProvider,

package/package.json

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