@mickyballadelli/react-things 0.1.2 → 0.2.0

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 (6) hide show
  1. package/README.md +1 -0
  2. package/dist/components/KanbanBoard.d.ts +26 -0
  3. package/dist/index.d.ts +2 -0
  4. package/dist/react-things-ui.cjs +22 -22
  5. package/dist/react-things-ui.js +1587 -1174
  6. package/package.json +1 -1
package/dist/react-things-ui.js CHANGED
@@ -1,43 +1,49 @@
1
- import { jsxs as m, jsx as t, Fragment as Ye } from "react/jsx-runtime";
2
- import { Box as ne, Typography as Ce } from "@mui/material";
3
- import { useRef as oe, useState as W, useLayoutEffect as Fe, useId as je, useMemo as Ie, useEffect as ge, useCallback as Ve } from "react";
4
- import d from "@mui/material/Box";
5
- import { alpha as Y } from "@mui/material/styles";
6
- import ie from "@mui/material/Tooltip";
7
- import E from "@mui/material/Typography";
8
- import Ge from "@mui/material/Collapse";
9
- import qe from "@mui/material/InputBase";
10
- import Ue from "@mui/material/List";
1
+ import { jsxs as f, jsx as e, Fragment as qe } from "react/jsx-runtime";
2
+ import { Box as de, Typography as Re } from "@mui/material";
3
+ import { useRef as pe, useState as S, useLayoutEffect as Ze, useId as et, useMemo as ze, useEffect as ke, useCallback as tt } from "react";
4
+ import u from "@mui/material/Box";
5
+ import { alpha as j } from "@mui/material/styles";
6
+ import ce from "@mui/material/Tooltip";
7
+ import Y from "@mui/material/Typography";
8
+ import rt from "@mui/material/Collapse";
9
+ import nt from "@mui/material/InputBase";
10
+ import ot from "@mui/material/List";
11
11
  import Le from "@mui/material/ListItemButton";
12
- import Ze from "@mui/material/ListItemIcon";
13
- import Pe from "@mui/material/ListItemText";
14
- import _e from "@mui/icons-material/AddBox";
15
- import Qe from "@mui/icons-material/AddLink";
16
- import Je from "@mui/icons-material/Close";
17
- import Ke from "@mui/icons-material/Delete";
18
- import et from "@mui/icons-material/LinkOff";
12
+ import it from "@mui/material/ListItemIcon";
13
+ import We from "@mui/material/ListItemText";
14
+ import at from "@mui/icons-material/AddBox";
15
+ import lt from "@mui/icons-material/AddLink";
16
+ import st from "@mui/icons-material/Close";
17
+ import _e from "@mui/icons-material/Delete";
18
+ import ct from "@mui/icons-material/LinkOff";
19
19
  import ue from "@mui/material/IconButton";
20
- import pe from "@mui/material/MenuItem";
21
- import V from "@mui/material/Stack";
20
+ import be from "@mui/material/MenuItem";
21
+ import H from "@mui/material/Stack";
22
22
  import _ from "@mui/material/TextField";
23
- import tt from "@mui/icons-material/DragIndicator";
24
- import ae from "@mui/material/Button";
25
- import rt from "@mui/material/Checkbox";
23
+ import Ke from "@mui/icons-material/DragIndicator";
24
+ import ie from "@mui/material/Button";
25
+ import dt from "@mui/material/Checkbox";
26
26
  import we from "@mui/material/Chip";
