rita-workspace 0.5.9 → 0.5.11

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 +170 -140
  2. package/dist/index.mjs +170 -140
  3. package/package.json +1 -1
package/dist/index.js CHANGED
@@ -1320,7 +1320,10 @@ var import_jsx_runtime6 = require("react/jsx-runtime");
1320
1320
  var ActionButton = ({ icon, label, description, onClick, primary }) => /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
1321
1321
  "button",
1322
1322
  {
1323
- onClick,
1323
+ onClick: (e) => {
1324
+ e.stopPropagation();
1325
+ onClick();
1326
+ },
1324
1327
  style: {
1325
1328
  display: "flex",
1326
1329
  alignItems: "center",
@@ -1333,7 +1336,8 @@ var ActionButton = ({ icon, label, description, onClick, primary }) => /* @__PUR
1333
1336
  cursor: "pointer",
1334
1337
  textAlign: "left",
1335
1338
  color: "inherit",
1336
- fontSize: "14px"
1339
+ fontSize: "14px",
1340
+ outline: "none"
1337
1341
  },
1338
1342
  children: [
1339
1343
  /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { style: { fontSize: "20px", flexShrink: 0 }, children: icon }),
@@ -1378,6 +1382,7 @@ var DrawingsDialog = ({
1378
1382
  const [confirmDeleteId, setConfirmDeleteId] = (0, import_react5.useState)(null);
1379
1383
  const [switchingId, setSwitchingId] = (0, import_react5.useState)(null);
1380
1384
  const [selectedId, setSelectedId] = (0, import_react5.useState)(null);
1385
+ const [hoveredId, setHoveredId] = (0, import_react5.useState)(null);
1381
1386
  const [expandedFolders, setExpandedFolders] = (0, import_react5.useState)(/* @__PURE__ */ new Set());
1382
1387
  const [creatingFolder, setCreatingFolder] = (0, import_react5.useState)(false);
1383
1388
  const [newFolderName, setNewFolderName] = (0, import_react5.useState)("");
@@ -1575,6 +1580,8 @@ var DrawingsDialog = ({
1575
1580
  setDraggingDrawingId(null);
1576
1581
  setDropTargetFolderId(null);
1577
1582
  },
1583
+ onMouseEnter: () => setHoveredId(drawing.id),
1584
+ onMouseLeave: () => setHoveredId(null),
1578
1585
  onClick: (e) => {
1579
1586
  e.stopPropagation();
1580
1587
  if (editingId || confirmDeleteId || movingDrawingId) return;
@@ -1694,7 +1701,12 @@ var DrawingsDialog = ({
1694
1701
  formatDate(drawing.updatedAt)
1695
1702
  ] })
1696
1703
  ] }) }),
1697
- /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: { display: "flex", gap: "2px", alignItems: "center" }, children: confirmDeleteId === drawing.id ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
1704
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: {
1705
+ display: "flex",
1706
+ gap: "2px",
1707
+ alignItems: "center",
1708
+ visibility: hoveredId === drawing.id || selectedId === drawing.id || activeDrawing?.id === drawing.id || confirmDeleteId === drawing.id || movingDrawingId === drawing.id || editingId === drawing.id ? "visible" : "hidden"
1709
+ }, children: confirmDeleteId === drawing.id ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
1698
1710
  /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
1699
1711
  "button",
1700
1712
  {
@@ -2012,146 +2024,164 @@ var DrawingsDialog = ({
2012
2024
  }
2013
2025
  }
2014
2026
  ) }),
