rita-workspace 0.5.31 → 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 +334 -283
  2. package/dist/index.mjs +334 -283
  3. package/package.json +1 -1
package/dist/index.js CHANGED
@@ -1993,30 +1993,7 @@ var DrawingsDialog = ({
1993
1993
  gap: "2px",
1994
1994
  alignItems: "center",
1995
1995
  visibility: hoveredId === drawing.id || selectedId === drawing.id || activeDrawing?.id === drawing.id || confirmDeleteId === drawing.id || movingDrawingId === drawing.id || editingId === drawing.id ? "visible" : "hidden"
1996
- }, children: confirmDeleteId === drawing.id ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
1997
- /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
1998
- "button",
1999
- {
2000
- onClick: (e) => {
2001
- e.stopPropagation();
2002
- handleDelete(drawing.id);
2003
- },
2004
- style: { padding: "4px 10px", fontSize: "12px", backgroundColor: "#dc3545", color: "#fff", border: "none", borderRadius: "4px", cursor: "pointer" },
2005
- children: t.delete
2006
- }
2007
- ),
2008
- /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
2009
- "button",
2010
- {
2011
- onClick: (e) => {
2012
- e.stopPropagation();
2013
- setConfirmDeleteId(null);
2014
- },
2015
- style: { padding: "4px 10px", fontSize: "12px", backgroundColor: "transparent", border: "1px solid var(--default-border-color, #ccc)", borderRadius: "4px", cursor: "pointer", color: "inherit" },
2016
- children: t.cancel
2017
- }
2018
- )
2019
- ] }) : 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: [
2020
1997
  /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
2021
1998
  "button",
2022
1999
  {
@@ -2184,24 +2161,7 @@ var DrawingsDialog = ({
2184
2161
  ")"
2185
2162
  ] })
2186
2163
  ] }) }),
