rita-workspace 0.5.48 → 0.5.53

package/README.md

@@ -1,6 +1,51 @@
-# Rita Workspace
+# Excalidraw/Rita Workspace
 
-Multi-drawing workspace feature for Rita (Excalidraw fork based on B310-digital/excalidraw).
+[![npm version](https://img.shields.io/npm/v/rita-workspace.svg)](https://www.npmjs.com/package/rita-workspace)
+[![npm downloads](https://img.shields.io/npm/dm/rita-workspace.svg)](https://www.npmjs.com/package/rita-workspace)
+
+```bash
+npm install rita-workspace
+```
+
+Multi-drawing workspace feature for Excalidraw/Rita (Excalidraw fork based on B310-digital/excalidraw).
+
+<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
 
@@ -10,7 +55,7 @@ Multi-drawing workspace feature for Rita (Excalidraw fork based on B310-digital/
 - **Multi-tab conflict detection** - Prevents data loss when same drawing is open in multiple tabs
 - **F5 preserves write ownership** - TAB_ID and openedAt persist in sessionStorage across page refresh
 - **Cross-tab refresh** - Creating/renaming/deleting drawings in one tab auto-refreshes other tabs via BroadcastChannel
-- **Workspace toggle** - Preview feature that can be enabled/disabled per browser tab
+- **Workspace toggle** - Can be enabled/disabled per browser tab
 - **Export/Import** - Export workspace as JSON, export all drawings as individual .excalidraw files, import .excalidraw files
 - **i18n support** - Swedish and English with automatic Excalidraw language sync
 - **Optimized loading** - DB pre-warming and parallel initialization
@@ -111,7 +156,7 @@ if (isDrawingOpenedEarlierInOtherTab(drawingId)) {
 - **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
 
-## Workspace Toggle (Preview Feature)
+## Workspace Toggle
 
 The workspace can be enabled/disabled per browser tab using `sessionStorage`:
 

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.48",
+  "version": "0.5.53",
   "description": "Multi-drawing workspace feature for Rita (Excalidraw fork)",
   "main": "dist/index.js",
   "module": "dist/index.mjs",