2015
- /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: { flex: 1, overflow: "auto" }, children: [
2016
- 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: [
2017
- filteredFolders.map(renderFolderGroup),
2018
- draggingDrawingId && folders.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
2019
- "div",
2020
- {
2021
- onDragOver: (e) => {
2022
- e.preventDefault();
2023
- e.dataTransfer.dropEffect = "move";
2024
- setDropTargetFolderId("__root__");
2025
- },
2026
- onDragLeave: () => {
2027
- if (dropTargetFolderId === "__root__") setDropTargetFolderId(null);
2028
- },
2029
- onDrop: (e) => {
2030
- e.preventDefault();
2031
- if (draggingDrawingId) {
2032
- handleMoveToFolder(draggingDrawingId, null);
2033
- setDraggingDrawingId(null);
2034
- setDropTargetFolderId(null);
2035
- }
2036
- },
2037
- style: {
2038
- padding: "8px 12px",
2039
- marginBottom: "4px",
2040
- borderRadius: "8px",
2041
- textAlign: "center",
2042
- fontSize: "12px",
2043
- color: "var(--text-secondary-color, #888)",
2044
- backgroundColor: dropTargetFolderId === "__root__" ? "var(--color-primary-light, rgba(108, 99, 255, 0.2))" : "transparent",
2045
- border: "2px dashed var(--default-border-color, #ccc)",
2046
- borderColor: dropTargetFolderId === "__root__" ? "var(--color-primary, #6c63ff)" : "var(--default-border-color, #ccc)",
2047
- transition: "background-color 0.15s, border-color 0.15s"
2048
- },
2049
- children: t.moveToRoot
2050
- }
2051
- ),
2052
- rootDrawings.map(renderDrawingRow)
2053
- ] }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: { padding: "24px 20px", textAlign: "center", color: "var(--text-secondary-color, #666)" }, children: [
2054
- /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { children: t.noDrawingsYet }),
2055
- /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { children: t.clickNewToStart })
2056
- ] }),
2057
- /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: sectionHeaderStyle, children: t.sectionDrawings }),
2058
- /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: { padding: "0 20px", display: "flex", flexDirection: "column", gap: "8px" }, children: [
2059
- /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
2060
- ActionButton,
2061
- {
2062
- icon: "\u{1F4C4}",
2063
- label: t.createNewDrawing,
2064
- description: t.createNewDrawingDesc,
2065
- onClick: () => handleCreate(),
2066
- primary: true
2067
- }
2068
- ),
2069
- /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
2070
- ActionButton,
2071
- {
2072
- icon: "\u{1F4C2}",
2073
- label: t.openFromFile,
2074
- description: t.openFromFileDesc,
2075
- onClick: importExcalidrawFile
2027
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
2028
+ "div",
2029
+ {
2030
+ style: { flex: 1, overflow: "auto" },
2031
+ onClick: () => setSelectedId(null),
2032
+ onDragOver: (e) => {
2033
+ if (!draggingDrawingId) return;
2034
+ const el = e.currentTarget;
2035
+ const rect = el.getBoundingClientRect();
2036
+ const margin = 40;
2037
+ if (e.clientY - rect.top < margin) {
2038
+ el.scrollTop -= 8;
2039
+ } else if (rect.bottom - e.clientY < margin) {
2040
+ el.scrollTop += 8;
2076
2041
  }
2077
- ),
2078
- creatingFolder ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: { display: "flex", gap: "8px", alignItems: "center", padding: "4px 0" }, children: [
2079
- /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
2080
- "input",
2081
- {
2082
- ref: newFolderInputRef,
2083
- type: "text",
2084
- value: newFolderName,
2085
- onChange: (e) => setNewFolderName(e.target.value),
2086
- onKeyDown: (e) => {
2087
- if (e.key === "Enter") handleCreateFolder();
2088
- if (e.key === "Escape") {
2089
- setCreatingFolder(false);
2090
- setNewFolderName("");
2042
+ },
2043
+ children: [
2044
+ 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: [
2045
+ filteredFolders.map(renderFolderGroup),
2046
+ draggingDrawingId && folders.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
2047
+ "div",
2048
+ {
2049
+ onDragOver: (e) => {
2050
+ e.preventDefault();
2051
+ e.dataTransfer.dropEffect = "move";
2052
+ setDropTargetFolderId("__root__");
2053
+ },
2054
+ onDragLeave: () => {
2055
+ if (dropTargetFolderId === "__root__") setDropTargetFolderId(null);
2056
+ },
2057
+ onDrop: (e) => {
2058
+ e.preventDefault();
2059
+ if (draggingDrawingId) {
2060
+ handleMoveToFolder(draggingDrawingId, null);
2061
+ setDraggingDrawingId(null);
2062
+ setDropTargetFolderId(null);
2063
+ }
2064
+ },
2065
+ style: {
2066
+ padding: "8px 12px",
2067
+ marginBottom: "4px",
2068
+ borderRadius: "8px",
2069
+ textAlign: "center",
2070
+ fontSize: "12px",
2071
+ color: "var(--text-secondary-color, #888)",
2072
+ backgroundColor: dropTargetFolderId === "__root__" ? "var(--color-primary-light, rgba(108, 99, 255, 0.2))" : "transparent",
2073
+ border: "2px dashed var(--default-border-color, #ccc)",
2074
+ borderColor: dropTargetFolderId === "__root__" ? "var(--color-primary, #6c63ff)" : "var(--default-border-color, #ccc)",
2075
+ transition: "background-color 0.15s, border-color 0.15s"
2076
+ },
2077
+ children: t.moveToRoot
2078
+ }
2079
+ ),
2080
+ rootDrawings.map(renderDrawingRow)
2081
+ ] }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: { padding: "24px 20px", textAlign: "center", color: "var(--text-secondary-color, #666)" }, children: [
2082
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { children: t.noDrawingsYet }),
2083
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { children: t.clickNewToStart })
2084
+ ] }),
2085
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: sectionHeaderStyle, children: t.sectionDrawings }),
2086
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: { padding: "0 20px", display: "flex", flexDirection: "column", gap: "8px" }, children: [
2087
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
2088
+ ActionButton,
2089
+ {
2090
+ icon: "\u{1F4C4}",
2091
+ label: t.createNewDrawing,
2092
+ description: t.createNewDrawingDesc,
2093
+ onClick: () => handleCreate(),
2094
+ primary: true
2095
+ }
2096
+ ),
2097
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
2098
+ ActionButton,
2099
+ {
2100
+ icon: "\u{1F4C2}",
2101
+ label: t.openFromFile,
2102
+ description: t.openFromFileDesc,
2103
+ onClick: importExcalidrawFile
2104
+ }
2105
+ ),
2106
+ creatingFolder ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: { display: "flex", gap: "8px", alignItems: "center", padding: "4px 0" }, children: [
2107
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
2108
+ "input",
2109
+ {
2110
+ ref: newFolderInputRef,
2111
+ type: "text",
2112
+ value: newFolderName,
2113
+ onChange: (e) => setNewFolderName(e.target.value),
2114
+ onKeyDown: (e) => {
2115
+ if (e.key === "Enter") handleCreateFolder();
2116
+ if (e.key === "Escape") {
2117
+ setCreatingFolder(false);
2118
+ setNewFolderName("");
2119
+ }
2120
+ },
2121
+ placeholder: t.newFolderName,
2122
+ style: {
2123
+ flex: 1,
2124
+ padding: "8px 12px",
2125
+ fontSize: "14px",
2126
+ border: "1px solid var(--color-primary, #6c63ff)",
2127
+ borderRadius: "8px",
2128
+ outline: "none"
2129
+ }
2091
2130
  }
2092
- },
2093
- placeholder: t.newFolderName,
2094
- style: {
2095
- flex: 1,
2096
- padding: "8px 12px",
2097
- fontSize: "14px",
2098
- border: "1px solid var(--color-primary, #6c63ff)",
2099
- borderRadius: "8px",
2100
- outline: "none"
2131
+ ),
2132
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
2133
+ "button",
2134
+ {
2135
+ onClick: handleCreateFolder,
2136
+ style: { padding: "8px 16px", fontSize: "14px", backgroundColor: "var(--color-primary, #6c63ff)", color: "#fff", border: "none", borderRadius: "8px", cursor: "pointer" },
2137
+ children: t.save
2138
+ }
2139
+ ),
2140
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
2141
+ "button",
2142
+ {
2143
+ onClick: () => {
2144
+ setCreatingFolder(false);
2145
+ setNewFolderName("");
2146
+ },
2147
+ style: { padding: "8px 16px", fontSize: "14px", backgroundColor: "transparent", border: "1px solid var(--default-border-color, #ccc)", borderRadius: "8px", cursor: "pointer", color: "inherit" },
2148
+ children: t.cancel
2149
+ }
2150
+ )
2151
+ ] }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
2152
+ ActionButton,
2153
+ {
2154
+ icon: "\u{1F4C1}",
2155
+ label: t.createFolder,
2156
+ description: "",
2157
+ onClick: () => setCreatingFolder(true)
2101
2158
  }
