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