rita-workspace 0.4.4 → 0.4.6

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 (5) hide show
  1. package/dist/index.d.mts +2 -20
  2. package/dist/index.d.ts +2 -20
  3. package/dist/index.js +313 -251
  4. package/dist/index.mjs +328 -266
  5. package/package.json +1 -1
package/dist/index.mjs CHANGED
@@ -154,7 +154,7 @@ var sv = {
154
154
  newDrawing: "Ny ritning",
155
155
  manageDrawings: "Hantera arbetsyta...",
156
156
  // Dialog
157
- dialogTitle: "Min Rita Arbetsyta",
157
+ dialogTitle: "Min Arbetsyta",
158
158
  close: "St\xE4ng",
159
159
  open: "\xD6ppna",
160
160
  rename: "Byt namn",
@@ -265,6 +265,19 @@ function WorkspaceProvider({ children, lang = "en" }) {
265
265
  }
266
266
  init();
267
267
  }, []);
268
+ const refreshDrawings = useCallback(async () => {
269
+ if (!workspace) return;
270
+ try {
271
+ const allDrawings = await getAllDrawings();
272
+ const wsDrawings = allDrawings.filter((d) => workspace.drawingIds.includes(d.id));
273
+ setDrawings(wsDrawings);
274
+ if (workspace.activeDrawingId) {
275
+ const active = await getDrawing(workspace.activeDrawingId);
276
+ if (active) setActiveDrawing2(active);
277
+ }
278
+ } catch (err) {
279
+ }
280
+ }, [workspace]);
268
281
  const createNewDrawing = useCallback(async (name) => {
269
282
  if (!workspace) return null;
270
283
  try {
@@ -517,6 +530,7 @@ function WorkspaceProvider({ children, lang = "en" }) {
517
530
  duplicateCurrentDrawing,
518
531
  saveCurrentDrawing,
519
532
  saveDrawingById,
533
+ refreshDrawings,
520
534
  exportWorkspace,
521
535
  importWorkspace,
522
536
  exportDrawingAsExcalidraw,
@@ -829,7 +843,7 @@ var WorkspaceMenuItems = ({
829
843
  };
830
844
 
831
845
  // src/ui/Dialog/DrawingsDialog.tsx
832
- import { useState as useState4, useCallback as useCallback2 } from "react";
846
+ import { useState as useState4, useCallback as useCallback2, useRef as useRef2, useEffect as useEffect3 } from "react";
833
847
  import { Fragment as Fragment3, jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
834
848
  var DrawingsDialog = ({
835
849
  open,
@@ -849,14 +863,43 @@ var DrawingsDialog = ({
849
863
  importWorkspace,
850
864
  exportDrawingAsExcalidraw,
851
865
  importExcalidrawFile,
866
+ refreshDrawings,
852
867
  t: contextT,
853
868
  lang: contextLang
854
869
  } = useWorkspace();
870
+ useEffect3(() => {
871
+ if (open) {
872
+ refreshDrawings();
873
+ }
874
+ }, [open, refreshDrawings]);
855
875
  const t = lang ? getTranslations(lang) : contextT;
856
876
  const effectiveLang = lang || contextLang;
857
877
  const [editingId, setEditingId] = useState4(null);
858
878
  const [editName, setEditName] = useState4("");
859
879
  const [confirmDeleteId, setConfirmDeleteId] = useState4(null);
880
+ const [position, setPosition] = useState4(null);
881
+ const dragRef = useRef2(null);
882
+ const dialogRef = useRef2(null);
883
+ const handleMouseDown = useCallback2((e) => {
884
+ if (!dialogRef.current) return;
885
+ const rect = dialogRef.current.getBoundingClientRect();
886
+ const currentX = position?.x ?? rect.left;
887
+ const currentY = position?.y ?? rect.top;
888
+ dragRef.current = { startX: e.clientX, startY: e.clientY, origX: currentX, origY: currentY };
889
+ const handleMouseMove = (e2) => {
890
+ if (!dragRef.current) return;
891
+ const dx = e2.clientX - dragRef.current.startX;
892
+ const dy = e2.clientY - dragRef.current.startY;
893
+ setPosition({ x: dragRef.current.origX + dx, y: dragRef.current.origY + dy });
894
+ };
895
+ const handleMouseUp = () => {
896
+ dragRef.current = null;
897
+ document.removeEventListener("mousemove", handleMouseMove);
898
+ document.removeEventListener("mouseup", handleMouseUp);
899
+ };
900
+ document.addEventListener("mousemove", handleMouseMove);
901
+ document.addEventListener("mouseup", handleMouseUp);
902
+ }, [position]);
860
903
  const handleSelect = useCallback2(async (drawing) => {
861
904
  await switchDrawing(drawing.id);
862
905
  onDrawingSelect?.(drawing);
@@ -902,6 +945,31 @@ var DrawingsDialog = ({
902
945
  });
903
946
  };
904
947
  if (!open) return null;
948
+ const dialogStyle = position ? {
949
+ position: "fixed",
950
+ left: position.x,
951
+ top: position.y,
952
+ backgroundColor: "var(--island-bg-color, #fff)",
953
+ borderRadius: "8px",
954
+ boxShadow: "0 4px 24px rgba(0, 0, 0, 0.2)",
955
+ width: "90%",
956
+ maxWidth: "600px",
957
+ maxHeight: "80vh",
958
+ display: "flex",
959
+ flexDirection: "column",
960
+ color: "var(--text-primary-color, #1b1b1f)",
961
+ zIndex: 1e4
962
+ } : {
963
+ backgroundColor: "var(--island-bg-color, #fff)",
964
+ borderRadius: "8px",
965
+ boxShadow: "0 4px 24px rgba(0, 0, 0, 0.2)",
966
+ width: "90%",
967
+ maxWidth: "600px",
968
+ maxHeight: "80vh",
969
+ display: "flex",
970
+ flexDirection: "column",
971
+ color: "var(--text-primary-color, #1b1b1f)"
972
+ };
905
973
  return /* @__PURE__ */ jsx6(
906
974
  "div",
907
975
  {
@@ -912,40 +980,35 @@ var DrawingsDialog = ({
912
980
  left: 0,
913
981
  right: 0,
914
982
  bottom: 0,
915
- backgroundColor: "rgba(0, 0, 0, 0.5)",
916
- display: "flex",
983
+ backgroundColor: position ? "transparent" : "rgba(0, 0, 0, 0.5)",
984
+ display: position ? "block" : "flex",
917
985
  alignItems: "center",
918
986
  justifyContent: "center",
919
- zIndex: 9999
987
+ zIndex: 9999,
988
+ pointerEvents: position ? "none" : "auto"
920
989
  },
921
990
  onClick: (e) => {
922
- if (e.target === e.currentTarget) onClose();
991
+ if (!position && e.target === e.currentTarget) onClose();
923
992
  },
924
993
  children: /* @__PURE__ */ jsxs4(
925
994
  "div",
926
995
  {
996
+ ref: dialogRef,
927
997
  className: "rita-workspace-dialog",
928
- style: {
929
- backgroundColor: "var(--island-bg-color, #fff)",
930
- borderRadius: "8px",
931
- boxShadow: "0 4px 24px rgba(0, 0, 0, 0.2)",
932
- width: "90%",
933
- maxWidth: "600px",
934
- maxHeight: "80vh",
935
- display: "flex",
936
- flexDirection: "column",
937
- color: "var(--text-primary-color, #1b1b1f)"
938
- },
998
+ style: { ...dialogStyle, pointerEvents: "auto" },
939
999
  children: [
940
1000
  /* @__PURE__ */ jsxs4(
941
1001
  "div",
942
1002
  {
1003
+ onMouseDown: handleMouseDown,
943
1004
  style: {
944
1005
  padding: "16px 20px",
945
1006
  borderBottom: "1px solid var(--default-border-color, #e0e0e0)",
946
1007
  display: "flex",
947
1008
  alignItems: "center",
948
- justifyContent: "space-between"
1009
+ justifyContent: "space-between",
1010
+ cursor: "grab",
1011
+ userSelect: "none"
949
1012
  },
950
1013
  children: [
951
1014
  /* @__PURE__ */ jsx6("h2", { style: { margin: 0, fontSize: "18px", fontWeight: 600 }, children: t.dialogTitle }),
@@ -969,248 +1032,247 @@ var DrawingsDialog = ({
969
1032
  ]
970
1033
  }
971
1034
  ),
972
- /* @__PURE__ */ jsx6(
1035
+ /* @__PURE__ */ jsx6("div", { style: { flex: 1, overflow: "auto", padding: "8px 0" }, children: drawings.length === 0 ? /* @__PURE__ */ jsxs4("div", { style: { padding: "40px 20px", textAlign: "center", color: "var(--text-secondary-color, #666)" }, children: [
1036
+ /* @__PURE__ */ jsx6("p", { children: t.noDrawingsYet }),
1037
+ /* @__PURE__ */ jsx6("p", { children: t.clickNewToStart })
1038
+ ] }) : drawings.map((drawing) => /* @__PURE__ */ jsxs4(
973
1039
  "div",
974
1040
  {
1041
+ className: "rita-workspace-dialog-item",
1042
+ onClick: () => {
1043
+ if (editingId || confirmDeleteId) return;
1044
+ if (activeDrawing?.id !== drawing.id) handleSelect(drawing);
1045
+ },
975
1046
  style: {
976
- flex: 1,
977
- overflow: "auto",
978
- padding: "8px 0"
1047
+ padding: "12px 20px",
1048
+ display: "flex",
1049
+ alignItems: "center",
1050
+ gap: "12px",
1051
+ borderBottom: "1px solid var(--default-border-color, #f0f0f0)",
1052
+ cursor: editingId || confirmDeleteId ? "default" : "pointer",
1053
+ backgroundColor: activeDrawing?.id === drawing.id ? "var(--color-primary-light, rgba(108, 99, 255, 0.1))" : "transparent"
979
1054
  },
980
- children: drawings.length === 0 ? /* @__PURE__ */ jsxs4(
981
- "div",
982
- {
983
- style: {
984
- padding: "40px 20px",
985
- textAlign: "center",
986
- color: "var(--text-secondary-color, #666)"
987
- },
988
- children: [
989
- /* @__PURE__ */ jsx6("p", { children: t.noDrawingsYet }),
990
- /* @__PURE__ */ jsx6("p", { children: t.clickNewToStart })
991
- ]
992
- }
993
- ) : drawings.map((drawing) => /* @__PURE__ */ jsxs4(
994
- "div",
995
- {
996
- className: "rita-workspace-dialog-item",
997
- style: {
998
- padding: "12px 20px",
999
- display: "flex",
1000
- alignItems: "center",
1001
- gap: "12px",
1002
- borderBottom: "1px solid var(--default-border-color, #f0f0f0)",
1003
- backgroundColor: activeDrawing?.id === drawing.id ? "var(--color-primary-light, rgba(108, 99, 255, 0.1))" : "transparent"
1004
- },
1005
- children: [
1006
- renderThumbnail && /* @__PURE__ */ jsx6("div", { style: {
1007
- width: "80px",
1008
- height: "60px",
1009
- flexShrink: 0,
1010
- borderRadius: "4px",
1011
- overflow: "hidden",
1012
- border: "1px solid var(--default-border-color, #e0e0e0)",
1013
- backgroundColor: "#fff",
1014
- display: "flex",
1015
- alignItems: "center",
1016
- justifyContent: "center"
1017
- }, children: renderThumbnail(drawing) }),
1018
- /* @__PURE__ */ jsx6("div", { style: { flex: 1, minWidth: 0 }, children: editingId === drawing.id ? /* @__PURE__ */ jsx6(
1019
- "input",
1055
+ children: [
1056
+ renderThumbnail && /* @__PURE__ */ jsx6("div", { style: {
1057
+ width: "80px",
1058
+ height: "60px",
1059
+ flexShrink: 0,
1060
+ borderRadius: "4px",
1061
+ overflow: "hidden",
1062
+ border: "1px solid var(--default-border-color, #e0e0e0)",
1063
+ backgroundColor: "#fff",
1064
+ display: "flex",
1065
+ alignItems: "center",
1066
+ justifyContent: "center"
1067
+ }, children: renderThumbnail(drawing) }),
1068
+ /* @__PURE__ */ jsx6("div", { style: { flex: 1, minWidth: 0 }, children: editingId === drawing.id ? /* @__PURE__ */ jsxs4("div", { style: { display: "flex", gap: "6px", alignItems: "center" }, children: [
1069
+ /* @__PURE__ */ jsx6(
1070
+ "input",
1071
+ {
1072
+ type: "text",
1073
+ value: editName,
1074
+ onChange: (e) => setEditName(e.target.value),
1075
+ onKeyDown: (e) => {
1076
+ if (e.key === "Enter") handleSaveEdit();
1077
+ if (e.key === "Escape") handleCancelEdit();
1078
+ },
1079
+ onClick: (e) => e.stopPropagation(),
1080
+ autoFocus: true,
1081
+ style: {
1082
+ flex: 1,
1083
+ padding: "4px 8px",
1084
+ fontSize: "14px",
1085
+ border: "1px solid var(--color-primary, #6c63ff)",
1086
+ borderRadius: "4px",
1087
+ outline: "none"
1088
+ }
1089
+ }
1090
+ ),
1091
+ /* @__PURE__ */ jsx6(
1092
+ "button",
1093
+ {
1094
+ onClick: (e) => {
1095
+ e.stopPropagation();
1096
+ handleSaveEdit();
1097
+ },
1098
+ style: {
1099
+ padding: "4px 10px",
1100
+ fontSize: "12px",
1101
+ backgroundColor: "var(--color-primary, #6c63ff)",
1102
+ color: "#fff",
1103
+ border: "none",
1104
+ borderRadius: "4px",
1105
+ cursor: "pointer"
1106
+ },
1107
+ children: t.save
1108
+ }
1109
+ ),
1110
+ /* @__PURE__ */ jsx6(
1111
+ "button",
1112
+ {
1113
+ onClick: (e) => {
1114
+ e.stopPropagation();
1115
+ handleCancelEdit();
1116
+ },
1117
+ style: {
1118
+ padding: "4px 10px",
1119
+ fontSize: "12px",
1120
+ backgroundColor: "transparent",
1121
+ border: "1px solid var(--default-border-color, #ccc)",
1122
+ borderRadius: "4px",
1123
+ cursor: "pointer",
1124
+ color: "inherit"
1125
+ },
1126
+ children: t.cancel
1127
+ }
1128
+ )
1129
+ ] }) : /* @__PURE__ */ jsxs4(Fragment3, { children: [
1130
+ /* @__PURE__ */ jsxs4("div", { style: { display: "flex", alignItems: "center", gap: "6px" }, children: [
1131
+ /* @__PURE__ */ jsxs4(
1132
+ "span",
1020
1133
  {
1021
- type: "text",
1022
- value: editName,
1023
- onChange: (e) => setEditName(e.target.value),
1024
- onKeyDown: (e) => {
1025
- if (e.key === "Enter") handleSaveEdit();
1026
- if (e.key === "Escape") handleCancelEdit();
1134
+ onClick: (e) => {
1135
+ e.stopPropagation();
1136
+ handleStartEdit(drawing);
1027
1137
  },
1028
- autoFocus: true,
1029
1138
  style: {
1030
- width: "100%",
1031
- padding: "4px 8px",
1139
+ fontWeight: activeDrawing?.id === drawing.id ? 600 : 400,
1032
1140
  fontSize: "14px",
1033
- border: "1px solid var(--color-primary, #6c63ff)",
1034
- borderRadius: "4px",
1035
- outline: "none"
1036
- }
1141
+ overflow: "hidden",
1142
+ textOverflow: "ellipsis",
1143
+ whiteSpace: "nowrap",
1144
+ cursor: "text"
1145
+ },
1146
+ title: t.rename,
1147
+ children: [
1148
+ activeDrawing?.id === drawing.id && "\u2713 ",
1149
+ drawing.name
1150
+ ]
1037
1151
  }
1038
- ) : /* @__PURE__ */ jsxs4(Fragment3, { children: [
1039
- /* @__PURE__ */ jsxs4(
1040
- "div",
1041
- {
1042
- style: {
1043
- fontWeight: activeDrawing?.id === drawing.id ? 600 : 400,
1044
- fontSize: "14px",
1045
- overflow: "hidden",
1046
- textOverflow: "ellipsis",
1047
- whiteSpace: "nowrap"
1048
- },
1049
- children: [
1050
- activeDrawing?.id === drawing.id && "\u2713 ",
1051
- drawing.name
1052
- ]
1053
- }
1054
- ),
1055
- /* @__PURE__ */ jsxs4(
1056
- "div",
1057
- {
1058
- style: {
1059
- fontSize: "12px",
1060
- color: "var(--text-secondary-color, #888)",
1061
- marginTop: "2px"
1062
- },
1063
- children: [
1064
- t.modified,
1065
- ": ",
1066
- formatDate(drawing.updatedAt)
1067
- ]
1068
- }
1069
- )
1070
- ] }) }),
1071
- /* @__PURE__ */ jsx6("div", { style: { display: "flex", gap: "4px" }, children: editingId === drawing.id ? /* @__PURE__ */ jsxs4(Fragment3, { children: [
1072
- /* @__PURE__ */ jsx6(
1073
- "button",
1074
- {
1075
- onClick: handleSaveEdit,
1076
- style: {
1077
- padding: "6px 12px",
1078
- fontSize: "12px",
1079
- backgroundColor: "var(--color-primary, #6c63ff)",
1080
- color: "#fff",
1081
- border: "none",
1082
- borderRadius: "4px",
1083
- cursor: "pointer"
1084
- },
1085
- children: t.save
1086
- }
1087
- ),
1088
- /* @__PURE__ */ jsx6(
1089
- "button",
1090
- {
1091
- onClick: handleCancelEdit,
1092
- style: {
1093
- padding: "6px 12px",
1094
- fontSize: "12px",
1095
- backgroundColor: "transparent",
1096
- border: "1px solid var(--default-border-color, #ccc)",
1097
- borderRadius: "4px",
1098
- cursor: "pointer",
1099
- color: "inherit"
1100
- },
1101
- children: t.cancel
1102
- }
1103
- )
1104
- ] }) : confirmDeleteId === drawing.id ? /* @__PURE__ */ jsxs4(Fragment3, { children: [
1105
- /* @__PURE__ */ jsx6(
1106
- "button",
1107
- {
1108
- onClick: () => handleDelete(drawing.id),
1109
- style: {
1110
- padding: "6px 12px",
1111
- fontSize: "12px",
1112
- backgroundColor: "#dc3545",
1113
- color: "#fff",
1114
- border: "none",
1115
- borderRadius: "4px",
1116
- cursor: "pointer"
1117
- },
1118
- children: t.delete
1119
- }
1120
- ),
1121
- /* @__PURE__ */ jsx6(
1122
- "button",
1123
- {
1124
- onClick: () => setConfirmDeleteId(null),
1125
- style: {
1126
- padding: "6px 12px",
1127
- fontSize: "12px",
1128
- backgroundColor: "transparent",
1129
- border: "1px solid var(--default-border-color, #ccc)",
1130
- borderRadius: "4px",
1131
- cursor: "pointer",
1132
- color: "inherit"
1133
- },
1134
- children: t.cancel
1135
- }
1136
- )
1137
- ] }) : /* @__PURE__ */ jsxs4(Fragment3, { children: [
1138
- /* @__PURE__ */ jsx6(
1139
- "button",
1140
- {
1141
- onClick: () => handleSelect(drawing),
1142
- style: {
1143
- padding: "6px 12px",
1144
- fontSize: "12px",
1145
- backgroundColor: "var(--color-primary, #6c63ff)",
1146
- color: "#fff",
1147
- border: "none",
1148
- borderRadius: "4px",
1149
- cursor: "pointer"
1150
- },
1151
- disabled: activeDrawing?.id === drawing.id,
1152
- children: t.open
1153
- }
1154
- ),
1155
- /* @__PURE__ */ jsx6(
1156
- "button",
1157
- {
1158
- onClick: () => exportDrawingAsExcalidraw(drawing.id),
1159
- style: {
1160
- padding: "6px 12px",
1161
- fontSize: "12px",
1162
- backgroundColor: "transparent",
1163
- border: "1px solid var(--default-border-color, #ccc)",
1164
- borderRadius: "4px",
1165
- cursor: "pointer",
1166
- color: "inherit"
1167
- },
1168
- title: t.exportDrawing,
1169
- children: "\u{1F4BE}"
1170
- }
1171
- ),
1172
- /* @__PURE__ */ jsx6(
1173
- "button",
1174
- {
1175
- onClick: () => handleStartEdit(drawing),
1176
- style: {
1177
- padding: "6px 12px",
1178
- fontSize: "12px",
1179
- backgroundColor: "transparent",
1180
- border: "1px solid var(--default-border-color, #ccc)",
1181
- borderRadius: "4px",
1182
- cursor: "pointer",
1183
- color: "inherit"
1184
- },
1185
- title: t.rename,
1186
- children: "\u270F\uFE0F"
1187
- }
1188
- ),
1189
- /* @__PURE__ */ jsx6(
1190
- "button",
1191
- {
1192
- onClick: () => setConfirmDeleteId(drawing.id),
1193
- style: {
1194
- padding: "6px 12px",
1195
- fontSize: "12px",
1196
- backgroundColor: "transparent",
1197
- border: "1px solid var(--default-border-color, #ccc)",
1198
- borderRadius: "4px",
1199
- cursor: "pointer",
1200
- color: "inherit"
1201
- },
1202
- title: t.delete,
1203
- disabled: drawings.length <= 1,
1204
- children: "\u{1F5D1}\uFE0F"
1205
- }
1206
- )
1207
- ] }) })
1208
- ]
1209
- },
1210
- drawing.id
1211
- ))
1212
- }
1213
- ),
1152
+ ),
1153
+ /* @__PURE__ */ jsx6(
1154
+ "button",
1155
+ {
1156
+ onClick: (e) => {
1157
+ e.stopPropagation();
1158
+ handleStartEdit(drawing);
1159
+ },
1160
+ style: {
1161
+ background: "none",
1162
+ border: "none",
1163
+ cursor: "pointer",
1164
+ padding: "0 2px",
1165
+ fontSize: "12px",
1166
+ opacity: 0.5,
1167
+ flexShrink: 0
1168
+ },
1169
+ title: t.rename,
1170
+ children: "\u270F\uFE0F"
1171
+ }
1172
+ )
1173
+ ] }),
1174
+ /* @__PURE__ */ jsxs4(
1175
+ "div",
1176
+ {
1177
+ style: {
1178
+ fontSize: "12px",
1179
+ color: "var(--text-secondary-color, #888)",
1180
+ marginTop: "2px"
1181
+ },
1182
+ children: [
1183
+ t.modified,
1184
+ ": ",
1185
+ formatDate(drawing.updatedAt)
1186
+ ]
1187
+ }
1188
+ )
1189
+ ] }) }),
1190
+ /* @__PURE__ */ jsx6("div", { style: { display: "flex", gap: "4px" }, children: confirmDeleteId === drawing.id ? /* @__PURE__ */ jsxs4(Fragment3, { children: [
1191
+ /* @__PURE__ */ jsx6(
1192
+ "button",
1193
+ {
1194
+ onClick: (e) => {
1195
+ e.stopPropagation();
1196
+ handleDelete(drawing.id);
1197
+ },
1198
+ style: {
1199
+ padding: "6px 12px",
1200
+ fontSize: "12px",
1201
+ backgroundColor: "#dc3545",
1202
+ color: "#fff",
1203
+ border: "none",
1204
+ borderRadius: "4px",
1205
+ cursor: "pointer"
1206
+ },
1207
+ children: t.delete
1208
+ }
1209
+ ),
1210
+ /* @__PURE__ */ jsx6(
1211
+ "button",
1212
+ {
1213
+ onClick: (e) => {
1214
+ e.stopPropagation();
1215
+ setConfirmDeleteId(null);
1216
+ },
1217
+ style: {
1218
+ padding: "6px 12px",
1219
+ fontSize: "12px",
1220
+ backgroundColor: "transparent",
1221
+ border: "1px solid var(--default-border-color, #ccc)",
1222
+ borderRadius: "4px",
1223
+ cursor: "pointer",
1224
+ color: "inherit"
1225
+ },
1226
+ children: t.cancel
1227
+ }
1228
+ )
1229
+ ] }) : editingId !== drawing.id && /* @__PURE__ */ jsxs4(Fragment3, { children: [
1230
+ /* @__PURE__ */ jsx6(
1231
+ "button",
1232
+ {
1233
+ onClick: (e) => {
1234
+ e.stopPropagation();
1235
+ exportDrawingAsExcalidraw(drawing.id);
1236
+ },
1237
+ style: {
1238
+ padding: "6px 12px",
1239
+ fontSize: "12px",
1240
+ backgroundColor: "transparent",
1241
+ border: "1px solid var(--default-border-color, #ccc)",
1242
+ borderRadius: "4px",
1243
+ cursor: "pointer",
1244
+ color: "inherit"
1245
+ },
1246
+ title: t.exportDrawing,
1247
+ children: "\u{1F4BE}"
1248
+ }
1249
+ ),
1250
+ /* @__PURE__ */ jsx6(
1251
+ "button",
1252
+ {
1253
+ onClick: (e) => {
1254
+ e.stopPropagation();
1255
+ setConfirmDeleteId(drawing.id);
1256
+ },
1257
+ style: {
1258
+ padding: "6px 12px",
1259
+ fontSize: "12px",
1260
+ backgroundColor: "transparent",
1261
+ border: "1px solid var(--default-border-color, #ccc)",
1262
+ borderRadius: "4px",
1263
+ cursor: "pointer",
1264
+ color: "inherit"
1265
+ },
1266
+ title: t.delete,
1267
+ disabled: drawings.length <= 1,
1268
+ children: "\u{1F5D1}\uFE0F"
1269
+ }
1270
+ )
1271
+ ] }) })
1272
+ ]
1273
+ },
1274
+ drawing.id
1275
+ )) }),
1214
1276
  /* @__PURE__ */ jsx6(
1215
1277
  "div",
1216
1278
  {
@@ -1221,7 +1283,7 @@ var DrawingsDialog = ({
1221
1283
  justifyContent: "space-between",
1222
1284
  alignItems: "center"
1223
1285
  },
1224
- children: /* @__PURE__ */ jsxs4("div", { style: { display: "flex", gap: "8px" }, children: [
1286
+ children: /* @__PURE__ */ jsxs4("div", { style: { display: "flex", gap: "8px", flexWrap: "wrap" }, children: [
1225
1287
  /* @__PURE__ */ jsxs4(
1226
1288
  "button",
1227
1289
  {
@@ -1311,15 +1373,15 @@ var DrawingsDialog = ({
1311
1373
  };
1312
1374
 
1313
1375
  // src/integration/useExcalidrawBridge.ts
1314
- import { useEffect as useEffect3, useRef as useRef2, useCallback as useCallback3 } from "react";
1376
+ import { useEffect as useEffect4, useRef as useRef3, useCallback as useCallback3 } from "react";
1315
1377
  function useExcalidrawBridge({
1316
1378
  excalidrawAPI,
1317
1379
  autoSaveInterval = 2e3
1318
1380
  }) {
1319
1381
  const { activeDrawing, saveCurrentDrawing } = useWorkspace();
1320
- const saveTimeoutRef = useRef2(null);
1321
- const lastDrawingIdRef = useRef2(null);
1322
- useEffect3(() => {
1382
+ const saveTimeoutRef = useRef3(null);
1383
+ const lastDrawingIdRef = useRef3(null);
1384
+ useEffect4(() => {
1323
1385
  if (!excalidrawAPI || !activeDrawing) return;
1324
1386
  if (lastDrawingIdRef.current === activeDrawing.id) return;
1325
1387
  lastDrawingIdRef.current = activeDrawing.id;
@@ -1339,7 +1401,7 @@ function useExcalidrawBridge({
1339
1401
  await saveCurrentDrawing(elements, appState);
1340
1402
  }, autoSaveInterval);
1341
1403
  }, [excalidrawAPI, saveCurrentDrawing, autoSaveInterval]);
1342
- useEffect3(() => {
1404
+ useEffect4(() => {
1343
1405
  return () => {
1344
1406
  if (saveTimeoutRef.current) {
1345
1407
  clearTimeout(saveTimeoutRef.current);
@@ -1352,7 +1414,7 @@ function useExcalidrawBridge({
1352
1414
  }
1353
1415
 
1354
1416
  // src/integration/WorkspaceBridge.tsx
1355
- import { useEffect as useEffect4, useRef as useRef3, useCallback as useCallback4 } from "react";
1417
+ import { useEffect as useEffect5, useRef as useRef4, useCallback as useCallback4 } from "react";
1356
1418
  function WorkspaceBridge({
1357
1419
  excalidrawAPI,
1358
1420
  autoSaveInterval = 2e3,
@@ -1360,9 +1422,9 @@ function WorkspaceBridge({
1360
1422
  onDrawingSave
1361
1423
  }) {
1362
1424
  const { activeDrawing, saveCurrentDrawing } = useWorkspace();
1363
- const lastDrawingIdRef = useRef3(null);
1364
- const saveTimeoutRef = useRef3(null);
1365
- const isLoadingRef = useRef3(false);
1425
+ const lastDrawingIdRef = useRef4(null);
1426
+ const saveTimeoutRef = useRef4(null);
1427
+ const isLoadingRef = useRef4(false);
1366
1428
  const saveDrawing = useCallback4(async () => {
1367
1429
  if (!excalidrawAPI || !activeDrawing || isLoadingRef.current) return;
1368
1430
  try {
@@ -1389,7 +1451,7 @@ function WorkspaceBridge({
1389
1451
  }
1390
1452
  saveTimeoutRef.current = setTimeout(saveDrawing, autoSaveInterval);
1391
1453
  }, [saveDrawing, autoSaveInterval]);
1392
- useEffect4(() => {
1454
+ useEffect5(() => {
1393
1455
  if (!excalidrawAPI || !activeDrawing) return;
1394
1456
  if (lastDrawingIdRef.current === activeDrawing.id) return;
1395
1457
  if (lastDrawingIdRef.current !== null) {
@@ -1416,7 +1478,7 @@ function WorkspaceBridge({
1416
1478
  }, 100);
1417
1479
  }
1418
1480
  }, [excalidrawAPI, activeDrawing, saveDrawing, onDrawingLoad]);
1419
- useEffect4(() => {
1481
+ useEffect5(() => {
1420
1482
  if (!excalidrawAPI || autoSaveInterval <= 0) return;
1421
1483
  let lastElementCount = 0;
1422
1484
  let lastChecksum = "";
@@ -1442,7 +1504,7 @@ function WorkspaceBridge({
1442
1504
  }
1443
1505
  };
1444
1506
  }, [excalidrawAPI, autoSaveInterval, scheduleSave]);
1445
- useEffect4(() => {
1507
+ useEffect5(() => {
1446
1508
  return () => {
1447
1509
  if (saveTimeoutRef.current) {
1448
1510
  clearTimeout(saveTimeoutRef.current);
@@ -1454,7 +1516,7 @@ function WorkspaceBridge({
1454
1516
  }
1455
1517
 
1456
1518
  // src/WorkspacePlugin.tsx
1457
- import { useState as useState5, useEffect as useEffect5, useCallback as useCallback5 } from "react";
1519
+ import { useState as useState5, useEffect as useEffect6, useCallback as useCallback5 } from "react";
1458
1520
  import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
1459
1521
  function WorkspacePluginInner({
1460
1522
  children,
@@ -1463,7 +1525,7 @@ function WorkspacePluginInner({
1463
1525
  }) {
1464
1526
  const [sidebarOpen, setSidebarOpen] = useState5(defaultSidebarOpen);
1465
1527
  const { activeDrawing } = useWorkspace();
1466
- useEffect5(() => {
1528
+ useEffect6(() => {
1467
1529
  const handleKeyDown = (e) => {
1468
1530
  if (e.ctrlKey && e.key === "b") {
1469
1531
  e.preventDefault();