rita-workspace 0.5.27 → 0.5.28

package/dist/index.js

@@ -432,19 +432,34 @@ function useWorkspaceLang() {
   return { lang: context.lang, t: context.t };
 }
 var TAB_ID_KEY = "rita-workspace-tab-id";
+var TAB_ENTRY_KEY = "rita-workspace-tab-entry";
+function generateFreshTabId() {
+  return typeof crypto !== "undefined" && crypto.randomUUID ? crypto.randomUUID() : Math.random().toString(36).slice(2);
+}
 var TAB_ID = (() => {
   try {
     const existing = sessionStorage.getItem(TAB_ID_KEY);
     if (existing) return existing;
   } catch {
   }
-  const fresh = typeof crypto !== "undefined" && crypto.randomUUID ? crypto.randomUUID() : Math.random().toString(36).slice(2);
+  const fresh = generateFreshTabId();
   try {
     sessionStorage.setItem(TAB_ID_KEY, fresh);
   } catch {
   }
   return fresh;
 })();
+function regenerateTabId() {
+  TAB_ID = generateFreshTabId();
+  try {
+    sessionStorage.setItem(TAB_ID_KEY, TAB_ID);
+  } catch {
+  }
+  try {
+    sessionStorage.removeItem(TAB_ENTRY_KEY);
+  } catch {
+  }
+}
 var TABS_KEY = "rita-workspace-tabs";
 var TAB_CHANNEL = "rita-workspace-tabs";
 function broadcastWorkspaceChange() {
@@ -477,7 +492,6 @@ function getTabsMap() {
     return {};
   }
 }
-var TAB_ENTRY_KEY = "rita-workspace-tab-entry";
 function setTabDrawing(drawingId) {
   const tabs = getTabsMap();
   if (drawingId) {
@@ -516,6 +530,28 @@ function isDrawingOpenedEarlierInOtherTab(drawingId) {
     ([tabId, entry]) => tabId !== TAB_ID && entry.drawingId === drawingId && entry.openedAt <= myOpenedAt
   );
 }
+function detectTabIdCollision() {
+  return new Promise((resolve) => {
+    let channel;
+    try {
+      channel = new BroadcastChannel(TAB_CHANNEL);
+    } catch {
+      resolve(false);
+      return;
+    }
+    let collided = false;
+    channel.onmessage = (event) => {
+      if (event.data?.type === "id-collision" && event.data?.tabId === TAB_ID) {
+        collided = true;
+      }
+    };
+    channel.postMessage({ type: "id-claim", tabId: TAB_ID });
+    setTimeout(() => {
+      channel.close();
+      resolve(collided);
+    }, 300);
+  });
+}
 function cleanupStaleTabs() {
   const tabs = getTabsMap();
   const otherTabIds = Object.keys(tabs).filter((id) => id !== TAB_ID);
@@ -597,6 +633,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 === "id-claim" && event.data?.tabId === TAB_ID) {
+          channel?.postMessage({ type: "id-collision", tabId: TAB_ID });
         } else if (event.data?.type === "workspace-changed" && event.data?.tabId !== TAB_ID) {
           refreshDrawingsRef.current();
         }
@@ -608,18 +646,32 @@ function WorkspaceProvider({ children, lang = "en" }) {
     };
   }, []);
   const hasCleanedUpRef = (0, import_react.useRef)(false);
