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.js CHANGED
@@ -678,7 +678,7 @@ function WorkspaceProvider({ children, lang = "en" }) {
678
678
  (0, import_react.useEffect)(() => {
679
679
  if (!tabIdReady) return;
680
680
  const drawingId = activeDrawing?.id || null;
681
- setTabDrawing(drawingId);
681
+ if (drawingId) setTabDrawing(drawingId);
682
682
  if (hasCleanedUpRef.current) {
683
683
  if (drawingId) {
684
684
  setIsDrawingConflict(isDrawingOpenedEarlierInOtherTab(drawingId));
@@ -968,6 +968,9 @@ function WorkspaceProvider({ children, lang = "en" }) {
968
968
  try {
969
969
  const fresh = await getDrawing(activeDrawing.id);
970
970
  if (fresh && fresh.updatedAt > (activeDrawing.updatedAt ?? 0)) return;
971
+ if (Array.isArray(elements) && elements.length === 0 && fresh && Array.isArray(fresh.elements) && fresh.elements.length > 0) {
972
+ return;
973
+ }
971
974
  const updateData = {
972
975
  elements,
973
976
  appState
@@ -995,6 +998,9 @@ function WorkspaceProvider({ children, lang = "en" }) {
995
998
  const inMem = drawingsRef.current.find((d) => d.id === id);
996
999
  const fresh = await getDrawing(id);
997
1000
  if (fresh && inMem && fresh.updatedAt > (inMem.updatedAt ?? 0)) return;
1001
+ if (Array.isArray(elements) && elements.length === 0 && fresh && Array.isArray(fresh.elements) && fresh.elements.length > 0) {
1002
+ return;
1003
+ }
998
1004
  const updateData = {
999
1005
  elements,
1000
1006
  appState
@@ -1987,30 +1993,7 @@ var DrawingsDialog = ({
1987
1993
  gap: "2px",
1988
1994
  alignItems: "center",
1989
1995
  visibility: hoveredId === drawing.id || selectedId === drawing.id || activeDrawing?.id === drawing.id || confirmDeleteId === drawing.id || movingDrawingId === drawing.id || editingId === drawing.id ? "visible" : "hidden"
1990
- }, children: confirmDeleteId === drawing.id ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
1991
- /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
1992
- "button",
1993
- {
1994
- onClick: (e) => {
1995
- e.stopPropagation();
1996
- handleDelete(drawing.id);
1997
- },
1998
- style: { padding: "4px 10px", fontSize: "12px", backgroundColor: "#dc3545", color: "#fff", border: "none", borderRadius: "4px", cursor: "pointer" },
1999
- children: t.delete
2000
- }
2001
- ),
2002
- /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
2003
- "button",
2004
- {
2005
- onClick: (e) => {
2006
- e.stopPropagation();
2007
- setConfirmDeleteId(null);
2008
- },
2009
- style: { padding: "4px 10px", fontSize: "12px", backgroundColor: "transparent", border: "1px solid var(--default-border-color, #ccc)", borderRadius: "4px", cursor: "pointer", color: "inherit" },
2010
- children: t.cancel
2011
- }
2012
- )
2013
- ] }) : movingDrawingId === drawing.id ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { onClick: (e) => e.stopPropagation(), style: { display: "flex", flexDirection: "column", gap: "2px", fontSize: "12px" }, children: [
1996
+ }, children: movingDrawingId === drawing.id ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { onClick: (e) => e.stopPropagation(), style: { display: "flex", flexDirection: "column", gap: "2px", fontSize: "12px" }, children: [
2014
1997
  /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
2015
1998
  "button",
2016
1999
  {
@@ -2178,24 +2161,7 @@ var DrawingsDialog = ({
2178
2161
  ")"
2179
2162
  ] })
2180
2163
  ] }) }),
2181
- confirmDeleteFolderId === folder.id ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { onClick: (e) => e.stopPropagation(), style: { display: "flex", gap: "4px" }, children: [
2182
- /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
2183
- "button",
2184
- {
2185
- onClick: () => handleDeleteFolder(folder.id),
2186
- style: { padding: "2px 8px", fontSize: "12px", backgroundColor: "#dc3545", color: "#fff", border: "none", borderRadius: "4px", cursor: "pointer" },
2187
- children: t.delete
2188
- }
2189
- ),
2190
- /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
2191
- "button",
2192
- {
2193
- onClick: () => setConfirmDeleteFolderId(null),
2194
- style: { padding: "2px 8px", fontSize: "12px", backgroundColor: "transparent", border: "1px solid var(--default-border-color, #ccc)", borderRadius: "4px", cursor: "pointer", color: "inherit" },
2195
- children: t.cancel
2196
- }
2197
- )
2198
- ] }) : editingFolderId !== folder.id && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { onClick: (e) => e.stopPropagation(), style: { display: "flex", gap: "2px" }, children: [
2164
+ editingFolderId !== folder.id && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { onClick: (e) => e.stopPropagation(), style: { display: "flex", gap: "2px" }, children: [
2199
2165
  /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
2200
2166
  "button",
2201
2167
  {
@@ -2230,7 +2196,7 @@ var DrawingsDialog = ({
2230
2196
  folder.id
2231
2197
  );
2232
2198
  };
2233
- return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
2199
+ return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
2234
2200
  "div",
2235
2201
  {
2236
2202
  className: "rita-workspace-dialog-overlay",
@@ -2249,275 +2215,366 @@ var DrawingsDialog = ({
2249
2215
  onClick: (e) => {
2250
2216
  if (e.target === e.currentTarget) onClose();
2251
2217
  },
2252
- children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { ref: dialogRef, className: "rita-workspace-dialog", style: dialogStyle, children: [
2253
- /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
2254
- "div",
2255
- {
2256
- onMouseDown: handleMouseDown,
2257
- style: {
2258
- padding: "16px 20px",
2259
- display: "flex",
2260
- alignItems: "center",
2261
- justifyContent: "space-between",
2262
- cursor: "grab",
2263
- userSelect: "none",
2264
- borderBottom: "1px solid var(--default-border-color, #e0e0e0)"
2265
- },
2266
- children: [
2267
- /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("h2", { style: { margin: 0, fontSize: "18px", fontWeight: 600, display: "flex", alignItems: "center", gap: "8px" }, children: [
2268
- t.dialogTitle,
2218
+ children: [
2219
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { ref: dialogRef, className: "rita-workspace-dialog", style: dialogStyle, children: [
2220
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
2221
+ "div",
2222
+ {
2223
+ onMouseDown: handleMouseDown,
2224
+ style: {
2225
+ padding: "16px 20px",
2226
+ display: "flex",
2227
+ alignItems: "center",
2228
+ justifyContent: "space-between",
2229
+ cursor: "grab",
2230
+ userSelect: "none",
2231
+ borderBottom: "1px solid var(--default-border-color, #e0e0e0)"
2232
+ },
2233
+ children: [
2234
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("h2", { style: { margin: 0, fontSize: "18px", fontWeight: 600, display: "flex", alignItems: "center", gap: "8px" }, children: [
2235
+ t.dialogTitle,
2236
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
2237
+ "span",
2238
+ {
2239
+ style: {
2240
+ fontSize: "10px",
2241
+ fontWeight: 700,
2242
+ letterSpacing: "0.5px",
2243
+ padding: "2px 8px",
2244
+ borderRadius: "10px",
2245
+ backgroundColor: "#fff3cd",
2246
+ color: "#856404",
2247
+ border: "1px solid #ffc107",
2248
+ textTransform: "uppercase"
2249
+ },
2250
+ title: "Beta \u2014 funktionen \xE4r under utveckling och kan \xE4ndras",
2251
+ children: "BETA"
2252
+ }
2253
+ )
2254
+ ] }),
2269
2255
  /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
2270
- "span",
2256
+ "button",
2271
2257
  {
2258
+ onClick: onClose,
2272
2259
  style: {
2273
- fontSize: "10px",
2274
- fontWeight: 700,
2275
- letterSpacing: "0.5px",
2276
- padding: "2px 8px",
2277
- borderRadius: "10px",
2278
- backgroundColor: "#fff3cd",
2279
- color: "#856404",
2280
- border: "1px solid #ffc107",
2281
- textTransform: "uppercase"
2260
+ background: "none",
2261
+ border: "none",
2262
+ fontSize: "24px",
2263
+ cursor: "pointer",
2264
+ padding: "4px",
2265
+ lineHeight: 1,
2266
+ color: "inherit"
2282
2267
  },
2283
- title: "Beta \u2014 funktionen \xE4r under utveckling och kan \xE4ndras",
2284
- children: "BETA"
2268
+ "aria-label": t.close,
2269
+ children: "\xD7"
2285
2270
  }
2286
2271
  )
2287
- ] }),
2288
- /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
2289
- "button",
2290
- {
2291
- onClick: onClose,
2292
- style: {
2293
- background: "none",
2294
- border: "none",
2295
- fontSize: "24px",
2296
- cursor: "pointer",
2297
- padding: "4px",
2298
- lineHeight: 1,
2299
- color: "inherit"
2300
- },
2301
- "aria-label": t.close,
2302
- children: "\xD7"
2303
- }
2304
- )
2305
- ]
2306
- }
2307
- ),
2308
- /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
2309
- "div",
2310
- {
2311
- style: {
2312
- padding: "8px 20px",
2313
- backgroundColor: "#fff3cd",
2314
- color: "#856404",
2315
- fontSize: "12px",
2316
- borderBottom: "1px solid #ffc107",
2317
- display: "flex",
2318
- alignItems: "center",
2319
- gap: "8px"
2320
- },
2321
- children: [
2322
- /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { children: "\u26A0\uFE0F" }),
2323
- /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { children: [
2324
- /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("strong", { children: "Beta:" }),
2325
- ' Arbetsyta \xE4r under utveckling. Ta regelbundet backup via "Spara alla ritningar".'
2326
- ] })
2327
- ]
2328
- }
2329
- ),
2330
- drawings.length > 3 && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: { padding: "8px 20px", borderBottom: "1px solid var(--default-border-color, #e0e0e0)" }, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
2331
- "input",
2332
- {
2333
- type: "text",
2334
- value: searchQuery,
2335
- onChange: (e) => setSearchQuery(e.target.value),
2336
- placeholder: "\u{1F50D}",
2337
- style: {
2338
- width: "100%",
2339
- padding: "6px 12px",
2340
- fontSize: "14px",
2341
- border: "1px solid var(--default-border-color, #e0e0e0)",
2342
- borderRadius: "6px",
2343
- outline: "none",
2344
- backgroundColor: "transparent",
2345
- color: "inherit",
2346
- boxSizing: "border-box"
2272
+ ]
2347
2273
  }
2348
- }
2349
- ) }),
2350
- /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
2351
- "div",
2352
- {
2353
- style: { flex: 1, overflow: "auto" },
2354
- onClick: () => setSelectedId(null),
2355
- onDragOver: (e) => {
2356
- if (!draggingDrawingId) return;
2357
- const el = e.currentTarget;
2358
- const rect = el.getBoundingClientRect();
2359
- const margin = 40;
2360
- if (e.clientY - rect.top < margin) {
2361
- el.scrollTop -= 8;
2362
- } else if (rect.bottom - e.clientY < margin) {
2363
- el.scrollTop += 8;
2274
+ ),
2275
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
2276
+ "div",
2277
+ {
2278
+ style: {
2279
+ padding: "8px 20px",
2280
+ backgroundColor: "#fff3cd",
2281
+ color: "#856404",
2282
+ fontSize: "12px",
2283
+ borderBottom: "1px solid #ffc107",
2284
+ display: "flex",
2285
+ alignItems: "center",
2286
+ gap: "8px"
2287
+ },
2288
+ children: [
2289
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { children: "\u26A0\uFE0F" }),
2290
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { children: [
2291
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("strong", { children: "Beta:" }),
2292
+ ' Arbetsyta \xE4r under utveckling. Ta regelbundet backup via "Spara alla ritningar".'
2293
+ ] })
2294
+ ]
2295
+ }
2296
+ ),
2297
+ drawings.length > 3 && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: { padding: "8px 20px", borderBottom: "1px solid var(--default-border-color, #e0e0e0)" }, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
2298
+ "input",
2299
+ {
2300
+ type: "text",
2301
+ value: searchQuery,
2302
+ onChange: (e) => setSearchQuery(e.target.value),
2303
+ placeholder: "\u{1F50D}",
2304
+ style: {
2305
+ width: "100%",
2306
+ padding: "6px 12px",
2307
+ fontSize: "14px",
2308
+ border: "1px solid var(--default-border-color, #e0e0e0)",
2309
+ borderRadius: "6px",
2310
+ outline: "none",
2311
+ backgroundColor: "transparent",
2312
+ color: "inherit",
2313
+ boxSizing: "border-box"
2364
2314
  }
2365
- },
2366
- children: [
2367
- isRefreshing ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: { padding: "24px 20px", textAlign: "center", color: "var(--text-secondary-color, #666)" }, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { style: { display: "inline-block", animation: "spin 1s linear infinite", fontSize: "24px" }, children: "\u23F3" }) }) : drawings.length > 0 || folders.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: { padding: "8px 20px 0" }, onClick: () => setSelectedId(null), children: [
2368
- filteredFolders.map(renderFolderGroup),
2369
- draggingDrawingId && folders.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
2370
- "div",
2371
- {
2372
- onDragOver: (e) => {
2373
- e.preventDefault();
2374
- e.dataTransfer.dropEffect = "move";
2375
- setDropTargetFolderId("__root__");
2376
- },
2377
- onDragLeave: () => {
2378
- if (dropTargetFolderId === "__root__") setDropTargetFolderId(null);
2379
- },
2380
- onDrop: (e) => {
2381
- e.preventDefault();
2382
- if (draggingDrawingId) {
2383
- handleMoveToFolder(draggingDrawingId, null);
2384
- setDraggingDrawingId(null);
2385
- setDropTargetFolderId(null);
2386
- }
2387
- },
2388
- style: {
2389
- padding: "8px 12px",
2390
- marginBottom: "4px",
2391
- borderRadius: "8px",
2392
- textAlign: "center",
2393
- fontSize: "12px",
2394
- color: "var(--text-secondary-color, #888)",
2395
- backgroundColor: dropTargetFolderId === "__root__" ? "var(--color-primary-light, rgba(108, 99, 255, 0.2))" : "transparent",
2396
- border: "2px dashed var(--default-border-color, #ccc)",
2397
- borderColor: dropTargetFolderId === "__root__" ? "var(--color-primary, #6c63ff)" : "var(--default-border-color, #ccc)",
2398
- transition: "background-color 0.15s, border-color 0.15s"
2399
- },
2400
- children: t.moveToRoot
2401
- }
2402
- ),
2403
- rootDrawings.map(renderDrawingRow)
2404
- ] }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: { padding: "24px 20px", textAlign: "center", color: "var(--text-secondary-color, #666)" }, children: [
2405
- /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { children: t.noDrawingsYet }),
2406
- /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { children: t.clickNewToStart })
2407
- ] }),
2408
- /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: sectionHeaderStyle, children: t.sectionDrawings }),
2409
- /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: { padding: "0 20px", display: "flex", flexDirection: "column", gap: "8px" }, children: [
2410
- /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
2411
- ActionButton,
2412
- {
2413
- icon: "\u{1F4C4}",
2414
- label: t.createNewDrawing,
2415
- description: t.createNewDrawingDesc,
2416
- onClick: () => handleCreate()
2417
- }
2418
- ),
2419
- /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
2420
- ActionButton,
2421
- {
2422
- icon: "\u{1F4C2}",
2423
- label: t.openFromFile,
2424
- description: t.openFromFileDesc,
2425
- onClick: importExcalidrawFile
2426
- }
2427
- ),
2428
- creatingFolder ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: { display: "flex", gap: "8px", alignItems: "center", padding: "4px 0" }, children: [
2429
- /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
2430
- "input",
2315
+ }
2316
+ ) }),
2317
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
2318
+ "div",
2319
+ {
2320
+ style: { flex: 1, overflow: "auto" },
2321
+ onClick: () => setSelectedId(null),
2322
+ onDragOver: (e) => {
2323
+ if (!draggingDrawingId) return;
2324
+ const el = e.currentTarget;
2325
+ const rect = el.getBoundingClientRect();
2326
+ const margin = 40;
2327
+ if (e.clientY - rect.top < margin) {
2328
+ el.scrollTop -= 8;
2329
+ } else if (rect.bottom - e.clientY < margin) {
2330
+ el.scrollTop += 8;
2331
+ }
2332
+ },
2333
+ children: [
2334
+ isRefreshing ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: { padding: "24px 20px", textAlign: "center", color: "var(--text-secondary-color, #666)" }, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { style: { display: "inline-block", animation: "spin 1s linear infinite", fontSize: "24px" }, children: "\u23F3" }) }) : drawings.length > 0 || folders.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: { padding: "8px 20px 0" }, onClick: () => setSelectedId(null), children: [
2335
+ filteredFolders.map(renderFolderGroup),
2336
+ draggingDrawingId && folders.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
2337
+ "div",
2431
2338
  {
2432
- ref: newFolderInputRef,
2433
- type: "text",
2434
- value: newFolderName,
2435
- onChange: (e) => setNewFolderName(e.target.value),
2436
- onKeyDown: (e) => {
2437
- if (e.key === "Enter") handleCreateFolder();
2438
- if (e.key === "Escape") {
2439
- setCreatingFolder(false);
2440
- setNewFolderName("");
2339
+ onDragOver: (e) => {
2340
+ e.preventDefault();
2341
+ e.dataTransfer.dropEffect = "move";
2342
+ setDropTargetFolderId("__root__");
2343
+ },
2344
+ onDragLeave: () => {
2345
+ if (dropTargetFolderId === "__root__") setDropTargetFolderId(null);
2346
+ },
2347
+ onDrop: (e) => {
2348
+ e.preventDefault();
2349
+ if (draggingDrawingId) {
2350
+ handleMoveToFolder(draggingDrawingId, null);
2351
+ setDraggingDrawingId(null);
2352
+ setDropTargetFolderId(null);
2441
2353
  }
2442
2354
  },
2443
- placeholder: t.newFolderName,
2444
2355
  style: {
2445
- flex: 1,
2446
2356
  padding: "8px 12px",
2447
- fontSize: "14px",
2448
- border: "1px solid var(--color-primary, #6c63ff)",
2357
+ marginBottom: "4px",
2449
2358
  borderRadius: "8px",
2450
- outline: "none"
2359
+ textAlign: "center",
2360
+ fontSize: "12px",
2361
+ color: "var(--text-secondary-color, #888)",
2362
+ backgroundColor: dropTargetFolderId === "__root__" ? "var(--color-primary-light, rgba(108, 99, 255, 0.2))" : "transparent",
2363
+ border: "2px dashed var(--default-border-color, #ccc)",
2364
+ borderColor: dropTargetFolderId === "__root__" ? "var(--color-primary, #6c63ff)" : "var(--default-border-color, #ccc)",
2365
+ transition: "background-color 0.15s, border-color 0.15s"
2366
+ },
2367
+ children: t.moveToRoot
2368
+ }
2369
+ ),
2370
+ rootDrawings.map(renderDrawingRow)
2371
+ ] }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: { padding: "24px 20px", textAlign: "center", color: "var(--text-secondary-color, #666)" }, children: [
2372
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { children: t.noDrawingsYet }),
2373
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { children: t.clickNewToStart })
2374
+ ] }),
2375
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: sectionHeaderStyle, children: t.sectionDrawings }),
2376
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: { padding: "0 20px", display: "flex", flexDirection: "column", gap: "8px" }, children: [
2377
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
2378
+ ActionButton,
2379
+ {
2380
+ icon: "\u{1F4C4}",
2381
+ label: t.createNewDrawing,
2382
+ description: t.createNewDrawingDesc,
2383
+ onClick: () => handleCreate()
2384
+ }
2385
+ ),
2386
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
2387
+ ActionButton,
2388
+ {
2389
+ icon: "\u{1F4C2}",
2390
+ label: t.openFromFile,
2391
+ description: t.openFromFileDesc,
2392
+ onClick: importExcalidrawFile
2393
+ }
2394
+ ),
2395
+ creatingFolder ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: { display: "flex", gap: "8px", alignItems: "center", padding: "4px 0" }, children: [
2396
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
2397
+ "input",
2398
+ {
2399
+ ref: newFolderInputRef,
2400
+ type: "text",
2401
+ value: newFolderName,
2402
+ onChange: (e) => setNewFolderName(e.target.value),
2403
+ onKeyDown: (e) => {
2404
+ if (e.key === "Enter") handleCreateFolder();
2405
+ if (e.key === "Escape") {
2406
+ setCreatingFolder(false);
2407
+ setNewFolderName("");
2408
+ }
2409
+ },
2410
+ placeholder: t.newFolderName,
2411
+ style: {
2412
+ flex: 1,
2413
+ padding: "8px 12px",
2414
+ fontSize: "14px",
2415
+ border: "1px solid var(--color-primary, #6c63ff)",
2416
+ borderRadius: "8px",
2417
+ outline: "none"
2418
+ }
2419
+ }
2420
+ ),
2421
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
2422
+ "button",
2423
+ {
2424
+ onClick: handleCreateFolder,
2425
+ style: { padding: "8px 16px", fontSize: "14px", backgroundColor: "var(--color-primary, #6c63ff)", color: "#fff", border: "none", borderRadius: "8px", cursor: "pointer" },
2426
+ children: t.save
2427
+ }
2428
+ ),
2429
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
2430
+ "button",
2431
+ {
2432
+ onClick: () => {
2433
+ setCreatingFolder(false);
2434
+ setNewFolderName("");
2435
+ },
2436
+ style: { padding: "8px 16px", fontSize: "14px", backgroundColor: "transparent", border: "1px solid var(--default-border-color, #ccc)", borderRadius: "8px", cursor: "pointer", color: "inherit" },
2437
+ children: t.cancel
2438
+ }
2439
+ )
2440
+ ] }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
2441
+ ActionButton,
2442
+ {
2443
+ icon: "\u{1F4C1}",
2444
+ label: t.createFolder,
2445
+ description: "",
2446
+ onClick: () => setCreatingFolder(true)
2447
+ }
2448
+ )
2449
+ ] }),
2450
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: sectionHeaderStyle, children: t.sectionWorkspace }),
2451
+ daysSinceBackup !== null && daysSinceBackup >= 7 && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("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"}` }),
2452
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: { padding: "0 20px 16px", display: "flex", gap: "8px" }, children: [
2453
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
2454
+ ActionButton,
2455
+ {
2456
+ icon: "\u{1F4BE}",
2457
+ label: t.saveAllBackup,
2458
+ description: t.saveAllBackupDesc,
2459
+ onClick: () => {
2460
+ localStorage.setItem("rita-workspace-last-backup", Date.now().toString());
2461
+ exportWorkspace();
2451
2462
  }
2452
2463
  }
2453
2464
  ),
2454
2465
  /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
2455
- "button",
2466
+ ActionButton,
2456
2467
  {
2457
- onClick: handleCreateFolder,
2458
- style: { padding: "8px 16px", fontSize: "14px", backgroundColor: "var(--color-primary, #6c63ff)", color: "#fff", border: "none", borderRadius: "8px", cursor: "pointer" },
2459
- children: t.save
2468
+ icon: "\u{1F4E6}",
2469
+ label: "Exportera alla som .excalidraw",
2470
+ description: "Laddar ner varje ritning som separat fil",
2471
+ onClick: exportAllDrawingsAsExcalidraw
2460
2472
  }
2461
2473
  ),
2474
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
2475
+ ActionButton,
2476
+ {
2477
+ icon: "\u{1F4E5}",
2478
+ label: t.loadBackup,
2479
+ description: t.loadBackupDesc,
2480
+ onClick: importWorkspace
2481
+ }
2482
+ )
2483
+ ] })
2484
+ ]
2485
+ }
2486
+ )
2487
+ ] }),
2488
+ (confirmDeleteId || confirmDeleteFolderId) && (() => {
2489
+ const isFolder = !!confirmDeleteFolderId;
2490
+ const targetName = isFolder ? folders.find((f) => f.id === confirmDeleteFolderId)?.name : drawings.find((d) => d.id === confirmDeleteId)?.name;
2491
+ const onConfirm = () => {
2492
+ if (isFolder && confirmDeleteFolderId) handleDeleteFolder(confirmDeleteFolderId);
2493
+ else if (confirmDeleteId) handleDelete(confirmDeleteId);
2494
+ };
2495
+ const onCancel = () => {
2496
+ setConfirmDeleteId(null);
2497
+ setConfirmDeleteFolderId(null);
2498
+ };
2499
+ return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
2500
+ "div",
2501
+ {
2502
+ onClick: (e) => {
2503
+ if (e.target === e.currentTarget) onCancel();
2504
+ },
2505
+ onKeyDown: (e) => {
2506
+ if (e.key === "Escape") onCancel();
2507
+ },
2508
+ style: {
2509
+ position: "fixed",
2510
+ top: 0,
2511
+ left: 0,
2512
+ right: 0,
2513
+ bottom: 0,
2514
+ backgroundColor: "rgba(0, 0, 0, 0.5)",
2515
+ display: "flex",
2516
+ alignItems: "center",
2517
+ justifyContent: "center",
2518
+ zIndex: 1e4
2519
+ },
2520
+ children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: {
2521
+ backgroundColor: "var(--island-bg-color, #fff)",
2522
+ color: "var(--text-primary-color, #1b1b1f)",
2523
+ borderRadius: "12px",
2524
+ padding: "24px",
2525
+ minWidth: "320px",
2526
+ maxWidth: "420px",
2527
+ boxShadow: "0 12px 32px rgba(0, 0, 0, 0.25)"
2528
+ }, children: [
2529
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("h3", { style: { margin: "0 0 12px", fontSize: "16px", fontWeight: 600 }, children: isFolder ? t.deleteFolder : t.delete }),
2530
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("p", { style: { margin: "0 0 20px", fontSize: "14px", lineHeight: 1.5, color: "var(--text-secondary-color, #666)" }, children: [
2531
+ isFolder ? t.deleteFolderConfirm : t.confirmDelete,
2532
+ targetName && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
2533
+ " ",
2534
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("strong", { style: { color: "var(--text-primary-color, #1b1b1f)" }, children: targetName }),
2535
+ "?"
2536
+ ] })
2537
+ ] }),
2538
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: { display: "flex", gap: "8px", justifyContent: "flex-end" }, children: [
2462
2539
  /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
2463
2540
  "button",
2464
2541
  {
2465
- onClick: () => {
2466
- setCreatingFolder(false);
2467
- setNewFolderName("");
2542
+ onClick: onCancel,
2543
+ autoFocus: true,
2544
+ style: {
2545
+ padding: "8px 16px",
2546
+ fontSize: "14px",
2547
+ backgroundColor: "transparent",
2548
+ border: "1px solid var(--default-border-color, #ccc)",
2549
+ borderRadius: "6px",
2550
+ cursor: "pointer",
2551
+ color: "inherit"
2468
2552
  },
2469
- style: { padding: "8px 16px", fontSize: "14px", backgroundColor: "transparent", border: "1px solid var(--default-border-color, #ccc)", borderRadius: "8px", cursor: "pointer", color: "inherit" },
2470
2553
  children: t.cancel
2471
2554
  }
2472
- )
2473
- ] }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
2474
- ActionButton,
2475
- {
2476
- icon: "\u{1F4C1}",
2477
- label: t.createFolder,
2478
- description: "",
2479
- onClick: () => setCreatingFolder(true)
2480
- }
2481
- )
2482
- ] }),
2483
- /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: sectionHeaderStyle, children: t.sectionWorkspace }),
2484
- daysSinceBackup !== null && daysSinceBackup >= 7 && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("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"}` }),
2485
- /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: { padding: "0 20px 16px", display: "flex", gap: "8px" }, children: [
2486
- /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
2487
- ActionButton,
2488
- {
2489
- icon: "\u{1F4BE}",
2490
- label: t.saveAllBackup,
2491
- description: t.saveAllBackupDesc,
2492
- onClick: () => {
2493
- localStorage.setItem("rita-workspace-last-backup", Date.now().toString());
2494
- exportWorkspace();
2555
+ ),
2556
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
2557
+ "button",
2558
+ {
2559
+ onClick: onConfirm,
2560
+ style: {
2561
+ padding: "8px 16px",
2562
+ fontSize: "14px",
2563
+ backgroundColor: "#dc3545",
2564
+ color: "#fff",
2565
+ border: "none",
2566
+ borderRadius: "6px",
2567
+ cursor: "pointer"
2568
+ },
2569
+ children: t.delete
2495
2570
  }
2496
- }
2497
- ),
2498
- /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
2499
- ActionButton,
2500
- {
2501
- icon: "\u{1F4E6}",
2502
- label: "Exportera alla som .excalidraw",
2503
- description: "Laddar ner varje ritning som separat fil",
2504
- onClick: exportAllDrawingsAsExcalidraw
2505
- }
2506
- ),
2507
- /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
2508
- ActionButton,
2509
- {
2510
- icon: "\u{1F4E5}",
2511
- label: t.loadBackup,
2512
- description: t.loadBackupDesc,
2513
- onClick: importWorkspace
2514
- }
2515
- )
2571
+ )
2572
+ ] })
2516
2573
  ] })
2517
- ]
2518
- }
2519
- )
2520
- ] })
2574
+ }
2575
+ );
2576
+ })()
2577
+ ]
2521
2578
  }
2522
2579
  );
2523
2580
  };