rita-workspace 0.5.33 → 0.5.34

package/dist/index.d.mts

@@ -6,6 +6,8 @@ interface Drawing {
     id: string;
     name: string;
     folderId?: string | null;
+    /** Manual sort position. Lower = earlier in list. Falls back to createdAt when unset. */
+    position?: number;
     elements: unknown[];
     appState: Record<string, unknown>;
     files: Record<string, unknown>;
@@ -64,6 +66,12 @@ declare function updateDrawing(id: string, updates: Partial<Omit<Drawing, 'id' |
 declare function deleteDrawing(id: string): Promise<boolean>;
 declare function duplicateDrawing(id: string, newName?: string): Promise<Drawing | undefined>;
 declare function moveDrawingToFolder(drawingId: string, folderId: string | null): Promise<Drawing | undefined>;
+/**
+ * Re-number `position` for the given drawing IDs in the order provided (0..N-1).
+ * Drawings not in `orderedIds` are left untouched (caller should pass the full
+ * sorted slice that the user reordered, e.g. all root drawings or all in a folder).
+ */
+declare function reorderDrawings(orderedIds: string[]): Promise<void>;
 
 declare function createFolder(name: string): Promise<Folder>;
 declare function getFolder(id: string): Promise<Folder | undefined>;
@@ -147,6 +155,9 @@ interface WorkspaceContextValue {
     renameFolder: (id: string, name: string) => Promise<void>;
     deleteFolder: (id: string) => Promise<void>;
     moveDrawingToFolder: (drawingId: string, folderId: string | null) => Promise<void>;
+    /** 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>;
     saveCurrentDrawing: (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>;
@@ -388,4 +399,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, 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, setActiveDrawing, updateDrawing, updateWorkspace, useExcalidrawBridge, useWorkspace, useWorkspaceLang, warmDB };

package/dist/index.d.ts

@@ -6,6 +6,8 @@ interface Drawing {
     id: string;
     name: string;
     folderId?: string | null;
+    /** Manual sort position. Lower = earlier in list. Falls back to createdAt when unset. */
+    position?: number;
     elements: unknown[];
     appState: Record<string, unknown>;
     files: Record<string, unknown>;
@@ -64,6 +66,12 @@ declare function updateDrawing(id: string, updates: Partial<Omit<Drawing, 'id' |
 declare function deleteDrawing(id: string): Promise<boolean>;
 declare function duplicateDrawing(id: string, newName?: string): Promise<Drawing | undefined>;
 declare function moveDrawingToFolder(drawingId: string, folderId: string | null): Promise<Drawing | undefined>;
+/**
+ * Re-number `position` for the given drawing IDs in the order provided (0..N-1).
+ * Drawings not in `orderedIds` are left untouched (caller should pass the full
+ * sorted slice that the user reordered, e.g. all root drawings or all in a folder).
+ */
+declare function reorderDrawings(orderedIds: string[]): Promise<void>;
 
 declare function createFolder(name: string): Promise<Folder>;
 declare function getFolder(id: string): Promise<Folder | undefined>;
@@ -147,6 +155,9 @@ interface WorkspaceContextValue {
     renameFolder: (id: string, name: string) => Promise<void>;
     deleteFolder: (id: string) => Promise<void>;
     moveDrawingToFolder: (drawingId: string, folderId: string | null) => Promise<void>;
+    /** 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>;
     saveCurrentDrawing: (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>;
@@ -388,4 +399,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, 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, setActiveDrawing, updateDrawing, updateWorkspace, useExcalidrawBridge, useWorkspace, useWorkspaceLang, warmDB };

package/dist/index.js

@@ -59,6 +59,7 @@ __export(index_exports, {
   moveDrawingToFolder: () => moveDrawingToFolder,
   removeDrawingFromWorkspace: () => removeDrawingFromWorkspace,
   renameFolder: () => renameFolder,
+  reorderDrawings: () => reorderDrawings,
   setActiveDrawing: () => setActiveDrawing,
   updateDrawing: () => updateDrawing,
   updateWorkspace: () => updateWorkspace,
@@ -177,6 +178,17 @@ async function duplicateDrawing(id, newName) {
 async function moveDrawingToFolder(drawingId, folderId) {
   return updateDrawing(drawingId, { folderId });
 }
+async function reorderDrawings(orderedIds) {
+  const db = await getDB();
+  const tx = db.transaction("drawings", "readwrite");
+  const store = tx.objectStore("drawings");
+  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;
+}
 
 // src/storage/folderStore.ts
 var import_nanoid2 = require("nanoid");
@@ -315,8 +327,8 @@ var sv = {
   // Actions with descriptions
   createNewDrawing: "Skapa ny ritning",
   createNewDrawingDesc: "Skapar en tom ritning i din arbetsyta",
-  openFromFile: "\xD6ppna ritning fr\xE5n fil",
-  openFromFileDesc: "\xD6ppnar en sparad ritning fr\xE5n din dator",
+  openFromFile: "Importera ritning fr\xE5n fil",
+  openFromFileDesc: "Importerar en sparad ritning fr\xE5n din dator",
   saveAllBackup: "Spara alla ritningar (backup)",
   saveAllBackupDesc: "Ladda ner hela din arbetsyta som backup",
   loadBackup: "L\xE4s in sparad arbetsyta",
@@ -365,8 +377,8 @@ var en = {
   // Actions with descriptions
   createNewDrawing: "Create new drawing",
   createNewDrawingDesc: "Creates an empty drawing in your workspace",
-  openFromFile: "Open drawing from file",
-  openFromFileDesc: "Opens a saved drawing from your computer",
+  openFromFile: "Import drawing from file",
+  openFromFileDesc: "Imports a saved drawing from your computer",
   saveAllBackup: "Save all drawings (backup)",
   saveAllBackupDesc: "Download your entire workspace as a backup",
   loadBackup: "Load saved workspace",
@@ -1251,6 +1263,19 @@ function WorkspaceProvider({ children, lang = "en" }) {
       setError(err instanceof Error ? err.message : "Failed to move drawing");
     }
   }, []);
+  const reorderDrawings2 = (0, import_react.useCallback)(async (orderedIds) => {
+    const positionMap = new Map(orderedIds.map((id, idx) => [id, idx]));
+    setDrawings((prev) => prev.map(
+      (d) => positionMap.has(d.id) ? { ...d, position: positionMap.get(d.id) } : d
+    ));
+    try {
+      await reorderDrawings(orderedIds);
+      broadcastWorkspaceChange();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Failed to reorder drawings");
+      refreshDrawingsRef.current();
+    }
+  }, []);
   const value = {
     workspace,
     drawings,
@@ -1270,6 +1295,7 @@ function WorkspaceProvider({ children, lang = "en" }) {
     renameFolder: renameFolder2,
     deleteFolder: deleteFolder2,
     moveDrawingToFolder: moveDrawingToFolder2,
+    reorderDrawings: reorderDrawings2,
     saveCurrentDrawing,
     saveDrawingById,
     refreshDrawings,
@@ -1638,6 +1664,7 @@ var DrawingsDialog = ({
     renameFolder: renameFolder2,
     deleteFolder: deleteFolder2,
     moveDrawingToFolder: moveDrawingToFolder2,
+    reorderDrawings: reorderDrawings2,
     exportWorkspace,
     importWorkspace,
     exportDrawingAsExcalidraw,
@@ -1666,6 +1693,8 @@ var DrawingsDialog = ({
   const [isRefreshing, setIsRefreshing] = (0, import_react5.useState)(false);
   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 [position, setPosition] = (0, import_react5.useState)(null);
   const dragRef = (0, import_react5.useRef)(null);
   const dialogRef = (0, import_react5.useRef)(null);
@@ -1773,6 +1802,28 @@ var DrawingsDialog = ({
     setSelectedId(null);
     moveDrawingToFolder2(drawingId, folderId);
   }, [moveDrawingToFolder2]);
+  const handleReorderDrop = (0, import_react5.useCallback)((draggedId, targetId, pos) => {
+    if (draggedId === targetId) return;
+    const target = drawings.find((d) => d.id === targetId);
+    if (!target) return;
+    const scopeFolderId = target.folderId ?? null;
+    const scope = drawings.filter((d) => (d.folderId ?? null) === scopeFolderId).sort((a, b) => (a.position ?? a.createdAt) - (b.position ?? b.createdAt));
+    const withoutDragged = scope.filter((d) => d.id !== draggedId);
+    const targetIdx = withoutDragged.findIndex((d) => d.id === targetId);
+    if (targetIdx === -1) return;
+    const insertIdx = pos === "before" ? targetIdx : targetIdx + 1;
+    const dragged = drawings.find((d) => d.id === draggedId);
+    if (!dragged) return;
+    if ((dragged.folderId ?? null) !== scopeFolderId) {
+      moveDrawingToFolder2(draggedId, scopeFolderId);
+    }
+    const ordered = [
+      ...withoutDragged.slice(0, insertIdx),
+      dragged,
+      ...withoutDragged.slice(insertIdx)
+    ].map((d) => d.id);
+    reorderDrawings2(ordered);
+  }, [drawings, reorderDrawings2, moveDrawingToFolder2]);
   const toggleFolder = (0, import_react5.useCallback)((folderId) => {
     setExpandedFolders((prev) => {
       const next = new Set(prev);
@@ -1805,7 +1856,9 @@ var DrawingsDialog = ({
   const { rootDrawings, drawingsByFolder, filteredFolders } = (0, import_react5.useMemo)(() => {
     const query = searchQuery.toLowerCase().trim();
     const filtered = query ? drawings.filter((d) => d.name.toLowerCase().includes(query)) : drawings;
-    const sorted = [...filtered].sort((a, b) => a.createdAt - b.createdAt);
+    const sorted = [...filtered].sort(
+      (a, b) => (a.position ?? a.createdAt) - (b.position ?? b.createdAt)
+    );
     const root = sorted.filter((d) => !d.folderId);
     const byFolder = {};
     for (const folder of folders) {
@@ -1860,6 +1913,34 @@ var DrawingsDialog = ({
       onDragEnd: () => {
         setDraggingDrawingId(null);
         setDropTargetFolderId(null);
+        setDropTargetDrawingId(null);
+        setDropTargetPosition(null);
+      },
+      onDragOver: (e) => {
+        if (!draggingDrawingId || draggingDrawingId === drawing.id) return;
+        e.preventDefault();
+        e.dataTransfer.dropEffect = "move";
+        const rect = e.currentTarget.getBoundingClientRect();
+        const isBefore = e.clientY < rect.top + rect.height / 2;
+        setDropTargetDrawingId(drawing.id);
+        setDropTargetPosition(isBefore ? "before" : "after");
+      },
+      onDragLeave: (e) => {
+        if (e.currentTarget.contains(e.relatedTarget)) return;
+        if (dropTargetDrawingId === drawing.id) {
+          setDropTargetDrawingId(null);
+          setDropTargetPosition(null);
+        }
+      },
+      onDrop: (e) => {
+        if (!draggingDrawingId || !dropTargetPosition || draggingDrawingId === drawing.id) return;
+        e.preventDefault();
+        e.stopPropagation();
+        handleReorderDrop(draggingDrawingId, drawing.id, dropTargetPosition);
+        setDraggingDrawingId(null);
+        setDropTargetDrawingId(null);
+        setDropTargetPosition(null);
+        setDropTargetFolderId(null);
       },
       onMouseEnter: () => setHoveredId(drawing.id),
       onMouseLeave: () => setHoveredId(null),
@@ -1875,6 +1956,7 @@ var DrawingsDialog = ({
         handleSelect(drawing);
       },
       style: {
+        position: "relative",
         padding: "10px 12px",
         display: "flex",
         alignItems: "center",
@@ -1889,6 +1971,16 @@ var DrawingsDialog = ({
         opacity: draggingDrawingId === drawing.id ? 0.4 : switchingId && switchingId !== drawing.id ? 0.5 : 1
       },
       children: [
+        dropTargetDrawingId === drawing.id && dropTargetPosition && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: {
+          position: "absolute",
+          left: 4,
+          right: 4,
+          [dropTargetPosition === "before" ? "top" : "bottom"]: -2,
+          height: "3px",
+          backgroundColor: "var(--color-primary, #6c63ff)",
+          borderRadius: "2px",
+          pointerEvents: "none"
+        } }),
         renderThumbnail && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: {
           width: "64px",
           height: "48px",
@@ -2815,6 +2907,7 @@ function WorkspacePlugin(props) {
   moveDrawingToFolder,
   removeDrawingFromWorkspace,
   renameFolder,
+  reorderDrawings,
   setActiveDrawing,
   updateDrawing,
   updateWorkspace,

package/dist/index.mjs

@@ -106,6 +106,17 @@ async function duplicateDrawing(id, newName) {
 async function moveDrawingToFolder(drawingId, folderId) {
   return updateDrawing(drawingId, { folderId });
 }
+async function reorderDrawings(orderedIds) {
+  const db = await getDB();
+  const tx = db.transaction("drawings", "readwrite");
+  const store = tx.objectStore("drawings");
+  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;
+}
 
 // src/storage/folderStore.ts
 import { nanoid as nanoid2 } from "nanoid";
@@ -244,8 +255,8 @@ var sv = {
   // Actions with descriptions
   createNewDrawing: "Skapa ny ritning",
   createNewDrawingDesc: "Skapar en tom ritning i din arbetsyta",
-  openFromFile: "\xD6ppna ritning fr\xE5n fil",
-  openFromFileDesc: "\xD6ppnar en sparad ritning fr\xE5n din dator",
+  openFromFile: "Importera ritning fr\xE5n fil",
+  openFromFileDesc: "Importerar en sparad ritning fr\xE5n din dator",
   saveAllBackup: "Spara alla ritningar (backup)",
   saveAllBackupDesc: "Ladda ner hela din arbetsyta som backup",
   loadBackup: "L\xE4s in sparad arbetsyta",
@@ -294,8 +305,8 @@ var en = {
   // Actions with descriptions
   createNewDrawing: "Create new drawing",
   createNewDrawingDesc: "Creates an empty drawing in your workspace",
-  openFromFile: "Open drawing from file",
-  openFromFileDesc: "Opens a saved drawing from your computer",
+  openFromFile: "Import drawing from file",
+  openFromFileDesc: "Imports a saved drawing from your computer",
   saveAllBackup: "Save all drawings (backup)",
   saveAllBackupDesc: "Download your entire workspace as a backup",
   loadBackup: "Load saved workspace",
@@ -1180,6 +1191,19 @@ function WorkspaceProvider({ children, lang = "en" }) {
       setError(err instanceof Error ? err.message : "Failed to move drawing");
     }
   }, []);
+  const reorderDrawings2 = useCallback(async (orderedIds) => {
+    const positionMap = new Map(orderedIds.map((id, idx) => [id, idx]));
+    setDrawings((prev) => prev.map(
+      (d) => positionMap.has(d.id) ? { ...d, position: positionMap.get(d.id) } : d
+    ));
+    try {
+      await reorderDrawings(orderedIds);
+      broadcastWorkspaceChange();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Failed to reorder drawings");
+      refreshDrawingsRef.current();
+    }
+  }, []);
   const value = {
     workspace,
     drawings,
@@ -1199,6 +1223,7 @@ function WorkspaceProvider({ children, lang = "en" }) {
     renameFolder: renameFolder2,
     deleteFolder: deleteFolder2,
     moveDrawingToFolder: moveDrawingToFolder2,
+    reorderDrawings: reorderDrawings2,
     saveCurrentDrawing,
     saveDrawingById,
     refreshDrawings,
@@ -1567,6 +1592,7 @@ var DrawingsDialog = ({
     renameFolder: renameFolder2,
     deleteFolder: deleteFolder2,
     moveDrawingToFolder: moveDrawingToFolder2,
+    reorderDrawings: reorderDrawings2,
     exportWorkspace,
     importWorkspace,
     exportDrawingAsExcalidraw,
@@ -1595,6 +1621,8 @@ var DrawingsDialog = ({
   const [isRefreshing, setIsRefreshing] = useState4(false);
   const [draggingDrawingId, setDraggingDrawingId] = useState4(null);
   const [dropTargetFolderId, setDropTargetFolderId] = useState4(null);
+  const [dropTargetDrawingId, setDropTargetDrawingId] = useState4(null);
+  const [dropTargetPosition, setDropTargetPosition] = useState4(null);
   const [position, setPosition] = useState4(null);
   const dragRef = useRef3(null);
   const dialogRef = useRef3(null);
@@ -1702,6 +1730,28 @@ var DrawingsDialog = ({
     setSelectedId(null);
     moveDrawingToFolder2(drawingId, folderId);
   }, [moveDrawingToFolder2]);
+  const handleReorderDrop = useCallback2((draggedId, targetId, pos) => {
+    if (draggedId === targetId) return;
+    const target = drawings.find((d) => d.id === targetId);
+    if (!target) return;
+    const scopeFolderId = target.folderId ?? null;
+    const scope = drawings.filter((d) => (d.folderId ?? null) === scopeFolderId).sort((a, b) => (a.position ?? a.createdAt) - (b.position ?? b.createdAt));
+    const withoutDragged = scope.filter((d) => d.id !== draggedId);
+    const targetIdx = withoutDragged.findIndex((d) => d.id === targetId);
+    if (targetIdx === -1) return;
+    const insertIdx = pos === "before" ? targetIdx : targetIdx + 1;
+    const dragged = drawings.find((d) => d.id === draggedId);
+    if (!dragged) return;
+    if ((dragged.folderId ?? null) !== scopeFolderId) {
+      moveDrawingToFolder2(draggedId, scopeFolderId);
+    }
+    const ordered = [
+      ...withoutDragged.slice(0, insertIdx),
+      dragged,
+      ...withoutDragged.slice(insertIdx)
+    ].map((d) => d.id);
+    reorderDrawings2(ordered);
+  }, [drawings, reorderDrawings2, moveDrawingToFolder2]);
   const toggleFolder = useCallback2((folderId) => {
     setExpandedFolders((prev) => {
       const next = new Set(prev);
@@ -1734,7 +1784,9 @@ var DrawingsDialog = ({
   const { rootDrawings, drawingsByFolder, filteredFolders } = useMemo(() => {
     const query = searchQuery.toLowerCase().trim();
     const filtered = query ? drawings.filter((d) => d.name.toLowerCase().includes(query)) : drawings;
-    const sorted = [...filtered].sort((a, b) => a.createdAt - b.createdAt);
+    const sorted = [...filtered].sort(
+      (a, b) => (a.position ?? a.createdAt) - (b.position ?? b.createdAt)
+    );
     const root = sorted.filter((d) => !d.folderId);
     const byFolder = {};
     for (const folder of folders) {
@@ -1789,6 +1841,34 @@ var DrawingsDialog = ({
       onDragEnd: () => {
         setDraggingDrawingId(null);
         setDropTargetFolderId(null);
+        setDropTargetDrawingId(null);
+        setDropTargetPosition(null);
+      },
+      onDragOver: (e) => {
+        if (!draggingDrawingId || draggingDrawingId === drawing.id) return;
+        e.preventDefault();
+        e.dataTransfer.dropEffect = "move";
+        const rect = e.currentTarget.getBoundingClientRect();
+        const isBefore = e.clientY < rect.top + rect.height / 2;
+        setDropTargetDrawingId(drawing.id);
+        setDropTargetPosition(isBefore ? "before" : "after");
+      },
+      onDragLeave: (e) => {
+        if (e.currentTarget.contains(e.relatedTarget)) return;
+        if (dropTargetDrawingId === drawing.id) {
+          setDropTargetDrawingId(null);
+          setDropTargetPosition(null);
+        }
+      },
+      onDrop: (e) => {
+        if (!draggingDrawingId || !dropTargetPosition || draggingDrawingId === drawing.id) return;
+        e.preventDefault();
+        e.stopPropagation();
+        handleReorderDrop(draggingDrawingId, drawing.id, dropTargetPosition);
+        setDraggingDrawingId(null);
+        setDropTargetDrawingId(null);
+        setDropTargetPosition(null);
+        setDropTargetFolderId(null);
       },
       onMouseEnter: () => setHoveredId(drawing.id),
       onMouseLeave: () => setHoveredId(null),
@@ -1804,6 +1884,7 @@ var DrawingsDialog = ({
         handleSelect(drawing);
       },
       style: {
+        position: "relative",
         padding: "10px 12px",
         display: "flex",
         alignItems: "center",
@@ -1818,6 +1899,16 @@ var DrawingsDialog = ({
         opacity: draggingDrawingId === drawing.id ? 0.4 : switchingId && switchingId !== drawing.id ? 0.5 : 1
       },
       children: [
+        dropTargetDrawingId === drawing.id && dropTargetPosition && /* @__PURE__ */ jsx6("div", { style: {
+          position: "absolute",
+          left: 4,
+          right: 4,
+          [dropTargetPosition === "before" ? "top" : "bottom"]: -2,
+          height: "3px",
+          backgroundColor: "var(--color-primary, #6c63ff)",
+          borderRadius: "2px",
+          pointerEvents: "none"
+        } }),
         renderThumbnail && /* @__PURE__ */ jsx6("div", { style: {
           width: "64px",
           height: "48px",
@@ -2743,6 +2834,7 @@ export {
   moveDrawingToFolder,
   removeDrawingFromWorkspace,
   renameFolder,
+  reorderDrawings,
   setActiveDrawing,
   updateDrawing,
   updateWorkspace,

package/package.json

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