rita-workspace 0.5.21 → 0.5.22

package/README.md

@@ -5,11 +5,13 @@ Multi-drawing workspace feature for Rita (Excalidraw fork based on B310-digital/
 ## Features
 
 - **Multiple drawings** - Create and manage multiple drawings in one workspace
-- **Menu integration** - Seamlessly integrates with Excalidraw's hamburger menu
+- **Folders** - Organize drawings in folders
 - **Auto-save** - All drawings saved locally in IndexedDB
-- **Auto-sync** - Automatic sync between workspace and Excalidraw canvas
-- **Rename & delete** - Full drawing management via dialog
+- **Multi-tab conflict detection** - Prevents data loss when same drawing is open in multiple tabs
+- **Workspace toggle** - Preview feature that can be enabled/disabled per browser tab
+- **Export/Import** - Export workspace as JSON, import `.excalidraw` files
 - **i18n support** - Swedish and English with automatic Excalidraw language sync
+- **Optimized loading** - DB pre-warming and parallel initialization
 
 ## Installation
 
@@ -21,127 +23,103 @@ yarn add rita-workspace
 
 ## Integration Guide
 
-Three files need to be modified in the B310/Excalidraw fork:
-
-### 1. `excalidraw-app/App.tsx` - Add Provider and Bridge
-
-**Add imports:**
+### 1. `App.tsx` - Add Provider
 
 ```tsx
-import { WorkspaceProvider, WorkspaceBridge } from "rita-workspace";
+import { WorkspaceProvider, useWorkspace, DrawingsDialog } from "rita-workspace";
+
+const ExcalidrawApp = () => (
+  <WorkspaceProvider lang="sv">
+    <ExcalidrawWrapper />
+  </WorkspaceProvider>
+);
 ```
 
-**Wrap ExcalidrawApp with WorkspaceProvider:**
+### 2. Use workspace in your component
 
 ```tsx
-const ExcalidrawApp = () => {
-  return (
-    <TopErrorBoundary>
-      <Provider store={appJotaiStore}>
-        <WorkspaceProvider lang="sv">    {/* <-- Add this */}
-          <ExcalidrawWrapper />
-        </WorkspaceProvider>               {/* <-- And this */}
-      </Provider>
-    </TopErrorBoundary>
-  );
+const ExcalidrawWrapper = () => {
+  const {
+    activeDrawing,
+    saveCurrentDrawing,
+    saveDrawingById,
+    isDrawingConflict,
+  } = useWorkspace();
+
+  // Load drawing into canvas when activeDrawing changes
+  useEffect(() => {
+    if (!excalidrawAPI || !activeDrawing) return;
+    excalidrawAPI.updateScene({
+      elements: activeDrawing.elements || [],
+      appState: activeDrawing.appState || {},
+    });
+  }, [activeDrawing?.id]);
+
+  // Auto-save on canvas changes (debounced)
+  const onChange = (elements, appState, files) => {
+    if (activeDrawing && !isDrawingConflict) {
+      saveCurrentDrawing(elements, { viewBackgroundColor: appState.viewBackgroundColor }, files);
+    }
+  };
 };
 ```
 
-**Add WorkspaceBridge inside ExcalidrawWrapper** (this syncs the canvas automatically):
+### 3. Add DrawingsDialog for management UI
 
 ```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>
-  );
-};
+const [showDialog, setShowDialog] = useState(false);
+
+<DrawingsDialog
+  open={showDialog}
+  onClose={() => setShowDialog(false)}
+  onDrawingSelect={() => setShowDialog(false)}
+  renderThumbnail={(drawing) => <DrawingThumbnail drawing={drawing} />}
+/>
 ```
 
-### 2. `excalidraw-app/components/AppMainMenu.tsx` - Add Menu Items
+## Multi-Tab Conflict Detection
 
-**Add imports:**
+When the same drawing is open in multiple browser tabs, the workspace automatically detects this and makes the later tab **read-only** to prevent data loss.
 
-```tsx
-import React, { useState } from "react";
+### How it works
 
-import { WorkspaceMenuItems, DrawingsDialog } from "rita-workspace";
-import { LoadIcon } from "../components/icons";  // Excalidraw's folder icon
-```
+1. Each tab registers itself with a unique `TAB_ID` in `localStorage`
+2. When a drawing is opened, the tab records which drawing it has and when it opened it
+3. If another tab already has the same drawing open (opened earlier), `isDrawingConflict` becomes `true`
+4. The conflicted tab is read-only — `saveCurrentDrawing` and `saveDrawingById` silently skip saves
+5. When the first tab closes or switches to another drawing, the conflict resolves automatically
 
-**Add state and menu items:**
+### External conflict check
 
 ```tsx
-export const AppMainMenu: React.FC<{...}> = React.memo((props) => {
-  const [showDrawingsDialog, setShowDrawingsDialog] = useState(false);
-
-  return (
-    <>
-    <MainMenu>
-      <MainMenu.DefaultItems.LoadScene />
-      <MainMenu.DefaultItems.SaveToActiveFile />
-
-      {/* === RITA WORKSPACE === */}
-      <MainMenu.Sub>
-        <MainMenu.Sub.Trigger>{LoadIcon} Arbetsyta</MainMenu.Sub.Trigger>
-        <MainMenu.Sub.Content>
-          <WorkspaceMenuItems
-            onManageDrawings={() => setShowDrawingsDialog(true)}
-          />
-        </MainMenu.Sub.Content>
-      </MainMenu.Sub>
-
-      <MainMenu.DefaultItems.Export />
-      {/* ... rest of menu items ... */}
-    </MainMenu>
-
-    <DrawingsDialog
-      open={showDrawingsDialog}
-      onClose={() => setShowDrawingsDialog(false)}
-    />
-    </>
-  );
-});
+import { isDrawingOpenedEarlierInOtherTab } from "rita-workspace";
+
+// Returns true if another tab opened this drawing before the current tab
+if (isDrawingOpenedEarlierInOtherTab(drawingId)) {
+  // Don't save — another tab owns this drawing
+}
 ```
 
-## How It Works
+### Communication between tabs
 
-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)
+- **BroadcastChannel** (`rita-workspace-tabs`) — instant notification when tabs open/close/switch drawings
+- **localStorage** (`rita-workspace-tabs`) — persistent tab registry, backup for BroadcastChannel
+- **Stale tab cleanup** — on mount, pings other tabs via BroadcastChannel and removes entries that don't respond
 