2187
- confirmDeleteFolderId === folder.id ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { onClick: (e) => e.stopPropagation(), style: { display: "flex", gap: "4px" }, children: [
2188
- /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
2189
- "button",
2190
- {
2191
- onClick: () => handleDeleteFolder(folder.id),
2192
- style: { padding: "2px 8px", fontSize: "12px", backgroundColor: "#dc3545", color: "#fff", border: "none", borderRadius: "4px", cursor: "pointer" },
2193
- children: t.delete
2194
- }
2195
- ),
2196
- /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
2197
- "button",
2198
- {
2199
- onClick: () => setConfirmDeleteFolderId(null),
2200
- style: { padding: "2px 8px", fontSize: "12px", backgroundColor: "transparent", border: "1px solid var(--default-border-color, #ccc)", borderRadius: "4px", cursor: "pointer", color: "inherit" },
2201
- children: t.cancel
2202
- }
2203
- )
2204
- ] }) : 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: [
2205
2165
  /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
2206
2166
  "button",
2207
2167
  {
@@ -2236,7 +2196,7 @@ var DrawingsDialog = ({
2236
2196
  folder.id
2237
2197
  );
2238
2198
  };
2239
- return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
2199
+ return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
2240
2200
  "div",
2241
2201
  {
2242
2202
  className: "rita-workspace-dialog-overlay",
@@ -2255,275 +2215,366 @@ var DrawingsDialog = ({
2255
2215
  onClick: (e) => {
2256
2216
  if (e.target === e.currentTarget) onClose();
2257
2217
  },
2258
- children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { ref: dialogRef, className: "rita-workspace-dialog", style: dialogStyle, children: [
2259
- /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
2260
- "div",
2261
- {
2262
- onMouseDown: handleMouseDown,
2263
- style: {
2264
- padding: "16px 20px",
2265
- display: "flex",
2266
- alignItems: "center",
2267
- justifyContent: "space-between",
2268
- cursor: "grab",
2269
- userSelect: "none",
2270
- borderBottom: "1px solid var(--default-border-color, #e0e0e0)"
2271
- },
2272
- children: [
2273
- /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("h2", { style: { margin: 0, fontSize: "18px", fontWeight: 600, display: "flex", alignItems: "center", gap: "8px" }, children: [
2274
- 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
+ ] }),
2275
2255
  /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
2276
- "span",
2256
+ "button",
2277
2257
  {
2258
+ onClick: onClose,
2278
2259
  style: {
2279
- fontSize: "10px",
2280
- fontWeight: 700,
2281
- letterSpacing: "0.5px",
2282
- padding: "2px 8px",
2283
- borderRadius: "10px",
2284
- backgroundColor: "#fff3cd",
2285
- color: "#856404",
2286
- border: "1px solid #ffc107",
2287
- textTransform: "uppercase"
2260
+ background: "none",
2261
+ border: "none",
2262
+ fontSize: "24px",
2263
+ cursor: "pointer",
2264
+ padding: "4px",
2265
+ lineHeight: 1,
2266
+ color: "inherit"
2288
2267
  },
2289
- title: "Beta \u2014 funktionen \xE4r under utveckling och kan \xE4ndras",
2290
- children: "BETA"
2268
+ "aria-label": t.close,
2269
+ children: "\xD7"
2291
2270
  }
2292
2271
  )
2293
- ] }),
2294
- /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
2295
- "button",
2296
- {
2297
- onClick: onClose,
2298
- style: {
2299
- background: "none",
2300
- border: "none",
2301
- fontSize: "24px",
2302
- cursor: "pointer",
2303
- padding: "4px",
2304
- lineHeight: 1,
2305
- color: "inherit"
2306
- },
2307
- "aria-label": t.close,
2308
- children: "\xD7"
2309
- }
2310
- )
2311
- ]
2312
- }
2313
- ),
2314
- /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
2315
- "div",
2316
- {
2317
- style: {
2318
- padding: "8px 20px",
2319
- backgroundColor: "#fff3cd",
2320
- color: "#856404",
2321
- fontSize: "12px",
2322
- borderBottom: "1px solid #ffc107",
2323
- display: "flex",
2324
- alignItems: "center",
2325
- gap: "8px"
2326
- },
2327
- children: [
2328
- /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { children: "\u26A0\uFE0F" }),
2329
- /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { children: [
2330
- /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("strong", { children: "Beta:" }),
2331
- ' Arbetsyta \xE4r under utveckling. Ta regelbundet backup via "Spara alla ritningar".'
2332
- ] })
2333
- ]
2334
- }
2335
- ),
2336
- 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)(
2337
- "input",
2338
- {
2339
- type: "text",
2340
- value: searchQuery,
2341
- onChange: (e) => setSearchQuery(e.target.value),
2342
- placeholder: "\u{1F50D}",
2343
- style: {
2344
- width: "100%",
2345
- padding: "6px 12px",
2346
- fontSize: "14px",
2347
- border: "1px solid var(--default-border-color, #e0e0e0)",
2348
- borderRadius: "6px",
2349
- outline: "none",
2350
- backgroundColor: "transparent",
2351
- color: "inherit",
2352
- boxSizing: "border-box"
2272
+ ]
2353
2273
  }
2354
- }
2355
- ) }),
2356
- /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
2357
- "div",
2358
- {
2359
- style: { flex: 1, overflow: "auto" },
2360
- onClick: () => setSelectedId(null),
2361
- onDragOver: (e) => {
2362
- if (!draggingDrawingId) return;
2363
- const el = e.currentTarget;
2364
- const rect = el.getBoundingClientRect();
2365
- const margin = 40;
2366
- if (e.clientY - rect.top < margin) {
2367
- el.scrollTop -= 8;
2368
- } else if (rect.bottom - e.clientY < margin) {
2369
- 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"
2370
2314
  }
2371
- },
2372
- children: [
2373
- 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: [
2374
- filteredFolders.map(renderFolderGroup),
2375
- draggingDrawingId && folders.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
2376
- "div",
2377
- {
2378
- onDragOver: (e) => {
2379
- e.preventDefault();
2380
- e.dataTransfer.dropEffect = "move";
2381
- setDropTargetFolderId("__root__");
2382
- },
2383
- onDragLeave: () => {
2384
- if (dropTargetFolderId === "__root__") setDropTargetFolderId(null);
2385
- },
2386
- onDrop: (e) => {
2387
- e.preventDefault();
2388
- if (draggingDrawingId) {
2389
- handleMoveToFolder(draggingDrawingId, null);
2390
- setDraggingDrawingId(null);
2391
- setDropTargetFolderId(null);
2392
- }
2393
- },
2394
- style: {
2395
- padding: "8px 12px",
2396
- marginBottom: "4px",
2397
- borderRadius: "8px",
2398
- textAlign: "center",
2399
- fontSize: "12px",
2400
- color: "var(--text-secondary-color, #888)",
2401
- backgroundColor: dropTargetFolderId === "__root__" ? "var(--color-primary-light, rgba(108, 99, 255, 0.2))" : "transparent",
2402
- border: "2px dashed var(--default-border-color, #ccc)",
2403
- borderColor: dropTargetFolderId === "__root__" ? "var(--color-primary, #6c63ff)" : "var(--default-border-color, #ccc)",
2404
- transition: "background-color 0.15s, border-color 0.15s"
2405
- },
2406
- children: t.moveToRoot
2407
- }
2408
- ),
2409
- rootDrawings.map(renderDrawingRow)
2410
- ] }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: { padding: "24px 20px", textAlign: "center", color: "var(--text-secondary-color, #666)" }, children: [
2411
- /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { children: t.noDrawingsYet }),
2412
- /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { children: t.clickNewToStart })
2413
- ] }),
2414
- /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: sectionHeaderStyle, children: t.sectionDrawings }),
2415
- /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: { padding: "0 20px", display: "flex", flexDirection: "column", gap: "8px" }, children: [
2416
- /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
2417
- ActionButton,
2418
- {
2419
- icon: "\u{1F4C4}",
2420
- label: t.createNewDrawing,
2421
- description: t.createNewDrawingDesc,
2422
- onClick: () => handleCreate()
2423
- }
2424
- ),
2425
- /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
2426
- ActionButton,
2427
- {
2428
- icon: "\u{1F4C2}",
2429
- label: t.openFromFile,
2430
- description: t.openFromFileDesc,
2431
- onClick: importExcalidrawFile
2432
- }
2433
- ),
2434
- creatingFolder ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: { display: "flex", gap: "8px", alignItems: "center", padding: "4px 0" }, children: [
2435
- /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
2436
- "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",
2437
2338
  {
2438
- ref: newFolderInputRef,
2439
- type: "text",
2440
- value: newFolderName,
2441
- onChange: (e) => setNewFolderName(e.target.value),
2442
- onKeyDown: (e) => {
2443
- if (e.key === "Enter") handleCreateFolder();
2444
- if (e.key === "Escape") {
2445
- setCreatingFolder(false);
2446
- 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);
2447
2353
  }
2448
2354
  },
2449
- placeholder: t.newFolderName,
2450
2355
  style: {
2451
- flex: 1,
2452
2356
  padding: "8px 12px",
2453
- fontSize: "14px",
2454
- border: "1px solid var(--color-primary, #6c63ff)",
2357
+ marginBottom: "4px",
2455
2358
  borderRadius: "8px",
2456
- 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();
2457
2462
  }
2458
2463
  }
