rita-workspace 0.5.8 → 0.5.10

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 +163 -139
  2. package/dist/index.mjs +163 -139
  3. package/package.json +1 -1
package/dist/index.js CHANGED
@@ -579,9 +579,11 @@ function WorkspaceProvider({ children, lang = "en" }) {
579
579
  }
580
580
  };
581
581
  window.addEventListener("storage", onStorage);
582
+ const intervalId = setInterval(recheckConflict, 5e3);
582
583
  return () => {
583
584
  channel?.close();
584
585
  window.removeEventListener("storage", onStorage);
586
+ clearInterval(intervalId);
585
587
  };
586
588
  }, [activeDrawing?.id]);
587
589
  (0, import_react.useEffect)(() => {
@@ -1318,7 +1320,10 @@ var import_jsx_runtime6 = require("react/jsx-runtime");
1318
1320
  var ActionButton = ({ icon, label, description, onClick, primary }) => /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
1319
1321
  "button",
1320
1322
  {
1321
- onClick,
1323
+ onClick: (e) => {
1324
+ e.stopPropagation();
1325
+ onClick();
1326
+ },
1322
1327
  style: {
1323
1328
  display: "flex",
1324
1329
  alignItems: "center",
@@ -1331,7 +1336,8 @@ var ActionButton = ({ icon, label, description, onClick, primary }) => /* @__PUR
1331
1336
  cursor: "pointer",
1332
1337
  textAlign: "left",
1333
1338
  color: "inherit",
1334
- fontSize: "14px"
1339
+ fontSize: "14px",
1340
+ outline: "none"
1335
1341
  },
1336
1342
  children: [
1337
1343
  /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { style: { fontSize: "20px", flexShrink: 0 }, children: icon }),
@@ -2010,146 +2016,164 @@ var DrawingsDialog = ({
2010
2016
  }
2011
2017
  }
2012
2018
  ) }),
2013
- /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: { flex: 1, overflow: "auto" }, 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: [
2015
- filteredFolders.map(renderFolderGroup),
2016
- draggingDrawingId && folders.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
2017
- "div",
2018
- {
2019
- onDragOver: (e) => {
2020
- e.preventDefault();
2021
- e.dataTransfer.dropEffect = "move";
2022
- setDropTargetFolderId("__root__");
2023
- },
2024
- onDragLeave: () => {
2025
- if (dropTargetFolderId === "__root__") setDropTargetFolderId(null);
2026
- },
2027
- onDrop: (e) => {
2028
- e.preventDefault();
2029
- if (draggingDrawingId) {
2030
- handleMoveToFolder(draggingDrawingId, null);
2031
- setDraggingDrawingId(null);
2032
- setDropTargetFolderId(null);
2033
- }
2034
- },
2035
- style: {
2036
- padding: "8px 12px",
2037
- marginBottom: "4px",
2038
- borderRadius: "8px",
2039
- textAlign: "center",
2040
- fontSize: "12px",
2041
- color: "var(--text-secondary-color, #888)",
2042
- backgroundColor: dropTargetFolderId === "__root__" ? "var(--color-primary-light, rgba(108, 99, 255, 0.2))" : "transparent",
2043
- border: "2px dashed var(--default-border-color, #ccc)",
2044
- borderColor: dropTargetFolderId === "__root__" ? "var(--color-primary, #6c63ff)" : "var(--default-border-color, #ccc)",
2045
- transition: "background-color 0.15s, border-color 0.15s"
2046
- },
2047
- children: t.moveToRoot
2048
- }
2049
- ),
2050
- rootDrawings.map(renderDrawingRow)
2051
- ] }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: { padding: "24px 20px", textAlign: "center", color: "var(--text-secondary-color, #666)" }, children: [
2052
- /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { children: t.noDrawingsYet }),
2053
- /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { children: t.clickNewToStart })
2054
- ] }),
2055
- /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: sectionHeaderStyle, children: t.sectionDrawings }),
2056
- /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: { padding: "0 20px", display: "flex", flexDirection: "column", gap: "8px" }, children: [
2057
- /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
2058
- ActionButton,
2059
- {
2060
- icon: "\u{1F4C4}",
2061
- label: t.createNewDrawing,
2062
- description: t.createNewDrawingDesc,
2063
- onClick: () => handleCreate(),
2064
- primary: true
2065
- }
2066
- ),
2067
- /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
2068
- ActionButton,
2069
- {
2070
- icon: "\u{1F4C2}",
2071
- label: t.openFromFile,
2072
- description: t.openFromFileDesc,
2073
- onClick: importExcalidrawFile
2019
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
2020
+ "div",
2021
+ {
2022
+ style: { flex: 1, overflow: "auto" },
2023
+ onClick: () => setSelectedId(null),
2024
+ onDragOver: (e) => {
2025
+ if (!draggingDrawingId) return;
2026
+ const el = e.currentTarget;
2027
+ const rect = el.getBoundingClientRect();
2028
+ const margin = 40;
2029
+ if (e.clientY - rect.top < margin) {
2030
+ el.scrollTop -= 8;
2031
+ } else if (rect.bottom - e.clientY < margin) {
2032
+ el.scrollTop += 8;
2074
2033
  }
2075
- ),
2076
- creatingFolder ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: { display: "flex", gap: "8px", alignItems: "center", padding: "4px 0" }, children: [
2077
- /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
2078
- "input",
2079
- {
2080
- ref: newFolderInputRef,
2081
- type: "text",
2082
- value: newFolderName,
2083
- onChange: (e) => setNewFolderName(e.target.value),
2084
- onKeyDown: (e) => {
2085
- if (e.key === "Enter") handleCreateFolder();
2086
- if (e.key === "Escape") {
2087
- setCreatingFolder(false);
2088
- setNewFolderName("");
2034
+ },
2035
+ children: [
2036
+ 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: [
2037
+ filteredFolders.map(renderFolderGroup),
2038
+ draggingDrawingId && folders.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
2039
+ "div",
2040
+ {
2041
+ onDragOver: (e) => {
2042
+ e.preventDefault();
2043
+ e.dataTransfer.dropEffect = "move";
2044
+ setDropTargetFolderId("__root__");
2045
+ },
2046
+ onDragLeave: () => {
2047
+ if (dropTargetFolderId === "__root__") setDropTargetFolderId(null);
2048
+ },
2049
+ onDrop: (e) => {
2050
+ e.preventDefault();
2051
+ if (draggingDrawingId) {
2052
+ handleMoveToFolder(draggingDrawingId, null);
2053
+ setDraggingDrawingId(null);
2054
+ setDropTargetFolderId(null);
2055
+ }
2056
+ },
2057
+ style: {
2058
+ padding: "8px 12px",
2059
+ marginBottom: "4px",
2060
+ borderRadius: "8px",
2061
+ textAlign: "center",
2062
+ fontSize: "12px",
2063
+ color: "var(--text-secondary-color, #888)",
2064
+ backgroundColor: dropTargetFolderId === "__root__" ? "var(--color-primary-light, rgba(108, 99, 255, 0.2))" : "transparent",
2065
+ border: "2px dashed var(--default-border-color, #ccc)",
2066
+ borderColor: dropTargetFolderId === "__root__" ? "var(--color-primary, #6c63ff)" : "var(--default-border-color, #ccc)",
2067
+ transition: "background-color 0.15s, border-color 0.15s"
2068
+ },
2069
+ children: t.moveToRoot
2070
+ }
2071
+ ),
2072
+ rootDrawings.map(renderDrawingRow)
2073
+ ] }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: { padding: "24px 20px", textAlign: "center", color: "var(--text-secondary-color, #666)" }, children: [
2074
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { children: t.noDrawingsYet }),
2075
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { children: t.clickNewToStart })
2076
+ ] }),
2077
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: sectionHeaderStyle, children: t.sectionDrawings }),
2078
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: { padding: "0 20px", display: "flex", flexDirection: "column", gap: "8px" }, children: [
2079
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
2080
+ ActionButton,
2081
+ {
2082
+ icon: "\u{1F4C4}",
2083
+ label: t.createNewDrawing,
2084
+ description: t.createNewDrawingDesc,
2085
+ onClick: () => handleCreate(),
2086
+ primary: true
2087
+ }
2088
+ ),
2089
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
2090
+ ActionButton,
2091
+ {
2092
+ icon: "\u{1F4C2}",
2093
+ label: t.openFromFile,
2094
+ description: t.openFromFileDesc,
2095
+ onClick: importExcalidrawFile
2096
+ }
2097
+ ),
2098
+ creatingFolder ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: { display: "flex", gap: "8px", alignItems: "center", padding: "4px 0" }, children: [
2099
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
2100
+ "input",
2101
+ {
2102
+ ref: newFolderInputRef,
2103
+ type: "text",
2104
+ value: newFolderName,
2105
+ onChange: (e) => setNewFolderName(e.target.value),
2106
+ onKeyDown: (e) => {
2107
+ if (e.key === "Enter") handleCreateFolder();
2108
+ if (e.key === "Escape") {
2109
+ setCreatingFolder(false);
2110
+ setNewFolderName("");
2111
+ }
2112
+ },
2113
+ placeholder: t.newFolderName,
2114
+ style: {
2115
+ flex: 1,
2116
+ padding: "8px 12px",
2117
+ fontSize: "14px",
2118
+ border: "1px solid var(--color-primary, #6c63ff)",
2119
+ borderRadius: "8px",
2120
+ outline: "none"
2121
+ }
2089
2122
  }
2090
- },
2091
- placeholder: t.newFolderName,
2092
- style: {
2093
- flex: 1,
2094
- padding: "8px 12px",
2095
- fontSize: "14px",
2096
- border: "1px solid var(--color-primary, #6c63ff)",
2097
- borderRadius: "8px",
2098
- outline: "none"
2123
+ ),
2124
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
2125
+ "button",
2126
+ {
2127
+ onClick: handleCreateFolder,
2128
+ style: { padding: "8px 16px", fontSize: "14px", backgroundColor: "var(--color-primary, #6c63ff)", color: "#fff", border: "none", borderRadius: "8px", cursor: "pointer" },
2129
+ children: t.save
2130
+ }
2131
+ ),
2132
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
2133
+ "button",
2134
+ {
2135
+ onClick: () => {
2136
+ setCreatingFolder(false);
2137
+ setNewFolderName("");
2138
+ },
2139
+ style: { padding: "8px 16px", fontSize: "14px", backgroundColor: "transparent", border: "1px solid var(--default-border-color, #ccc)", borderRadius: "8px", cursor: "pointer", color: "inherit" },
2140
+ children: t.cancel
2141
+ }
2142
+ )
2143
+ ] }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
2144
+ ActionButton,
2145
+ {
2146
+ icon: "\u{1F4C1}",
2147
+ label: t.createFolder,
2148
+ description: "",
2149
+ onClick: () => setCreatingFolder(true)
2099
2150
  }
2100
- }
2101
- ),
2102
- /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
2103
- "button",
2104
- {
2105
- onClick: handleCreateFolder,
2106
- style: { padding: "8px 16px", fontSize: "14px", backgroundColor: "var(--color-primary, #6c63ff)", color: "#fff", border: "none", borderRadius: "8px", cursor: "pointer" },
2107
- children: t.save
2108
- }
2109
- ),
2110
- /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
2111
- "button",
2112
- {
2113
- onClick: () => {
2114
- setCreatingFolder(false);
2115
- setNewFolderName("");
2116
- },
2117
- style: { padding: "8px 16px", fontSize: "14px", backgroundColor: "transparent", border: "1px solid var(--default-border-color, #ccc)", borderRadius: "8px", cursor: "pointer", color: "inherit" },
2118
- children: t.cancel
2119
- }
2120
- )
2121
- ] }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
2122
- ActionButton,
2123
- {
2124
- icon: "\u{1F4C1}",
2125
- label: t.createFolder,
2126
- description: "",
2127
- onClick: () => setCreatingFolder(true)
2128
- }
2129
- )
2130
- ] }),
2131
- /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: sectionHeaderStyle, children: t.sectionWorkspace }),
2132
- /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: { padding: "0 20px 16px", display: "flex", gap: "8px" }, children: [
2133
- /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
2134
- ActionButton,
2135
- {
2136
- icon: "\u{1F4BE}",
2137
- label: t.saveAllBackup,
2138
- description: t.saveAllBackupDesc,
2139
- onClick: exportWorkspace
2140
- }
2141
- ),
2142
- /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
2143
- ActionButton,
2144
- {
2145
- icon: "\u{1F4E5}",
2146
- label: t.loadBackup,
2147
- description: t.loadBackupDesc,
2148
- onClick: importWorkspace
2149
- }
2150
- )
2151
- ] })
2152
- ] })
2151
+ )
2152
+ ] }),
2153
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: sectionHeaderStyle, children: t.sectionWorkspace }),
2154
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: { padding: "0 20px 16px", display: "flex", gap: "8px" }, children: [
2155
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
2156
+ ActionButton,
2157
+ {
2158
+ icon: "\u{1F4BE}",
2159
+ label: t.saveAllBackup,
2160
+ description: t.saveAllBackupDesc,
2161
+ onClick: exportWorkspace
2162
+ }
2163
+ ),
2164
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
2165
+ ActionButton,
2166
+ {
2167
+ icon: "\u{1F4E5}",
2168
+ label: t.loadBackup,
2169
+ description: t.loadBackupDesc,
2170
+ onClick: importWorkspace
2171
+ }
2172
+ )
2173
+ ] })
2174
+ ]
2175
+ }
2176
+ )
2153
2177
  ] })
2154
2178
  }
2155
2179
  );
package/dist/index.mjs CHANGED
@@ -511,9 +511,11 @@ function WorkspaceProvider({ children, lang = "en" }) {
511
511
  }
512
512
  };
513
513
  window.addEventListener("storage", onStorage);
514
+ const intervalId = setInterval(recheckConflict, 5e3);
514
515
  return () => {
515
516
  channel?.close();
516
517
  window.removeEventListener("storage", onStorage);
518
+ clearInterval(intervalId);
517
519
  };
518
520
  }, [activeDrawing?.id]);
519
521
  useEffect(() => {
@@ -1250,7 +1252,10 @@ import { Fragment as Fragment3, jsx as jsx6, jsxs as jsxs4 } from "react/jsx-run
1250
1252
  var ActionButton = ({ icon, label, description, onClick, primary }) => /* @__PURE__ */ jsxs4(
1251
1253
  "button",
1252
1254
  {
1253
- onClick,
1255
+ onClick: (e) => {
1256
+ e.stopPropagation();
1257
+ onClick();
1258
+ },
1254
1259
  style: {
1255
1260
  display: "flex",
1256
1261
  alignItems: "center",
@@ -1263,7 +1268,8 @@ var ActionButton = ({ icon, label, description, onClick, primary }) => /* @__PUR
1263
1268
  cursor: "pointer",
1264
1269
  textAlign: "left",
1265
1270
  color: "inherit",
1266
- fontSize: "14px"
1271
+ fontSize: "14px",
1272
+ outline: "none"
1267
1273
  },
1268
1274
  children: [
1269
1275
  /* @__PURE__ */ jsx6("span", { style: { fontSize: "20px", flexShrink: 0 }, children: icon }),
@@ -1942,146 +1948,164 @@ var DrawingsDialog = ({
1942
1948
  }
1943
1949
  }
1944
1950
  ) }),
1945
- /* @__PURE__ */ jsxs4("div", { style: { flex: 1, overflow: "auto" }, 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: [
1947
- filteredFolders.map(renderFolderGroup),
1948
- draggingDrawingId && folders.length > 0 && /* @__PURE__ */ jsx6(
1949
- "div",
1950
- {
1951
- onDragOver: (e) => {
1952
- e.preventDefault();
1953
- e.dataTransfer.dropEffect = "move";
1954
- setDropTargetFolderId("__root__");
1955
- },
1956
- onDragLeave: () => {
1957
- if (dropTargetFolderId === "__root__") setDropTargetFolderId(null);
1958
- },
1959
- onDrop: (e) => {
1960
- e.preventDefault();
1961
- if (draggingDrawingId) {
1962
- handleMoveToFolder(draggingDrawingId, null);
1963
- setDraggingDrawingId(null);
1964
- setDropTargetFolderId(null);
1965
- }
1966
- },
1967
- style: {
1968
- padding: "8px 12px",
1969
- marginBottom: "4px",
1970
- borderRadius: "8px",
1971
- textAlign: "center",
1972
- fontSize: "12px",
1973
- color: "var(--text-secondary-color, #888)",
1974
- backgroundColor: dropTargetFolderId === "__root__" ? "var(--color-primary-light, rgba(108, 99, 255, 0.2))" : "transparent",
1975
- border: "2px dashed var(--default-border-color, #ccc)",
1976
- borderColor: dropTargetFolderId === "__root__" ? "var(--color-primary, #6c63ff)" : "var(--default-border-color, #ccc)",
1977
- transition: "background-color 0.15s, border-color 0.15s"
1978
- },
1979
- children: t.moveToRoot
1980
- }
1981
- ),
1982
- rootDrawings.map(renderDrawingRow)
1983
- ] }) : /* @__PURE__ */ jsxs4("div", { style: { padding: "24px 20px", textAlign: "center", color: "var(--text-secondary-color, #666)" }, children: [
1984
- /* @__PURE__ */ jsx6("p", { children: t.noDrawingsYet }),
1985
- /* @__PURE__ */ jsx6("p", { children: t.clickNewToStart })
1986
- ] }),
1987
- /* @__PURE__ */ jsx6("div", { style: sectionHeaderStyle, children: t.sectionDrawings }),
1988
- /* @__PURE__ */ jsxs4("div", { style: { padding: "0 20px", display: "flex", flexDirection: "column", gap: "8px" }, children: [
1989
- /* @__PURE__ */ jsx6(
1990
- ActionButton,
1991
- {
1992
- icon: "\u{1F4C4}",
1993
- label: t.createNewDrawing,
1994
- description: t.createNewDrawingDesc,
1995
- onClick: () => handleCreate(),
1996
- primary: true
1997
- }
1998
- ),
1999
- /* @__PURE__ */ jsx6(
2000
- ActionButton,
2001
- {
2002
- icon: "\u{1F4C2}",
2003
- label: t.openFromFile,
2004
- description: t.openFromFileDesc,
2005
- onClick: importExcalidrawFile
1951
+ /* @__PURE__ */ jsxs4(
1952
+ "div",
1953
+ {
1954
+ style: { flex: 1, overflow: "auto" },
1955
+ onClick: () => setSelectedId(null),
1956
+ onDragOver: (e) => {
1957
+ if (!draggingDrawingId) return;
1958
+ const el = e.currentTarget;
1959
+ const rect = el.getBoundingClientRect();
1960
+ const margin = 40;
1961
+ if (e.clientY - rect.top < margin) {
1962
+ el.scrollTop -= 8;
1963
+ } else if (rect.bottom - e.clientY < margin) {
1964
+ el.scrollTop += 8;
2006
1965
  }
2007
- ),
2008
- creatingFolder ? /* @__PURE__ */ jsxs4("div", { style: { display: "flex", gap: "8px", alignItems: "center", padding: "4px 0" }, children: [
2009
- /* @__PURE__ */ jsx6(
2010
- "input",
2011
- {
2012
- ref: newFolderInputRef,
2013
- type: "text",
2014
- value: newFolderName,
2015
- onChange: (e) => setNewFolderName(e.target.value),
2016
- onKeyDown: (e) => {
2017
- if (e.key === "Enter") handleCreateFolder();
2018
- if (e.key === "Escape") {
2019
- setCreatingFolder(false);
2020
- setNewFolderName("");
1966
+ },
1967
+ children: [
1968
+ 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: [
1969
+ filteredFolders.map(renderFolderGroup),
1970
+ draggingDrawingId && folders.length > 0 && /* @__PURE__ */ jsx6(
1971
+ "div",
1972
+ {
1973
+ onDragOver: (e) => {
1974
+ e.preventDefault();
1975
+ e.dataTransfer.dropEffect = "move";
1976
+ setDropTargetFolderId("__root__");
1977
+ },
1978
+ onDragLeave: () => {
1979
+ if (dropTargetFolderId === "__root__") setDropTargetFolderId(null);
1980
+ },
1981
+ onDrop: (e) => {
1982
+ e.preventDefault();
1983
+ if (draggingDrawingId) {
1984
+ handleMoveToFolder(draggingDrawingId, null);
1985
+ setDraggingDrawingId(null);
1986
+ setDropTargetFolderId(null);
1987
+ }
1988
+ },
1989
+ style: {
1990
+ padding: "8px 12px",
1991
+ marginBottom: "4px",
1992
+ borderRadius: "8px",
1993
+ textAlign: "center",
1994
+ fontSize: "12px",
1995
+ color: "var(--text-secondary-color, #888)",
1996
+ backgroundColor: dropTargetFolderId === "__root__" ? "var(--color-primary-light, rgba(108, 99, 255, 0.2))" : "transparent",
1997
+ border: "2px dashed var(--default-border-color, #ccc)",
1998
+ borderColor: dropTargetFolderId === "__root__" ? "var(--color-primary, #6c63ff)" : "var(--default-border-color, #ccc)",
1999
+ transition: "background-color 0.15s, border-color 0.15s"
2000
+ },
2001
+ children: t.moveToRoot
2002
+ }
2003
+ ),
2004
+ rootDrawings.map(renderDrawingRow)
2005
+ ] }) : /* @__PURE__ */ jsxs4("div", { style: { padding: "24px 20px", textAlign: "center", color: "var(--text-secondary-color, #666)" }, children: [
2006
+ /* @__PURE__ */ jsx6("p", { children: t.noDrawingsYet }),
2007
+ /* @__PURE__ */ jsx6("p", { children: t.clickNewToStart })
2008
+ ] }),
2009
+ /* @__PURE__ */ jsx6("div", { style: sectionHeaderStyle, children: t.sectionDrawings }),
2010
+ /* @__PURE__ */ jsxs4("div", { style: { padding: "0 20px", display: "flex", flexDirection: "column", gap: "8px" }, children: [
2011
+ /* @__PURE__ */ jsx6(
2012
+ ActionButton,
2013
+ {
2014
+ icon: "\u{1F4C4}",
2015
+ label: t.createNewDrawing,
2016
+ description: t.createNewDrawingDesc,
2017
+ onClick: () => handleCreate(),
2018
+ primary: true
2019
+ }
2020
+ ),
2021
+ /* @__PURE__ */ jsx6(
2022
+ ActionButton,
2023
+ {
2024
+ icon: "\u{1F4C2}",
2025
+ label: t.openFromFile,
2026
+ description: t.openFromFileDesc,
2027
+ onClick: importExcalidrawFile
2028
+ }
2029
+ ),
2030
+ creatingFolder ? /* @__PURE__ */ jsxs4("div", { style: { display: "flex", gap: "8px", alignItems: "center", padding: "4px 0" }, children: [
2031
+ /* @__PURE__ */ jsx6(
2032
+ "input",
2033
+ {
2034
+ ref: newFolderInputRef,
2035
+ type: "text",
2036
+ value: newFolderName,
2037
+ onChange: (e) => setNewFolderName(e.target.value),
2038
+ onKeyDown: (e) => {
2039
+ if (e.key === "Enter") handleCreateFolder();
2040
+ if (e.key === "Escape") {
2041
+ setCreatingFolder(false);
2042
+ setNewFolderName("");
2043
+ }
2044
+ },
2045
+ placeholder: t.newFolderName,
2046
+ style: {
2047
+ flex: 1,
2048
+ padding: "8px 12px",
2049
+ fontSize: "14px",
2050
+ border: "1px solid var(--color-primary, #6c63ff)",
2051
+ borderRadius: "8px",
2052
+ outline: "none"
2053
+ }
2021
2054
  }
2022
- },
2023
- placeholder: t.newFolderName,
2024
- style: {
2025
- flex: 1,
2026
- padding: "8px 12px",
2027
- fontSize: "14px",
2028
- border: "1px solid var(--color-primary, #6c63ff)",
2029
- borderRadius: "8px",
2030
- outline: "none"
2055
+ ),
2056
+ /* @__PURE__ */ jsx6(
2057
+ "button",
2058
+ {
2059
+ onClick: handleCreateFolder,
2060
+ style: { padding: "8px 16px", fontSize: "14px", backgroundColor: "var(--color-primary, #6c63ff)", color: "#fff", border: "none", borderRadius: "8px", cursor: "pointer" },
2061
+ children: t.save
2062
+ }
2063
+ ),
2064
+ /* @__PURE__ */ jsx6(
2065
+ "button",
2066
+ {
2067
+ onClick: () => {
2068
+ setCreatingFolder(false);
2069
+ setNewFolderName("");
2070
+ },
2071
+ style: { padding: "8px 16px", fontSize: "14px", backgroundColor: "transparent", border: "1px solid var(--default-border-color, #ccc)", borderRadius: "8px", cursor: "pointer", color: "inherit" },
2072
+ children: t.cancel
2073
+ }
2074
+ )
2075
+ ] }) : /* @__PURE__ */ jsx6(
2076
+ ActionButton,
2077
+ {
2078
+ icon: "\u{1F4C1}",
2079
+ label: t.createFolder,
2080
+ description: "",
2081
+ onClick: () => setCreatingFolder(true)
2031
2082
  }
2032
- }
2033
- ),
2034
- /* @__PURE__ */ jsx6(
2035
- "button",
2036
- {
2037
- onClick: handleCreateFolder,
2038
- style: { padding: "8px 16px", fontSize: "14px", backgroundColor: "var(--color-primary, #6c63ff)", color: "#fff", border: "none", borderRadius: "8px", cursor: "pointer" },
2039
- children: t.save
2040
- }
2041
- ),
2042
- /* @__PURE__ */ jsx6(
2043
- "button",
2044
- {
2045
- onClick: () => {
2046
- setCreatingFolder(false);
2047
- setNewFolderName("");
2048
- },
2049
- style: { padding: "8px 16px", fontSize: "14px", backgroundColor: "transparent", border: "1px solid var(--default-border-color, #ccc)", borderRadius: "8px", cursor: "pointer", color: "inherit" },
2050
- children: t.cancel
2051
- }
2052
- )
2053
- ] }) : /* @__PURE__ */ jsx6(
2054
- ActionButton,
2055
- {
2056
- icon: "\u{1F4C1}",
2057
- label: t.createFolder,
2058
- description: "",
2059
- onClick: () => setCreatingFolder(true)
2060
- }
2061
- )
2062
- ] }),
2063
- /* @__PURE__ */ jsx6("div", { style: sectionHeaderStyle, children: t.sectionWorkspace }),
2064
- /* @__PURE__ */ jsxs4("div", { style: { padding: "0 20px 16px", display: "flex", gap: "8px" }, children: [
2065
- /* @__PURE__ */ jsx6(
2066
- ActionButton,
2067
- {
2068
- icon: "\u{1F4BE}",
2069
- label: t.saveAllBackup,
2070
- description: t.saveAllBackupDesc,
2071
- onClick: exportWorkspace
2072
- }
2073
- ),
2074
- /* @__PURE__ */ jsx6(
2075
- ActionButton,
2076
- {
2077
- icon: "\u{1F4E5}",
2078
- label: t.loadBackup,
2079
- description: t.loadBackupDesc,
2080
- onClick: importWorkspace
2081
- }
2082
- )
2083
- ] })
2084
- ] })
2083
+ )
2084
+ ] }),
2085
+ /* @__PURE__ */ jsx6("div", { style: sectionHeaderStyle, children: t.sectionWorkspace }),
2086
+ /* @__PURE__ */ jsxs4("div", { style: { padding: "0 20px 16px", display: "flex", gap: "8px" }, children: [
2087
+ /* @__PURE__ */ jsx6(
2088
+ ActionButton,
2089
+ {
2090
+ icon: "\u{1F4BE}",
2091
+ label: t.saveAllBackup,
2092
+ description: t.saveAllBackupDesc,
2093
+ onClick: exportWorkspace
2094
+ }
2095
+ ),
2096
+ /* @__PURE__ */ jsx6(
2097
+ ActionButton,
2098
+ {
2099
+ icon: "\u{1F4E5}",
2100
+ label: t.loadBackup,
2101
+ description: t.loadBackupDesc,
2102
+ onClick: importWorkspace
2103
+ }
2104
+ )
2105
+ ] })
2106
+ ]
2107
+ }
2108
+ )
2085
2109
  ] })
2086
2110
  }
2087
2111
  );
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "rita-workspace",
3
- "version": "0.5.8",
3
+ "version": "0.5.10",
4
4
  "description": "Multi-drawing workspace feature for Rita (Excalidraw fork)",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.mjs",