rita-workspace 0.5.31 → 0.5.33

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