rita-workspace 0.5.30 → 0.5.32

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/dist/index.js +341 -284
  2. package/dist/index.mjs +341 -284
  3. package/package.json +1 -1
package/dist/index.mjs CHANGED
@@ -607,7 +607,7 @@ function WorkspaceProvider({ children, lang = "en" }) {
607
607
  useEffect(() => {
608
608
  if (!tabIdReady) return;
609
609
  const drawingId = activeDrawing?.id || null;
610
- setTabDrawing(drawingId);
610
+ if (drawingId) setTabDrawing(drawingId);
611
611
  if (hasCleanedUpRef.current) {
612
612
  if (drawingId) {
613
613
  setIsDrawingConflict(isDrawingOpenedEarlierInOtherTab(drawingId));
@@ -897,6 +897,9 @@ function WorkspaceProvider({ children, lang = "en" }) {
897
897
  try {
898
898
  const fresh = await getDrawing(activeDrawing.id);
899
899
  if (fresh && fresh.updatedAt > (activeDrawing.updatedAt ?? 0)) return;
900
+ if (Array.isArray(elements) && elements.length === 0 && fresh && Array.isArray(fresh.elements) && fresh.elements.length > 0) {
901
+ return;
902
+ }
900
903
  const updateData = {
901
904
  elements,
902
905
  appState
@@ -924,6 +927,9 @@ function WorkspaceProvider({ children, lang = "en" }) {
924
927
  const inMem = drawingsRef.current.find((d) => d.id === id);
925
928
  const fresh = await getDrawing(id);
926
929
  if (fresh && inMem && fresh.updatedAt > (inMem.updatedAt ?? 0)) return;
930
+ if (Array.isArray(elements) && elements.length === 0 && fresh && Array.isArray(fresh.elements) && fresh.elements.length > 0) {
931
+ return;
932
+ }
927
933
  const updateData = {
928
934
  elements,
929
935
  appState
@@ -1916,30 +1922,7 @@ var DrawingsDialog = ({
1916
1922
  gap: "2px",
1917
1923
  alignItems: "center",
1918
1924
  visibility: hoveredId === drawing.id || selectedId === drawing.id || activeDrawing?.id === drawing.id || confirmDeleteId === drawing.id || movingDrawingId === drawing.id || editingId === drawing.id ? "visible" : "hidden"
1919
- }, children: confirmDeleteId === drawing.id ? /* @__PURE__ */ jsxs4(Fragment3, { children: [
1920
- /* @__PURE__ */ jsx6(
1921
- "button",
1922
- {
1923
- onClick: (e) => {
1924
- e.stopPropagation();
1925
- handleDelete(drawing.id);
1926
- },
1927
- style: { padding: "4px 10px", fontSize: "12px", backgroundColor: "#dc3545", color: "#fff", border: "none", borderRadius: "4px", cursor: "pointer" },
1928
- children: t.delete
1929
- }
1930
- ),
1931
- /* @__PURE__ */ jsx6(
1932
- "button",
1933
- {
1934
- onClick: (e) => {
1935
- e.stopPropagation();
1936
- setConfirmDeleteId(null);
1937
- },
1938
- style: { padding: "4px 10px", fontSize: "12px", backgroundColor: "transparent", border: "1px solid var(--default-border-color, #ccc)", borderRadius: "4px", cursor: "pointer", color: "inherit" },
1939
- children: t.cancel
1940
- }
1941
- )
1942
- ] }) : movingDrawingId === drawing.id ? /* @__PURE__ */ jsxs4("div", { onClick: (e) => e.stopPropagation(), style: { display: "flex", flexDirection: "column", gap: "2px", fontSize: "12px" }, children: [
1925
+ }, children: movingDrawingId === drawing.id ? /* @__PURE__ */ jsxs4("div", { onClick: (e) => e.stopPropagation(), style: { display: "flex", flexDirection: "column", gap: "2px", fontSize: "12px" }, children: [
1943
1926
  /* @__PURE__ */ jsx6(
1944
1927
  "button",
1945
1928
  {
@@ -2107,24 +2090,7 @@ var DrawingsDialog = ({
2107
2090
  ")"
2108
2091
  ] })
2109
2092
  ] }) }),
2110
- confirmDeleteFolderId === folder.id ? /* @__PURE__ */ jsxs4("div", { onClick: (e) => e.stopPropagation(), style: { display: "flex", gap: "4px" }, children: [
2111
- /* @__PURE__ */ jsx6(
2112
- "button",
2113
- {
2114
- onClick: () => handleDeleteFolder(folder.id),
2115
- style: { padding: "2px 8px", fontSize: "12px", backgroundColor: "#dc3545", color: "#fff", border: "none", borderRadius: "4px", cursor: "pointer" },
2116
- children: t.delete
2117
- }
2118
- ),
2119
- /* @__PURE__ */ jsx6(
2120
- "button",
2121
- {
2122
- onClick: () => setConfirmDeleteFolderId(null),
2123
- style: { padding: "2px 8px", fontSize: "12px", backgroundColor: "transparent", border: "1px solid var(--default-border-color, #ccc)", borderRadius: "4px", cursor: "pointer", color: "inherit" },
2124
- children: t.cancel
2125
- }
2126
- )
2127
- ] }) : editingFolderId !== folder.id && /* @__PURE__ */ jsxs4("div", { onClick: (e) => e.stopPropagation(), style: { display: "flex", gap: "2px" }, children: [
2093
+ editingFolderId !== folder.id && /* @__PURE__ */ jsxs4("div", { onClick: (e) => e.stopPropagation(), style: { display: "flex", gap: "2px" }, children: [
2128
2094
  /* @__PURE__ */ jsx6(
2129
2095
  "button",
2130
2096
  {
@@ -2159,7 +2125,7 @@ var DrawingsDialog = ({
2159
2125
  folder.id
2160
2126
  );
2161
2127
  };
2162
- return /* @__PURE__ */ jsx6(
2128
+ return /* @__PURE__ */ jsxs4(
2163
2129
  "div",
2164
2130
  {
2165
2131
  className: "rita-workspace-dialog-overlay",
@@ -2178,275 +2144,366 @@ var DrawingsDialog = ({
2178
2144
  onClick: (e) => {
2179
2145
  if (e.target === e.currentTarget) onClose();
2180
2146
  },
2181
- children: /* @__PURE__ */ jsxs4("div", { ref: dialogRef, className: "rita-workspace-dialog", style: dialogStyle, children: [
2182
- /* @__PURE__ */ jsxs4(
2183
- "div",
2184
- {
2185
- onMouseDown: handleMouseDown,
2186
- style: {
2187
- padding: "16px 20px",
2188
- display: "flex",
2189
- alignItems: "center",
2190
- justifyContent: "space-between",
2191
- cursor: "grab",
2192
- userSelect: "none",
2193
- borderBottom: "1px solid var(--default-border-color, #e0e0e0)"
2194
- },
2195
- children: [
2196
- /* @__PURE__ */ jsxs4("h2", { style: { margin: 0, fontSize: "18px", fontWeight: 600, display: "flex", alignItems: "center", gap: "8px" }, children: [
2197
- t.dialogTitle,
2147
+ children: [
2148
+ /* @__PURE__ */ jsxs4("div", { ref: dialogRef, className: "rita-workspace-dialog", style: dialogStyle, children: [
2149
+ /* @__PURE__ */ jsxs4(
2150
+ "div",
2151
+ {
2152
+ onMouseDown: handleMouseDown,
2153
+ style: {
2154
+ padding: "16px 20px",
2155
+ display: "flex",
2156
+ alignItems: "center",
2157
+ justifyContent: "space-between",
2158
+ cursor: "grab",
2159
+ userSelect: "none",
2160
+ borderBottom: "1px solid var(--default-border-color, #e0e0e0)"
2161
+ },
2162
+ children: [
2163
+ /* @__PURE__ */ jsxs4("h2", { style: { margin: 0, fontSize: "18px", fontWeight: 600, display: "flex", alignItems: "center", gap: "8px" }, children: [
2164
+ t.dialogTitle,
2165
+ /* @__PURE__ */ jsx6(
2166
+ "span",
2167
+ {
2168
+ style: {
2169
+ fontSize: "10px",
2170
+ fontWeight: 700,
2171
+ letterSpacing: "0.5px",
2172
+ padding: "2px 8px",
2173
+ borderRadius: "10px",
2174
+ backgroundColor: "#fff3cd",
2175
+ color: "#856404",
2176
+ border: "1px solid #ffc107",
2177
+ textTransform: "uppercase"
2178
+ },
2179
+ title: "Beta \u2014 funktionen \xE4r under utveckling och kan \xE4ndras",
2180
+ children: "BETA"
2181
+ }
2182
+ )
2183
+ ] }),
2198
2184
  /* @__PURE__ */ jsx6(
2199
- "span",
2185
+ "button",
2200
2186
  {
2187
+ onClick: onClose,
2201
2188
  style: {
2202
- fontSize: "10px",
2203
- fontWeight: 700,
2204
- letterSpacing: "0.5px",
2205
- padding: "2px 8px",
2206
- borderRadius: "10px",
2207
- backgroundColor: "#fff3cd",
2208
- color: "#856404",
2209
- border: "1px solid #ffc107",
2210
- textTransform: "uppercase"
2189
+ background: "none",
2190
+ border: "none",
2191
+ fontSize: "24px",
2192
+ cursor: "pointer",
2193
+ padding: "4px",
2194
+ lineHeight: 1,
2195
+ color: "inherit"
2211
2196
  },
2212
- title: "Beta \u2014 funktionen \xE4r under utveckling och kan \xE4ndras",
2213
- children: "BETA"
2197
+ "aria-label": t.close,
2198
+ children: "\xD7"
2214
2199
  }
2215
2200
  )
2216
- ] }),
2217
- /* @__PURE__ */ jsx6(
2218
- "button",
2219
- {
2220
- onClick: onClose,
2221
- style: {
2222
- background: "none",
2223
- border: "none",
2224
- fontSize: "24px",
2225
- cursor: "pointer",
2226
- padding: "4px",
2227
- lineHeight: 1,
2228
- color: "inherit"
2229
- },
2230
- "aria-label": t.close,
2231
- children: "\xD7"
2232
- }
2233
- )
2234
- ]
2235
- }
2236
- ),
2237
- /* @__PURE__ */ jsxs4(
2238
- "div",
2239
- {
2240
- style: {
2241
- padding: "8px 20px",
2242
- backgroundColor: "#fff3cd",
2243
- color: "#856404",
2244
- fontSize: "12px",
2245
- borderBottom: "1px solid #ffc107",
2246
- display: "flex",
2247
- alignItems: "center",
2248
- gap: "8px"
2249
- },
2250
- children: [
2251
- /* @__PURE__ */ jsx6("span", { children: "\u26A0\uFE0F" }),
2252
- /* @__PURE__ */ jsxs4("span", { children: [
2253
- /* @__PURE__ */ jsx6("strong", { children: "Beta:" }),
2254
- ' Arbetsyta \xE4r under utveckling. Ta regelbundet backup via "Spara alla ritningar".'
2255
- ] })
2256
- ]
2257
- }
2258
- ),
2259
- drawings.length > 3 && /* @__PURE__ */ jsx6("div", { style: { padding: "8px 20px", borderBottom: "1px solid var(--default-border-color, #e0e0e0)" }, children: /* @__PURE__ */ jsx6(
2260
- "input",
2261
- {
2262
- type: "text",
2263
- value: searchQuery,
2264
- onChange: (e) => setSearchQuery(e.target.value),
2265
- placeholder: "\u{1F50D}",
2266
- style: {
2267
- width: "100%",
2268
- padding: "6px 12px",
2269
- fontSize: "14px",
2270
- border: "1px solid var(--default-border-color, #e0e0e0)",
2271
- borderRadius: "6px",
2272
- outline: "none",
2273
- backgroundColor: "transparent",
2274
- color: "inherit",
2275
- boxSizing: "border-box"
2201
+ ]
2276
2202
  }
2277
- }
2278
- ) }),
2279
- /* @__PURE__ */ jsxs4(
2280
- "div",
2281
- {
2282
- style: { flex: 1, overflow: "auto" },
2283
- onClick: () => setSelectedId(null),
2284
- onDragOver: (e) => {
2285
- if (!draggingDrawingId) return;
2286
- const el = e.currentTarget;
2287
- const rect = el.getBoundingClientRect();
2288
- const margin = 40;
2289
- if (e.clientY - rect.top < margin) {
2290
- el.scrollTop -= 8;
2291
- } else if (rect.bottom - e.clientY < margin) {
2292
- el.scrollTop += 8;
2203
+ ),
2204
+ /* @__PURE__ */ jsxs4(
2205
+ "div",
2206
+ {
2207
+ style: {
2208
+ padding: "8px 20px",
2209
+ backgroundColor: "#fff3cd",
2210
+ color: "#856404",
2211
+ fontSize: "12px",
2212
+ borderBottom: "1px solid #ffc107",
2213
+ display: "flex",
2214
+ alignItems: "center",
2215
+ gap: "8px"
2216
+ },
2217
+ children: [
2218
+ /* @__PURE__ */ jsx6("span", { children: "\u26A0\uFE0F" }),
2219
+ /* @__PURE__ */ jsxs4("span", { children: [
2220
+ /* @__PURE__ */ jsx6("strong", { children: "Beta:" }),
2221
+ ' Arbetsyta \xE4r under utveckling. Ta regelbundet backup via "Spara alla ritningar".'
2222
+ ] })
2223
+ ]
2224
+ }
2225
+ ),
2226
+ drawings.length > 3 && /* @__PURE__ */ jsx6("div", { style: { padding: "8px 20px", borderBottom: "1px solid var(--default-border-color, #e0e0e0)" }, children: /* @__PURE__ */ jsx6(
2227
+ "input",
2228
+ {
2229
+ type: "text",
2230
+ value: searchQuery,
2231
+ onChange: (e) => setSearchQuery(e.target.value),
2232
+ placeholder: "\u{1F50D}",
2233
+ style: {
2234
+ width: "100%",
2235
+ padding: "6px 12px",
2236
+ fontSize: "14px",
2237
+ border: "1px solid var(--default-border-color, #e0e0e0)",
2238
+ borderRadius: "6px",
2239
+ outline: "none",
2240
+ backgroundColor: "transparent",
2241
+ color: "inherit",
2242
+ boxSizing: "border-box"
2293
2243
  }
2294
- },
2295
- children: [
2296
- 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: [
2297
- filteredFolders.map(renderFolderGroup),
2298
- draggingDrawingId && folders.length > 0 && /* @__PURE__ */ jsx6(
2299
- "div",
2300
- {
2301
- onDragOver: (e) => {
2302
- e.preventDefault();
2303
- e.dataTransfer.dropEffect = "move";
2304
- setDropTargetFolderId("__root__");
2305
- },
2306
- onDragLeave: () => {
2307
- if (dropTargetFolderId === "__root__") setDropTargetFolderId(null);
2308
- },
2309
- onDrop: (e) => {
2310
- e.preventDefault();
2311
- if (draggingDrawingId) {
2312
- handleMoveToFolder(draggingDrawingId, null);
2313
- setDraggingDrawingId(null);
2314
- setDropTargetFolderId(null);
2315
- }
2316
- },
2317
- style: {
2318
- padding: "8px 12px",
2319
- marginBottom: "4px",
2320
- borderRadius: "8px",
2321
- textAlign: "center",
2322
- fontSize: "12px",
2323
- color: "var(--text-secondary-color, #888)",
2324
- backgroundColor: dropTargetFolderId === "__root__" ? "var(--color-primary-light, rgba(108, 99, 255, 0.2))" : "transparent",
2325
- border: "2px dashed var(--default-border-color, #ccc)",
2326
- borderColor: dropTargetFolderId === "__root__" ? "var(--color-primary, #6c63ff)" : "var(--default-border-color, #ccc)",
2327
- transition: "background-color 0.15s, border-color 0.15s"
2328
- },
2329
- children: t.moveToRoot
2330
- }
2331
- ),
2332
- rootDrawings.map(renderDrawingRow)
2333
- ] }) : /* @__PURE__ */ jsxs4("div", { style: { padding: "24px 20px", textAlign: "center", color: "var(--text-secondary-color, #666)" }, children: [
2334
- /* @__PURE__ */ jsx6("p", { children: t.noDrawingsYet }),
2335
- /* @__PURE__ */ jsx6("p", { children: t.clickNewToStart })
2336
- ] }),
2337
- /* @__PURE__ */ jsx6("div", { style: sectionHeaderStyle, children: t.sectionDrawings }),
2338
- /* @__PURE__ */ jsxs4("div", { style: { padding: "0 20px", display: "flex", flexDirection: "column", gap: "8px" }, children: [
2339
- /* @__PURE__ */ jsx6(
2340
- ActionButton,
2341
- {
2342
- icon: "\u{1F4C4}",
2343
- label: t.createNewDrawing,
2344
- description: t.createNewDrawingDesc,
2345
- onClick: () => handleCreate()
2346
- }
2347
- ),
2348
- /* @__PURE__ */ jsx6(
2349
- ActionButton,
2350
- {
2351
- icon: "\u{1F4C2}",
2352
- label: t.openFromFile,
2353
- description: t.openFromFileDesc,
2354
- onClick: importExcalidrawFile
2355
- }
2356
- ),
2357
- creatingFolder ? /* @__PURE__ */ jsxs4("div", { style: { display: "flex", gap: "8px", alignItems: "center", padding: "4px 0" }, children: [
2358
- /* @__PURE__ */ jsx6(
2359
- "input",
2244
+ }
2245
+ ) }),
2246
+ /* @__PURE__ */ jsxs4(
2247
+ "div",
2248
+ {
2249
+ style: { flex: 1, overflow: "auto" },
2250
+ onClick: () => setSelectedId(null),
2251
+ onDragOver: (e) => {
2252
+ if (!draggingDrawingId) return;
2253
+ const el = e.currentTarget;
2254
+ const rect = el.getBoundingClientRect();
2255
+ const margin = 40;
2256
+ if (e.clientY - rect.top < margin) {
2257
+ el.scrollTop -= 8;
2258
+ } else if (rect.bottom - e.clientY < margin) {
2259
+ el.scrollTop += 8;
2260
+ }
2261
+ },
2262
+ children: [
2263
+ 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: [
2264
+ filteredFolders.map(renderFolderGroup),
2265
+ draggingDrawingId && folders.length > 0 && /* @__PURE__ */ jsx6(
2266
+ "div",
2360
2267
  {
2361
- ref: newFolderInputRef,
2362
- type: "text",
2363
- value: newFolderName,
2364
- onChange: (e) => setNewFolderName(e.target.value),
2365
- onKeyDown: (e) => {
2366
- if (e.key === "Enter") handleCreateFolder();
2367
- if (e.key === "Escape") {
2368
- setCreatingFolder(false);
2369
- setNewFolderName("");
2268
+ onDragOver: (e) => {
2269
+ e.preventDefault();
2270
+ e.dataTransfer.dropEffect = "move";
2271
+ setDropTargetFolderId("__root__");
2272
+ },
2273
+ onDragLeave: () => {
2274
+ if (dropTargetFolderId === "__root__") setDropTargetFolderId(null);
2275
+ },
2276
+ onDrop: (e) => {
2277
+ e.preventDefault();
2278
+ if (draggingDrawingId) {
2279
+ handleMoveToFolder(draggingDrawingId, null);
2280
+ setDraggingDrawingId(null);
2281
+ setDropTargetFolderId(null);
2370
2282
  }
2371
2283
  },
2372
- placeholder: t.newFolderName,
2373
2284
  style: {
2374
- flex: 1,
2375
2285
  padding: "8px 12px",
2376
- fontSize: "14px",
2377
- border: "1px solid var(--color-primary, #6c63ff)",
2286
+ marginBottom: "4px",
2378
2287
  borderRadius: "8px",
2379
- outline: "none"
2288
+ textAlign: "center",
2289
+ fontSize: "12px",
2290
+ color: "var(--text-secondary-color, #888)",
2291
+ backgroundColor: dropTargetFolderId === "__root__" ? "var(--color-primary-light, rgba(108, 99, 255, 0.2))" : "transparent",
2292
+ border: "2px dashed var(--default-border-color, #ccc)",
2293
+ borderColor: dropTargetFolderId === "__root__" ? "var(--color-primary, #6c63ff)" : "var(--default-border-color, #ccc)",
2294
+ transition: "background-color 0.15s, border-color 0.15s"
2295
+ },
2296
+ children: t.moveToRoot
2297
+ }
2298
+ ),
2299
+ rootDrawings.map(renderDrawingRow)
2300
+ ] }) : /* @__PURE__ */ jsxs4("div", { style: { padding: "24px 20px", textAlign: "center", color: "var(--text-secondary-color, #666)" }, children: [
2301
+ /* @__PURE__ */ jsx6("p", { children: t.noDrawingsYet }),
2302
+ /* @__PURE__ */ jsx6("p", { children: t.clickNewToStart })
2303
+ ] }),
2304
+ /* @__PURE__ */ jsx6("div", { style: sectionHeaderStyle, children: t.sectionDrawings }),
2305
+ /* @__PURE__ */ jsxs4("div", { style: { padding: "0 20px", display: "flex", flexDirection: "column", gap: "8px" }, children: [
2306
+ /* @__PURE__ */ jsx6(
2307
+ ActionButton,
2308
+ {
2309
+ icon: "\u{1F4C4}",
2310
+ label: t.createNewDrawing,
2311
+ description: t.createNewDrawingDesc,
2312
+ onClick: () => handleCreate()
2313
+ }
2314
+ ),
2315
+ /* @__PURE__ */ jsx6(
2316
+ ActionButton,
2317
+ {
2318
+ icon: "\u{1F4C2}",
2319
+ label: t.openFromFile,
2320
+ description: t.openFromFileDesc,
2321
+ onClick: importExcalidrawFile
2322
+ }
2323
+ ),
2324
+ creatingFolder ? /* @__PURE__ */ jsxs4("div", { style: { display: "flex", gap: "8px", alignItems: "center", padding: "4px 0" }, children: [
2325
+ /* @__PURE__ */ jsx6(
2326
+ "input",
2327
+ {
2328
+ ref: newFolderInputRef,
2329
+ type: "text",
2330
+ value: newFolderName,
2331
+ onChange: (e) => setNewFolderName(e.target.value),
2332
+ onKeyDown: (e) => {
2333
+ if (e.key === "Enter") handleCreateFolder();
2334
+ if (e.key === "Escape") {
2335
+ setCreatingFolder(false);
2336
+ setNewFolderName("");
2337
+ }
2338
+ },
2339
+ placeholder: t.newFolderName,
2340
+ style: {
2341
+ flex: 1,
2342
+ padding: "8px 12px",
2343
+ fontSize: "14px",
2344
+ border: "1px solid var(--color-primary, #6c63ff)",
2345
+ borderRadius: "8px",
2346
+ outline: "none"
2347
+ }
2348
+ }
2349
+ ),
2350
+ /* @__PURE__ */ jsx6(
2351
+ "button",
2352
+ {
2353
+ onClick: handleCreateFolder,
2354
+ style: { padding: "8px 16px", fontSize: "14px", backgroundColor: "var(--color-primary, #6c63ff)", color: "#fff", border: "none", borderRadius: "8px", cursor: "pointer" },
2355
+ children: t.save
2356
+ }
2357
+ ),
2358
+ /* @__PURE__ */ jsx6(
2359
+ "button",
2360
+ {
2361
+ onClick: () => {
2362
+ setCreatingFolder(false);
2363
+ setNewFolderName("");
2364
+ },
2365
+ style: { padding: "8px 16px", fontSize: "14px", backgroundColor: "transparent", border: "1px solid var(--default-border-color, #ccc)", borderRadius: "8px", cursor: "pointer", color: "inherit" },
2366
+ children: t.cancel
2367
+ }
2368
+ )
2369
+ ] }) : /* @__PURE__ */ jsx6(
2370
+ ActionButton,
2371
+ {
2372
+ icon: "\u{1F4C1}",
2373
+ label: t.createFolder,
2374
+ description: "",
2375
+ onClick: () => setCreatingFolder(true)
2376
+ }
2377
+ )
2378
+ ] }),
2379
+ /* @__PURE__ */ jsx6("div", { style: sectionHeaderStyle, children: t.sectionWorkspace }),
2380
+ 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"}` }),
2381
+ /* @__PURE__ */ jsxs4("div", { style: { padding: "0 20px 16px", display: "flex", gap: "8px" }, children: [
2382
+ /* @__PURE__ */ jsx6(
2383
+ ActionButton,
2384
+ {
2385
+ icon: "\u{1F4BE}",
2386
+ label: t.saveAllBackup,
2387
+ description: t.saveAllBackupDesc,
2388
+ onClick: () => {
2389
+ localStorage.setItem("rita-workspace-last-backup", Date.now().toString());
2390
+ exportWorkspace();
2380
2391
  }
2381
2392
  }
2382
2393
  ),
2383
2394
  /* @__PURE__ */ jsx6(
2384
- "button",
2395
+ ActionButton,
2385
2396
  {
2386
- onClick: handleCreateFolder,
2387
- style: { padding: "8px 16px", fontSize: "14px", backgroundColor: "var(--color-primary, #6c63ff)", color: "#fff", border: "none", borderRadius: "8px", cursor: "pointer" },
2388
- children: t.save
2397
+ icon: "\u{1F4E6}",
2398
+ label: "Exportera alla som .excalidraw",
2399
+ description: "Laddar ner varje ritning som separat fil",
2400
+ onClick: exportAllDrawingsAsExcalidraw
2389
2401
  }
2390
2402
  ),
2403
+ /* @__PURE__ */ jsx6(
2404
+ ActionButton,
2405
+ {
2406
+ icon: "\u{1F4E5}",
2407
+ label: t.loadBackup,
2408
+ description: t.loadBackupDesc,
2409
+ onClick: importWorkspace
2410
+ }
2411
+ )
2412
+ ] })
2413
+ ]
2414
+ }
2415
+ )
2416
+ ] }),
2417
+ (confirmDeleteId || confirmDeleteFolderId) && (() => {
2418
+ const isFolder = !!confirmDeleteFolderId;
2419
+ const targetName = isFolder ? folders.find((f) => f.id === confirmDeleteFolderId)?.name : drawings.find((d) => d.id === confirmDeleteId)?.name;
2420
+ const onConfirm = () => {
2421
+ if (isFolder && confirmDeleteFolderId) handleDeleteFolder(confirmDeleteFolderId);
2422
+ else if (confirmDeleteId) handleDelete(confirmDeleteId);
2423
+ };
2424
+ const onCancel = () => {
2425
+ setConfirmDeleteId(null);
2426
+ setConfirmDeleteFolderId(null);
2427
+ };
2428
+ return /* @__PURE__ */ jsx6(
2429
+ "div",
2430
+ {
2431
+ onClick: (e) => {
2432
+ if (e.target === e.currentTarget) onCancel();
2433
+ },
2434
+ onKeyDown: (e) => {
2435
+ if (e.key === "Escape") onCancel();
2436
+ },
2437
+ style: {
2438
+ position: "fixed",
2439
+ top: 0,
2440
+ left: 0,
2441
+ right: 0,
2442
+ bottom: 0,
2443
+ backgroundColor: "rgba(0, 0, 0, 0.5)",
2444
+ display: "flex",
2445
+ alignItems: "center",
2446
+ justifyContent: "center",
2447
+ zIndex: 1e4
2448
+ },
2449
+ children: /* @__PURE__ */ jsxs4("div", { style: {
2450
+ backgroundColor: "var(--island-bg-color, #fff)",
2451
+ color: "var(--text-primary-color, #1b1b1f)",
2452
+ borderRadius: "12px",
2453
+ padding: "24px",
2454
+ minWidth: "320px",
2455
+ maxWidth: "420px",
2456
+ boxShadow: "0 12px 32px rgba(0, 0, 0, 0.25)"
2457
+ }, children: [
2458
+ /* @__PURE__ */ jsx6("h3", { style: { margin: "0 0 12px", fontSize: "16px", fontWeight: 600 }, children: isFolder ? t.deleteFolder : t.delete }),
2459
+ /* @__PURE__ */ jsxs4("p", { style: { margin: "0 0 20px", fontSize: "14px", lineHeight: 1.5, color: "var(--text-secondary-color, #666)" }, children: [
2460
+ isFolder ? t.deleteFolderConfirm : t.confirmDelete,
2461
+ targetName && /* @__PURE__ */ jsxs4(Fragment3, { children: [
2462
+ " ",
2463
+ /* @__PURE__ */ jsx6("strong", { style: { color: "var(--text-primary-color, #1b1b1f)" }, children: targetName }),
2464
+ "?"
2465
+ ] })
2466
+ ] }),
2467
+ /* @__PURE__ */ jsxs4("div", { style: { display: "flex", gap: "8px", justifyContent: "flex-end" }, children: [
2391
2468
  /* @__PURE__ */ jsx6(
2392
2469
  "button",
2393
2470
  {
2394
- onClick: () => {
2395
- setCreatingFolder(false);
2396
- setNewFolderName("");
2471
+ onClick: onCancel,
2472
+ autoFocus: true,
2473
+ style: {
2474
+ padding: "8px 16px",
2475
+ fontSize: "14px",
2476
+ backgroundColor: "transparent",
2477
+ border: "1px solid var(--default-border-color, #ccc)",
2478
+ borderRadius: "6px",
2479
+ cursor: "pointer",
2480
+ color: "inherit"
2397
2481
  },
2398
- style: { padding: "8px 16px", fontSize: "14px", backgroundColor: "transparent", border: "1px solid var(--default-border-color, #ccc)", borderRadius: "8px", cursor: "pointer", color: "inherit" },
2399
2482
  children: t.cancel
2400
2483
  }
2401
- )
2402
- ] }) : /* @__PURE__ */ jsx6(
2403
- ActionButton,
2404
- {
2405
- icon: "\u{1F4C1}",
2406
- label: t.createFolder,
2407
- description: "",
2408
- onClick: () => setCreatingFolder(true)
2409
- }
2410
- )
2411
- ] }),
2412
- /* @__PURE__ */ jsx6("div", { style: sectionHeaderStyle, children: t.sectionWorkspace }),
2413
- 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"}` }),
2414
- /* @__PURE__ */ jsxs4("div", { style: { padding: "0 20px 16px", display: "flex", gap: "8px" }, children: [
2415
- /* @__PURE__ */ jsx6(
2416
- ActionButton,
2417
- {
2418
- icon: "\u{1F4BE}",
2419
- label: t.saveAllBackup,
2420
- description: t.saveAllBackupDesc,
2421
- onClick: () => {
2422
- localStorage.setItem("rita-workspace-last-backup", Date.now().toString());
2423
- exportWorkspace();
2484
+ ),
2485
+ /* @__PURE__ */ jsx6(
2486
+ "button",
2487
+ {
2488
+ onClick: onConfirm,
2489
+ style: {
2490
+ padding: "8px 16px",
2491
+ fontSize: "14px",
2492
+ backgroundColor: "#dc3545",
2493
+ color: "#fff",
2494
+ border: "none",
2495
+ borderRadius: "6px",
2496
+ cursor: "pointer"
2497
+ },
2498
+ children: t.delete
2424
2499
  }
2425
- }
2426
- ),
2427
- /* @__PURE__ */ jsx6(
2428
- ActionButton,
2429
- {
2430
- icon: "\u{1F4E6}",
2431
- label: "Exportera alla som .excalidraw",
2432
- description: "Laddar ner varje ritning som separat fil",
2433
- onClick: exportAllDrawingsAsExcalidraw
2434
- }
2435
- ),
2436
- /* @__PURE__ */ jsx6(
2437
- ActionButton,
2438
- {
2439
- icon: "\u{1F4E5}",
2440
- label: t.loadBackup,
2441
- description: t.loadBackupDesc,
2442
- onClick: importWorkspace
2443
- }
2444
- )
2500
+ )
2501
+ ] })
2445
2502
  ] })
2446
- ]
2447
- }
2448
- )
2449
- ] })
2503
+ }
2504
+ );
2505
+ })()
2506
+ ]
2450
2507
  }
2451
2508
  );
2452
2509
  };