2102
- }
2103
- ),
2104
- /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
2105
- "button",
2106
- {
2107
- onClick: handleCreateFolder,
2108
- style: { padding: "8px 16px", fontSize: "14px", backgroundColor: "var(--color-primary, #6c63ff)", color: "#fff", border: "none", borderRadius: "8px", cursor: "pointer" },
2109
- children: t.save
2110
- }
2111
- ),
2112
- /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
2113
- "button",
2114
- {
2115
- onClick: () => {
2116
- setCreatingFolder(false);
2117
- setNewFolderName("");
2118
- },
2119
- style: { padding: "8px 16px", fontSize: "14px", backgroundColor: "transparent", border: "1px solid var(--default-border-color, #ccc)", borderRadius: "8px", cursor: "pointer", color: "inherit" },
2120
- children: t.cancel
2121
- }
2122
- )
2123
- ] }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
2124
- ActionButton,
2125
- {
2126
- icon: "\u{1F4C1}",
2127
- label: t.createFolder,
2128
- description: "",
2129
- onClick: () => setCreatingFolder(true)
2130
- }
2131
- )
2132
- ] }),
2133
- /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: sectionHeaderStyle, children: t.sectionWorkspace }),
2134
- /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: { padding: "0 20px 16px", display: "flex", gap: "8px" }, children: [
2135
- /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
2136
- ActionButton,
2137
- {
2138
- icon: "\u{1F4BE}",
2139
- label: t.saveAllBackup,
2140
- description: t.saveAllBackupDesc,
2141
- onClick: exportWorkspace
2142
- }
2143
- ),
2144
- /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
2145
- ActionButton,
2146
- {
2147
- icon: "\u{1F4E5}",
2148
- label: t.loadBackup,
2149
- description: t.loadBackupDesc,
2150
- onClick: importWorkspace
2151
- }
2152
- )
2153
- ] })
2154
- ] })
2159
+ )
2160
+ ] }),
2161
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: sectionHeaderStyle, children: t.sectionWorkspace }),
2162
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: { padding: "0 20px 16px", display: "flex", gap: "8px" }, children: [
2163
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
2164
+ ActionButton,
2165
+ {
2166
+ icon: "\u{1F4BE}",
2167
+ label: t.saveAllBackup,
2168
+ description: t.saveAllBackupDesc,
2169
+ onClick: exportWorkspace
2170
+ }
2171
+ ),
2172
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
2173
+ ActionButton,
2174
+ {
2175
+ icon: "\u{1F4E5}",
2176
+ label: t.loadBackup,
2177
+ description: t.loadBackupDesc,
2178
+ onClick: importWorkspace
2179
+ }
2180
+ )
2181
+ ] })
2182
+ ]
2183
+ }
2184
+ )
2155
2185
  ] })