27
- import nt from "@mui/material/Divider";
28
- import ot from "@mui/material/FormControlLabel";
29
- import Me from "@mui/material/Paper";
30
- import Ne from "@mui/material/Slider";
31
- import it from "@mui/material/InputAdornment";
32
- import at from "@mui/icons-material/ContentCopy";
33
- import lt from "@mui/icons-material/PushPin";
34
- import st from "@mui/icons-material/PushPinOutlined";
35
- import ct from "@mui/material/ClickAwayListener";
36
- import dt from "@mui/material/Popper";
37
- import ut from "@mui/material/LinearProgress";
38
- function br({ title: e = "React Things", children: n }) {
39
- return /* @__PURE__ */ m(
40
- ne,
27
+ import ut from "@mui/material/Divider";
28
+ import pt from "@mui/material/FormControlLabel";
29
+ import $e from "@mui/material/Paper";
30
+ import Qe from "@mui/material/Slider";
31
+ import ht from "@mui/material/InputAdornment";
32
+ import ft from "@mui/icons-material/ContentCopy";
33
+ import gt from "@mui/icons-material/PushPin";
34
+ import bt from "@mui/icons-material/PushPinOutlined";
35
+ import mt from "@mui/material/ClickAwayListener";
36
+ import xt from "@mui/material/Popper";
37
+ import yt from "@mui/material/LinearProgress";
38
+ import Be from "@mui/icons-material/Add";
39
+ import Ee from "@mui/icons-material/Edit";
40
+ import wt from "@mui/material/Dialog";
41
+ import vt from "@mui/material/DialogActions";
42
+ import Ct from "@mui/material/DialogContent";
43
+ import kt from "@mui/material/DialogTitle";
44
+ function Xr({ title: t = "React Things", children: n }) {
45
+ return /* @__PURE__ */ f(
46
+ de,
41
47
  {
42
48
  sx: {
43
49
  border: 1,
@@ -47,13 +53,13 @@ function br({ title: e = "React Things", children: n }) {
47
53
  bgcolor: "background.paper"
48
54
  },
49
55
  children: [
50
- /* @__PURE__ */ t(Ce, { variant: "subtitle1", fontWeight: 700, children: e }),
51
- n ? /* @__PURE__ */ t(ne, { sx: { mt: 1 }, children: n }) : null
56
+ /* @__PURE__ */ e(Re, { variant: "subtitle1", fontWeight: 700, children: t }),
57
+ n ? /* @__PURE__ */ e(de, { sx: { mt: 1 }, children: n }) : null
52
58
  ]
53
59
  }
54
60
  );
55
61
  }
56
- const $e = "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace", Te = 12, pt = {
62
+ const Me = "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace", Xe = 12, $t = {
57
63
  c: "#659ad2",
58
64
  cpp: "#00599c",
59
65
  cplusplus: "#00599c",
@@ -91,29 +97,29 @@ const $e = "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace", T
91
97
  css: "#1572b6",
92
98
  dart: "#0175c2"
93
99
  };
94
- function ht(e) {
95
- return e.trim().replace(/^\./, "").toLowerCase().replace(/\s+/g, "");
100
+ function It(t) {
101
+ return t.trim().replace(/^\./, "").toLowerCase().replace(/\s+/g, "");
96
102
  }
97
- function ft(e) {
98
- return pt[ht(e)] ?? "#93c5fd";
103
+ function Dt(t) {
104
+ return $t[It(t)] ?? "#93c5fd";
99
105
  }
100
- function gt(e) {
101
- return e.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
106
+ function zt(t) {
107
+ return t.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
102
108
  }
103
- function bt(e) {
104
- const n = gt(e), l = /^(import|from|export|function|return|const|let|var|type|interface|class|extends|new|if|else|for|while|switch|case|break|continue|async|await|try|catch|finally|throw|fn|pub|use|mod|impl|trait|struct|enum|match|mut|let|where|package|func|defer|go|select|range|map|chan|SELECT|FROM|WHERE|AS|AND|OR|INSERT|UPDATE|DELETE|CREATE|TABLE|ORDER|BY|GROUP|LIMIT|select|from|where|as|and|or|insert|update|delete|create|table|order|by|group|limit)\b/;
105
- return /^['"`]/.test(e) ? `<span style="color:#86efac">${n}</span>` : /^\d/.test(e) ? `<span style="color:#fbbf24">${n}</span>` : /^<\/?[A-Z][\w.]*/.test(e) ? `<span style="color:#67e8f9">${n}</span>` : l.test(e) ? `<span style="color:#c084fc">${n}</span>` : /^[$#][\w-]+$|^\.[\w-]+$/.test(e) ? `<span style="color:#f9a8d4">${n}</span>` : /^[A-Z][\w.]*$/.test(e) ? `<span style="color:#93c5fd">${n}</span>` : /^[a-z][\w-]*(?==|:)/.test(e) ? `<span style="color:#f9a8d4">${n}</span>` : /^[{}()[\].,:;=<>/]+$/.test(e) ? `<span style="color:#94a3b8">${n}</span>` : n;
109
+ function Mt(t) {
110
+ const n = zt(t), a = /^(import|from|export|function|return|const|let|var|type|interface|class|extends|new|if|else|for|while|switch|case|break|continue|async|await|try|catch|finally|throw|fn|pub|use|mod|impl|trait|struct|enum|match|mut|let|where|package|func|defer|go|select|range|map|chan|SELECT|FROM|WHERE|AS|AND|OR|INSERT|UPDATE|DELETE|CREATE|TABLE|ORDER|BY|GROUP|LIMIT|select|from|where|as|and|or|insert|update|delete|create|table|order|by|group|limit)\b/;
111
+ return /^['"`]/.test(t) ? `<span style="color:#86efac">${n}</span>` : /^\d/.test(t) ? `<span style="color:#fbbf24">${n}</span>` : /^<\/?[A-Z][\w.]*/.test(t) ? `<span style="color:#67e8f9">${n}</span>` : a.test(t) ? `<span style="color:#c084fc">${n}</span>` : /^[$#][\w-]+$|^\.[\w-]+$/.test(t) ? `<span style="color:#f9a8d4">${n}</span>` : /^[A-Z][\w.]*$/.test(t) ? `<span style="color:#93c5fd">${n}</span>` : /^[a-z][\w-]*(?==|:)/.test(t) ? `<span style="color:#f9a8d4">${n}</span>` : /^[{}()[\].,:;=<>/]+$/.test(t) ? `<span style="color:#94a3b8">${n}</span>` : n;
106
112
  }
107
- function mt(e) {
108
- return e.split(/(\s+|<\/?[A-Z][\w.]*|['"`][^'"`]*['"`]|\d*\.?\d+|[A-Za-z_$][\w$-]*|[{}()[\].,:;=<>/]+)/g).map((n) => bt(n)).join("");
113
+ function St(t) {
114
+ return t.split(/(\s+|<\/?[A-Z][\w.]*|['"`][^'"`]*['"`]|\d*\.?\d+|[A-Za-z_$][\w$-]*|[{}()[\].,:;=<>/]+)/g).map((n) => Mt(n)).join("");
109
115
  }
110
- function mr({ label: e, language: n, value: l, onChange: s, minHeight: f = 360 }) {
111
- const u = l ?? "", x = Math.max(u.split(`
112
- `).length, 1), p = Array.from({ length: x }, (g, w) => w + 1).join(`
113
- `), i = mt(u), y = ft(n);
114
- return /* @__PURE__ */ m(ne, { children: [
115
- /* @__PURE__ */ m(
116
- ne,
116
+ function Fr({ label: t, language: n, value: a, onChange: s, minHeight: h = 360 }) {
117
+ const c = a ?? "", v = Math.max(c.split(`
118
+ `).length, 1), m = Array.from({ length: v }, (w, $) => $ + 1).join(`
119
+ `), d = St(c), k = Dt(n);
120
+ return /* @__PURE__ */ f(de, { children: [
121
+ /* @__PURE__ */ f(
122
+ de,
117
123
  {
118
124
  sx: {
119
125
  display: "flex",
@@ -127,14 +133,14 @@ function mr({ label: e, language: n, value: l, onChange: s, minHeight: f = 360 }
127
133
  borderTopRightRadius: 4
128
134
  },
129
135
  children: [
130
- /* @__PURE__ */ t(Ce, { variant: "caption", fontWeight: 800, children: e }),
131
- /* @__PURE__ */ t(
132
- Ce,
136
+ /* @__PURE__ */ e(Re, { variant: "caption", fontWeight: 800, children: t }),
137
+ /* @__PURE__ */ e(
138
+ Re,
133
139
  {
134
140
  variant: "caption",
135
141
  sx: {
136
142
  fontFamily: "monospace",
137
- color: y,
143
+ color: k,
138
144
  textTransform: "lowercase"
139
145
  },
140
146
  children: n
@@ -143,21 +149,21 @@ function mr({ label: e, language: n, value: l, onChange: s, minHeight: f = 360 }
143
149
  ]
144
150
  }
145
151
  ),
146
- /* @__PURE__ */ m(
147
- ne,
152
+ /* @__PURE__ */ f(
153
+ de,
148
154
  {
149
155
  sx: {
150
156
  display: "grid",
151
157
  gridTemplateColumns: "48px 1fr",
152
- minHeight: f,
158
+ minHeight: h,
153
159
  bgcolor: "#0f172a",
154
160
  borderBottomLeftRadius: 4,
155
161
  borderBottomRightRadius: 4,
156
162
  overflow: "hidden"
157
163
  },
158
164
  children: [
159
- /* @__PURE__ */ t(
160
- ne,
165
+ /* @__PURE__ */ e(
166
+ de,
161
167
  {
162
168
  component: "pre",
163
169
  "aria-hidden": "true",
@@ -167,40 +173,40 @@ function mr({ label: e, language: n, value: l, onChange: s, minHeight: f = 360 }
167
173
  py: 1.5,
168
174
  color: "#64748b",
169
175
  bgcolor: "#111827",
170
- fontFamily: $e,
176
+ fontFamily: Me,
171
177
  fontSize: 14,
172
178
  lineHeight: 1.6,
173
179
  textAlign: "right",
174
180
  userSelect: "none"
175
181
  },
176
- children: p
182
+ children: m
177
183
  }
178
184
  ),
179
- /* @__PURE__ */ m(
180
- ne,
185
+ /* @__PURE__ */ f(
186
+ de,
181
187
  {
182
188
  sx: {
183
189
  position: "relative",
184
- minHeight: f,
190
+ minHeight: h,
185
191
  bgcolor: "#0f172a",
186
192
  overflow: "auto"
187
193
  },
188
194
  children: [
189
- /* @__PURE__ */ t(
190
- ne,
195
+ /* @__PURE__ */ e(
196
+ de,
191
197
  {
192
198
  component: "pre",
193
199
  "aria-hidden": "true",
194
- dangerouslySetInnerHTML: { __html: i },
200
+ dangerouslySetInnerHTML: { __html: d },
195
201
  sx: {
196
202
  position: "absolute",
197
203
  inset: 0,
198
204
  m: 0,
199
- p: `${Te}px`,
205
+ p: `${Xe}px`,
200
206
  boxSizing: "border-box",
201
207
  pointerEvents: "none",
202
208
  color: "#e5e7eb",
203
- fontFamily: $e,
209
+ fontFamily: Me,
204
210
  fontSize: 14,
205
211
  lineHeight: 1.6,
206
212
  tabSize: 2,
@@ -209,29 +215,29 @@ function mr({ label: e, language: n, value: l, onChange: s, minHeight: f = 360 }
209
215
  }
210
216
  }
211
217
  ),
212
- /* @__PURE__ */ t(
213
- ne,
218
+ /* @__PURE__ */ e(
219
+ de,
214
220
  {
215
221
  component: "textarea",
216
- "aria-label": `${e} code editor`,
222
+ "aria-label": `${t} code editor`,
217
223
  spellCheck: !1,
218
- value: u,
219
- onChange: (g) => s(g.target.value),
224
+ value: c,
225
+ onChange: (w) => s(w.target.value),
220
226
  sx: {
221
227
  position: "relative",
222
228
  width: "100%",
223
229
  minWidth: 0,
224
- minHeight: f,
230
+ minHeight: h,
225
231
  resize: "vertical",
226
232
  border: 0,
227
233
  outline: 0,
228
- p: `${Te}px`,
234
+ p: `${Xe}px`,
229
235
  boxSizing: "border-box",
230
236
  color: "transparent",
231
237
  WebkitTextFillColor: "transparent",
232
238
  bgcolor: "transparent",
233
239
  caretColor: "#60a5fa",
234
- fontFamily: $e,
240
+ fontFamily: Me,
235
241
  fontSize: 14,
236
242
  lineHeight: 1.6,
237
243
  tabSize: 2,
@@ -255,141 +261,141 @@ function mr({ label: e, language: n, value: l, onChange: s, minHeight: f = 360 }
255
261
  )
256
262
  ] });
257
263
  }
258
- function xr({
259
- children: e,
264
+ function Yr({
265
+ children: t,
260
266
  initialPosition: n = { x: 50, y: 50 },
261
- dragSx: l,
267
+ dragSx: a,
262
268
  onPositionChange: s,
263
- onDraggingChange: f,
264
- sx: u,
265
- ...x
269
+ onDraggingChange: h,
270
+ sx: c,
271
+ ...v
266
272
  }) {
267
- const p = oe(null), i = oe(null), [y, g] = W(n), [w, v] = W({ x: 0, y: 0 }), [P, C] = W(!1);
268
- Fe(() => {
269
- const h = p.current, M = i.current;
270
- if (!h || !M)
273
+ const m = pe(null), d = pe(null), [k, w] = S(n), [$, g] = S({ x: 0, y: 0 }), [B, z] = S(!1);
274
+ Ze(() => {
275
+ const b = m.current, A = d.current;
276
+ if (!b || !A)
271
277
  return;
272
- const N = h.getBoundingClientRect(), X = M.getBoundingClientRect(), k = window.getComputedStyle(h), D = y.x / 100 * N.width, $ = y.y / 100 * N.height;
273
- s?.(y, {
274
- containerWidth: N.width,
275
- containerHeight: N.height,
276
- draggableWidth: X.width,
277
- draggableHeight: X.height,
278
- draggableLeft: D - X.width / 2,
279
- draggableTop: $ - X.height / 2,
280
- containerBackgroundImage: k.backgroundImage,
281
- containerBackgroundSize: k.backgroundSize,
282
- containerBackgroundPosition: k.backgroundPosition
278
+ const V = b.getBoundingClientRect(), O = A.getBoundingClientRect(), M = window.getComputedStyle(b), R = k.x / 100 * V.width, I = k.y / 100 * V.height;
279
+ s?.(k, {
280
+ containerWidth: V.width,
281
+ containerHeight: V.height,
282
+ draggableWidth: O.width,
283
+ draggableHeight: O.height,
284
+ draggableLeft: R - O.width / 2,
285
+ draggableTop: I - O.height / 2,
286
+ containerBackgroundImage: M.backgroundImage,
287
+ containerBackgroundSize: M.backgroundSize,
288
+ containerBackgroundPosition: M.backgroundPosition
283
289
  });
284
290
  }, []);
285
- function o(h, M) {
286
- g(h), s?.(h, M);
291
+ function i(b, A) {
292
+ w(b), s?.(b, A);
287
293
  }
288
- function R(h, M, N = w) {
289
- const X = p.current, k = i.current;
290
- if (!X || !k)
294
+ function E(b, A, V = $) {
295
+ const O = m.current, M = d.current;
296
+ if (!O || !M)
291
297
  return;
292
- const D = X.getBoundingClientRect(), $ = k.getBoundingClientRect(), L = window.getComputedStyle(X), j = h - N.x + $.width / 2, O = M - N.y + $.height / 2, c = $.width / D.width * 50, S = $.height / D.height * 50, b = (j - D.left) / D.width * 100, z = (O - D.top) / D.height * 100, B = {
293
- x: Math.min(Math.max(b, c), 100 - c),
294
- y: Math.min(Math.max(z, S), 100 - S)
295
- }, a = B.x / 100 * D.width, T = B.y / 100 * D.height;
296
- o(B, {
297
- containerWidth: D.width,
298
- containerHeight: D.height,
299
- draggableWidth: $.width,
300
- draggableHeight: $.height,
301
- draggableLeft: a - $.width / 2,
302
- draggableTop: T - $.height / 2,
303
- containerBackgroundImage: L.backgroundImage,
304
- containerBackgroundSize: L.backgroundSize,
305
- containerBackgroundPosition: L.backgroundPosition
298
+ const R = O.getBoundingClientRect(), I = M.getBoundingClientRect(), W = window.getComputedStyle(O), U = b - V.x + I.width / 2, G = A - V.y + I.height / 2, p = I.width / R.width * 50, L = I.height / R.height * 50, y = (U - R.left) / R.width * 100, P = (G - R.top) / R.height * 100, N = {
299
+ x: Math.min(Math.max(y, p), 100 - p),
300
+ y: Math.min(Math.max(P, L), 100 - L)
301
+ }, o = N.x / 100 * R.width, X = N.y / 100 * R.height;
302
+ i(N, {
303
+ containerWidth: R.width,
304
+ containerHeight: R.height,
305
+ draggableWidth: I.width,
306
+ draggableHeight: I.height,
307
+ draggableLeft: o - I.width / 2,
308
+ draggableTop: X - I.height / 2,
309
+ containerBackgroundImage: W.backgroundImage,
310
+ containerBackgroundSize: W.backgroundSize,
311
+ containerBackgroundPosition: W.backgroundPosition
306
312
  });
307
313
  }
308
- return /* @__PURE__ */ t(
309
- d,
314
+ return /* @__PURE__ */ e(
315
+ u,
310
316
  {
311
- ...x,
312
- ref: p,
317
+ ...v,
318
+ ref: m,
313
319
  sx: [
314
320
  {
315
321
  position: "relative",
316
322
  overflow: "hidden",
317
323
  touchAction: "none"
318
324
  },
319
- ...Array.isArray(u) ? u : u ? [u] : []
325
+ ...Array.isArray(c) ? c : c ? [c] : []
320
326
  ],
321
- onPointerMove: (h) => {
322
- P && R(h.clientX, h.clientY);
327
+ onPointerMove: (b) => {
328
+ B && E(b.clientX, b.clientY);
323
329
  },
324
- onPointerUp: (h) => {
325
- C(!1), f?.(!1), h.currentTarget.releasePointerCapture(h.pointerId);
330
+ onPointerUp: (b) => {
331
+ z(!1), h?.(!1), b.currentTarget.releasePointerCapture(b.pointerId);
326
332
  },
327
333
  onPointerCancel: () => {
328
- C(!1), f?.(!1);
334
+ z(!1), h?.(!1);
329
335
  },
330
- children: /* @__PURE__ */ t(
331
- d,
336
+ children: /* @__PURE__ */ e(
337
+ u,
332
338
  {
333
- ref: i,
339
+ ref: d,
334
340
  sx: [
335
341
  {
336
342
  position: "absolute",
337
- left: `${y.x}%`,
338
- top: `${y.y}%`,
343
+ left: `${k.x}%`,
344
+ top: `${k.y}%`,
339
345
  transform: "translate(-50%, -50%)",
340
- cursor: P ? "grabbing" : "grab",
346
+ cursor: B ? "grabbing" : "grab",
341
347
  userSelect: "none"
342
348
  },
343
- ...Array.isArray(l) ? l : l ? [l] : []
349
+ ...Array.isArray(a) ? a : a ? [a] : []
344
350
  ],
345
- onPointerDown: (h) => {
346
- const M = h.currentTarget.getBoundingClientRect(), N = {
347
- x: h.clientX - M.left,
348
- y: h.clientY - M.top
351
+ onPointerDown: (b) => {
352
+ const A = b.currentTarget.getBoundingClientRect(), V = {
353
+ x: b.clientX - A.left,
354
+ y: b.clientY - A.top
349
355
  };
350
- C(!0), f?.(!0), v(N), h.currentTarget.setPointerCapture(h.pointerId), R(h.clientX, h.clientY, N);
356
+ z(!0), h?.(!0), g(V), b.currentTarget.setPointerCapture(b.pointerId), E(b.clientX, b.clientY, V);
351
357
  },
352
- children: e
358
+ children: t
353
359
  }
354
360
  )
355
361
  }
356
362
  );
357
363
  }
358
- function We(e) {
359
- return Math.min(Math.max(e, 0), 1);
364
+ function Fe(t) {
365
+ return Math.min(Math.max(t, 0), 1);
360
366
  }
361
- function yr({
362
- transparency: e = 0.36,
367
+ function Nr({
368
+ transparency: t = 0.36,
363
369
  fill: n = 0.72,
364
- liquidColor: l = "#39b8ff",
370
+ liquidColor: a = "#39b8ff",
365
371
  glassColor: s = "#ffffff",
366
- motion: f = 0,
367
- refractionActive: u = !0,
368
- children: x,
369
- sx: p,
370
- ...i
372
+ motion: h = 0,
373
+ refractionActive: c = !0,
374
+ children: v,
375
+ sx: m,
376
+ ...d
371
377
  }) {
372
- const g = `glass-liquid-${je().replace(/:/g, "")}`, w = 1 - We(e), v = We(e), C = `${(1 - Math.min(Math.max(n, 0), 1)) * 100}%`, o = Math.abs(Math.round(f * 8)) + 1, R = 0.012 + Math.abs(Math.sin(f / 17)) * 0.012, h = 18 + w * 18, M = u;
373
- return /* @__PURE__ */ m(
374
- d,
378
+ const w = `glass-liquid-${et().replace(/:/g, "")}`, $ = 1 - Fe(t), g = Fe(t), z = `${(1 - Math.min(Math.max(n, 0), 1)) * 100}%`, i = Math.abs(Math.round(h * 8)) + 1, E = 0.012 + Math.abs(Math.sin(h / 17)) * 0.012, b = 18 + $ * 18, A = c;
379
+ return /* @__PURE__ */ f(
380
+ u,
375
381
  {
376
- ...i,
382
+ ...d,
377
383
  sx: [
378
384
  {
379
385
  position: "relative",
380
386
  overflow: "hidden",
381
387
  border: 1,
382
- borderColor: Y(s, 0.48),
388
+ borderColor: j(s, 0.48),
383
389
  borderRadius: 2,
384
390
  minHeight: 160,
385
391
  p: 3,
386
392
  color: "common.white",
387
- bgcolor: Y(s, 0.08 + v * 0.18),
393
+ bgcolor: j(s, 0.08 + g * 0.18),
388
394
  boxShadow: `
389
- inset 0 1px 0 ${Y(s, 0.68)},
390
- inset 14px 0 34px ${Y(s, 0.12)},
391
- inset -18px 0 32px ${Y(l, w * 0.2)},
392
- 0 18px 48px ${Y("#0b2030", 0.18)}
395
+ inset 0 1px 0 ${j(s, 0.68)},
396
+ inset 14px 0 34px ${j(s, 0.12)},
397
+ inset -18px 0 32px ${j(a, $ * 0.2)},
398
+ 0 18px 48px ${j("#0b2030", 0.18)}
393
399
  `,
394
400
  backdropFilter: "blur(12px) saturate(170%) contrast(108%)",
395
401
  WebkitBackdropFilter: "blur(12px) saturate(170%) contrast(108%)",
@@ -398,15 +404,15 @@ function yr({
398
404
  position: "absolute",
399
405
  left: 0,
400
406
  right: 0,
401
- top: C,
407
+ top: z,
402
408
  bottom: 0,
403
409
  background: `
404
- linear-gradient(160deg, ${Y(s, w * 0.16)} 0%, ${Y(l, w * 0.28)} 42%, ${Y("#063451", w * 0.2)} 100%)
410
+ linear-gradient(160deg, ${j(s, $ * 0.16)} 0%, ${j(a, $ * 0.28)} 42%, ${j("#063451", $ * 0.2)} 100%)
405
411
  `,
406
412
  opacity: 0.95,
407
413
  boxShadow: `
408
- inset 0 18px 28px ${Y(s, 0.12 + w * 0.16)},
409
- inset 0 -34px 44px ${Y("#032536", w * 0.22)}
414
+ inset 0 18px 28px ${j(s, 0.12 + $ * 0.16)},
415
+ inset 0 -34px 44px ${j("#032536", $ * 0.22)}
410
416
  `
411
417
  },
412
418
  "&::after": {
@@ -414,8 +420,8 @@ function yr({
414
420
  position: "absolute",
415
421
  inset: 0,
416
422
  background: `
417
- linear-gradient(105deg, ${Y(s, 0.34)} 0%, ${Y(s, 0.08)} 18%, ${Y(s, 0)} 34%),
418
- radial-gradient(circle at 18% 18%, ${Y(s, 0.38)} 0 3%, ${Y(s, 0)} 18%)
423
+ linear-gradient(105deg, ${j(s, 0.34)} 0%, ${j(s, 0.08)} 18%, ${j(s, 0)} 34%),
424
+ radial-gradient(circle at 18% 18%, ${j(s, 0.38)} 0 3%, ${j(s, 0)} 18%)
419
425
  `,
420
426
  pointerEvents: "none"
421
427
  },
@@ -428,65 +434,65 @@ function yr({
428
434
  backgroundSize: "var(--glassbox-refraction-background-size, cover)",
429
435
  backgroundPosition: "var(--glassbox-refraction-background-position, center)",
430
436
  backgroundRepeat: "no-repeat",
431
- filter: `url(#${g}) saturate(150%) contrast(112%)`,
432
- opacity: M ? 0.72 : 0,
437
+ filter: `url(#${w}) saturate(150%) contrast(112%)`,
438
+ opacity: A ? 0.72 : 0,
433
439
  transition: "opacity 120ms ease-out",
434
- maskImage: `linear-gradient(to bottom, transparent 0, transparent calc(${C} + 10px), black calc(${C} + 28px), black 100%)`,
435
- WebkitMaskImage: `linear-gradient(to bottom, transparent 0, transparent calc(${C} + 10px), black calc(${C} + 28px), black 100%)`
440
+ maskImage: `linear-gradient(to bottom, transparent 0, transparent calc(${z} + 10px), black calc(${z} + 28px), black 100%)`,
441
+ WebkitMaskImage: `linear-gradient(to bottom, transparent 0, transparent calc(${z} + 10px), black calc(${z} + 28px), black 100%)`
436
442
  },
437
443
  "& .GlassBox-refractionOffset": {
438
444
  position: "absolute",
439
445
  inset: 0,
440
446
  zIndex: 2,
441
447
  pointerEvents: "none",
442
- opacity: M ? 0.16 + v * 0.16 : 0,
448
+ opacity: A ? 0.16 + g * 0.16 : 0,
443
449
  backdropFilter: "blur(3px) saturate(190%)",
444
450
  WebkitBackdropFilter: "blur(3px) saturate(190%)",
445
451
  background: `
446
- linear-gradient(180deg, ${Y(s, 0.2)} 0, ${Y(s, 0)} 20%),
447
- linear-gradient(90deg, ${Y(s, 0)} 0 18%, ${Y(s, 0.14)} 26%, ${Y(s, 0)} 34% 58%, ${Y(s, 0.1)} 68%, ${Y(s, 0)} 76% 100%)
452
+ linear-gradient(180deg, ${j(s, 0.2)} 0, ${j(s, 0)} 20%),
453
+ linear-gradient(90deg, ${j(s, 0)} 0 18%, ${j(s, 0.14)} 26%, ${j(s, 0)} 34% 58%, ${j(s, 0.1)} 68%, ${j(s, 0)} 76% 100%)
448
454
  `,
449
455
  transition: "opacity 120ms ease-out",
450
- maskImage: `linear-gradient(to bottom, transparent 0, transparent ${C}, black calc(${C} + 18px), black 100%)`,
451
- WebkitMaskImage: `linear-gradient(to bottom, transparent 0, transparent ${C}, black calc(${C} + 18px), black 100%)`
456
+ maskImage: `linear-gradient(to bottom, transparent 0, transparent ${z}, black calc(${z} + 18px), black 100%)`,
457
+ WebkitMaskImage: `linear-gradient(to bottom, transparent 0, transparent ${z}, black calc(${z} + 18px), black 100%)`
452
458
  },
453
459
  "& .GlassBox-content": {
454
460
  position: "relative",
455
461
  zIndex: 3,
456
- textShadow: `0 1px 10px ${Y("#00121d", 0.36)}`
462
+ textShadow: `0 1px 10px ${j("#00121d", 0.36)}`
457
463
  },
458
464
  "& > *": {
459
465
  position: "relative",
460
466
  zIndex: 3
461
467
  }
462
468
  },
463
- ...Array.isArray(p) ? p : p ? [p] : []
469
+ ...Array.isArray(m) ? m : m ? [m] : []
464
470
  ],
465
471
  children: [
466
- /* @__PURE__ */ t(
467
- d,
472
+ /* @__PURE__ */ e(
473
+ u,
468
474
  {
469
475
  component: "svg",
470
476
  "aria-hidden": "true",
471
477
  focusable: "false",
472
478
  sx: { position: "absolute", width: 0, height: 0, overflow: "hidden" },
473
- children: /* @__PURE__ */ m("filter", { id: g, children: [
474
- /* @__PURE__ */ t(
479
+ children: /* @__PURE__ */ f("filter", { id: w, children: [
480
+ /* @__PURE__ */ e(
475
481
  "feTurbulence",
476
482
  {
477
483
  type: "fractalNoise",
478
- baseFrequency: `${R} ${R * 2.6}`,
484
+ baseFrequency: `${E} ${E * 2.6}`,
479
485
  numOctaves: "2",
480
- seed: o,
486
+ seed: i,
481
487
  result: "liquidNoise"
482
488
  }
483
489
  ),
484
- /* @__PURE__ */ t(
490
+ /* @__PURE__ */ e(
485
491
  "feDisplacementMap",
486
492
  {
487
493
  in: "SourceGraphic",
488
494
  in2: "liquidNoise",
489
- scale: h,
495
+ scale: b,
490
496
  xChannelSelector: "R",
491
497
  yChannelSelector: "G"
492
498
  }
@@ -494,30 +500,30 @@ function yr({
494
500
  ] })
495
501
  }
496
502
  ),
497
- /* @__PURE__ */ t(d, { className: "GlassBox-liquidLens" }),
498
- /* @__PURE__ */ t(d, { className: "GlassBox-refractionOffset" }),
499
- /* @__PURE__ */ t(d, { className: "GlassBox-content", children: x })
503
+ /* @__PURE__ */ e(u, { className: "GlassBox-liquidLens" }),
504
+ /* @__PURE__ */ e(u, { className: "GlassBox-refractionOffset" }),
505
+ /* @__PURE__ */ e(u, { className: "GlassBox-content", children: v })
500
506
  ]
501
507
  }
502
508
  );
503
509
  }
504
- function xt(e, n, l) {
505
- return Math.min(Math.max(e, n), l);
510
+ function At(t, n, a) {
511
+ return Math.min(Math.max(t, n), a);
506
512
  }
507
- function wr({
508
- items: e,
513
+ function Or({
514
+ items: t,
509
515
  iconSize: n = 52,
510
- magnification: l = 1.7,
516
+ magnification: a = 1.7,
511
517
  gap: s = 10,
512
- tooltip: f = !0,
513
- sx: u,
514
- ...x
518
+ tooltip: h = !0,
519
+ sx: c,
520
+ ...v
515
521
  }) {
516
- const [p, i] = W(null);
517
- return /* @__PURE__ */ t(
518
- d,
522
+ const [m, d] = S(null);
523
+ return /* @__PURE__ */ e(
524
+ u,
519
525
  {
520
- ...x,
526
+ ...v,
521
527
  role: "toolbar",
522
528
  sx: [
523
529
  {
@@ -533,18 +539,18 @@ function wr({
533
539
  backdropFilter: "blur(18px) saturate(150%)",
534
540
  WebkitBackdropFilter: "blur(18px) saturate(150%)"
535
541
  },
536
- ...Array.isArray(u) ? u : u ? [u] : []
542
+ ...Array.isArray(c) ? c : c ? [c] : []
537
543
  ],
538
- onMouseLeave: () => i(null),
539
- children: e.map((y, g) => {
540
- const w = p === null ? 4 : Math.abs(g - p), v = xt(1 - w / 3, 0, 1), P = 1 + (l - 1) * v, C = -18 * v, o = /* @__PURE__ */ t(
541
- d,
544
+ onMouseLeave: () => d(null),
545
+ children: t.map((k, w) => {
546
+ const $ = m === null ? 4 : Math.abs(w - m), g = At(1 - $ / 3, 0, 1), B = 1 + (a - 1) * g, z = -18 * g, i = /* @__PURE__ */ e(
547
+ u,
542
548
  {
543
549
  component: "button",
544
550
  type: "button",
545
- "aria-label": y.label,
546
- onClick: y.onClick,
547
- onMouseEnter: () => i(g),
551
+ "aria-label": k.label,
552
+ onClick: k.onClick,
553
+ onMouseEnter: () => d(w),
548
554
  sx: {
549
555
  width: n,
550
556
  height: n,
@@ -558,7 +564,7 @@ function wr({
558
564
  bgcolor: "rgba(255,255,255,0.72)",
559
565
  boxShadow: "inset 0 1px 0 rgba(255,255,255,0.85), 0 8px 18px rgba(15, 23, 42, 0.18)",
560
566
  cursor: "pointer",
561
- transform: `translateY(${C}px) scale(${P})`,
567
+ transform: `translateY(${z}px) scale(${B})`,
562
568
  transformOrigin: "bottom center",
563
569
  transition: "transform 130ms ease-out, background-color 130ms ease-out",
564
570
  "&:focus-visible": {
@@ -569,8 +575,8 @@ function wr({
569
575
  bgcolor: "rgba(255,255,255,0.9)"
570
576
  }
571
577
  },
572
- children: /* @__PURE__ */ t(
573
- E,
578
+ children: /* @__PURE__ */ e(
579
+ Y,
574
580
  {
575
581
  component: "span",
576
582
  "aria-hidden": "true",
@@ -580,72 +586,72 @@ function wr({
580
586
  fontSize: Math.round(n * 0.52),
581
587
  lineHeight: 1
582
588
  },
583
- children: y.icon
589
+ children: k.icon
584
590
  }
585
591
  )
586
592
  },
587
- y.id
593
+ k.id
588
594
  );
589
- return f ? /* @__PURE__ */ t(ie, { title: y.label, placement: "top", arrow: !0, children: o }, y.id) : o;
595
+ return h ? /* @__PURE__ */ e(ce, { title: k.label, placement: "top", arrow: !0, children: i }, k.id) : i;
590
596
  })
591
597
  }
592
598
  );
593
599
  }
594
- function Oe(e) {
595
- return e.toLowerCase().trim();
600
+ function Je(t) {
601
+ return t.toLowerCase().trim();
596
602
  }
597
- function yt(e) {
598
- return Oe([
599
- e.label,
600
- e.description,
601
- e.group,
602
- e.parentId,
603
- ...e.keywords ?? []
603
+ function Rt(t) {
604
+ return Je([
605
+ t.label,
606
+ t.description,
607
+ t.group,
608
+ t.parentId,
609
+ ...t.keywords ?? []
604
610
  ].filter(Boolean).join(" "));
605
611
  }
606
- function De(e) {
607
- return Array.from(new Set(e.map((n) => n.group).filter(Boolean)));
612
+ function Ye(t) {
613
+ return Array.from(new Set(t.map((n) => n.group).filter(Boolean)));
608
614
  }
609
- function vr({
610
- items: e,
615
+ function Hr({
616
+ items: t,
611
617
  variant: n = "list",
612
- selectedId: l,
618
+ selectedId: a,
613
619
  placeholder: s = "Search",
614
- emptyText: f = "No items found",
615
- maxResults: u,
616
- showSearch: x = !0,
617
- dense: p = !1,
618
- expandedGroups: i,
619
- defaultExpandedGroups: y,
620
- onExpandedGroupsChange: g,
621
- onSelect: w,
622
- sx: v,
623
- ...P
620
+ emptyText: h = "No items found",
621
+ maxResults: c,
622
+ showSearch: v = !0,
623
+ dense: m = !1,
624
+ expandedGroups: d,
625
+ defaultExpandedGroups: k,
626
+ onExpandedGroupsChange: w,
627
+ onSelect: $,
628
+ sx: g,
629
+ ...B
624
630
  }) {
625
- const C = y ?? De(e), [o, R] = W(""), [h, M] = W(0), [N, X] = W(C), k = Oe(o), D = i ?? N, $ = Ie(() => {
626
- const a = k ? e.filter((T) => yt(T).includes(k)) : e;
627
- return typeof u == "number" ? a.slice(0, u) : a;
628
- }, [e, u, k]), L = De($), j = $;
629
- function O(a) {
630
- a.onSelect?.(), w?.(a), R(""), M(0);
631
+ const z = k ?? Ye(t), [i, E] = S(""), [b, A] = S(0), [V, O] = S(z), M = Je(i), R = d ?? V, I = ze(() => {
632
+ const o = M ? t.filter((X) => Rt(X).includes(M)) : t;
633
+ return typeof c == "number" ? o.slice(0, c) : o;
634
+ }, [t, c, M]), W = Ye(I), U = I;
635
+ function G(o) {
636
+ o.onSelect?.(), $?.(o), E(""), A(0);
631
637
  }
632
- function c(a) {
633
- i === void 0 && X(a), g?.(a);
638
+ function p(o) {
639
+ d === void 0 && O(o), w?.(o);
634
640
  }
635
- function S(a) {
636
- c(D.includes(a) ? D.filter((T) => T !== a) : [...D, a]);
641
+ function L(o) {
642
+ p(R.includes(o) ? R.filter((X) => X !== o) : [...R, o]);
637
643
  }
638
- function b(a, T = 0) {
639
- const Q = a.id === l;
640
- return /* @__PURE__ */ m(
644
+ function y(o, X = 0) {
645
+ const ee = o.id === a;
646
+ return /* @__PURE__ */ f(
641
647
  Le,
642
648
  {
643
- selected: Q,
644
- dense: p,
645
- onClick: () => O(a),
649
+ selected: ee,
650
+ dense: m,
651
+ onClick: () => G(o),
646
652
  sx: {
647
653
  borderRadius: 1,
648
- pl: 1.25 + T * 2,
654
+ pl: 1.25 + X * 2,
649
655
  "&.Mui-selected": {
650
656
  bgcolor: "action.selected",
651
657
  color: "primary.main"
@@ -655,57 +661,57 @@ function vr({
655
661
  }
656
662
  },
657
663
  children: [
658
- a.icon ? /* @__PURE__ */ t(Ze, { sx: { minWidth: 34, color: "inherit" }, children: a.icon }) : null,
659
- /* @__PURE__ */ t(
660
- Pe,
664
+ o.icon ? /* @__PURE__ */ e(it, { sx: { minWidth: 34, color: "inherit" }, children: o.icon }) : null,
665
+ /* @__PURE__ */ e(
666
+ We,
661
667
  {
662
- primary: a.label,
663
- secondary: a.description,
664
- primaryTypographyProps: { fontWeight: Q ? 850 : 700 },
668
+ primary: o.label,
669
+ secondary: o.description,
670
+ primaryTypographyProps: { fontWeight: ee ? 850 : 700 },
665
671
  secondaryTypographyProps: { color: "text.secondary" }
666
672
  }
667
673
  )
668
674
  ]
669
675
  },
670
- a.id
676
+ o.id
671
677
  );
672
678
  }
673
- function z() {
674
- return $.length ? L.length ? L.map((a) => /* @__PURE__ */ m(d, { children: [
675
- /* @__PURE__ */ t(E, { variant: "caption", fontWeight: 900, color: "text.secondary", sx: { display: "block", px: 1.25, pt: 1.5, pb: 0.5 }, children: a }),
676
- $.filter((T) => T.group === a).map((T) => b(T))
677
- ] }, a)) : $.map((a) => b(a)) : /* @__PURE__ */ t(d, { sx: { px: 2, py: 4, textAlign: "center", color: "text.secondary" }, children: f });
679
+ function P() {
680
+ return I.length ? W.length ? W.map((o) => /* @__PURE__ */ f(u, { children: [
681
+ /* @__PURE__ */ e(Y, { variant: "caption", fontWeight: 900, color: "text.secondary", sx: { display: "block", px: 1.25, pt: 1.5, pb: 0.5 }, children: o }),
682
+ I.filter((X) => X.group === o).map((X) => y(X))
683
+ ] }, o)) : I.map((o) => y(o)) : /* @__PURE__ */ e(u, { sx: { px: 2, py: 4, textAlign: "center", color: "text.secondary" }, children: h });
678
684
  }
679
- function B() {
680
- return $.length ? L.length ? L.map((a) => {
681
- const T = k || D.includes(a);
682
- return /* @__PURE__ */ m(d, { children: [
683
- /* @__PURE__ */ m(
685
+ function N() {
686
+ return I.length ? W.length ? W.map((o) => {
687
+ const X = M || R.includes(o);
688
+ return /* @__PURE__ */ f(u, { children: [
689
+ /* @__PURE__ */ f(
684
690
  Le,
685
691
  {
686
- dense: p,
687
- onClick: () => S(a),
692
+ dense: m,
693
+ onClick: () => L(o),
688
694
  sx: { borderRadius: 1, px: 1.25 },
689
695
  children: [
690
- /* @__PURE__ */ t(E, { component: "span", "aria-hidden": "true", sx: { mr: 1, width: 16, color: "text.secondary" }, children: T ? "▾" : "▸" }),
691
- /* @__PURE__ */ t(
692
- Pe,
696
+ /* @__PURE__ */ e(Y, { component: "span", "aria-hidden": "true", sx: { mr: 1, width: 16, color: "text.secondary" }, children: X ? "▾" : "▸" }),
697
+ /* @__PURE__ */ e(
698
+ We,
693
699
  {
694
- primary: a,
700
+ primary: o,
695
701
  primaryTypographyProps: { fontWeight: 900 }
696
702
  }
697
703
  )
698
704
  ]
699
705
  }
700
706
  ),
701
- /* @__PURE__ */ t(Ge, { in: !!T, timeout: "auto", unmountOnExit: !0, children: $.filter((Q) => Q.group === a).map((Q) => b(Q, 1)) })
702
- ] }, a);
703
- }) : $.map((a) => b(a)) : /* @__PURE__ */ t(d, { sx: { px: 2, py: 4, textAlign: "center", color: "text.secondary" }, children: f });
707
+ /* @__PURE__ */ e(rt, { in: !!X, timeout: "auto", unmountOnExit: !0, children: I.filter((ee) => ee.group === o).map((ee) => y(ee, 1)) })
708
+ ] }, o);
709
+ }) : I.map((o) => y(o)) : /* @__PURE__ */ e(u, { sx: { px: 2, py: 4, textAlign: "center", color: "text.secondary" }, children: h });
704
710
  }
705
- return /* @__PURE__ */ m(
706
- d,
711
+ return /* @__PURE__ */ f(
712
+ u,
707
713
  {
708
- ...P,
714
+ ...B,
709
715
  sx: [
710
716
  {
711
717
  display: "flex",
@@ -713,11 +719,11 @@ function vr({
713
719
  gap: 1,
714
720
  minWidth: 0
715
721
  },
716
- ...Array.isArray(v) ? v : v ? [v] : []
722
+ ...Array.isArray(g) ? g : g ? [g] : []
717
723
  ],
718
724
  children: [
719
- x ? /* @__PURE__ */ t(
720
- d,
725
+ v ? /* @__PURE__ */ e(
726
+ u,
721
727
  {
722
728
  sx: {
723
729
  px: 1.25,
@@ -727,143 +733,143 @@ function vr({
727
733
  borderRadius: 1,
728
734
  bgcolor: "background.paper"
729
735
  },
730
- children: /* @__PURE__ */ t(
731
- qe,
736
+ children: /* @__PURE__ */ e(
737
+ nt,
732
738
  {
733
739
  fullWidth: !0,
734
- value: o,
740
+ value: i,
735
741
  placeholder: s,
736
- onChange: (a) => {
737
- R(a.target.value), M(0);
742
+ onChange: (o) => {
743
+ E(o.target.value), A(0);
738
744
  },
739
- onKeyDown: (a) => {
740
- a.key === "ArrowDown" && (a.preventDefault(), M((T) => Math.min(T + 1, j.length - 1))), a.key === "ArrowUp" && (a.preventDefault(), M((T) => Math.max(T - 1, 0))), a.key === "Enter" && j[h] && (a.preventDefault(), O(j[h]));
745
+ onKeyDown: (o) => {
746
+ o.key === "ArrowDown" && (o.preventDefault(), A((X) => Math.min(X + 1, U.length - 1))), o.key === "ArrowUp" && (o.preventDefault(), A((X) => Math.max(X - 1, 0))), o.key === "Enter" && U[b] && (o.preventDefault(), G(U[b]));
741
747
  },
742
748
  sx: { fontSize: 14 }
743
749
  }
744
750
  )
745
751
  }
746
752
  ) : null,
747
- /* @__PURE__ */ t(Ue, { disablePadding: !0, dense: p, sx: { overflow: "auto" }, children: n === "tree" ? B() : z() })
753
+ /* @__PURE__ */ e(ot, { disablePadding: !0, dense: m, sx: { overflow: "auto" }, children: n === "tree" ? N() : P() })
748
754
  ]
749
755
  }
750
756
  );
751
757
  }
752
- function Be(e, n, l) {
753
- return Math.min(Math.max(e, n), l);
758
+ function Ne(t, n, a) {
759
+ return Math.min(Math.max(t, n), a);
754
760
  }
755
- function wt(e) {
756
- if (!e || typeof window > "u")
761
+ function Pt(t) {
762
+ if (!t || typeof window > "u")
757
763
  return null;
758
- const n = window.localStorage.getItem(e), l = n === null ? Number.NaN : Number(n);
759
- return Number.isFinite(l) ? l : null;
764
+ const n = window.localStorage.getItem(t), a = n === null ? Number.NaN : Number(n);
765
+ return Number.isFinite(a) ? a : null;
760
766
  }
761
- function $r({
762
- first: e,
767
+ function jr({
768
+ first: t,
763
769
  second: n,
764
- orientation: l = "horizontal",
770
+ orientation: a = "horizontal",
765
771
  initialSize: s = 50,
766
- size: f,
767
- defaultSize: u,
768
- minSize: x = 20,
769
- maxSize: p = 80,
770
- dividerSize: i = 8,
771
- snapPoints: y = [],
772
- snapThreshold: g = 4,
773
- resetSize: w = u ?? s,
774
- collapsed: v,
775
- defaultCollapsed: P = null,
776
- collapsedSize: C = 0,
777
- persistKey: o,
778
- keyboardStep: R = 5,
779
- onSizeChange: h,
780
- onCollapsedChange: M,
781
- onDraggingChange: N,
782
- dividerLabel: X = "Resize panels",
783
- sx: k,
784
- ...D
772
+ size: h,
773
+ defaultSize: c,
774
+ minSize: v = 20,
775
+ maxSize: m = 80,
776
+ dividerSize: d = 8,
777
+ snapPoints: k = [],
778
+ snapThreshold: w = 4,
779
+ resetSize: $ = c ?? s,
780
+ collapsed: g,
781
+ defaultCollapsed: B = null,
782
+ collapsedSize: z = 0,
783
+ persistKey: i,
784
+ keyboardStep: E = 5,
785
+ onSizeChange: b,
786
+ onCollapsedChange: A,
787
+ onDraggingChange: V,
788
+ dividerLabel: O = "Resize panels",
789
+ sx: M,
790
+ ...R
785
791
  }) {
786
- const $ = oe(null), [L, j] = W(() => wt(o) ?? u ?? s), [O, c] = W(P), [S, b] = W(!1), z = l === "horizontal", a = Be(f ?? L, x, p), T = v ?? O, Q = T === "first" ? C : T === "second" ? 100 - C : a, le = T === "first" && C <= 0, se = T === "second" && C <= 0;
787
- ge(() => {
788
- o && window.localStorage.setItem(o, String(a));
789
- }, [o, a]), ge(() => {
790
- N?.(S);
791
- }, [S, N]);
792
- function q(I) {
793
- const te = y.reduce((ce, me) => {
794
- const xe = Math.abs(ce - I);
795
- return Math.abs(me - I) < xe ? me : ce;
796
- }, I), re = Math.abs(te - I) <= g, J = Be(re ? te : I, x, p);
797
- f === void 0 && j(J), h?.(J), be(null);
792
+ const I = pe(null), [W, U] = S(() => Pt(i) ?? c ?? s), [G, p] = S(B), [L, y] = S(!1), P = a === "horizontal", o = Ne(h ?? W, v, m), X = g ?? G, ee = X === "first" ? z : X === "second" ? 100 - z : o, he = X === "first" && z <= 0, te = X === "second" && z <= 0;
793
+ ke(() => {
794
+ i && window.localStorage.setItem(i, String(o));
795
+ }, [i, o]), ke(() => {
796
+ V?.(L);
797
+ }, [L, V]);
798
+ function q(T) {
799
+ const le = k.reduce((oe, me) => {
800
+ const xe = Math.abs(oe - T);
801
+ return Math.abs(me - T) < xe ? me : oe;
802
+ }, T), ne = Math.abs(le - T) <= w, Q = Ne(ne ? le : T, v, m);
803
+ h === void 0 && U(Q), b?.(Q), se(null);
798
804
  }
799
- function ee(I, te) {
800
- const re = $.current;
801
- if (!re)
805
+ function ae(T, le) {
806
+ const ne = I.current;
807
+ if (!ne)
802
808
  return;
803
- const J = re.getBoundingClientRect(), ce = z ? (I - J.left) / J.width * 100 : (te - J.top) / J.height * 100;
804
- q(ce);
809
+ const Q = ne.getBoundingClientRect(), oe = P ? (T - Q.left) / Q.width * 100 : (le - Q.top) / Q.height * 100;
810
+ q(oe);
805
811
  }
806
- function U(I) {
807
- q(a + I);
812
+ function K(T) {
813
+ q(o + T);
808
814
  }
809
- function K() {
810
- q(w);
815
+ function re() {
816
+ q($);
811
817
  }
812
- function he(I) {
813
- be(T === I ? null : I);
818
+ function fe(T) {
819
+ se(X === T ? null : T);
814
820
  }
815
- function be(I) {
816
- v === void 0 && c(I), M?.(I);
821
+ function se(T) {
822
+ g === void 0 && p(T), A?.(T);
817
823
  }
818
- return /* @__PURE__ */ m(
819
- d,
824
+ return /* @__PURE__ */ f(
825
+ u,
820
826
  {
821
- ...D,
822
- ref: $,
827
+ ...R,
828
+ ref: I,
823
829
  sx: [
824
830
  {
825
831
  display: "grid",
826
- gridTemplateColumns: z ? `${Q}% ${i}px 1fr` : "1fr",
827
- gridTemplateRows: z ? "1fr" : `${Q}% ${i}px 1fr`,
832
+ gridTemplateColumns: P ? `${ee}% ${d}px 1fr` : "1fr",
833
+ gridTemplateRows: P ? "1fr" : `${ee}% ${d}px 1fr`,
828
834
  minHeight: 280,
829
835
  overflow: "hidden",
830
- userSelect: S ? "none" : void 0
836
+ userSelect: L ? "none" : void 0
831
837
  },
832
- ...Array.isArray(k) ? k : k ? [k] : []
838
+ ...Array.isArray(M) ? M : M ? [M] : []
833
839
  ],
834
- onPointerMove: (I) => {
835
- S && ee(I.clientX, I.clientY);
840
+ onPointerMove: (T) => {
841
+ L && ae(T.clientX, T.clientY);
836
842
  },
837
843
  onPointerUp: () => {
838
- b(!1);
844
+ y(!1);
839
845
  },
840
- onPointerCancel: () => b(!1),
846
+ onPointerCancel: () => y(!1),
841
847
  children: [
842
- /* @__PURE__ */ t(d, { sx: { minWidth: 0, minHeight: 0, overflow: "auto", display: le ? "none" : void 0 }, children: e }),
843
- /* @__PURE__ */ t(
844
- d,
848
+ /* @__PURE__ */ e(u, { sx: { minWidth: 0, minHeight: 0, overflow: "auto", display: he ? "none" : void 0 }, children: t }),
849
+ /* @__PURE__ */ e(
850
+ u,
845
851
  {
846
852
  role: "separator",
847
- "aria-label": X,
848
- "aria-orientation": z ? "vertical" : "horizontal",
849
- "aria-valuemin": x,
850
- "aria-valuemax": p,
851
- "aria-valuenow": Math.round(a),
853
+ "aria-label": O,
854
+ "aria-orientation": P ? "vertical" : "horizontal",
855
+ "aria-valuemin": v,
856
+ "aria-valuemax": m,
857
+ "aria-valuenow": Math.round(o),
852
858
  tabIndex: 0,
853
- onPointerDown: (I) => {
854
- b(!0), I.currentTarget.setPointerCapture(I.pointerId), ee(I.clientX, I.clientY);
859
+ onPointerDown: (T) => {
860
+ y(!0), T.currentTarget.setPointerCapture(T.pointerId), ae(T.clientX, T.clientY);
855
861
  },
856
- onPointerUp: (I) => {
857
- b(!1), I.currentTarget.releasePointerCapture(I.pointerId);
862
+ onPointerUp: (T) => {
863
+ y(!1), T.currentTarget.releasePointerCapture(T.pointerId);
858
864
  },
859
- onDoubleClick: K,
860
- onKeyDown: (I) => {
861
- I.key === "Enter" && (K(), I.preventDefault()), I.key === "Home" && (he("first"), I.preventDefault()), I.key === "End" && (he("second"), I.preventDefault()), (I.key === "ArrowLeft" || I.key === "ArrowUp") && (U(-R), I.preventDefault()), (I.key === "ArrowRight" || I.key === "ArrowDown") && (U(R), I.preventDefault());
865
+ onDoubleClick: re,
866
+ onKeyDown: (T) => {
867
+ T.key === "Enter" && (re(), T.preventDefault()), T.key === "Home" && (fe("first"), T.preventDefault()), T.key === "End" && (fe("second"), T.preventDefault()), (T.key === "ArrowLeft" || T.key === "ArrowUp") && (K(-E), T.preventDefault()), (T.key === "ArrowRight" || T.key === "ArrowDown") && (K(E), T.preventDefault());
862
868
  },
863
869
  sx: {
864
870
  position: "relative",
865
- bgcolor: S ? "primary.main" : "divider",
866
- cursor: z ? "col-resize" : "row-resize",
871
+ bgcolor: L ? "primary.main" : "divider",
872
+ cursor: P ? "col-resize" : "row-resize",
867
873
  touchAction: "none",
868
874
  transition: "background-color 120ms ease",
869
875
  "&:hover": {
@@ -877,63 +883,63 @@ function $r({
877
883
  "&::after": {
878
884
  content: '""',
879
885
  position: "absolute",
880
- inset: z ? "30% -4px" : "-4px 30%",
886
+ inset: P ? "30% -4px" : "-4px 30%",
881
887
  borderRadius: 999,
882
- bgcolor: S ? "primary.contrastText" : "text.disabled",
888
+ bgcolor: L ? "primary.contrastText" : "text.disabled",
883
889
  opacity: 0.55
884
890
  }
885
891
  }
886
892
  }
887
893
  ),
888
- /* @__PURE__ */ t(d, { sx: { minWidth: 0, minHeight: 0, overflow: "auto", display: se ? "none" : void 0 }, children: n })
894
+ /* @__PURE__ */ e(u, { sx: { minWidth: 0, minHeight: 0, overflow: "auto", display: te ? "none" : void 0 }, children: n })
889
895
  ]
890
896
  }
891
897
  );
892
898
  }
893
- function vt(e, n) {
894
- return n ?? e?.getBoundingClientRect() ?? null;
899
+ function Tt(t, n) {
900
+ return n ?? t?.getBoundingClientRect() ?? null;
895
901
  }
896
- function kr({
897
- open: e,
902
+ function Vr({
903
+ open: t,
898
904
  children: n,
899
- anchorEl: l,
905
+ anchorEl: a,
900
906
  anchorRect: s,
901
- containerRef: f,
902
- placement: u = "top",
903
- offset: x = 8,
904
- boundaryPadding: p = 8,
905
- autoUpdate: i = !0,
906
- arrow: y = !0,
907
- sx: g,
908
- ...w
907
+ containerRef: h,
908
+ placement: c = "top",
909
+ offset: v = 8,
910
+ boundaryPadding: m = 8,
911
+ autoUpdate: d = !0,
912
+ arrow: k = !0,
913
+ sx: w,
914
+ ...$
909
915
  }) {
910
- const v = oe(null), [P, C] = W({ left: -9999, top: -9999 }), o = Ve(() => {
911
- if (!e)
916
+ const g = pe(null), [B, z] = S({ left: -9999, top: -9999 }), i = tt(() => {
917
+ if (!t)
912
918
  return;
913
- const R = vt(l, s), h = v.current;
914
- if (!R || !h)
919
+ const E = Tt(a, s), b = g.current;
920
+ if (!E || !b)
915
921
  return;
916
- const M = f?.current?.getBoundingClientRect(), N = M?.left ?? 0, X = M?.top ?? 0, k = M?.width ?? window.innerWidth, D = M?.height ?? window.innerHeight, $ = h.offsetWidth / 2, L = h.offsetHeight, j = R.left - N + R.width / 2, O = u === "top" ? R.top - X - x : R.bottom - X + x, c = Math.min(Math.max(j, $ + p), k - $ - p), S = u === "top" ? Math.max(O, L + p) : Math.min(O, D - L - p);
917
- C({ left: c, top: S });
918
- }, [l, s, p, f, x, e, u]);
919
- return Fe(() => {
920
- o();
921
- }, [o]), ge(() => {
922
- if (!(!e || !i))
923
- return window.addEventListener("resize", o), window.addEventListener("scroll", o, !0), () => {
924
- window.removeEventListener("resize", o), window.removeEventListener("scroll", o, !0);
922
+ const A = h?.current?.getBoundingClientRect(), V = A?.left ?? 0, O = A?.top ?? 0, M = A?.width ?? window.innerWidth, R = A?.height ?? window.innerHeight, I = b.offsetWidth / 2, W = b.offsetHeight, U = E.left - V + E.width / 2, G = c === "top" ? E.top - O - v : E.bottom - O + v, p = Math.min(Math.max(U, I + m), M - I - m), L = c === "top" ? Math.max(G, W + m) : Math.min(G, R - W - m);
923
+ z({ left: p, top: L });
924
+ }, [a, s, m, h, v, t, c]);
925
+ return Ze(() => {
926
+ i();
927
+ }, [i]), ke(() => {
928
+ if (!(!t || !d))
929
+ return window.addEventListener("resize", i), window.addEventListener("scroll", i, !0), () => {
930
+ window.removeEventListener("resize", i), window.removeEventListener("scroll", i, !0);
925
931
  };
926
- }, [i, e, o]), e ? /* @__PURE__ */ t(
927
- d,
932
+ }, [d, t, i]), t ? /* @__PURE__ */ e(
933
+ u,
928
934
  {
929
- ...w,
930
- ref: v,
935
+ ...$,
936
+ ref: g,
931
937
  role: "toolbar",
932
938
  sx: [
933
939
  {
934
- position: f ? "absolute" : "fixed",
935
- left: P.left,
936
- top: P.top,
940
+ position: h ? "absolute" : "fixed",
941
+ left: B.left,
942
+ top: B.top,
937
943
  zIndex: 1300,
938
944
  display: "inline-flex",
939
945
  alignItems: "center",
@@ -943,9 +949,9 @@ function kr({
943
949
  bgcolor: "rgba(15,23,42,0.96)",
944
950
  color: "#e5e7eb",
945
951
  boxShadow: "0 16px 40px rgba(15, 23, 42, 0.34)",
946
- transform: u === "top" ? "translate(-50%, -100%)" : "translate(-50%, 0)",
952
+ transform: c === "top" ? "translate(-50%, -100%)" : "translate(-50%, 0)",
947
953
  backdropFilter: "blur(12px)",
948
- "&::after": y ? {
954
+ "&::after": k ? {
949
955
  content: '""',
950
956
  position: "absolute",
951
957
  left: "50%",
@@ -953,27 +959,27 @@ function kr({
953
959
  height: 10,
954
960
  bgcolor: "rgba(15,23,42,0.96)",
955
961
  transform: "translateX(-50%) rotate(45deg)",
956
- bottom: u === "top" ? -5 : void 0,
957
- top: u === "bottom" ? -5 : void 0
962
+ bottom: c === "top" ? -5 : void 0,
963
+ top: c === "bottom" ? -5 : void 0
958
964
  } : void 0
959
965
  },
960
- ...Array.isArray(g) ? g : g ? [g] : []
966
+ ...Array.isArray(w) ? w : w ? [w] : []
961
967
  ],
962
968
  children: n
963
969
  }
964
970
  ) : null;
965
971
  }
966
- function Cr({
967
- strength: e = 18,
972
+ function Gr({
973
+ strength: t = 18,
968
974
  tilt: n = 10,
969
- lift: l = 10,
975
+ lift: a = 10,
970
976
  glare: s = !0,
971
- perspective: f = 900,
972
- sx: u,
973
- children: x,
974
- ...p
977
+ perspective: h = 900,
978
+ sx: c,
979
+ children: v,
980
+ ...m
975
981
  }) {
976
- const [i, y] = W({
982
+ const [d, k] = S({
977
983
  x: 0,
978
984
  y: 0,
979
985
  rotateX: 0,
@@ -982,23 +988,23 @@ function Cr({
982
988
  glareY: 50,
983
989
  active: !1
984
990
  });
985
- return /* @__PURE__ */ t(
986
- d,
991
+ return /* @__PURE__ */ e(
992
+ u,
987
993
  {
988
- ...p,
989
- onMouseMove: (g) => {
990
- const w = g.currentTarget.getBoundingClientRect(), v = (g.clientX - w.left) / w.width, P = (g.clientY - w.top) / w.height, C = (v - 0.5) * e, o = (P - 0.5) * e;
991
- y({
992
- x: C,
993
- y: o,
994
- rotateX: (0.5 - P) * n,
995
- rotateY: (v - 0.5) * n,
996
- glareX: v * 100,
997
- glareY: P * 100,
994
+ ...m,
995
+ onMouseMove: (w) => {
996
+ const $ = w.currentTarget.getBoundingClientRect(), g = (w.clientX - $.left) / $.width, B = (w.clientY - $.top) / $.height, z = (g - 0.5) * t, i = (B - 0.5) * t;
997
+ k({
998
+ x: z,
999
+ y: i,
1000
+ rotateX: (0.5 - B) * n,
1001
+ rotateY: (g - 0.5) * n,
1002
+ glareX: g * 100,
1003
+ glareY: B * 100,
998
1004
  active: !0
999
1005
  });
1000
1006
  },
1001
- onMouseLeave: () => y({
1007
+ onMouseLeave: () => k({
1002
1008
  x: 0,
1003
1009
  y: 0,
1004
1010
  rotateX: 0,
@@ -1012,49 +1018,49 @@ function Cr({
1012
1018
  position: "relative",
1013
1019
  overflow: "hidden",
1014
1020
  transform: `
1015
- perspective(${f}px)
1016
- translate3d(${i.x}px, ${i.y}px, ${i.active ? -l : 0}px)
1017
- rotateX(${i.rotateX}deg)
1018
- rotateY(${i.rotateY}deg)
1021
+ perspective(${h}px)
1022
+ translate3d(${d.x}px, ${d.y}px, ${d.active ? -a : 0}px)
1023
+ rotateX(${d.rotateX}deg)
1024
+ rotateY(${d.rotateY}deg)
1019
1025
  `,
1020
1026
  transformStyle: "preserve-3d",
1021
- transition: i.active ? "transform 80ms ease-out, box-shadow 120ms ease-out" : "transform 260ms cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 260ms ease",
1027
+ transition: d.active ? "transform 80ms ease-out, box-shadow 120ms ease-out" : "transform 260ms cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 260ms ease",
1022
1028
  willChange: "transform",
1023
- boxShadow: i.active ? "0 28px 70px rgba(15, 23, 42, 0.24)" : "0 14px 34px rgba(15, 23, 42, 0.12)",
1029
+ boxShadow: d.active ? "0 28px 70px rgba(15, 23, 42, 0.24)" : "0 14px 34px rgba(15, 23, 42, 0.12)",
1024
1030
  "&::before": s ? {
1025
1031
  content: '""',
1026
1032
  position: "absolute",
1027
1033
  inset: 0,
1028
1034
  pointerEvents: "none",
1029
- opacity: i.active ? 0.78 : 0,
1035
+ opacity: d.active ? 0.78 : 0,
1030
1036
  transition: "opacity 160ms ease",
1031
- background: `radial-gradient(circle at ${i.glareX}% ${i.glareY}%, rgba(255,255,255,0.55), rgba(255,255,255,0.16) 22%, transparent 48%)`,
1037
+ background: `radial-gradient(circle at ${d.glareX}% ${d.glareY}%, rgba(255,255,255,0.55), rgba(255,255,255,0.16) 22%, transparent 48%)`,
1032
1038
  mixBlendMode: "screen"
1033
1039
  } : void 0,
1034
1040
  "& > *": {
1035
1041
  position: "relative",
1036
1042
  zIndex: 1,
1037
- transform: i.active ? "translateZ(24px)" : "translateZ(0)",
1043
+ transform: d.active ? "translateZ(24px)" : "translateZ(0)",
1038
1044
  transition: "transform 180ms ease"
1039
1045
  }
1040
1046
  },
1041
- ...Array.isArray(u) ? u : u ? [u] : []
1047
+ ...Array.isArray(c) ? c : c ? [c] : []
1042
1048
  ],
1043
- children: x
1049
+ children: v
1044
1050
  }
1045
1051
  );
1046
1052
  }
1047
- function Ir({ radius: e = 160, dim: n = 0.72, sx: l, children: s, ...f }) {
1048
- const [u, x] = W({ x: 50, y: 50 });
1049
- return /* @__PURE__ */ t(
1050
- d,
1053
+ function Ur({ radius: t = 160, dim: n = 0.72, sx: a, children: s, ...h }) {
1054
+ const [c, v] = S({ x: 50, y: 50 });
1055
+ return /* @__PURE__ */ e(
1056
+ u,
1051
1057
  {
1052
- ...f,
1053
- onMouseMove: (p) => {
1054
- const i = p.currentTarget.getBoundingClientRect();
1055
- x({
1056
- x: (p.clientX - i.left) / i.width * 100,
1057
- y: (p.clientY - i.top) / i.height * 100
1058
+ ...h,
1059
+ onMouseMove: (m) => {
1060
+ const d = m.currentTarget.getBoundingClientRect();
1061
+ v({
1062
+ x: (m.clientX - d.left) / d.width * 100,
1063
+ y: (m.clientY - d.top) / d.height * 100
1058
1064
  });
1059
1065
  },
1060
1066
  sx: [
@@ -1066,193 +1072,193 @@ function Ir({ radius: e = 160, dim: n = 0.72, sx: l, children: s, ...f }) {
1066
1072
  position: "absolute",
1067
1073
  inset: 0,
1068
1074
  pointerEvents: "none",
1069
- background: `radial-gradient(circle ${e}px at ${u.x}% ${u.y}%, transparent 0, transparent 45%, rgba(0,0,0,${n}) 100%)`
1075
+ background: `radial-gradient(circle ${t}px at ${c.x}% ${c.y}%, transparent 0, transparent 45%, rgba(0,0,0,${n}) 100%)`
1070
1076
  }
1071
1077
  },
1072
- ...Array.isArray(l) ? l : l ? [l] : []
1078
+ ...Array.isArray(a) ? a : a ? [a] : []
1073
1079
  ],
1074
1080
  children: s
1075
1081
  }
1076
1082
  );
1077
1083
  }
1078
- function Ee(e, n) {
1079
- return Math.round(e / n) * n;
1084
+ function Oe(t, n) {
1085
+ return Math.round(t / n) * n;
1080
1086
  }
1081
- function $t(e, n, l, s, f) {
1082
- const u = e.x + l / 2, x = e.y + s / 2, p = n.x + l / 2, i = n.y + s / 2, y = (u + p) / 2;
1083
- if (f === "ellipse") {
1084
- const g = Math.max(Math.abs(p - u) / 2, 24), w = Math.max(Math.abs(i - x) / 2, 24);
1085
- return `M ${u} ${x} A ${g} ${w} 0 0 1 ${p} ${i}`;
1087
+ function Lt(t, n, a, s, h) {
1088
+ const c = t.x + a / 2, v = t.y + s / 2, m = n.x + a / 2, d = n.y + s / 2, k = (c + m) / 2;
1089
+ if (h === "ellipse") {
1090
+ const w = Math.max(Math.abs(m - c) / 2, 24), $ = Math.max(Math.abs(d - v) / 2, 24);
1091
+ return `M ${c} ${v} A ${w} ${$} 0 0 1 ${m} ${d}`;
1086
1092
  }
1087
- return f === "curved" ? `M ${u} ${x} C ${y} ${x}, ${y} ${i}, ${p} ${i}` : f === "step" ? `M ${u} ${x} L ${y} ${x} L ${y} ${i} L ${p} ${i}` : `M ${u} ${x} L ${p} ${i}`;
1093
+ return h === "curved" ? `M ${c} ${v} C ${k} ${v}, ${k} ${d}, ${m} ${d}` : h === "step" ? `M ${c} ${v} L ${k} ${v} L ${k} ${d} L ${m} ${d}` : `M ${c} ${v} L ${m} ${d}`;
1088
1094
  }
1089
- function Mr({
1090
- nodes: e,
1095
+ function qr({
1096
+ nodes: t,
1091
1097
  connections: n = [],
1092
- nodeWidth: l = 132,
1098
+ nodeWidth: a = 132,
1093
1099
  nodeHeight: s = 52,
1094
- mode: f = "edit",
1095
- snapToGrid: u = !1,
1096
- gridSize: x = 24,
1097
- showGrid: p = !1,
1098
- selectedNodeId: i,
1099
- connectionStyle: y = "line",
1100
- editableTools: g = !1,
1101
- linkTypes: w = ["line", "curved", "step", "ellipse"],
1102
- renderNode: v,
1103
- onNodesChange: P,
1104
- onConnectionsChange: C,
1105
- onNodeMove: o,
1106
- onNodeSelect: R,
1107
- sx: h,
1108
- ...M
1100
+ mode: h = "edit",
1101
+ snapToGrid: c = !1,
1102
+ gridSize: v = 24,
1103
+ showGrid: m = !1,
1104
+ selectedNodeId: d,
1105
+ connectionStyle: k = "line",
1106
+ editableTools: w = !1,
1107
+ linkTypes: $ = ["line", "curved", "step", "ellipse"],
1108
+ renderNode: g,
1109
+ onNodesChange: B,
1110
+ onConnectionsChange: z,
1111
+ onNodeMove: i,
1112
+ onNodeSelect: E,
1113
+ sx: b,
1114
+ ...A
1109
1115
  }) {
1110
- const [N, X] = W(e), [k, D] = W(n), $ = g ? N : e, L = g ? k : n, [j, O] = W(
1111
- Object.fromEntries($.map((r) => [r.id, { x: r.x, y: r.y }]))
1112
- ), [c, S] = W(i ?? null), [b, z] = W(!1), [B, a] = W(""), [T, Q] = W(w[0] ?? "line"), [le, se] = W(""), [q, ee] = W(null), U = i ?? c, K = $.find((r) => r.id === U) ?? null, he = L.map((r, A) => ({ connection: r, index: A })).filter(({ connection: r }) => r.from === U || r.to === U), be = e.map((r) => `${r.id}:${r.label}:${r.x}:${r.y}:${r.color ?? ""}`).join("|"), I = n.map((r) => `${r.from}:${r.to}:${r.type ?? ""}:${r.label ?? ""}:${r.color ?? ""}`).join("|");
1113
- ge(() => {
1114
- g || X(e), O((r) => ({
1115
- ...Object.fromEntries(e.map((A) => [A.id, r[A.id] ?? { x: A.x, y: A.y }]))
1116
+ const [V, O] = S(t), [M, R] = S(n), I = w ? V : t, W = w ? M : n, [U, G] = S(
1117
+ Object.fromEntries(I.map((r) => [r.id, { x: r.x, y: r.y }]))
1118
+ ), [p, L] = S(d ?? null), [y, P] = S(!1), [N, o] = S(""), [X, ee] = S($[0] ?? "line"), [he, te] = S(""), [q, ae] = S(null), K = d ?? p, re = I.find((r) => r.id === K) ?? null, fe = W.map((r, C) => ({ connection: r, index: C })).filter(({ connection: r }) => r.from === K || r.to === K), se = t.map((r) => `${r.id}:${r.label}:${r.x}:${r.y}:${r.color ?? ""}`).join("|"), T = n.map((r) => `${r.from}:${r.to}:${r.type ?? ""}:${r.label ?? ""}:${r.color ?? ""}`).join("|");
1119
+ ke(() => {
1120
+ w || O(t), G((r) => ({
1121
+ ...Object.fromEntries(t.map((C) => [C.id, r[C.id] ?? { x: C.x, y: C.y }]))
1116
1122
  }));
1117
- }, [g, be]), ge(() => {
1118
- g || D(n);
1119
- }, [I, g]);
1120
- function te(r) {
1121
- X(r), P?.(r);
1123
+ }, [w, se]), ke(() => {
1124
+ w || R(n);
1125
+ }, [T, w]);
1126
+ function le(r) {
1127
+ O(r), B?.(r);
1122
1128
  }
1123
- function re(r) {
1124
- D(r), C?.(r);
1129
+ function ne(r) {
1130
+ R(r), z?.(r);
1125
1131
  }
1126
- function J(r, A) {
1127
- const H = u ? { x: Ee(A.x, x), y: Ee(A.y, x) } : A;
1128
- O((F) => ({
1129
- ...F,
1130
- [r]: H
1131
- })), g && te($.map((F) => F.id === r ? { ...F, ...H } : F)), o?.(r, H);
1132
+ function Q(r, C) {
1133
+ const F = c ? { x: Oe(C.x, v), y: Oe(C.y, v) } : C;
1134
+ G((D) => ({
1135
+ ...D,
1136
+ [r]: F
1137
+ })), w && le(I.map((D) => D.id === r ? { ...D, ...F } : D)), i?.(r, F);
1132
1138
  }
1133
- function ce() {
1134
- const r = $.length + 1, A = {
1139
+ function oe() {
1140
+ const r = I.length + 1, C = {
1135
1141
  id: `node-${Date.now()}`,
1136
1142
  label: `Box ${r}`,
1137
1143
  x: 48 + r * 18,
1138
1144
  y: 48 + r * 18,
1139
1145
  color: "#ffffff"
1140
1146
  };
1141
- te([...$, A]), O((H) => ({
1142
- ...H,
1143
- [A.id]: { x: A.x, y: A.y }
1144
- })), S(A.id);
1147
+ le([...I, C]), G((F) => ({
1148
+ ...F,
1149
+ [C.id]: { x: C.x, y: C.y }
1150
+ })), L(C.id);
1145
1151
  }
1146
1152
  function me() {
1147
- U && (te($.filter((r) => r.id !== U)), re(L.filter((r) => r.from !== U && r.to !== U)), S(null), z(!1));
1153
+ K && (le(I.filter((r) => r.id !== K)), ne(W.filter((r) => r.from !== K && r.to !== K)), L(null), P(!1));
1148
1154
  }
1149
1155
  function xe(r) {
1150
- U && te($.map((A) => A.id === U ? { ...A, ...r } : A));
1156
+ K && le(I.map((C) => C.id === K ? { ...C, ...r } : C));
1151
1157
  }
1152
- function ze() {
1153
- if (!U || !B || U === B)
1158
+ function Ie() {
1159
+ if (!K || !N || K === N)
1154
1160
  return;
1155
1161
  const r = {
1156
- from: U,
1157
- to: B,
1158
- type: T,
1159
- label: le,
1160
- color: T === "ellipse" ? "#db2777" : T === "step" ? "#059669" : "#2563eb"
1161
- }, A = [
1162
- ...L.filter((H) => !(H.from === U && H.to === B)),
1162
+ from: K,
1163
+ to: N,
1164
+ type: X,
1165
+ label: he,
1166
+ color: X === "ellipse" ? "#db2777" : X === "step" ? "#059669" : "#2563eb"
1167
+ }, C = [
1168
+ ...W.filter((F) => !(F.from === K && F.to === N)),
1163
1169
  r
1164
1170
  ];
1165
- re(A), a(""), se(""), ee(A.indexOf(r));
1171
+ ne(C), o(""), te(""), ae(C.indexOf(r));
1166
1172
  }
1167
- function ye(r, A) {
1168
- const H = L[r];
1169
- if (!H)
1173
+ function l(r, C) {
1174
+ const F = W[r];
1175
+ if (!F)
1170
1176
  return;
1171
- const F = { ...H, ...A }, Z = L.map((G, de) => de === r ? F : G).filter((G, de) => de === r || G.from !== F.from || G.to !== F.to);
1172
- re(Z);
1177
+ const D = { ...F, ...C }, J = W.map((Z, ge) => ge === r ? D : Z).filter((Z, ge) => ge === r || Z.from !== D.from || Z.to !== D.to);
1178
+ ne(J);
1173
1179
  }
1174
- function He(r) {
1175
- re(L.filter((A, H) => H !== r)), ee(null);
1180
+ function x(r) {
1181
+ ne(W.filter((C, F) => F !== r)), ae(null);
1176
1182
  }
1177
- return /* @__PURE__ */ m(
1178
- d,
1183
+ return /* @__PURE__ */ f(
1184
+ u,
1179
1185
  {
1180
- ...M,
1186
+ ...A,
1181
1187
  sx: [
1182
1188
  {
1183
1189
  position: "relative",
1184
1190
  minHeight: 360,
1185
1191
  overflow: "hidden",
1186
1192
  bgcolor: "#f8fafc",
1187
- backgroundImage: p ? "linear-gradient(rgba(148,163,184,0.24) 1px, transparent 1px), linear-gradient(90deg, rgba(148,163,184,0.24) 1px, transparent 1px)" : void 0,
1188
- backgroundSize: p ? `${x}px ${x}px` : void 0
1193
+ backgroundImage: m ? "linear-gradient(rgba(148,163,184,0.24) 1px, transparent 1px), linear-gradient(90deg, rgba(148,163,184,0.24) 1px, transparent 1px)" : void 0,
1194
+ backgroundSize: m ? `${v}px ${v}px` : void 0
1189
1195
  },
1190
- ...Array.isArray(h) ? h : h ? [h] : []
1196
+ ...Array.isArray(b) ? b : b ? [b] : []
1191
1197
  ],
1192
1198
  children: [
1193
- /* @__PURE__ */ t(d, { component: "svg", sx: { position: "absolute", inset: 0, width: "100%", height: "100%" }, children: L.map((r) => {
1194
- const A = j[r.from], H = j[r.to];
1195
- if (!A || !H)
1199
+ /* @__PURE__ */ e(u, { component: "svg", sx: { position: "absolute", inset: 0, width: "100%", height: "100%" }, children: W.map((r) => {
1200
+ const C = U[r.from], F = U[r.to];
1201
+ if (!C || !F)
1196
1202
  return null;
1197
- const F = $t(A, H, l, s, r.type ?? y), Z = (A.x + H.x + l) / 2, G = (A.y + H.y + s) / 2;
1198
- return /* @__PURE__ */ m("g", { children: [
1199
- /* @__PURE__ */ t("path", { d: F, fill: "none", stroke: r.color ?? "#94a3b8", strokeWidth: "2.5" }),
1200
- r.label ? /* @__PURE__ */ t("text", { x: Z, y: G - 8, textAnchor: "middle", fill: r.color ?? "#64748b", fontSize: "11", fontWeight: "700", children: r.label }) : null
1203
+ const D = Lt(C, F, a, s, r.type ?? k), J = (C.x + F.x + a) / 2, Z = (C.y + F.y + s) / 2;
1204
+ return /* @__PURE__ */ f("g", { children: [
1205
+ /* @__PURE__ */ e("path", { d: D, fill: "none", stroke: r.color ?? "#94a3b8", strokeWidth: "2.5" }),
1206
+ r.label ? /* @__PURE__ */ e("text", { x: J, y: Z - 8, textAnchor: "middle", fill: r.color ?? "#64748b", fontSize: "11", fontWeight: "700", children: r.label }) : null
1201
1207
  ] }, `${r.from}-${r.to}-${r.type ?? r.label ?? "link"}`);
1202
1208
  }) }),
1203
- $.map((r) => {
1204
- const A = j[r.id], H = r.id === U;
1205
- return /* @__PURE__ */ t(
1206
- d,
1209
+ I.map((r) => {
1210
+ const C = U[r.id], F = r.id === K;
1211
+ return /* @__PURE__ */ e(
1212
+ u,
1207
1213
  {
1208
1214
  role: "button",
1209
1215
  tabIndex: 0,
1210
1216
  sx: {
1211
1217
  position: "absolute",
1212
- left: A.x,
1213
- top: A.y,
1214
- width: l,
1218
+ left: C.x,
1219
+ top: C.y,
1220
+ width: a,
1215
1221
  height: s,
1216
1222
  display: "grid",
1217
1223
  placeItems: "center",
1218
- border: H ? 2 : 1,
1219
- borderColor: H ? "primary.main" : "divider",
1224
+ border: F ? 2 : 1,
1225
+ borderColor: F ? "primary.main" : "divider",
1220
1226
  borderRadius: 1,
1221
1227
  bgcolor: r.color ?? "background.paper",
1222
- cursor: f === "edit" ? "grab" : "pointer",
1228
+ cursor: h === "edit" ? "grab" : "pointer",
1223
1229
  userSelect: "none",
1224
- boxShadow: H ? "0 18px 34px rgba(37,99,235,0.22)" : "0 12px 28px rgba(15,23,42,0.12)",
1230
+ boxShadow: F ? "0 18px 34px rgba(37,99,235,0.22)" : "0 12px 28px rgba(15,23,42,0.12)",
1225
1231
  touchAction: "none"
1226
1232
  },
1227
- onPointerDown: (F) => {
1228
- if (S(r.id), ee(null), g && z(!0), R?.(r), f === "readonly")
1233
+ onPointerDown: (D) => {
1234
+ if (L(r.id), ae(null), w && P(!0), E?.(r), h === "readonly")
1229
1235
  return;
1230
- const Z = F.clientX, G = F.clientY, de = j[r.id];
1231
- F.currentTarget.setPointerCapture(F.pointerId);
1232
- function Se(Re) {
1233
- J(r.id, {
1234
- x: de.x + Re.clientX - Z,
1235
- y: de.y + Re.clientY - G
1236
+ const J = D.clientX, Z = D.clientY, ge = U[r.id];
1237
+ D.currentTarget.setPointerCapture(D.pointerId);
1238
+ function ye(Te) {
1239
+ Q(r.id, {
1240
+ x: ge.x + Te.clientX - J,
1241
+ y: ge.y + Te.clientY - Z
1236
1242
  });
1237
1243
  }
1238
- function Ae() {
1239
- window.removeEventListener("pointermove", Se), window.removeEventListener("pointerup", Ae);
1244
+ function Pe() {
1245
+ window.removeEventListener("pointermove", ye), window.removeEventListener("pointerup", Pe);
1240
1246
  }
1241
- window.addEventListener("pointermove", Se), window.addEventListener("pointerup", Ae);
1247
+ window.addEventListener("pointermove", ye), window.addEventListener("pointerup", Pe);
1242
1248
  },
1243
- onKeyDown: (F) => {
1244
- if (f === "readonly")
1249
+ onKeyDown: (D) => {
1250
+ if (h === "readonly")
1245
1251
  return;
1246
- const Z = u ? x : 8, G = j[r.id];
1247
- F.key === "ArrowLeft" && (J(r.id, { x: G.x - Z, y: G.y }), F.preventDefault()), F.key === "ArrowRight" && (J(r.id, { x: G.x + Z, y: G.y }), F.preventDefault()), F.key === "ArrowUp" && (J(r.id, { x: G.x, y: G.y - Z }), F.preventDefault()), F.key === "ArrowDown" && (J(r.id, { x: G.x, y: G.y + Z }), F.preventDefault());
1252
+ const J = c ? v : 8, Z = U[r.id];
1253
+ D.key === "ArrowLeft" && (Q(r.id, { x: Z.x - J, y: Z.y }), D.preventDefault()), D.key === "ArrowRight" && (Q(r.id, { x: Z.x + J, y: Z.y }), D.preventDefault()), D.key === "ArrowUp" && (Q(r.id, { x: Z.x, y: Z.y - J }), D.preventDefault()), D.key === "ArrowDown" && (Q(r.id, { x: Z.x, y: Z.y + J }), D.preventDefault());
1248
1254
  },
1249
- children: v ? v(r, H) : /* @__PURE__ */ t(E, { fontWeight: 800, children: r.label })
1255
+ children: g ? g(r, F) : /* @__PURE__ */ e(Y, { fontWeight: 800, children: r.label })
1250
1256
  },
1251
1257
  r.id
1252
1258
  );
1253
1259
  }),
1254
- g && K && b ? /* @__PURE__ */ t(
1255
- d,
1260
+ w && re && y ? /* @__PURE__ */ e(
1261
+ u,
1256
1262
  {
1257
1263
  sx: {
1258
1264
  position: "absolute",
@@ -1269,71 +1275,71 @@ function Mr({
1269
1275
  bgcolor: "background.paper",
1270
1276
  boxShadow: "0 20px 48px rgba(15,23,42,0.22)"
1271
1277
  },
1272
- children: /* @__PURE__ */ m(V, { spacing: 1.25, sx: { p: 1.5 }, children: [
1273
- /* @__PURE__ */ m(V, { direction: "row", spacing: 0.75, alignItems: "center", children: [
1274
- /* @__PURE__ */ t(E, { variant: "subtitle2", fontWeight: 900, sx: { flex: 1 }, children: "Box editor" }),
1275
- /* @__PURE__ */ t(ie, { title: "Add box", children: /* @__PURE__ */ t(ue, { size: "small", color: "primary", onClick: ce, children: /* @__PURE__ */ t(_e, { fontSize: "small" }) }) }),
1276
- /* @__PURE__ */ t(ie, { title: "Remove box", children: /* @__PURE__ */ t("span", { children: /* @__PURE__ */ t(ue, { size: "small", color: "error", onClick: me, disabled: !K, children: /* @__PURE__ */ t(Ke, { fontSize: "small" }) }) }) }),
1277
- /* @__PURE__ */ t(ie, { title: "Close editor", children: /* @__PURE__ */ t(ue, { size: "small", onClick: () => z(!1), children: /* @__PURE__ */ t(Je, { fontSize: "small" }) }) })
1278
+ children: /* @__PURE__ */ f(H, { spacing: 1.25, sx: { p: 1.5 }, children: [
1279
+ /* @__PURE__ */ f(H, { direction: "row", spacing: 0.75, alignItems: "center", children: [
1280
+ /* @__PURE__ */ e(Y, { variant: "subtitle2", fontWeight: 900, sx: { flex: 1 }, children: "Box editor" }),
1281
+ /* @__PURE__ */ e(ce, { title: "Add box", children: /* @__PURE__ */ e(ue, { size: "small", color: "primary", onClick: oe, children: /* @__PURE__ */ e(at, { fontSize: "small" }) }) }),
1282
+ /* @__PURE__ */ e(ce, { title: "Remove box", children: /* @__PURE__ */ e("span", { children: /* @__PURE__ */ e(ue, { size: "small", color: "error", onClick: me, disabled: !re, children: /* @__PURE__ */ e(_e, { fontSize: "small" }) }) }) }),
1283
+ /* @__PURE__ */ e(ce, { title: "Close editor", children: /* @__PURE__ */ e(ue, { size: "small", onClick: () => P(!1), children: /* @__PURE__ */ e(st, { fontSize: "small" }) }) })
1278
1284
  ] }),
1279
- /* @__PURE__ */ m(d, { sx: { display: "grid", gridTemplateColumns: "1fr 96px", gap: 1 }, children: [
1280
- /* @__PURE__ */ t(
1285
+ /* @__PURE__ */ f(u, { sx: { display: "grid", gridTemplateColumns: "1fr 96px", gap: 1 }, children: [
1286
+ /* @__PURE__ */ e(
1281
1287
  _,
1282
1288
  {
1283
1289
  size: "small",
1284
1290
  label: "Label",
1285
- value: K?.label ?? "",
1286
- disabled: !K,
1291
+ value: re?.label ?? "",
1292
+ disabled: !re,
1287
1293
  onChange: (r) => xe({ label: r.target.value })
1288
1294
  }
1289
1295
  ),
1290
- /* @__PURE__ */ t(
1296
+ /* @__PURE__ */ e(
1291
1297
  _,
1292
1298
  {
1293
1299
  size: "small",
1294
1300
  label: "Color",
1295
1301
  type: "color",
1296
- value: K?.color ?? "#ffffff",
1297
- disabled: !K,
1302
+ value: re?.color ?? "#ffffff",
1303
+ disabled: !re,
1298
1304
  onChange: (r) => xe({ color: r.target.value })
1299
1305
  }
1300
1306
  )
1301
1307
  ] }),
1302
- /* @__PURE__ */ m(d, { sx: { display: "grid", gridTemplateColumns: "1fr", gap: 1.25 }, children: [
1303
- /* @__PURE__ */ m(V, { spacing: 1, children: [
1304
- /* @__PURE__ */ t(E, { variant: "caption", fontWeight: 900, color: "text.secondary", children: "Links" }),
1305
- /* @__PURE__ */ m(d, { sx: { display: "grid", gridTemplateColumns: "1fr 32px", gap: 0.5, alignItems: "center" }, children: [
1306
- /* @__PURE__ */ m(
1308
+ /* @__PURE__ */ f(u, { sx: { display: "grid", gridTemplateColumns: "1fr", gap: 1.25 }, children: [
1309
+ /* @__PURE__ */ f(H, { spacing: 1, children: [
1310
+ /* @__PURE__ */ e(Y, { variant: "caption", fontWeight: 900, color: "text.secondary", children: "Links" }),
1311
+ /* @__PURE__ */ f(u, { sx: { display: "grid", gridTemplateColumns: "1fr 32px", gap: 0.5, alignItems: "center" }, children: [
1312
+ /* @__PURE__ */ f(
1307
1313
  _,
1308
1314
  {
1309
1315
  select: !0,
1310
1316
  size: "small",
1311
1317
  label: "To",
1312
- value: B,
1313
- disabled: !K,
1314
- onChange: (r) => a(r.target.value),
1318
+ value: N,
1319
+ disabled: !re,
1320
+ onChange: (r) => o(r.target.value),
1315
1321
  children: [
1316
- /* @__PURE__ */ t(pe, { value: "", children: "Pick target" }),
1317
- $.filter((r) => r.id !== U).map((r) => /* @__PURE__ */ t(pe, { value: r.id, children: r.label }, r.id))
1322
+ /* @__PURE__ */ e(be, { value: "", children: "Pick target" }),
1323
+ I.filter((r) => r.id !== K).map((r) => /* @__PURE__ */ e(be, { value: r.id, children: r.label }, r.id))
1318
1324
  ]
1319
1325
  }
1320
1326
  ),
1321
- /* @__PURE__ */ t(ie, { title: `Add link from ${K?.label ?? "box"}`, children: /* @__PURE__ */ t("span", { children: /* @__PURE__ */ t(
1327
+ /* @__PURE__ */ e(ce, { title: `Add link from ${re?.label ?? "box"}`, children: /* @__PURE__ */ e("span", { children: /* @__PURE__ */ e(
1322
1328
  ue,
1323
1329
  {
1324
1330
  size: "small",
1325
1331
  color: "primary",
1326
- disabled: !K || !B,
1327
- onClick: ze,
1332
+ disabled: !re || !N,
1333
+ onClick: Ie,
1328
1334
  sx: { width: 32, height: 32, border: 1, borderColor: "divider", borderRadius: 1 },
1329
- children: /* @__PURE__ */ t(Qe, { fontSize: "small" })
1335
+ children: /* @__PURE__ */ e(lt, { fontSize: "small" })
1330
1336
  }
1331
1337
  ) }) })
1332
1338
  ] }),
1333
- he.length ? he.map(({ connection: r, index: A }) => {
1334
- const H = $.find((G) => G.id === r.from), F = $.find((G) => G.id === r.to), Z = q === A;
1335
- return /* @__PURE__ */ m(
1336
- d,
1339
+ fe.length ? fe.map(({ connection: r, index: C }) => {
1340
+ const F = I.find((Z) => Z.id === r.from), D = I.find((Z) => Z.id === r.to), J = q === C;
1341
+ return /* @__PURE__ */ f(
1342
+ u,
1337
1343
  {
1338
1344
  sx: {
1339
1345
  width: "100%",
@@ -1343,82 +1349,82 @@ function Mr({
1343
1349
  alignItems: "center"
1344
1350
  },
1345
1351
  children: [
1346
- /* @__PURE__ */ t(
1347
- d,
1352
+ /* @__PURE__ */ e(
1353
+ u,
1348
1354
  {
1349
1355
  component: "button",
1350
- onClick: () => ee(A),
1356
+ onClick: () => ae(C),
1351
1357
  sx: {
1352
1358
  px: 1,
1353
1359
  py: 0.75,
1354
1360
  minWidth: 0,
1355
1361
  border: 1,
1356
- borderColor: Z ? "primary.main" : "divider",
1362
+ borderColor: J ? "primary.main" : "divider",
1357
1363
  borderRadius: 1,
1358
- bgcolor: Z ? "primary.main" : "background.paper",
1359
- color: Z ? "primary.contrastText" : "text.primary",
1364
+ bgcolor: J ? "primary.main" : "background.paper",
1365
+ color: J ? "primary.contrastText" : "text.primary",
1360
1366
  cursor: "pointer",
1361
1367
  font: "inherit",
1362
1368
  textAlign: "left"
1363
1369
  },
1364
- children: (H?.label ?? r.from) + " -> " + (F?.label ?? r.to)
1370
+ children: (F?.label ?? r.from) + " -> " + (D?.label ?? r.to)
1365
1371
  }
1366
1372
  ),
1367
- /* @__PURE__ */ t(ie, { title: "Remove link", children: /* @__PURE__ */ t(ue, { size: "small", color: "error", onClick: () => He(A), sx: { width: 32, height: 32 }, children: /* @__PURE__ */ t(et, { fontSize: "small" }) }) })
1373
+ /* @__PURE__ */ e(ce, { title: "Remove link", children: /* @__PURE__ */ e(ue, { size: "small", color: "error", onClick: () => x(C), sx: { width: 32, height: 32 }, children: /* @__PURE__ */ e(ct, { fontSize: "small" }) }) })
1368
1374
  ]
1369
1375
  },
1370
- `${r.from}-${r.to}-${A}`
1376
+ `${r.from}-${r.to}-${C}`
1371
1377
  );
1372
- }) : /* @__PURE__ */ t(E, { variant: "body2", color: "text.secondary", children: "No linked boxes." })
1378
+ }) : /* @__PURE__ */ e(Y, { variant: "body2", color: "text.secondary", children: "No linked boxes." })
1373
1379
  ] }),
1374
- /* @__PURE__ */ m(V, { spacing: 1, children: [
1375
- /* @__PURE__ */ t(E, { variant: "caption", fontWeight: 900, color: "text.secondary", children: "Link details" }),
1376
- q !== null && L[q] ? /* @__PURE__ */ m(Ye, { children: [
1377
- /* @__PURE__ */ t(
1380
+ /* @__PURE__ */ f(H, { spacing: 1, children: [
1381
+ /* @__PURE__ */ e(Y, { variant: "caption", fontWeight: 900, color: "text.secondary", children: "Link details" }),
1382
+ q !== null && W[q] ? /* @__PURE__ */ f(qe, { children: [
1383
+ /* @__PURE__ */ e(
1378
1384
  _,
1379
1385
  {
1380
1386
  select: !0,
1381
1387
  size: "small",
1382
1388
  label: "From",
1383
- value: L[q].from,
1384
- onChange: (r) => ye(q, { from: r.target.value }),
1385
- children: $.filter((r) => r.id !== L[q].to).map((r) => /* @__PURE__ */ t(pe, { value: r.id, children: r.label }, r.id))
1389
+ value: W[q].from,
1390
+ onChange: (r) => l(q, { from: r.target.value }),
1391
+ children: I.filter((r) => r.id !== W[q].to).map((r) => /* @__PURE__ */ e(be, { value: r.id, children: r.label }, r.id))
1386
1392
  }
1387
1393
  ),
1388
- /* @__PURE__ */ m(d, { sx: { display: "grid", gridTemplateColumns: "1fr 1fr", gap: 1 }, children: [
1389
- /* @__PURE__ */ t(
1394
+ /* @__PURE__ */ f(u, { sx: { display: "grid", gridTemplateColumns: "1fr 1fr", gap: 1 }, children: [
1395
+ /* @__PURE__ */ e(
1390
1396
  _,
1391
1397
  {
1392
1398
  select: !0,
1393
1399
  size: "small",
1394
1400
  label: "To",
1395
- value: L[q].to,
1396
- onChange: (r) => ye(q, { to: r.target.value }),
1397
- children: $.filter((r) => r.id !== L[q].from).map((r) => /* @__PURE__ */ t(pe, { value: r.id, children: r.label }, r.id))
1401
+ value: W[q].to,
1402
+ onChange: (r) => l(q, { to: r.target.value }),
1403
+ children: I.filter((r) => r.id !== W[q].from).map((r) => /* @__PURE__ */ e(be, { value: r.id, children: r.label }, r.id))
1398
1404
  }
1399
1405
  ),
1400
- /* @__PURE__ */ t(
1406
+ /* @__PURE__ */ e(
1401
1407
  _,
1402
1408
  {
1403
1409
  select: !0,
1404
1410
  size: "small",
1405
1411
  label: "Shape",
1406
- value: L[q].type ?? y,
1407
- onChange: (r) => ye(q, { type: r.target.value }),
1408
- children: w.map((r) => /* @__PURE__ */ t(pe, { value: r, children: r }, r))
1412
+ value: W[q].type ?? k,
1413
+ onChange: (r) => l(q, { type: r.target.value }),
1414
+ children: $.map((r) => /* @__PURE__ */ e(be, { value: r, children: r }, r))
1409
1415
  }
1410
1416
  )
1411
1417
  ] }),
1412
- /* @__PURE__ */ t(
1418
+ /* @__PURE__ */ e(
1413
1419
  _,
1414
1420
  {
1415
1421
  size: "small",
1416
1422
  label: "Label",
1417
- value: L[q].label ?? "",
1418
- onChange: (r) => ye(q, { label: r.target.value })
1423
+ value: W[q].label ?? "",
1424
+ onChange: (r) => l(q, { label: r.target.value })
1419
1425
  }
1420
1426
  )
1421
- ] }) : /* @__PURE__ */ t(E, { variant: "body2", color: "text.secondary", children: "Pick a link." })
1427
+ ] }) : /* @__PURE__ */ e(Y, { variant: "body2", color: "text.secondary", children: "Pick a link." })
1422
1428
  ] })
1423
1429
  ] })
1424
1430
  ] })
@@ -1428,61 +1434,61 @@ function Mr({
1428
1434
  }
1429
1435
  );
1430
1436
  }
1431
- function zr({ before: e, after: n, initialPosition: l = 50, sx: s, ...f }) {
1432
- const [u, x] = W(l);
1433
- return /* @__PURE__ */ m(
1434
- d,
1437
+ function Zr({ before: t, after: n, initialPosition: a = 50, sx: s, ...h }) {
1438
+ const [c, v] = S(a);
1439
+ return /* @__PURE__ */ f(
1440
+ u,
1435
1441
  {
1436
- ...f,
1442
+ ...h,
1437
1443
  sx: [
1438
1444
  { position: "relative", overflow: "hidden", minHeight: 280 },
1439
1445
  ...Array.isArray(s) ? s : s ? [s] : []
1440
1446
  ],
1441
- onPointerMove: (p) => {
1442
- if (p.buttons !== 1)
1447
+ onPointerMove: (m) => {
1448
+ if (m.buttons !== 1)
1443
1449
  return;
1444
- const i = p.currentTarget.getBoundingClientRect();
1445
- x((p.clientX - i.left) / i.width * 100);
1450
+ const d = m.currentTarget.getBoundingClientRect();
1451
+ v((m.clientX - d.left) / d.width * 100);
1446
1452
  },
1447
1453
  children: [
1448
- /* @__PURE__ */ t(d, { sx: { position: "absolute", inset: 0 }, children: n }),
1449
- /* @__PURE__ */ t(d, { sx: { position: "absolute", inset: 0, width: `${u}%`, overflow: "hidden" }, children: e }),
1450
- /* @__PURE__ */ t(d, { sx: { position: "absolute", top: 0, bottom: 0, left: `${u}%`, width: 3, bgcolor: "#ffffff", boxShadow: "0 0 0 1px rgba(0,0,0,0.2)", cursor: "ew-resize" } })
1454
+ /* @__PURE__ */ e(u, { sx: { position: "absolute", inset: 0 }, children: n }),
1455
+ /* @__PURE__ */ e(u, { sx: { position: "absolute", inset: 0, width: `${c}%`, overflow: "hidden" }, children: t }),
1456
+ /* @__PURE__ */ e(u, { sx: { position: "absolute", top: 0, bottom: 0, left: `${c}%`, width: 3, bgcolor: "#ffffff", boxShadow: "0 0 0 1px rgba(0,0,0,0.2)", cursor: "ew-resize" } })
1451
1457
  ]
1452
1458
  }
1453
1459
  );
1454
1460
  }
1455
- function Sr({
1456
- initialWidth: e = 320,
1461
+ function _r({
1462
+ initialWidth: t = 320,
1457
1463
  initialHeight: n = 220,
1458
- minWidth: l = 160,
1464
+ minWidth: a = 160,
1459
1465
  minHeight: s = 120,
1460
- sx: f,
1461
- children: u,
1462
- ...x
1466
+ sx: h,
1467
+ children: c,
1468
+ ...v
1463
1469
  }) {
1464
- const [p, i] = W({ width: e, height: n });
1465
- return /* @__PURE__ */ m(
1466
- d,
1470
+ const [m, d] = S({ width: t, height: n });
1471
+ return /* @__PURE__ */ f(
1472
+ u,
1467
1473
  {
1468
- ...x,
1474
+ ...v,
1469
1475
  sx: [
1470
1476
  {
1471
1477
  position: "relative",
1472
- width: p.width,
1473
- height: p.height,
1478
+ width: m.width,
1479
+ height: m.height,
1474
1480
  overflow: "auto",
1475
1481
  border: 1,
1476
1482
  borderColor: "divider",
1477
1483
  borderRadius: 1,
1478
1484
  bgcolor: "background.paper"
1479
1485
  },
1480
- ...Array.isArray(f) ? f : f ? [f] : []
1486
+ ...Array.isArray(h) ? h : h ? [h] : []
1481
1487
  ],
1482
1488
  children: [
1483
- u,
1484
- /* @__PURE__ */ t(
1485
- d,
1489
+ c,
1490
+ /* @__PURE__ */ e(
1491
+ u,
1486
1492
  {
1487
1493
  sx: {
1488
1494
  position: "absolute",
@@ -1500,155 +1506,155 @@ function Sr({
1500
1506
  borderRadius: 1,
1501
1507
  boxShadow: "0 6px 16px rgba(15,23,42,0.14)"
1502
1508
  },
1503
- onPointerDown: (y) => {
1504
- const g = y.clientX, w = y.clientY, v = p;
1505
- function P(o) {
1506
- i({
1507
- width: Math.max(l, v.width + o.clientX - g),
1508
- height: Math.max(s, v.height + o.clientY - w)
1509
+ onPointerDown: (k) => {
1510
+ const w = k.clientX, $ = k.clientY, g = m;
1511
+ function B(i) {
1512
+ d({
1513
+ width: Math.max(a, g.width + i.clientX - w),
1514
+ height: Math.max(s, g.height + i.clientY - $)
1509
1515
  });
1510
1516
  }
1511
- function C() {
1512
- window.removeEventListener("pointermove", P), window.removeEventListener("pointerup", C);
1517
+ function z() {
1518
+ window.removeEventListener("pointermove", B), window.removeEventListener("pointerup", z);
1513
1519
  }
1514
- window.addEventListener("pointermove", P), window.addEventListener("pointerup", C);
1520
+ window.addEventListener("pointermove", B), window.addEventListener("pointerup", z);
1515
1521
  },
1516
- children: /* @__PURE__ */ t(tt, { fontSize: "small" })
1522
+ children: /* @__PURE__ */ e(Ke, { fontSize: "small" })
1517
1523
  }
1518
1524
  )
1519
1525
  ]
1520
1526
  }
1521
1527
  );
1522
1528
  }
1523
- function kt(e) {
1524
- return e.type === "boolean" ? e.value ? "On" : "Off" : `${e.value}${e.unit ? ` ${e.unit}` : ""}`;
1529
+ function Wt(t) {
1530
+ return t.type === "boolean" ? t.value ? "On" : "Off" : `${t.value}${t.unit ? ` ${t.unit}` : ""}`;
1525
1531
  }
1526
- function Ct(e) {
1527
- return e.reduce((n, l) => {
1528
- const s = l.group ?? "Settings";
1532
+ function Bt(t) {
1533
+ return t.reduce((n, a) => {
1534
+ const s = a.group ?? "Settings";
1529
1535
  return {
1530
1536
  ...n,
1531
- [s]: [...n[s] ?? [], l]
1537
+ [s]: [...n[s] ?? [], a]
1532
1538
  };
1533
1539
  }, {});
1534
1540
  }
1535
- function Ar({
1536
- fields: e,
1541
+ function Kr({
1542
+ fields: t,
1537
1543
  onChange: n,
1538
- title: l = "Inspector",
1544
+ title: a = "Inspector",
1539
1545
  description: s,
1540
- density: f = "comfortable",
1541
- showValueSummary: u = !0,
1542
- showReset: x = !0,
1543
- sx: p
1546
+ density: h = "comfortable",
1547
+ showValueSummary: c = !0,
1548
+ showReset: v = !0,
1549
+ sx: m
1544
1550
  }) {
1545
- const i = Ct(e), y = f === "compact" ? 1.25 : 2, g = f === "compact" ? "small" : "medium";
1546
- function w(v) {
1547
- v.defaultValue !== void 0 && n?.(v.id, v.defaultValue);
1551
+ const d = Bt(t), k = h === "compact" ? 1.25 : 2, w = h === "compact" ? "small" : "medium";
1552
+ function $(g) {
1553
+ g.defaultValue !== void 0 && n?.(g.id, g.defaultValue);
1548
1554
  }
1549
- return /* @__PURE__ */ t(Me, { variant: "outlined", sx: [{ p: f === "compact" ? 1.5 : 2, borderRadius: 1 }, ...Array.isArray(p) ? p : [p]], children: /* @__PURE__ */ m(V, { spacing: y, children: [
1550
- /* @__PURE__ */ m(d, { children: [
1551
- /* @__PURE__ */ m(V, { direction: "row", alignItems: "center", justifyContent: "space-between", spacing: 1, children: [
1552
- /* @__PURE__ */ t(E, { variant: "subtitle1", fontWeight: 850, children: l }),
1553
- u ? /* @__PURE__ */ t(we, { size: "small", label: `${e.length} fields` }) : null
1555
+ return /* @__PURE__ */ e($e, { variant: "outlined", sx: [{ p: h === "compact" ? 1.5 : 2, borderRadius: 1 }, ...Array.isArray(m) ? m : [m]], children: /* @__PURE__ */ f(H, { spacing: k, children: [
1556
+ /* @__PURE__ */ f(u, { children: [
1557
+ /* @__PURE__ */ f(H, { direction: "row", alignItems: "center", justifyContent: "space-between", spacing: 1, children: [
1558
+ /* @__PURE__ */ e(Y, { variant: "subtitle1", fontWeight: 850, children: a }),
1559
+ c ? /* @__PURE__ */ e(we, { size: "small", label: `${t.length} fields` }) : null
1554
1560
  ] }),
1555
- s ? /* @__PURE__ */ t(E, { variant: "body2", color: "text.secondary", sx: { mt: 0.5 }, children: s }) : null
1561
+ s ? /* @__PURE__ */ e(Y, { variant: "body2", color: "text.secondary", sx: { mt: 0.5 }, children: s }) : null
1556
1562
  ] }),
1557
- Object.entries(i).map(([v, P], C) => /* @__PURE__ */ m(V, { spacing: y, children: [
1558
- C > 0 ? /* @__PURE__ */ t(nt, {}) : null,
1559
- /* @__PURE__ */ t(E, { variant: "caption", color: "text.secondary", fontWeight: 850, sx: { textTransform: "uppercase" }, children: v }),
1560
- P.map((o) => {
1561
- const R = x && o.defaultValue !== void 0 && o.defaultValue !== o.value;
1562
- return o.type === "boolean" ? /* @__PURE__ */ m(d, { children: [
1563
- /* @__PURE__ */ m(V, { direction: "row", alignItems: "center", justifyContent: "space-between", spacing: 1, children: [
1564
- /* @__PURE__ */ t(
1565
- ot,
1563
+ Object.entries(d).map(([g, B], z) => /* @__PURE__ */ f(H, { spacing: k, children: [
1564
+ z > 0 ? /* @__PURE__ */ e(ut, {}) : null,
1565
+ /* @__PURE__ */ e(Y, { variant: "caption", color: "text.secondary", fontWeight: 850, sx: { textTransform: "uppercase" }, children: g }),
1566
+ B.map((i) => {
1567
+ const E = v && i.defaultValue !== void 0 && i.defaultValue !== i.value;
1568
+ return i.type === "boolean" ? /* @__PURE__ */ f(u, { children: [
1569
+ /* @__PURE__ */ f(H, { direction: "row", alignItems: "center", justifyContent: "space-between", spacing: 1, children: [
1570
+ /* @__PURE__ */ e(
1571
+ pt,
1566
1572
  {
1567
- control: /* @__PURE__ */ t(
1568
- rt,
1573
+ control: /* @__PURE__ */ e(
1574
+ dt,
1569
1575
  {
1570
- checked: !!o.value,
1571
- disabled: o.disabled,
1572
- onChange: (h) => n?.(o.id, h.target.checked)
1576
+ checked: !!i.value,
1577
+ disabled: i.disabled,
1578
+ onChange: (b) => n?.(i.id, b.target.checked)
1573
1579
  }
1574
1580
  ),
1575
- label: o.label
1581
+ label: i.label
1576
1582
  }
1577
1583
  ),
1578
- R ? /* @__PURE__ */ t(ae, { size: "small", onClick: () => w(o), children: "Reset" }) : null
1584
+ E ? /* @__PURE__ */ e(ie, { size: "small", onClick: () => $(i), children: "Reset" }) : null
1579
1585
  ] }),
1580
- o.description ? /* @__PURE__ */ t(E, { variant: "caption", color: "text.secondary", children: o.description }) : null
1581
- ] }, o.id) : o.type === "number" ? /* @__PURE__ */ m(V, { spacing: 1, children: [
1582
- /* @__PURE__ */ m(V, { direction: "row", spacing: 1, alignItems: "flex-start", children: [
1583
- /* @__PURE__ */ t(
1586
+ i.description ? /* @__PURE__ */ e(Y, { variant: "caption", color: "text.secondary", children: i.description }) : null
1587
+ ] }, i.id) : i.type === "number" ? /* @__PURE__ */ f(H, { spacing: 1, children: [
1588
+ /* @__PURE__ */ f(H, { direction: "row", spacing: 1, alignItems: "flex-start", children: [
1589
+ /* @__PURE__ */ e(
1584
1590
  _,
1585
1591
  {
1586
1592
  fullWidth: !0,
1587
- size: g,
1588
- label: o.label,
1593
+ size: w,
1594
+ label: i.label,
1589
1595
  type: "number",
1590
- value: o.value,
1591
- helperText: o.description,
1592
- disabled: o.disabled,
1596
+ value: i.value,
1597
+ helperText: i.description,
1598
+ disabled: i.disabled,
1593
1599
  inputProps: {
1594
- min: o.min,
1595
- max: o.max,
1596
- step: o.step
1600
+ min: i.min,
1601
+ max: i.max,
1602
+ step: i.step
1597
1603
  },
1598
- onChange: (h) => n?.(o.id, Number(h.target.value))
1604
+ onChange: (b) => n?.(i.id, Number(b.target.value))
1599
1605
  }
1600
1606
  ),
1601
- o.unit ? /* @__PURE__ */ t(we, { label: o.unit, size: "small", sx: { mt: 1 } }) : null,
1602
- R ? /* @__PURE__ */ t(ae, { size: "small", onClick: () => w(o), sx: { mt: 0.5 }, children: "Reset" }) : null
1607
+ i.unit ? /* @__PURE__ */ e(we, { label: i.unit, size: "small", sx: { mt: 1 } }) : null,
1608
+ E ? /* @__PURE__ */ e(ie, { size: "small", onClick: () => $(i), sx: { mt: 0.5 }, children: "Reset" }) : null
1603
1609
  ] }),
1604
- o.min !== void 0 || o.max !== void 0 ? /* @__PURE__ */ t(
1605
- Ne,
1610
+ i.min !== void 0 || i.max !== void 0 ? /* @__PURE__ */ e(
1611
+ Qe,
1606
1612
  {
1607
- value: Number(o.value),
1608
- min: o.min ?? 0,
1609
- max: o.max ?? 100,
1610
- step: o.step ?? 1,
1611
- disabled: o.disabled,
1613
+ value: Number(i.value),
1614
+ min: i.min ?? 0,
1615
+ max: i.max ?? 100,
1616
+ step: i.step ?? 1,
1617
+ disabled: i.disabled,
1612
1618
  valueLabelDisplay: "auto",
1613
- onChange: (h, M) => n?.(o.id, Array.isArray(M) ? M[0] : M)
1619
+ onChange: (b, A) => n?.(i.id, Array.isArray(A) ? A[0] : A)
1614
1620
  }
1615
1621
  ) : null
1616
- ] }, o.id) : o.type === "select" ? /* @__PURE__ */ m(V, { direction: "row", spacing: 1, alignItems: "flex-start", children: [
1617
- /* @__PURE__ */ t(
1622
+ ] }, i.id) : i.type === "select" ? /* @__PURE__ */ f(H, { direction: "row", spacing: 1, alignItems: "flex-start", children: [
1623
+ /* @__PURE__ */ e(
1618
1624
  _,
1619
1625
  {
1620
1626
  select: !0,
1621
1627
  fullWidth: !0,
1622
- size: g,
1623
- label: o.label,
1624
- value: o.value,
1625
- helperText: o.description,
1626
- disabled: o.disabled,
1627
- onChange: (h) => n?.(o.id, h.target.value),
1628
- children: (o.options ?? []).map((h) => /* @__PURE__ */ t(pe, { value: h.value, children: h.label }, h.value))
1628
+ size: w,
1629
+ label: i.label,
1630
+ value: i.value,
1631
+ helperText: i.description,
1632
+ disabled: i.disabled,
1633
+ onChange: (b) => n?.(i.id, b.target.value),
1634
+ children: (i.options ?? []).map((b) => /* @__PURE__ */ e(be, { value: b.value, children: b.label }, b.value))
1629
1635
  }
1630
1636
  ),
1631
- R ? /* @__PURE__ */ t(ae, { size: "small", onClick: () => w(o), sx: { mt: 0.5 }, children: "Reset" }) : null
1632
- ] }, o.id) : o.type === "color" ? /* @__PURE__ */ m(V, { direction: "row", spacing: 1, alignItems: "flex-start", children: [
1633
- /* @__PURE__ */ t(
1637
+ E ? /* @__PURE__ */ e(ie, { size: "small", onClick: () => $(i), sx: { mt: 0.5 }, children: "Reset" }) : null
1638
+ ] }, i.id) : i.type === "color" ? /* @__PURE__ */ f(H, { direction: "row", spacing: 1, alignItems: "flex-start", children: [
1639
+ /* @__PURE__ */ e(
1634
1640
  _,
1635
1641
  {
1636
1642
  fullWidth: !0,
1637
- size: g,
1638
- label: o.label,
1639
- value: o.value,
1640
- helperText: o.description,
1641
- disabled: o.disabled,
1642
- onChange: (h) => n?.(o.id, h.target.value),
1643
+ size: w,
1644
+ label: i.label,
1645
+ value: i.value,
1646
+ helperText: i.description,
1647
+ disabled: i.disabled,
1648
+ onChange: (b) => n?.(i.id, b.target.value),
1643
1649
  InputProps: {
1644
- startAdornment: /* @__PURE__ */ t(
1645
- d,
1650
+ startAdornment: /* @__PURE__ */ e(
1651
+ u,
1646
1652
  {
1647
1653
  component: "input",
1648
1654
  type: "color",
1649
- value: String(o.value),
1650
- disabled: o.disabled,
1651
- onChange: (h) => n?.(o.id, h.target.value),
1655
+ value: String(i.value),
1656
+ disabled: i.disabled,
1657
+ onChange: (b) => n?.(i.id, b.target.value),
1652
1658
  sx: {
1653
1659
  width: 28,
1654
1660
  height: 28,
@@ -1656,49 +1662,49 @@ function Ar({
1656
1662
  mr: 1,
1657
1663
  border: 0,
1658
1664
  bgcolor: "transparent",
1659
- cursor: o.disabled ? "default" : "pointer"
1665
+ cursor: i.disabled ? "default" : "pointer"
1660
1666
  }
1661
1667
  }
1662
1668
  )
1663
1669
  }
1664
1670
  }
1665
1671
  ),
1666
- R ? /* @__PURE__ */ t(ae, { size: "small", onClick: () => w(o), sx: { mt: 0.5 }, children: "Reset" }) : null
1667
- ] }, o.id) : /* @__PURE__ */ m(V, { direction: "row", spacing: 1, alignItems: "flex-start", children: [
1668
- /* @__PURE__ */ t(
1672
+ E ? /* @__PURE__ */ e(ie, { size: "small", onClick: () => $(i), sx: { mt: 0.5 }, children: "Reset" }) : null
1673
+ ] }, i.id) : /* @__PURE__ */ f(H, { direction: "row", spacing: 1, alignItems: "flex-start", children: [
1674
+ /* @__PURE__ */ e(
1669
1675
  _,
1670
1676
  {
1671
1677
  fullWidth: !0,
1672
- size: g,
1673
- label: o.label,
1674
- value: o.value,
1675
- helperText: o.description,
1676
- disabled: o.disabled,
1677
- onChange: (h) => n?.(o.id, h.target.value)
1678
+ size: w,
1679
+ label: i.label,
1680
+ value: i.value,
1681
+ helperText: i.description,
1682
+ disabled: i.disabled,
1683
+ onChange: (b) => n?.(i.id, b.target.value)
1678
1684
  }
1679
1685
  ),
1680
- R ? /* @__PURE__ */ t(ae, { size: "small", onClick: () => w(o), sx: { mt: 0.5 }, children: "Reset" }) : null
1681
- ] }, o.id);
1686
+ E ? /* @__PURE__ */ e(ie, { size: "small", onClick: () => $(i), sx: { mt: 0.5 }, children: "Reset" }) : null
1687
+ ] }, i.id);
1682
1688
  })
1683
- ] }, v)),
1684
- u ? /* @__PURE__ */ m(d, { sx: { p: 1.25, borderRadius: 1, bgcolor: "action.hover" }, children: [
1685
- /* @__PURE__ */ t(E, { variant: "caption", color: "text.secondary", fontWeight: 850, children: "Current values" }),
1686
- /* @__PURE__ */ t(V, { direction: "row", flexWrap: "wrap", gap: 0.75, sx: { mt: 1 }, children: e.map((v) => /* @__PURE__ */ t(we, { size: "small", label: `${v.label}: ${kt(v)}` }, v.id)) })
1689
+ ] }, g)),
1690
+ c ? /* @__PURE__ */ f(u, { sx: { p: 1.25, borderRadius: 1, bgcolor: "action.hover" }, children: [
1691
+ /* @__PURE__ */ e(Y, { variant: "caption", color: "text.secondary", fontWeight: 850, children: "Current values" }),
1692
+ /* @__PURE__ */ e(H, { direction: "row", flexWrap: "wrap", gap: 0.75, sx: { mt: 1 }, children: t.map((g) => /* @__PURE__ */ e(we, { size: "small", label: `${g.label}: ${Wt(g)}` }, g.id)) })
1687
1693
  ] }) : null
1688
1694
  ] }) });
1689
1695
  }
1690
- function Rr({
1691
- value: e,
1696
+ function Qr({
1697
+ value: t,
1692
1698
  alpha: n = 1,
1693
- swatches: l = ["#2563eb", "#7c3aed", "#db2777", "#dc2626", "#f59e0b", "#059669"],
1699
+ swatches: a = ["#2563eb", "#7c3aed", "#db2777", "#dc2626", "#f59e0b", "#059669"],
1694
1700
  showValue: s = !0,
1695
- onChange: f,
1696
- onAlphaChange: u
1701
+ onChange: h,
1702
+ onAlphaChange: c
1697
1703
  }) {
1698
- const x = Math.round(n * 100), p = `${e}${Math.round(n * 255).toString(16).padStart(2, "0")}`;
1699
- return /* @__PURE__ */ t(Me, { variant: "outlined", sx: { p: 2, borderRadius: 1 }, children: /* @__PURE__ */ m(V, { spacing: 2, children: [
1700
- /* @__PURE__ */ t(
1701
- d,
1704
+ const v = Math.round(n * 100), m = `${t}${Math.round(n * 255).toString(16).padStart(2, "0")}`;
1705
+ return /* @__PURE__ */ e($e, { variant: "outlined", sx: { p: 2, borderRadius: 1 }, children: /* @__PURE__ */ f(H, { spacing: 2, children: [
1706
+ /* @__PURE__ */ e(
1707
+ u,
1702
1708
  {
1703
1709
  sx: {
1704
1710
  height: 96,
@@ -1709,97 +1715,97 @@ function Rr({
1709
1715
  backgroundSize: "18px 18px",
1710
1716
  backgroundPosition: "0 0, 0 9px, 9px -9px, -9px 0"
1711
1717
  },
1712
- children: /* @__PURE__ */ t(d, { sx: { height: "100%", borderRadius: 1, bgcolor: e, opacity: n } })
1718
+ children: /* @__PURE__ */ e(u, { sx: { height: "100%", borderRadius: 1, bgcolor: t, opacity: n } })
1713
1719
  }
1714
1720
  ),
1715
- /* @__PURE__ */ m(V, { direction: { xs: "column", sm: "row" }, spacing: 1.5, children: [
1716
- /* @__PURE__ */ t(
1721
+ /* @__PURE__ */ f(H, { direction: { xs: "column", sm: "row" }, spacing: 1.5, children: [
1722
+ /* @__PURE__ */ e(
1717
1723
  _,
1718
1724
  {
1719
1725
  label: "Color",
1720
1726
  type: "color",
1721
- value: e,
1722
- onChange: (i) => f?.(i.target.value),
1727
+ value: t,
1728
+ onChange: (d) => h?.(d.target.value),
1723
1729
  sx: { width: { xs: "100%", sm: 120 } }
1724
1730
  }
1725
1731
  ),
1726
- /* @__PURE__ */ t(
1732
+ /* @__PURE__ */ e(
1727
1733
  _,
1728
1734
  {
1729
1735
  label: "Hex",
1730
- value: e,
1731
- onChange: (i) => f?.(i.target.value),
1736
+ value: t,
1737
+ onChange: (d) => h?.(d.target.value),
1732
1738
  fullWidth: !0
1733
1739
  }
1734
1740
  )
1735
1741
  ] }),
1736
- /* @__PURE__ */ m(d, { children: [
1737
- /* @__PURE__ */ t(E, { variant: "caption", color: "text.secondary", fontWeight: 800, children: "Alpha" }),
1738
- /* @__PURE__ */ t(
1739
- Ne,
1742
+ /* @__PURE__ */ f(u, { children: [
1743
+ /* @__PURE__ */ e(Y, { variant: "caption", color: "text.secondary", fontWeight: 800, children: "Alpha" }),
1744
+ /* @__PURE__ */ e(
1745
+ Qe,
1740
1746
  {
1741
1747
  min: 0,
1742
1748
  max: 1,
1743
1749
  step: 0.01,
1744
1750
  value: n,
1745
- onChange: (i, y) => u?.(Array.isArray(y) ? y[0] : y),
1751
+ onChange: (d, k) => c?.(Array.isArray(k) ? k[0] : k),
1746
1752
  valueLabelDisplay: "auto",
1747
- valueLabelFormat: (i) => `${Math.round(i * 100)}%`
1753
+ valueLabelFormat: (d) => `${Math.round(d * 100)}%`
1748
1754
  }
1749
1755
  ),
1750
- /* @__PURE__ */ t(
1756
+ /* @__PURE__ */ e(
1751
1757
  _,
1752
1758
  {
1753
1759
  label: "Alpha",
1754
1760
  type: "number",
1755
- value: x,
1756
- onChange: (i) => u?.(Math.min(Math.max(Number(i.target.value), 0), 100) / 100),
1761
+ value: v,
1762
+ onChange: (d) => c?.(Math.min(Math.max(Number(d.target.value), 0), 100) / 100),
1757
1763
  InputProps: {
1758
- endAdornment: /* @__PURE__ */ t(it, { position: "end", children: "%" })
1764
+ endAdornment: /* @__PURE__ */ e(ht, { position: "end", children: "%" })
1759
1765
  },
1760
1766
  fullWidth: !0
1761
1767
  }
1762
1768
  )
1763
1769
  ] }),
1764
- /* @__PURE__ */ t(d, { sx: { display: "flex", gap: 1, flexWrap: "wrap" }, children: l.map((i) => /* @__PURE__ */ t(
1765
- d,
1770
+ /* @__PURE__ */ e(u, { sx: { display: "flex", gap: 1, flexWrap: "wrap" }, children: a.map((d) => /* @__PURE__ */ e(
1771
+ u,
1766
1772
  {
1767
1773
  component: "button",
1768
- "aria-label": i,
1769
- onClick: () => f?.(i),
1774
+ "aria-label": d,
1775
+ onClick: () => h?.(d),
1770
1776
  sx: {
1771
1777
  width: 32,
1772
1778
  height: 32,
1773
1779
  borderRadius: "50%",
1774
1780
  border: 2,
1775
- borderColor: i.toLowerCase() === e.toLowerCase() ? "text.primary" : "divider",
1776
- bgcolor: i,
1781
+ borderColor: d.toLowerCase() === t.toLowerCase() ? "text.primary" : "divider",
1782
+ bgcolor: d,
1777
1783
  cursor: "pointer"
1778
1784
  }
1779
1785
  },
1780
- i
1786
+ d
1781
1787
  )) }),
1782
- s ? /* @__PURE__ */ m(d, { sx: { p: 1.5, borderRadius: 1, bgcolor: "#0f172a", color: "#e5e7eb" }, children: [
1783
- /* @__PURE__ */ t(E, { variant: "caption", color: "#94a3b8", children: "selected color" }),
1784
- /* @__PURE__ */ t(E, { fontFamily: "monospace", children: p })
1788
+ s ? /* @__PURE__ */ f(u, { sx: { p: 1.5, borderRadius: 1, bgcolor: "#0f172a", color: "#e5e7eb" }, children: [
1789
+ /* @__PURE__ */ e(Y, { variant: "caption", color: "#94a3b8", children: "selected color" }),
1790
+ /* @__PURE__ */ e(Y, { fontFamily: "monospace", children: m })
1785
1791
  ] }) : null
1786
1792
  ] }) });
1787
1793
  }
1788
- function Lr({ onFiles: e, sx: n, ...l }) {
1789
- const [s, f] = W(!1);
1790
- function u(x) {
1791
- x && e?.(Array.from(x));
1794
+ function Jr({ onFiles: t, sx: n, ...a }) {
1795
+ const [s, h] = S(!1);
1796
+ function c(v) {
1797
+ v && t?.(Array.from(v));
1792
1798
  }
1793
- return /* @__PURE__ */ m(
1794
- d,
1799
+ return /* @__PURE__ */ f(
1800
+ u,
1795
1801
  {
1796
- ...l,
1797
- onDragOver: (x) => {
1798
- x.preventDefault(), f(!0);
1802
+ ...a,
1803
+ onDragOver: (v) => {
1804
+ v.preventDefault(), h(!0);
1799
1805
  },
1800
- onDragLeave: () => f(!1),
1801
- onDrop: (x) => {
1802
- x.preventDefault(), f(!1), u(x.dataTransfer.files);
1806
+ onDragLeave: () => h(!1),
1807
+ onDrop: (v) => {
1808
+ v.preventDefault(), h(!1), c(v.dataTransfer.files);
1803
1809
  },
1804
1810
  sx: [
1805
1811
  {
@@ -1814,113 +1820,113 @@ function Lr({ onFiles: e, sx: n, ...l }) {
1814
1820
  ...Array.isArray(n) ? n : n ? [n] : []
1815
1821
  ],
1816
1822
  children: [
1817
- /* @__PURE__ */ t(E, { fontWeight: 800, children: "Drop files here" }),
1818
- /* @__PURE__ */ t(E, { variant: "body2", color: "text.secondary", children: "Drag files into this zone" })
1823
+ /* @__PURE__ */ e(Y, { fontWeight: 800, children: "Drop files here" }),
1824
+ /* @__PURE__ */ e(Y, { variant: "body2", color: "text.secondary", children: "Drag files into this zone" })
1819
1825
  ]
1820
1826
  }
1821
1827
  );
1822
1828
  }
1823
- function ve(e, n, l) {
1824
- return Math.min(Math.max(e, n), l);
1829
+ function De(t, n, a) {
1830
+ return Math.min(Math.max(t, n), a);
1825
1831
  }
1826
- function It(e) {
1827
- const n = Math.floor(e / 60), l = Math.floor(e % 60);
1828
- return `${n}:${String(l).padStart(2, "0")}`;
1832
+ function Et(t) {
1833
+ const n = Math.floor(t / 60), a = Math.floor(t % 60);
1834
+ return `${n}:${String(a).padStart(2, "0")}`;
1829
1835
  }
1830
- function ke(e, n) {
1831
- return n > 0 ? ve(e / n * 100, 0, 100) : 0;
1836
+ function Se(t, n) {
1837
+ return n > 0 ? De(t / n * 100, 0, 100) : 0;
1832
1838
  }
1833
- function Mt(e, n) {
1834
- return n.reduce((l, s) => l ? Math.abs(s.time - e) < Math.abs(l.time - e) ? s : l : s, null);
1839
+ function Xt(t, n) {
1840
+ return n.reduce((a, s) => a ? Math.abs(s.time - t) < Math.abs(a.time - t) ? s : a : s, null);
1835
1841
  }
1836
- function Pr({
1837
- duration: e,
1842
+ function en({
1843
+ duration: t,
1838
1844
  value: n,
1839
- defaultValue: l = 0,
1845
+ defaultValue: a = 0,
1840
1846
  markers: s = [],
1841
- thumbnails: f = [],
1842
- disabled: u = !1,
1843
- showTime: x = !0,
1844
- preview: p = !0,
1845
- step: i = 1,
1846
- formatTime: y = It,
1847
- onChange: g,
1848
- sx: w,
1849
- ...v
1847
+ thumbnails: h = [],
1848
+ disabled: c = !1,
1849
+ showTime: v = !0,
1850
+ preview: m = !0,
1851
+ step: d = 1,
1852
+ formatTime: k = Et,
1853
+ onChange: w,
1854
+ sx: $,
1855
+ ...g
1850
1856
  }) {
1851
- const P = oe(null), [C, o] = W(l), [R, h] = W(!1), [M, N] = W(null), X = ve(n ?? C, 0, e), k = M === null ? X : M, D = ke(X, e), $ = ke(k, e), L = Ie(() => [...s].sort((b, z) => b.time - z.time), [s]), j = Mt(k, f);
1852
- function O(b, z) {
1853
- const B = i > 0 ? Math.round(b / i) * i : b, a = ve(B, 0, e);
1854
- n === void 0 && o(a), g?.(a, z);
1857
+ const B = pe(null), [z, i] = S(a), [E, b] = S(!1), [A, V] = S(null), O = De(n ?? z, 0, t), M = A === null ? O : A, R = Se(O, t), I = Se(M, t), W = ze(() => [...s].sort((y, P) => y.time - P.time), [s]), U = Xt(M, h);
1858
+ function G(y, P) {
1859
+ const N = d > 0 ? Math.round(y / d) * d : y, o = De(N, 0, t);
1860
+ n === void 0 && i(o), w?.(o, P);
1855
1861
  }
1856
- function c(b) {
1857
- const z = P.current;
1858
- if (!z)
1859
- return X;
1860
- const B = z.getBoundingClientRect();
1861
- return ve((b - B.left) / B.width, 0, 1) * e;
1862
+ function p(y) {
1863
+ const P = B.current;
1864
+ if (!P)
1865
+ return O;
1866
+ const N = P.getBoundingClientRect();
1867
+ return De((y - N.left) / N.width, 0, 1) * t;
1862
1868
  }
1863
- function S(b) {
1864
- N(c(b));
1869
+ function L(y) {
1870
+ V(p(y));
1865
1871
  }
1866
- return /* @__PURE__ */ m(
1867
- d,
1872
+ return /* @__PURE__ */ f(
1873
+ u,
1868
1874
  {
1869
- ...v,
1875
+ ...g,
1870
1876
  sx: [
1871
1877
  {
1872
1878
  width: "100%",
1873
- color: u ? "text.disabled" : "text.primary",
1879
+ color: c ? "text.disabled" : "text.primary",
1874
1880
  userSelect: "none"
1875
1881
  },
1876
- ...Array.isArray(w) ? w : w ? [w] : []
1882
+ ...Array.isArray($) ? $ : $ ? [$] : []
1877
1883
  ],
1878
1884
  children: [
1879
- x ? /* @__PURE__ */ m(d, { sx: { display: "flex", justifyContent: "space-between", mb: 1 }, children: [
1880
- /* @__PURE__ */ t(E, { variant: "caption", fontWeight: 800, children: y(X) }),
1881
- /* @__PURE__ */ t(E, { variant: "caption", color: "text.secondary", children: y(e) })
1885
+ v ? /* @__PURE__ */ f(u, { sx: { display: "flex", justifyContent: "space-between", mb: 1 }, children: [
1886
+ /* @__PURE__ */ e(Y, { variant: "caption", fontWeight: 800, children: k(O) }),
1887
+ /* @__PURE__ */ e(Y, { variant: "caption", color: "text.secondary", children: k(t) })
1882
1888
  ] }) : null,
1883
- /* @__PURE__ */ m(
1884
- d,
1889
+ /* @__PURE__ */ f(
1890
+ u,
1885
1891
  {
1886
- ref: P,
1892
+ ref: B,
1887
1893
  role: "slider",
1888
- tabIndex: u ? -1 : 0,
1894
+ tabIndex: c ? -1 : 0,
1889
1895
  "aria-valuemin": 0,
1890
- "aria-valuemax": e,
1891
- "aria-valuenow": Math.round(X),
1892
- onPointerMove: (b) => {
1893
- u || (S(b.clientX), R && O(c(b.clientX), "drag"));
1896
+ "aria-valuemax": t,
1897
+ "aria-valuenow": Math.round(O),
1898
+ onPointerMove: (y) => {
1899
+ c || (L(y.clientX), E && G(p(y.clientX), "drag"));
1894
1900
  },
1895
1901
  onPointerLeave: () => {
1896
- R || N(null);
1902
+ E || V(null);
1897
1903
  },
1898
- onPointerDown: (b) => {
1899
- u || (h(!0), b.currentTarget.setPointerCapture(b.pointerId), O(c(b.clientX), "click"));
1904
+ onPointerDown: (y) => {
1905
+ c || (b(!0), y.currentTarget.setPointerCapture(y.pointerId), G(p(y.clientX), "click"));
1900
1906
  },
1901
- onPointerUp: (b) => {
1902
- h(!1), b.currentTarget.releasePointerCapture(b.pointerId);
1907
+ onPointerUp: (y) => {
1908
+ b(!1), y.currentTarget.releasePointerCapture(y.pointerId);
1903
1909
  },
1904
- onPointerCancel: () => h(!1),
1905
- onKeyDown: (b) => {
1906
- u || (b.key === "ArrowLeft" && (O(X - i, "keyboard"), b.preventDefault()), b.key === "ArrowRight" && (O(X + i, "keyboard"), b.preventDefault()), b.key === "Home" && (O(0, "keyboard"), b.preventDefault()), b.key === "End" && (O(e, "keyboard"), b.preventDefault()));
1910
+ onPointerCancel: () => b(!1),
1911
+ onKeyDown: (y) => {
1912
+ c || (y.key === "ArrowLeft" && (G(O - d, "keyboard"), y.preventDefault()), y.key === "ArrowRight" && (G(O + d, "keyboard"), y.preventDefault()), y.key === "Home" && (G(0, "keyboard"), y.preventDefault()), y.key === "End" && (G(t, "keyboard"), y.preventDefault()));
1907
1913
  },
1908
1914
  sx: {
1909
1915
  position: "relative",
1910
1916
  height: 86,
1911
- cursor: u ? "default" : "pointer",
1917
+ cursor: c ? "default" : "pointer",
1912
1918
  outline: "none",
1913
1919
  "&:focus-visible .TimelineScrubber-track": {
1914
1920
  boxShadow: "0 0 0 3px rgba(37,99,235,0.28)"
1915
1921
  }
1916
1922
  },
1917
1923
  children: [
1918
- p && M !== null ? /* @__PURE__ */ m(
1919
- d,
1924
+ m && A !== null ? /* @__PURE__ */ f(
1925
+ u,
1920
1926
  {
1921
1927
  sx: {
1922
1928
  position: "absolute",
1923
- left: `${$}%`,
1929
+ left: `${I}%`,
1924
1930
  top: 0,
1925
1931
  transform: "translateX(-50%)",
1926
1932
  width: 116,
@@ -1934,13 +1940,13 @@ function Pr({
1934
1940
  zIndex: 2
1935
1941
  },
1936
1942
  children: [
1937
- /* @__PURE__ */ t(d, { sx: { height: 56, borderRadius: 0.75, overflow: "hidden", bgcolor: "#e5e7eb" }, children: j?.thumbnail ?? /* @__PURE__ */ t(d, { sx: { height: "100%", display: "grid", placeItems: "center", bgcolor: "#0f172a", color: "#fff" }, children: /* @__PURE__ */ t(E, { variant: "caption", fontWeight: 900, children: y(k) }) }) }),
1938
- /* @__PURE__ */ t(E, { variant: "caption", fontWeight: 800, sx: { display: "block", mt: 0.5, textAlign: "center" }, children: y(k) })
1943
+ /* @__PURE__ */ e(u, { sx: { height: 56, borderRadius: 0.75, overflow: "hidden", bgcolor: "#e5e7eb" }, children: U?.thumbnail ?? /* @__PURE__ */ e(u, { sx: { height: "100%", display: "grid", placeItems: "center", bgcolor: "#0f172a", color: "#fff" }, children: /* @__PURE__ */ e(Y, { variant: "caption", fontWeight: 900, children: k(M) }) }) }),
1944
+ /* @__PURE__ */ e(Y, { variant: "caption", fontWeight: 800, sx: { display: "block", mt: 0.5, textAlign: "center" }, children: k(M) })
1939
1945
  ]
1940
1946
  }
1941
1947
  ) : null,
1942
- /* @__PURE__ */ t(
1943
- d,
1948
+ /* @__PURE__ */ e(
1949
+ u,
1944
1950
  {
1945
1951
  className: "TimelineScrubber-track",
1946
1952
  sx: {
@@ -1954,11 +1960,11 @@ function Pr({
1954
1960
  overflow: "hidden",
1955
1961
  transition: "box-shadow 120ms ease"
1956
1962
  },
1957
- children: /* @__PURE__ */ t(
1958
- d,
1963
+ children: /* @__PURE__ */ e(
1964
+ u,
1959
1965
  {
1960
1966
  sx: {
1961
- width: `${D}%`,
1967
+ width: `${R}%`,
1962
1968
  height: "100%",
1963
1969
  borderRadius: 999,
1964
1970
  background: "linear-gradient(90deg, #2563eb, #06b6d4)"
@@ -1967,37 +1973,37 @@ function Pr({
1967
1973
  )
1968
1974
  }
1969
1975
  ),
1970
- L.map((b) => {
1971
- const z = ke(b.time, e);
1972
- return /* @__PURE__ */ t(ie, { title: b.label ?? y(b.time), arrow: !0, children: /* @__PURE__ */ t(
1973
- d,
1976
+ W.map((y) => {
1977
+ const P = Se(y.time, t);
1978
+ return /* @__PURE__ */ e(ce, { title: y.label ?? k(y.time), arrow: !0, children: /* @__PURE__ */ e(
1979
+ u,
1974
1980
  {
1975
- onPointerDown: (B) => {
1976
- B.stopPropagation(), O(b.time, "marker");
1981
+ onPointerDown: (N) => {
1982
+ N.stopPropagation(), G(y.time, "marker");
1977
1983
  },
1978
1984
  sx: {
1979
1985
  position: "absolute",
1980
- left: `${z}%`,
1986
+ left: `${P}%`,
1981
1987
  bottom: 11,
1982
1988
  width: 12,
1983
1989
  height: 26,
1984
1990
  borderRadius: 999,
1985
1991
  transform: "translateX(-50%)",
1986
- bgcolor: b.color ?? "#f59e0b",
1992
+ bgcolor: y.color ?? "#f59e0b",
1987
1993
  border: "2px solid",
1988
1994
  borderColor: "background.paper",
1989
1995
  boxShadow: "0 8px 18px rgba(15,23,42,0.2)",
1990
1996
  zIndex: 1
1991
1997
  }
1992
1998
  }
1993
- ) }, b.id);
1999
+ ) }, y.id);
1994
2000
  }),
1995
- /* @__PURE__ */ t(
1996
- d,
2001
+ /* @__PURE__ */ e(
2002
+ u,
1997
2003
  {
1998
2004
  sx: {
1999
2005
  position: "absolute",
2000
- left: `${D}%`,
2006
+ left: `${R}%`,
2001
2007
  bottom: 5,
2002
2008
  width: 28,
2003
2009
  height: 28,
@@ -2006,7 +2012,7 @@ function Pr({
2006
2012
  bgcolor: "background.paper",
2007
2013
  border: 3,
2008
2014
  borderColor: "#2563eb",
2009
- boxShadow: R ? "0 12px 30px rgba(37,99,235,0.36)" : "0 8px 20px rgba(15,23,42,0.2)"
2015
+ boxShadow: E ? "0 12px 30px rgba(37,99,235,0.36)" : "0 8px 20px rgba(15,23,42,0.2)"
2010
2016
  }
2011
2017
  }
2012
2018
  )
@@ -2017,83 +2023,83 @@ function Pr({
2017
2023
  }
2018
2024
  );
2019
2025
  }
2020
- function Xe(e, n, l) {
2021
- return Math.min(Math.max(e, n), l);
2026
+ function He(t, n, a) {
2027
+ return Math.min(Math.max(t, n), a);
2022
2028
  }
2023
- function Tr({
2024
- items: e = [],
2029
+ function tn({
2030
+ items: t = [],
2025
2031
  defaultViewport: n = { x: 0, y: 0, zoom: 1 },
2026
- viewport: l,
2032
+ viewport: a,
2027
2033
  minZoom: s = 0.3,
2028
- maxZoom: f = 2.5,
2029
- showGrid: u = !0,
2030
- showMinimap: x = !0,
2031
- selectedItemId: p,
2032
- renderItem: i,
2033
- onViewportChange: y,
2034
- onItemMove: g,
2035
- onItemSelect: w,
2036
- sx: v,
2037
- ...P
2034
+ maxZoom: h = 2.5,
2035
+ showGrid: c = !0,
2036
+ showMinimap: v = !0,
2037
+ selectedItemId: m,
2038
+ renderItem: d,
2039
+ onViewportChange: k,
2040
+ onItemMove: w,
2041
+ onItemSelect: $,
2042
+ sx: g,
2043
+ ...B
2038
2044
  }) {
2039
- const C = oe(null), [o, R] = W(n), [h, M] = W(
2040
- Object.fromEntries(e.map((c) => [c.id, { x: c.x, y: c.y }]))
2041
- ), [N, X] = W(p ?? null), k = l ?? o, D = p ?? N, $ = Ie(() => {
2042
- const c = e.map((a) => ({
2043
- x: h[a.id]?.x ?? a.x,
2044
- y: h[a.id]?.y ?? a.y,
2045
- width: a.width ?? 140,
2046
- height: a.height ?? 80
2045
+ const z = pe(null), [i, E] = S(n), [b, A] = S(
2046
+ Object.fromEntries(t.map((p) => [p.id, { x: p.x, y: p.y }]))
2047
+ ), [V, O] = S(m ?? null), M = a ?? i, R = m ?? V, I = ze(() => {
2048
+ const p = t.map((o) => ({
2049
+ x: b[o.id]?.x ?? o.x,
2050
+ y: b[o.id]?.y ?? o.y,
2051
+ width: o.width ?? 140,
2052
+ height: o.height ?? 80
2047
2053
  }));
2048
- if (!c.length)
2054
+ if (!p.length)
2049
2055
  return { minX: -200, minY: -120, width: 400, height: 240 };
2050
- const S = Math.min(...c.map((a) => a.x)) - 80, b = Math.min(...c.map((a) => a.y)) - 80, z = Math.max(...c.map((a) => a.x + a.width)) + 80, B = Math.max(...c.map((a) => a.y + a.height)) + 80;
2051
- return { minX: S, minY: b, width: z - S, height: B - b };
2052
- }, [h, e]);
2053
- function L(c) {
2054
- const S = {
2055
- ...c,
2056
- zoom: Xe(c.zoom, s, f)
2056
+ const L = Math.min(...p.map((o) => o.x)) - 80, y = Math.min(...p.map((o) => o.y)) - 80, P = Math.max(...p.map((o) => o.x + o.width)) + 80, N = Math.max(...p.map((o) => o.y + o.height)) + 80;
2057
+ return { minX: L, minY: y, width: P - L, height: N - y };
2058
+ }, [b, t]);
2059
+ function W(p) {
2060
+ const L = {
2061
+ ...p,
2062
+ zoom: He(p.zoom, s, h)
2057
2063
  };
2058
- l === void 0 && R(S), y?.(S);
2064
+ a === void 0 && E(L), k?.(L);
2059
2065
  }
2060
- function j(c, S) {
2061
- const b = C.current?.getBoundingClientRect();
2066
+ function U(p, L) {
2067
+ const y = z.current?.getBoundingClientRect();
2062
2068
  return {
2063
- x: (c - (b?.left ?? 0) - k.x) / k.zoom,
2064
- y: (S - (b?.top ?? 0) - k.y) / k.zoom
2069
+ x: (p - (y?.left ?? 0) - M.x) / M.zoom,
2070
+ y: (L - (y?.top ?? 0) - M.y) / M.zoom
2065
2071
  };
2066
2072
  }
2067
- function O(c) {
2068
- X(c?.id ?? null), w?.(c);
2073
+ function G(p) {
2074
+ O(p?.id ?? null), $?.(p);
2069
2075
  }
2070
- return /* @__PURE__ */ m(
2071
- d,
2076
+ return /* @__PURE__ */ f(
2077
+ u,
2072
2078
  {
2073
- ...P,
2074
- ref: C,
2075
- onWheel: (c) => {
2076
- c.preventDefault();
2077
- const S = Xe(k.zoom * (c.deltaY > 0 ? 0.92 : 1.08), s, f), b = j(c.clientX, c.clientY), z = C.current?.getBoundingClientRect(), B = c.clientX - (z?.left ?? 0) - b.x * S, a = c.clientY - (z?.top ?? 0) - b.y * S;
2078
- L({ x: B, y: a, zoom: S });
2079
+ ...B,
2080
+ ref: z,
2081
+ onWheel: (p) => {
2082
+ p.preventDefault();
2083
+ const L = He(M.zoom * (p.deltaY > 0 ? 0.92 : 1.08), s, h), y = U(p.clientX, p.clientY), P = z.current?.getBoundingClientRect(), N = p.clientX - (P?.left ?? 0) - y.x * L, o = p.clientY - (P?.top ?? 0) - y.y * L;
2084
+ W({ x: N, y: o, zoom: L });
2079
2085
  },
2080
- onPointerDown: (c) => {
2081
- if (c.target !== c.currentTarget)
2086
+ onPointerDown: (p) => {
2087
+ if (p.target !== p.currentTarget)
2082
2088
  return;
2083
- O(null);
2084
- const S = c.clientX, b = c.clientY, z = k;
2085
- c.currentTarget.setPointerCapture(c.pointerId);
2086
- function B(T) {
2087
- L({
2088
- ...z,
2089
- x: z.x + T.clientX - S,
2090
- y: z.y + T.clientY - b
2089
+ G(null);
2090
+ const L = p.clientX, y = p.clientY, P = M;
2091
+ p.currentTarget.setPointerCapture(p.pointerId);
2092
+ function N(X) {
2093
+ W({
2094
+ ...P,
2095
+ x: P.x + X.clientX - L,
2096
+ y: P.y + X.clientY - y
2091
2097
  });
2092
2098
  }
2093
- function a() {
2094
- window.removeEventListener("pointermove", B), window.removeEventListener("pointerup", a);
2099
+ function o() {
2100
+ window.removeEventListener("pointermove", N), window.removeEventListener("pointerup", o);
2095
2101
  }
2096
- window.addEventListener("pointermove", B), window.addEventListener("pointerup", a);
2102
+ window.addEventListener("pointermove", N), window.addEventListener("pointerup", o);
2097
2103
  },
2098
2104
  sx: [
2099
2105
  {
@@ -2104,81 +2110,81 @@ function Tr({
2104
2110
  cursor: "grab",
2105
2111
  touchAction: "none"
2106
2112
  },
2107
- ...Array.isArray(v) ? v : v ? [v] : []
2113
+ ...Array.isArray(g) ? g : g ? [g] : []
2108
2114
  ],
2109
2115
  children: [
2110
- /* @__PURE__ */ t(
2111
- d,
2116
+ /* @__PURE__ */ e(
2117
+ u,
2112
2118
  {
2113
2119
  sx: {
2114
2120
  position: "absolute",
2115
2121
  inset: 0,
2116
2122
  pointerEvents: "none",
2117
- backgroundImage: u ? "linear-gradient(rgba(148,163,184,0.25) 1px, transparent 1px), linear-gradient(90deg, rgba(148,163,184,0.25) 1px, transparent 1px)" : void 0,
2118
- backgroundSize: `${32 * k.zoom}px ${32 * k.zoom}px`,
2119
- backgroundPosition: `${k.x}px ${k.y}px`
2123
+ backgroundImage: c ? "linear-gradient(rgba(148,163,184,0.25) 1px, transparent 1px), linear-gradient(90deg, rgba(148,163,184,0.25) 1px, transparent 1px)" : void 0,
2124
+ backgroundSize: `${32 * M.zoom}px ${32 * M.zoom}px`,
2125
+ backgroundPosition: `${M.x}px ${M.y}px`
2120
2126
  }
2121
2127
  }
2122
2128
  ),
2123
- /* @__PURE__ */ t(
2124
- d,
2129
+ /* @__PURE__ */ e(
2130
+ u,
2125
2131
  {
2126
2132
  sx: {
2127
2133
  position: "absolute",
2128
- left: k.x,
2129
- top: k.y,
2130
- transform: `scale(${k.zoom})`,
2134
+ left: M.x,
2135
+ top: M.y,
2136
+ transform: `scale(${M.zoom})`,
2131
2137
  transformOrigin: "0 0"
2132
2138
  },
2133
- children: e.map((c) => {
2134
- const S = h[c.id] ?? { x: c.x, y: c.y }, b = c.id === D;
2135
- return /* @__PURE__ */ t(
2136
- d,
2139
+ children: t.map((p) => {
2140
+ const L = b[p.id] ?? { x: p.x, y: p.y }, y = p.id === R;
2141
+ return /* @__PURE__ */ e(
2142
+ u,
2137
2143
  {
2138
- onPointerDown: (z) => {
2139
- z.stopPropagation(), O(c);
2140
- const B = h[c.id] ?? { x: c.x, y: c.y }, a = j(z.clientX, z.clientY);
2141
- z.currentTarget.setPointerCapture(z.pointerId);
2142
- function T(le) {
2143
- const se = j(le.clientX, le.clientY), q = {
2144
- x: B.x + se.x - a.x,
2145
- y: B.y + se.y - a.y
2144
+ onPointerDown: (P) => {
2145
+ P.stopPropagation(), G(p);
2146
+ const N = b[p.id] ?? { x: p.x, y: p.y }, o = U(P.clientX, P.clientY);
2147
+ P.currentTarget.setPointerCapture(P.pointerId);
2148
+ function X(he) {
2149
+ const te = U(he.clientX, he.clientY), q = {
2150
+ x: N.x + te.x - o.x,
2151
+ y: N.y + te.y - o.y
2146
2152
  };
2147
- M((ee) => ({
2148
- ...ee,
2149
- [c.id]: q
2150
- })), g?.(c.id, q);
2153
+ A((ae) => ({
2154
+ ...ae,
2155
+ [p.id]: q
2156
+ })), w?.(p.id, q);
2151
2157
  }
2152
- function Q() {
2153
- window.removeEventListener("pointermove", T), window.removeEventListener("pointerup", Q);
2158
+ function ee() {
2159
+ window.removeEventListener("pointermove", X), window.removeEventListener("pointerup", ee);
2154
2160
  }
2155
- window.addEventListener("pointermove", T), window.addEventListener("pointerup", Q);
2161
+ window.addEventListener("pointermove", X), window.addEventListener("pointerup", ee);
2156
2162
  },
2157
2163
  sx: {
2158
2164
  position: "absolute",
2159
- left: S.x,
2160
- top: S.y,
2161
- width: c.width ?? 140,
2162
- height: c.height ?? 80,
2165
+ left: L.x,
2166
+ top: L.y,
2167
+ width: p.width ?? 140,
2168
+ height: p.height ?? 80,
2163
2169
  display: "grid",
2164
2170
  placeItems: "center",
2165
- border: b ? 2 : 1,
2166
- borderColor: b ? "primary.main" : "divider",
2171
+ border: y ? 2 : 1,
2172
+ borderColor: y ? "primary.main" : "divider",
2167
2173
  borderRadius: 1,
2168
- bgcolor: c.color ?? "background.paper",
2169
- boxShadow: b ? "0 18px 40px rgba(37,99,235,0.24)" : "0 12px 28px rgba(15,23,42,0.13)",
2174
+ bgcolor: p.color ?? "background.paper",
2175
+ boxShadow: y ? "0 18px 40px rgba(37,99,235,0.24)" : "0 12px 28px rgba(15,23,42,0.13)",
2170
2176
  cursor: "grab",
2171
2177
  userSelect: "none"
2172
2178
  },
2173
- children: i ? i(c, b) : /* @__PURE__ */ t(E, { fontWeight: 900, children: c.label ?? c.id })
2179
+ children: d ? d(p, y) : /* @__PURE__ */ e(Y, { fontWeight: 900, children: p.label ?? p.id })
2174
2180
  },
2175
- c.id
2181
+ p.id
2176
2182
  );
2177
2183
  })
2178
2184
  }
2179
2185
  ),
2180
- /* @__PURE__ */ m(
2181
- d,
2186
+ /* @__PURE__ */ f(
2187
+ u,
2182
2188
  {
2183
2189
  sx: {
2184
2190
  position: "absolute",
@@ -2197,13 +2203,13 @@ function Tr({
2197
2203
  fontWeight: 800
2198
2204
  },
2199
2205
  children: [
2200
- Math.round(k.zoom * 100),
2206
+ Math.round(M.zoom * 100),
2201
2207
  "%"
2202
2208
  ]
2203
2209
  }
2204
2210
  ),
2205
- x ? /* @__PURE__ */ t(
2206
- d,
2211
+ v ? /* @__PURE__ */ e(
2212
+ u,
2207
2213
  {
2208
2214
  sx: {
2209
2215
  position: "absolute",
@@ -2217,24 +2223,24 @@ function Tr({
2217
2223
  bgcolor: "rgba(255,255,255,0.9)",
2218
2224
  overflow: "hidden"
2219
2225
  },
2220
- children: e.map((c) => {
2221
- const S = h[c.id] ?? { x: c.x, y: c.y }, b = (S.x - $.minX) / $.width * 100, z = (S.y - $.minY) / $.height * 100, B = (c.width ?? 140) / $.width * 100, a = (c.height ?? 80) / $.height * 100;
2222
- return /* @__PURE__ */ t(
2223
- d,
2226
+ children: t.map((p) => {
2227
+ const L = b[p.id] ?? { x: p.x, y: p.y }, y = (L.x - I.minX) / I.width * 100, P = (L.y - I.minY) / I.height * 100, N = (p.width ?? 140) / I.width * 100, o = (p.height ?? 80) / I.height * 100;
2228
+ return /* @__PURE__ */ e(
2229
+ u,
2224
2230
  {
2225
2231
  sx: {
2226
2232
  position: "absolute",
2227
- left: `${b}%`,
2228
- top: `${z}%`,
2229
- width: `${B}%`,
2230
- height: `${a}%`,
2233
+ left: `${y}%`,
2234
+ top: `${P}%`,
2235
+ width: `${N}%`,
2236
+ height: `${o}%`,
2231
2237
  minWidth: 6,
2232
2238
  minHeight: 4,
2233
2239
  borderRadius: 0.5,
2234
- bgcolor: c.id === D ? "primary.main" : c.color ?? "#94a3b8"
2240
+ bgcolor: p.id === R ? "primary.main" : p.color ?? "#94a3b8"
2235
2241
  }
2236
2242
  },
2237
- c.id
2243
+ p.id
2238
2244
  );
2239
2245
  })
2240
2246
  }
@@ -2243,79 +2249,79 @@ function Tr({
2243
2249
  }
2244
2250
  );
2245
2251
  }
2246
- function Wr({
2247
- children: e,
2252
+ function rn({
2253
+ children: t,
2248
2254
  title: n,
2249
- content: l,
2255
+ content: a,
2250
2256
  media: s,
2251
- actions: f = [],
2252
- copyText: u,
2253
- placement: x = "top",
2254
- pinMode: p = !0,
2255
- defaultPinned: i = !1,
2256
- openDelay: y = 120,
2257
- sx: g,
2258
- ...w
2257
+ actions: h = [],
2258
+ copyText: c,
2259
+ placement: v = "top",
2260
+ pinMode: m = !0,
2261
+ defaultPinned: d = !1,
2262
+ openDelay: k = 120,
2263
+ sx: w,
2264
+ ...$
2259
2265
  }) {
2260
- const v = oe(null), P = oe(null), C = oe(null), [o, R] = W(i), [h, M] = W(i), [N, X] = W(!1);
2261
- function k() {
2262
- C.current && window.clearTimeout(C.current), P.current && window.clearTimeout(P.current);
2266
+ const g = pe(null), B = pe(null), z = pe(null), [i, E] = S(d), [b, A] = S(d), [V, O] = S(!1);
2267
+ function M() {
2268
+ z.current && window.clearTimeout(z.current), B.current && window.clearTimeout(B.current);
2263
2269
  }
2264
- function D() {
2265
- k(), !o && (C.current = window.setTimeout(() => R(!0), y));
2270
+ function R() {
2271
+ M(), !i && (z.current = window.setTimeout(() => E(!0), k));
2266
2272
  }
2267
- function $() {
2268
- k(), R(!0);
2273
+ function I() {
2274
+ M(), E(!0);
2269
2275
  }
2270
- function L() {
2271
- k(), h || (P.current = window.setTimeout(() => R(!1), 100));
2276
+ function W() {
2277
+ M(), b || (B.current = window.setTimeout(() => E(!1), 100));
2272
2278
  }
2273
- function j() {
2274
- const c = !h;
2275
- M(c), R(c || o);
2279
+ function U() {
2280
+ const p = !b;
2281
+ A(p), E(p || i);
2276
2282
  }
2277
- async function O() {
2278
- u && (await navigator.clipboard?.writeText(u), X(!0), window.setTimeout(() => X(!1), 1100));
2283
+ async function G() {
2284
+ c && (await navigator.clipboard?.writeText(c), O(!0), window.setTimeout(() => O(!1), 1100));
2279
2285
  }
2280
- return /* @__PURE__ */ m(Ye, { children: [
2281
- /* @__PURE__ */ t(
2282
- d,
2286
+ return /* @__PURE__ */ f(qe, { children: [
2287
+ /* @__PURE__ */ e(
2288
+ u,
2283
2289
  {
2284
2290
  component: "span",
2285
- ref: v,
2286
- onMouseEnter: D,
2287
- onMouseLeave: L,
2288
- onFocus: D,
2289
- onBlur: L,
2291
+ ref: g,
2292
+ onMouseEnter: R,
2293
+ onMouseLeave: W,
2294
+ onFocus: R,
2295
+ onBlur: W,
2290
2296
  onClick: () => {
2291
- p && (R(!0), M(!0));
2297
+ m && (E(!0), A(!0));
2292
2298
  },
2293
2299
  sx: { display: "inline-flex" },
2294
- children: e
2300
+ children: t
2295
2301
  }
2296
2302
  ),
2297
- /* @__PURE__ */ t(
2298
- dt,
2303
+ /* @__PURE__ */ e(
2304
+ xt,
2299
2305
  {
2300
- open: o,
2301
- anchorEl: v.current,
2302
- placement: x,
2306
+ open: i,
2307
+ anchorEl: g.current,
2308
+ placement: v,
2303
2309
  modifiers: [
2304
2310
  { name: "offset", options: { offset: [0, 10] } },
2305
2311
  { name: "preventOverflow", options: { padding: 12 } }
2306
2312
  ],
2307
2313
  sx: { zIndex: 1500 },
2308
- children: /* @__PURE__ */ t(
2309
- ct,
2314
+ children: /* @__PURE__ */ e(
2315
+ mt,
2310
2316
  {
2311
2317
  onClickAway: () => {
2312
- h && (R(!1), M(!1));
2318
+ b && (E(!1), A(!1));
2313
2319
  },
2314
- children: /* @__PURE__ */ t(
2315
- d,
2320
+ children: /* @__PURE__ */ e(
2321
+ u,
2316
2322
  {
2317
- onMouseEnter: $,
2318
- onMouseLeave: L,
2323
+ onMouseEnter: I,
2324
+ onMouseLeave: W,
2319
2325
  sx: {
2320
2326
  width: 320,
2321
2327
  maxWidth: "calc(100vw - 24px)",
@@ -2324,18 +2330,18 @@ function Wr({
2324
2330
  boxShadow: "0 24px 64px rgba(15,23,42,0.28)",
2325
2331
  bgcolor: "background.paper"
2326
2332
  },
2327
- children: /* @__PURE__ */ t(d, { ...w, sx: [{ p: 1.25 }, ...Array.isArray(g) ? g : g ? [g] : []], children: /* @__PURE__ */ m(V, { spacing: 1.25, children: [
2328
- s ? /* @__PURE__ */ t(d, { sx: { borderRadius: 1, overflow: "hidden", bgcolor: "#e5e7eb" }, children: s }) : null,
2329
- /* @__PURE__ */ m(V, { direction: "row", spacing: 1, alignItems: "flex-start", children: [
2330
- /* @__PURE__ */ m(d, { sx: { minWidth: 0, flex: 1 }, children: [
2331
- n ? /* @__PURE__ */ t(E, { fontWeight: 900, children: n }) : null,
2332
- l ? /* @__PURE__ */ t(E, { variant: "body2", color: "text.secondary", sx: { mt: n ? 0.25 : 0 }, children: l }) : null
2333
+ children: /* @__PURE__ */ e(u, { ...$, sx: [{ p: 1.25 }, ...Array.isArray(w) ? w : w ? [w] : []], children: /* @__PURE__ */ f(H, { spacing: 1.25, children: [
2334
+ s ? /* @__PURE__ */ e(u, { sx: { borderRadius: 1, overflow: "hidden", bgcolor: "#e5e7eb" }, children: s }) : null,
2335
+ /* @__PURE__ */ f(H, { direction: "row", spacing: 1, alignItems: "flex-start", children: [
2336
+ /* @__PURE__ */ f(u, { sx: { minWidth: 0, flex: 1 }, children: [
2337
+ n ? /* @__PURE__ */ e(Y, { fontWeight: 900, children: n }) : null,
2338
+ a ? /* @__PURE__ */ e(Y, { variant: "body2", color: "text.secondary", sx: { mt: n ? 0.25 : 0 }, children: a }) : null
2333
2339
  ] }),
2334
- p ? /* @__PURE__ */ t(ie, { title: h ? "Unpin" : "Pin", children: /* @__PURE__ */ t(ue, { size: "small", onClick: j, children: h ? /* @__PURE__ */ t(lt, { fontSize: "small" }) : /* @__PURE__ */ t(st, { fontSize: "small" }) }) }) : null
2340
+ m ? /* @__PURE__ */ e(ce, { title: b ? "Unpin" : "Pin", children: /* @__PURE__ */ e(ue, { size: "small", onClick: U, children: b ? /* @__PURE__ */ e(gt, { fontSize: "small" }) : /* @__PURE__ */ e(bt, { fontSize: "small" }) }) }) : null
2335
2341
  ] }),
2336
- u || f.length ? /* @__PURE__ */ m(V, { direction: "row", spacing: 1, flexWrap: "wrap", children: [
2337
- u ? /* @__PURE__ */ t(ae, { size: "small", variant: "outlined", startIcon: /* @__PURE__ */ t(at, {}), onClick: O, children: N ? "Copied" : "Copy" }) : null,
2338
- f.map((c) => /* @__PURE__ */ t(ae, { size: "small", variant: "contained", startIcon: c.icon, onClick: c.onClick, children: c.label }, c.id))
2342
+ c || h.length ? /* @__PURE__ */ f(H, { direction: "row", spacing: 1, flexWrap: "wrap", children: [
2343
+ c ? /* @__PURE__ */ e(ie, { size: "small", variant: "outlined", startIcon: /* @__PURE__ */ e(ft, {}), onClick: G, children: V ? "Copied" : "Copy" }) : null,
2344
+ h.map((p) => /* @__PURE__ */ e(ie, { size: "small", variant: "contained", startIcon: p.icon, onClick: p.onClick, children: p.label }, p.id))
2339
2345
  ] }) : null
2340
2346
  ] }) })
2341
2347
  }
@@ -2346,79 +2352,79 @@ function Wr({
2346
2352
  )
2347
2353
  ] });
2348
2354
  }
2349
- const fe = {
2355
+ const Ce = {
2350
2356
  neutral: "#64748b",
2351
2357
  good: "#059669",
2352
2358
  warning: "#d97706",
2353
2359
  danger: "#dc2626"
2354
2360
  };
2355
- function zt(e, n, l) {
2356
- return Math.min(Math.max(e, n), l);
2361
+ function Ft(t, n, a) {
2362
+ return Math.min(Math.max(t, n), a);
2357
2363
  }
2358
- function St(e) {
2359
- return e.color ?? fe[e.status ?? "neutral"];
2364
+ function Yt(t) {
2365
+ return t.color ?? Ce[t.status ?? "neutral"];
2360
2366
  }
2361
- function At(e) {
2362
- return typeof e.delta == "number" ? e.delta : typeof e.value == "number" && typeof e.previousValue == "number" && e.previousValue !== 0 ? (e.value - e.previousValue) / Math.abs(e.previousValue) * 100 : null;
2367
+ function Nt(t) {
2368
+ return typeof t.delta == "number" ? t.delta : typeof t.value == "number" && typeof t.previousValue == "number" && t.previousValue !== 0 ? (t.value - t.previousValue) / Math.abs(t.previousValue) * 100 : null;
2363
2369
  }
2364
- function Rt(e) {
2365
- return e.formatter ? e.formatter(e.value) : typeof e.value == "number" ? new Intl.NumberFormat("en", { maximumFractionDigits: 1 }).format(e.value) : e.value;
2370
+ function Ot(t) {
2371
+ return t.formatter ? t.formatter(t.value) : typeof t.value == "number" ? new Intl.NumberFormat("en", { maximumFractionDigits: 1 }).format(t.value) : t.value;
2366
2372
  }
2367
- function Lt(e, n, l) {
2368
- if (e.length < 2)
2373
+ function Ht(t, n, a) {
2374
+ if (t.length < 2)
2369
2375
  return "";
2370
- const s = Math.min(...e), u = Math.max(...e) - s || 1;
2371
- return e.map((x, p) => {
2372
- const i = p / (e.length - 1) * n, y = l - (x - s) / u * l;
2373
- return `${p === 0 ? "M" : "L"} ${i.toFixed(2)} ${y.toFixed(2)}`;
2376
+ const s = Math.min(...t), c = Math.max(...t) - s || 1;
2377
+ return t.map((v, m) => {
2378
+ const d = m / (t.length - 1) * n, k = a - (v - s) / c * a;
2379
+ return `${m === 0 ? "M" : "L"} ${d.toFixed(2)} ${k.toFixed(2)}`;
2374
2380
  }).join(" ");
2375
2381
  }
2376
- function Pt({ values: e, color: n }) {
2377
- const f = Lt(e, 180, 54), u = f ? `${f} L 180 54 L 0 54 Z` : "";
2378
- return /* @__PURE__ */ m(d, { component: "svg", viewBox: "0 0 180 54", sx: { display: "block", width: "100%", height: 54 }, children: [
2379
- /* @__PURE__ */ t(d, { component: "path", d: u, sx: { fill: Y(n, 0.14) } }),
2380
- /* @__PURE__ */ t(d, { component: "path", d: f, sx: { fill: "none", stroke: n, strokeWidth: 4, strokeLinecap: "round", strokeLinejoin: "round" } }),
2381
- e.length ? /* @__PURE__ */ t(
2382
- d,
2382
+ function jt({ values: t, color: n }) {
2383
+ const h = Ht(t, 180, 54), c = h ? `${h} L 180 54 L 0 54 Z` : "";
2384
+ return /* @__PURE__ */ f(u, { component: "svg", viewBox: "0 0 180 54", sx: { display: "block", width: "100%", height: 54 }, children: [
2385
+ /* @__PURE__ */ e(u, { component: "path", d: c, sx: { fill: j(n, 0.14) } }),
2386
+ /* @__PURE__ */ e(u, { component: "path", d: h, sx: { fill: "none", stroke: n, strokeWidth: 4, strokeLinecap: "round", strokeLinejoin: "round" } }),
2387
+ t.length ? /* @__PURE__ */ e(
2388
+ u,
2383
2389
  {
2384
2390
  component: "circle",
2385
2391
  cx: 180,
2386
- cy: 54 - (e[e.length - 1] - Math.min(...e)) / (Math.max(...e) - Math.min(...e) || 1) * 54,
2392
+ cy: 54 - (t[t.length - 1] - Math.min(...t)) / (Math.max(...t) - Math.min(...t) || 1) * 54,
2387
2393
  r: 4,
2388
2394
  sx: { fill: n }
2389
2395
  }
2390
2396
  ) : null
2391
2397
  ] });
2392
2398
  }
2393
- function Dr({
2394
- metrics: e,
2399
+ function nn({
2400
+ metrics: t,
2395
2401
  title: n,
2396
- subtitle: l,
2402
+ subtitle: a,
2397
2403
  columns: s = 3,
2398
- density: f = "comfortable",
2399
- showSparklines: u = !0,
2400
- showProgress: x = !0,
2401
- sx: p,
2402
- ...i
2404
+ density: h = "comfortable",
2405
+ showSparklines: c = !0,
2406
+ showProgress: v = !0,
2407
+ sx: m,
2408
+ ...d
2403
2409
  }) {
2404
- const y = f === "compact";
2405
- return /* @__PURE__ */ m(
2406
- d,
2410
+ const k = h === "compact";
2411
+ return /* @__PURE__ */ f(
2412
+ u,
2407
2413
  {
2408
- ...i,
2414
+ ...d,
2409
2415
  sx: [
2410
2416
  {
2411
2417
  width: "100%"
2412
2418
  },
2413
- ...Array.isArray(p) ? p : p ? [p] : []
2419
+ ...Array.isArray(m) ? m : m ? [m] : []
2414
2420
  ],
2415
2421
  children: [
2416
- n || l ? /* @__PURE__ */ m(d, { sx: { mb: 2 }, children: [
2417
- n ? /* @__PURE__ */ t(E, { variant: "h6", fontWeight: 900, children: n }) : null,
2418
- l ? /* @__PURE__ */ t(E, { variant: "body2", color: "text.secondary", children: l }) : null
2422
+ n || a ? /* @__PURE__ */ f(u, { sx: { mb: 2 }, children: [
2423
+ n ? /* @__PURE__ */ e(Y, { variant: "h6", fontWeight: 900, children: n }) : null,
2424
+ a ? /* @__PURE__ */ e(Y, { variant: "body2", color: "text.secondary", children: a }) : null
2419
2425
  ] }) : null,
2420
- /* @__PURE__ */ t(
2421
- d,
2426
+ /* @__PURE__ */ e(
2427
+ u,
2422
2428
  {
2423
2429
  sx: {
2424
2430
  display: "grid",
@@ -2427,60 +2433,60 @@ function Dr({
2427
2433
  sm: "repeat(2, minmax(0, 1fr))",
2428
2434
  lg: `repeat(${s}, minmax(0, 1fr))`
2429
2435
  },
2430
- gap: y ? 1.25 : 2
2436
+ gap: k ? 1.25 : 2
2431
2437
  },
2432
- children: e.map((g) => {
2433
- const w = St(g), v = At(g), P = (v ?? 0) >= 0;
2434
- return /* @__PURE__ */ t(
2435
- Me,
2438
+ children: t.map((w) => {
2439
+ const $ = Yt(w), g = Nt(w), B = (g ?? 0) >= 0;
2440
+ return /* @__PURE__ */ e(
2441
+ $e,
2436
2442
  {
2437
2443
  variant: "outlined",
2438
2444
  sx: {
2439
- p: y ? 1.5 : 2,
2445
+ p: k ? 1.5 : 2,
2440
2446
  borderRadius: 1,
2441
2447
  overflow: "hidden",
2442
2448
  position: "relative",
2443
- borderColor: Y(w, 0.32),
2444
- background: `linear-gradient(180deg, ${Y(w, 0.08)}, rgba(255,255,255,0) 42%)`
2449
+ borderColor: j($, 0.32),
2450
+ background: `linear-gradient(180deg, ${j($, 0.08)}, rgba(255,255,255,0) 42%)`
2445
2451
  },
2446
- children: /* @__PURE__ */ m(V, { spacing: y ? 1 : 1.5, children: [
2447
- /* @__PURE__ */ m(V, { direction: "row", spacing: 1, alignItems: "flex-start", justifyContent: "space-between", children: [
2448
- /* @__PURE__ */ m(d, { sx: { minWidth: 0 }, children: [
2449
- /* @__PURE__ */ t(E, { variant: "caption", color: "text.secondary", fontWeight: 850, sx: { textTransform: "uppercase" }, children: g.label }),
2450
- /* @__PURE__ */ m(V, { direction: "row", spacing: 0.75, alignItems: "baseline", sx: { mt: 0.5 }, children: [
2451
- /* @__PURE__ */ t(E, { variant: y ? "h5" : "h4", fontWeight: 950, sx: { lineHeight: 1 }, children: Rt(g) }),
2452
- g.unit ? /* @__PURE__ */ t(E, { variant: "body2", color: "text.secondary", fontWeight: 800, children: g.unit }) : null
2452
+ children: /* @__PURE__ */ f(H, { spacing: k ? 1 : 1.5, children: [
2453
+ /* @__PURE__ */ f(H, { direction: "row", spacing: 1, alignItems: "flex-start", justifyContent: "space-between", children: [
2454
+ /* @__PURE__ */ f(u, { sx: { minWidth: 0 }, children: [
2455
+ /* @__PURE__ */ e(Y, { variant: "caption", color: "text.secondary", fontWeight: 850, sx: { textTransform: "uppercase" }, children: w.label }),
2456
+ /* @__PURE__ */ f(H, { direction: "row", spacing: 0.75, alignItems: "baseline", sx: { mt: 0.5 }, children: [
2457
+ /* @__PURE__ */ e(Y, { variant: k ? "h5" : "h4", fontWeight: 950, sx: { lineHeight: 1 }, children: Ot(w) }),
2458
+ w.unit ? /* @__PURE__ */ e(Y, { variant: "body2", color: "text.secondary", fontWeight: 800, children: w.unit }) : null
2453
2459
  ] })
2454
2460
  ] }),
2455
- g.icon ? /* @__PURE__ */ t(d, { sx: { color: w, display: "grid", placeItems: "center", mt: 0.25 }, children: g.icon }) : null
2461
+ w.icon ? /* @__PURE__ */ e(u, { sx: { color: $, display: "grid", placeItems: "center", mt: 0.25 }, children: w.icon }) : null
2456
2462
  ] }),
2457
- /* @__PURE__ */ m(V, { direction: "row", spacing: 1, alignItems: "center", justifyContent: "space-between", children: [
2458
- v !== null ? /* @__PURE__ */ t(
2463
+ /* @__PURE__ */ f(H, { direction: "row", spacing: 1, alignItems: "center", justifyContent: "space-between", children: [
2464
+ g !== null ? /* @__PURE__ */ e(
2459
2465
  we,
2460
2466
  {
2461
2467
  size: "small",
2462
- label: `${P ? "+" : ""}${v.toFixed(1)}%`,
2468
+ label: `${B ? "+" : ""}${g.toFixed(1)}%`,
2463
2469
  sx: {
2464
- color: P ? fe.good : fe.danger,
2465
- bgcolor: Y(P ? fe.good : fe.danger, 0.12),
2470
+ color: B ? Ce.good : Ce.danger,
2471
+ bgcolor: j(B ? Ce.good : Ce.danger, 0.12),
2466
2472
  fontWeight: 850
2467
2473
  }
2468
2474
  }
2469
- ) : /* @__PURE__ */ t(d, {}),
2470
- g.helper ? /* @__PURE__ */ t(E, { variant: "caption", color: "text.secondary", textAlign: "right", children: g.helper }) : null
2475
+ ) : /* @__PURE__ */ e(u, {}),
2476
+ w.helper ? /* @__PURE__ */ e(Y, { variant: "caption", color: "text.secondary", textAlign: "right", children: w.helper }) : null
2471
2477
  ] }),
2472
- u && g.trend?.length ? /* @__PURE__ */ t(Pt, { values: g.trend, color: w }) : null,
2473
- x && typeof g.progress == "number" ? /* @__PURE__ */ t(
2474
- ut,
2478
+ c && w.trend?.length ? /* @__PURE__ */ e(jt, { values: w.trend, color: $ }) : null,
2479
+ v && typeof w.progress == "number" ? /* @__PURE__ */ e(
2480
+ yt,
2475
2481
  {
2476
2482
  variant: "determinate",
2477
- value: zt(g.progress, 0, 100),
2483
+ value: Ft(w.progress, 0, 100),
2478
2484
  sx: {
2479
2485
  height: 8,
2480
2486
  borderRadius: 999,
2481
- bgcolor: Y(w, 0.14),
2487
+ bgcolor: j($, 0.14),
2482
2488
  "& .MuiLinearProgress-bar": {
2483
- bgcolor: w,
2489
+ bgcolor: $,
2484
2490
  borderRadius: 999
2485
2491
  }
2486
2492
  }
@@ -2488,7 +2494,7 @@ function Dr({
2488
2494
  ) : null
2489
2495
  ] })
2490
2496
  },
2491
- g.id
2497
+ w.id
2492
2498
  );
2493
2499
  })
2494
2500
  }
@@ -2497,25 +2503,432 @@ function Dr({
2497
2503
  }
2498
2504
  );
2499
2505
  }
2506
+ const Vt = [
2507
+ {
2508
+ id: "todo",
2509
+ title: "To do",
2510
+ color: "#2563eb",
2511
+ cards: [
2512
+ { id: "card-1", title: "Map user journey", description: "Find the rough edges before building.", tags: ["Research"] },
2513
+ { id: "card-2", title: "Write API contract", description: "Lock the shape of the data.", tags: ["Backend"] }
2514
+ ]
2515
+ },
2516
+ {
2517
+ id: "doing",
2518
+ title: "Doing",
2519
+ color: "#d97706",
2520
+ cards: [
2521
+ { id: "card-3", title: "Build board interactions", description: "Drag between columns and reorder cards.", tags: ["UI"], color: "#fef3c7" }
2522
+ ]
2523
+ },
2524
+ {
2525
+ id: "done",
2526
+ title: "Done",
2527
+ color: "#059669",
2528
+ cards: [
2529
+ { id: "card-4", title: "Choose visual system", description: "Dense, clean, and readable.", tags: ["Design"], color: "#dcfce7" }
2530
+ ]
2531
+ }
2532
+ ];
2533
+ function Ae(t) {
2534
+ return typeof crypto < "u" && "randomUUID" in crypto ? `${t}-${crypto.randomUUID()}` : `${t}-${Date.now()}-${Math.round(Math.random() * 1e3)}`;
2535
+ }
2536
+ function Gt(t, n, a) {
2537
+ const s = [...t], [h] = s.splice(n, 1);
2538
+ return s.splice(a, 0, h), s;
2539
+ }
2540
+ function je(t, n) {
2541
+ for (const a of t) {
2542
+ const s = a.cards.find((h) => h.id === n);
2543
+ if (s)
2544
+ return { card: s, column: a };
2545
+ }
2546
+ return null;
2547
+ }
2548
+ function Ve(t, n) {
2549
+ return t.map((a) => ({
2550
+ ...a,
2551
+ cards: a.cards.filter((s) => s.id !== n)
2552
+ }));
2553
+ }
2554
+ function Ut(t, n, a, s) {
2555
+ return t.map((h) => {
2556
+ if (h.id !== n)
2557
+ return h;
2558
+ const c = [...h.cards];
2559
+ return c.splice(s, 0, a), {
2560
+ ...h,
2561
+ cards: c
2562
+ };
2563
+ });
2564
+ }
2565
+ function Ge(t, n) {
2566
+ const a = t.currentTarget.getBoundingClientRect();
2567
+ return t.clientY > a.top + a.height / 2 ? n + 1 : n;
2568
+ }
2569
+ function qt(t) {
2570
+ return t.split(",").map((n) => n.trim()).filter(Boolean);
2571
+ }
2572
+ function ve(t, n, a, s) {
2573
+ if (!n || n.type !== "card" || n.fromColumnId !== a)
2574
+ return !1;
2575
+ const c = t.find((v) => v.id === a)?.cards.findIndex((v) => v.id === n.cardId) ?? -1;
2576
+ return s === c || s === c + 1;
2577
+ }
2578
+ function Ue({
2579
+ compact: t,
2580
+ onDragOver: n,
2581
+ onDrop: a
2582
+ }) {
2583
+ return /* @__PURE__ */ e(
2584
+ u,
2585
+ {
2586
+ onDragOver: n,
2587
+ onDrop: a,
2588
+ sx: {
2589
+ height: t ? 44 : 56,
2590
+ border: 1,
2591
+ borderStyle: "dashed",
2592
+ borderColor: "primary.main",
2593
+ borderRadius: 1,
2594
+ bgcolor: j("#2563eb", 0.08),
2595
+ transition: "height 120ms ease, background-color 120ms ease"
2596
+ }
2597
+ }
2598
+ );
2599
+ }
2600
+ function on({
2601
+ columns: t,
2602
+ defaultColumns: n = Vt,
2603
+ title: a = "Kanban",
2604
+ subtitle: s,
2605
+ density: h = "comfortable",
2606
+ allowColumnDrag: c = !0,
2607
+ onChange: v,
2608
+ onCardSelect: m,
2609
+ sx: d,
2610
+ ...k
2611
+ }) {
2612
+ const [w, $] = S(n), [g, B] = S(null), [z, i] = S(null), [E, b] = S(null), [A, V] = S(""), [O, M] = S({}), [R, I] = S(null), [W, U] = S(""), [G, p] = S(""), [L, y] = S(""), [P, N] = S("#ffffff"), o = t ?? w, X = h === "compact", ee = R?.card ? je(o, R.card.id) : null, he = ze(() => o.reduce((l, x) => l + x.cards.length, 0), [o]);
2613
+ function te(l) {
2614
+ t || $(l), v?.(l);
2615
+ }
2616
+ function q() {
2617
+ const l = A.trim();
2618
+ l && (te([
2619
+ ...o,
2620
+ {
2621
+ id: Ae("column"),
2622
+ title: l,
2623
+ cards: [],
2624
+ color: "#64748b"
2625
+ }
2626
+ ]), V(""));
2627
+ }
2628
+ function ae(l, x) {
2629
+ te(o.map((r) => r.id === l ? { ...r, title: x } : r));
2630
+ }
2631
+ function K(l) {
2632
+ te(o.filter((x) => x.id !== l));
2633
+ }
2634
+ function re(l) {
2635
+ const x = O[l]?.trim();
2636
+ if (!x)
2637
+ return;
2638
+ const r = {
2639
+ id: Ae("card"),
2640
+ title: x
2641
+ };
2642
+ te(o.map((C) => C.id === l ? { ...C, cards: [...C.cards, r] } : C)), M((C) => ({ ...C, [l]: "" }));
2643
+ }
2644
+ function fe(l, x, r) {
2645
+ I({ columnId: l, mode: x, card: r }), U(r?.title ?? ""), p(r?.description ?? ""), y((r?.tags ?? []).join(", ")), N(r?.color ?? "#ffffff");
2646
+ }
2647
+ function se() {
2648
+ I(null), U(""), p(""), y(""), N("#ffffff");
2649
+ }
2650
+ function T() {
2651
+ if (!R || !W.trim())
2652
+ return;
2653
+ const l = {
2654
+ id: R.card?.id ?? Ae("card"),
2655
+ title: W.trim(),
2656
+ description: G.trim() || void 0,
2657
+ tags: qt(L),
2658
+ color: P
2659
+ };
2660
+ if (R.mode === "add") {
2661
+ te(o.map((x) => x.id === R.columnId ? { ...x, cards: [...x.cards, l] } : x)), se();
2662
+ return;
2663
+ }
2664
+ te(o.map((x) => ({
2665
+ ...x,
2666
+ cards: x.cards.map((r) => r.id === l.id ? l : r)
2667
+ }))), se();
2668
+ }
2669
+ function le(l) {
2670
+ te(Ve(o, l)), se();
2671
+ }
2672
+ function ne(l, x, r) {
2673
+ const C = je(o, l);
2674
+ if (!C)
2675
+ return;
2676
+ const F = C.column.cards.findIndex((ye) => ye.id === l), D = C.column.id === x && F < r ? r - 1 : r, J = Ve(o, l), Z = J.find((ye) => ye.id === x), ge = Math.min(Math.max(D, 0), Z?.cards.length ?? 0);
2677
+ te(Ut(J, x, C.card, ge));
2678
+ }
2679
+ function Q(l, x) {
2680
+ if (ve(o, g, l, x)) {
2681
+ i(null);
2682
+ return;
2683
+ }
2684
+ i((r) => r?.columnId === l && r.index === x ? r : { columnId: l, index: x });
2685
+ }
2686
+ function oe() {
2687
+ B(null), i(null);
2688
+ }
2689
+ function me(l, x) {
2690
+ const r = o.findIndex((F) => F.id === l), C = o.findIndex((F) => F.id === x);
2691
+ r < 0 || C < 0 || r === C || te(Gt(o, r, C));
2692
+ }
2693
+ function xe(l, x) {
2694
+ if (l.preventDefault(), !g)
2695
+ return;
2696
+ if (g.type === "column") {
2697
+ me(g.columnId, x), oe();
2698
+ return;
2699
+ }
2700
+ const C = o.find((F) => F.id === x)?.cards.length ?? 0;
2701
+ ve(o, g, x, C) || ne(g.cardId, x, C), oe();
2702
+ }
2703
+ function Ie(l, x, r) {
2704
+ if (l.preventDefault(), l.stopPropagation(), !g || g.type !== "card")
2705
+ return;
2706
+ const C = Ge(l, r);
2707
+ ve(o, g, x, C) || ne(g.cardId, x, C), oe();
2708
+ }
2709
+ return /* @__PURE__ */ f(
2710
+ u,
2711
+ {
2712
+ ...k,
2713
+ sx: [
2714
+ {
2715
+ width: "100%",
2716
+ color: "text.primary"
2717
+ },
2718
+ ...Array.isArray(d) ? d : d ? [d] : []
2719
+ ],
2720
+ children: [
2721
+ /* @__PURE__ */ f(H, { direction: { xs: "column", sm: "row" }, spacing: 2, alignItems: { xs: "stretch", sm: "center" }, justifyContent: "space-between", sx: { mb: 2 }, children: [
2722
+ /* @__PURE__ */ f(u, { children: [
2723
+ /* @__PURE__ */ e(Y, { variant: "h6", fontWeight: 900, children: a }),
2724
+ /* @__PURE__ */ e(Y, { variant: "body2", color: "text.secondary", children: s ?? `${o.length} columns, ${he} cards` })
2725
+ ] }),
2726
+ /* @__PURE__ */ f(H, { direction: "row", spacing: 1, children: [
2727
+ /* @__PURE__ */ e(
2728
+ _,
2729
+ {
2730
+ size: "small",
2731
+ label: "New column",
2732
+ value: A,
2733
+ onChange: (l) => V(l.target.value),
2734
+ onKeyDown: (l) => {
2735
+ l.key === "Enter" && q();
2736
+ }
2737
+ }
2738
+ ),
2739
+ /* @__PURE__ */ e(ie, { variant: "contained", startIcon: /* @__PURE__ */ e(Be, {}), onClick: q, children: "Column" })
2740
+ ] })
2741
+ ] }),
2742
+ /* @__PURE__ */ e(
2743
+ u,
2744
+ {
2745
+ sx: {
2746
+ display: "grid",
2747
+ gridAutoFlow: { xs: "row", md: "column" },
2748
+ gridAutoColumns: { md: "minmax(280px, 1fr)" },
2749
+ gridTemplateColumns: { xs: "1fr", md: "none" },
2750
+ gap: 2,
2751
+ overflowX: { xs: "visible", md: "auto" },
2752
+ pb: 1
2753
+ },
2754
+ children: o.map((l) => /* @__PURE__ */ e(
2755
+ $e,
2756
+ {
2757
+ variant: "outlined",
2758
+ draggable: c && g?.type !== "card",
2759
+ onDragStart: () => {
2760
+ c && B({ type: "column", columnId: l.id });
2761
+ },
2762
+ onDragOver: (x) => {
2763
+ x.preventDefault(), g?.type === "card" && x.target === x.currentTarget && Q(l.id, l.cards.length);
2764
+ },
2765
+ onDrop: (x) => xe(x, l.id),
2766
+ onDragEnd: oe,
2767
+ sx: {
2768
+ p: X ? 1.25 : 1.5,
2769
+ borderRadius: 1,
2770
+ minHeight: 260,
2771
+ bgcolor: j(l.color ?? "#64748b", 0.06),
2772
+ borderColor: j(l.color ?? "#64748b", 0.28)
2773
+ },
2774
+ children: /* @__PURE__ */ f(H, { spacing: X ? 1 : 1.25, children: [
2775
+ /* @__PURE__ */ f(H, { direction: "row", spacing: 1, alignItems: "center", children: [
2776
+ c ? /* @__PURE__ */ e(Ke, { fontSize: "small", color: "disabled" }) : null,
2777
+ E === l.id ? /* @__PURE__ */ e(
2778
+ _,
2779
+ {
2780
+ autoFocus: !0,
2781
+ fullWidth: !0,
2782
+ size: "small",
2783
+ value: l.title,
2784
+ onChange: (x) => ae(l.id, x.target.value),
2785
+ onBlur: () => b(null),
2786
+ onKeyDown: (x) => {
2787
+ x.key === "Enter" && b(null);
2788
+ }
2789
+ }
2790
+ ) : /* @__PURE__ */ e(Y, { fontWeight: 900, sx: { flex: 1, minWidth: 0 }, children: l.title }),
2791
+ /* @__PURE__ */ e(we, { size: "small", label: l.cards.length }),
2792
+ /* @__PURE__ */ e(ce, { title: "Rename column", children: /* @__PURE__ */ e(ue, { size: "small", onClick: () => b(l.id), children: /* @__PURE__ */ e(Ee, { fontSize: "small" }) }) }),
2793
+ /* @__PURE__ */ e(ce, { title: "Delete column", children: /* @__PURE__ */ e(ue, { size: "small", onClick: () => K(l.id), children: /* @__PURE__ */ e(_e, { fontSize: "small" }) }) })
2794
+ ] }),
2795
+ /* @__PURE__ */ f(H, { spacing: 1, children: [
2796
+ l.cards.map((x, r) => {
2797
+ const C = g?.type === "card" && g.cardId !== x.id && z?.columnId === l.id && z.index === r, F = g?.type === "card" && g.cardId === x.id;
2798
+ return /* @__PURE__ */ f(u, { children: [
2799
+ C ? /* @__PURE__ */ e(u, { sx: { mb: 1 }, children: /* @__PURE__ */ e(
2800
+ Ue,
2801
+ {
2802
+ compact: X,
2803
+ onDragOver: (D) => {
2804
+ D.preventDefault(), D.stopPropagation(), Q(l.id, r);
2805
+ },
2806
+ onDrop: (D) => {
2807
+ D.preventDefault(), D.stopPropagation(), g?.type === "card" && (ve(o, g, l.id, r) || ne(g.cardId, l.id, r), oe());
2808
+ }
2809
+ }
2810
+ ) }) : null,
2811
+ /* @__PURE__ */ e(
2812
+ $e,
2813
+ {
2814
+ variant: "outlined",
2815
+ draggable: !0,
2816
+ onDragStart: (D) => {
2817
+ D.stopPropagation(), D.dataTransfer.effectAllowed = "move", B({ type: "card", cardId: x.id, fromColumnId: l.id }), Q(l.id, r);
2818
+ },
2819
+ onDragOver: (D) => {
2820
+ D.preventDefault(), D.stopPropagation(), Q(l.id, Ge(D, r));
2821
+ },
2822
+ onDrop: (D) => Ie(D, l.id, r),
2823
+ onDragEnd: oe,
2824
+ onClick: () => m?.(x, l),
2825
+ sx: {
2826
+ p: X ? 1.25 : 1.5,
2827
+ borderRadius: 1,
2828
+ cursor: F ? "grabbing" : "grab",
2829
+ bgcolor: x.color ?? "background.paper",
2830
+ borderColor: F ? "primary.main" : "divider",
2831
+ opacity: F ? 0.42 : 1,
2832
+ transform: F ? "scale(0.98)" : "scale(1)",
2833
+ transition: "transform 120ms ease, opacity 120ms ease, border-color 120ms ease",
2834
+ boxShadow: F ? "0 18px 40px rgba(37,99,235,0.22)" : void 0
2835
+ },
2836
+ children: /* @__PURE__ */ f(H, { spacing: 1, children: [
2837
+ /* @__PURE__ */ f(H, { direction: "row", spacing: 1, alignItems: "flex-start", children: [
2838
+ /* @__PURE__ */ f(u, { sx: { flex: 1, minWidth: 0 }, children: [
2839
+ /* @__PURE__ */ e(Y, { fontWeight: 850, children: x.title }),
2840
+ x.description ? /* @__PURE__ */ e(Y, { variant: "body2", color: "text.secondary", sx: { mt: 0.5 }, children: x.description }) : null
2841
+ ] }),
2842
+ /* @__PURE__ */ e(ue, { size: "small", onClick: (D) => {
2843
+ D.stopPropagation(), fe(l.id, "edit", x);
2844
+ }, children: /* @__PURE__ */ e(Ee, { fontSize: "small" }) })
2845
+ ] }),
2846
+ x.tags?.length ? /* @__PURE__ */ e(H, { direction: "row", flexWrap: "wrap", gap: 0.75, children: x.tags.map((D) => /* @__PURE__ */ e(we, { size: "small", label: D }, D)) }) : null
2847
+ ] })
2848
+ }
2849
+ )
2850
+ ] }, x.id);
2851
+ }),
2852
+ g?.type === "card" && z?.columnId === l.id && z.index === l.cards.length ? /* @__PURE__ */ e(
2853
+ Ue,
2854
+ {
2855
+ compact: X,
2856
+ onDragOver: (x) => {
2857
+ x.preventDefault(), x.stopPropagation(), Q(l.id, l.cards.length);
2858
+ },
2859
+ onDrop: (x) => {
2860
+ x.preventDefault(), x.stopPropagation(), g?.type === "card" && (ve(o, g, l.id, l.cards.length) || ne(g.cardId, l.id, l.cards.length), oe());
2861
+ }
2862
+ }
2863
+ ) : null
2864
+ ] }),
2865
+ /* @__PURE__ */ f(H, { direction: "row", spacing: 1, children: [
2866
+ /* @__PURE__ */ e(
2867
+ _,
2868
+ {
2869
+ fullWidth: !0,
2870
+ size: "small",
2871
+ label: "Quick card",
2872
+ value: O[l.id] ?? "",
2873
+ onChange: (x) => M((r) => ({ ...r, [l.id]: x.target.value })),
2874
+ onKeyDown: (x) => {
2875
+ x.key === "Enter" && re(l.id);
2876
+ }
2877
+ }
2878
+ ),
2879
+ /* @__PURE__ */ e(ie, { variant: "outlined", onClick: () => re(l.id), children: "Add" })
2880
+ ] }),
2881
+ /* @__PURE__ */ e(ie, { startIcon: /* @__PURE__ */ e(Be, {}), onClick: () => fe(l.id, "add"), children: "Detailed card" })
2882
+ ] })
2883
+ },
2884
+ l.id
2885
+ ))
2886
+ }
2887
+ ),
2888
+ /* @__PURE__ */ f(wt, { open: !!R, onClose: se, fullWidth: !0, maxWidth: "sm", children: [
2889
+ /* @__PURE__ */ e(kt, { children: R?.mode === "add" ? "Add card" : "Edit card" }),
2890
+ /* @__PURE__ */ e(Ct, { children: /* @__PURE__ */ f(H, { spacing: 2, sx: { pt: 1 }, children: [
2891
+ /* @__PURE__ */ e(_, { label: "Title", value: W, onChange: (l) => U(l.target.value), autoFocus: !0 }),
2892
+ /* @__PURE__ */ e(_, { label: "Description", value: G, onChange: (l) => p(l.target.value), multiline: !0, minRows: 3 }),
2893
+ /* @__PURE__ */ e(_, { label: "Tags", helperText: "Comma separated", value: L, onChange: (l) => y(l.target.value) }),
2894
+ /* @__PURE__ */ e(_, { label: "Color", value: P, onChange: (l) => N(l.target.value), select: !0, children: [
2895
+ { label: "White", value: "#ffffff" },
2896
+ { label: "Blue", value: "#dbeafe" },
2897
+ { label: "Green", value: "#dcfce7" },
2898
+ { label: "Yellow", value: "#fef3c7" },
2899
+ { label: "Red", value: "#fee2e2" }
2900
+ ].map((l) => /* @__PURE__ */ e(be, { value: l.value, children: l.label }, l.value)) })
2901
+ ] }) }),
2902
+ /* @__PURE__ */ f(vt, { children: [
2903
+ ee ? /* @__PURE__ */ e(ie, { color: "error", onClick: () => le(ee.card.id), children: "Delete" }) : null,
2904
+ /* @__PURE__ */ e(ie, { onClick: se, children: "Cancel" }),
2905
+ /* @__PURE__ */ e(ie, { variant: "contained", onClick: T, children: R?.mode === "add" ? "Add" : "Save" })
2906
+ ] })
2907
+ ] })
2908
+ ]
2909
+ }
2910
+ );
2911
+ }
2500
2912
  export {
2501
- zr as BeforeAfterSlider,
2502
- mr as CodeViewer,
2503
- Rr as ColorPicker,
2504
- vr as CommandPalette,
2505
- br as ComponentExample,
2506
- Dr as DataCardGrid,
2507
- wr as DockBar,
2508
- xr as DraggableBox,
2509
- Lr as FileDropZone,
2510
- kr as FloatingToolbar,
2511
- yr as GlassBox,
2512
- Tr as InfiniteCanvas,
2513
- Ar as InspectorPanel,
2514
- Cr as MagneticCard,
2515
- Mr as NodeCanvas,
2516
- Sr as ResizableFrame,
2517
- Wr as SmartTooltip,
2518
- $r as SplitPane,
2519
- Ir as SpotlightPanel,
2520
- Pr as TimelineScrubber
2913
+ Zr as BeforeAfterSlider,
2914
+ Fr as CodeViewer,
2915
+ Qr as ColorPicker,
2916
+ Hr as CommandPalette,
2917
+ Xr as ComponentExample,
2918
+ nn as DataCardGrid,
2919
+ Or as DockBar,
2920
+ Yr as DraggableBox,
2921
+ Jr as FileDropZone,
2922
+ Vr as FloatingToolbar,
2923
+ Nr as GlassBox,
2924
+ tn as InfiniteCanvas,
2925
+ Kr as InspectorPanel,
2926
+ on as KanbanBoard,
2927
+ Gr as MagneticCard,
2928
+ qr as NodeCanvas,
2929
+ _r as ResizableFrame,
2930
+ rn as SmartTooltip,
2931
+ jr as SplitPane,
2932
+ Ur as SpotlightPanel,
2933
+ en as TimelineScrubber
2521
2934
  };