rita-workspace 0.4.7 → 0.5.0

package/dist/index.d.mts

@@ -99,6 +99,7 @@ interface WorkspaceContextValue {
     activeDrawing: Drawing | null;
     isLoading: boolean;
     error: string | null;
+    isDrawingConflict: boolean;
     lang: string;
     t: Translations;
     createNewDrawing: (name?: string) => Promise<Drawing | null>;

package/dist/index.d.ts

@@ -99,6 +99,7 @@ interface WorkspaceContextValue {
     activeDrawing: Drawing | null;
     isLoading: boolean;
     error: string | null;
+    isDrawingConflict: boolean;
     lang: string;
     t: Translations;
     createNewDrawing: (name?: string) => Promise<Drawing | null>;

package/dist/index.js

@@ -323,12 +323,115 @@ function useWorkspaceLang() {
   }
   return { lang: context.lang, t: context.t };
 }
+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 getTabsMap() {
+  try {
+    const raw = JSON.parse(localStorage.getItem(TABS_KEY) || "{}");
+    const result = {};
+    for (const [tabId, value] of Object.entries(raw)) {
+      if (typeof value === "string") {
+        result[tabId] = { drawingId: value, openedAt: 0 };
+      } else if (value && typeof value === "object" && "drawingId" in value) {
+        result[tabId] = value;
+      }
+    }
+    return result;
+  } catch {
+    return {};
+  }
+}
+function setTabDrawing(drawingId) {
+  const tabs = getTabsMap();
+  if (drawingId) {
+    const existing = tabs[TAB_ID];
+    if (existing && existing.drawingId === drawingId) {
+    } else {
+      tabs[TAB_ID] = { drawingId, openedAt: Date.now() };
+    }
+  } else {
+    delete tabs[TAB_ID];
+  }
+  localStorage.setItem(TABS_KEY, JSON.stringify(tabs));
+}
+function isDrawingOpenedEarlierInOtherTab(drawingId) {
+  const tabs = getTabsMap();
+  const myEntry = tabs[TAB_ID];
+  if (!myEntry) return false;
+  const myOpenedAt = myEntry.openedAt;
+  return Object.entries(tabs).some(
+    ([tabId, entry]) => tabId !== TAB_ID && entry.drawingId === drawingId && entry.openedAt <= myOpenedAt
+  );
+}
 function WorkspaceProvider({ children, lang = "en" }) {
   const [workspace, setWorkspace] = (0, import_react.useState)(null);
   const [drawings, setDrawings] = (0, import_react.useState)([]);
   const [activeDrawing, setActiveDrawing2] = (0, import_react.useState)(null);
   const [isLoading, setIsLoading] = (0, import_react.useState)(true);
   const [error, setError] = (0, import_react.useState)(null);
+  const [isDrawingConflict, setIsDrawingConflict] = (0, import_react.useState)(false);
+  const prevConflictRef = (0, import_react.useRef)(false);
+  (0, import_react.useEffect)(() => {
+    if (prevConflictRef.current && !isDrawingConflict && activeDrawing?.id) {
+      getDrawing(activeDrawing.id).then((fresh) => {
+        if (fresh) {
+          setActiveDrawing2(fresh);
+        }
+      });
+    }
+    prevConflictRef.current = isDrawingConflict;
+  }, [isDrawingConflict, activeDrawing?.id]);
+  (0, import_react.useEffect)(() => {
+    const drawingId = activeDrawing?.id || null;
+    setTabDrawing(drawingId);
+    if (drawingId) {
+      setIsDrawingConflict(isDrawingOpenedEarlierInOtherTab(drawingId));
+    } else {
+      setIsDrawingConflict(false);
+    }
+    const recheckConflict = () => {
+      if (drawingId) {
+        setIsDrawingConflict(isDrawingOpenedEarlierInOtherTab(drawingId));
+      }
+    };
+    let channel = null;
+    try {
+      channel = new BroadcastChannel(TAB_CHANNEL);
+      channel.postMessage({ type: "drawing-changed", tabId: TAB_ID, drawingId });
+      channel.onmessage = (event) => {
+        if (event.data?.tabId !== TAB_ID) {
+          recheckConflict();
+        }
+      };
+    } catch {
+    }
+    const onStorage = (e) => {
+      if (e.key === TABS_KEY) {
+        recheckConflict();
+      }
+    };
+    window.addEventListener("storage", onStorage);
+    return () => {
+      channel?.close();
+      window.removeEventListener("storage", onStorage);
+    };
+  }, [activeDrawing?.id]);
+  (0, import_react.useEffect)(() => {
+    const onUnload = () => {
+      const tabs = getTabsMap();
+      delete tabs[TAB_ID];
+      localStorage.setItem(TABS_KEY, JSON.stringify(tabs));
+      try {
+        const channel = new BroadcastChannel(TAB_CHANNEL);
+        channel.postMessage({ type: "tab-closed", tabId: TAB_ID });
+        channel.close();
+      } catch {
+      }
+    };
+    window.addEventListener("beforeunload", onUnload);
+    return () => window.removeEventListener("beforeunload", onUnload);
+  }, []);
   const t = getTranslations(lang);
   (0, import_react.useEffect)(() => {
     async function init() {
@@ -339,9 +442,23 @@ function WorkspaceProvider({ children, lang = "en" }) {
         const allDrawings = await getAllDrawings();
         const wsDrawings = allDrawings.filter((d) => ws.drawingIds.includes(d.id));
         setDrawings(wsDrawings);
-        if (ws.activeDrawingId) {
-          const active = await getDrawing(ws.activeDrawingId);
-          setActiveDrawing2(active || null);
+        const lastDrawingId = sessionStorage.getItem("rita-workspace-tab-drawing");
+        let active = null;
+        if (lastDrawingId) {
+          active = wsDrawings.find((d) => d.id === lastDrawingId) || null;
+          if (!active) {
+            const fromDb = await getDrawing(lastDrawingId);
+            if (fromDb && ws.drawingIds.includes(fromDb.id)) {
+              active = fromDb;
+            }
+          }
+        }
+        if (!active && wsDrawings.length > 0) {
+          active = wsDrawings[0];
+        }
+        if (active) {
+          setActiveDrawing2(active);
+          sessionStorage.setItem("rita-workspace-tab-drawing", active.id);
         }
       } catch (err) {
         setError(err instanceof Error ? err.message : "Failed to load workspace");
@@ -357,10 +474,6 @@ function WorkspaceProvider({ children, lang = "en" }) {
       const allDrawings = await getAllDrawings();
       const wsDrawings = allDrawings.filter((d) => workspace.drawingIds.includes(d.id));
       setDrawings(wsDrawings);
-      if (workspace.activeDrawingId) {
-        const active = await getDrawing(workspace.activeDrawingId);
-        if (active) setActiveDrawing2(active);
-      }
     } catch (err) {
     }
   }, [workspace]);
@@ -370,7 +483,6 @@ function WorkspaceProvider({ children, lang = "en" }) {
       const defaultName = `${t.newDrawing} ${drawings.length + 1}`;
       const drawing = await createDrawing(name || defaultName);
       await addDrawingToWorkspace(workspace.id, drawing.id);
-      await setActiveDrawing(workspace.id, drawing.id);
       setDrawings((prev) => [...prev, drawing]);
       setActiveDrawing2(drawing);
       setWorkspace((prev) => prev ? {
@@ -378,6 +490,7 @@ function WorkspaceProvider({ children, lang = "en" }) {
         drawingIds: [...prev.drawingIds, drawing.id],
         activeDrawingId: drawing.id
       } : null);
+      sessionStorage.setItem("rita-workspace-tab-drawing", drawing.id);
       return drawing;
     } catch (err) {
       setError(err instanceof Error ? err.message : "Failed to create drawing");
@@ -389,9 +502,9 @@ function WorkspaceProvider({ children, lang = "en" }) {
     try {
       const drawing = await getDrawing(id);
       if (drawing) {
-        await setActiveDrawing(workspace.id, id);
         setActiveDrawing2(drawing);
         setWorkspace((prev) => prev ? { ...prev, activeDrawingId: id } : null);
+        sessionStorage.setItem("rita-workspace-tab-drawing", id);
       }
     } catch (err) {
       setError(err instanceof Error ? err.message : "Failed to switch drawing");
@@ -607,6 +720,7 @@ function WorkspaceProvider({ children, lang = "en" }) {
     activeDrawing,
     isLoading,
     error,
+    isDrawingConflict,
     lang,
     t,
     createNewDrawing,
@@ -988,11 +1102,15 @@ var DrawingsDialog = ({
   const [position, setPosition] = (0, import_react5.useState)(null);
   const dragRef = (0, import_react5.useRef)(null);
   const dialogRef = (0, import_react5.useRef)(null);
+  const prevOpenRef = (0, import_react5.useRef)(false);
   (0, import_react5.useEffect)(() => {
     if (open) {
       refreshDrawings();
-      setPosition(null);
+      if (!prevOpenRef.current) {
+        setPosition(null);
+      }
     }
+    prevOpenRef.current = open;
   }, [open, refreshDrawings]);
   const handleMouseDown = (0, import_react5.useCallback)((e) => {
     if (e.target.closest("button")) return;
@@ -1099,17 +1217,16 @@ var DrawingsDialog = ({
         left: 0,
         right: 0,
         bottom: 0,
-        backgroundColor: position ? "transparent" : "rgba(0, 0, 0, 0.4)",
+        backgroundColor: "rgba(0, 0, 0, 0.4)",
         display: position ? "block" : "flex",
         alignItems: "center",
         justifyContent: "center",
-        zIndex: 9999,
-        pointerEvents: position ? "none" : "auto"
+        zIndex: 9999
       },
       onClick: (e) => {
-        if (!position && e.target === e.currentTarget) onClose();
+        if (e.target === e.currentTarget) onClose();
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { ref: dialogRef, className: "rita-workspace-dialog", style: { ...dialogStyle, pointerEvents: "auto" }, children: [
+      children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { ref: dialogRef, className: "rita-workspace-dialog", style: dialogStyle, children: [
         /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
           "div",
           {

package/dist/index.mjs

@@ -145,7 +145,7 @@ async function setActiveDrawing(workspaceId, drawingId) {
 }
 
 // src/state/WorkspaceContext.tsx
-import { createContext, useContext, useEffect, useState, useCallback } from "react";
+import { createContext, useContext, useEffect, useRef, useState, useCallback } from "react";
 
 // src/i18n/translations.ts
 var sv = {
@@ -261,12 +261,115 @@ function useWorkspaceLang() {
   }
   return { lang: context.lang, t: context.t };
 }
+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 getTabsMap() {
+  try {
+    const raw = JSON.parse(localStorage.getItem(TABS_KEY) || "{}");
+    const result = {};
+    for (const [tabId, value] of Object.entries(raw)) {
+      if (typeof value === "string") {
+        result[tabId] = { drawingId: value, openedAt: 0 };
+      } else if (value && typeof value === "object" && "drawingId" in value) {
+        result[tabId] = value;
+      }
+    }
+    return result;
+  } catch {
+    return {};
+  }
+}
+function setTabDrawing(drawingId) {
+  const tabs = getTabsMap();
+  if (drawingId) {
+    const existing = tabs[TAB_ID];
+    if (existing && existing.drawingId === drawingId) {
+    } else {
+      tabs[TAB_ID] = { drawingId, openedAt: Date.now() };
+    }
+  } else {
+    delete tabs[TAB_ID];
+  }
+  localStorage.setItem(TABS_KEY, JSON.stringify(tabs));
+}
+function isDrawingOpenedEarlierInOtherTab(drawingId) {
+  const tabs = getTabsMap();
+  const myEntry = tabs[TAB_ID];
+  if (!myEntry) return false;
+  const myOpenedAt = myEntry.openedAt;
+  return Object.entries(tabs).some(
+    ([tabId, entry]) => tabId !== TAB_ID && entry.drawingId === drawingId && entry.openedAt <= myOpenedAt
+  );
+}
 function WorkspaceProvider({ children, lang = "en" }) {
   const [workspace, setWorkspace] = useState(null);
   const [drawings, setDrawings] = useState([]);
   const [activeDrawing, setActiveDrawing2] = useState(null);
   const [isLoading, setIsLoading] = useState(true);
   const [error, setError] = useState(null);
+  const [isDrawingConflict, setIsDrawingConflict] = useState(false);
+  const prevConflictRef = useRef(false);
+  useEffect(() => {
+    if (prevConflictRef.current && !isDrawingConflict && activeDrawing?.id) {
+      getDrawing(activeDrawing.id).then((fresh) => {
+        if (fresh) {
+          setActiveDrawing2(fresh);
+        }
+      });
+    }
+    prevConflictRef.current = isDrawingConflict;
+  }, [isDrawingConflict, activeDrawing?.id]);
+  useEffect(() => {
+    const drawingId = activeDrawing?.id || null;
+    setTabDrawing(drawingId);
+    if (drawingId) {
+      setIsDrawingConflict(isDrawingOpenedEarlierInOtherTab(drawingId));
+    } else {
+      setIsDrawingConflict(false);
+    }
+    const recheckConflict = () => {
+      if (drawingId) {
+        setIsDrawingConflict(isDrawingOpenedEarlierInOtherTab(drawingId));
+      }
+    };
+    let channel = null;
+    try {
+      channel = new BroadcastChannel(TAB_CHANNEL);
+      channel.postMessage({ type: "drawing-changed", tabId: TAB_ID, drawingId });
+      channel.onmessage = (event) => {
+        if (event.data?.tabId !== TAB_ID) {
+          recheckConflict();
+        }
+      };
+    } catch {
+    }
+    const onStorage = (e) => {
+      if (e.key === TABS_KEY) {
+        recheckConflict();
+      }
+    };
+    window.addEventListener("storage", onStorage);
+    return () => {
+      channel?.close();
+      window.removeEventListener("storage", onStorage);
+    };
+  }, [activeDrawing?.id]);
+  useEffect(() => {
+    const onUnload = () => {
+      const tabs = getTabsMap();
+      delete tabs[TAB_ID];
+      localStorage.setItem(TABS_KEY, JSON.stringify(tabs));
+      try {
+        const channel = new BroadcastChannel(TAB_CHANNEL);
+        channel.postMessage({ type: "tab-closed", tabId: TAB_ID });
+        channel.close();
+      } catch {
+      }
+    };
+    window.addEventListener("beforeunload", onUnload);
+    return () => window.removeEventListener("beforeunload", onUnload);
+  }, []);
   const t = getTranslations(lang);
   useEffect(() => {
     async function init() {
@@ -277,9 +380,23 @@ function WorkspaceProvider({ children, lang = "en" }) {
         const allDrawings = await getAllDrawings();
         const wsDrawings = allDrawings.filter((d) => ws.drawingIds.includes(d.id));
         setDrawings(wsDrawings);
-        if (ws.activeDrawingId) {
-          const active = await getDrawing(ws.activeDrawingId);
-          setActiveDrawing2(active || null);
+        const lastDrawingId = sessionStorage.getItem("rita-workspace-tab-drawing");
+        let active = null;
+        if (lastDrawingId) {
+          active = wsDrawings.find((d) => d.id === lastDrawingId) || null;
+          if (!active) {
+            const fromDb = await getDrawing(lastDrawingId);
+            if (fromDb && ws.drawingIds.includes(fromDb.id)) {
+              active = fromDb;
+            }
+          }
+        }
+        if (!active && wsDrawings.length > 0) {
+          active = wsDrawings[0];
+        }
+        if (active) {
+          setActiveDrawing2(active);
+          sessionStorage.setItem("rita-workspace-tab-drawing", active.id);
         }
       } catch (err) {
         setError(err instanceof Error ? err.message : "Failed to load workspace");
@@ -295,10 +412,6 @@ function WorkspaceProvider({ children, lang = "en" }) {
       const allDrawings = await getAllDrawings();
       const wsDrawings = allDrawings.filter((d) => workspace.drawingIds.includes(d.id));
       setDrawings(wsDrawings);
-      if (workspace.activeDrawingId) {
-        const active = await getDrawing(workspace.activeDrawingId);
-        if (active) setActiveDrawing2(active);
-      }
     } catch (err) {
     }
   }, [workspace]);
@@ -308,7 +421,6 @@ function WorkspaceProvider({ children, lang = "en" }) {
       const defaultName = `${t.newDrawing} ${drawings.length + 1}`;
       const drawing = await createDrawing(name || defaultName);
       await addDrawingToWorkspace(workspace.id, drawing.id);
-      await setActiveDrawing(workspace.id, drawing.id);
       setDrawings((prev) => [...prev, drawing]);
       setActiveDrawing2(drawing);
       setWorkspace((prev) => prev ? {
@@ -316,6 +428,7 @@ function WorkspaceProvider({ children, lang = "en" }) {
         drawingIds: [...prev.drawingIds, drawing.id],
         activeDrawingId: drawing.id
       } : null);
+      sessionStorage.setItem("rita-workspace-tab-drawing", drawing.id);
       return drawing;
     } catch (err) {
       setError(err instanceof Error ? err.message : "Failed to create drawing");
@@ -327,9 +440,9 @@ function WorkspaceProvider({ children, lang = "en" }) {
     try {
       const drawing = await getDrawing(id);
       if (drawing) {
-        await setActiveDrawing(workspace.id, id);
         setActiveDrawing2(drawing);
         setWorkspace((prev) => prev ? { ...prev, activeDrawingId: id } : null);
+        sessionStorage.setItem("rita-workspace-tab-drawing", id);
       }
     } catch (err) {
       setError(err instanceof Error ? err.message : "Failed to switch drawing");
@@ -545,6 +658,7 @@ function WorkspaceProvider({ children, lang = "en" }) {
     activeDrawing,
     isLoading,
     error,
+    isDrawingConflict,
     lang,
     t,
     createNewDrawing,
@@ -567,7 +681,7 @@ function WorkspaceProvider({ children, lang = "en" }) {
 import { useState as useState3 } from "react";
 
 // src/ui/DrawingList/DrawingListItem.tsx
-import { useState as useState2, useRef, useEffect as useEffect2 } from "react";
+import { useState as useState2, useRef as useRef2, useEffect as useEffect2 } from "react";
 
 // src/ui/DrawingList/DrawingList.module.css
 var DrawingList_default = {};
@@ -584,7 +698,7 @@ function DrawingListItem({
 }) {
   const [isEditing, setIsEditing] = useState2(false);
   const [editName, setEditName] = useState2(drawing.name);
-  const inputRef = useRef(null);
+  const inputRef = useRef2(null);
   useEffect2(() => {
     if (isEditing && inputRef.current) {
       inputRef.current.focus();
@@ -867,7 +981,7 @@ var WorkspaceMenuItems = ({
 };
 
 // src/ui/Dialog/DrawingsDialog.tsx
-import { useState as useState4, useCallback as useCallback2, useRef as useRef2, useEffect as useEffect3 } from "react";
+import { useState as useState4, useCallback as useCallback2, useRef as useRef3, useEffect as useEffect3 } from "react";
 import { Fragment as Fragment3, jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
 var ActionButton = ({ icon, label, description, onClick, primary }) => /* @__PURE__ */ jsxs4(
   "button",
@@ -924,13 +1038,17 @@ var DrawingsDialog = ({
   const [editName, setEditName] = useState4("");
   const [confirmDeleteId, setConfirmDeleteId] = useState4(null);
   const [position, setPosition] = useState4(null);
-  const dragRef = useRef2(null);
-  const dialogRef = useRef2(null);
+  const dragRef = useRef3(null);
+  const dialogRef = useRef3(null);
+  const prevOpenRef = useRef3(false);
   useEffect3(() => {
     if (open) {
       refreshDrawings();
-      setPosition(null);
+      if (!prevOpenRef.current) {
+        setPosition(null);
+      }
     }
+    prevOpenRef.current = open;
   }, [open, refreshDrawings]);
   const handleMouseDown = useCallback2((e) => {
     if (e.target.closest("button")) return;
@@ -1037,17 +1155,16 @@ var DrawingsDialog = ({
         left: 0,
         right: 0,
         bottom: 0,
-        backgroundColor: position ? "transparent" : "rgba(0, 0, 0, 0.4)",
+        backgroundColor: "rgba(0, 0, 0, 0.4)",
         display: position ? "block" : "flex",
         alignItems: "center",
         justifyContent: "center",
-        zIndex: 9999,
-        pointerEvents: position ? "none" : "auto"
+        zIndex: 9999
       },
       onClick: (e) => {
-        if (!position && e.target === e.currentTarget) onClose();
+        if (e.target === e.currentTarget) onClose();
       },
-      children: /* @__PURE__ */ jsxs4("div", { ref: dialogRef, className: "rita-workspace-dialog", style: { ...dialogStyle, pointerEvents: "auto" }, children: [
+      children: /* @__PURE__ */ jsxs4("div", { ref: dialogRef, className: "rita-workspace-dialog", style: dialogStyle, children: [
         /* @__PURE__ */ jsxs4(
           "div",
           {
@@ -1311,14 +1428,14 @@ var DrawingsDialog = ({
 };
 
 // src/integration/useExcalidrawBridge.ts
-import { useEffect as useEffect4, useRef as useRef3, useCallback as useCallback3 } from "react";
+import { useEffect as useEffect4, useRef as useRef4, useCallback as useCallback3 } from "react";
 function useExcalidrawBridge({
   excalidrawAPI,
   autoSaveInterval = 2e3
 }) {
   const { activeDrawing, saveCurrentDrawing } = useWorkspace();
-  const saveTimeoutRef = useRef3(null);
-  const lastDrawingIdRef = useRef3(null);
+  const saveTimeoutRef = useRef4(null);
+  const lastDrawingIdRef = useRef4(null);
   useEffect4(() => {
     if (!excalidrawAPI || !activeDrawing) return;
     if (lastDrawingIdRef.current === activeDrawing.id) return;
@@ -1352,7 +1469,7 @@ function useExcalidrawBridge({
 }
 
 // src/integration/WorkspaceBridge.tsx
-import { useEffect as useEffect5, useRef as useRef4, useCallback as useCallback4 } from "react";
+import { useEffect as useEffect5, useRef as useRef5, useCallback as useCallback4 } from "react";
 function WorkspaceBridge({
   excalidrawAPI,
   autoSaveInterval = 2e3,
@@ -1360,9 +1477,9 @@ function WorkspaceBridge({
   onDrawingSave
 }) {
   const { activeDrawing, saveCurrentDrawing } = useWorkspace();
-  const lastDrawingIdRef = useRef4(null);
-  const saveTimeoutRef = useRef4(null);
-  const isLoadingRef = useRef4(false);
+  const lastDrawingIdRef = useRef5(null);
+  const saveTimeoutRef = useRef5(null);
+  const isLoadingRef = useRef5(false);
   const saveDrawing = useCallback4(async () => {
     if (!excalidrawAPI || !activeDrawing || isLoadingRef.current) return;
     try {

package/package.json

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