2459
2464
  ),
2460
2465
  /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
2461
- "button",
2466
+ ActionButton,
2462
2467
  {
2463
- onClick: handleCreateFolder,
2464
- style: { padding: "8px 16px", fontSize: "14px", backgroundColor: "var(--color-primary, #6c63ff)", color: "#fff", border: "none", borderRadius: "8px", cursor: "pointer" },
2465
- 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
2466
2472
  }
2467
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: [
2468
2539
  /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
2469
2540
  "button",
2470
2541
  {
2471
- onClick: () => {
2472
- setCreatingFolder(false);
2473
- 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"
2474
2552
  },
2475
- style: { padding: "8px 16px", fontSize: "14px", backgroundColor: "transparent", border: "1px solid var(--default-border-color, #ccc)", borderRadius: "8px", cursor: "pointer", color: "inherit" },
2476
2553
  children: t.cancel
2477
2554
  }
2478
- )
2479
- ] }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
2480
- ActionButton,
2481
- {
2482
- icon: "\u{1F4C1}",
2483
- label: t.createFolder,
2484
- description: "",
2485
- onClick: () => setCreatingFolder(true)
2486
- }
2487
- )
2488
- ] }),
2489
- /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: sectionHeaderStyle, children: t.sectionWorkspace }),
2490
- 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"}` }),
2491
- /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: { padding: "0 20px 16px", display: "flex", gap: "8px" }, children: [
2492
- /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
2493
- ActionButton,
2494
- {
2495
- icon: "\u{1F4BE}",
2496
- label: t.saveAllBackup,
2497
- description: t.saveAllBackupDesc,
2498
- onClick: () => {
2499
- localStorage.setItem("rita-workspace-last-backup", Date.now().toString());
2500
- 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
2501
2570
  }
2502
- }
2503
- ),
2504
- /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
2505
- ActionButton,
2506
- {
2507
- icon: "\u{1F4E6}",
2508
- label: "Exportera alla som .excalidraw",
2509
- description: "Laddar ner varje ritning som separat fil",
2510
- onClick: exportAllDrawingsAsExcalidraw
2511
- }
2512
- ),
2513
- /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
2514
- ActionButton,
2515
- {
2516
- icon: "\u{1F4E5}",
2517
- label: t.loadBackup,
2518
- description: t.loadBackupDesc,
2519
- onClick: importWorkspace
2520
- }
2521
- )
2571
+ )
2572
+ ] })
2522
2573
  ] })
2523
- ]
2524
- }
2525
- )
2526
- ] })
2574
+ }
2575
+ );
2576
+ })()
2577
+ ]
2527
2578
  }
2528
2579
  );
2529
2580
  };