+  const [tabIdReady, setTabIdReady] = (0, import_react.useState)(false);
   (0, import_react.useEffect)(() => {
-    cleanupStaleTabs();
-    const timer = setTimeout(() => {
-      hasCleanedUpRef.current = true;
-      const drawingId = activeDrawingIdRef.current;
-      if (drawingId) {
-        setIsDrawingConflict(isDrawingOpenedEarlierInOtherTab(drawingId));
+    let cancelled = false;
+    let timer = null;
+    (async () => {
+      if (await detectTabIdCollision()) {
+        regenerateTabId();
       }
-    }, 600);
-    return () => clearTimeout(timer);
+      if (cancelled) return;
+      setTabIdReady(true);
+      cleanupStaleTabs();
+      timer = setTimeout(() => {
+        hasCleanedUpRef.current = true;
+        const drawingId = activeDrawingIdRef.current;
+        if (drawingId) {
+          setIsDrawingConflict(isDrawingOpenedEarlierInOtherTab(drawingId));
+        }
+      }, 600);
+    })();
+    return () => {
+      cancelled = true;
+      if (timer) clearTimeout(timer);
+    };
   }, []);
   (0, import_react.useEffect)(() => {
+    if (!tabIdReady) return;
     const drawingId = activeDrawing?.id || null;
     setTabDrawing(drawingId);
     if (hasCleanedUpRef.current) {
@@ -679,7 +731,7 @@ function WorkspaceProvider({ children, lang = "en" }) {
       document.removeEventListener("visibilitychange", onVisibilityChange);
       stopPolling();
     };
-  }, [activeDrawing?.id]);
+  }, [activeDrawing?.id, tabIdReady]);
   (0, import_react.useEffect)(() => {
     const onUnload = () => {
       const tabs = getTabsMap();
@@ -771,7 +823,17 @@ function WorkspaceProvider({ children, lang = "en" }) {
     const now = Date.now();
     const tempId = `temp-${now}`;
     const allDrawings = await getAllDrawings();
-    const defaultName = `${t.newDrawing} ${allDrawings.length + 1}`;
+    const prefix = t.newDrawing;
+    const suffixRegex = new RegExp(`^${prefix.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")} (\\d+)$`);
+    let maxSuffix = 0;
+    for (const d of allDrawings) {
+      const m = d.name.match(suffixRegex);
+      if (m) {
+        const n = parseInt(m[1], 10);
+        if (!isNaN(n) && n > maxSuffix) maxSuffix = n;
+      }
+    }
+    const defaultName = `${prefix} ${maxSuffix + 1}`;
     const tempDrawing = {
       id: tempId,
       name: name || defaultName,
@@ -835,7 +897,7 @@ function WorkspaceProvider({ children, lang = "en" }) {
     }
   }, [refreshDrawings]);
   const removeDrawing = (0, import_react.useCallback)(async (id) => {
-    if (!workspace || drawingsRef.current.length <= 1) return;
+    if (!workspace) return;
     const removedDrawing = drawingsRef.current.find((d) => d.id === id);
     const wasActive = activeDrawingIdRef.current === id;
     const remaining = drawingsRef.current.filter((d) => d.id !== id);
@@ -850,6 +912,9 @@ function WorkspaceProvider({ children, lang = "en" }) {
       if (updatedWorkspace) {
         setWorkspace(updatedWorkspace);
       }
+      if (remaining.length === 0) {
+        await createNewDrawing();
+      }
       broadcastWorkspaceChange();
     } catch (err) {
       if (removedDrawing) {
@@ -857,7 +922,7 @@ function WorkspaceProvider({ children, lang = "en" }) {
       }
       setError(err instanceof Error ? err.message : "Failed to delete drawing");
     }
-  }, [workspace]);
+  }, [workspace, createNewDrawing]);
   const duplicateCurrentDrawing = (0, import_react.useCallback)(async () => {
     if (!activeDrawingIdRef.current || !workspace) return null;
     const source = drawingsRef.current.find((d) => d.id === activeDrawingIdRef.current);
@@ -904,6 +969,15 @@ function WorkspaceProvider({ children, lang = "en" }) {
         updateData.files = files;
       }
       await updateDrawing(activeDrawing.id, updateData);
+      const now = Date.now();
+      const patch = {
+        elements,
+        appState,
+        ...files ? { files } : {},
+        updatedAt: now
+      };
+      setDrawings((prev) => prev.map((d) => d.id === activeDrawing.id ? { ...d, ...patch } : d));
+      setActiveDrawing2((prev) => prev && prev.id === activeDrawing.id ? { ...prev, ...patch } : prev);
     } catch (err) {
       setError(err instanceof Error ? err.message : "Failed to save drawing");
     }
@@ -919,6 +993,15 @@ function WorkspaceProvider({ children, lang = "en" }) {
         updateData.files = files;
       }
       await updateDrawing(id, updateData);
+      const now = Date.now();
+      const patch = {
+        elements,
+        appState,
+        ...files ? { files } : {},
+        updatedAt: now
+      };
+      setDrawings((prev) => prev.map((d) => d.id === id ? { ...d, ...patch } : d));
+      setActiveDrawing2((prev) => prev && prev.id === id ? { ...prev, ...patch } : prev);
     } catch (err) {
       setError(err instanceof Error ? err.message : "Failed to save drawing");
     }
@@ -926,11 +1009,18 @@ function WorkspaceProvider({ children, lang = "en" }) {
   const exportWorkspace = (0, import_react.useCallback)(async () => {
     try {
       const exportData = {
-        version: 1,
+        version: 2,
         name: workspace?.name || "Min Arbetsyta",
         exportedAt: (/* @__PURE__ */ new Date()).toISOString(),
+        folders: folders.map((f) => ({
+          id: f.id,
+          name: f.name,
+          createdAt: f.createdAt,
+          updatedAt: f.updatedAt
+        })),
         drawings: drawings.map((d) => ({
           name: d.name,
+          folderId: d.folderId ?? null,
           elements: d.elements,
           appState: d.appState,
           files: d.files,
@@ -950,7 +1040,7 @@ function WorkspaceProvider({ children, lang = "en" }) {
     } catch (err) {
       setError(err instanceof Error ? err.message : "Failed to export workspace");
     }
-  }, [workspace, drawings]);
+  }, [workspace, drawings, folders]);
   const importWorkspace = (0, import_react.useCallback)(async () => {
     if (!workspace) return;
     try {
@@ -967,8 +1057,17 @@ function WorkspaceProvider({ children, lang = "en" }) {
       if (!data.version || !Array.isArray(data.drawings)) {
         throw new Error("Invalid workspace file");
       }
+      const folderIdMap = /* @__PURE__ */ new Map();
+      if (Array.isArray(data.folders)) {
+        for (const f of data.folders) {
+          if (!f?.name || !f?.id) continue;
+          const created = await createFolder(f.name);
+          folderIdMap.set(f.id, created.id);
+        }
+      }
       for (const d of data.drawings) {
-        const drawing = await createDrawing(d.name || t.newDrawing);
+        const mappedFolderId = d.folderId ? folderIdMap.get(d.folderId) ?? null : null;
+        const drawing = await createDrawing(d.name || t.newDrawing, [], {}, mappedFolderId);
         await updateDrawing(drawing.id, {
           elements: d.elements || [],
           appState: d.appState || {},
@@ -976,11 +1075,15 @@ function WorkspaceProvider({ children, lang = "en" }) {
         });
         await addDrawingToWorkspace(workspace.id, drawing.id);
       }
-      const allDrawings = await getAllDrawings();
-      const ws = await getOrCreateDefaultWorkspace();
+      const [allDrawings, allFolders, ws] = await Promise.all([
+        getAllDrawings(),
+        getAllFolders(),
+        getOrCreateDefaultWorkspace()
+      ]);
       const wsDrawings = allDrawings.filter((dr) => ws.drawingIds.includes(dr.id));
       setWorkspace(ws);
       setDrawings(wsDrawings);
+      setFolders(allFolders);
     } catch (err) {
       setError(err instanceof Error ? err.message : "Failed to import workspace");
     }

package/dist/index.mjs

@@ -361,19 +361,34 @@ function useWorkspaceLang() {
   return { lang: context.lang, t: context.t };
 }
 var TAB_ID_KEY = "rita-workspace-tab-id";
+var TAB_ENTRY_KEY = "rita-workspace-tab-entry";
+function generateFreshTabId() {
+  return typeof crypto !== "undefined" && crypto.randomUUID ? crypto.randomUUID() : Math.random().toString(36).slice(2);
+}
 var TAB_ID = (() => {
   try {
     const existing = sessionStorage.getItem(TAB_ID_KEY);
     if (existing) return existing;
   } catch {
   }
-  const fresh = typeof crypto !== "undefined" && crypto.randomUUID ? crypto.randomUUID() : Math.random().toString(36).slice(2);
+  const fresh = generateFreshTabId();
   try {
     sessionStorage.setItem(TAB_ID_KEY, fresh);
   } catch {
   }
   return fresh;
 })();
+function regenerateTabId() {
+  TAB_ID = generateFreshTabId();
+  try {
+    sessionStorage.setItem(TAB_ID_KEY, TAB_ID);
+  } catch {
+  }
+  try {
+    sessionStorage.removeItem(TAB_ENTRY_KEY);
+  } catch {
+  }
+}
 var TABS_KEY = "rita-workspace-tabs";
 var TAB_CHANNEL = "rita-workspace-tabs";
 function broadcastWorkspaceChange() {
@@ -406,7 +421,6 @@ function getTabsMap() {
     return {};
   }
 }
-var TAB_ENTRY_KEY = "rita-workspace-tab-entry";
 function setTabDrawing(drawingId) {
   const tabs = getTabsMap();
   if (drawingId) {
@@ -445,6 +459,28 @@ function isDrawingOpenedEarlierInOtherTab(drawingId) {
     ([tabId, entry]) => tabId !== TAB_ID && entry.drawingId === drawingId && entry.openedAt <= myOpenedAt
   );
 }
+function detectTabIdCollision() {
+  return new Promise((resolve) => {
+    let channel;
+    try {
+      channel = new BroadcastChannel(TAB_CHANNEL);
+    } catch {
+      resolve(false);
+      return;
+    }
+    let collided = false;
+    channel.onmessage = (event) => {
+      if (event.data?.type === "id-collision" && event.data?.tabId === TAB_ID) {
+        collided = true;
+      }
+    };
+    channel.postMessage({ type: "id-claim", tabId: TAB_ID });
+    setTimeout(() => {
+      channel.close();
+      resolve(collided);
+    }, 300);
+  });
+}
 function cleanupStaleTabs() {
   const tabs = getTabsMap();
   const otherTabIds = Object.keys(tabs).filter((id) => id !== TAB_ID);
@@ -526,6 +562,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 === "id-claim" && event.data?.tabId === TAB_ID) {
+          channel?.postMessage({ type: "id-collision", tabId: TAB_ID });
         } else if (event.data?.type === "workspace-changed" && event.data?.tabId !== TAB_ID) {
           refreshDrawingsRef.current();
         }
@@ -537,18 +575,32 @@ function WorkspaceProvider({ children, lang = "en" }) {
     };
   }, []);
   const hasCleanedUpRef = useRef(false);
+  const [tabIdReady, setTabIdReady] = useState(false);
   useEffect(() => {
-    cleanupStaleTabs();
-    const timer = setTimeout(() => {
-      hasCleanedUpRef.current = true;
-      const drawingId = activeDrawingIdRef.current;
-      if (drawingId) {
-        setIsDrawingConflict(isDrawingOpenedEarlierInOtherTab(drawingId));
+    let cancelled = false;
+    let timer = null;
+    (async () => {
+      if (await detectTabIdCollision()) {
+        regenerateTabId();
       }
-    }, 600);
-    return () => clearTimeout(timer);
+      if (cancelled) return;
+      setTabIdReady(true);
+      cleanupStaleTabs();
+      timer = setTimeout(() => {
+        hasCleanedUpRef.current = true;
+        const drawingId = activeDrawingIdRef.current;
+        if (drawingId) {
+          setIsDrawingConflict(isDrawingOpenedEarlierInOtherTab(drawingId));
+        }
+      }, 600);
+    })();
+    return () => {
+      cancelled = true;
+      if (timer) clearTimeout(timer);
+    };
   }, []);
   useEffect(() => {
+    if (!tabIdReady) return;
     const drawingId = activeDrawing?.id || null;
     setTabDrawing(drawingId);
     if (hasCleanedUpRef.current) {
@@ -608,7 +660,7 @@ function WorkspaceProvider({ children, lang = "en" }) {
       document.removeEventListener("visibilitychange", onVisibilityChange);
       stopPolling();
     };
-  }, [activeDrawing?.id]);
+  }, [activeDrawing?.id, tabIdReady]);
   useEffect(() => {
     const onUnload = () => {
       const tabs = getTabsMap();
@@ -700,7 +752,17 @@ function WorkspaceProvider({ children, lang = "en" }) {
     const now = Date.now();
     const tempId = `temp-${now}`;
     const allDrawings = await getAllDrawings();
-    const defaultName = `${t.newDrawing} ${allDrawings.length + 1}`;
+    const prefix = t.newDrawing;
+    const suffixRegex = new RegExp(`^${prefix.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")} (\\d+)$`);
+    let maxSuffix = 0;
+    for (const d of allDrawings) {
+      const m = d.name.match(suffixRegex);
+      if (m) {
+        const n = parseInt(m[1], 10);
+        if (!isNaN(n) && n > maxSuffix) maxSuffix = n;
+      }
+    }
+    const defaultName = `${prefix} ${maxSuffix + 1}`;
     const tempDrawing = {
       id: tempId,
       name: name || defaultName,
@@ -764,7 +826,7 @@ function WorkspaceProvider({ children, lang = "en" }) {
     }
   }, [refreshDrawings]);
   const removeDrawing = useCallback(async (id) => {
-    if (!workspace || drawingsRef.current.length <= 1) return;
+    if (!workspace) return;
     const removedDrawing = drawingsRef.current.find((d) => d.id === id);
     const wasActive = activeDrawingIdRef.current === id;
     const remaining = drawingsRef.current.filter((d) => d.id !== id);
@@ -779,6 +841,9 @@ function WorkspaceProvider({ children, lang = "en" }) {
       if (updatedWorkspace) {
         setWorkspace(updatedWorkspace);
       }
+      if (remaining.length === 0) {
+        await createNewDrawing();
+      }
       broadcastWorkspaceChange();
     } catch (err) {
       if (removedDrawing) {
@@ -786,7 +851,7 @@ function WorkspaceProvider({ children, lang = "en" }) {
       }
       setError(err instanceof Error ? err.message : "Failed to delete drawing");
     }
-  }, [workspace]);
+  }, [workspace, createNewDrawing]);
   const duplicateCurrentDrawing = useCallback(async () => {
     if (!activeDrawingIdRef.current || !workspace) return null;
     const source = drawingsRef.current.find((d) => d.id === activeDrawingIdRef.current);
@@ -833,6 +898,15 @@ function WorkspaceProvider({ children, lang = "en" }) {
         updateData.files = files;
       }
       await updateDrawing(activeDrawing.id, updateData);
+      const now = Date.now();
+      const patch = {
+        elements,
+        appState,
+        ...files ? { files } : {},
+        updatedAt: now
+      };
+      setDrawings((prev) => prev.map((d) => d.id === activeDrawing.id ? { ...d, ...patch } : d));
+      setActiveDrawing2((prev) => prev && prev.id === activeDrawing.id ? { ...prev, ...patch } : prev);
     } catch (err) {
       setError(err instanceof Error ? err.message : "Failed to save drawing");
     }
@@ -848,6 +922,15 @@ function WorkspaceProvider({ children, lang = "en" }) {
         updateData.files = files;
       }
       await updateDrawing(id, updateData);
+      const now = Date.now();
+      const patch = {
+        elements,
+        appState,
+        ...files ? { files } : {},
+        updatedAt: now
+      };
+      setDrawings((prev) => prev.map((d) => d.id === id ? { ...d, ...patch } : d));
+      setActiveDrawing2((prev) => prev && prev.id === id ? { ...prev, ...patch } : prev);
     } catch (err) {
       setError(err instanceof Error ? err.message : "Failed to save drawing");
     }
@@ -855,11 +938,18 @@ function WorkspaceProvider({ children, lang = "en" }) {
   const exportWorkspace = useCallback(async () => {
     try {
       const exportData = {
-        version: 1,
+        version: 2,
         name: workspace?.name || "Min Arbetsyta",
         exportedAt: (/* @__PURE__ */ new Date()).toISOString(),
+        folders: folders.map((f) => ({
+          id: f.id,
+          name: f.name,
+          createdAt: f.createdAt,
+          updatedAt: f.updatedAt
+        })),
         drawings: drawings.map((d) => ({
           name: d.name,
+          folderId: d.folderId ?? null,
           elements: d.elements,
           appState: d.appState,
           files: d.files,
@@ -879,7 +969,7 @@ function WorkspaceProvider({ children, lang = "en" }) {
     } catch (err) {
       setError(err instanceof Error ? err.message : "Failed to export workspace");
     }
-  }, [workspace, drawings]);
+  }, [workspace, drawings, folders]);
   const importWorkspace = useCallback(async () => {
     if (!workspace) return;
     try {
@@ -896,8 +986,17 @@ function WorkspaceProvider({ children, lang = "en" }) {
       if (!data.version || !Array.isArray(data.drawings)) {
         throw new Error("Invalid workspace file");
       }
+      const folderIdMap = /* @__PURE__ */ new Map();
+      if (Array.isArray(data.folders)) {
+        for (const f of data.folders) {
+          if (!f?.name || !f?.id) continue;
+          const created = await createFolder(f.name);
+          folderIdMap.set(f.id, created.id);
+        }
+      }
       for (const d of data.drawings) {
-        const drawing = await createDrawing(d.name || t.newDrawing);
+        const mappedFolderId = d.folderId ? folderIdMap.get(d.folderId) ?? null : null;
+        const drawing = await createDrawing(d.name || t.newDrawing, [], {}, mappedFolderId);
         await updateDrawing(drawing.id, {
           elements: d.elements || [],
           appState: d.appState || {},
@@ -905,11 +1004,15 @@ function WorkspaceProvider({ children, lang = "en" }) {
         });
         await addDrawingToWorkspace(workspace.id, drawing.id);
       }
-      const allDrawings = await getAllDrawings();
-      const ws = await getOrCreateDefaultWorkspace();
+      const [allDrawings, allFolders, ws] = await Promise.all([
+        getAllDrawings(),
+        getAllFolders(),
+        getOrCreateDefaultWorkspace()
+      ]);
       const wsDrawings = allDrawings.filter((dr) => ws.drawingIds.includes(dr.id));
       setWorkspace(ws);
       setDrawings(wsDrawings);
+      setFolders(allFolders);
     } catch (err) {
       setError(err instanceof Error ? err.message : "Failed to import workspace");
     }

package/package.json

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