-## Language Support (i18n)
+## Workspace Toggle (Preview Feature)
 
-Pass Excalidraw's `langCode` to `WorkspaceProvider`:
+The workspace can be enabled/disabled per browser tab using `sessionStorage`:
 
 ```tsx
-const [langCode] = useAppLangCode();
-
-<WorkspaceProvider lang={langCode}>
-  {/* All components automatically use the same language */}
-</WorkspaceProvider>
+// Each tab reads its own toggle state
+const [workspaceEnabled] = useState(() =>
+  sessionStorage.getItem("rita-workspace-enabled") === "true"
+);
 ```
 
-| Code | Language |
-|------|----------|
-| `sv`, `sv-SE` | 🇸🇪 Swedish |
-| `en`, `en-US` | 🇬🇧 English (default) |
+- Default: **off** (each new tab starts without workspace)
+- State stored in `sessionStorage` (not shared between tabs)
+- When disabled: auto-save to workspace skipped, drawing-switch disabled, footer hidden
 
 ## API Reference
 
@@ -149,71 +127,96 @@ const [langCode] = useAppLangCode();
 
 | Component | Description |
 |-----------|-------------|
-| `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` |
+| `WorkspaceProvider` | React context provider. Props: `lang`, `children` |
+| `DrawingsDialog` | Management dialog. Props: `open`, `onClose`, `onDrawingSelect`, `renderThumbnail` |
 
 ### Hooks
 