2156
2186
  }
2157
2187
  );
package/dist/index.mjs CHANGED
@@ -1252,7 +1252,10 @@ import { Fragment as Fragment3, jsx as jsx6, jsxs as jsxs4 } from "react/jsx-run
1252
1252
  var ActionButton = ({ icon, label, description, onClick, primary }) => /* @__PURE__ */ jsxs4(
1253
1253
  "button",
1254
1254
  {
1255
- onClick,
1255
+ onClick: (e) => {
1256
+ e.stopPropagation();
1257
+ onClick();
1258
+ },
1256
1259
  style: {
1257
1260
  display: "flex",
1258
1261
  alignItems: "center",
@@ -1265,7 +1268,8 @@ var ActionButton = ({ icon, label, description, onClick, primary }) => /* @__PUR
1265
1268
  cursor: "pointer",
1266
1269
  textAlign: "left",
1267
1270
  color: "inherit",
1268
- fontSize: "14px"
1271
+ fontSize: "14px",
1272
+ outline: "none"
1269
1273
  },
1270
1274
  children: [
1271
1275
  /* @__PURE__ */ jsx6("span", { style: { fontSize: "20px", flexShrink: 0 }, children: icon }),
@@ -1310,6 +1314,7 @@ var DrawingsDialog = ({
1310
1314
  const [confirmDeleteId, setConfirmDeleteId] = useState4(null);
1311
1315
  const [switchingId, setSwitchingId] = useState4(null);
1312
1316
  const [selectedId, setSelectedId] = useState4(null);
1317
+ const [hoveredId, setHoveredId] = useState4(null);
1313
1318
  const [expandedFolders, setExpandedFolders] = useState4(/* @__PURE__ */ new Set());
1314
1319
  const [creatingFolder, setCreatingFolder] = useState4(false);
1315
1320
  const [newFolderName, setNewFolderName] = useState4("");
@@ -1507,6 +1512,8 @@ var DrawingsDialog = ({
1507
1512
  setDraggingDrawingId(null);
1508
1513
  setDropTargetFolderId(null);
1509
1514
  },
1515
+ onMouseEnter: () => setHoveredId(drawing.id),
1516
+ onMouseLeave: () => setHoveredId(null),
1510
1517
  onClick: (e) => {
1511
1518
  e.stopPropagation();
1512
1519
  if (editingId || confirmDeleteId || movingDrawingId) return;
@@ -1626,7 +1633,12 @@ var DrawingsDialog = ({
1626
1633
  formatDate(drawing.updatedAt)
1627
1634
  ] })
1628
1635
  ] }) }),
1629
- /* @__PURE__ */ jsx6("div", { style: { display: "flex", gap: "2px", alignItems: "center" }, children: confirmDeleteId === drawing.id ? /* @__PURE__ */ jsxs4(Fragment3, { children: [
1636
+ /* @__PURE__ */ jsx6("div", { style: {
1637
+ display: "flex",
1638
+ gap: "2px",
1639
+ alignItems: "center",
1640
+ visibility: hoveredId === drawing.id || selectedId === drawing.id || activeDrawing?.id === drawing.id || confirmDeleteId === drawing.id || movingDrawingId === drawing.id || editingId === drawing.id ? "visible" : "hidden"
1641
+ }, children: confirmDeleteId === drawing.id ? /* @__PURE__ */ jsxs4(Fragment3, { children: [
1630
1642
  /* @__PURE__ */ jsx6(
1631
1643
  "button",
1632
1644
  {
@@ -1944,146 +1956,164 @@ var DrawingsDialog = ({
1944
1956
  }
1945
1957
  }
1946
1958
  ) }),
1947
- /* @__PURE__ */ jsxs4("div", { style: { flex: 1, overflow: "auto" }, children: [
1948
- 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: [
1949
- filteredFolders.map(renderFolderGroup),
1950
- draggingDrawingId && folders.length > 0 && /* @__PURE__ */ jsx6(
1951
- "div",
1952
- {
1953
- onDragOver: (e) => {
1954
- e.preventDefault();
1955
- e.dataTransfer.dropEffect = "move";
1956
- setDropTargetFolderId("__root__");
1957
- },
1958
- onDragLeave: () => {
1959
- if (dropTargetFolderId === "__root__") setDropTargetFolderId(null);
1960
- },
1961
- onDrop: (e) => {
1962
- e.preventDefault();
1963
- if (draggingDrawingId) {
1964
- handleMoveToFolder(draggingDrawingId, null);
1965
- setDraggingDrawingId(null);
1966
- setDropTargetFolderId(null);
1967
- }
1968
- },
1969
- style: {
1970
- padding: "8px 12px",
1971
- marginBottom: "4px",
1972
- borderRadius: "8px",
1973
- textAlign: "center",
1974
- fontSize: "12px",
1975
- color: "var(--text-secondary-color, #888)",
1976
- backgroundColor: dropTargetFolderId === "__root__" ? "var(--color-primary-light, rgba(108, 99, 255, 0.2))" : "transparent",
1977
- border: "2px dashed var(--default-border-color, #ccc)",
1978
- borderColor: dropTargetFolderId === "__root__" ? "var(--color-primary, #6c63ff)" : "var(--default-border-color, #ccc)",
1979
- transition: "background-color 0.15s, border-color 0.15s"
1980
- },
1981
- children: t.moveToRoot
1982
- }
1983
- ),
1984
- rootDrawings.map(renderDrawingRow)
1985
- ] }) : /* @__PURE__ */ jsxs4("div", { style: { padding: "24px 20px", textAlign: "center", color: "var(--text-secondary-color, #666)" }, children: [
1986
- /* @__PURE__ */ jsx6("p", { children: t.noDrawingsYet }),
1987
- /* @__PURE__ */ jsx6("p", { children: t.clickNewToStart })
1988
- ] }),
1989
- /* @__PURE__ */ jsx6("div", { style: sectionHeaderStyle, children: t.sectionDrawings }),
1990
- /* @__PURE__ */ jsxs4("div", { style: { padding: "0 20px", display: "flex", flexDirection: "column", gap: "8px" }, children: [
1991
- /* @__PURE__ */ jsx6(
1992
- ActionButton,
1993
- {
1994
- icon: "\u{1F4C4}",
1995
- label: t.createNewDrawing,
1996
- description: t.createNewDrawingDesc,
1997
- onClick: () => handleCreate(),
1998
- primary: true
1999
- }
2000
- ),
2001
- /* @__PURE__ */ jsx6(
2002
- ActionButton,
2003
- {
2004
- icon: "\u{1F4C2}",
2005
- label: t.openFromFile,
2006
- description: t.openFromFileDesc,
2007
- onClick: importExcalidrawFile
1959
+ /* @__PURE__ */ jsxs4(
1960
+ "div",
1961
+ {
1962
+ style: { flex: 1, overflow: "auto" },
1963
+ onClick: () => setSelectedId(null),
1964
+ onDragOver: (e) => {
1965
+ if (!draggingDrawingId) return;
1966
+ const el = e.currentTarget;
1967
+ const rect = el.getBoundingClientRect();
1968
+ const margin = 40;
1969
+ if (e.clientY - rect.top < margin) {
1970
+ el.scrollTop -= 8;
1971
+ } else if (rect.bottom - e.clientY < margin) {
1972
+ el.scrollTop += 8;
2008
1973
  }
2009
- ),
2010
- creatingFolder ? /* @__PURE__ */ jsxs4("div", { style: { display: "flex", gap: "8px", alignItems: "center", padding: "4px 0" }, children: [
2011
- /* @__PURE__ */ jsx6(
2012
- "input",
2013
- {
2014
- ref: newFolderInputRef,
2015
- type: "text",
2016
- value: newFolderName,
2017
- onChange: (e) => setNewFolderName(e.target.value),
2018
- onKeyDown: (e) => {
2019
- if (e.key === "Enter") handleCreateFolder();
2020
- if (e.key === "Escape") {
2021
- setCreatingFolder(false);
2022
- setNewFolderName("");
1974
+ },
1975
+ children: [
1976
+ 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: [
1977
+ filteredFolders.map(renderFolderGroup),
1978
+ draggingDrawingId && folders.length > 0 && /* @__PURE__ */ jsx6(
1979
+ "div",
1980
+ {
1981
+ onDragOver: (e) => {
1982
+ e.preventDefault();
1983
+ e.dataTransfer.dropEffect = "move";
1984
+ setDropTargetFolderId("__root__");
1985
+ },
1986
+ onDragLeave: () => {
1987
+ if (dropTargetFolderId === "__root__") setDropTargetFolderId(null);
1988
+ },
1989
+ onDrop: (e) => {
1990
+ e.preventDefault();
1991
+ if (draggingDrawingId) {
1992
+ handleMoveToFolder(draggingDrawingId, null);
1993
+ setDraggingDrawingId(null);
1994
+ setDropTargetFolderId(null);
1995
+ }
1996
+ },
1997
+ style: {
1998
+ padding: "8px 12px",
1999
+ marginBottom: "4px",
2000
+ borderRadius: "8px",
2001
+ textAlign: "center",
2002
+ fontSize: "12px",
2003
+ color: "var(--text-secondary-color, #888)",
2004
+ backgroundColor: dropTargetFolderId === "__root__" ? "var(--color-primary-light, rgba(108, 99, 255, 0.2))" : "transparent",
2005
+ border: "2px dashed var(--default-border-color, #ccc)",
2006
+ borderColor: dropTargetFolderId === "__root__" ? "var(--color-primary, #6c63ff)" : "var(--default-border-color, #ccc)",
2007
+ transition: "background-color 0.15s, border-color 0.15s"
2008
+ },
2009
+ children: t.moveToRoot
2010
+ }
2011
+ ),
2012
+ rootDrawings.map(renderDrawingRow)
2013
+ ] }) : /* @__PURE__ */ jsxs4("div", { style: { padding: "24px 20px", textAlign: "center", color: "var(--text-secondary-color, #666)" }, children: [
2014
+ /* @__PURE__ */ jsx6("p", { children: t.noDrawingsYet }),
2015
+ /* @__PURE__ */ jsx6("p", { children: t.clickNewToStart })
2016
+ ] }),
2017
+ /* @__PURE__ */ jsx6("div", { style: sectionHeaderStyle, children: t.sectionDrawings }),
2018
+ /* @__PURE__ */ jsxs4("div", { style: { padding: "0 20px", display: "flex", flexDirection: "column", gap: "8px" }, children: [
2019
+ /* @__PURE__ */ jsx6(
2020
+ ActionButton,
2021
+ {
2022
+ icon: "\u{1F4C4}",
2023
+ label: t.createNewDrawing,
2024
+ description: t.createNewDrawingDesc,
2025
+ onClick: () => handleCreate(),
2026
+ primary: true
2027
+ }
2028
+ ),
2029
+ /* @__PURE__ */ jsx6(
2030
+ ActionButton,
2031
+ {
2032
+ icon: "\u{1F4C2}",
2033
+ label: t.openFromFile,
2034
+ description: t.openFromFileDesc,
2035
+ onClick: importExcalidrawFile
2036
+ }
2037
+ ),
2038
+ creatingFolder ? /* @__PURE__ */ jsxs4("div", { style: { display: "flex", gap: "8px", alignItems: "center", padding: "4px 0" }, children: [
2039
+ /* @__PURE__ */ jsx6(
2040
+ "input",
2041
+ {
2042
+ ref: newFolderInputRef,
2043
+ type: "text",
2044
+ value: newFolderName,
2045
+ onChange: (e) => setNewFolderName(e.target.value),
2046
+ onKeyDown: (e) => {
2047
+ if (e.key === "Enter") handleCreateFolder();
2048
+ if (e.key === "Escape") {
2049
+ setCreatingFolder(false);
2050
+ setNewFolderName("");
2051
+ }
2052
+ },
2053
+ placeholder: t.newFolderName,
2054
+ style: {
2055
+ flex: 1,
2056
+ padding: "8px 12px",
2057
+ fontSize: "14px",
2058
+ border: "1px solid var(--color-primary, #6c63ff)",
2059
+ borderRadius: "8px",
2060
+ outline: "none"
2061
+ }
2023
2062
  }
2024
- },
2025
- placeholder: t.newFolderName,
2026
- style: {
2027
- flex: 1,
2028
- padding: "8px 12px",
2029
- fontSize: "14px",
2030
- border: "1px solid var(--color-primary, #6c63ff)",
2031
- borderRadius: "8px",
2032
- outline: "none"
2063
+ ),
2064
+ /* @__PURE__ */ jsx6(
2065
+ "button",
2066
+ {
2067
+ onClick: handleCreateFolder,
2068
+ style: { padding: "8px 16px", fontSize: "14px", backgroundColor: "var(--color-primary, #6c63ff)", color: "#fff", border: "none", borderRadius: "8px", cursor: "pointer" },
2069
+ children: t.save
2070
+ }
2071
+ ),
2072
+ /* @__PURE__ */ jsx6(
2073
+ "button",
2074
+ {
2075
+ onClick: () => {
2076
+ setCreatingFolder(false);
2077
+ setNewFolderName("");
2078
+ },
2079
+ style: { padding: "8px 16px", fontSize: "14px", backgroundColor: "transparent", border: "1px solid var(--default-border-color, #ccc)", borderRadius: "8px", cursor: "pointer", color: "inherit" },
2080
+ children: t.cancel
2081
+ }
2082
+ )
2083
+ ] }) : /* @__PURE__ */ jsx6(
2084
+ ActionButton,
2085
+ {
2086
+ icon: "\u{1F4C1}",
2087
+ label: t.createFolder,
2088
+ description: "",
2089
+ onClick: () => setCreatingFolder(true)
2033
2090
  }
2034
- }
2035
- ),
2036
- /* @__PURE__ */ jsx6(
2037
- "button",
2038
- {
2039
- onClick: handleCreateFolder,
2040
- style: { padding: "8px 16px", fontSize: "14px", backgroundColor: "var(--color-primary, #6c63ff)", color: "#fff", border: "none", borderRadius: "8px", cursor: "pointer" },
2041
- children: t.save
2042
- }
2043
- ),
2044
- /* @__PURE__ */ jsx6(
2045
- "button",
2046
- {
2047
- onClick: () => {
2048
- setCreatingFolder(false);
2049
- setNewFolderName("");
2050
- },
2051
- style: { padding: "8px 16px", fontSize: "14px", backgroundColor: "transparent", border: "1px solid var(--default-border-color, #ccc)", borderRadius: "8px", cursor: "pointer", color: "inherit" },
2052
- children: t.cancel
2053
- }
2054
- )
2055
- ] }) : /* @__PURE__ */ jsx6(
2056
- ActionButton,
2057
- {
2058
- icon: "\u{1F4C1}",
2059
- label: t.createFolder,
2060
- description: "",
2061
- onClick: () => setCreatingFolder(true)
2062
- }
2063
- )
2064
- ] }),
2065
- /* @__PURE__ */ jsx6("div", { style: sectionHeaderStyle, children: t.sectionWorkspace }),
2066
- /* @__PURE__ */ jsxs4("div", { style: { padding: "0 20px 16px", display: "flex", gap: "8px" }, children: [
2067
- /* @__PURE__ */ jsx6(
2068
- ActionButton,
2069
- {
2070
- icon: "\u{1F4BE}",
2071
- label: t.saveAllBackup,
2072
- description: t.saveAllBackupDesc,
2073
- onClick: exportWorkspace
2074
- }
2075
- ),
2076
- /* @__PURE__ */ jsx6(
2077
- ActionButton,
2078
- {
2079
- icon: "\u{1F4E5}",
2080
- label: t.loadBackup,
2081
- description: t.loadBackupDesc,
2082
- onClick: importWorkspace
2083
- }
2084
- )
2085
- ] })
2086
- ] })
2091
+ )
2092
+ ] }),
2093
+ /* @__PURE__ */ jsx6("div", { style: sectionHeaderStyle, children: t.sectionWorkspace }),
2094
+ /* @__PURE__ */ jsxs4("div", { style: { padding: "0 20px 16px", display: "flex", gap: "8px" }, children: [
2095
+ /* @__PURE__ */ jsx6(
2096
+ ActionButton,
2097
+ {
2098
+ icon: "\u{1F4BE}",
2099
+ label: t.saveAllBackup,
2100
+ description: t.saveAllBackupDesc,
2101
+ onClick: exportWorkspace
2102
+ }
2103
+ ),
2104
+ /* @__PURE__ */ jsx6(
2105
+ ActionButton,
2106
+ {
2107
+ icon: "\u{1F4E5}",
2108
+ label: t.loadBackup,
2109
+ description: t.loadBackupDesc,
2110
+ onClick: importWorkspace
2111
+ }
2112
+ )
2113
+ ] })
2114
+ ]
2115
+ }
2116
+ )
2087
2117
  ] })
2088
2118
  }
2089
2119
  );
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "rita-workspace",
3
- "version": "0.5.9",
3
+ "version": "0.5.11",
4
4
  "description": "Multi-drawing workspace feature for Rita (Excalidraw fork)",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.mjs",