rita-workspace 0.5.6 → 0.5.8

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 +193 -161
  2. package/dist/index.mjs +193 -161
  3. package/package.json +1 -1
package/dist/index.js CHANGED
@@ -511,19 +511,38 @@ function WorkspaceProvider({ children, lang = "en" }) {
511
511
  const [isDrawingConflict, setIsDrawingConflict] = (0, import_react.useState)(false);
512
512
  const prevConflictRef = (0, import_react.useRef)(false);
513
513
  (0, import_react.useEffect)(() => {
514
- if (prevConflictRef.current && !isDrawingConflict && activeDrawing?.id) {
515
- getDrawing(activeDrawing.id).then((fresh) => {
516
- if (fresh) {
517
- setActiveDrawing2(fresh);
514
+ const wasConflict = prevConflictRef.current;
515
+ prevConflictRef.current = isDrawingConflict;
516
+ if (wasConflict && !isDrawingConflict) {
517
+ const id = activeDrawingIdRef.current;
518
+ if (id) {
519
+ getDrawing(id).then((fresh) => {
520
+ if (fresh && activeDrawingIdRef.current === id) {
521
+ setActiveDrawing2(fresh);
522
+ }
523
+ });
524
+ }
525
+ }
526
+ }, [isDrawingConflict]);
527
+ (0, import_react.useEffect)(() => {
528
+ let channel = null;
529
+ try {
530
+ channel = new BroadcastChannel(TAB_CHANNEL);
531
+ channel.onmessage = (event) => {
532
+ if (event.data?.type === "ping") {
533
+ channel?.postMessage({ type: "pong", tabId: TAB_ID });
518
534
  }
519
- });
535
+ };
536
+ } catch {
520
537
  }
521
- prevConflictRef.current = isDrawingConflict;
522
- }, [isDrawingConflict, activeDrawing?.id]);
538
+ return () => {
539
+ channel?.close();
540
+ };
541
+ }, []);
523
542
  (0, import_react.useEffect)(() => {
524
543
  cleanupStaleTabs();
525
544
  const timer = setTimeout(() => {
526
- const drawingId = activeDrawing?.id;
545
+ const drawingId = activeDrawingIdRef.current;
527
546
  if (drawingId) {
528
547
  setIsDrawingConflict(isDrawingOpenedEarlierInOtherTab(drawingId));
529
548
  }
@@ -549,9 +568,6 @@ function WorkspaceProvider({ children, lang = "en" }) {
549
568
  channel.postMessage({ type: "drawing-changed", tabId: TAB_ID, drawingId });
550
569
  channel.onmessage = (event) => {
551
570
  if (event.data?.tabId !== TAB_ID) {
552
- if (event.data?.type === "ping") {
553
- channel?.postMessage({ type: "pong", tabId: TAB_ID });
554
- }
555
571
  recheckConflict();
556
572
  }
557
573
  };
@@ -1359,6 +1375,7 @@ var DrawingsDialog = ({
1359
1375
  const [editName, setEditName] = (0, import_react5.useState)("");
1360
1376
  const [confirmDeleteId, setConfirmDeleteId] = (0, import_react5.useState)(null);
1361
1377
  const [switchingId, setSwitchingId] = (0, import_react5.useState)(null);
1378
+ const [selectedId, setSelectedId] = (0, import_react5.useState)(null);
1362
1379
  const [expandedFolders, setExpandedFolders] = (0, import_react5.useState)(/* @__PURE__ */ new Set());
1363
1380
  const [creatingFolder, setCreatingFolder] = (0, import_react5.useState)(false);
1364
1381
  const [newFolderName, setNewFolderName] = (0, import_react5.useState)("");
@@ -1367,7 +1384,6 @@ var DrawingsDialog = ({
1367
1384
  const [confirmDeleteFolderId, setConfirmDeleteFolderId] = (0, import_react5.useState)(null);
1368
1385
  const [movingDrawingId, setMovingDrawingId] = (0, import_react5.useState)(null);
1369
1386
  const [searchQuery, setSearchQuery] = (0, import_react5.useState)("");
1370
- const [busyFolderId, setBusyFolderId] = (0, import_react5.useState)(null);
1371
1387
  const [isRefreshing, setIsRefreshing] = (0, import_react5.useState)(false);
1372
1388
  const [draggingDrawingId, setDraggingDrawingId] = (0, import_react5.useState)(null);
1373
1389
  const [dropTargetFolderId, setDropTargetFolderId] = (0, import_react5.useState)(null);
@@ -1376,6 +1392,8 @@ var DrawingsDialog = ({
1376
1392
  const dialogRef = (0, import_react5.useRef)(null);
1377
1393
  const newFolderInputRef = (0, import_react5.useRef)(null);
1378
1394
  const prevOpenRef = (0, import_react5.useRef)(false);
1395
+ const foldersRef = (0, import_react5.useRef)(folders);
1396
+ foldersRef.current = folders;
1379
1397
  (0, import_react5.useEffect)(() => {
1380
1398
  if (open) {
1381
1399
  setIsRefreshing(true);
@@ -1383,11 +1401,12 @@ var DrawingsDialog = ({
1383
1401
  if (!prevOpenRef.current) {
1384
1402
  setPosition(null);
1385
1403
  setSearchQuery("");
1386
- setExpandedFolders(new Set(folders.map((f) => f.id)));
1404
+ setSelectedId(null);
1405
+ setExpandedFolders(new Set(foldersRef.current.map((f) => f.id)));
1387
1406
  }
1388
1407
  }
1389
1408
  prevOpenRef.current = open;
1390
- }, [open, refreshDrawings, folders]);
1409
+ }, [open, refreshDrawings]);
1391
1410
  (0, import_react5.useEffect)(() => {
1392
1411
  if (creatingFolder && newFolderInputRef.current) {
1393
1412
  newFolderInputRef.current.focus();
@@ -1417,6 +1436,7 @@ var DrawingsDialog = ({
1417
1436
  }, [position]);
1418
1437
  const handleSelect = (0, import_react5.useCallback)(async (drawing) => {
1419
1438
  setSwitchingId(drawing.id);
1439
+ setSelectedId(null);
1420
1440
  await switchDrawing(drawing.id);
1421
1441
  onDrawingSelect?.(drawing);
1422
1442
  setSwitchingId(null);
@@ -1429,9 +1449,9 @@ var DrawingsDialog = ({
1429
1449
  setEditingId(drawing.id);
1430
1450
  setEditName(drawing.name);
1431
1451
  }, []);
1432
- const handleSaveEdit = (0, import_react5.useCallback)(async () => {
1452
+ const handleSaveEdit = (0, import_react5.useCallback)(() => {
1433
1453
  if (editingId && editName.trim()) {
1434
- await renameDrawing(editingId, editName.trim());
1454
+ renameDrawing(editingId, editName.trim());
1435
1455
  setEditingId(null);
1436
1456
  setEditName("");
1437
1457
  }
@@ -1440,40 +1460,36 @@ var DrawingsDialog = ({
1440
1460
  setEditingId(null);
1441
1461
  setEditName("");
1442
1462
  }, []);
1443
- const handleDelete = (0, import_react5.useCallback)(async (id) => {
1444
- await removeDrawing(id);
1463
+ const handleDelete = (0, import_react5.useCallback)((id) => {
1464
+ removeDrawing(id);
1445
1465
  setConfirmDeleteId(null);
1446
1466
  }, [removeDrawing]);
1447
- const handleCreateFolder = (0, import_react5.useCallback)(async () => {
1467
+ const handleCreateFolder = (0, import_react5.useCallback)(() => {
1448
1468
  if (newFolderName.trim()) {
1449
- setBusyFolderId("__creating__");
1450
- const folder = await createFolder2(newFolderName.trim());
1451
- if (folder) {
1452
- setExpandedFolders((prev) => /* @__PURE__ */ new Set([...prev, folder.id]));
1453
- }
1454
- setBusyFolderId(null);
1469
+ createFolder2(newFolderName.trim()).then((folder) => {
1470
+ if (folder) {
1471
+ setExpandedFolders((prev) => /* @__PURE__ */ new Set([...prev, folder.id]));
1472
+ }
1473
+ });
1455
1474
  }
1456
1475
  setCreatingFolder(false);
1457
1476
  setNewFolderName("");
1458
1477
  }, [newFolderName, createFolder2]);
1459
- const handleSaveFolderEdit = (0, import_react5.useCallback)(async () => {
1478
+ const handleSaveFolderEdit = (0, import_react5.useCallback)(() => {
1460
1479
  if (editingFolderId && editFolderName.trim()) {
1461
- setBusyFolderId(editingFolderId);
1462
- await renameFolder2(editingFolderId, editFolderName.trim());
1463
- setBusyFolderId(null);
1480
+ renameFolder2(editingFolderId, editFolderName.trim());
1464
1481
  }
1465
1482
  setEditingFolderId(null);
1466
1483
  setEditFolderName("");
1467
1484
  }, [editingFolderId, editFolderName, renameFolder2]);
1468
- const handleDeleteFolder = (0, import_react5.useCallback)(async (id) => {
1469
- setBusyFolderId(id);
1470
- await deleteFolder2(id);
1471
- setBusyFolderId(null);
1485
+ const handleDeleteFolder = (0, import_react5.useCallback)((id) => {
1486
+ deleteFolder2(id);
1472
1487
  setConfirmDeleteFolderId(null);
1473
1488
  }, [deleteFolder2]);
1474
- const handleMoveToFolder = (0, import_react5.useCallback)(async (drawingId, folderId) => {
1475
- await moveDrawingToFolder2(drawingId, folderId);
1489
+ const handleMoveToFolder = (0, import_react5.useCallback)((drawingId, folderId) => {
1476
1490
  setMovingDrawingId(null);
1491
+ setSelectedId(null);
1492
+ moveDrawingToFolder2(drawingId, folderId);
1477
1493
  }, [moveDrawingToFolder2]);
1478
1494
  const toggleFolder = (0, import_react5.useCallback)((folderId) => {
1479
1495
  setExpandedFolders((prev) => {
@@ -1555,8 +1571,12 @@ var DrawingsDialog = ({
1555
1571
  },
1556
1572
  onDragEnd: () => {
1557
1573
  setDraggingDrawingId(null);
1558
- setDropTargetFolderId("__none__");
1559
- setTimeout(() => setDropTargetFolderId(null), 0);
1574
+ setDropTargetFolderId(null);
1575
+ },
1576
+ onClick: (e) => {
1577
+ e.stopPropagation();
1578
+ if (editingId || confirmDeleteId || movingDrawingId) return;
1579
+ setSelectedId(drawing.id);
1560
1580
  },
1561
1581
  style: {
1562
1582
  padding: "10px 12px",
@@ -1565,9 +1585,10 @@ var DrawingsDialog = ({
1565
1585
  gap: "12px",
1566
1586
  borderRadius: "8px",
1567
1587
  marginBottom: "4px",
1568
- cursor: draggingDrawingId ? "grabbing" : "default",
1569
- backgroundColor: activeDrawing?.id === drawing.id ? "var(--color-primary-light, rgba(108, 99, 255, 0.1))" : "transparent",
1570
- transition: "background-color 0.15s",
1588
+ cursor: draggingDrawingId ? "grabbing" : "pointer",
1589
+ 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",
1590
+ border: selectedId === drawing.id && activeDrawing?.id !== drawing.id ? "1px solid var(--color-primary, #6c63ff)" : "1px solid transparent",
1591
+ transition: "background-color 0.15s, border-color 0.15s",
1571
1592
  opacity: draggingDrawingId === drawing.id ? 0.4 : switchingId && switchingId !== drawing.id ? 0.5 : 1
1572
1593
  },
1573
1594
  children: [
@@ -1782,125 +1803,137 @@ var DrawingsDialog = ({
1782
1803
  const renderFolderGroup = (folder) => {
1783
1804
  const folderDrawings = drawingsByFolder[folder.id] || [];
1784
1805
  const isExpanded = expandedFolders.has(folder.id);
1785
- return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: { marginBottom: "4px" }, children: [
1786
- /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
1787
- "div",
1788
- {
1789
- onClick: () => toggleFolder(folder.id),
1790
- onDragOver: (e) => {
1791
- if (!draggingDrawingId) return;
1792
- e.preventDefault();
1793
- e.dataTransfer.dropEffect = "move";
1794
- setDropTargetFolderId(folder.id);
1795
- },
1796
- onDragLeave: () => {
1806
+ return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
1807
+ "div",
1808
+ {
1809
+ style: { marginBottom: "4px" },
1810
+ onDragOver: (e) => {
1811
+ if (!draggingDrawingId) return;
1812
+ e.preventDefault();
1813
+ e.dataTransfer.dropEffect = "move";
1814
+ setDropTargetFolderId(folder.id);
1815
+ },
1816
+ onDragLeave: (e) => {
1817
+ if (!e.currentTarget.contains(e.relatedTarget)) {
1797
1818
  if (dropTargetFolderId === folder.id) setDropTargetFolderId(null);
1798
- },
1799
- onDrop: (e) => {
1800
- e.preventDefault();
1801
- if (draggingDrawingId) {
1802
- handleMoveToFolder(draggingDrawingId, folder.id);
1803
- setDraggingDrawingId(null);
1804
- setDropTargetFolderId(null);
1805
- setExpandedFolders((prev) => /* @__PURE__ */ new Set([...prev, folder.id]));
1806
- }
1807
- },
1808
- style: {
1809
- padding: "8px 12px",
1810
- display: "flex",
1811
- alignItems: "center",
1812
- gap: "8px",
1813
- borderRadius: "8px",
1814
- cursor: "pointer",
1815
- backgroundColor: dropTargetFolderId === folder.id ? "var(--color-primary-light, rgba(108, 99, 255, 0.2))" : "var(--color-surface-mid, rgba(0, 0, 0, 0.03))",
1816
- border: dropTargetFolderId === folder.id ? "2px dashed var(--color-primary, #6c63ff)" : "2px solid transparent",
1817
- transition: "background-color 0.15s, border-color 0.15s"
1818
- },
1819
- children: [
1820
- /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { style: { fontSize: "12px", width: "16px", textAlign: "center", flexShrink: 0 }, children: isExpanded ? "\u25BC" : "\u25B6" }),
1821
- /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { style: { fontSize: "16px", flexShrink: 0 }, children: busyFolderId === folder.id ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { style: { display: "inline-block", animation: "spin 1s linear infinite" }, children: "\u23F3" }) : "\u{1F4C1}" }),
1822
- /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: { flex: 1, minWidth: 0 }, children: editingFolderId === folder.id ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: { display: "flex", gap: "6px", alignItems: "center" }, onClick: (e) => e.stopPropagation(), children: [
1823
- /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
1824
- "input",
1825
- {
1826
- type: "text",
1827
- value: editFolderName,
1828
- onChange: (e) => setEditFolderName(e.target.value),
1829
- onKeyDown: (e) => {
1830
- if (e.key === "Enter") handleSaveFolderEdit();
1831
- if (e.key === "Escape") {
1832
- setEditingFolderId(null);
1833
- setEditFolderName("");
1819
+ }
1820
+ },
1821
+ onDrop: (e) => {
1822
+ e.preventDefault();
1823
+ if (draggingDrawingId) {
1824
+ handleMoveToFolder(draggingDrawingId, folder.id);
1825
+ setDraggingDrawingId(null);
1826
+ setDropTargetFolderId(null);
1827
+ setExpandedFolders((prev) => /* @__PURE__ */ new Set([...prev, folder.id]));
1828
+ }
1829
+ },
1830
+ children: [
1831
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
1832
+ "div",
1833
+ {
1834
+ onClick: () => {
1835
+ toggleFolder(folder.id);
1836
+ setSelectedId(null);
1837
+ },
1838
+ style: {
1839
+ padding: "8px 12px",
1840
+ display: "flex",
1841
+ alignItems: "center",
1842
+ gap: "8px",
1843
+ borderRadius: "8px",
1844
+ cursor: "pointer",
1845
+ backgroundColor: dropTargetFolderId === folder.id ? "var(--color-primary-light, rgba(108, 99, 255, 0.2))" : "var(--color-surface-mid, rgba(0, 0, 0, 0.03))",
1846
+ border: dropTargetFolderId === folder.id ? "2px dashed var(--color-primary, #6c63ff)" : "2px solid transparent",
1847
+ transition: "background-color 0.15s, border-color 0.15s"
1848
+ },
1849
+ children: [
1850
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { style: { fontSize: "12px", width: "16px", textAlign: "center", flexShrink: 0 }, children: isExpanded ? "\u25BC" : "\u25B6" }),
1851
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { style: { fontSize: "16px", flexShrink: 0 }, children: "\u{1F4C1}" }),
1852
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: { flex: 1, minWidth: 0 }, children: editingFolderId === folder.id ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: { display: "flex", gap: "6px", alignItems: "center" }, onClick: (e) => e.stopPropagation(), children: [
1853
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
1854
+ "input",
1855
+ {
1856
+ type: "text",
1857
+ value: editFolderName,
1858
+ onChange: (e) => setEditFolderName(e.target.value),
1859
+ onKeyDown: (e) => {
1860
+ if (e.key === "Enter") handleSaveFolderEdit();
1861
+ if (e.key === "Escape") {
1862
+ setEditingFolderId(null);
1863
+ setEditFolderName("");
1864
+ }
1865
+ },
1866
+ autoFocus: true,
1867
+ style: { flex: 1, padding: "2px 6px", fontSize: "14px", border: "1px solid var(--color-primary, #6c63ff)", borderRadius: "4px", outline: "none" }
1834
1868
  }
1835
- },
1836
- autoFocus: true,
1837
- style: { flex: 1, padding: "2px 6px", fontSize: "14px", border: "1px solid var(--color-primary, #6c63ff)", borderRadius: "4px", outline: "none" }
1838
- }
1839
- ),
1840
- /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
1841
- "button",
1842
- {
1843
- onClick: handleSaveFolderEdit,
1844
- style: { padding: "2px 8px", fontSize: "12px", backgroundColor: "var(--color-primary, #6c63ff)", color: "#fff", border: "none", borderRadius: "4px", cursor: "pointer" },
1845
- children: t.save
1846
- }
1847
- )
1848
- ] }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { style: { fontWeight: 600, fontSize: "14px" }, children: [
1849
- folder.name,
1850
- /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { style: { fontWeight: 400, fontSize: "12px", color: "var(--text-secondary-color, #888)", marginLeft: "6px" }, children: [
1851
- "(",
1852
- folderDrawings.length,
1853
- ")"
1854
- ] })
1855
- ] }) }),
1856
- confirmDeleteFolderId === folder.id ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { onClick: (e) => e.stopPropagation(), style: { display: "flex", gap: "4px" }, children: [
1857
- /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
1858
- "button",
1859
- {
1860
- onClick: () => handleDeleteFolder(folder.id),
1861
- style: { padding: "2px 8px", fontSize: "12px", backgroundColor: "#dc3545", color: "#fff", border: "none", borderRadius: "4px", cursor: "pointer" },
1862
- children: t.delete
1863
- }
1864
- ),
1865
- /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
1866
- "button",
1867
- {
1868
- onClick: () => setConfirmDeleteFolderId(null),
1869
- style: { padding: "2px 8px", fontSize: "12px", backgroundColor: "transparent", border: "1px solid var(--default-border-color, #ccc)", borderRadius: "4px", cursor: "pointer", color: "inherit" },
1870
- children: t.cancel
1871
- }
1872
- )
1873
- ] }) : editingFolderId !== folder.id && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { onClick: (e) => e.stopPropagation(), style: { display: "flex", gap: "2px" }, children: [
1874
- /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
1875
- "button",
1876
- {
1877
- onClick: () => {
1878
- setEditingFolderId(folder.id);
1879
- setEditFolderName(folder.name);
1880
- },
1881
- style: { background: "none", border: "none", cursor: "pointer", padding: "2px", fontSize: "12px", opacity: 0.5 },
1882
- title: t.renameFolder,
1883
- children: "\u270F\uFE0F"
1884
- }
1885
- ),
1886
- /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
1887
- "button",
1888
- {
1889
- onClick: () => setConfirmDeleteFolderId(folder.id),
1890
- style: { background: "none", border: "none", cursor: "pointer", padding: "2px", fontSize: "12px", opacity: 0.5 },
1891
- title: t.deleteFolder,
1892
- children: "\u{1F5D1}\uFE0F"
1893
- }
1894
- )
1895
- ] })
1896
- ]
1897
- }
1898
- ),
1899
- isExpanded && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: { paddingLeft: "24px", marginTop: "2px" }, children: [
1900
- folderDrawings.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: { padding: "8px 12px", fontSize: "12px", color: "var(--text-secondary-color, #888)", fontStyle: "italic" }, children: t.noDrawingsYet }),
1901
- folderDrawings.map(renderDrawingRow)
1902
- ] })
1903
- ] }, folder.id);
1869
+ ),
1870
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
1871
+ "button",
1872
+ {
1873
+ onClick: handleSaveFolderEdit,
1874
+ style: { padding: "2px 8px", fontSize: "12px", backgroundColor: "var(--color-primary, #6c63ff)", color: "#fff", border: "none", borderRadius: "4px", cursor: "pointer" },
1875
+ children: t.save
1876
+ }
1877
+ )
1878
+ ] }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { style: { fontWeight: 600, fontSize: "14px" }, children: [
1879
+ folder.name,
1880
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { style: { fontWeight: 400, fontSize: "12px", color: "var(--text-secondary-color, #888)", marginLeft: "6px" }, children: [
1881
+ "(",
1882
+ folderDrawings.length,
1883
+ ")"
1884
+ ] })
1885
+ ] }) }),
1886
+ confirmDeleteFolderId === folder.id ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { onClick: (e) => e.stopPropagation(), style: { display: "flex", gap: "4px" }, children: [
1887
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
1888
+ "button",
1889
+ {
1890
+ onClick: () => handleDeleteFolder(folder.id),
1891
+ style: { padding: "2px 8px", fontSize: "12px", backgroundColor: "#dc3545", color: "#fff", border: "none", borderRadius: "4px", cursor: "pointer" },
1892
+ children: t.delete
1893
+ }
1894
+ ),
1895
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
1896
+ "button",
1897
+ {
1898
+ onClick: () => setConfirmDeleteFolderId(null),
1899
+ style: { padding: "2px 8px", fontSize: "12px", backgroundColor: "transparent", border: "1px solid var(--default-border-color, #ccc)", borderRadius: "4px", cursor: "pointer", color: "inherit" },
1900
+ children: t.cancel
1901
+ }
1902
+ )
1903
+ ] }) : editingFolderId !== folder.id && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { onClick: (e) => e.stopPropagation(), style: { display: "flex", gap: "2px" }, children: [
1904
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
1905
+ "button",
1906
+ {
1907
+ onClick: () => {
1908
+ setEditingFolderId(folder.id);
1909
+ setEditFolderName(folder.name);
1910
+ },
1911
+ style: { background: "none", border: "none", cursor: "pointer", padding: "2px", fontSize: "12px", opacity: 0.5 },
1912
+ title: t.renameFolder,
1913
+ children: "\u270F\uFE0F"
1914
+ }
1915
+ ),
1916
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
1917
+ "button",
1918
+ {
1919
+ onClick: () => setConfirmDeleteFolderId(folder.id),
1920
+ style: { background: "none", border: "none", cursor: "pointer", padding: "2px", fontSize: "12px", opacity: 0.5 },
1921
+ title: t.deleteFolder,
1922
+ children: "\u{1F5D1}\uFE0F"
1923
+ }
1924
+ )
1925
+ ] })
1926
+ ]
1927
+ }
1928
+ ),
1929
+ isExpanded && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: { paddingLeft: "24px", marginTop: "2px" }, onClick: () => setSelectedId(null), children: [
1930
+ folderDrawings.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: { padding: "8px 12px", fontSize: "12px", color: "var(--text-secondary-color, #888)", fontStyle: "italic" }, children: t.noDrawingsYet }),
1931
+ folderDrawings.map(renderDrawingRow)
1932
+ ] })
1933
+ ]
1934
+ },
1935
+ folder.id
1936
+ );
1904
1937
  };
