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.js CHANGED
@@ -216,7 +216,7 @@ var sv = {
216
216
  newDrawing: "Ny ritning",
217
217
  manageDrawings: "Hantera arbetsyta...",
218
218
  // Dialog
219
- dialogTitle: "Min Rita Arbetsyta",
219
+ dialogTitle: "Min Arbetsyta",
220
220
  close: "St\xE4ng",
221
221
  open: "\xD6ppna",
222
222
  rename: "Byt namn",
@@ -327,6 +327,19 @@ function WorkspaceProvider({ children, lang = "en" }) {
327
327
  }
328
328
  init();
329
329
  }, []);
330
+ const refreshDrawings = (0, import_react.useCallback)(async () => {
331
+ if (!workspace) return;
332
+ try {
333
+ const allDrawings = await getAllDrawings();
334
+ const wsDrawings = allDrawings.filter((d) => workspace.drawingIds.includes(d.id));
335
+ setDrawings(wsDrawings);
336
+ if (workspace.activeDrawingId) {
337
+ const active = await getDrawing(workspace.activeDrawingId);
338
+ if (active) setActiveDrawing2(active);
339
+ }
340
+ } catch (err) {
341
+ }
342
+ }, [workspace]);
330
343
  const createNewDrawing = (0, import_react.useCallback)(async (name) => {
331
344
  if (!workspace) return null;
332
345
  try {
@@ -579,6 +592,7 @@ function WorkspaceProvider({ children, lang = "en" }) {
579
592
  duplicateCurrentDrawing,
580
593
  saveCurrentDrawing,
581
594
  saveDrawingById,
595
+ refreshDrawings,
582
596
  exportWorkspace,
583
597
  importWorkspace,
584
598
  exportDrawingAsExcalidraw,
@@ -911,14 +925,43 @@ var DrawingsDialog = ({
911
925
  importWorkspace,
912
926
  exportDrawingAsExcalidraw,
913
927
  importExcalidrawFile,
928
+ refreshDrawings,
914
929
  t: contextT,
915
930
  lang: contextLang
916
931
  } = useWorkspace();
932
+ (0, import_react5.useEffect)(() => {
933
+ if (open) {
934
+ refreshDrawings();
935
+ }
936
+ }, [open, refreshDrawings]);
917
937
  const t = lang ? getTranslations(lang) : contextT;
918
938
  const effectiveLang = lang || contextLang;
919
939
  const [editingId, setEditingId] = (0, import_react5.useState)(null);
920
940
  const [editName, setEditName] = (0, import_react5.useState)("");
921
941
  const [confirmDeleteId, setConfirmDeleteId] = (0, import_react5.useState)(null);
942
+ const [position, setPosition] = (0, import_react5.useState)(null);
943
+ const dragRef = (0, import_react5.useRef)(null);
944
+ const dialogRef = (0, import_react5.useRef)(null);
945
+ const handleMouseDown = (0, import_react5.useCallback)((e) => {
946
+ if (!dialogRef.current) return;
947
+ const rect = dialogRef.current.getBoundingClientRect();
948
+ const currentX = position?.x ?? rect.left;
949
+ const currentY = position?.y ?? rect.top;
950
+ dragRef.current = { startX: e.clientX, startY: e.clientY, origX: currentX, origY: currentY };
951
+ const handleMouseMove = (e2) => {
952
+ if (!dragRef.current) return;
953
+ const dx = e2.clientX - dragRef.current.startX;
954
+ const dy = e2.clientY - dragRef.current.startY;
955
+ setPosition({ x: dragRef.current.origX + dx, y: dragRef.current.origY + dy });
956
+ };
957
+ const handleMouseUp = () => {
958
+ dragRef.current = null;
959
+ document.removeEventListener("mousemove", handleMouseMove);
960
+ document.removeEventListener("mouseup", handleMouseUp);
961
+ };
962
+ document.addEventListener("mousemove", handleMouseMove);
963
+ document.addEventListener("mouseup", handleMouseUp);
964
+ }, [position]);
922
965
  const handleSelect = (0, import_react5.useCallback)(async (drawing) => {
923
966
  await switchDrawing(drawing.id);
924
967
  onDrawingSelect?.(drawing);
@@ -964,6 +1007,31 @@ var DrawingsDialog = ({
964
1007
  });
965
1008
  };
966
1009
  if (!open) return null;
1010
+ const dialogStyle = position ? {
1011
+ position: "fixed",
1012
+ left: position.x,
1013
+ top: position.y,
1014
+ backgroundColor: "var(--island-bg-color, #fff)",
1015
+ borderRadius: "8px",
1016
+ boxShadow: "0 4px 24px rgba(0, 0, 0, 0.2)",
1017
+ width: "90%",
1018
+ maxWidth: "600px",
1019
+ maxHeight: "80vh",
1020
+ display: "flex",
1021
+ flexDirection: "column",
1022
+ color: "var(--text-primary-color, #1b1b1f)",
1023
+ zIndex: 1e4
1024
+ } : {
1025
+ backgroundColor: "var(--island-bg-color, #fff)",
1026
+ borderRadius: "8px",
1027
+ boxShadow: "0 4px 24px rgba(0, 0, 0, 0.2)",
1028
+ width: "90%",
1029
+ maxWidth: "600px",
1030
+ maxHeight: "80vh",
1031
+ display: "flex",
1032
+ flexDirection: "column",
1033
+ color: "var(--text-primary-color, #1b1b1f)"
1034
+ };
967
1035
  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
968
1036
  "div",
969
1037
  {
@@ -974,40 +1042,35 @@ var DrawingsDialog = ({
974
1042
  left: 0,
975
1043
  right: 0,
976
1044
  bottom: 0,
977
- backgroundColor: "rgba(0, 0, 0, 0.5)",
978
- display: "flex",
1045
+ backgroundColor: position ? "transparent" : "rgba(0, 0, 0, 0.5)",
1046
+ display: position ? "block" : "flex",
979
1047
  alignItems: "center",
980
1048
  justifyContent: "center",
981
- zIndex: 9999
1049
+ zIndex: 9999,
1050
+ pointerEvents: position ? "none" : "auto"
982
1051
  },
983
1052
  onClick: (e) => {
984
- if (e.target === e.currentTarget) onClose();
1053
+ if (!position && e.target === e.currentTarget) onClose();
985
1054
  },
986
1055
  children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
987
1056
  "div",
988
1057
  {
1058
+ ref: dialogRef,
989
1059
  className: "rita-workspace-dialog",
990
- style: {
991
- backgroundColor: "var(--island-bg-color, #fff)",
992
- borderRadius: "8px",
993
- boxShadow: "0 4px 24px rgba(0, 0, 0, 0.2)",
994
- width: "90%",
995
- maxWidth: "600px",
996
- maxHeight: "80vh",
997
- display: "flex",
998
- flexDirection: "column",
999
- color: "var(--text-primary-color, #1b1b1f)"
1000
- },
1060
+ style: { ...dialogStyle, pointerEvents: "auto" },
1001
1061
  children: [
1002
1062
  /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
1003
1063
  "div",
1004
1064
  {
1065
+ onMouseDown: handleMouseDown,
1005
1066
  style: {
1006
1067
  padding: "16px 20px",
1007
1068
  borderBottom: "1px solid var(--default-border-color, #e0e0e0)",
1008
1069
  display: "flex",
1009
1070
  alignItems: "center",
1010
- justifyContent: "space-between"
1071
+ justifyContent: "space-between",
1072
+ cursor: "grab",
1073
+ userSelect: "none"
1011
1074
  },
1012
1075
  children: [
1013
1076
  /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("h2", { style: { margin: 0, fontSize: "18px", fontWeight: 600 }, children: t.dialogTitle }),
@@ -1031,248 +1094,247 @@ var DrawingsDialog = ({
1031
1094
  ]
1032
1095
  }
1033
1096
  ),
1034
- /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
1097
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: { flex: 1, overflow: "auto", padding: "8px 0" }, children: drawings.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: { padding: "40px 20px", textAlign: "center", color: "var(--text-secondary-color, #666)" }, children: [
1098
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { children: t.noDrawingsYet }),
1099
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { children: t.clickNewToStart })
1100
+ ] }) : drawings.map((drawing) => /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
1035
1101
  "div",
1036
1102
  {
1103
+ className: "rita-workspace-dialog-item",
1104
+ onClick: () => {
1105
+ if (editingId || confirmDeleteId) return;
1106
+ if (activeDrawing?.id !== drawing.id) handleSelect(drawing);
1107
+ },
1037
1108
  style: {
1038
- flex: 1,
1039
- overflow: "auto",
1040
- padding: "8px 0"
1109
+ padding: "12px 20px",
1110
+ display: "flex",
1111
+ alignItems: "center",
1112
+ gap: "12px",
1113
+ borderBottom: "1px solid var(--default-border-color, #f0f0f0)",
1114
+ cursor: editingId || confirmDeleteId ? "default" : "pointer",
1115
+ backgroundColor: activeDrawing?.id === drawing.id ? "var(--color-primary-light, rgba(108, 99, 255, 0.1))" : "transparent"
1041
1116
  },
1042
- children: drawings.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
1043
- "div",
1044
- {
1045
- style: {
1046
- padding: "40px 20px",
1047
- textAlign: "center",
1048
- color: "var(--text-secondary-color, #666)"
1049
- },
1050
- children: [
1051
- /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { children: t.noDrawingsYet }),
1052
- /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { children: t.clickNewToStart })
1053
- ]
1054
- }
1055
- ) : drawings.map((drawing) => /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
1056
- "div",
1057
- {
1058
- className: "rita-workspace-dialog-item",
1059
- style: {
1060
- padding: "12px 20px",
1061
- display: "flex",
1062
- alignItems: "center",
1063
- gap: "12px",
1064
- borderBottom: "1px solid var(--default-border-color, #f0f0f0)",
1065
- backgroundColor: activeDrawing?.id === drawing.id ? "var(--color-primary-light, rgba(108, 99, 255, 0.1))" : "transparent"
1066
- },
1067
- children: [
1068
- renderThumbnail && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: {
1069
- width: "80px",
1070
- height: "60px",
1071
- flexShrink: 0,
1072
- borderRadius: "4px",
1073
- overflow: "hidden",
1074
- border: "1px solid var(--default-border-color, #e0e0e0)",
1075
- backgroundColor: "#fff",
1076
- display: "flex",
1077
- alignItems: "center",
1078
- justifyContent: "center"
1079
- }, children: renderThumbnail(drawing) }),
1080
- /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: { flex: 1, minWidth: 0 }, children: editingId === drawing.id ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
1081
- "input",
1117
+ children: [
1118
+ renderThumbnail && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: {
1119
+ width: "80px",
1120
+ height: "60px",
1121
+ flexShrink: 0,
1122
+ borderRadius: "4px",
1123
+ overflow: "hidden",
1124
+ border: "1px solid var(--default-border-color, #e0e0e0)",
1125
+ backgroundColor: "#fff",
1126
+ display: "flex",
1127
+ alignItems: "center",
1128
+ justifyContent: "center"
1129
+ }, children: renderThumbnail(drawing) }),
1130
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: { flex: 1, minWidth: 0 }, children: editingId === drawing.id ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: { display: "flex", gap: "6px", alignItems: "center" }, children: [
1131
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
1132
+ "input",
1133
+ {
1134
+ type: "text",
1135
+ value: editName,
1136
+ onChange: (e) => setEditName(e.target.value),
1137
+ onKeyDown: (e) => {
1138
+ if (e.key === "Enter") handleSaveEdit();
1139
+ if (e.key === "Escape") handleCancelEdit();
1140
+ },
1141
+ onClick: (e) => e.stopPropagation(),
1142
+ autoFocus: true,
1143
+ style: {
1144
+ flex: 1,
1145
+ padding: "4px 8px",
1146
+ fontSize: "14px",
1147
+ border: "1px solid var(--color-primary, #6c63ff)",
1148
+ borderRadius: "4px",
1149
+ outline: "none"
1150
+ }
1151
+ }
1152
+ ),
1153
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
1154
+ "button",
1155
+ {
1156
+ onClick: (e) => {
1157
+ e.stopPropagation();
1158
+ handleSaveEdit();
1159
+ },
1160
+ style: {
1161
+ padding: "4px 10px",
1162
+ fontSize: "12px",
1163
+ backgroundColor: "var(--color-primary, #6c63ff)",
1164
+ color: "#fff",
1165
+ border: "none",
1166
+ borderRadius: "4px",
1167
+ cursor: "pointer"
1168
+ },
1169
+ children: t.save
1170
+ }
1171
+ ),
1172
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
1173
+ "button",
1174
+ {
1175
+ onClick: (e) => {
1176
+ e.stopPropagation();
1177
+ handleCancelEdit();
1178
+ },
1179
+ style: {
1180
+ padding: "4px 10px",
1181
+ fontSize: "12px",
1182
+ backgroundColor: "transparent",
1183
+ border: "1px solid var(--default-border-color, #ccc)",
1184
+ borderRadius: "4px",
1185
+ cursor: "pointer",
1186
+ color: "inherit"
1187
+ },
1188
+ children: t.cancel
1189
+ }
1190
+ )
1191
+ ] }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
1192
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "6px" }, children: [
1193
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
1194
+ "span",
1082
1195
  {
1083
- type: "text",
1084
- value: editName,
1085
- onChange: (e) => setEditName(e.target.value),
1086
- onKeyDown: (e) => {
1087
- if (e.key === "Enter") handleSaveEdit();
1088
- if (e.key === "Escape") handleCancelEdit();
1196
+ onClick: (e) => {
1197
+ e.stopPropagation();
1198
+ handleStartEdit(drawing);
1089
1199
  },
1090
- autoFocus: true,
1091
1200
  style: {
1092
- width: "100%",
1093
- padding: "4px 8px",
1201
+ fontWeight: activeDrawing?.id === drawing.id ? 600 : 400,
1094
1202
  fontSize: "14px",
1095
- border: "1px solid var(--color-primary, #6c63ff)",
1096
- borderRadius: "4px",
1097
- outline: "none"
1098
- }
1203
+ overflow: "hidden",
1204
+ textOverflow: "ellipsis",
1205
+ whiteSpace: "nowrap",
1206
+ cursor: "text"
1207
+ },
1208
+ title: t.rename,
1209
+ children: [
1210
+ activeDrawing?.id === drawing.id && "\u2713 ",
1211
+ drawing.name
1212
+ ]
1099
1213
  }
1100
- ) : /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
1101
- /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
1102
- "div",
1103
- {
1104
- style: {
1105
- fontWeight: activeDrawing?.id === drawing.id ? 600 : 400,
1106
- fontSize: "14px",
1107
- overflow: "hidden",
1108
- textOverflow: "ellipsis",
1109
- whiteSpace: "nowrap"
1110
- },
1111
- children: [
1112
- activeDrawing?.id === drawing.id && "\u2713 ",
1113
- drawing.name
1114
- ]
1115
- }
1116
- ),
1117
- /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
1118
- "div",
1119
- {
1120
- style: {
1121
- fontSize: "12px",
1122
- color: "var(--text-secondary-color, #888)",
1123
- marginTop: "2px"
1124
- },
1125
- children: [
1126
- t.modified,
1127
- ": ",
1128
- formatDate(drawing.updatedAt)
1129
- ]
1130
- }
1131
- )
1132
- ] }) }),
1133
- /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: { display: "flex", gap: "4px" }, children: editingId === drawing.id ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
1134
- /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
1135
- "button",
1136
- {
1137
- onClick: handleSaveEdit,
1138
- style: {
1139
- padding: "6px 12px",
1140
- fontSize: "12px",
1141
- backgroundColor: "var(--color-primary, #6c63ff)",
1142
- color: "#fff",
1143
- border: "none",
1144
- borderRadius: "4px",
1145
- cursor: "pointer"
1146
- },
1147
- children: t.save
1148
- }
1149
- ),
1150
- /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
1151
- "button",
1152
- {
1153
- onClick: handleCancelEdit,
1154
- style: {
1155
- padding: "6px 12px",
1156
- fontSize: "12px",
1157
- backgroundColor: "transparent",
1158
- border: "1px solid var(--default-border-color, #ccc)",
1159
- borderRadius: "4px",
1160
- cursor: "pointer",
1161
- color: "inherit"
1162
- },
1163
- children: t.cancel
1164
- }
1165
- )
1166
- ] }) : confirmDeleteId === drawing.id ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
1167
- /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
1168
- "button",
1169
- {
1170
- onClick: () => handleDelete(drawing.id),
1171
- style: {
1172
- padding: "6px 12px",
1173
- fontSize: "12px",
1174
- backgroundColor: "#dc3545",
1175
- color: "#fff",
1176
- border: "none",
1177
- borderRadius: "4px",
1178
- cursor: "pointer"
1179
- },
1180
- children: t.delete
1181
- }
1182
- ),
1183
- /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
1184
- "button",
1185
- {
1186
- onClick: () => setConfirmDeleteId(null),
1187
- style: {
1188
- padding: "6px 12px",
1189
- fontSize: "12px",
1190
- backgroundColor: "transparent",
1191
- border: "1px solid var(--default-border-color, #ccc)",
1192
- borderRadius: "4px",
1193
- cursor: "pointer",
1194
- color: "inherit"
1195
- },
1196
- children: t.cancel
1197
- }
1198
- )
1199
- ] }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
1200
- /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
1201
- "button",
1202
- {
1203
- onClick: () => handleSelect(drawing),
1204
- style: {
1205
- padding: "6px 12px",
1206
- fontSize: "12px",
1207
- backgroundColor: "var(--color-primary, #6c63ff)",
1208
- color: "#fff",
1209
- border: "none",
1210
- borderRadius: "4px",
1211
- cursor: "pointer"
1212
- },
1213
- disabled: activeDrawing?.id === drawing.id,
1214
- children: t.open
1215
- }
1216
- ),
1217
- /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
1218
- "button",
1219
- {
1220
- onClick: () => exportDrawingAsExcalidraw(drawing.id),
1221
- style: {
1222
- padding: "6px 12px",
1223
- fontSize: "12px",
1224
- backgroundColor: "transparent",
1225
- border: "1px solid var(--default-border-color, #ccc)",
1226
- borderRadius: "4px",
1227
- cursor: "pointer",
1228
- color: "inherit"
1229
- },
1230
- title: t.exportDrawing,
1231
- children: "\u{1F4BE}"
1232
- }
1233
- ),
1234
- /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
1235
- "button",
1236
- {
1237
- onClick: () => handleStartEdit(drawing),
1238
- style: {
1239
- padding: "6px 12px",
1240
- fontSize: "12px",
1241
- backgroundColor: "transparent",
1242
- border: "1px solid var(--default-border-color, #ccc)",
1243
- borderRadius: "4px",
1244
- cursor: "pointer",
1245
- color: "inherit"
1246
- },
1247
- title: t.rename,
1248
- children: "\u270F\uFE0F"
1249
- }
1250
- ),
1251
- /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
1252
- "button",
1253
- {
1254
- onClick: () => setConfirmDeleteId(drawing.id),
1255
- style: {
1256
- padding: "6px 12px",
1257
- fontSize: "12px",
1258
- backgroundColor: "transparent",
1259
- border: "1px solid var(--default-border-color, #ccc)",
1260
- borderRadius: "4px",
1261
- cursor: "pointer",
1262
- color: "inherit"
1263
- },
1264
- title: t.delete,
1265
- disabled: drawings.length <= 1,
1266
- children: "\u{1F5D1}\uFE0F"
1267
- }
1268
- )
1269
- ] }) })
1270
- ]
1271
- },
1272
- drawing.id
1273
- ))
1274
- }
1275
- ),
1214
+ ),
1215
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
1216
+ "button",
1217
+ {
1218
+ onClick: (e) => {
1219
+ e.stopPropagation();
1220
+ handleStartEdit(drawing);
1221
+ },
1222
+ style: {
1223
+ background: "none",
1224
+ border: "none",
1225
+ cursor: "pointer",
1226
+ padding: "0 2px",
1227
+ fontSize: "12px",
1228
+ opacity: 0.5,
1229
+ flexShrink: 0
1230
+ },
1231
+ title: t.rename,
1232
+ children: "\u270F\uFE0F"
1233
+ }
1234
+ )
1235
+ ] }),
1236
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
1237
+ "div",
1238
+ {
1239
+ style: {
1240
+ fontSize: "12px",
1241
+ color: "var(--text-secondary-color, #888)",
1242
+ marginTop: "2px"
1243
+ },
1244
+ children: [
1245
+ t.modified,
1246
+ ": ",
1247
+ formatDate(drawing.updatedAt)
1248
+ ]
1249
+ }
1250
+ )
1251
+ ] }) }),
1252
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: { display: "flex", gap: "4px" }, children: confirmDeleteId === drawing.id ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
1253
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
1254
+ "button",
1255
+ {
1256
+ onClick: (e) => {
1257
+ e.stopPropagation();
1258
+ handleDelete(drawing.id);
1259
+ },
1260
+ style: {
1261
+ padding: "6px 12px",
1262
+ fontSize: "12px",
1263
+ backgroundColor: "#dc3545",
1264
+ color: "#fff",
1265
+ border: "none",
1266
+ borderRadius: "4px",
1267
+ cursor: "pointer"
1268
+ },
1269
+ children: t.delete
1270
+ }
1271
+ ),
1272
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
1273
+ "button",
1274
+ {
1275
+ onClick: (e) => {
1276
+ e.stopPropagation();
1277
+ setConfirmDeleteId(null);
1278
+ },
1279
+ style: {
1280
+ padding: "6px 12px",
1281
+ fontSize: "12px",
1282
+ backgroundColor: "transparent",
1283
+ border: "1px solid var(--default-border-color, #ccc)",
1284
+ borderRadius: "4px",
1285
+ cursor: "pointer",
1286
+ color: "inherit"
1287
+ },
1288
+ children: t.cancel
1289
+ }
1290
+ )
1291
+ ] }) : editingId !== drawing.id && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
1292
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
1293
+ "button",
1294
+ {
1295
+ onClick: (e) => {
1296
+ e.stopPropagation();
1297
+ exportDrawingAsExcalidraw(drawing.id);
1298
+ },
1299
+ style: {
1300
+ padding: "6px 12px",
1301
+ fontSize: "12px",
1302
+ backgroundColor: "transparent",
1303
+ border: "1px solid var(--default-border-color, #ccc)",
1304
+ borderRadius: "4px",
1305
+ cursor: "pointer",
1306
+ color: "inherit"
1307
+ },
1308
+ title: t.exportDrawing,
1309
+ children: "\u{1F4BE}"
1310
+ }
1311
+ ),
1312
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
1313
+ "button",
1314
+ {
1315
+ onClick: (e) => {
1316
+ e.stopPropagation();
1317
+ setConfirmDeleteId(drawing.id);
1318
+ },
1319
+ style: {
1320
+ padding: "6px 12px",
1321
+ fontSize: "12px",
1322
+ backgroundColor: "transparent",
1323
+ border: "1px solid var(--default-border-color, #ccc)",
1324
+ borderRadius: "4px",
1325
+ cursor: "pointer",
1326
+ color: "inherit"
1327
+ },
1328
+ title: t.delete,
1329
+ disabled: drawings.length <= 1,
1330
+ children: "\u{1F5D1}\uFE0F"
1331
+ }
1332
+ )
1333
+ ] }) })
1334
+ ]
1335
+ },
1336
+ drawing.id
1337
+ )) }),
1276
1338
  /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
1277
1339
  "div",
1278
1340
  {
@@ -1283,7 +1345,7 @@ var DrawingsDialog = ({
1283
1345
  justifyContent: "space-between",
1284
1346
  alignItems: "center"
1285
1347
  },
1286
- children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: { display: "flex", gap: "8px" }, children: [
1348
+ children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: { display: "flex", gap: "8px", flexWrap: "wrap" }, children: [
1287
1349
  /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
1288
1350
  "button",
1289
1351
  {