rita-workspace 0.1.1 → 0.2.0

package/dist/index.mjs

@@ -483,8 +483,513 @@ function Sidebar({ isOpen = true, onToggle, width = 250 }) {
   ] });
 }
 
+// src/ui/Menu/WorkspaceMenuItems.tsx
+import React4 from "react";
+import { Fragment as Fragment2, jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
+var DrawingsIcon = /* @__PURE__ */ jsxs3("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
+  /* @__PURE__ */ jsx5("rect", { x: "3", y: "3", width: "7", height: "7", rx: "1" }),
+  /* @__PURE__ */ jsx5("rect", { x: "14", y: "3", width: "7", height: "7", rx: "1" }),
+  /* @__PURE__ */ jsx5("rect", { x: "3", y: "14", width: "7", height: "7", rx: "1" }),
+  /* @__PURE__ */ jsx5("rect", { x: "14", y: "14", width: "7", height: "7", rx: "1" })
+] });
+var PlusIcon = /* @__PURE__ */ jsxs3("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
+  /* @__PURE__ */ jsx5("line", { x1: "12", y1: "5", x2: "12", y2: "19" }),
+  /* @__PURE__ */ jsx5("line", { x1: "5", y1: "12", x2: "19", y2: "12" })
+] });
+var DefaultMenuItem = ({ icon, children, onSelect, shortcut }) => /* @__PURE__ */ jsxs3(
+  "button",
+  {
+    onClick: onSelect,
+    className: "rita-workspace-menu-item",
+    style: {
+      display: "flex",
+      alignItems: "center",
+      gap: "8px",
+      width: "100%",
+      padding: "8px 12px",
+      border: "none",
+      background: "none",
+      cursor: "pointer",
+      textAlign: "left",
+      fontSize: "14px"
+    },
+    children: [
+      /* @__PURE__ */ jsx5("span", { style: { width: "20px", height: "20px" }, children: icon }),
+      /* @__PURE__ */ jsx5("span", { style: { flex: 1 }, children }),
+      shortcut && /* @__PURE__ */ jsx5("span", { style: { opacity: 0.5, fontSize: "12px" }, children: shortcut })
+    ]
+  }
+);
+var WorkspaceMenuItems = ({
+  onDrawingSelect,
+  onManageDrawings,
+  renderMenuItem,
+  renderSubMenu,
+  renderSeparator
+}) => {
+  const { drawings, activeDrawing, switchDrawing, createNewDrawing } = useWorkspace();
+  const MenuItem = renderMenuItem || ((props) => /* @__PURE__ */ jsx5(DefaultMenuItem, { ...props }));
+  const Separator = renderSeparator || (() => /* @__PURE__ */ jsx5("hr", { style: { margin: "4px 0", border: "none", borderTop: "1px solid #ccc" } }));
+  const handleDrawingSelect = async (drawing) => {
+    await switchDrawing(drawing.id);
+    onDrawingSelect?.(drawing);
+  };
+  const handleNewDrawing = async () => {
+    await createNewDrawing();
+  };
+  if (renderSubMenu) {
+    return /* @__PURE__ */ jsx5(Fragment2, { children: renderSubMenu({
+      trigger: /* @__PURE__ */ jsxs3(Fragment2, { children: [
+        DrawingsIcon,
+        /* @__PURE__ */ jsxs3("span", { children: [
+          "Ritningar (",
+          drawings.length,
+          ")"
+        ] })
+      ] }),
+      children: /* @__PURE__ */ jsxs3(Fragment2, { children: [
+        drawings.map((drawing) => /* @__PURE__ */ jsx5(React4.Fragment, { children: MenuItem({
+          icon: activeDrawing?.id === drawing.id ? "\u2713" : " ",
+          children: drawing.name,
+          onSelect: () => handleDrawingSelect(drawing)
+        }) }, drawing.id)),
+        drawings.length > 0 && Separator(),
+        MenuItem({
+          icon: PlusIcon,
+          children: "Ny ritning",
+          onSelect: handleNewDrawing,
+          shortcut: "Ctrl+Alt+N"
+        }),
+        onManageDrawings && MenuItem({
+          icon: DrawingsIcon,
+          children: "Hantera ritningar...",
+          onSelect: onManageDrawings
+        })
+      ] })
+    }) });
+  }
+  return /* @__PURE__ */ jsxs3(Fragment2, { children: [
+    MenuItem({
+      icon: PlusIcon,
+      children: "Ny ritning",
+      onSelect: handleNewDrawing,
+      shortcut: "Ctrl+Alt+N"
+    }),
+    drawings.slice(0, 5).map((drawing) => /* @__PURE__ */ jsx5(React4.Fragment, { children: MenuItem({
+      icon: activeDrawing?.id === drawing.id ? "\u2713" : DrawingsIcon,
+      children: drawing.name,
+      onSelect: () => handleDrawingSelect(drawing)
+    }) }, drawing.id)),
+    onManageDrawings && drawings.length > 5 && /* @__PURE__ */ jsxs3(Fragment2, { children: [
+      Separator(),
+      MenuItem({
+        icon: DrawingsIcon,
+        children: `Alla ritningar (${drawings.length})...`,
+        onSelect: onManageDrawings
+      })
+    ] })
+  ] });
+};
+
+// src/ui/Dialog/DrawingsDialog.tsx
+import { useState as useState5, useCallback as useCallback2 } from "react";
+import { Fragment as Fragment3, jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
+var DrawingsDialog = ({
+  open,
+  onClose,
+  onDrawingSelect
+}) => {
+  const {
+    drawings,
+    activeDrawing,
+    switchDrawing,
+    createNewDrawing,
+    renameDrawing,
+    removeDrawing
+  } = useWorkspace();
+  const [editingId, setEditingId] = useState5(null);
+  const [editName, setEditName] = useState5("");
+  const [confirmDeleteId, setConfirmDeleteId] = useState5(null);
+  const handleSelect = useCallback2(async (drawing) => {
+    await switchDrawing(drawing.id);
+    onDrawingSelect?.(drawing);
+    onClose();
+  }, [switchDrawing, onDrawingSelect, onClose]);
+  const handleCreate = useCallback2(async () => {
+    const newDrawing = await createNewDrawing();
+    if (newDrawing) {
+      onDrawingSelect?.(newDrawing);
+      onClose();
+    }
+  }, [createNewDrawing, onDrawingSelect, onClose]);
+  const handleStartEdit = useCallback2((drawing) => {
+    setEditingId(drawing.id);
+    setEditName(drawing.name);
+  }, []);
+  const handleSaveEdit = useCallback2(async () => {
+    if (editingId && editName.trim()) {
+      await renameDrawing(editingId, editName.trim());
+      setEditingId(null);
+      setEditName("");
+    }
+  }, [editingId, editName, renameDrawing]);
+  const handleCancelEdit = useCallback2(() => {
+    setEditingId(null);
+    setEditName("");
+  }, []);
+  const handleDelete = useCallback2(async (id) => {
+    await removeDrawing(id);
+    setConfirmDeleteId(null);
+  }, [removeDrawing]);
+  const formatDate = (timestamp) => {
+    return new Date(timestamp).toLocaleString("sv-SE", {
+      year: "numeric",
+      month: "short",
+      day: "numeric",
+      hour: "2-digit",
+      minute: "2-digit"
+    });
+  };
+  if (!open) return null;
+  return /* @__PURE__ */ jsx6(
+    "div",
+    {
+      className: "rita-workspace-dialog-overlay",
+      style: {
+        position: "fixed",
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        backgroundColor: "rgba(0, 0, 0, 0.5)",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        zIndex: 9999
+      },
+      onClick: (e) => {
+        if (e.target === e.currentTarget) onClose();
+      },
+      children: /* @__PURE__ */ jsxs4(
+        "div",
+        {
+          className: "rita-workspace-dialog",
+          style: {
+            backgroundColor: "var(--island-bg-color, #fff)",
+            borderRadius: "8px",
+            boxShadow: "0 4px 24px rgba(0, 0, 0, 0.2)",
+            width: "90%",
+            maxWidth: "600px",
+            maxHeight: "80vh",
+            display: "flex",
+            flexDirection: "column",
+            color: "var(--text-primary-color, #1b1b1f)"
+          },
+          children: [
+            /* @__PURE__ */ jsxs4(
+              "div",
+              {
+                style: {
+                  padding: "16px 20px",
+                  borderBottom: "1px solid var(--default-border-color, #e0e0e0)",
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "space-between"
+                },
+                children: [
+                  /* @__PURE__ */ jsxs4("h2", { style: { margin: 0, fontSize: "18px", fontWeight: 600 }, children: [
+                    "Ritningar (",
+                    drawings.length,
+                    ")"
+                  ] }),
+                  /* @__PURE__ */ jsx6(
+                    "button",
+                    {
+                      onClick: onClose,
+                      style: {
+                        background: "none",
+                        border: "none",
+                        fontSize: "24px",
+                        cursor: "pointer",
+                        padding: "4px",
+                        lineHeight: 1,
+                        color: "inherit"
+                      },
+                      "aria-label": "St\xE4ng",
+                      children: "\xD7"
+                    }
+                  )
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx6(
+              "div",
+              {
+                style: {
+                  flex: 1,
+                  overflow: "auto",
+                  padding: "8px 0"
+                },
+                children: drawings.length === 0 ? /* @__PURE__ */ jsxs4(
+                  "div",
+                  {
+                    style: {
+                      padding: "40px 20px",
+                      textAlign: "center",
+                      color: "var(--text-secondary-color, #666)"
+                    },
+                    children: [
+                      /* @__PURE__ */ jsx6("p", { children: "Inga ritningar \xE4nnu." }),
+                      /* @__PURE__ */ jsx6("p", { children: 'Klicka "Ny ritning" f\xF6r att b\xF6rja.' })
+                    ]
+                  }
+                ) : drawings.map((drawing) => /* @__PURE__ */ jsxs4(
+                  "div",
+                  {
+                    className: "rita-workspace-dialog-item",
+                    style: {
+                      padding: "12px 20px",
+                      display: "flex",
+                      alignItems: "center",
+                      gap: "12px",
+                      borderBottom: "1px solid var(--default-border-color, #f0f0f0)",
+                      backgroundColor: activeDrawing?.id === drawing.id ? "var(--color-primary-light, rgba(108, 99, 255, 0.1))" : "transparent"
+                    },
+                    children: [
+                      /* @__PURE__ */ jsx6("div", { style: { flex: 1, minWidth: 0 }, children: editingId === drawing.id ? /* @__PURE__ */ jsx6(
+                        "input",
+                        {
+                          type: "text",
+                          value: editName,
+                          onChange: (e) => setEditName(e.target.value),
+                          onKeyDown: (e) => {
+                            if (e.key === "Enter") handleSaveEdit();
+                            if (e.key === "Escape") handleCancelEdit();
+                          },
+                          autoFocus: true,
+                          style: {
+                            width: "100%",
+                            padding: "4px 8px",
+                            fontSize: "14px",
+                            border: "1px solid var(--color-primary, #6c63ff)",
+                            borderRadius: "4px",
+                            outline: "none"
+                          }
+                        }
+                      ) : /* @__PURE__ */ jsxs4(Fragment3, { children: [
+                        /* @__PURE__ */ jsxs4(
+                          "div",
+                          {
+                            style: {
+                              fontWeight: activeDrawing?.id === drawing.id ? 600 : 400,
+                              fontSize: "14px",
+                              overflow: "hidden",
+                              textOverflow: "ellipsis",
+                              whiteSpace: "nowrap"
+                            },
+                            children: [
+                              activeDrawing?.id === drawing.id && "\u2713 ",
+                              drawing.name
+                            ]
+                          }
+                        ),
+                        /* @__PURE__ */ jsxs4(
+                          "div",
+                          {
+                            style: {
+                              fontSize: "12px",
+                              color: "var(--text-secondary-color, #888)",
+                              marginTop: "2px"
+                            },
+                            children: [
+                              "\xC4ndrad: ",
+                              formatDate(drawing.updatedAt)
+                            ]
+                          }
+                        )
+                      ] }) }),
+                      /* @__PURE__ */ jsx6("div", { style: { display: "flex", gap: "4px" }, children: editingId === drawing.id ? /* @__PURE__ */ jsxs4(Fragment3, { children: [
+                        /* @__PURE__ */ jsx6(
+                          "button",
+                          {
+                            onClick: handleSaveEdit,
+                            style: {
+                              padding: "6px 12px",
+                              fontSize: "12px",
+                              backgroundColor: "var(--color-primary, #6c63ff)",
+                              color: "#fff",
+                              border: "none",
+                              borderRadius: "4px",
+                              cursor: "pointer"
+                            },
+                            children: "Spara"
+                          }
+                        ),
+                        /* @__PURE__ */ jsx6(
+                          "button",
+                          {
+                            onClick: handleCancelEdit,
+                            style: {
+                              padding: "6px 12px",
+                              fontSize: "12px",
+                              backgroundColor: "transparent",
+                              border: "1px solid var(--default-border-color, #ccc)",
+                              borderRadius: "4px",
+                              cursor: "pointer",
+                              color: "inherit"
+                            },
+                            children: "Avbryt"
+                          }
+                        )
+                      ] }) : confirmDeleteId === drawing.id ? /* @__PURE__ */ jsxs4(Fragment3, { children: [
+                        /* @__PURE__ */ jsx6(
+                          "button",
+                          {
+                            onClick: () => handleDelete(drawing.id),
+                            style: {
+                              padding: "6px 12px",
+                              fontSize: "12px",
+                              backgroundColor: "#dc3545",
+                              color: "#fff",
+                              border: "none",
+                              borderRadius: "4px",
+                              cursor: "pointer"
+                            },
+                            children: "Ta bort"
+                          }
+                        ),
+                        /* @__PURE__ */ jsx6(
+                          "button",
+                          {
+                            onClick: () => setConfirmDeleteId(null),
+                            style: {
+                              padding: "6px 12px",
+                              fontSize: "12px",
+                              backgroundColor: "transparent",
+                              border: "1px solid var(--default-border-color, #ccc)",
+                              borderRadius: "4px",
+                              cursor: "pointer",
+                              color: "inherit"
+                            },
+                            children: "Avbryt"
+                          }
+                        )
+                      ] }) : /* @__PURE__ */ jsxs4(Fragment3, { children: [
+                        /* @__PURE__ */ jsx6(
+                          "button",
+                          {
+                            onClick: () => handleSelect(drawing),
+                            style: {
+                              padding: "6px 12px",
+                              fontSize: "12px",
+                              backgroundColor: "var(--color-primary, #6c63ff)",
+                              color: "#fff",
+                              border: "none",
+                              borderRadius: "4px",
+                              cursor: "pointer"
+                            },
+                            disabled: activeDrawing?.id === drawing.id,
+                            children: "\xD6ppna"
+                          }
+                        ),
+                        /* @__PURE__ */ jsx6(
+                          "button",
+                          {
+                            onClick: () => handleStartEdit(drawing),
+                            style: {
+                              padding: "6px 12px",
+                              fontSize: "12px",
+                              backgroundColor: "transparent",
+                              border: "1px solid var(--default-border-color, #ccc)",
+                              borderRadius: "4px",
+                              cursor: "pointer",
+                              color: "inherit"
+                            },
+                            title: "Byt namn",
+                            children: "\u270F\uFE0F"
+                          }
+                        ),
+                        /* @__PURE__ */ jsx6(
+                          "button",
+                          {
+                            onClick: () => setConfirmDeleteId(drawing.id),
+                            style: {
+                              padding: "6px 12px",
+                              fontSize: "12px",
+                              backgroundColor: "transparent",
+                              border: "1px solid var(--default-border-color, #ccc)",
+                              borderRadius: "4px",
+                              cursor: "pointer",
+                              color: "inherit"
+                            },
+                            title: "Ta bort",
+                            disabled: drawings.length <= 1,
+                            children: "\u{1F5D1}\uFE0F"
+                          }
+                        )
+                      ] }) })
+                    ]
+                  },
+                  drawing.id
+                ))
+              }
+            ),
+            /* @__PURE__ */ jsxs4(
+              "div",
+              {
+                style: {
+                  padding: "16px 20px",
+                  borderTop: "1px solid var(--default-border-color, #e0e0e0)",
+                  display: "flex",
+                  justifyContent: "space-between",
+                  alignItems: "center"
+                },
+                children: [
+                  /* @__PURE__ */ jsx6(
+                    "button",
+                    {
+                      onClick: handleCreate,
+                      style: {
+                        padding: "10px 20px",
+                        fontSize: "14px",
+                        backgroundColor: "var(--color-primary, #6c63ff)",
+                        color: "#fff",
+                        border: "none",
+                        borderRadius: "6px",
+                        cursor: "pointer",
+                        fontWeight: 500
+                      },
+                      children: "+ Ny ritning"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx6(
+                    "button",
+                    {
+                      onClick: onClose,
+                      style: {
+                        padding: "10px 20px",
+                        fontSize: "14px",
+                        backgroundColor: "transparent",
+                        border: "1px solid var(--default-border-color, #ccc)",
+                        borderRadius: "6px",
+                        cursor: "pointer",
+                        color: "inherit"
+                      },
+                      children: "St\xE4ng"
+                    }
+                  )
+                ]
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+};
+
 // src/integration/useExcalidrawBridge.ts
-import { useEffect as useEffect3, useRef as useRef2, useCallback as useCallback2 } from "react";
+import { useEffect as useEffect3, useRef as useRef2, useCallback as useCallback3 } from "react";
 function useExcalidrawBridge({
   excalidrawAPI,
   autoSaveInterval = 2e3
@@ -501,7 +1006,7 @@ function useExcalidrawBridge({
       appState: activeDrawing.appState
     });
   }, [excalidrawAPI, activeDrawing]);
-  const scheduleSave = useCallback2(() => {
+  const scheduleSave = useCallback3(() => {
     if (!excalidrawAPI) return;
     if (saveTimeoutRef.current) {
       clearTimeout(saveTimeoutRef.current);
@@ -525,14 +1030,14 @@ function useExcalidrawBridge({
 }
 
 // src/WorkspacePlugin.tsx
-import { useState as useState4, useEffect as useEffect4, useCallback as useCallback3 } from "react";
-import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
+import { useState as useState6, useEffect as useEffect4, useCallback as useCallback4 } from "react";
+import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
 function WorkspacePluginInner({
   children,
   defaultSidebarOpen = true,
   sidebarWidth = 250
 }) {
-  const [sidebarOpen, setSidebarOpen] = useState4(defaultSidebarOpen);
+  const [sidebarOpen, setSidebarOpen] = useState6(defaultSidebarOpen);
   const { activeDrawing } = useWorkspace();
   useEffect4(() => {
     const handleKeyDown = (e) => {
@@ -547,10 +1052,10 @@ function WorkspacePluginInner({
     window.addEventListener("keydown", handleKeyDown);
     return () => window.removeEventListener("keydown", handleKeyDown);
   }, []);
-  const handleToggleSidebar = useCallback3(() => {
+  const handleToggleSidebar = useCallback4(() => {
     setSidebarOpen((prev) => !prev);
   }, []);
-  return /* @__PURE__ */ jsxs3(
+  return /* @__PURE__ */ jsxs5(
     "div",
     {
       style: {
@@ -559,7 +1064,7 @@ function WorkspacePluginInner({
         width: "100%"
       },
       children: [
-        /* @__PURE__ */ jsx5(
+        /* @__PURE__ */ jsx7(
           Sidebar,
           {
             isOpen: sidebarOpen,
@@ -567,7 +1072,7 @@ function WorkspacePluginInner({
             width: sidebarWidth
           }
         ),
-        /* @__PURE__ */ jsx5(
+        /* @__PURE__ */ jsx7(
           "main",
           {
             style: {
@@ -583,12 +1088,14 @@ function WorkspacePluginInner({
   );
 }
 function WorkspacePlugin(props) {
-  return /* @__PURE__ */ jsx5(WorkspaceProvider, { children: /* @__PURE__ */ jsx5(WorkspacePluginInner, { ...props }) });
+  return /* @__PURE__ */ jsx7(WorkspaceProvider, { children: /* @__PURE__ */ jsx7(WorkspacePluginInner, { ...props }) });
 }
 export {
   DrawingList,
   DrawingListItem,
+  DrawingsDialog,
   Sidebar,
+  WorkspaceMenuItems,
   WorkspacePlugin,
   WorkspaceProvider,
   addDrawingToWorkspace,

package/package.json

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