1905
1938
  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
1906
1939
  "div",
@@ -1978,7 +2011,7 @@ var DrawingsDialog = ({
1978
2011
  }
1979
2012
  ) }),
1980
2013
  /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: { flex: 1, overflow: "auto" }, children: [
1981
- isRefreshing && drawings.length === 0 ? /* @__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" }, children: [
2014
+ isRefreshing && drawings.length === 0 ? /* @__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: [
1982
2015
  filteredFolders.map(renderFolderGroup),
1983
2016
  draggingDrawingId && folders.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
1984
2017
  "div",
@@ -2070,9 +2103,8 @@ var DrawingsDialog = ({
2070
2103
  "button",
2071
2104
  {
2072
2105
  onClick: handleCreateFolder,
2073
- disabled: busyFolderId === "__creating__",
2074
- style: { padding: "8px 16px", fontSize: "14px", backgroundColor: "var(--color-primary, #6c63ff)", color: "#fff", border: "none", borderRadius: "8px", cursor: "pointer", opacity: busyFolderId === "__creating__" ? 0.6 : 1 },
2075
- children: busyFolderId === "__creating__" ? "\u23F3" : t.save
2106
+ style: { padding: "8px 16px", fontSize: "14px", backgroundColor: "var(--color-primary, #6c63ff)", color: "#fff", border: "none", borderRadius: "8px", cursor: "pointer" },
2107
+ children: t.save
2076
2108
  }
2077
2109
  ),
2078
2110
  /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
package/dist/index.mjs CHANGED
@@ -443,19 +443,38 @@ function WorkspaceProvider({ children, lang = "en" }) {
443
443
  const [isDrawingConflict, setIsDrawingConflict] = useState(false);
444
444
  const prevConflictRef = useRef(false);
445
445
  useEffect(() => {
446
- if (prevConflictRef.current && !isDrawingConflict && activeDrawing?.id) {
447
- getDrawing(activeDrawing.id).then((fresh) => {
448
- if (fresh) {
449
- setActiveDrawing2(fresh);
446
+ const wasConflict = prevConflictRef.current;
447
+ prevConflictRef.current = isDrawingConflict;
448
+ if (wasConflict && !isDrawingConflict) {
449
+ const id = activeDrawingIdRef.current;
450
+ if (id) {
451
+ getDrawing(id).then((fresh) => {
452
+ if (fresh && activeDrawingIdRef.current === id) {
453
+ setActiveDrawing2(fresh);
454
+ }
455
+ });
456
+ }
457
+ }
458
+ }, [isDrawingConflict]);
459
+ useEffect(() => {
460
+ let channel = null;
461
+ try {
462
+ channel = new BroadcastChannel(TAB_CHANNEL);
463
+ channel.onmessage = (event) => {
464
+ if (event.data?.type === "ping") {
465
+ channel?.postMessage({ type: "pong", tabId: TAB_ID });
450
466
  }
451
- });
467
+ };
468
+ } catch {
452
469
  }
453
- prevConflictRef.current = isDrawingConflict;
454
- }, [isDrawingConflict, activeDrawing?.id]);
470
+ return () => {
471
+ channel?.close();
472
+ };
473
+ }, []);
455
474
  useEffect(() => {
456
475
  cleanupStaleTabs();
457
476
  const timer = setTimeout(() => {
458
- const drawingId = activeDrawing?.id;
477
+ const drawingId = activeDrawingIdRef.current;
459
478
  if (drawingId) {
460
479
  setIsDrawingConflict(isDrawingOpenedEarlierInOtherTab(drawingId));
461
480
  }
@@ -481,9 +500,6 @@ function WorkspaceProvider({ children, lang = "en" }) {
481
500
  channel.postMessage({ type: "drawing-changed", tabId: TAB_ID, drawingId });
482
501
  channel.onmessage = (event) => {
483
502
  if (event.data?.tabId !== TAB_ID) {
484
- if (event.data?.type === "ping") {
485
- channel?.postMessage({ type: "pong", tabId: TAB_ID });
486
- }
487
503
  recheckConflict();
488
504
  }
489
505
  };
@@ -1291,6 +1307,7 @@ var DrawingsDialog = ({
1291
1307
  const [editName, setEditName] = useState4("");
1292
1308
  const [confirmDeleteId, setConfirmDeleteId] = useState4(null);
1293
1309
  const [switchingId, setSwitchingId] = useState4(null);
1310
+ const [selectedId, setSelectedId] = useState4(null);
1294
1311
  const [expandedFolders, setExpandedFolders] = useState4(/* @__PURE__ */ new Set());
