rita-workspace 0.5.49 → 0.5.53

package/README.md

@@ -11,6 +11,42 @@ Multi-drawing workspace feature for Excalidraw/Rita (Excalidraw fork based on B3
 
 <img width="504" height="574" alt="image" src="https://github.com/user-attachments/assets/ada58a93-a664-4ab2-80e2-55354ae3a544" />
 
+## Quick Start
+
+Add to your main app file (e.g. `App.tsx`). For full integration (debounced save, conflict handling, toggle state), see [INTEGRATION.md](./docs/INTEGRATION.md).
+
+```tsx
+import { WorkspaceProvider, useWorkspace, DrawingsDialog } from "rita-workspace";
+
+function App() {
+  const [dialogOpen, setDialogOpen] = useState(false);
+
+  return (
+    <WorkspaceProvider lang="en">
+      <button onClick={() => setDialogOpen(true)}>My Drawings</button>
+      <DrawingsDialog
+        open={dialogOpen}
+        onClose={() => setDialogOpen(false)}
+      />
+      <ExcalidrawWithWorkspace />
+    </WorkspaceProvider>
+  );
+}
+
+function ExcalidrawWithWorkspace() {
+  const { activeDrawing, saveCurrentDrawing } = useWorkspace();
+
+  return (
+    <Excalidraw
+      initialData={activeDrawing}
+      onChange={(elements, appState, files) => {
+        saveCurrentDrawing(elements, appState, files);
+      }}
+    />
+  );
+}
+```
+
 ## Features
 
 - **Multiple drawings** - Create and manage multiple drawings in one workspace

package/dist/index.d.mts

@@ -17,6 +17,8 @@ interface Drawing {
 interface Folder {
     id: string;
     name: string;
+    /** Manual sort position. Lower = earlier in list. Falls back to createdAt when unset. */
+    position?: number;
     createdAt: number;
     updatedAt: number;
 }
@@ -77,6 +79,11 @@ declare function createFolder(name: string): Promise<Folder>;
 declare function getFolder(id: string): Promise<Folder | undefined>;
 declare function getAllFolders(): Promise<Folder[]>;
 declare function renameFolder(id: string, name: string): Promise<Folder | undefined>;
+/**
+ * Reassigns 'position' field on the given ordered folder ids (0..n-1).
+ * Folders not in `orderedIds` are left untouched.
+ */
+declare function reorderFolders(orderedIds: string[]): Promise<void>;
 declare function deleteFolder(id: string): Promise<void>;
 
 declare function getOrCreateDefaultWorkspace(): Promise<Workspace>;
@@ -160,6 +167,8 @@ interface WorkspaceContextValue {
     /** Re-numbers `position` for the given drawing IDs in order. Use the full ordered slice
      *  the user reordered (e.g. all root drawings, or all drawings in a folder). */
     reorderDrawings: (orderedIds: string[]) => Promise<void>;
+    /** Assigns position to the listed folder ids in given order. Pass full folder list. */
+    reorderFolders: (orderedIds: string[]) => Promise<void>;
     saveCurrentDrawing: (expectedDrawingId: string, elements: unknown[], appState: Record<string, unknown>, files?: Record<string, unknown>) => Promise<void>;
     saveDrawingById: (id: string, elements: unknown[], appState: Record<string, unknown>, files?: Record<string, unknown>) => Promise<void>;
     refreshDrawings: () => Promise<void>;
@@ -401,4 +410,4 @@ interface WorkspacePluginProps {
  */
 declare function WorkspacePlugin(props: WorkspacePluginProps): react_jsx_runtime.JSX.Element;
 
-export { type Drawing, DrawingList, DrawingListItem, type DrawingMeta, DrawingsDialog, type DrawingsDialogProps, type ExcalidrawImperativeAPI, type Folder, Sidebar, type SupportedLanguage, type Translations, type Workspace, WorkspaceBridge, type WorkspaceBridgeProps, type WorkspaceContextValue, WorkspaceMenuItems, type WorkspaceMenuItemsProps, WorkspacePlugin, WorkspaceProvider, addDrawingToWorkspace, closeDB, createDrawing, createFolder, deleteDrawing, deleteFolder, duplicateDrawing, getAllDrawings, getAllDrawingsMeta, getAllFolders, getDB, getDrawing, getFolder, getOrCreateDefaultWorkspace, getTranslations, getWorkspace, isDrawingOpenedEarlierInOtherTab, isLanguageSupported, moveDrawingToFolder, removeDrawingFromWorkspace, renameFolder, reorderDrawings, setActiveDrawing, updateDrawing, updateWorkspace, useExcalidrawBridge, useWorkspace, useWorkspaceLang, warmDB };
+export { type Drawing, DrawingList, DrawingListItem, type DrawingMeta, DrawingsDialog, type DrawingsDialogProps, type ExcalidrawImperativeAPI, type Folder, Sidebar, type SupportedLanguage, type Translations, type Workspace, WorkspaceBridge, type WorkspaceBridgeProps, type WorkspaceContextValue, WorkspaceMenuItems, type WorkspaceMenuItemsProps, WorkspacePlugin, WorkspaceProvider, addDrawingToWorkspace, closeDB, createDrawing, createFolder, deleteDrawing, deleteFolder, duplicateDrawing, getAllDrawings, getAllDrawingsMeta, getAllFolders, getDB, getDrawing, getFolder, getOrCreateDefaultWorkspace, getTranslations, getWorkspace, isDrawingOpenedEarlierInOtherTab, isLanguageSupported, moveDrawingToFolder, removeDrawingFromWorkspace, renameFolder, reorderDrawings, reorderFolders, setActiveDrawing, updateDrawing, updateWorkspace, useExcalidrawBridge, useWorkspace, useWorkspaceLang, warmDB };

package/dist/index.d.ts

@@ -17,6 +17,8 @@ interface Drawing {
 interface Folder {
     id: string;
     name: string;
+    /** Manual sort position. Lower = earlier in list. Falls back to createdAt when unset. */
+    position?: number;
     createdAt: number;
     updatedAt: number;
 }
@@ -77,6 +79,11 @@ declare function createFolder(name: string): Promise<Folder>;
 declare function getFolder(id: string): Promise<Folder | undefined>;
 declare function getAllFolders(): Promise<Folder[]>;
 declare function renameFolder(id: string, name: string): Promise<Folder | undefined>;
+/**
+ * Reassigns 'position' field on the given ordered folder ids (0..n-1).
+ * Folders not in `orderedIds` are left untouched.
+ */
+declare function reorderFolders(orderedIds: string[]): Promise<void>;
 declare function deleteFolder(id: string): Promise<void>;
 
 declare function getOrCreateDefaultWorkspace(): Promise<Workspace>;
@@ -160,6 +167,8 @@ interface WorkspaceContextValue {
     /** Re-numbers `position` for the given drawing IDs in order. Use the full ordered slice
      *  the user reordered (e.g. all root drawings, or all drawings in a folder). */
     reorderDrawings: (orderedIds: string[]) => Promise<void>;
+    /** Assigns position to the listed folder ids in given order. Pass full folder list. */
+    reorderFolders: (orderedIds: string[]) => Promise<void>;
     saveCurrentDrawing: (expectedDrawingId: string, elements: unknown[], appState: Record<string, unknown>, files?: Record<string, unknown>) => Promise<void>;
     saveDrawingById: (id: string, elements: unknown[], appState: Record<string, unknown>, files?: Record<string, unknown>) => Promise<void>;
     refreshDrawings: () => Promise<void>;
@@ -401,4 +410,4 @@ interface WorkspacePluginProps {
  */
 declare function WorkspacePlugin(props: WorkspacePluginProps): react_jsx_runtime.JSX.Element;
 
-export { type Drawing, DrawingList, DrawingListItem, type DrawingMeta, DrawingsDialog, type DrawingsDialogProps, type ExcalidrawImperativeAPI, type Folder, Sidebar, type SupportedLanguage, type Translations, type Workspace, WorkspaceBridge, type WorkspaceBridgeProps, type WorkspaceContextValue, WorkspaceMenuItems, type WorkspaceMenuItemsProps, WorkspacePlugin, WorkspaceProvider, addDrawingToWorkspace, closeDB, createDrawing, createFolder, deleteDrawing, deleteFolder, duplicateDrawing, getAllDrawings, getAllDrawingsMeta, getAllFolders, getDB, getDrawing, getFolder, getOrCreateDefaultWorkspace, getTranslations, getWorkspace, isDrawingOpenedEarlierInOtherTab, isLanguageSupported, moveDrawingToFolder, removeDrawingFromWorkspace, renameFolder, reorderDrawings, setActiveDrawing, updateDrawing, updateWorkspace, useExcalidrawBridge, useWorkspace, useWorkspaceLang, warmDB };
+export { type Drawing, DrawingList, DrawingListItem, type DrawingMeta, DrawingsDialog, type DrawingsDialogProps, type ExcalidrawImperativeAPI, type Folder, Sidebar, type SupportedLanguage, type Translations, type Workspace, WorkspaceBridge, type WorkspaceBridgeProps, type WorkspaceContextValue, WorkspaceMenuItems, type WorkspaceMenuItemsProps, WorkspacePlugin, WorkspaceProvider, addDrawingToWorkspace, closeDB, createDrawing, createFolder, deleteDrawing, deleteFolder, duplicateDrawing, getAllDrawings, getAllDrawingsMeta, getAllFolders, getDB, getDrawing, getFolder, getOrCreateDefaultWorkspace, getTranslations, getWorkspace, isDrawingOpenedEarlierInOtherTab, isLanguageSupported, moveDrawingToFolder, removeDrawingFromWorkspace, renameFolder, reorderDrawings, reorderFolders, setActiveDrawing, updateDrawing, updateWorkspace, useExcalidrawBridge, useWorkspace, useWorkspaceLang, warmDB };

package/dist/index.js

@@ -60,6 +60,7 @@ __export(index_exports, {
   removeDrawingFromWorkspace: () => removeDrawingFromWorkspace,
   renameFolder: () => renameFolder,
   reorderDrawings: () => reorderDrawings,
+  reorderFolders: () => reorderFolders,
   setActiveDrawing: () => setActiveDrawing,
   updateDrawing: () => updateDrawing,
   updateWorkspace: () => updateWorkspace,
@@ -224,6 +225,17 @@ async function renameFolder(id, name) {
   await db.put("folders", updated);
   return updated;
 }
+async function reorderFolders(orderedIds) {
+  const db = await getDB();
+  const tx = db.transaction("folders", "readwrite");
+  const store = tx.objectStore("folders");
+  for (let i = 0; i < orderedIds.length; i++) {
+    const existing = await store.get(orderedIds[i]);
+    if (!existing) continue;
+    await store.put({ ...existing, position: i });
+  }
+  await tx.done;
+}
 async function deleteFolder(id) {
   const db = await getDB();
   const allDrawings = await db.getAll("drawings");
@@ -1309,6 +1321,19 @@ function WorkspaceProvider({ children, lang = "en" }) {
       refreshDrawingsRef.current();
     }
   }, []);
+  const reorderFolders2 = (0, import_react.useCallback)(async (orderedIds) => {
+    const positionMap = new Map(orderedIds.map((id, idx) => [id, idx]));
+    setFolders((prev) => prev.map(
+      (f) => positionMap.has(f.id) ? { ...f, position: positionMap.get(f.id) } : f
+    ));
+    try {
+      await reorderFolders(orderedIds);
+      broadcastWorkspaceChange();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Failed to reorder folders");
+      refreshDrawingsRef.current();
+    }
+  }, []);
   const value = {
     workspace,
     drawings,
@@ -1329,6 +1354,7 @@ function WorkspaceProvider({ children, lang = "en" }) {
     deleteFolder: deleteFolder2,
     moveDrawingToFolder: moveDrawingToFolder2,
     reorderDrawings: reorderDrawings2,
+    reorderFolders: reorderFolders2,
     saveCurrentDrawing,
     saveDrawingById,
     refreshDrawings,
@@ -1698,6 +1724,7 @@ var DrawingsDialog = ({
     deleteFolder: deleteFolder2,
     moveDrawingToFolder: moveDrawingToFolder2,
     reorderDrawings: reorderDrawings2,
+    reorderFolders: reorderFolders2,
     exportWorkspace,
     importWorkspace,
     exportDrawingAsExcalidraw,
@@ -1715,7 +1742,17 @@ var DrawingsDialog = ({
   const [switchingId, setSwitchingId] = (0, import_react5.useState)(null);
   const [selectedId, setSelectedId] = (0, import_react5.useState)(null);
   const [hoveredId, setHoveredId] = (0, import_react5.useState)(null);
-  const [expandedFolders, setExpandedFolders] = (0, import_react5.useState)(/* @__PURE__ */ new Set());
+  const [expandedFolders, setExpandedFolders] = (0, import_react5.useState)(() => {
+    try {
+      if (localStorage.getItem("rita-workspace-remember-folder-state") === "false") {
+        return /* @__PURE__ */ new Set();
+      }
+      const raw = localStorage.getItem("rita-workspace-expanded-folders");
+      if (raw) return new Set(JSON.parse(raw));
+    } catch {
+    }
+    return /* @__PURE__ */ new Set();
+  });
   const [creatingFolder, setCreatingFolder] = (0, import_react5.useState)(false);
   const [newFolderName, setNewFolderName] = (0, import_react5.useState)("");
   const [editingFolderId, setEditingFolderId] = (0, import_react5.useState)(null);
@@ -1745,10 +1782,35 @@ var DrawingsDialog = ({
       return next;
     });
   }, []);
+  const [rememberFolderState, setRememberFolderState] = (0, import_react5.useState)(() => {
+    try {
+      return localStorage.getItem("rita-workspace-remember-folder-state") !== "false";
+    } catch {
+      return true;
+    }
+  });
+  const handleToggleRememberFolderState = (0, import_react5.useCallback)(() => {
+    setRememberFolderState((prev) => {
+      const next = !prev;
+      try {
+        if (next) {
+          localStorage.removeItem("rita-workspace-remember-folder-state");
+        } else {
+          localStorage.setItem("rita-workspace-remember-folder-state", "false");
+          localStorage.removeItem("rita-workspace-expanded-folders");
+        }
+      } catch {
+      }
+      return next;
+    });
+  }, []);
   const [draggingDrawingId, setDraggingDrawingId] = (0, import_react5.useState)(null);
   const [dropTargetFolderId, setDropTargetFolderId] = (0, import_react5.useState)(null);
   const [dropTargetDrawingId, setDropTargetDrawingId] = (0, import_react5.useState)(null);
   const [dropTargetPosition, setDropTargetPosition] = (0, import_react5.useState)(null);
+  const [draggingFolderId, setDraggingFolderId] = (0, import_react5.useState)(null);
+  const [folderDropTargetId, setFolderDropTargetId] = (0, import_react5.useState)(null);
+  const [folderDropPosition, setFolderDropPosition] = (0, import_react5.useState)(null);
   const [position, setPosition] = (0, import_react5.useState)(null);
   const dragRef = (0, import_react5.useRef)(null);
   const dialogRef = (0, import_react5.useRef)(null);
@@ -1769,6 +1831,18 @@ var DrawingsDialog = ({
     }
     prevOpenRef.current = open;
   }, [open, refreshDrawings]);
+  (0, import_react5.useEffect)(() => {
+    if (!open) return;
+    try {
+      if (localStorage.getItem("rita-workspace-remember-folder-state") === "false") {
+        setExpandedFolders(/* @__PURE__ */ new Set());
+        return;
+      }
+      const raw = localStorage.getItem("rita-workspace-expanded-folders");
+      setExpandedFolders(raw ? new Set(JSON.parse(raw)) : /* @__PURE__ */ new Set());
+    } catch {
+    }
+  }, [open]);
   (0, import_react5.useEffect)(() => {
     if (creatingFolder && newFolderInputRef.current) {
       newFolderInputRef.current.focus();
@@ -1891,6 +1965,24 @@ var DrawingsDialog = ({
     ].map((d) => d.id);
     reorderDrawings2(ordered);
   }, [drawings, reorderDrawings2, moveDrawingToFolder2]);
+  const handleFolderReorderDrop = (0, import_react5.useCallback)((draggedFolderId, targetFolderId, pos) => {
+    if (draggedFolderId === targetFolderId) return;
+    const sorted = [...folders].sort(
+      (a, b) => (a.position ?? a.createdAt) - (b.position ?? b.createdAt)
+    );
+    const withoutDragged = sorted.filter((f) => f.id !== draggedFolderId);
+    const targetIdx = withoutDragged.findIndex((f) => f.id === targetFolderId);
+    if (targetIdx === -1) return;
+    const insertIdx = pos === "before" ? targetIdx : targetIdx + 1;
+    const dragged = folders.find((f) => f.id === draggedFolderId);
+    if (!dragged) return;
+    const ordered = [
+      ...withoutDragged.slice(0, insertIdx),
+      dragged,
+      ...withoutDragged.slice(insertIdx)
+    ].map((f) => f.id);
+    reorderFolders2(ordered);
+  }, [folders, reorderFolders2]);
   const toggleFolder = (0, import_react5.useCallback)((folderId) => {
     setExpandedFolders((prev) => {
       const next = new Set(prev);
@@ -1902,6 +1994,16 @@ var DrawingsDialog = ({
       return next;
     });
   }, []);
+  (0, import_react5.useEffect)(() => {
+    if (!rememberFolderState) return;
+    try {
+      localStorage.setItem(
+        "rita-workspace-expanded-folders",
+        JSON.stringify(Array.from(expandedFolders))
+      );
+    } catch {
+    }
+  }, [expandedFolders, rememberFolderState]);
   const getLocale = () => {
     if (!effectiveLang) return "en-US";
     const baseLang = effectiveLang.split("-")[0].toLowerCase();
@@ -1940,7 +2042,10 @@ var DrawingsDialog = ({
     for (const folder of folders) {
       byFolder[folder.id] = sorted.filter((d) => d.folderId === folder.id);
     }
-    const foldersFiltered = query ? folders.filter((f) => f.name.toLowerCase().includes(query) || (byFolder[f.id] || []).length > 0) : folders;
+    const sortedFolders = [...folders].sort(
+      (a, b) => (a.position ?? a.createdAt) - (b.position ?? b.createdAt)
+    );
+    const foldersFiltered = query ? sortedFolders.filter((f) => f.name.toLowerCase().includes(query) || (byFolder[f.id] || []).length > 0) : sortedFolders;
     return { rootDrawings: root, drawingsByFolder: byFolder, filteredFolders: foldersFiltered };
   }, [drawings, folders, searchQuery]);
   if (!open) return null;
@@ -2257,10 +2362,11 @@ var DrawingsDialog = ({
   const renderFolderGroup = (folder) => {
     const folderDrawings = drawingsByFolder[folder.id] || [];
     const isExpanded = expandedFolders.has(folder.id);
+    const isFolderDropTarget = folderDropTargetId === folder.id;
     return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
       "div",
       {
-        style: { marginBottom: "4px" },
+        style: { marginBottom: "4px", position: "relative" },
         onDragOver: (e) => {
           if (!draggingDrawingId) return;
           e.preventDefault();
@@ -2285,6 +2391,37 @@ var DrawingsDialog = ({
           /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
             "div",
             {
+              draggable: !editingFolderId && !confirmDeleteFolderId,
+              onDragStart: (e) => {
+                if (draggingDrawingId) return;
+                setDraggingFolderId(folder.id);
+                e.dataTransfer.effectAllowed = "move";
+              },
+              onDragEnd: () => {
+                setDraggingFolderId(null);
+                setFolderDropTargetId(null);
+                setFolderDropPosition(null);
+              },
+              onDragOver: (e) => {
+                if (!draggingFolderId || draggingFolderId === folder.id) return;
+                e.preventDefault();
+                e.stopPropagation();
+                e.dataTransfer.dropEffect = "move";
+                const rect = e.currentTarget.getBoundingClientRect();
+                const isAbove = e.clientY < rect.top + rect.height / 2;
+                setFolderDropTargetId(folder.id);
+                setFolderDropPosition(isAbove ? "before" : "after");
+              },
+              onDrop: (e) => {
+                if (draggingFolderId && draggingFolderId !== folder.id && folderDropPosition) {
+                  e.preventDefault();
+                  e.stopPropagation();
+                  handleFolderReorderDrop(draggingFolderId, folder.id, folderDropPosition);
+                  setDraggingFolderId(null);
+                  setFolderDropTargetId(null);
+                  setFolderDropPosition(null);
+                }
+              },
               onClick: () => {
                 toggleFolder(folder.id);
                 setSelectedId(null);
@@ -2295,9 +2432,11 @@ var DrawingsDialog = ({
                 alignItems: "center",
                 gap: "8px",
                 borderRadius: "8px",
-                cursor: "pointer",
+                cursor: draggingFolderId === folder.id ? "grabbing" : "pointer",
+                opacity: draggingFolderId === folder.id ? 0.5 : 1,
                 backgroundColor: dropTargetFolderId === folder.id ? "var(--color-primary-light, rgba(108, 99, 255, 0.2))" : "var(--color-surface-mid, rgba(0, 0, 0, 0.03))",
                 border: dropTargetFolderId === folder.id ? "2px dashed var(--color-primary, #6c63ff)" : "2px solid transparent",
+                boxShadow: isFolderDropTarget && folderDropPosition === "before" ? "inset 0 3px 0 0 var(--color-primary, #6c63ff)" : isFolderDropTarget && folderDropPosition === "after" ? "inset 0 -3px 0 0 var(--color-primary, #6c63ff)" : "none",
                 transition: "background-color 0.15s, border-color 0.15s"
               },
               children: [
@@ -2674,36 +2813,68 @@ var DrawingsDialog = ({
                     }
                   )
                 ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: { padding: "0 20px 16px" }, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
-                  "label",
-                  {
-                    style: {
-                      display: "flex",
-                      alignItems: "center",
-                      gap: "10px",
-                      padding: "10px 12px",
-                      border: "1px solid var(--default-border-color, #e0e0e0)",
-                      borderRadius: "8px",
-                      cursor: "pointer",
-                      userSelect: "none"
-                    },
-                    children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-                        "input",
-                        {
-                          type: "checkbox",
-                          checked: autoStart,
-                          onChange: handleToggleAutoStart,
-                          style: { width: "16px", height: "16px", cursor: "pointer", flexShrink: 0 }
-                        }
-                      ),
-                      /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: { flex: 1, minWidth: 0 }, children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: { fontSize: "14px", fontWeight: 500 }, children: t.autoStartLabel }),
-                        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: { fontSize: "12px", color: "var(--text-secondary-color, #888)", marginTop: "2px" }, children: t.autoStartDesc })
-                      ] })
-                    ]
-                  }
-                ) })
+                /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: { padding: "0 20px 16px", display: "flex", flexDirection: "column", gap: "8px" }, children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+                    "label",
+                    {
+                      style: {
+                        display: "flex",
+                        alignItems: "center",
+                        gap: "10px",
+                        padding: "10px 12px",
+                        border: "1px solid var(--default-border-color, #e0e0e0)",
+                        borderRadius: "8px",
+                        cursor: "pointer",
+                        userSelect: "none"
+                      },
+                      children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+                          "input",
+                          {
+                            type: "checkbox",
+                            checked: autoStart,
+                            onChange: handleToggleAutoStart,
+                            style: { width: "16px", height: "16px", cursor: "pointer", flexShrink: 0 }
+                          }
+                        ),
+                        /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: { flex: 1, minWidth: 0 }, children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: { fontSize: "14px", fontWeight: 500 }, children: t.autoStartLabel }),
+                          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: { fontSize: "12px", color: "var(--text-secondary-color, #888)", marginTop: "2px" }, children: t.autoStartDesc })
+                        ] })
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+                    "label",
+                    {
+                      style: {
+                        display: "flex",
+                        alignItems: "center",
+                        gap: "10px",
+                        padding: "10px 12px",
+                        border: "1px solid var(--default-border-color, #e0e0e0)",
+                        borderRadius: "8px",
+                        cursor: "pointer",
+                        userSelect: "none"
+                      },
+                      children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+                          "input",
+                          {
+                            type: "checkbox",
+                            checked: rememberFolderState,
+                            onChange: handleToggleRememberFolderState,
+                            style: { width: "16px", height: "16px", cursor: "pointer", flexShrink: 0 }
+                          }
+                        ),
+                        /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: { flex: 1, minWidth: 0 }, children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: { fontSize: "14px", fontWeight: 500 }, children: "Kom ih\xE5g utf\xE4llda mappar" }),
+                          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: { fontSize: "12px", color: "var(--text-secondary-color, #888)", marginTop: "2px" }, children: "Beh\xE5ller vilka mappar som \xE4r utf\xE4llda mellan sessioner. Om av: alla mappar startar minimerade." })
+                        ] })
+                      ]
+                    }
+                  )
+                ] })
               ]
             }
           )
