rita-workspace 0.5.31 → 0.5.32

package/dist/index.mjs

@@ -1922,30 +1922,7 @@ var DrawingsDialog = ({
           gap: "2px",
           alignItems: "center",
           visibility: hoveredId === drawing.id || selectedId === drawing.id || activeDrawing?.id === drawing.id || confirmDeleteId === drawing.id || movingDrawingId === drawing.id || editingId === drawing.id ? "visible" : "hidden"
-        }, children: confirmDeleteId === drawing.id ? /* @__PURE__ */ jsxs4(Fragment3, { children: [
-          /* @__PURE__ */ jsx6(
-            "button",
-            {
-              onClick: (e) => {
-                e.stopPropagation();
-                handleDelete(drawing.id);
-              },
-              style: { padding: "4px 10px", fontSize: "12px", backgroundColor: "#dc3545", color: "#fff", border: "none", borderRadius: "4px", cursor: "pointer" },
-              children: t.delete
-            }
-          ),
-          /* @__PURE__ */ jsx6(
-            "button",
-            {
-              onClick: (e) => {
-                e.stopPropagation();
-                setConfirmDeleteId(null);
-              },
-              style: { padding: "4px 10px", fontSize: "12px", backgroundColor: "transparent", border: "1px solid var(--default-border-color, #ccc)", borderRadius: "4px", cursor: "pointer", color: "inherit" },
-              children: t.cancel
-            }
-          )
-        ] }) : movingDrawingId === drawing.id ? /* @__PURE__ */ jsxs4("div", { onClick: (e) => e.stopPropagation(), style: { display: "flex", flexDirection: "column", gap: "2px", fontSize: "12px" }, children: [
+        }, children: movingDrawingId === drawing.id ? /* @__PURE__ */ jsxs4("div", { onClick: (e) => e.stopPropagation(), style: { display: "flex", flexDirection: "column", gap: "2px", fontSize: "12px" }, children: [
           /* @__PURE__ */ jsx6(
             "button",
             {
@@ -2113,24 +2090,7 @@ var DrawingsDialog = ({
                     ")"
                   ] })
                 ] }) }),
-                confirmDeleteFolderId === folder.id ? /* @__PURE__ */ jsxs4("div", { onClick: (e) => e.stopPropagation(), style: { display: "flex", gap: "4px" }, children: [
-                  /* @__PURE__ */ jsx6(
-                    "button",
-                    {
-                      onClick: () => handleDeleteFolder(folder.id),
-                      style: { padding: "2px 8px", fontSize: "12px", backgroundColor: "#dc3545", color: "#fff", border: "none", borderRadius: "4px", cursor: "pointer" },
-                      children: t.delete
-                    }
-                  ),
-                  /* @__PURE__ */ jsx6(
-                    "button",
-                    {
-                      onClick: () => setConfirmDeleteFolderId(null),
-                      style: { padding: "2px 8px", fontSize: "12px", backgroundColor: "transparent", border: "1px solid var(--default-border-color, #ccc)", borderRadius: "4px", cursor: "pointer", color: "inherit" },
-                      children: t.cancel
-                    }
-                  )
-                ] }) : editingFolderId !== folder.id && /* @__PURE__ */ jsxs4("div", { onClick: (e) => e.stopPropagation(), style: { display: "flex", gap: "2px" }, children: [
+                editingFolderId !== folder.id && /* @__PURE__ */ jsxs4("div", { onClick: (e) => e.stopPropagation(), style: { display: "flex", gap: "2px" }, children: [
                   /* @__PURE__ */ jsx6(
                     "button",
                     {
@@ -2165,7 +2125,7 @@ var DrawingsDialog = ({
       folder.id
     );
   };
-  return /* @__PURE__ */ jsx6(
+  return /* @__PURE__ */ jsxs4(
     "div",
     {
       className: "rita-workspace-dialog-overlay",
@@ -2184,275 +2144,366 @@ var DrawingsDialog = ({
       onClick: (e) => {
         if (e.target === e.currentTarget) onClose();
       },
-      children: /* @__PURE__ */ jsxs4("div", { ref: dialogRef, className: "rita-workspace-dialog", style: dialogStyle, children: [
-        /* @__PURE__ */ jsxs4(
-          "div",
-          {
-            onMouseDown: handleMouseDown,
-            style: {
-              padding: "16px 20px",
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "space-between",
-              cursor: "grab",
-              userSelect: "none",
-              borderBottom: "1px solid var(--default-border-color, #e0e0e0)"
-            },
-            children: [
-              /* @__PURE__ */ jsxs4("h2", { style: { margin: 0, fontSize: "18px", fontWeight: 600, display: "flex", alignItems: "center", gap: "8px" }, children: [
-                t.dialogTitle,
+      children: [
+        /* @__PURE__ */ jsxs4("div", { ref: dialogRef, className: "rita-workspace-dialog", style: dialogStyle, children: [
+          /* @__PURE__ */ jsxs4(
+            "div",
+            {
+              onMouseDown: handleMouseDown,
+              style: {
+                padding: "16px 20px",
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "space-between",
+                cursor: "grab",
+                userSelect: "none",
+                borderBottom: "1px solid var(--default-border-color, #e0e0e0)"
+              },
+              children: [
+                /* @__PURE__ */ jsxs4("h2", { style: { margin: 0, fontSize: "18px", fontWeight: 600, display: "flex", alignItems: "center", gap: "8px" }, children: [
+                  t.dialogTitle,
+                  /* @__PURE__ */ jsx6(
+                    "span",
+                    {
+                      style: {
+                        fontSize: "10px",
+                        fontWeight: 700,
+                        letterSpacing: "0.5px",
+                        padding: "2px 8px",
+                        borderRadius: "10px",
+                        backgroundColor: "#fff3cd",
+                        color: "#856404",
+                        border: "1px solid #ffc107",
+                        textTransform: "uppercase"
+                      },
+                      title: "Beta \u2014 funktionen \xE4r under utveckling och kan \xE4ndras",
+                      children: "BETA"
+                    }
+                  )
+                ] }),
                 /* @__PURE__ */ jsx6(
-                  "span",
+                  "button",
                   {
+                    onClick: onClose,
                     style: {
-                      fontSize: "10px",
-                      fontWeight: 700,
-                      letterSpacing: "0.5px",
-                      padding: "2px 8px",
-                      borderRadius: "10px",
-                      backgroundColor: "#fff3cd",
-                      color: "#856404",
-                      border: "1px solid #ffc107",
-                      textTransform: "uppercase"
+                      background: "none",
+                      border: "none",
+                      fontSize: "24px",
+                      cursor: "pointer",
+                      padding: "4px",
+                      lineHeight: 1,
+                      color: "inherit"
                     },
-                    title: "Beta \u2014 funktionen \xE4r under utveckling och kan \xE4ndras",
-                    children: "BETA"
+                    "aria-label": t.close,
+                    children: "\xD7"
                   }
                 )
-              ] }),
-              /* @__PURE__ */ jsx6(
-                "button",
-                {
-                  onClick: onClose,
-                  style: {
-                    background: "none",
-                    border: "none",
-                    fontSize: "24px",
-                    cursor: "pointer",
-                    padding: "4px",
-                    lineHeight: 1,
-                    color: "inherit"
-                  },
-                  "aria-label": t.close,
-                  children: "\xD7"
-                }
-              )
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsxs4(
-          "div",
-          {
-            style: {
-              padding: "8px 20px",
-              backgroundColor: "#fff3cd",
-              color: "#856404",
-              fontSize: "12px",
-              borderBottom: "1px solid #ffc107",
-              display: "flex",
-              alignItems: "center",
-              gap: "8px"
-            },
-            children: [
-              /* @__PURE__ */ jsx6("span", { children: "\u26A0\uFE0F" }),
-              /* @__PURE__ */ jsxs4("span", { children: [
-                /* @__PURE__ */ jsx6("strong", { children: "Beta:" }),
-                ' Arbetsyta \xE4r under utveckling. Ta regelbundet backup via "Spara alla ritningar".'
-              ] })
-            ]
-          }
-        ),
-        drawings.length > 3 && /* @__PURE__ */ jsx6("div", { style: { padding: "8px 20px", borderBottom: "1px solid var(--default-border-color, #e0e0e0)" }, children: /* @__PURE__ */ jsx6(
-          "input",
-          {
-            type: "text",
-            value: searchQuery,
-            onChange: (e) => setSearchQuery(e.target.value),
-            placeholder: "\u{1F50D}",
-            style: {
-              width: "100%",
-              padding: "6px 12px",
-              fontSize: "14px",
-              border: "1px solid var(--default-border-color, #e0e0e0)",
-              borderRadius: "6px",
-              outline: "none",
-              backgroundColor: "transparent",
-              color: "inherit",
-              boxSizing: "border-box"
+              ]
             }
-          }
-        ) }),
-        /* @__PURE__ */ jsxs4(
-          "div",
-          {
-            style: { flex: 1, overflow: "auto" },
-            onClick: () => setSelectedId(null),
-            onDragOver: (e) => {
-              if (!draggingDrawingId) return;
-              const el = e.currentTarget;
-              const rect = el.getBoundingClientRect();
-              const margin = 40;
-              if (e.clientY - rect.top < margin) {
-                el.scrollTop -= 8;
-              } else if (rect.bottom - e.clientY < margin) {
-                el.scrollTop += 8;
+          ),
+          /* @__PURE__ */ jsxs4(
+            "div",
+            {
+              style: {
+                padding: "8px 20px",
+                backgroundColor: "#fff3cd",
+                color: "#856404",
+                fontSize: "12px",
+                borderBottom: "1px solid #ffc107",
+                display: "flex",
+                alignItems: "center",
+                gap: "8px"
+              },
+              children: [
+                /* @__PURE__ */ jsx6("span", { children: "\u26A0\uFE0F" }),
+                /* @__PURE__ */ jsxs4("span", { children: [
+                  /* @__PURE__ */ jsx6("strong", { children: "Beta:" }),
+                  ' Arbetsyta \xE4r under utveckling. Ta regelbundet backup via "Spara alla ritningar".'
+                ] })
+              ]
+            }
+          ),
+          drawings.length > 3 && /* @__PURE__ */ jsx6("div", { style: { padding: "8px 20px", borderBottom: "1px solid var(--default-border-color, #e0e0e0)" }, children: /* @__PURE__ */ jsx6(
+            "input",
+            {
+              type: "text",
+              value: searchQuery,
+              onChange: (e) => setSearchQuery(e.target.value),
+              placeholder: "\u{1F50D}",
+              style: {
+                width: "100%",
+                padding: "6px 12px",
+                fontSize: "14px",
+                border: "1px solid var(--default-border-color, #e0e0e0)",
+                borderRadius: "6px",
+                outline: "none",
+                backgroundColor: "transparent",
+                color: "inherit",
+                boxSizing: "border-box"
               }
-            },
-            children: [
-              isRefreshing ? /* @__PURE__ */ jsx6("div", { style: { padding: "24px 20px", textAlign: "center", color: "var(--text-secondary-color, #666)" }, children: /* @__PURE__ */ jsx6("span", { style: { display: "inline-block", animation: "spin 1s linear infinite", fontSize: "24px" }, children: "\u23F3" }) }) : drawings.length > 0 || folders.length > 0 ? /* @__PURE__ */ jsxs4("div", { style: { padding: "8px 20px 0" }, onClick: () => setSelectedId(null), children: [
-                filteredFolders.map(renderFolderGroup),
-                draggingDrawingId && folders.length > 0 && /* @__PURE__ */ jsx6(
-                  "div",
-                  {
-                    onDragOver: (e) => {
-                      e.preventDefault();
-                      e.dataTransfer.dropEffect = "move";
-                      setDropTargetFolderId("__root__");
-                    },
-                    onDragLeave: () => {
-                      if (dropTargetFolderId === "__root__") setDropTargetFolderId(null);
-                    },
-                    onDrop: (e) => {
-                      e.preventDefault();
-                      if (draggingDrawingId) {
-                        handleMoveToFolder(draggingDrawingId, null);
-                        setDraggingDrawingId(null);
-                        setDropTargetFolderId(null);
-                      }
-                    },
-                    style: {
-                      padding: "8px 12px",
-                      marginBottom: "4px",
-                      borderRadius: "8px",
-                      textAlign: "center",
-                      fontSize: "12px",
-                      color: "var(--text-secondary-color, #888)",
-                      backgroundColor: dropTargetFolderId === "__root__" ? "var(--color-primary-light, rgba(108, 99, 255, 0.2))" : "transparent",
-                      border: "2px dashed var(--default-border-color, #ccc)",
-                      borderColor: dropTargetFolderId === "__root__" ? "var(--color-primary, #6c63ff)" : "var(--default-border-color, #ccc)",
-                      transition: "background-color 0.15s, border-color 0.15s"
-                    },
-                    children: t.moveToRoot
-                  }
-                ),
-                rootDrawings.map(renderDrawingRow)
-              ] }) : /* @__PURE__ */ jsxs4("div", { style: { padding: "24px 20px", textAlign: "center", color: "var(--text-secondary-color, #666)" }, children: [
-                /* @__PURE__ */ jsx6("p", { children: t.noDrawingsYet }),
-                /* @__PURE__ */ jsx6("p", { children: t.clickNewToStart })
-              ] }),
-              /* @__PURE__ */ jsx6("div", { style: sectionHeaderStyle, children: t.sectionDrawings }),
-              /* @__PURE__ */ jsxs4("div", { style: { padding: "0 20px", display: "flex", flexDirection: "column", gap: "8px" }, children: [
-                /* @__PURE__ */ jsx6(
-                  ActionButton,
-                  {
-                    icon: "\u{1F4C4}",
-                    label: t.createNewDrawing,
-                    description: t.createNewDrawingDesc,
-                    onClick: () => handleCreate()
-                  }
-                ),
-                /* @__PURE__ */ jsx6(
-                  ActionButton,
-                  {
-                    icon: "\u{1F4C2}",
-                    label: t.openFromFile,
-                    description: t.openFromFileDesc,
-                    onClick: importExcalidrawFile
-                  }
-                ),
-                creatingFolder ? /* @__PURE__ */ jsxs4("div", { style: { display: "flex", gap: "8px", alignItems: "center", padding: "4px 0" }, children: [
-                  /* @__PURE__ */ jsx6(
-                    "input",
+            }
+          ) }),
+          /* @__PURE__ */ jsxs4(
+            "div",
+            {
+              style: { flex: 1, overflow: "auto" },
+              onClick: () => setSelectedId(null),
+              onDragOver: (e) => {
+                if (!draggingDrawingId) return;
+                const el = e.currentTarget;
+                const rect = el.getBoundingClientRect();
+                const margin = 40;
+                if (e.clientY - rect.top < margin) {
+                  el.scrollTop -= 8;
+                } else if (rect.bottom - e.clientY < margin) {
+                  el.scrollTop += 8;
+                }
+              },
+              children: [
+                isRefreshing ? /* @__PURE__ */ jsx6("div", { style: { padding: "24px 20px", textAlign: "center", color: "var(--text-secondary-color, #666)" }, children: /* @__PURE__ */ jsx6("span", { style: { display: "inline-block", animation: "spin 1s linear infinite", fontSize: "24px" }, children: "\u23F3" }) }) : drawings.length > 0 || folders.length > 0 ? /* @__PURE__ */ jsxs4("div", { style: { padding: "8px 20px 0" }, onClick: () => setSelectedId(null), children: [
+                  filteredFolders.map(renderFolderGroup),
+                  draggingDrawingId && folders.length > 0 && /* @__PURE__ */ jsx6(
+                    "div",
                     {
-                      ref: newFolderInputRef,
-                      type: "text",
-                      value: newFolderName,
-                      onChange: (e) => setNewFolderName(e.target.value),
-                      onKeyDown: (e) => {
-                        if (e.key === "Enter") handleCreateFolder();
-                        if (e.key === "Escape") {
-                          setCreatingFolder(false);
-                          setNewFolderName("");
+                      onDragOver: (e) => {
+                        e.preventDefault();
+                        e.dataTransfer.dropEffect = "move";
+                        setDropTargetFolderId("__root__");
+                      },
+                      onDragLeave: () => {
+                        if (dropTargetFolderId === "__root__") setDropTargetFolderId(null);
+                      },
+                      onDrop: (e) => {
+                        e.preventDefault();
+                        if (draggingDrawingId) {
+                          handleMoveToFolder(draggingDrawingId, null);
+                          setDraggingDrawingId(null);
+                          setDropTargetFolderId(null);
                         }
                       },
-                      placeholder: t.newFolderName,
                       style: {
-                        flex: 1,
                         padding: "8px 12px",
-                        fontSize: "14px",
-                        border: "1px solid var(--color-primary, #6c63ff)",
+                        marginBottom: "4px",
                         borderRadius: "8px",
-                        outline: "none"
+                        textAlign: "center",
+                        fontSize: "12px",
+                        color: "var(--text-secondary-color, #888)",
+                        backgroundColor: dropTargetFolderId === "__root__" ? "var(--color-primary-light, rgba(108, 99, 255, 0.2))" : "transparent",
+                        border: "2px dashed var(--default-border-color, #ccc)",
+                        borderColor: dropTargetFolderId === "__root__" ? "var(--color-primary, #6c63ff)" : "var(--default-border-color, #ccc)",
+                        transition: "background-color 0.15s, border-color 0.15s"
+                      },
+                      children: t.moveToRoot
+                    }
+                  ),
+                  rootDrawings.map(renderDrawingRow)
+                ] }) : /* @__PURE__ */ jsxs4("div", { style: { padding: "24px 20px", textAlign: "center", color: "var(--text-secondary-color, #666)" }, children: [
+                  /* @__PURE__ */ jsx6("p", { children: t.noDrawingsYet }),
+                  /* @__PURE__ */ jsx6("p", { children: t.clickNewToStart })
+                ] }),
+                /* @__PURE__ */ jsx6("div", { style: sectionHeaderStyle, children: t.sectionDrawings }),
+                /* @__PURE__ */ jsxs4("div", { style: { padding: "0 20px", display: "flex", flexDirection: "column", gap: "8px" }, children: [
+                  /* @__PURE__ */ jsx6(
+                    ActionButton,
+                    {
+                      icon: "\u{1F4C4}",
+                      label: t.createNewDrawing,
+                      description: t.createNewDrawingDesc,
+                      onClick: () => handleCreate()
+                    }
+                  ),
+                  /* @__PURE__ */ jsx6(
+                    ActionButton,
+                    {
+                      icon: "\u{1F4C2}",
+                      label: t.openFromFile,
+                      description: t.openFromFileDesc,
+                      onClick: importExcalidrawFile
+                    }
+                  ),
+                  creatingFolder ? /* @__PURE__ */ jsxs4("div", { style: { display: "flex", gap: "8px", alignItems: "center", padding: "4px 0" }, children: [
+                    /* @__PURE__ */ jsx6(
+                      "input",
+                      {
+                        ref: newFolderInputRef,
+                        type: "text",
+                        value: newFolderName,
+                        onChange: (e) => setNewFolderName(e.target.value),
+                        onKeyDown: (e) => {
+                          if (e.key === "Enter") handleCreateFolder();
+                          if (e.key === "Escape") {
+                            setCreatingFolder(false);
+                            setNewFolderName("");
+                          }
+                        },
+                        placeholder: t.newFolderName,
+                        style: {
+                          flex: 1,
+                          padding: "8px 12px",
+                          fontSize: "14px",
+                          border: "1px solid var(--color-primary, #6c63ff)",
+                          borderRadius: "8px",
+                          outline: "none"
+                        }
+                      }
+                    ),
+                    /* @__PURE__ */ jsx6(
+                      "button",
+                      {
+                        onClick: handleCreateFolder,
+                        style: { padding: "8px 16px", fontSize: "14px", backgroundColor: "var(--color-primary, #6c63ff)", color: "#fff", border: "none", borderRadius: "8px", cursor: "pointer" },
+                        children: t.save
+                      }
+                    ),
+                    /* @__PURE__ */ jsx6(
+                      "button",
+                      {
+                        onClick: () => {
+                          setCreatingFolder(false);
+                          setNewFolderName("");
+                        },
+                        style: { padding: "8px 16px", fontSize: "14px", backgroundColor: "transparent", border: "1px solid var(--default-border-color, #ccc)", borderRadius: "8px", cursor: "pointer", color: "inherit" },
+                        children: t.cancel
+                      }
+                    )
+                  ] }) : /* @__PURE__ */ jsx6(
+                    ActionButton,
+                    {
+                      icon: "\u{1F4C1}",
+                      label: t.createFolder,
+                      description: "",
+                      onClick: () => setCreatingFolder(true)
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsx6("div", { style: sectionHeaderStyle, children: t.sectionWorkspace }),
+                daysSinceBackup !== null && daysSinceBackup >= 7 && /* @__PURE__ */ jsx6("div", { style: { padding: "0 20px 8px", fontSize: "12px", color: "var(--text-secondary-color, #888)" }, children: daysSinceBackup >= 30 ? `\u26A0\uFE0F ${t.backupReminder || "Ingen backup p\xE5"} ${daysSinceBackup} ${t.days || "dagar"}` : `${t.backupReminder || "Senaste backup:"} ${daysSinceBackup} ${t.days || "dagar sedan"}` }),
+                /* @__PURE__ */ jsxs4("div", { style: { padding: "0 20px 16px", display: "flex", gap: "8px" }, children: [
+                  /* @__PURE__ */ jsx6(
+                    ActionButton,
+                    {
+                      icon: "\u{1F4BE}",
+                      label: t.saveAllBackup,
+                      description: t.saveAllBackupDesc,
+                      onClick: () => {
+                        localStorage.setItem("rita-workspace-last-backup", Date.now().toString());
+                        exportWorkspace();
                       }
                     }
                   ),
                   /* @__PURE__ */ jsx6(
-                    "button",
+                    ActionButton,
                     {
-                      onClick: handleCreateFolder,
-                      style: { padding: "8px 16px", fontSize: "14px", backgroundColor: "var(--color-primary, #6c63ff)", color: "#fff", border: "none", borderRadius: "8px", cursor: "pointer" },
-                      children: t.save
+                      icon: "\u{1F4E6}",
+                      label: "Exportera alla som .excalidraw",
+                      description: "Laddar ner varje ritning som separat fil",
+                      onClick: exportAllDrawingsAsExcalidraw
                     }
                   ),
+                  /* @__PURE__ */ jsx6(
+                    ActionButton,
+                    {
+                      icon: "\u{1F4E5}",
+                      label: t.loadBackup,
+                      description: t.loadBackupDesc,
+                      onClick: importWorkspace
+                    }
+                  )
+                ] })
+              ]
+            }
+          )
+        ] }),
+        (confirmDeleteId || confirmDeleteFolderId) && (() => {
+          const isFolder = !!confirmDeleteFolderId;
+          const targetName = isFolder ? folders.find((f) => f.id === confirmDeleteFolderId)?.name : drawings.find((d) => d.id === confirmDeleteId)?.name;
+          const onConfirm = () => {
+            if (isFolder && confirmDeleteFolderId) handleDeleteFolder(confirmDeleteFolderId);
+            else if (confirmDeleteId) handleDelete(confirmDeleteId);
+          };
+          const onCancel = () => {
+            setConfirmDeleteId(null);
+            setConfirmDeleteFolderId(null);
+          };
+          return /* @__PURE__ */ jsx6(
+            "div",
+            {
+              onClick: (e) => {
+                if (e.target === e.currentTarget) onCancel();
+              },
+              onKeyDown: (e) => {
+                if (e.key === "Escape") onCancel();
+              },
+              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: 1e4
+              },
+              children: /* @__PURE__ */ jsxs4("div", { style: {
+                backgroundColor: "var(--island-bg-color, #fff)",
+                color: "var(--text-primary-color, #1b1b1f)",
+                borderRadius: "12px",
+                padding: "24px",
+                minWidth: "320px",
+                maxWidth: "420px",
+                boxShadow: "0 12px 32px rgba(0, 0, 0, 0.25)"
+              }, children: [
+                /* @__PURE__ */ jsx6("h3", { style: { margin: "0 0 12px", fontSize: "16px", fontWeight: 600 }, children: isFolder ? t.deleteFolder : t.delete }),
+                /* @__PURE__ */ jsxs4("p", { style: { margin: "0 0 20px", fontSize: "14px", lineHeight: 1.5, color: "var(--text-secondary-color, #666)" }, children: [
+                  isFolder ? t.deleteFolderConfirm : t.confirmDelete,
+                  targetName && /* @__PURE__ */ jsxs4(Fragment3, { children: [
+                    " ",
+                    /* @__PURE__ */ jsx6("strong", { style: { color: "var(--text-primary-color, #1b1b1f)" }, children: targetName }),
+                    "?"
+                  ] })
+                ] }),
+                /* @__PURE__ */ jsxs4("div", { style: { display: "flex", gap: "8px", justifyContent: "flex-end" }, children: [
                   /* @__PURE__ */ jsx6(
                     "button",
                     {
-                      onClick: () => {
-                        setCreatingFolder(false);
-                        setNewFolderName("");
+                      onClick: onCancel,
+                      autoFocus: true,
+                      style: {
+                        padding: "8px 16px",
+                        fontSize: "14px",
+                        backgroundColor: "transparent",
+                        border: "1px solid var(--default-border-color, #ccc)",
+                        borderRadius: "6px",
+                        cursor: "pointer",
+                        color: "inherit"
                       },
-                      style: { padding: "8px 16px", fontSize: "14px", backgroundColor: "transparent", border: "1px solid var(--default-border-color, #ccc)", borderRadius: "8px", cursor: "pointer", color: "inherit" },
                       children: t.cancel
                     }
-                  )
-                ] }) : /* @__PURE__ */ jsx6(
-                  ActionButton,
-                  {
-                    icon: "\u{1F4C1}",
-                    label: t.createFolder,
-                    description: "",
-                    onClick: () => setCreatingFolder(true)
-                  }
-                )
-              ] }),
-              /* @__PURE__ */ jsx6("div", { style: sectionHeaderStyle, children: t.sectionWorkspace }),
-              daysSinceBackup !== null && daysSinceBackup >= 7 && /* @__PURE__ */ jsx6("div", { style: { padding: "0 20px 8px", fontSize: "12px", color: "var(--text-secondary-color, #888)" }, children: daysSinceBackup >= 30 ? `\u26A0\uFE0F ${t.backupReminder || "Ingen backup p\xE5"} ${daysSinceBackup} ${t.days || "dagar"}` : `${t.backupReminder || "Senaste backup:"} ${daysSinceBackup} ${t.days || "dagar sedan"}` }),
-              /* @__PURE__ */ jsxs4("div", { style: { padding: "0 20px 16px", display: "flex", gap: "8px" }, children: [
-                /* @__PURE__ */ jsx6(
-                  ActionButton,
-                  {
-                    icon: "\u{1F4BE}",
-                    label: t.saveAllBackup,
-                    description: t.saveAllBackupDesc,
-                    onClick: () => {
-                      localStorage.setItem("rita-workspace-last-backup", Date.now().toString());
-                      exportWorkspace();
+                  ),
+                  /* @__PURE__ */ jsx6(
+                    "button",
+                    {
+                      onClick: onConfirm,
+                      style: {
+                        padding: "8px 16px",
+                        fontSize: "14px",
+                        backgroundColor: "#dc3545",
+                        color: "#fff",
+                        border: "none",
+                        borderRadius: "6px",
+                        cursor: "pointer"
+                      },
+                      children: t.delete
                     }
-                  }
-                ),
-                /* @__PURE__ */ jsx6(
-                  ActionButton,
-                  {
-                    icon: "\u{1F4E6}",
-                    label: "Exportera alla som .excalidraw",
-                    description: "Laddar ner varje ritning som separat fil",
-                    onClick: exportAllDrawingsAsExcalidraw
-                  }
-                ),
-                /* @__PURE__ */ jsx6(
-                  ActionButton,
-                  {
-                    icon: "\u{1F4E5}",
-                    label: t.loadBackup,
-                    description: t.loadBackupDesc,
-                    onClick: importWorkspace
-                  }
-                )
+                  )
+                ] })
               ] })
-            ]
-          }
-        )
-      ] })
+            }
+          );
+        })()
+      ]
     }
   );
 };