1295
1312
  const [creatingFolder, setCreatingFolder] = useState4(false);
1296
1313
  const [newFolderName, setNewFolderName] = useState4("");
@@ -1299,7 +1316,6 @@ var DrawingsDialog = ({
1299
1316
  const [confirmDeleteFolderId, setConfirmDeleteFolderId] = useState4(null);
1300
1317
  const [movingDrawingId, setMovingDrawingId] = useState4(null);
1301
1318
  const [searchQuery, setSearchQuery] = useState4("");
1302
- const [busyFolderId, setBusyFolderId] = useState4(null);
1303
1319
  const [isRefreshing, setIsRefreshing] = useState4(false);
1304
1320
  const [draggingDrawingId, setDraggingDrawingId] = useState4(null);
1305
1321
  const [dropTargetFolderId, setDropTargetFolderId] = useState4(null);
@@ -1308,6 +1324,8 @@ var DrawingsDialog = ({
1308
1324
  const dialogRef = useRef3(null);
1309
1325
  const newFolderInputRef = useRef3(null);
1310
1326
  const prevOpenRef = useRef3(false);
1327
+ const foldersRef = useRef3(folders);
1328
+ foldersRef.current = folders;
1311
1329
  useEffect3(() => {
1312
1330
  if (open) {
1313
1331
  setIsRefreshing(true);
@@ -1315,11 +1333,12 @@ var DrawingsDialog = ({
1315
1333
  if (!prevOpenRef.current) {
1316
1334
  setPosition(null);
1317
1335
  setSearchQuery("");
1318
- setExpandedFolders(new Set(folders.map((f) => f.id)));
1336
+ setSelectedId(null);
1337
+ setExpandedFolders(new Set(foldersRef.current.map((f) => f.id)));
1319
1338
  }
1320
1339
  }
1321
1340
  prevOpenRef.current = open;
1322
- }, [open, refreshDrawings, folders]);
1341
+ }, [open, refreshDrawings]);
1323
1342
  useEffect3(() => {
1324
1343
  if (creatingFolder && newFolderInputRef.current) {
1325
1344
  newFolderInputRef.current.focus();
@@ -1349,6 +1368,7 @@ var DrawingsDialog = ({
1349
1368
  }, [position]);
1350
1369
  const handleSelect = useCallback2(async (drawing) => {
1351
1370
  setSwitchingId(drawing.id);
1371
+ setSelectedId(null);
1352
1372
  await switchDrawing(drawing.id);
1353
1373
  onDrawingSelect?.(drawing);
1354
1374
  setSwitchingId(null);
@@ -1361,9 +1381,9 @@ var DrawingsDialog = ({
1361
1381
  setEditingId(drawing.id);
1362
1382
  setEditName(drawing.name);
1363
1383
  }, []);
1364
- const handleSaveEdit = useCallback2(async () => {
1384
+ const handleSaveEdit = useCallback2(() => {
1365
1385
  if (editingId && editName.trim()) {
1366
- await renameDrawing(editingId, editName.trim());
1386
+ renameDrawing(editingId, editName.trim());
1367
1387
  setEditingId(null);
1368
1388
  setEditName("");
1369
1389
  }
@@ -1372,40 +1392,36 @@ var DrawingsDialog = ({
1372
1392
  setEditingId(null);
1373
1393
  setEditName("");
1374
1394
  }, []);
1375
- const handleDelete = useCallback2(async (id) => {
1376
- await removeDrawing(id);
1395
+ const handleDelete = useCallback2((id) => {
1396
+ removeDrawing(id);
1377
1397
  setConfirmDeleteId(null);
1378
1398
  }, [removeDrawing]);
1379
- const handleCreateFolder = useCallback2(async () => {
1399
+ const handleCreateFolder = useCallback2(() => {
1380
1400
  if (newFolderName.trim()) {
1381
- setBusyFolderId("__creating__");
1382
- const folder = await createFolder2(newFolderName.trim());
1383
- if (folder) {
1384
- setExpandedFolders((prev) => /* @__PURE__ */ new Set([...prev, folder.id]));
1385
- }
1386
- setBusyFolderId(null);
1401
+ createFolder2(newFolderName.trim()).then((folder) => {
1402
+ if (folder) {
1403
+ setExpandedFolders((prev) => /* @__PURE__ */ new Set([...prev, folder.id]));
1404
+ }
1405
+ });
1387
1406
  }
1388
1407
  setCreatingFolder(false);
1389
1408
  setNewFolderName("");
1390
1409
  }, [newFolderName, createFolder2]);
1391
- const handleSaveFolderEdit = useCallback2(async () => {
1410
+ const handleSaveFolderEdit = useCallback2(() => {
1392
1411
  if (editingFolderId && editFolderName.trim()) {
1393
- setBusyFolderId(editingFolderId);
1394
- await renameFolder2(editingFolderId, editFolderName.trim());
1395
- setBusyFolderId(null);
1412
+ renameFolder2(editingFolderId, editFolderName.trim());
1396
1413
  }
1397
1414
  setEditingFolderId(null);
1398
1415
  setEditFolderName("");
1399
1416
  }, [editingFolderId, editFolderName, renameFolder2]);
1400
- const handleDeleteFolder = useCallback2(async (id) => {
1401
- setBusyFolderId(id);
1402
- await deleteFolder2(id);
1403
- setBusyFolderId(null);
1417
+ const handleDeleteFolder = useCallback2((id) => {
1418
+ deleteFolder2(id);
1404
1419
  setConfirmDeleteFolderId(null);
1405
1420
  }, [deleteFolder2]);
1406
- const handleMoveToFolder = useCallback2(async (drawingId, folderId) => {
1407
- await moveDrawingToFolder2(drawingId, folderId);
1421
+ const handleMoveToFolder = useCallback2((drawingId, folderId) => {
1408
1422
  setMovingDrawingId(null);
1423
+ setSelectedId(null);
1424
+ moveDrawingToFolder2(drawingId, folderId);
1409
1425
  }, [moveDrawingToFolder2]);
1410
1426
  const toggleFolder = useCallback2((folderId) => {
1411
1427
  setExpandedFolders((prev) => {
@@ -1487,8 +1503,12 @@ var DrawingsDialog = ({
1487
1503
  },
1488
1504
  onDragEnd: () => {
1489
1505
  setDraggingDrawingId(null);
1490
- setDropTargetFolderId("__none__");
1491
- setTimeout(() => setDropTargetFolderId(null), 0);
1506
+ setDropTargetFolderId(null);
1507
+ },
1508
+ onClick: (e) => {
1509
+ e.stopPropagation();
1510
+ if (editingId || confirmDeleteId || movingDrawingId) return;
1511
+ setSelectedId(drawing.id);
1492
1512
  },
1493
1513
  style: {
1494
1514
  padding: "10px 12px",
@@ -1497,9 +1517,10 @@ var DrawingsDialog = ({
1497
1517
  gap: "12px",
1498
1518
  borderRadius: "8px",
1499
1519
  marginBottom: "4px",
1500
- cursor: draggingDrawingId ? "grabbing" : "default",
1501
- backgroundColor: activeDrawing?.id === drawing.id ? "var(--color-primary-light, rgba(108, 99, 255, 0.1))" : "transparent",
1502
- transition: "background-color 0.15s",
1520
+ cursor: draggingDrawingId ? "grabbing" : "pointer",
1521
+ 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",
1522
+ border: selectedId === drawing.id && activeDrawing?.id !== drawing.id ? "1px solid var(--color-primary, #6c63ff)" : "1px solid transparent",
1523
+ transition: "background-color 0.15s, border-color 0.15s",
1503
1524
  opacity: draggingDrawingId === drawing.id ? 0.4 : switchingId && switchingId !== drawing.id ? 0.5 : 1
1504
1525
  },
1505
1526
  children: [
@@ -1714,125 +1735,137 @@ var DrawingsDialog = ({
1714
1735
  const renderFolderGroup = (folder) => {
1715
1736
  const folderDrawings = drawingsByFolder[folder.id] || [];
1716
1737
  const isExpanded = expandedFolders.has(folder.id);
1717
- return /* @__PURE__ */ jsxs4("div", { style: { marginBottom: "4px" }, children: [
1718
- /* @__PURE__ */ jsxs4(
1719
- "div",
1720
- {
1721
- onClick: () => toggleFolder(folder.id),
1722
- onDragOver: (e) => {
1723
- if (!draggingDrawingId) return;
1724
- e.preventDefault();
1725
- e.dataTransfer.dropEffect = "move";
1726
- setDropTargetFolderId(folder.id);
1727
- },
1728
- onDragLeave: () => {
1738
+ return /* @__PURE__ */ jsxs4(
1739
+ "div",
1740
+ {
1741
+ style: { marginBottom: "4px" },
1742
+ onDragOver: (e) => {
1743
+ if (!draggingDrawingId) return;
1744
+ e.preventDefault();
1745
+ e.dataTransfer.dropEffect = "move";
1746
+ setDropTargetFolderId(folder.id);
1747
+ },
1748
+ onDragLeave: (e) => {
1749
+ if (!e.currentTarget.contains(e.relatedTarget)) {
1729
1750
  if (dropTargetFolderId === folder.id) setDropTargetFolderId(null);
1730
- },
1731
- onDrop: (e) => {
1732
- e.preventDefault();
1733
- if (draggingDrawingId) {
1734
- handleMoveToFolder(draggingDrawingId, folder.id);
1735
- setDraggingDrawingId(null);
1736
- setDropTargetFolderId(null);
1737
- setExpandedFolders((prev) => /* @__PURE__ */ new Set([...prev, folder.id]));
1738
- }
1739
- },
1740
- style: {
1741
- padding: "8px 12px",
1742
- display: "flex",
1743
- alignItems: "center",
1744
- gap: "8px",
1745
- borderRadius: "8px",
1746
- cursor: "pointer",
1747
- backgroundColor: dropTargetFolderId === folder.id ? "var(--color-primary-light, rgba(108, 99, 255, 0.2))" : "var(--color-surface-mid, rgba(0, 0, 0, 0.03))",
1748
- border: dropTargetFolderId === folder.id ? "2px dashed var(--color-primary, #6c63ff)" : "2px solid transparent",
1749
- transition: "background-color 0.15s, border-color 0.15s"
1750
- },
1751
- children: [
1752
- /* @__PURE__ */ jsx6("span", { style: { fontSize: "12px", width: "16px", textAlign: "center", flexShrink: 0 }, children: isExpanded ? "\u25BC" : "\u25B6" }),
1753
- /* @__PURE__ */ jsx6("span", { style: { fontSize: "16px", flexShrink: 0 }, children: busyFolderId === folder.id ? /* @__PURE__ */ jsx6("span", { style: { display: "inline-block", animation: "spin 1s linear infinite" }, children: "\u23F3" }) : "\u{1F4C1}" }),
1754
- /* @__PURE__ */ jsx6("div", { style: { flex: 1, minWidth: 0 }, children: editingFolderId === folder.id ? /* @__PURE__ */ jsxs4("div", { style: { display: "flex", gap: "6px", alignItems: "center" }, onClick: (e) => e.stopPropagation(), children: [
1755
- /* @__PURE__ */ jsx6(
1756
- "input",
1757
- {
1758
- type: "text",
1759
- value: editFolderName,
1760
- onChange: (e) => setEditFolderName(e.target.value),
1761
- onKeyDown: (e) => {
1762
- if (e.key === "Enter") handleSaveFolderEdit();
1763
- if (e.key === "Escape") {
1764
- setEditingFolderId(null);
1765
- setEditFolderName("");
1751
+ }
1752
+ },
1753
+ onDrop: (e) => {
1754
+ e.preventDefault();
1755
+ if (draggingDrawingId) {
1756
+ handleMoveToFolder(draggingDrawingId, folder.id);
1757
+ setDraggingDrawingId(null);
1758
+ setDropTargetFolderId(null);
1759
+ setExpandedFolders((prev) => /* @__PURE__ */ new Set([...prev, folder.id]));
1760
+ }
1761
+ },
1762
+ children: [
1763
+ /* @__PURE__ */ jsxs4(
1764
+ "div",
1765
+ {
1766
+ onClick: () => {
1767
+ toggleFolder(folder.id);
1768
+ setSelectedId(null);
1769
+ },
1770
+ style: {
1771
+ padding: "8px 12px",
1772
+ display: "flex",
1773
+ alignItems: "center",
1774
+ gap: "8px",
1775
+ borderRadius: "8px",
1776
+ cursor: "pointer",
1777
+ backgroundColor: dropTargetFolderId === folder.id ? "var(--color-primary-light, rgba(108, 99, 255, 0.2))" : "var(--color-surface-mid, rgba(0, 0, 0, 0.03))",
1778
+ border: dropTargetFolderId === folder.id ? "2px dashed var(--color-primary, #6c63ff)" : "2px solid transparent",
1779
+ transition: "background-color 0.15s, border-color 0.15s"
1780
+ },
1781
+ children: [
1782
+ /* @__PURE__ */ jsx6("span", { style: { fontSize: "12px", width: "16px", textAlign: "center", flexShrink: 0 }, children: isExpanded ? "\u25BC" : "\u25B6" }),
1783
+ /* @__PURE__ */ jsx6("span", { style: { fontSize: "16px", flexShrink: 0 }, children: "\u{1F4C1}" }),
1784
+ /* @__PURE__ */ jsx6("div", { style: { flex: 1, minWidth: 0 }, children: editingFolderId === folder.id ? /* @__PURE__ */ jsxs4("div", { style: { display: "flex", gap: "6px", alignItems: "center" }, onClick: (e) => e.stopPropagation(), children: [
1785
+ /* @__PURE__ */ jsx6(
1786
+ "input",
1787
+ {
1788
+ type: "text",
1789
+ value: editFolderName,
1790
+ onChange: (e) => setEditFolderName(e.target.value),
1791
+ onKeyDown: (e) => {
1792
+ if (e.key === "Enter") handleSaveFolderEdit();
1793
+ if (e.key === "Escape") {
1794
+ setEditingFolderId(null);
1795
+ setEditFolderName("");
1796
+ }
1797
+ },
1798
+ autoFocus: true,
1799
+ style: { flex: 1, padding: "2px 6px", fontSize: "14px", border: "1px solid var(--color-primary, #6c63ff)", borderRadius: "4px", outline: "none" }
1766
1800
  }
1767
- },
1768
- autoFocus: true,
1769
- style: { flex: 1, padding: "2px 6px", fontSize: "14px", border: "1px solid var(--color-primary, #6c63ff)", borderRadius: "4px", outline: "none" }
1770
- }
1771
- ),
1772
- /* @__PURE__ */ jsx6(
1773
- "button",
1774
- {
1775
- onClick: handleSaveFolderEdit,
1776
- style: { padding: "2px 8px", fontSize: "12px", backgroundColor: "var(--color-primary, #6c63ff)", color: "#fff", border: "none", borderRadius: "4px", cursor: "pointer" },
1777
- children: t.save
1778
- }
1779
- )
1780
- ] }) : /* @__PURE__ */ jsxs4("span", { style: { fontWeight: 600, fontSize: "14px" }, children: [
1781
- folder.name,
1782
- /* @__PURE__ */ jsxs4("span", { style: { fontWeight: 400, fontSize: "12px", color: "var(--text-secondary-color, #888)", marginLeft: "6px" }, children: [
1783
- "(",
1784
- folderDrawings.length,
1785
- ")"
1786
- ] })
1787
- ] }) }),
1788
- confirmDeleteFolderId === folder.id ? /* @__PURE__ */ jsxs4("div", { onClick: (e) => e.stopPropagation(), style: { display: "flex", gap: "4px" }, children: [
1789
- /* @__PURE__ */ jsx6(
1790
- "button",
1791
- {
1792
- onClick: () => handleDeleteFolder(folder.id),
1793
- style: { padding: "2px 8px", fontSize: "12px", backgroundColor: "#dc3545", color: "#fff", border: "none", borderRadius: "4px", cursor: "pointer" },
1794
- children: t.delete
1795
- }
1796
- ),
1797
- /* @__PURE__ */ jsx6(
1798
- "button",
1799
- {
1800
- onClick: () => setConfirmDeleteFolderId(null),
1801
- style: { padding: "2px 8px", fontSize: "12px", backgroundColor: "transparent", border: "1px solid var(--default-border-color, #ccc)", borderRadius: "4px", cursor: "pointer", color: "inherit" },
1802
- children: t.cancel
1803
- }
1804
- )
1805
- ] }) : editingFolderId !== folder.id && /* @__PURE__ */ jsxs4("div", { onClick: (e) => e.stopPropagation(), style: { display: "flex", gap: "2px" }, children: [
1806
- /* @__PURE__ */ jsx6(
1807
- "button",
1808
- {
1809
- onClick: () => {
1810
- setEditingFolderId(folder.id);
1811
- setEditFolderName(folder.name);
1812
- },
1813
- style: { background: "none", border: "none", cursor: "pointer", padding: "2px", fontSize: "12px", opacity: 0.5 },
1814
- title: t.renameFolder,
1815
- children: "\u270F\uFE0F"
1816
- }
1817
- ),
1818
- /* @__PURE__ */ jsx6(
1819
- "button",
1820
- {
1821
- onClick: () => setConfirmDeleteFolderId(folder.id),
1822
- style: { background: "none", border: "none", cursor: "pointer", padding: "2px", fontSize: "12px", opacity: 0.5 },
1823
- title: t.deleteFolder,
1824
- children: "\u{1F5D1}\uFE0F"
1825
- }
1826
- )
1827
- ] })
1828
- ]
1829
- }
1830
- ),
1831
- isExpanded && /* @__PURE__ */ jsxs4("div", { style: { paddingLeft: "24px", marginTop: "2px" }, children: [
1832
- folderDrawings.length === 0 && /* @__PURE__ */ jsx6("div", { style: { padding: "8px 12px", fontSize: "12px", color: "var(--text-secondary-color, #888)", fontStyle: "italic" }, children: t.noDrawingsYet }),
1833
- folderDrawings.map(renderDrawingRow)
1834
- ] })
1835
- ] }, folder.id);
1801
+ ),
1802
+ /* @__PURE__ */ jsx6(
1803
+ "button",
1804
+ {
1805
+ onClick: handleSaveFolderEdit,
1806
+ style: { padding: "2px 8px", fontSize: "12px", backgroundColor: "var(--color-primary, #6c63ff)", color: "#fff", border: "none", borderRadius: "4px", cursor: "pointer" },
1807
+ children: t.save
1808
+ }
1809
+ )
1810
+ ] }) : /* @__PURE__ */ jsxs4("span", { style: { fontWeight: 600, fontSize: "14px" }, children: [
1811
+ folder.name,
1812
+ /* @__PURE__ */ jsxs4("span", { style: { fontWeight: 400, fontSize: "12px", color: "var(--text-secondary-color, #888)", marginLeft: "6px" }, children: [
1813
+ "(",
1814
+ folderDrawings.length,
1815
+ ")"
1816
+ ] })
1817
+ ] }) }),
1818
+ confirmDeleteFolderId === folder.id ? /* @__PURE__ */ jsxs4("div", { onClick: (e) => e.stopPropagation(), style: { display: "flex", gap: "4px" }, children: [
1819
+ /* @__PURE__ */ jsx6(
1820
+ "button",
1821
+ {
1822
+ onClick: () => handleDeleteFolder(folder.id),
1823
+ style: { padding: "2px 8px", fontSize: "12px", backgroundColor: "#dc3545", color: "#fff", border: "none", borderRadius: "4px", cursor: "pointer" },
1824
+ children: t.delete
1825
+ }
1826
+ ),
1827
+ /* @__PURE__ */ jsx6(
1828
+ "button",
1829
+ {
1830
+ onClick: () => setConfirmDeleteFolderId(null),
1831
+ style: { padding: "2px 8px", fontSize: "12px", backgroundColor: "transparent", border: "1px solid var(--default-border-color, #ccc)", borderRadius: "4px", cursor: "pointer", color: "inherit" },
1832
+ children: t.cancel
1833
+ }
1834
+ )
1835
+ ] }) : editingFolderId !== folder.id && /* @__PURE__ */ jsxs4("div", { onClick: (e) => e.stopPropagation(), style: { display: "flex", gap: "2px" }, children: [
1836
+ /* @__PURE__ */ jsx6(
1837
+ "button",
1838
+ {
1839
+ onClick: () => {
1840
+ setEditingFolderId(folder.id);
1841
+ setEditFolderName(folder.name);
1842
+ },
1843
+ style: { background: "none", border: "none", cursor: "pointer", padding: "2px", fontSize: "12px", opacity: 0.5 },
1844
+ title: t.renameFolder,
1845
+ children: "\u270F\uFE0F"
1846
+ }
1847
+ ),
1848
+ /* @__PURE__ */ jsx6(
1849
+ "button",
1850
+ {
1851
+ onClick: () => setConfirmDeleteFolderId(folder.id),
1852
+ style: { background: "none", border: "none", cursor: "pointer", padding: "2px", fontSize: "12px", opacity: 0.5 },
1853
+ title: t.deleteFolder,
1854
+ children: "\u{1F5D1}\uFE0F"
1855
+ }
1856
+ )
1857
+ ] })
1858
+ ]
1859
+ }
1860
+ ),
1861
+ isExpanded && /* @__PURE__ */ jsxs4("div", { style: { paddingLeft: "24px", marginTop: "2px" }, onClick: () => setSelectedId(null), children: [
1862
+ folderDrawings.length === 0 && /* @__PURE__ */ jsx6("div", { style: { padding: "8px 12px", fontSize: "12px", color: "var(--text-secondary-color, #888)", fontStyle: "italic" }, children: t.noDrawingsYet }),
1863
+ folderDrawings.map(renderDrawingRow)
1864
+ ] })
1865
+ ]
1866
+ },
1867
+ folder.id
1868
+ );
1836
1869
  };
1837
1870
  return /* @__PURE__ */ jsx6(
1838
1871
  "div",
@@ -1910,7 +1943,7 @@ var DrawingsDialog = ({
1910
1943
  }
1911
1944
  ) }),
1912
1945
  /* @__PURE__ */ jsxs4("div", { style: { flex: 1, overflow: "auto" }, children: [
1913
- isRefreshing && drawings.length === 0 ? /* @__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" }, children: [
1946
+ isRefreshing && drawings.length === 0 ? /* @__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: [
1914
1947
  filteredFolders.map(renderFolderGroup),
1915
1948
  draggingDrawingId && folders.length > 0 && /* @__PURE__ */ jsx6(
1916
1949
  "div",
@@ -2002,9 +2035,8 @@ var DrawingsDialog = ({
2002
2035
  "button",
2003
2036
  {
2004
2037
  onClick: handleCreateFolder,
2005
- disabled: busyFolderId === "__creating__",
2006
- style: { padding: "8px 16px", fontSize: "14px", backgroundColor: "var(--color-primary, #6c63ff)", color: "#fff", border: "none", borderRadius: "8px", cursor: "pointer", opacity: busyFolderId === "__creating__" ? 0.6 : 1 },
2007
- children: busyFolderId === "__creating__" ? "\u23F3" : t.save
2038
+ style: { padding: "8px 16px", fontSize: "14px", backgroundColor: "var(--color-primary, #6c63ff)", color: "#fff", border: "none", borderRadius: "8px", cursor: "pointer" },
2039
+ children: t.save
2008
2040
  }
2009
2041
  ),
2010
2042
  /* @__PURE__ */ jsx6(
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "rita-workspace",
3
- "version": "0.5.6",
3
+ "version": "0.5.8",
4
4
  "description": "Multi-drawing workspace feature for Rita (Excalidraw fork)",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.mjs",