@@ -3041,6 +3212,7 @@ function WorkspacePlugin(props) {
   removeDrawingFromWorkspace,
   renameFolder,
   reorderDrawings,
+  reorderFolders,
   setActiveDrawing,
   updateDrawing,
   updateWorkspace,

package/dist/index.mjs

@@ -152,6 +152,17 @@ async function renameFolder(id, name) {
   await db.put("folders", updated);
   return updated;
 }
+async function reorderFolders(orderedIds) {
+  const db = await getDB();
+  const tx = db.transaction("folders", "readwrite");
+  const store = tx.objectStore("folders");
+  for (let i = 0; i < orderedIds.length; i++) {
+    const existing = await store.get(orderedIds[i]);
+    if (!existing) continue;
+    await store.put({ ...existing, position: i });
+  }
+  await tx.done;
+}
 async function deleteFolder(id) {
   const db = await getDB();
   const allDrawings = await db.getAll("drawings");
@@ -1237,6 +1248,19 @@ function WorkspaceProvider({ children, lang = "en" }) {
       refreshDrawingsRef.current();
     }
   }, []);
+  const reorderFolders2 = useCallback(async (orderedIds) => {
+    const positionMap = new Map(orderedIds.map((id, idx) => [id, idx]));
+    setFolders((prev) => prev.map(
+      (f) => positionMap.has(f.id) ? { ...f, position: positionMap.get(f.id) } : f
+    ));
+    try {
+      await reorderFolders(orderedIds);
+      broadcastWorkspaceChange();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Failed to reorder folders");
+      refreshDrawingsRef.current();
+    }
+  }, []);
   const value = {
     workspace,
     drawings,
@@ -1257,6 +1281,7 @@ function WorkspaceProvider({ children, lang = "en" }) {
     deleteFolder: deleteFolder2,
     moveDrawingToFolder: moveDrawingToFolder2,
     reorderDrawings: reorderDrawings2,
+    reorderFolders: reorderFolders2,
     saveCurrentDrawing,
     saveDrawingById,
     refreshDrawings,
@@ -1626,6 +1651,7 @@ var DrawingsDialog = ({
     deleteFolder: deleteFolder2,
     moveDrawingToFolder: moveDrawingToFolder2,
     reorderDrawings: reorderDrawings2,
+    reorderFolders: reorderFolders2,
     exportWorkspace,
     importWorkspace,
     exportDrawingAsExcalidraw,
@@ -1643,7 +1669,17 @@ var DrawingsDialog = ({
   const [switchingId, setSwitchingId] = useState4(null);
   const [selectedId, setSelectedId] = useState4(null);
   const [hoveredId, setHoveredId] = useState4(null);
-  const [expandedFolders, setExpandedFolders] = useState4(/* @__PURE__ */ new Set());
+  const [expandedFolders, setExpandedFolders] = useState4(() => {
+    try {
+      if (localStorage.getItem("rita-workspace-remember-folder-state") === "false") {
+        return /* @__PURE__ */ new Set();
+      }
+      const raw = localStorage.getItem("rita-workspace-expanded-folders");
+      if (raw) return new Set(JSON.parse(raw));
+    } catch {
+    }
+    return /* @__PURE__ */ new Set();
+  });
   const [creatingFolder, setCreatingFolder] = useState4(false);
   const [newFolderName, setNewFolderName] = useState4("");
   const [editingFolderId, setEditingFolderId] = useState4(null);
@@ -1673,10 +1709,35 @@ var DrawingsDialog = ({
       return next;
     });
   }, []);
+  const [rememberFolderState, setRememberFolderState] = useState4(() => {
+    try {
+      return localStorage.getItem("rita-workspace-remember-folder-state") !== "false";
+    } catch {
+      return true;
+    }
+  });
+  const handleToggleRememberFolderState = useCallback2(() => {
+    setRememberFolderState((prev) => {
+      const next = !prev;
+      try {
+        if (next) {
+          localStorage.removeItem("rita-workspace-remember-folder-state");
+        } else {
+          localStorage.setItem("rita-workspace-remember-folder-state", "false");
+          localStorage.removeItem("rita-workspace-expanded-folders");
+        }
+      } catch {
+      }
+      return next;
+    });
+  }, []);
   const [draggingDrawingId, setDraggingDrawingId] = useState4(null);
   const [dropTargetFolderId, setDropTargetFolderId] = useState4(null);
   const [dropTargetDrawingId, setDropTargetDrawingId] = useState4(null);
   const [dropTargetPosition, setDropTargetPosition] = useState4(null);
+  const [draggingFolderId, setDraggingFolderId] = useState4(null);
+  const [folderDropTargetId, setFolderDropTargetId] = useState4(null);
+  const [folderDropPosition, setFolderDropPosition] = useState4(null);
   const [position, setPosition] = useState4(null);
   const dragRef = useRef3(null);
   const dialogRef = useRef3(null);
@@ -1697,6 +1758,18 @@ var DrawingsDialog = ({
     }
     prevOpenRef.current = open;
   }, [open, refreshDrawings]);
+  useEffect3(() => {
+    if (!open) return;
+    try {
+      if (localStorage.getItem("rita-workspace-remember-folder-state") === "false") {
+        setExpandedFolders(/* @__PURE__ */ new Set());
+        return;
+      }
+      const raw = localStorage.getItem("rita-workspace-expanded-folders");
+      setExpandedFolders(raw ? new Set(JSON.parse(raw)) : /* @__PURE__ */ new Set());
+    } catch {
+    }
+  }, [open]);
   useEffect3(() => {
     if (creatingFolder && newFolderInputRef.current) {
       newFolderInputRef.current.focus();
@@ -1819,6 +1892,24 @@ var DrawingsDialog = ({
     ].map((d) => d.id);
     reorderDrawings2(ordered);
   }, [drawings, reorderDrawings2, moveDrawingToFolder2]);
+  const handleFolderReorderDrop = useCallback2((draggedFolderId, targetFolderId, pos) => {
+    if (draggedFolderId === targetFolderId) return;
+    const sorted = [...folders].sort(
+      (a, b) => (a.position ?? a.createdAt) - (b.position ?? b.createdAt)
+    );
+    const withoutDragged = sorted.filter((f) => f.id !== draggedFolderId);
+    const targetIdx = withoutDragged.findIndex((f) => f.id === targetFolderId);
+    if (targetIdx === -1) return;
+    const insertIdx = pos === "before" ? targetIdx : targetIdx + 1;
+    const dragged = folders.find((f) => f.id === draggedFolderId);
+    if (!dragged) return;
+    const ordered = [
+      ...withoutDragged.slice(0, insertIdx),
+      dragged,
+      ...withoutDragged.slice(insertIdx)
+    ].map((f) => f.id);
+    reorderFolders2(ordered);
+  }, [folders, reorderFolders2]);
   const toggleFolder = useCallback2((folderId) => {
     setExpandedFolders((prev) => {
       const next = new Set(prev);
@@ -1830,6 +1921,16 @@ var DrawingsDialog = ({
       return next;
     });
   }, []);
+  useEffect3(() => {
+    if (!rememberFolderState) return;
+    try {
+      localStorage.setItem(
+        "rita-workspace-expanded-folders",
+        JSON.stringify(Array.from(expandedFolders))
+      );
+    } catch {
+    }
+  }, [expandedFolders, rememberFolderState]);
   const getLocale = () => {
     if (!effectiveLang) return "en-US";
     const baseLang = effectiveLang.split("-")[0].toLowerCase();
@@ -1868,7 +1969,10 @@ var DrawingsDialog = ({
     for (const folder of folders) {
       byFolder[folder.id] = sorted.filter((d) => d.folderId === folder.id);
     }
-    const foldersFiltered = query ? folders.filter((f) => f.name.toLowerCase().includes(query) || (byFolder[f.id] || []).length > 0) : folders;
+    const sortedFolders = [...folders].sort(
+      (a, b) => (a.position ?? a.createdAt) - (b.position ?? b.createdAt)
+    );
+    const foldersFiltered = query ? sortedFolders.filter((f) => f.name.toLowerCase().includes(query) || (byFolder[f.id] || []).length > 0) : sortedFolders;
     return { rootDrawings: root, drawingsByFolder: byFolder, filteredFolders: foldersFiltered };
   }, [drawings, folders, searchQuery]);
   if (!open) return null;
@@ -2185,10 +2289,11 @@ var DrawingsDialog = ({
   const renderFolderGroup = (folder) => {
     const folderDrawings = drawingsByFolder[folder.id] || [];
     const isExpanded = expandedFolders.has(folder.id);
+    const isFolderDropTarget = folderDropTargetId === folder.id;
     return /* @__PURE__ */ jsxs4(
       "div",
       {
-        style: { marginBottom: "4px" },
+        style: { marginBottom: "4px", position: "relative" },
         onDragOver: (e) => {
           if (!draggingDrawingId) return;
           e.preventDefault();
@@ -2213,6 +2318,37 @@ var DrawingsDialog = ({
           /* @__PURE__ */ jsxs4(
             "div",
             {
+              draggable: !editingFolderId && !confirmDeleteFolderId,
+              onDragStart: (e) => {
+                if (draggingDrawingId) return;
+                setDraggingFolderId(folder.id);
+                e.dataTransfer.effectAllowed = "move";
+              },
+              onDragEnd: () => {
+                setDraggingFolderId(null);
+                setFolderDropTargetId(null);
+                setFolderDropPosition(null);
+              },
+              onDragOver: (e) => {
+                if (!draggingFolderId || draggingFolderId === folder.id) return;
+                e.preventDefault();
+                e.stopPropagation();
+                e.dataTransfer.dropEffect = "move";
+                const rect = e.currentTarget.getBoundingClientRect();
+                const isAbove = e.clientY < rect.top + rect.height / 2;
+                setFolderDropTargetId(folder.id);
+                setFolderDropPosition(isAbove ? "before" : "after");
+              },
+              onDrop: (e) => {
+                if (draggingFolderId && draggingFolderId !== folder.id && folderDropPosition) {
+                  e.preventDefault();
+                  e.stopPropagation();
+                  handleFolderReorderDrop(draggingFolderId, folder.id, folderDropPosition);
+                  setDraggingFolderId(null);
+                  setFolderDropTargetId(null);
+                  setFolderDropPosition(null);
+                }
+              },
               onClick: () => {
                 toggleFolder(folder.id);
                 setSelectedId(null);
@@ -2223,9 +2359,11 @@ var DrawingsDialog = ({
                 alignItems: "center",
                 gap: "8px",
                 borderRadius: "8px",
-                cursor: "pointer",
+                cursor: draggingFolderId === folder.id ? "grabbing" : "pointer",
+                opacity: draggingFolderId === folder.id ? 0.5 : 1,
                 backgroundColor: dropTargetFolderId === folder.id ? "var(--color-primary-light, rgba(108, 99, 255, 0.2))" : "var(--color-surface-mid, rgba(0, 0, 0, 0.03))",
                 border: dropTargetFolderId === folder.id ? "2px dashed var(--color-primary, #6c63ff)" : "2px solid transparent",
+                boxShadow: isFolderDropTarget && folderDropPosition === "before" ? "inset 0 3px 0 0 var(--color-primary, #6c63ff)" : isFolderDropTarget && folderDropPosition === "after" ? "inset 0 -3px 0 0 var(--color-primary, #6c63ff)" : "none",
                 transition: "background-color 0.15s, border-color 0.15s"
               },
               children: [
@@ -2602,36 +2740,68 @@ var DrawingsDialog = ({
                     }
                   )
                 ] }),
-                /* @__PURE__ */ jsx6("div", { style: { padding: "0 20px 16px" }, children: /* @__PURE__ */ jsxs4(
-                  "label",
-                  {
-                    style: {
-                      display: "flex",
-                      alignItems: "center",
-                      gap: "10px",
-                      padding: "10px 12px",
-                      border: "1px solid var(--default-border-color, #e0e0e0)",
-                      borderRadius: "8px",
-                      cursor: "pointer",
-                      userSelect: "none"
-                    },
-                    children: [
-                      /* @__PURE__ */ jsx6(
-                        "input",
-                        {
-                          type: "checkbox",
-                          checked: autoStart,
-                          onChange: handleToggleAutoStart,
-                          style: { width: "16px", height: "16px", cursor: "pointer", flexShrink: 0 }
-                        }
-                      ),
-                      /* @__PURE__ */ jsxs4("div", { style: { flex: 1, minWidth: 0 }, children: [
-                        /* @__PURE__ */ jsx6("div", { style: { fontSize: "14px", fontWeight: 500 }, children: t.autoStartLabel }),
-                        /* @__PURE__ */ jsx6("div", { style: { fontSize: "12px", color: "var(--text-secondary-color, #888)", marginTop: "2px" }, children: t.autoStartDesc })
-                      ] })
-                    ]
-                  }
-                ) })
+                /* @__PURE__ */ jsxs4("div", { style: { padding: "0 20px 16px", display: "flex", flexDirection: "column", gap: "8px" }, children: [
+                  /* @__PURE__ */ jsxs4(
+                    "label",
+                    {
+                      style: {
+                        display: "flex",
+                        alignItems: "center",
+                        gap: "10px",
+                        padding: "10px 12px",
+                        border: "1px solid var(--default-border-color, #e0e0e0)",
+                        borderRadius: "8px",
+                        cursor: "pointer",
+                        userSelect: "none"
+                      },
+                      children: [
+                        /* @__PURE__ */ jsx6(
+                          "input",
+                          {
+                            type: "checkbox",
+                            checked: autoStart,
+                            onChange: handleToggleAutoStart,
+                            style: { width: "16px", height: "16px", cursor: "pointer", flexShrink: 0 }
+                          }
+                        ),
+                        /* @__PURE__ */ jsxs4("div", { style: { flex: 1, minWidth: 0 }, children: [
+                          /* @__PURE__ */ jsx6("div", { style: { fontSize: "14px", fontWeight: 500 }, children: t.autoStartLabel }),
+                          /* @__PURE__ */ jsx6("div", { style: { fontSize: "12px", color: "var(--text-secondary-color, #888)", marginTop: "2px" }, children: t.autoStartDesc })
+                        ] })
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs4(
+                    "label",
+                    {
+                      style: {
+                        display: "flex",
+                        alignItems: "center",
+                        gap: "10px",
+                        padding: "10px 12px",
+                        border: "1px solid var(--default-border-color, #e0e0e0)",
+                        borderRadius: "8px",
+                        cursor: "pointer",
+                        userSelect: "none"
+                      },
+                      children: [
+                        /* @__PURE__ */ jsx6(
+                          "input",
+                          {
+                            type: "checkbox",
+                            checked: rememberFolderState,
+                            onChange: handleToggleRememberFolderState,
+                            style: { width: "16px", height: "16px", cursor: "pointer", flexShrink: 0 }
+                          }
+                        ),
+                        /* @__PURE__ */ jsxs4("div", { style: { flex: 1, minWidth: 0 }, children: [
+                          /* @__PURE__ */ jsx6("div", { style: { fontSize: "14px", fontWeight: 500 }, children: "Kom ih\xE5g utf\xE4llda mappar" }),
+                          /* @__PURE__ */ jsx6("div", { style: { fontSize: "12px", color: "var(--text-secondary-color, #888)", marginTop: "2px" }, children: "Beh\xE5ller vilka mappar som \xE4r utf\xE4llda mellan sessioner. Om av: alla mappar startar minimerade." })
+                        ] })
+                      ]
+                    }
+                  )
+                ] })
               ]
             }
           )
@@ -2968,6 +3138,7 @@ export {
   removeDrawingFromWorkspace,
   renameFolder,
   reorderDrawings,
+  reorderFolders,
   setActiveDrawing,
   updateDrawing,
   updateWorkspace,

package/package.json

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