-| Hook | Description |
-|------|-------------|
-| `useWorkspace()` | Access workspace state and actions |
-| `useWorkspaceLang()` | Get current language and translations |
+| Hook | Returns |
+|------|---------|
+| `useWorkspace()` | Full workspace state and actions |
+| `useWorkspaceLang()` | `{ lang, t }` — current language and translations |
+
+### Exported functions
+
+| Function | Description |
+|----------|-------------|
+| `isDrawingOpenedEarlierInOtherTab(id)` | Check if another tab has this drawing open |
+| `warmDB()` | Pre-warm IndexedDB connection (called automatically at import) |
 
 ### useWorkspace() returns
 
 ```tsx
 const {
   // State
-  drawings,           // Drawing[] - all drawings
-  activeDrawing,      // Drawing | null - currently active
+  workspace,          // Workspace | null
+  drawings,           // Drawing[]
+  folders,            // Folder[]
+  activeDrawing,      // Drawing | null
   isLoading,          // boolean
   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>
+  isDrawingConflict,  // boolean — true if read-only (another tab has this drawing)
+  lang,               // string
+  t,                  // Translations
+
+  // Drawing actions
+  createNewDrawing,       // (name?, folderId?) => Promise<Drawing | null>
+  switchDrawing,          // (id) => Promise<void>
+  renameDrawing,          // (id, name) => Promise<void>
+  removeDrawing,          // (id) => Promise<void>
+  duplicateCurrentDrawing, // () => Promise<Drawing | null>
+
+  // Folder actions
+  createFolder,       // (name) => Promise<Folder | null>
+  renameFolder,       // (id, name) => Promise<void>
+  deleteFolder,       // (id) => Promise<void>
+  moveDrawingToFolder, // (drawingId, folderId) => Promise<void>
+
+  // Save (blocked if drawing is in conflict)
   saveCurrentDrawing, // (elements, appState, files?) => Promise<void>
+  saveDrawingById,    // (id, elements, appState, files?) => Promise<void>
+
+  // Utilities
+  refreshDrawings,    // () => Promise<void>
+  exportWorkspace,    // () => Promise<void>
+  importWorkspace,    // () => Promise<void>
+  exportDrawingAsExcalidraw, // (id) => Promise<void>
+  importExcalidrawFile,      // () => 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:
+Drawings are stored in **IndexedDB** (`rita-workspace` database, version 2):
 
 ```typescript
 interface Drawing {
-  id: string;
+  id: string;           // nanoid
   name: string;
-  elements: ExcalidrawElement[];
+  folderId: string | null;
+  elements: unknown[];  // Excalidraw elements
   appState: Record<string, unknown>;
-  files: Record<string, unknown>;
+  files: Record<string, unknown>;  // Image files
   createdAt: number;
   updatedAt: number;
 }
 ```
 
-## Links
+## Language Support
+
+| Code | Language |
+|------|----------|
+| `sv`, `sv-SE` | Swedish |
+| `en`, `en-US` | English (default) |
 
-- **npm:** https://www.npmjs.com/package/rita-workspace
-- **B310 Excalidraw Fork:** https://github.com/b310-digital/excalidraw
-- **Original Excalidraw:** https://github.com/excalidraw/excalidraw
+## Development
+
+```bash
+yarn build    # Build with tsup (cjs + esm + dts)
+yarn dev      # Watch mode
+yarn test     # Run tests with vitest
+yarn typecheck # TypeScript check
+```
 
 ## License
 

package/dist/index.d.mts

@@ -138,7 +138,7 @@ interface WorkspaceContextValue {
     isDrawingConflict: boolean;
     lang: string;
     t: Translations;
-    createNewDrawing: (name?: string, folderId?: string | null) => Promise<Drawing | null>;
+    createNewDrawing: (name?: string, folderId?: string | null, activate?: boolean) => Promise<Drawing | null>;
     switchDrawing: (id: string) => Promise<void>;
     renameDrawing: (id: string, name: string) => Promise<void>;
     removeDrawing: (id: string) => Promise<void>;
@@ -153,6 +153,7 @@ interface WorkspaceContextValue {
     exportWorkspace: () => Promise<void>;
     importWorkspace: () => Promise<void>;
     exportDrawingAsExcalidraw: (id: string) => Promise<void>;
+    exportAllDrawingsAsExcalidraw: () => Promise<void>;
     importExcalidrawFile: () => Promise<void>;
 }
 declare function useWorkspace(): WorkspaceContextValue;

package/dist/index.d.ts

@@ -138,7 +138,7 @@ interface WorkspaceContextValue {
     isDrawingConflict: boolean;
     lang: string;
     t: Translations;
-    createNewDrawing: (name?: string, folderId?: string | null) => Promise<Drawing | null>;
+    createNewDrawing: (name?: string, folderId?: string | null, activate?: boolean) => Promise<Drawing | null>;
     switchDrawing: (id: string) => Promise<void>;
     renameDrawing: (id: string, name: string) => Promise<void>;
     removeDrawing: (id: string) => Promise<void>;
@@ -153,6 +153,7 @@ interface WorkspaceContextValue {
     exportWorkspace: () => Promise<void>;
     importWorkspace: () => Promise<void>;
     exportDrawingAsExcalidraw: (id: string) => Promise<void>;
+    exportAllDrawingsAsExcalidraw: () => Promise<void>;
     importExcalidrawFile: () => Promise<void>;
 }
 declare function useWorkspace(): WorkspaceContextValue;

package/dist/index.js

@@ -434,6 +434,14 @@ function useWorkspaceLang() {
 var TAB_ID = typeof crypto !== "undefined" && crypto.randomUUID ? crypto.randomUUID() : Math.random().toString(36).slice(2);
 var TABS_KEY = "rita-workspace-tabs";
 var TAB_CHANNEL = "rita-workspace-tabs";
+function broadcastWorkspaceChange() {
+  try {
+    const channel = new BroadcastChannel(TAB_CHANNEL);
+    channel.postMessage({ type: "workspace-changed", tabId: TAB_ID });
+    channel.close();
+  } catch {
+  }
+}
 var tabsMapCache = null;
 var tabsMapRaw = null;
 function getTabsMap() {
@@ -562,6 +570,8 @@ function WorkspaceProvider({ children, lang = "en" }) {
       channel.onmessage = (event) => {
         if (event.data?.type === "ping") {
           channel?.postMessage({ type: "pong", tabId: TAB_ID });
+        } else if (event.data?.type === "workspace-changed" && event.data?.tabId !== TAB_ID) {
+          refreshDrawingsRef.current();
         }
       };
     } catch {
@@ -699,11 +709,16 @@ function WorkspaceProvider({ children, lang = "en" }) {
   const refreshDrawings = (0, import_react.useCallback)(async () => {
     if (!workspace) return;
     try {
-      const [allDrawings, allFolders] = await Promise.all([
+      const [freshWorkspace, allDrawings, allFolders] = await Promise.all([
+        getWorkspace(workspace.id),
         getAllDrawings(),
         getAllFolders()
       ]);
-      const wsDrawings = allDrawings.filter((d) => workspace.drawingIds.includes(d.id));
+      const drawingIds = freshWorkspace?.drawingIds || workspace.drawingIds;
+      const wsDrawings = allDrawings.filter((d) => drawingIds.includes(d.id));
+      if (freshWorkspace) {
+        setWorkspace((prev) => prev ? { ...freshWorkspace, activeDrawingId: prev.activeDrawingId } : freshWorkspace);
+      }
       setDrawings(wsDrawings);
       setFolders(allFolders);
     } catch (err) {
@@ -715,7 +730,9 @@ function WorkspaceProvider({ children, lang = "en" }) {
   foldersRef.current = folders;
   const activeDrawingIdRef = (0, import_react.useRef)(activeDrawing?.id ?? null);
   activeDrawingIdRef.current = activeDrawing?.id ?? null;
-  const createNewDrawing = (0, import_react.useCallback)(async (name, folderId) => {
+  const refreshDrawingsRef = (0, import_react.useRef)(refreshDrawings);
+  refreshDrawingsRef.current = refreshDrawings;
+  const createNewDrawing = (0, import_react.useCallback)(async (name, folderId, activate = true) => {
     if (!workspace) return null;
     const now = Date.now();
     const tempId = `temp-${now}`;
@@ -732,19 +749,24 @@ function WorkspaceProvider({ children, lang = "en" }) {
       updatedAt: now
     };
     setDrawings((prev) => [...prev, tempDrawing]);
-    setActiveDrawing2(tempDrawing);
-    sessionStorage.setItem("rita-workspace-tab-drawing", tempId);
+    if (activate) {
+      setActiveDrawing2(tempDrawing);
+      sessionStorage.setItem("rita-workspace-tab-drawing", tempId);
+    }
     try {
       const drawing = await createDrawing(name || defaultName, [], {}, folderId);
       await addDrawingToWorkspace(workspace.id, drawing.id);
       setDrawings((prev) => prev.map((d) => d.id === tempId ? drawing : d));
-      setActiveDrawing2(drawing);
+      if (activate) {
+        setActiveDrawing2(drawing);
+        sessionStorage.setItem("rita-workspace-tab-drawing", drawing.id);
+      }
       setWorkspace((prev) => prev ? {
         ...prev,
         drawingIds: [...prev.drawingIds, drawing.id],
-        activeDrawingId: drawing.id
+        ...activate ? { activeDrawingId: drawing.id } : {}
       } : null);
-      sessionStorage.setItem("rita-workspace-tab-drawing", drawing.id);
+      broadcastWorkspaceChange();
       return drawing;
     } catch (err) {
       setDrawings((prev) => prev.filter((d) => d.id !== tempId));
@@ -772,6 +794,7 @@ function WorkspaceProvider({ children, lang = "en" }) {
     }
     try {
       await updateDrawing(id, { name });
+      broadcastWorkspaceChange();
     } catch (err) {
       refreshDrawings();
       setError(err instanceof Error ? err.message : "Failed to rename drawing");
@@ -793,6 +816,7 @@ function WorkspaceProvider({ children, lang = "en" }) {
       if (updatedWorkspace) {
         setWorkspace(updatedWorkspace);
       }
+      broadcastWorkspaceChange();
     } catch (err) {
       if (removedDrawing) {
         setDrawings((prev) => [...prev, removedDrawing]);
@@ -823,6 +847,7 @@ function WorkspaceProvider({ children, lang = "en" }) {
           ...prev,
           drawingIds: [...prev.drawingIds, duplicate.id]
         } : null);
+        broadcastWorkspaceChange();
         return duplicate;
       }
       setDrawings((prev) => prev.filter((d) => d.id !== tempId));
@@ -954,6 +979,36 @@ function WorkspaceProvider({ children, lang = "en" }) {
       setError(err instanceof Error ? err.message : "Failed to export drawing");
     }
   }, [drawings]);
+  const exportAllDrawingsAsExcalidraw = (0, import_react.useCallback)(async () => {
+    try {
+      const all = await getAllDrawings();
+      const wsDrawings = workspace ? all.filter((d) => workspace.drawingIds.includes(d.id)) : all;
+      for (let i = 0; i < wsDrawings.length; i++) {
+        const drawing = wsDrawings[i];
+        const excalidrawData = {
+          type: "excalidraw",
+          version: 2,
+          source: "rita-workspace",
+          elements: drawing.elements || [],
+          appState: { viewBackgroundColor: "#ffffff", ...drawing.appState || {} },
+          files: drawing.files || {}
+        };
+        const blob = new Blob([JSON.stringify(excalidrawData, null, 2)], { type: "application/json" });
+        const url = URL.createObjectURL(blob);
+        const a = document.createElement("a");
+        a.href = url;
+        const safeName = (drawing.name || "ritning").replace(/[\\/:*?"<>|]/g, "_");
+        a.download = `${String(i + 1).padStart(2, "0")}_${safeName}.excalidraw`;
+        document.body.appendChild(a);
+        a.click();
+        document.body.removeChild(a);
+        URL.revokeObjectURL(url);
+        await new Promise((r) => setTimeout(r, 150));
+      }
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Failed to export all drawings");
+    }
+  }, [workspace]);
   const importExcalidrawFile = (0, import_react.useCallback)(async () => {
     if (!workspace) return;
     try {
@@ -1068,6 +1123,7 @@ function WorkspaceProvider({ children, lang = "en" }) {
     exportWorkspace,
     importWorkspace,
     exportDrawingAsExcalidraw,
+    exportAllDrawingsAsExcalidraw,
     importExcalidrawFile
   };
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(WorkspaceContext.Provider, { value, children });
@@ -1432,6 +1488,7 @@ var DrawingsDialog = ({
     exportWorkspace,
     importWorkspace,
     exportDrawingAsExcalidraw,
+    exportAllDrawingsAsExcalidraw,
     importExcalidrawFile,
     refreshDrawings,
     t: contextT,
@@ -1515,9 +1572,8 @@ var DrawingsDialog = ({
     setSwitchingId(null);
   }, [switchDrawing, onDrawingSelect]);
   const handleCreate = (0, import_react5.useCallback)(async (folderId) => {
-    const newDrawing = await createNewDrawing(void 0, folderId);
-    if (newDrawing) onDrawingSelect?.(newDrawing);
-  }, [createNewDrawing, onDrawingSelect]);
+    await createNewDrawing(void 0, folderId, false);
+  }, [createNewDrawing]);
   const handleStartEdit = (0, import_react5.useCallback)((drawing) => {
     setEditingId(drawing.id);
     setEditName(drawing.name);
@@ -2244,6 +2300,15 @@ var DrawingsDialog = ({
                     }
                   }
                 ),
+                /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+                  ActionButton,
+                  {
+                    icon: "\u{1F4E6}",
+                    label: "Exportera alla som .excalidraw",
+                    description: "Laddar ner varje ritning som separat fil",
+                    onClick: exportAllDrawingsAsExcalidraw
+                  }
+                ),
                 /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
                   ActionButton,
                   {

package/dist/index.mjs

@@ -363,6 +363,14 @@ function useWorkspaceLang() {
 var TAB_ID = typeof crypto !== "undefined" && crypto.randomUUID ? crypto.randomUUID() : Math.random().toString(36).slice(2);
 var TABS_KEY = "rita-workspace-tabs";
 var TAB_CHANNEL = "rita-workspace-tabs";
+function broadcastWorkspaceChange() {
+  try {
+    const channel = new BroadcastChannel(TAB_CHANNEL);
+    channel.postMessage({ type: "workspace-changed", tabId: TAB_ID });
+    channel.close();
+  } catch {
+  }
+}
 var tabsMapCache = null;
 var tabsMapRaw = null;
 function getTabsMap() {
@@ -491,6 +499,8 @@ function WorkspaceProvider({ children, lang = "en" }) {
       channel.onmessage = (event) => {
         if (event.data?.type === "ping") {
           channel?.postMessage({ type: "pong", tabId: TAB_ID });
+        } else if (event.data?.type === "workspace-changed" && event.data?.tabId !== TAB_ID) {
+          refreshDrawingsRef.current();
         }
       };
     } catch {
@@ -628,11 +638,16 @@ function WorkspaceProvider({ children, lang = "en" }) {
   const refreshDrawings = useCallback(async () => {
     if (!workspace) return;
     try {
-      const [allDrawings, allFolders] = await Promise.all([
+      const [freshWorkspace, allDrawings, allFolders] = await Promise.all([
+        getWorkspace(workspace.id),
         getAllDrawings(),
         getAllFolders()
       ]);
-      const wsDrawings = allDrawings.filter((d) => workspace.drawingIds.includes(d.id));
+      const drawingIds = freshWorkspace?.drawingIds || workspace.drawingIds;
+      const wsDrawings = allDrawings.filter((d) => drawingIds.includes(d.id));
+      if (freshWorkspace) {
+        setWorkspace((prev) => prev ? { ...freshWorkspace, activeDrawingId: prev.activeDrawingId } : freshWorkspace);
+      }
       setDrawings(wsDrawings);
       setFolders(allFolders);
     } catch (err) {
@@ -644,7 +659,9 @@ function WorkspaceProvider({ children, lang = "en" }) {
   foldersRef.current = folders;
   const activeDrawingIdRef = useRef(activeDrawing?.id ?? null);
   activeDrawingIdRef.current = activeDrawing?.id ?? null;
-  const createNewDrawing = useCallback(async (name, folderId) => {
+  const refreshDrawingsRef = useRef(refreshDrawings);
+  refreshDrawingsRef.current = refreshDrawings;
+  const createNewDrawing = useCallback(async (name, folderId, activate = true) => {
     if (!workspace) return null;
     const now = Date.now();
     const tempId = `temp-${now}`;
@@ -661,19 +678,24 @@ function WorkspaceProvider({ children, lang = "en" }) {
       updatedAt: now
     };
     setDrawings((prev) => [...prev, tempDrawing]);
-    setActiveDrawing2(tempDrawing);
-    sessionStorage.setItem("rita-workspace-tab-drawing", tempId);
+    if (activate) {
+      setActiveDrawing2(tempDrawing);
+      sessionStorage.setItem("rita-workspace-tab-drawing", tempId);
+    }
     try {
       const drawing = await createDrawing(name || defaultName, [], {}, folderId);
       await addDrawingToWorkspace(workspace.id, drawing.id);
       setDrawings((prev) => prev.map((d) => d.id === tempId ? drawing : d));
-      setActiveDrawing2(drawing);
+      if (activate) {
+        setActiveDrawing2(drawing);
+        sessionStorage.setItem("rita-workspace-tab-drawing", drawing.id);
+      }
       setWorkspace((prev) => prev ? {
         ...prev,
         drawingIds: [...prev.drawingIds, drawing.id],
-        activeDrawingId: drawing.id
+        ...activate ? { activeDrawingId: drawing.id } : {}
       } : null);
-      sessionStorage.setItem("rita-workspace-tab-drawing", drawing.id);
+      broadcastWorkspaceChange();
       return drawing;
     } catch (err) {
       setDrawings((prev) => prev.filter((d) => d.id !== tempId));
@@ -701,6 +723,7 @@ function WorkspaceProvider({ children, lang = "en" }) {
     }
     try {
       await updateDrawing(id, { name });
+      broadcastWorkspaceChange();
     } catch (err) {
       refreshDrawings();
       setError(err instanceof Error ? err.message : "Failed to rename drawing");
@@ -722,6 +745,7 @@ function WorkspaceProvider({ children, lang = "en" }) {
       if (updatedWorkspace) {
         setWorkspace(updatedWorkspace);
       }
+      broadcastWorkspaceChange();
     } catch (err) {
       if (removedDrawing) {
         setDrawings((prev) => [...prev, removedDrawing]);
@@ -752,6 +776,7 @@ function WorkspaceProvider({ children, lang = "en" }) {
           ...prev,
           drawingIds: [...prev.drawingIds, duplicate.id]
         } : null);
+        broadcastWorkspaceChange();
         return duplicate;
       }
       setDrawings((prev) => prev.filter((d) => d.id !== tempId));
@@ -883,6 +908,36 @@ function WorkspaceProvider({ children, lang = "en" }) {
       setError(err instanceof Error ? err.message : "Failed to export drawing");
     }
   }, [drawings]);
+  const exportAllDrawingsAsExcalidraw = useCallback(async () => {
+    try {
+      const all = await getAllDrawings();
+      const wsDrawings = workspace ? all.filter((d) => workspace.drawingIds.includes(d.id)) : all;
+      for (let i = 0; i < wsDrawings.length; i++) {
+        const drawing = wsDrawings[i];
+        const excalidrawData = {
+          type: "excalidraw",
+          version: 2,
+          source: "rita-workspace",
+          elements: drawing.elements || [],
+          appState: { viewBackgroundColor: "#ffffff", ...drawing.appState || {} },
+          files: drawing.files || {}
+        };
+        const blob = new Blob([JSON.stringify(excalidrawData, null, 2)], { type: "application/json" });
+        const url = URL.createObjectURL(blob);
+        const a = document.createElement("a");
+        a.href = url;
+        const safeName = (drawing.name || "ritning").replace(/[\\/:*?"<>|]/g, "_");
+        a.download = `${String(i + 1).padStart(2, "0")}_${safeName}.excalidraw`;
+        document.body.appendChild(a);
+        a.click();
+        document.body.removeChild(a);
+        URL.revokeObjectURL(url);
+        await new Promise((r) => setTimeout(r, 150));
+      }
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Failed to export all drawings");
+    }
+  }, [workspace]);
   const importExcalidrawFile = useCallback(async () => {
     if (!workspace) return;
     try {
@@ -997,6 +1052,7 @@ function WorkspaceProvider({ children, lang = "en" }) {
     exportWorkspace,
     importWorkspace,
     exportDrawingAsExcalidraw,
+    exportAllDrawingsAsExcalidraw,
     importExcalidrawFile
   };
   return /* @__PURE__ */ jsx(WorkspaceContext.Provider, { value, children });
@@ -1361,6 +1417,7 @@ var DrawingsDialog = ({
     exportWorkspace,
     importWorkspace,
     exportDrawingAsExcalidraw,
+    exportAllDrawingsAsExcalidraw,
     importExcalidrawFile,
     refreshDrawings,
     t: contextT,
@@ -1444,9 +1501,8 @@ var DrawingsDialog = ({
     setSwitchingId(null);
   }, [switchDrawing, onDrawingSelect]);
   const handleCreate = useCallback2(async (folderId) => {
-    const newDrawing = await createNewDrawing(void 0, folderId);
-    if (newDrawing) onDrawingSelect?.(newDrawing);
-  }, [createNewDrawing, onDrawingSelect]);
+    await createNewDrawing(void 0, folderId, false);
+  }, [createNewDrawing]);
   const handleStartEdit = useCallback2((drawing) => {
     setEditingId(drawing.id);
     setEditName(drawing.name);
@@ -2173,6 +2229,15 @@ var DrawingsDialog = ({
                     }
                   }
                 ),
+                /* @__PURE__ */ jsx6(
+                  ActionButton,
+                  {
+                    icon: "\u{1F4E6}",
+                    label: "Exportera alla som .excalidraw",
+                    description: "Laddar ner varje ritning som separat fil",
+                    onClick: exportAllDrawingsAsExcalidraw
+                  }
+                ),
                 /* @__PURE__ */ jsx6(
                   ActionButton,
                   {

package/package.json

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