@mickyballadelli/react-things 0.1.0 → 0.1.2

package/dist/react-things-ui.js

@@ -1,40 +1,41 @@
-import { jsxs as m, jsx as e, Fragment as Ee } from "react/jsx-runtime";
-import { Box as ne, Typography as $e } from "@mui/material";
-import { useRef as oe, useState as T, useLayoutEffect as Xe, useId as He, useMemo as Ce, useEffect as fe, useCallback as je } from "react";
-import p from "@mui/material/Box";
-import { alpha as H } from "@mui/material/styles";
+import { jsxs as m, jsx as t, Fragment as Ye } from "react/jsx-runtime";
+import { Box as ne, Typography as Ce } from "@mui/material";
+import { useRef as oe, useState as W, useLayoutEffect as Fe, useId as je, useMemo as Ie, useEffect as ge, useCallback as Ve } from "react";
+import d from "@mui/material/Box";
+import { alpha as Y } from "@mui/material/styles";
 import ie from "@mui/material/Tooltip";
-import N from "@mui/material/Typography";
+import E from "@mui/material/Typography";
 import Ge from "@mui/material/Collapse";
-import Ve from "@mui/material/InputBase";
-import qe from "@mui/material/List";
-import Ae from "@mui/material/ListItemButton";
-import Ue from "@mui/material/ListItemIcon";
-import Re from "@mui/material/ListItemText";
+import qe from "@mui/material/InputBase";
+import Ue from "@mui/material/List";
+import Le from "@mui/material/ListItemButton";
+import Ze from "@mui/material/ListItemIcon";
+import Pe from "@mui/material/ListItemText";
 import _e from "@mui/icons-material/AddBox";
-import Ze from "@mui/icons-material/AddLink";
-import Qe from "@mui/icons-material/Close";
-import Je from "@mui/icons-material/Delete";
-import Ke from "@mui/icons-material/LinkOff";
+import Qe from "@mui/icons-material/AddLink";
+import Je from "@mui/icons-material/Close";
+import Ke from "@mui/icons-material/Delete";
+import et from "@mui/icons-material/LinkOff";
 import ue from "@mui/material/IconButton";
 import pe from "@mui/material/MenuItem";
-import q from "@mui/material/Stack";
-import Z from "@mui/material/TextField";
-import et from "@mui/icons-material/DragIndicator";
+import V from "@mui/material/Stack";
+import _ from "@mui/material/TextField";
+import tt from "@mui/icons-material/DragIndicator";
 import ae from "@mui/material/Button";
-import tt from "@mui/material/Checkbox";
+import rt from "@mui/material/Checkbox";
 import we from "@mui/material/Chip";
-import rt from "@mui/material/Divider";
-import nt from "@mui/material/FormControlLabel";
-import Ye from "@mui/material/Paper";
-import Fe from "@mui/material/Slider";
-import ot from "@mui/material/InputAdornment";
-import it from "@mui/icons-material/ContentCopy";
-import at from "@mui/icons-material/PushPin";
-import lt from "@mui/icons-material/PushPinOutlined";
-import st from "@mui/material/ClickAwayListener";
-import ct from "@mui/material/Popper";
-function lr({ title: t = "React Things", children: n }) {
+import nt from "@mui/material/Divider";
+import ot from "@mui/material/FormControlLabel";
+import Me from "@mui/material/Paper";
+import Ne from "@mui/material/Slider";
+import it from "@mui/material/InputAdornment";
+import at from "@mui/icons-material/ContentCopy";
+import lt from "@mui/icons-material/PushPin";
+import st from "@mui/icons-material/PushPinOutlined";
+import ct from "@mui/material/ClickAwayListener";
+import dt from "@mui/material/Popper";
+import ut from "@mui/material/LinearProgress";
+function br({ title: e = "React Things", children: n }) {
   return /* @__PURE__ */ m(
     ne,
     {
@@ -46,13 +47,13 @@ function lr({ title: t = "React Things", children: n }) {
         bgcolor: "background.paper"
       },
       children: [
-        /* @__PURE__ */ e($e, { variant: "subtitle1", fontWeight: 700, children: t }),
-        n ? /* @__PURE__ */ e(ne, { sx: { mt: 1 }, children: n }) : null
+        /* @__PURE__ */ t(Ce, { variant: "subtitle1", fontWeight: 700, children: e }),
+        n ? /* @__PURE__ */ t(ne, { sx: { mt: 1 }, children: n }) : null
       ]
     }
   );
 }
-const ve = "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace", Le = 12, dt = {
+const $e = "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace", Te = 12, pt = {
   c: "#659ad2",
   cpp: "#00599c",
   cplusplus: "#00599c",
@@ -90,26 +91,26 @@ const ve = "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace", L
   css: "#1572b6",
   dart: "#0175c2"
 };
-function ut(t) {
-  return t.trim().replace(/^\./, "").toLowerCase().replace(/\s+/g, "");
+function ht(e) {
+  return e.trim().replace(/^\./, "").toLowerCase().replace(/\s+/g, "");
 }
-function pt(t) {
-  return dt[ut(t)] ?? "#93c5fd";
+function ft(e) {
+  return pt[ht(e)] ?? "#93c5fd";
 }
-function ht(t) {
-  return t.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+function gt(e) {
+  return e.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
 }
-function ft(t) {
-  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/;
-  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;
+function bt(e) {
+  const n = gt(e), l = /^(import|from|export|function|return|const|let|var|type|interface|class|extends|new|if|else|for|while|switch|case|break|continue|async|await|try|catch|finally|throw|fn|pub|use|mod|impl|trait|struct|enum|match|mut|let|where|package|func|defer|go|select|range|map|chan|SELECT|FROM|WHERE|AS|AND|OR|INSERT|UPDATE|DELETE|CREATE|TABLE|ORDER|BY|GROUP|LIMIT|select|from|where|as|and|or|insert|update|delete|create|table|order|by|group|limit)\b/;
+  return /^['"`]/.test(e) ? `<span style="color:#86efac">${n}</span>` : /^\d/.test(e) ? `<span style="color:#fbbf24">${n}</span>` : /^<\/?[A-Z][\w.]*/.test(e) ? `<span style="color:#67e8f9">${n}</span>` : l.test(e) ? `<span style="color:#c084fc">${n}</span>` : /^[$#][\w-]+$|^\.[\w-]+$/.test(e) ? `<span style="color:#f9a8d4">${n}</span>` : /^[A-Z][\w.]*$/.test(e) ? `<span style="color:#93c5fd">${n}</span>` : /^[a-z][\w-]*(?==|:)/.test(e) ? `<span style="color:#f9a8d4">${n}</span>` : /^[{}()[\].,:;=<>/]+$/.test(e) ? `<span style="color:#94a3b8">${n}</span>` : n;
 }
-function bt(t) {
-  return t.split(/(\s+|<\/?[A-Z][\w.]*|['"`][^'"`]*['"`]|\d*\.?\d+|[A-Za-z_$][\w$-]*|[{}()[\].,:;=<>/]+)/g).map((n) => ft(n)).join("");
+function mt(e) {
+  return e.split(/(\s+|<\/?[A-Z][\w.]*|['"`][^'"`]*['"`]|\d*\.?\d+|[A-Za-z_$][\w$-]*|[{}()[\].,:;=<>/]+)/g).map((n) => bt(n)).join("");
 }
-function sr({ label: t, language: n, value: d, onChange: s, minHeight: b = 360 }) {
-  const c = d ?? "", g = Math.max(c.split(`
-`).length, 1), f = Array.from({ length: g }, (y, k) => k + 1).join(`
-`), a = bt(c), x = pt(n);
+function mr({ label: e, language: n, value: l, onChange: s, minHeight: f = 360 }) {
+  const u = l ?? "", x = Math.max(u.split(`
+`).length, 1), p = Array.from({ length: x }, (g, w) => w + 1).join(`
+`), i = mt(u), y = ft(n);
   return /* @__PURE__ */ m(ne, { children: [
     /* @__PURE__ */ m(
       ne,
@@ -126,14 +127,14 @@ function sr({ label: t, language: n, value: d, onChange: s, minHeight: b = 360 }
           borderTopRightRadius: 4
         },
         children: [
-          /* @__PURE__ */ e($e, { variant: "caption", fontWeight: 800, children: t }),
-          /* @__PURE__ */ e(
-            $e,
+          /* @__PURE__ */ t(Ce, { variant: "caption", fontWeight: 800, children: e }),
+          /* @__PURE__ */ t(
+            Ce,
             {
               variant: "caption",
               sx: {
                 fontFamily: "monospace",
-                color: x,
+                color: y,
                 textTransform: "lowercase"
               },
               children: n
@@ -148,14 +149,14 @@ function sr({ label: t, language: n, value: d, onChange: s, minHeight: b = 360 }
         sx: {
           display: "grid",
           gridTemplateColumns: "48px 1fr",
-          minHeight: b,
+          minHeight: f,
           bgcolor: "#0f172a",
           borderBottomLeftRadius: 4,
           borderBottomRightRadius: 4,
           overflow: "hidden"
         },
         children: [
-          /* @__PURE__ */ e(
+          /* @__PURE__ */ t(
             ne,
             {
               component: "pre",
@@ -166,13 +167,13 @@ function sr({ label: t, language: n, value: d, onChange: s, minHeight: b = 360 }
                 py: 1.5,
                 color: "#64748b",
                 bgcolor: "#111827",
-                fontFamily: ve,
+                fontFamily: $e,
                 fontSize: 14,
                 lineHeight: 1.6,
                 textAlign: "right",
                 userSelect: "none"
               },
-              children: f
+              children: p
             }
           ),
           /* @__PURE__ */ m(
@@ -180,26 +181,26 @@ function sr({ label: t, language: n, value: d, onChange: s, minHeight: b = 360 }
             {
               sx: {
                 position: "relative",
-                minHeight: b,
+                minHeight: f,
                 bgcolor: "#0f172a",
                 overflow: "auto"
               },
               children: [
-                /* @__PURE__ */ e(
+                /* @__PURE__ */ t(
                   ne,
                   {
                     component: "pre",
                     "aria-hidden": "true",
-                    dangerouslySetInnerHTML: { __html: a },
+                    dangerouslySetInnerHTML: { __html: i },
                     sx: {
                       position: "absolute",
                       inset: 0,
                       m: 0,
-                      p: `${Le}px`,
+                      p: `${Te}px`,
                       boxSizing: "border-box",
                       pointerEvents: "none",
                       color: "#e5e7eb",
-                      fontFamily: ve,
+                      fontFamily: $e,
                       fontSize: 14,
                       lineHeight: 1.6,
                       tabSize: 2,
@@ -208,29 +209,29 @@ function sr({ label: t, language: n, value: d, onChange: s, minHeight: b = 360 }
                     }
                   }
                 ),
-                /* @__PURE__ */ e(
+                /* @__PURE__ */ t(
                   ne,
                   {
                     component: "textarea",
-                    "aria-label": `${t} code editor`,
+                    "aria-label": `${e} code editor`,
                     spellCheck: !1,
-                    value: c,
-                    onChange: (y) => s(y.target.value),
+                    value: u,
+                    onChange: (g) => s(g.target.value),
                     sx: {
                       position: "relative",
                       width: "100%",
                       minWidth: 0,
-                      minHeight: b,
+                      minHeight: f,
                       resize: "vertical",
                       border: 0,
                       outline: 0,
-                      p: `${Le}px`,
+                      p: `${Te}px`,
                       boxSizing: "border-box",
                       color: "transparent",
                       WebkitTextFillColor: "transparent",
                       bgcolor: "transparent",
                       caretColor: "#60a5fa",
-                      fontFamily: ve,
+                      fontFamily: $e,
                       fontSize: 14,
                       lineHeight: 1.6,
                       tabSize: 2,
@@ -254,141 +255,141 @@ function sr({ label: t, language: n, value: d, onChange: s, minHeight: b = 360 }
     )
   ] });
 }
-function cr({
-  children: t,
+function xr({
+  children: e,
   initialPosition: n = { x: 50, y: 50 },
-  dragSx: d,
+  dragSx: l,
   onPositionChange: s,
-  onDraggingChange: b,
-  sx: c,
-  ...g
+  onDraggingChange: f,
+  sx: u,
+  ...x
 }) {
-  const f = oe(null), a = oe(null), [x, y] = T(n), [k, v] = T({ x: 0, y: 0 }), [B, C] = T(!1);
-  Xe(() => {
-    const u = f.current, z = a.current;
-    if (!u || !z)
+  const p = oe(null), i = oe(null), [y, g] = W(n), [w, v] = W({ x: 0, y: 0 }), [P, C] = W(!1);
+  Fe(() => {
+    const h = p.current, M = i.current;
+    if (!h || !M)
       return;
-    const Y = u.getBoundingClientRect(), E = z.getBoundingClientRect(), $ = window.getComputedStyle(u), W = x.x / 100 * Y.width, w = x.y / 100 * Y.height;
-    s?.(x, {
-      containerWidth: Y.width,
-      containerHeight: Y.height,
-      draggableWidth: E.width,
-      draggableHeight: E.height,
-      draggableLeft: W - E.width / 2,
-      draggableTop: w - E.height / 2,
-      containerBackgroundImage: $.backgroundImage,
-      containerBackgroundSize: $.backgroundSize,
-      containerBackgroundPosition: $.backgroundPosition
+    const N = h.getBoundingClientRect(), X = M.getBoundingClientRect(), k = window.getComputedStyle(h), D = y.x / 100 * N.width, $ = y.y / 100 * N.height;
+    s?.(y, {
+      containerWidth: N.width,
+      containerHeight: N.height,
+      draggableWidth: X.width,
+      draggableHeight: X.height,
+      draggableLeft: D - X.width / 2,
+      draggableTop: $ - X.height / 2,
+      containerBackgroundImage: k.backgroundImage,
+      containerBackgroundSize: k.backgroundSize,
+      containerBackgroundPosition: k.backgroundPosition
     });
   }, []);
-  function o(u, z) {
-    y(u), s?.(u, z);
+  function o(h, M) {
+    g(h), s?.(h, M);
   }
-  function R(u, z, Y = k) {
-    const E = f.current, $ = a.current;
-    if (!E || !$)
+  function R(h, M, N = w) {
+    const X = p.current, k = i.current;
+    if (!X || !k)
       return;
-    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 = {
-      x: Math.min(Math.max(h, l), 100 - l),
-      y: Math.min(Math.max(S, M), 100 - M)
-    }, i = D.x / 100 * W.width, P = D.y / 100 * W.height;
-    o(D, {
-      containerWidth: W.width,
-      containerHeight: W.height,
-      draggableWidth: w.width,
-      draggableHeight: w.height,
-      draggableLeft: i - w.width / 2,
-      draggableTop: P - w.height / 2,
+    const D = X.getBoundingClientRect(), $ = k.getBoundingClientRect(), L = window.getComputedStyle(X), j = h - N.x + $.width / 2, O = M - N.y + $.height / 2, c = $.width / D.width * 50, S = $.height / D.height * 50, b = (j - D.left) / D.width * 100, z = (O - D.top) / D.height * 100, B = {
+      x: Math.min(Math.max(b, c), 100 - c),
+      y: Math.min(Math.max(z, S), 100 - S)
+    }, a = B.x / 100 * D.width, T = B.y / 100 * D.height;
+    o(B, {
+      containerWidth: D.width,
+      containerHeight: D.height,
+      draggableWidth: $.width,
+      draggableHeight: $.height,
+      draggableLeft: a - $.width / 2,
+      draggableTop: T - $.height / 2,
       containerBackgroundImage: L.backgroundImage,
       containerBackgroundSize: L.backgroundSize,
       containerBackgroundPosition: L.backgroundPosition
     });
   }
-  return /* @__PURE__ */ e(
-    p,
+  return /* @__PURE__ */ t(
+    d,
     {
-      ...g,
-      ref: f,
+      ...x,
+      ref: p,
       sx: [
         {
           position: "relative",
           overflow: "hidden",
           touchAction: "none"
         },
-        ...Array.isArray(c) ? c : c ? [c] : []
+        ...Array.isArray(u) ? u : u ? [u] : []
       ],
-      onPointerMove: (u) => {
-        B && R(u.clientX, u.clientY);
+      onPointerMove: (h) => {
+        P && R(h.clientX, h.clientY);
       },
-      onPointerUp: (u) => {
-        C(!1), b?.(!1), u.currentTarget.releasePointerCapture(u.pointerId);
+      onPointerUp: (h) => {
+        C(!1), f?.(!1), h.currentTarget.releasePointerCapture(h.pointerId);
       },
       onPointerCancel: () => {
-        C(!1), b?.(!1);
+        C(!1), f?.(!1);
       },
-      children: /* @__PURE__ */ e(
-        p,
+      children: /* @__PURE__ */ t(
+        d,
         {
-          ref: a,
+          ref: i,
           sx: [
             {
               position: "absolute",
-              left: `${x.x}%`,
-              top: `${x.y}%`,
+              left: `${y.x}%`,
+              top: `${y.y}%`,
               transform: "translate(-50%, -50%)",
-              cursor: B ? "grabbing" : "grab",
+              cursor: P ? "grabbing" : "grab",
               userSelect: "none"
             },
-            ...Array.isArray(d) ? d : d ? [d] : []
+            ...Array.isArray(l) ? l : l ? [l] : []
           ],
-          onPointerDown: (u) => {
-            const z = u.currentTarget.getBoundingClientRect(), Y = {
-              x: u.clientX - z.left,
-              y: u.clientY - z.top
+          onPointerDown: (h) => {
+            const M = h.currentTarget.getBoundingClientRect(), N = {
+              x: h.clientX - M.left,
+              y: h.clientY - M.top
             };
-            C(!0), b?.(!0), v(Y), u.currentTarget.setPointerCapture(u.pointerId), R(u.clientX, u.clientY, Y);
+            C(!0), f?.(!0), v(N), h.currentTarget.setPointerCapture(h.pointerId), R(h.clientX, h.clientY, N);
           },
-          children: t
+          children: e
         }
       )
     }
   );
 }
-function Pe(t) {
-  return Math.min(Math.max(t, 0), 1);
+function We(e) {
+  return Math.min(Math.max(e, 0), 1);
 }
-function dr({
-  transparency: t = 0.36,
+function yr({
+  transparency: e = 0.36,
   fill: n = 0.72,
-  liquidColor: d = "#39b8ff",
+  liquidColor: l = "#39b8ff",
   glassColor: s = "#ffffff",
-  motion: b = 0,
-  refractionActive: c = !0,
-  children: g,
-  sx: f,
-  ...a
+  motion: f = 0,
+  refractionActive: u = !0,
+  children: x,
+  sx: p,
+  ...i
 }) {
-  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;
+  const g = `glass-liquid-${je().replace(/:/g, "")}`, w = 1 - We(e), v = We(e), C = `${(1 - Math.min(Math.max(n, 0), 1)) * 100}%`, o = Math.abs(Math.round(f * 8)) + 1, R = 0.012 + Math.abs(Math.sin(f / 17)) * 0.012, h = 18 + w * 18, M = u;
   return /* @__PURE__ */ m(
-    p,
+    d,
     {
-      ...a,
+      ...i,
       sx: [
         {
           position: "relative",
           overflow: "hidden",
           border: 1,
-          borderColor: H(s, 0.48),
+          borderColor: Y(s, 0.48),
           borderRadius: 2,
           minHeight: 160,
           p: 3,
           color: "common.white",
-          bgcolor: H(s, 0.08 + v * 0.18),
+          bgcolor: Y(s, 0.08 + v * 0.18),
           boxShadow: `
-            inset 0 1px 0 ${H(s, 0.68)},
-            inset 14px 0 34px ${H(s, 0.12)},
-            inset -18px 0 32px ${H(d, k * 0.2)},
-            0 18px 48px ${H("#0b2030", 0.18)}
+            inset 0 1px 0 ${Y(s, 0.68)},
+            inset 14px 0 34px ${Y(s, 0.12)},
+            inset -18px 0 32px ${Y(l, w * 0.2)},
+            0 18px 48px ${Y("#0b2030", 0.18)}
           `,
           backdropFilter: "blur(12px) saturate(170%) contrast(108%)",
           WebkitBackdropFilter: "blur(12px) saturate(170%) contrast(108%)",
@@ -400,12 +401,12 @@ function dr({
             top: C,
             bottom: 0,
             background: `
-              linear-gradient(160deg, ${H(s, k * 0.16)} 0%, ${H(d, k * 0.28)} 42%, ${H("#063451", k * 0.2)} 100%)
+              linear-gradient(160deg, ${Y(s, w * 0.16)} 0%, ${Y(l, w * 0.28)} 42%, ${Y("#063451", w * 0.2)} 100%)
             `,
             opacity: 0.95,
             boxShadow: `
-              inset 0 18px 28px ${H(s, 0.12 + k * 0.16)},
-              inset 0 -34px 44px ${H("#032536", k * 0.22)}
+              inset 0 18px 28px ${Y(s, 0.12 + w * 0.16)},
+              inset 0 -34px 44px ${Y("#032536", w * 0.22)}
             `
           },
           "&::after": {
@@ -413,8 +414,8 @@ function dr({
             position: "absolute",
             inset: 0,
             background: `
-              linear-gradient(105deg, ${H(s, 0.34)} 0%, ${H(s, 0.08)} 18%, ${H(s, 0)} 34%),
-              radial-gradient(circle at 18% 18%, ${H(s, 0.38)} 0 3%, ${H(s, 0)} 18%)
+              linear-gradient(105deg, ${Y(s, 0.34)} 0%, ${Y(s, 0.08)} 18%, ${Y(s, 0)} 34%),
+              radial-gradient(circle at 18% 18%, ${Y(s, 0.38)} 0 3%, ${Y(s, 0)} 18%)
             `,
             pointerEvents: "none"
           },
@@ -427,8 +428,8 @@ function dr({
             backgroundSize: "var(--glassbox-refraction-background-size, cover)",
             backgroundPosition: "var(--glassbox-refraction-background-position, center)",
             backgroundRepeat: "no-repeat",
-            filter: `url(#${y}) saturate(150%) contrast(112%)`,
-            opacity: z ? 0.72 : 0,
+            filter: `url(#${g}) saturate(150%) contrast(112%)`,
+            opacity: M ? 0.72 : 0,
             transition: "opacity 120ms ease-out",
             maskImage: `linear-gradient(to bottom, transparent 0, transparent calc(${C} + 10px), black calc(${C} + 28px), black 100%)`,
             WebkitMaskImage: `linear-gradient(to bottom, transparent 0, transparent calc(${C} + 10px), black calc(${C} + 28px), black 100%)`
@@ -438,12 +439,12 @@ function dr({
             inset: 0,
             zIndex: 2,
             pointerEvents: "none",
-            opacity: z ? 0.16 + v * 0.16 : 0,
+            opacity: M ? 0.16 + v * 0.16 : 0,
             backdropFilter: "blur(3px) saturate(190%)",
             WebkitBackdropFilter: "blur(3px) saturate(190%)",
             background: `
-              linear-gradient(180deg, ${H(s, 0.2)} 0, ${H(s, 0)} 20%),
-              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%)
+              linear-gradient(180deg, ${Y(s, 0.2)} 0, ${Y(s, 0)} 20%),
+              linear-gradient(90deg, ${Y(s, 0)} 0 18%, ${Y(s, 0.14)} 26%, ${Y(s, 0)} 34% 58%, ${Y(s, 0.1)} 68%, ${Y(s, 0)} 76% 100%)
             `,
             transition: "opacity 120ms ease-out",
             maskImage: `linear-gradient(to bottom, transparent 0, transparent ${C}, black calc(${C} + 18px), black 100%)`,
@@ -452,25 +453,25 @@ function dr({
           "& .GlassBox-content": {
             position: "relative",
             zIndex: 3,
-            textShadow: `0 1px 10px ${H("#00121d", 0.36)}`
+            textShadow: `0 1px 10px ${Y("#00121d", 0.36)}`
           },
           "& > *": {
             position: "relative",
             zIndex: 3
           }
         },
-        ...Array.isArray(f) ? f : f ? [f] : []
+        ...Array.isArray(p) ? p : p ? [p] : []
       ],
       children: [
-        /* @__PURE__ */ e(
-          p,
+        /* @__PURE__ */ t(
+          d,
           {
             component: "svg",
             "aria-hidden": "true",
             focusable: "false",
             sx: { position: "absolute", width: 0, height: 0, overflow: "hidden" },
-            children: /* @__PURE__ */ m("filter", { id: y, children: [
-              /* @__PURE__ */ e(
+            children: /* @__PURE__ */ m("filter", { id: g, children: [
+              /* @__PURE__ */ t(
                 "feTurbulence",
                 {
                   type: "fractalNoise",
@@ -480,12 +481,12 @@ function dr({
                   result: "liquidNoise"
                 }
               ),
-              /* @__PURE__ */ e(
+              /* @__PURE__ */ t(
                 "feDisplacementMap",
                 {
                   in: "SourceGraphic",
                   in2: "liquidNoise",
-                  scale: u,
+                  scale: h,
                   xChannelSelector: "R",
                   yChannelSelector: "G"
                 }
@@ -493,30 +494,30 @@ function dr({
             ] })
           }
         ),
-        /* @__PURE__ */ e(p, { className: "GlassBox-liquidLens" }),
-        /* @__PURE__ */ e(p, { className: "GlassBox-refractionOffset" }),
-        /* @__PURE__ */ e(p, { className: "GlassBox-content", children: g })
+        /* @__PURE__ */ t(d, { className: "GlassBox-liquidLens" }),
+        /* @__PURE__ */ t(d, { className: "GlassBox-refractionOffset" }),
+        /* @__PURE__ */ t(d, { className: "GlassBox-content", children: x })
       ]
     }
   );
 }
-function gt(t, n, d) {
-  return Math.min(Math.max(t, n), d);
+function xt(e, n, l) {
+  return Math.min(Math.max(e, n), l);
 }
-function ur({
-  items: t,
+function wr({
+  items: e,
   iconSize: n = 52,
-  magnification: d = 1.7,
+  magnification: l = 1.7,
   gap: s = 10,
-  tooltip: b = !0,
-  sx: c,
-  ...g
+  tooltip: f = !0,
+  sx: u,
+  ...x
 }) {
-  const [f, a] = T(null);
-  return /* @__PURE__ */ e(
-    p,
+  const [p, i] = W(null);
+  return /* @__PURE__ */ t(
+    d,
     {
-      ...g,
+      ...x,
       role: "toolbar",
       sx: [
         {
@@ -532,18 +533,18 @@ function ur({
           backdropFilter: "blur(18px) saturate(150%)",
           WebkitBackdropFilter: "blur(18px) saturate(150%)"
         },
-        ...Array.isArray(c) ? c : c ? [c] : []
+        ...Array.isArray(u) ? u : u ? [u] : []
       ],
-      onMouseLeave: () => a(null),
-      children: t.map((x, y) => {
-        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(
-          p,
+      onMouseLeave: () => i(null),
+      children: e.map((y, g) => {
+        const w = p === null ? 4 : Math.abs(g - p), v = xt(1 - w / 3, 0, 1), P = 1 + (l - 1) * v, C = -18 * v, o = /* @__PURE__ */ t(
+          d,
           {
             component: "button",
             type: "button",
-            "aria-label": x.label,
-            onClick: x.onClick,
-            onMouseEnter: () => a(y),
+            "aria-label": y.label,
+            onClick: y.onClick,
+            onMouseEnter: () => i(g),
             sx: {
               width: n,
               height: n,
@@ -557,7 +558,7 @@ function ur({
               bgcolor: "rgba(255,255,255,0.72)",
               boxShadow: "inset 0 1px 0 rgba(255,255,255,0.85), 0 8px 18px rgba(15, 23, 42, 0.18)",
               cursor: "pointer",
-              transform: `translateY(${C}px) scale(${B})`,
+              transform: `translateY(${C}px) scale(${P})`,
               transformOrigin: "bottom center",
               transition: "transform 130ms ease-out, background-color 130ms ease-out",
               "&:focus-visible": {
@@ -568,8 +569,8 @@ function ur({
                 bgcolor: "rgba(255,255,255,0.9)"
               }
             },
-            children: /* @__PURE__ */ e(
-              N,
+            children: /* @__PURE__ */ t(
+              E,
               {
                 component: "span",
                 "aria-hidden": "true",
@@ -579,72 +580,72 @@ function ur({
                   fontSize: Math.round(n * 0.52),
                   lineHeight: 1
                 },
-                children: x.icon
+                children: y.icon
               }
             )
           },
-          x.id
+          y.id
         );
-        return b ? /* @__PURE__ */ e(ie, { title: x.label, placement: "top", arrow: !0, children: o }, x.id) : o;
+        return f ? /* @__PURE__ */ t(ie, { title: y.label, placement: "top", arrow: !0, children: o }, y.id) : o;
       })
     }
   );
 }
-function Ne(t) {
-  return t.toLowerCase().trim();
+function Oe(e) {
+  return e.toLowerCase().trim();
 }
-function mt(t) {
-  return Ne([
-    t.label,
-    t.description,
-    t.group,
-    t.parentId,
-    ...t.keywords ?? []
+function yt(e) {
+  return Oe([
+    e.label,
+    e.description,
+    e.group,
+    e.parentId,
+    ...e.keywords ?? []
   ].filter(Boolean).join(" "));
 }
-function Te(t) {
-  return Array.from(new Set(t.map((n) => n.group).filter(Boolean)));
+function De(e) {
+  return Array.from(new Set(e.map((n) => n.group).filter(Boolean)));
 }
-function pr({
-  items: t,
+function vr({
+  items: e,
   variant: n = "list",
-  selectedId: d,
+  selectedId: l,
   placeholder: s = "Search",
-  emptyText: b = "No items found",
-  maxResults: c,
-  showSearch: g = !0,
-  dense: f = !1,
-  expandedGroups: a,
-  defaultExpandedGroups: x,
-  onExpandedGroupsChange: y,
-  onSelect: k,
+  emptyText: f = "No items found",
+  maxResults: u,
+  showSearch: x = !0,
+  dense: p = !1,
+  expandedGroups: i,
+  defaultExpandedGroups: y,
+  onExpandedGroupsChange: g,
+  onSelect: w,
   sx: v,
-  ...B
+  ...P
 }) {
-  const C = x ?? Te(t), [o, R] = T(""), [u, z] = T(0), [Y, E] = T(C), $ = Ne(o), W = a ?? Y, w = Ce(() => {
-    const i = $ ? t.filter((P) => mt(P).includes($)) : t;
-    return typeof c == "number" ? i.slice(0, c) : i;
-  }, [t, c, $]), L = Te(w), j = w;
-  function F(i) {
-    i.onSelect?.(), k?.(i), R(""), z(0);
+  const C = y ?? De(e), [o, R] = W(""), [h, M] = W(0), [N, X] = W(C), k = Oe(o), D = i ?? N, $ = Ie(() => {
+    const a = k ? e.filter((T) => yt(T).includes(k)) : e;
+    return typeof u == "number" ? a.slice(0, u) : a;
+  }, [e, u, k]), L = De($), j = $;
+  function O(a) {
+    a.onSelect?.(), w?.(a), R(""), M(0);
   }
-  function l(i) {
-    a === void 0 && E(i), y?.(i);
+  function c(a) {
+    i === void 0 && X(a), g?.(a);
   }
-  function M(i) {
-    l(W.includes(i) ? W.filter((P) => P !== i) : [...W, i]);
+  function S(a) {
+    c(D.includes(a) ? D.filter((T) => T !== a) : [...D, a]);
   }
-  function h(i, P = 0) {
-    const Q = i.id === d;
+  function b(a, T = 0) {
+    const Q = a.id === l;
     return /* @__PURE__ */ m(
-      Ae,
+      Le,
       {
         selected: Q,
-        dense: f,
-        onClick: () => F(i),
+        dense: p,
+        onClick: () => O(a),
         sx: {
           borderRadius: 1,
-          pl: 1.25 + P * 2,
+          pl: 1.25 + T * 2,
           "&.Mui-selected": {
             bgcolor: "action.selected",
             color: "primary.main"
@@ -654,57 +655,57 @@ function pr({
           }
         },
         children: [
-          i.icon ? /* @__PURE__ */ e(Ue, { sx: { minWidth: 34, color: "inherit" }, children: i.icon }) : null,
-          /* @__PURE__ */ e(
-            Re,
+          a.icon ? /* @__PURE__ */ t(Ze, { sx: { minWidth: 34, color: "inherit" }, children: a.icon }) : null,
+          /* @__PURE__ */ t(
+            Pe,
             {
-              primary: i.label,
-              secondary: i.description,
+              primary: a.label,
+              secondary: a.description,
               primaryTypographyProps: { fontWeight: Q ? 850 : 700 },
               secondaryTypographyProps: { color: "text.secondary" }
             }
           )
         ]
       },
-      i.id
+      a.id
     );
   }
-  function S() {
-    return w.length ? L.length ? L.map((i) => /* @__PURE__ */ m(p, { children: [
-      /* @__PURE__ */ e(N, { variant: "caption", fontWeight: 900, color: "text.secondary", sx: { display: "block", px: 1.25, pt: 1.5, pb: 0.5 }, children: i }),
-      w.filter((P) => P.group === i).map((P) => h(P))
-    ] }, i)) : w.map((i) => h(i)) : /* @__PURE__ */ e(p, { sx: { px: 2, py: 4, textAlign: "center", color: "text.secondary" }, children: b });
+  function z() {
+    return $.length ? L.length ? L.map((a) => /* @__PURE__ */ m(d, { children: [
+      /* @__PURE__ */ t(E, { variant: "caption", fontWeight: 900, color: "text.secondary", sx: { display: "block", px: 1.25, pt: 1.5, pb: 0.5 }, children: a }),
+      $.filter((T) => T.group === a).map((T) => b(T))
+    ] }, a)) : $.map((a) => b(a)) : /* @__PURE__ */ t(d, { sx: { px: 2, py: 4, textAlign: "center", color: "text.secondary" }, children: f });
   }
-  function D() {
-    return w.length ? L.length ? L.map((i) => {
-      const P = $ || W.includes(i);
-      return /* @__PURE__ */ m(p, { children: [
+  function B() {
+    return $.length ? L.length ? L.map((a) => {
+      const T = k || D.includes(a);
+      return /* @__PURE__ */ m(d, { children: [
         /* @__PURE__ */ m(
-          Ae,
+          Le,
           {
-            dense: f,
-            onClick: () => M(i),
+            dense: p,
+            onClick: () => S(a),
             sx: { borderRadius: 1, px: 1.25 },
             children: [
-              /* @__PURE__ */ e(N, { component: "span", "aria-hidden": "true", sx: { mr: 1, width: 16, color: "text.secondary" }, children: P ? "▾" : "▸" }),
-              /* @__PURE__ */ e(
-                Re,
+              /* @__PURE__ */ t(E, { component: "span", "aria-hidden": "true", sx: { mr: 1, width: 16, color: "text.secondary" }, children: T ? "▾" : "▸" }),
+              /* @__PURE__ */ t(
+                Pe,
                 {
-                  primary: i,
+                  primary: a,
                   primaryTypographyProps: { fontWeight: 900 }
                 }
               )
             ]
           }
         ),
-        /* @__PURE__ */ e(Ge, { in: !!P, timeout: "auto", unmountOnExit: !0, children: w.filter((Q) => Q.group === i).map((Q) => h(Q, 1)) })
-      ] }, i);
-    }) : w.map((i) => h(i)) : /* @__PURE__ */ e(p, { sx: { px: 2, py: 4, textAlign: "center", color: "text.secondary" }, children: b });
+        /* @__PURE__ */ t(Ge, { in: !!T, timeout: "auto", unmountOnExit: !0, children: $.filter((Q) => Q.group === a).map((Q) => b(Q, 1)) })
+      ] }, a);
+    }) : $.map((a) => b(a)) : /* @__PURE__ */ t(d, { sx: { px: 2, py: 4, textAlign: "center", color: "text.secondary" }, children: f });
   }
   return /* @__PURE__ */ m(
-    p,
+    d,
     {
-      ...B,
+      ...P,
       sx: [
         {
           display: "flex",
@@ -715,8 +716,8 @@ function pr({
         ...Array.isArray(v) ? v : v ? [v] : []
       ],
       children: [
-        g ? /* @__PURE__ */ e(
-          p,
+        x ? /* @__PURE__ */ t(
+          d,
           {
             sx: {
               px: 1.25,
@@ -726,134 +727,134 @@ function pr({
               borderRadius: 1,
               bgcolor: "background.paper"
             },
-            children: /* @__PURE__ */ e(
-              Ve,
+            children: /* @__PURE__ */ t(
+              qe,
               {
                 fullWidth: !0,
                 value: o,
                 placeholder: s,
-                onChange: (i) => {
-                  R(i.target.value), z(0);
+                onChange: (a) => {
+                  R(a.target.value), M(0);
                 },
-                onKeyDown: (i) => {
-                  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]));
+                onKeyDown: (a) => {
+                  a.key === "ArrowDown" && (a.preventDefault(), M((T) => Math.min(T + 1, j.length - 1))), a.key === "ArrowUp" && (a.preventDefault(), M((T) => Math.max(T - 1, 0))), a.key === "Enter" && j[h] && (a.preventDefault(), O(j[h]));
                 },
                 sx: { fontSize: 14 }
               }
             )
           }
         ) : null,
-        /* @__PURE__ */ e(qe, { disablePadding: !0, dense: f, sx: { overflow: "auto" }, children: n === "tree" ? D() : S() })
+        /* @__PURE__ */ t(Ue, { disablePadding: !0, dense: p, sx: { overflow: "auto" }, children: n === "tree" ? B() : z() })
       ]
     }
   );
 }
-function We(t, n, d) {
-  return Math.min(Math.max(t, n), d);
+function Be(e, n, l) {
+  return Math.min(Math.max(e, n), l);
 }
-function xt(t) {
-  if (!t || typeof window > "u")
+function wt(e) {
+  if (!e || typeof window > "u")
     return null;
-  const n = window.localStorage.getItem(t), d = n === null ? Number.NaN : Number(n);
-  return Number.isFinite(d) ? d : null;
+  const n = window.localStorage.getItem(e), l = n === null ? Number.NaN : Number(n);
+  return Number.isFinite(l) ? l : null;
 }
-function hr({
-  first: t,
+function $r({
+  first: e,
   second: n,
-  orientation: d = "horizontal",
+  orientation: l = "horizontal",
   initialSize: s = 50,
-  size: b,
-  defaultSize: c,
-  minSize: g = 20,
-  maxSize: f = 80,
-  dividerSize: a = 8,
-  snapPoints: x = [],
-  snapThreshold: y = 4,
-  resetSize: k = c ?? s,
+  size: f,
+  defaultSize: u,
+  minSize: x = 20,
+  maxSize: p = 80,
+  dividerSize: i = 8,
+  snapPoints: y = [],
+  snapThreshold: g = 4,
+  resetSize: w = u ?? s,
   collapsed: v,
-  defaultCollapsed: B = null,
+  defaultCollapsed: P = null,
   collapsedSize: C = 0,
   persistKey: o,
   keyboardStep: R = 5,
-  onSizeChange: u,
-  onCollapsedChange: z,
-  onDraggingChange: Y,
-  dividerLabel: E = "Resize panels",
-  sx: $,
-  ...W
+  onSizeChange: h,
+  onCollapsedChange: M,
+  onDraggingChange: N,
+  dividerLabel: X = "Resize panels",
+  sx: k,
+  ...D
 }) {
-  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;
-  fe(() => {
-    o && window.localStorage.setItem(o, String(i));
-  }, [o, i]), fe(() => {
-    Y?.(M);
-  }, [M, Y]);
-  function V(I) {
-    const te = x.reduce((ce, ge) => {
-      const me = Math.abs(ce - I);
-      return Math.abs(ge - I) < me ? ge : ce;
-    }, I), re = Math.abs(te - I) <= y, J = We(re ? te : I, g, f);
-    b === void 0 && j(J), u?.(J), be(null);
+  const $ = oe(null), [L, j] = W(() => wt(o) ?? u ?? s), [O, c] = W(P), [S, b] = W(!1), z = l === "horizontal", a = Be(f ?? L, x, p), T = v ?? O, Q = T === "first" ? C : T === "second" ? 100 - C : a, le = T === "first" && C <= 0, se = T === "second" && C <= 0;
+  ge(() => {
+    o && window.localStorage.setItem(o, String(a));
+  }, [o, a]), ge(() => {
+    N?.(S);
+  }, [S, N]);
+  function q(I) {
+    const te = y.reduce((ce, me) => {
+      const xe = Math.abs(ce - I);
+      return Math.abs(me - I) < xe ? me : ce;
+    }, I), re = Math.abs(te - I) <= g, J = Be(re ? te : I, x, p);
+    f === void 0 && j(J), h?.(J), be(null);
   }
   function ee(I, te) {
-    const re = w.current;
+    const re = $.current;
     if (!re)
       return;
-    const J = re.getBoundingClientRect(), ce = S ? (I - J.left) / J.width * 100 : (te - J.top) / J.height * 100;
-    V(ce);
+    const J = re.getBoundingClientRect(), ce = z ? (I - J.left) / J.width * 100 : (te - J.top) / J.height * 100;
+    q(ce);
   }
   function U(I) {
-    V(i + I);
+    q(a + I);
   }
   function K() {
-    V(k);
+    q(w);
   }
   function he(I) {
-    be(P === I ? null : I);
+    be(T === I ? null : I);
   }
   function be(I) {
-    v === void 0 && l(I), z?.(I);
+    v === void 0 && c(I), M?.(I);
   }
   return /* @__PURE__ */ m(
-    p,
+    d,
     {
-      ...W,
-      ref: w,
+      ...D,
+      ref: $,
       sx: [
         {
           display: "grid",
-          gridTemplateColumns: S ? `${Q}% ${a}px 1fr` : "1fr",
-          gridTemplateRows: S ? "1fr" : `${Q}% ${a}px 1fr`,
+          gridTemplateColumns: z ? `${Q}% ${i}px 1fr` : "1fr",
+          gridTemplateRows: z ? "1fr" : `${Q}% ${i}px 1fr`,
           minHeight: 280,
           overflow: "hidden",
-          userSelect: M ? "none" : void 0
+          userSelect: S ? "none" : void 0
         },
-        ...Array.isArray($) ? $ : $ ? [$] : []
+        ...Array.isArray(k) ? k : k ? [k] : []
       ],
       onPointerMove: (I) => {
-        M && ee(I.clientX, I.clientY);
+        S && ee(I.clientX, I.clientY);
       },
       onPointerUp: () => {
-        h(!1);
+        b(!1);
       },
-      onPointerCancel: () => h(!1),
+      onPointerCancel: () => b(!1),
       children: [
-        /* @__PURE__ */ e(p, { sx: { minWidth: 0, minHeight: 0, overflow: "auto", display: le ? "none" : void 0 }, children: t }),
-        /* @__PURE__ */ e(
-          p,
+        /* @__PURE__ */ t(d, { sx: { minWidth: 0, minHeight: 0, overflow: "auto", display: le ? "none" : void 0 }, children: e }),
+        /* @__PURE__ */ t(
+          d,
           {
             role: "separator",
-            "aria-label": E,
-            "aria-orientation": S ? "vertical" : "horizontal",
-            "aria-valuemin": g,
-            "aria-valuemax": f,
-            "aria-valuenow": Math.round(i),
+            "aria-label": X,
+            "aria-orientation": z ? "vertical" : "horizontal",
+            "aria-valuemin": x,
+            "aria-valuemax": p,
+            "aria-valuenow": Math.round(a),
             tabIndex: 0,
             onPointerDown: (I) => {
-              h(!0), I.currentTarget.setPointerCapture(I.pointerId), ee(I.clientX, I.clientY);
+              b(!0), I.currentTarget.setPointerCapture(I.pointerId), ee(I.clientX, I.clientY);
             },
             onPointerUp: (I) => {
-              h(!1), I.currentTarget.releasePointerCapture(I.pointerId);
+              b(!1), I.currentTarget.releasePointerCapture(I.pointerId);
             },
             onDoubleClick: K,
             onKeyDown: (I) => {
@@ -861,8 +862,8 @@ function hr({
             },
             sx: {
               position: "relative",
-              bgcolor: M ? "primary.main" : "divider",
-              cursor: S ? "col-resize" : "row-resize",
+              bgcolor: S ? "primary.main" : "divider",
+              cursor: z ? "col-resize" : "row-resize",
               touchAction: "none",
               transition: "background-color 120ms ease",
               "&:hover": {
@@ -876,63 +877,63 @@ function hr({
               "&::after": {
                 content: '""',
                 position: "absolute",
-                inset: S ? "30% -4px" : "-4px 30%",
+                inset: z ? "30% -4px" : "-4px 30%",
                 borderRadius: 999,
-                bgcolor: M ? "primary.contrastText" : "text.disabled",
+                bgcolor: S ? "primary.contrastText" : "text.disabled",
                 opacity: 0.55
               }
             }
           }
         ),
-        /* @__PURE__ */ e(p, { sx: { minWidth: 0, minHeight: 0, overflow: "auto", display: se ? "none" : void 0 }, children: n })
+        /* @__PURE__ */ t(d, { sx: { minWidth: 0, minHeight: 0, overflow: "auto", display: se ? "none" : void 0 }, children: n })
       ]
     }
   );
 }
-function yt(t, n) {
-  return n ?? t?.getBoundingClientRect() ?? null;
+function vt(e, n) {
+  return n ?? e?.getBoundingClientRect() ?? null;
 }
-function fr({
-  open: t,
+function kr({
+  open: e,
   children: n,
-  anchorEl: d,
+  anchorEl: l,
   anchorRect: s,
-  containerRef: b,
-  placement: c = "top",
-  offset: g = 8,
-  boundaryPadding: f = 8,
-  autoUpdate: a = !0,
-  arrow: x = !0,
-  sx: y,
-  ...k
+  containerRef: f,
+  placement: u = "top",
+  offset: x = 8,
+  boundaryPadding: p = 8,
+  autoUpdate: i = !0,
+  arrow: y = !0,
+  sx: g,
+  ...w
 }) {
-  const v = oe(null), [B, C] = T({ left: -9999, top: -9999 }), o = je(() => {
-    if (!t)
+  const v = oe(null), [P, C] = W({ left: -9999, top: -9999 }), o = Ve(() => {
+    if (!e)
       return;
-    const R = yt(d, s), u = v.current;
-    if (!R || !u)
+    const R = vt(l, s), h = v.current;
+    if (!R || !h)
       return;
-    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);
-    C({ left: l, top: M });
-  }, [d, s, f, b, g, t, c]);
-  return Xe(() => {
+    const M = f?.current?.getBoundingClientRect(), N = M?.left ?? 0, X = M?.top ?? 0, k = M?.width ?? window.innerWidth, D = M?.height ?? window.innerHeight, $ = h.offsetWidth / 2, L = h.offsetHeight, j = R.left - N + R.width / 2, O = u === "top" ? R.top - X - x : R.bottom - X + x, c = Math.min(Math.max(j, $ + p), k - $ - p), S = u === "top" ? Math.max(O, L + p) : Math.min(O, D - L - p);
+    C({ left: c, top: S });
+  }, [l, s, p, f, x, e, u]);
+  return Fe(() => {
     o();
-  }, [o]), fe(() => {
-    if (!(!t || !a))
+  }, [o]), ge(() => {
+    if (!(!e || !i))
       return window.addEventListener("resize", o), window.addEventListener("scroll", o, !0), () => {
         window.removeEventListener("resize", o), window.removeEventListener("scroll", o, !0);
       };
-  }, [a, t, o]), t ? /* @__PURE__ */ e(
-    p,
+  }, [i, e, o]), e ? /* @__PURE__ */ t(
+    d,
     {
-      ...k,
+      ...w,
       ref: v,
       role: "toolbar",
       sx: [
         {
-          position: b ? "absolute" : "fixed",
-          left: B.left,
-          top: B.top,
+          position: f ? "absolute" : "fixed",
+          left: P.left,
+          top: P.top,
           zIndex: 1300,
           display: "inline-flex",
           alignItems: "center",
@@ -942,9 +943,9 @@ function fr({
           bgcolor: "rgba(15,23,42,0.96)",
           color: "#e5e7eb",
           boxShadow: "0 16px 40px rgba(15, 23, 42, 0.34)",
-          transform: c === "top" ? "translate(-50%, -100%)" : "translate(-50%, 0)",
+          transform: u === "top" ? "translate(-50%, -100%)" : "translate(-50%, 0)",
           backdropFilter: "blur(12px)",
-          "&::after": x ? {
+          "&::after": y ? {
             content: '""',
             position: "absolute",
             left: "50%",
@@ -952,27 +953,27 @@ function fr({
             height: 10,
             bgcolor: "rgba(15,23,42,0.96)",
             transform: "translateX(-50%) rotate(45deg)",
-            bottom: c === "top" ? -5 : void 0,
-            top: c === "bottom" ? -5 : void 0
+            bottom: u === "top" ? -5 : void 0,
+            top: u === "bottom" ? -5 : void 0
           } : void 0
         },
-        ...Array.isArray(y) ? y : y ? [y] : []
+        ...Array.isArray(g) ? g : g ? [g] : []
       ],
       children: n
     }
   ) : null;
 }
-function br({
-  strength: t = 18,
+function Cr({
+  strength: e = 18,
   tilt: n = 10,
-  lift: d = 10,
+  lift: l = 10,
   glare: s = !0,
-  perspective: b = 900,
-  sx: c,
-  children: g,
-  ...f
+  perspective: f = 900,
+  sx: u,
+  children: x,
+  ...p
 }) {
-  const [a, x] = T({
+  const [i, y] = W({
     x: 0,
     y: 0,
     rotateX: 0,
@@ -981,23 +982,23 @@ function br({
     glareY: 50,
     active: !1
   });
-  return /* @__PURE__ */ e(
-    p,
+  return /* @__PURE__ */ t(
+    d,
     {
-      ...f,
-      onMouseMove: (y) => {
-        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;
-        x({
+      ...p,
+      onMouseMove: (g) => {
+        const w = g.currentTarget.getBoundingClientRect(), v = (g.clientX - w.left) / w.width, P = (g.clientY - w.top) / w.height, C = (v - 0.5) * e, o = (P - 0.5) * e;
+        y({
           x: C,
           y: o,
-          rotateX: (0.5 - B) * n,
+          rotateX: (0.5 - P) * n,
           rotateY: (v - 0.5) * n,
           glareX: v * 100,
-          glareY: B * 100,
+          glareY: P * 100,
           active: !0
         });
       },
-      onMouseLeave: () => x({
+      onMouseLeave: () => y({
         x: 0,
         y: 0,
         rotateX: 0,
@@ -1011,49 +1012,49 @@ function br({
           position: "relative",
           overflow: "hidden",
           transform: `
-            perspective(${b}px)
-            translate3d(${a.x}px, ${a.y}px, ${a.active ? -d : 0}px)
-            rotateX(${a.rotateX}deg)
-            rotateY(${a.rotateY}deg)
+            perspective(${f}px)
+            translate3d(${i.x}px, ${i.y}px, ${i.active ? -l : 0}px)
+            rotateX(${i.rotateX}deg)
+            rotateY(${i.rotateY}deg)
           `,
           transformStyle: "preserve-3d",
-          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",
+          transition: i.active ? "transform 80ms ease-out, box-shadow 120ms ease-out" : "transform 260ms cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 260ms ease",
           willChange: "transform",
-          boxShadow: a.active ? "0 28px 70px rgba(15, 23, 42, 0.24)" : "0 14px 34px rgba(15, 23, 42, 0.12)",
+          boxShadow: i.active ? "0 28px 70px rgba(15, 23, 42, 0.24)" : "0 14px 34px rgba(15, 23, 42, 0.12)",
           "&::before": s ? {
             content: '""',
             position: "absolute",
             inset: 0,
             pointerEvents: "none",
-            opacity: a.active ? 0.78 : 0,
+            opacity: i.active ? 0.78 : 0,
             transition: "opacity 160ms ease",
-            background: `radial-gradient(circle at ${a.glareX}% ${a.glareY}%, rgba(255,255,255,0.55), rgba(255,255,255,0.16) 22%, transparent 48%)`,
+            background: `radial-gradient(circle at ${i.glareX}% ${i.glareY}%, rgba(255,255,255,0.55), rgba(255,255,255,0.16) 22%, transparent 48%)`,
             mixBlendMode: "screen"
           } : void 0,
           "& > *": {
             position: "relative",
             zIndex: 1,
-            transform: a.active ? "translateZ(24px)" : "translateZ(0)",
+            transform: i.active ? "translateZ(24px)" : "translateZ(0)",
             transition: "transform 180ms ease"
           }
         },
-        ...Array.isArray(c) ? c : c ? [c] : []
+        ...Array.isArray(u) ? u : u ? [u] : []
       ],
-      children: g
+      children: x
     }
   );
 }
-function gr({ radius: t = 160, dim: n = 0.72, sx: d, children: s, ...b }) {
-  const [c, g] = T({ x: 50, y: 50 });
-  return /* @__PURE__ */ e(
-    p,
+function Ir({ radius: e = 160, dim: n = 0.72, sx: l, children: s, ...f }) {
+  const [u, x] = W({ x: 50, y: 50 });
+  return /* @__PURE__ */ t(
+    d,
     {
-      ...b,
-      onMouseMove: (f) => {
-        const a = f.currentTarget.getBoundingClientRect();
-        g({
-          x: (f.clientX - a.left) / a.width * 100,
-          y: (f.clientY - a.top) / a.height * 100
+      ...f,
+      onMouseMove: (p) => {
+        const i = p.currentTarget.getBoundingClientRect();
+        x({
+          x: (p.clientX - i.left) / i.width * 100,
+          y: (p.clientY - i.top) / i.height * 100
         });
       },
       sx: [
@@ -1065,144 +1066,144 @@ function gr({ radius: t = 160, dim: n = 0.72, sx: d, children: s, ...b }) {
             position: "absolute",
             inset: 0,
             pointerEvents: "none",
-            background: `radial-gradient(circle ${t}px at ${c.x}% ${c.y}%, transparent 0, transparent 45%, rgba(0,0,0,${n}) 100%)`
+            background: `radial-gradient(circle ${e}px at ${u.x}% ${u.y}%, transparent 0, transparent 45%, rgba(0,0,0,${n}) 100%)`
           }
         },
-        ...Array.isArray(d) ? d : d ? [d] : []
+        ...Array.isArray(l) ? l : l ? [l] : []
       ],
       children: s
     }
   );
 }
-function Be(t, n) {
-  return Math.round(t / n) * n;
+function Ee(e, n) {
+  return Math.round(e / n) * n;
 }
-function wt(t, n, d, s, b) {
-  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;
-  if (b === "ellipse") {
-    const y = Math.max(Math.abs(f - c) / 2, 24), k = Math.max(Math.abs(a - g) / 2, 24);
-    return `M ${c} ${g} A ${y} ${k} 0 0 1 ${f} ${a}`;
+function $t(e, n, l, s, f) {
+  const u = e.x + l / 2, x = e.y + s / 2, p = n.x + l / 2, i = n.y + s / 2, y = (u + p) / 2;
+  if (f === "ellipse") {
+    const g = Math.max(Math.abs(p - u) / 2, 24), w = Math.max(Math.abs(i - x) / 2, 24);
+    return `M ${u} ${x} A ${g} ${w} 0 0 1 ${p} ${i}`;
   }
-  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}`;
+  return f === "curved" ? `M ${u} ${x} C ${y} ${x}, ${y} ${i}, ${p} ${i}` : f === "step" ? `M ${u} ${x} L ${y} ${x} L ${y} ${i} L ${p} ${i}` : `M ${u} ${x} L ${p} ${i}`;
 }
-function mr({
-  nodes: t,
+function Mr({
+  nodes: e,
   connections: n = [],
-  nodeWidth: d = 132,
+  nodeWidth: l = 132,
   nodeHeight: s = 52,
-  mode: b = "edit",
-  snapToGrid: c = !1,
-  gridSize: g = 24,
-  showGrid: f = !1,
-  selectedNodeId: a,
-  connectionStyle: x = "line",
-  editableTools: y = !1,
-  linkTypes: k = ["line", "curved", "step", "ellipse"],
+  mode: f = "edit",
+  snapToGrid: u = !1,
+  gridSize: x = 24,
+  showGrid: p = !1,
+  selectedNodeId: i,
+  connectionStyle: y = "line",
+  editableTools: g = !1,
+  linkTypes: w = ["line", "curved", "step", "ellipse"],
   renderNode: v,
-  onNodesChange: B,
+  onNodesChange: P,
   onConnectionsChange: C,
   onNodeMove: o,
   onNodeSelect: R,
-  sx: u,
-  ...z
+  sx: h,
+  ...M
 }) {
-  const [Y, E] = T(t), [$, W] = T(n), w = y ? Y : t, L = y ? $ : n, [j, F] = T(
-    Object.fromEntries(w.map((r) => [r.id, { x: r.x, y: r.y }]))
-  ), [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("|");
-  fe(() => {
-    y || E(t), F((r) => ({
-      ...Object.fromEntries(t.map((A) => [A.id, r[A.id] ?? { x: A.x, y: A.y }]))
+  const [N, X] = W(e), [k, D] = W(n), $ = g ? N : e, L = g ? k : n, [j, O] = W(
+    Object.fromEntries($.map((r) => [r.id, { x: r.x, y: r.y }]))
+  ), [c, S] = W(i ?? null), [b, z] = W(!1), [B, a] = W(""), [T, Q] = W(w[0] ?? "line"), [le, se] = W(""), [q, ee] = W(null), U = i ?? c, K = $.find((r) => r.id === U) ?? null, he = L.map((r, A) => ({ connection: r, index: A })).filter(({ connection: r }) => r.from === U || r.to === U), be = e.map((r) => `${r.id}:${r.label}:${r.x}:${r.y}:${r.color ?? ""}`).join("|"), I = n.map((r) => `${r.from}:${r.to}:${r.type ?? ""}:${r.label ?? ""}:${r.color ?? ""}`).join("|");
+  ge(() => {
+    g || X(e), O((r) => ({
+      ...Object.fromEntries(e.map((A) => [A.id, r[A.id] ?? { x: A.x, y: A.y }]))
     }));
-  }, [y, be]), fe(() => {
-    y || W(n);
-  }, [I, y]);
+  }, [g, be]), ge(() => {
+    g || D(n);
+  }, [I, g]);
   function te(r) {
-    E(r), B?.(r);
+    X(r), P?.(r);
   }
   function re(r) {
-    W(r), C?.(r);
+    D(r), C?.(r);
   }
   function J(r, A) {
-    const O = c ? { x: Be(A.x, g), y: Be(A.y, g) } : A;
-    F((X) => ({
-      ...X,
-      [r]: O
-    })), y && te(w.map((X) => X.id === r ? { ...X, ...O } : X)), o?.(r, O);
+    const H = u ? { x: Ee(A.x, x), y: Ee(A.y, x) } : A;
+    O((F) => ({
+      ...F,
+      [r]: H
+    })), g && te($.map((F) => F.id === r ? { ...F, ...H } : F)), o?.(r, H);
   }
   function ce() {
-    const r = w.length + 1, A = {
+    const r = $.length + 1, A = {
       id: `node-${Date.now()}`,
       label: `Box ${r}`,
       x: 48 + r * 18,
       y: 48 + r * 18,
       color: "#ffffff"
     };
-    te([...w, A]), F((O) => ({
-      ...O,
+    te([...$, A]), O((H) => ({
+      ...H,
       [A.id]: { x: A.x, y: A.y }
-    })), M(A.id);
+    })), S(A.id);
   }
-  function ge() {
-    U && (te(w.filter((r) => r.id !== U)), re(L.filter((r) => r.from !== U && r.to !== U)), M(null), S(!1));
+  function me() {
+    U && (te($.filter((r) => r.id !== U)), re(L.filter((r) => r.from !== U && r.to !== U)), S(null), z(!1));
   }
-  function me(r) {
-    U && te(w.map((A) => A.id === U ? { ...A, ...r } : A));
+  function xe(r) {
+    U && te($.map((A) => A.id === U ? { ...A, ...r } : A));
   }
-  function Ie() {
-    if (!U || !D || U === D)
+  function ze() {
+    if (!U || !B || U === B)
       return;
     const r = {
       from: U,
-      to: D,
-      type: P,
+      to: B,
+      type: T,
       label: le,
-      color: P === "ellipse" ? "#db2777" : P === "step" ? "#059669" : "#2563eb"
+      color: T === "ellipse" ? "#db2777" : T === "step" ? "#059669" : "#2563eb"
     }, A = [
-      ...L.filter((O) => !(O.from === U && O.to === D)),
+      ...L.filter((H) => !(H.from === U && H.to === B)),
       r
     ];
-    re(A), i(""), se(""), ee(A.indexOf(r));
+    re(A), a(""), se(""), ee(A.indexOf(r));
   }
-  function xe(r, A) {
-    const O = L[r];
-    if (!O)
+  function ye(r, A) {
+    const H = L[r];
+    if (!H)
       return;
-    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);
-    re(_);
+    const F = { ...H, ...A }, Z = L.map((G, de) => de === r ? F : G).filter((G, de) => de === r || G.from !== F.from || G.to !== F.to);
+    re(Z);
   }
-  function Oe(r) {
-    re(L.filter((A, O) => O !== r)), ee(null);
+  function He(r) {
+    re(L.filter((A, H) => H !== r)), ee(null);
   }
   return /* @__PURE__ */ m(
-    p,
+    d,
     {
-      ...z,
+      ...M,
       sx: [
         {
           position: "relative",
           minHeight: 360,
           overflow: "hidden",
           bgcolor: "#f8fafc",
-          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,
-          backgroundSize: f ? `${g}px ${g}px` : void 0
+          backgroundImage: p ? "linear-gradient(rgba(148,163,184,0.24) 1px, transparent 1px), linear-gradient(90deg, rgba(148,163,184,0.24) 1px, transparent 1px)" : void 0,
+          backgroundSize: p ? `${x}px ${x}px` : void 0
         },
-        ...Array.isArray(u) ? u : u ? [u] : []
+        ...Array.isArray(h) ? h : h ? [h] : []
       ],
       children: [
-        /* @__PURE__ */ e(p, { component: "svg", sx: { position: "absolute", inset: 0, width: "100%", height: "100%" }, children: L.map((r) => {
-          const A = j[r.from], O = j[r.to];
-          if (!A || !O)
+        /* @__PURE__ */ t(d, { component: "svg", sx: { position: "absolute", inset: 0, width: "100%", height: "100%" }, children: L.map((r) => {
+          const A = j[r.from], H = j[r.to];
+          if (!A || !H)
             return null;
-          const X = wt(A, O, d, s, r.type ?? x), _ = (A.x + O.x + d) / 2, G = (A.y + O.y + s) / 2;
+          const F = $t(A, H, l, s, r.type ?? y), Z = (A.x + H.x + l) / 2, G = (A.y + H.y + s) / 2;
           return /* @__PURE__ */ m("g", { children: [
-            /* @__PURE__ */ e("path", { d: X, fill: "none", stroke: r.color ?? "#94a3b8", strokeWidth: "2.5" }),
-            r.label ? /* @__PURE__ */ e("text", { x: _, y: G - 8, textAnchor: "middle", fill: r.color ?? "#64748b", fontSize: "11", fontWeight: "700", children: r.label }) : null
+            /* @__PURE__ */ t("path", { d: F, fill: "none", stroke: r.color ?? "#94a3b8", strokeWidth: "2.5" }),
+            r.label ? /* @__PURE__ */ t("text", { x: Z, y: G - 8, textAnchor: "middle", fill: r.color ?? "#64748b", fontSize: "11", fontWeight: "700", children: r.label }) : null
           ] }, `${r.from}-${r.to}-${r.type ?? r.label ?? "link"}`);
         }) }),
-        w.map((r) => {
-          const A = j[r.id], O = r.id === U;
-          return /* @__PURE__ */ e(
-            p,
+        $.map((r) => {
+          const A = j[r.id], H = r.id === U;
+          return /* @__PURE__ */ t(
+            d,
             {
               role: "button",
               tabIndex: 0,
@@ -1210,48 +1211,48 @@ function mr({
                 position: "absolute",
                 left: A.x,
                 top: A.y,
-                width: d,
+                width: l,
                 height: s,
                 display: "grid",
                 placeItems: "center",
-                border: O ? 2 : 1,
-                borderColor: O ? "primary.main" : "divider",
+                border: H ? 2 : 1,
+                borderColor: H ? "primary.main" : "divider",
                 borderRadius: 1,
                 bgcolor: r.color ?? "background.paper",
-                cursor: b === "edit" ? "grab" : "pointer",
+                cursor: f === "edit" ? "grab" : "pointer",
                 userSelect: "none",
-                boxShadow: O ? "0 18px 34px rgba(37,99,235,0.22)" : "0 12px 28px rgba(15,23,42,0.12)",
+                boxShadow: H ? "0 18px 34px rgba(37,99,235,0.22)" : "0 12px 28px rgba(15,23,42,0.12)",
                 touchAction: "none"
               },
-              onPointerDown: (X) => {
-                if (M(r.id), ee(null), y && S(!0), R?.(r), b === "readonly")
+              onPointerDown: (F) => {
+                if (S(r.id), ee(null), g && z(!0), R?.(r), f === "readonly")
                   return;
-                const _ = X.clientX, G = X.clientY, de = j[r.id];
-                X.currentTarget.setPointerCapture(X.pointerId);
-                function ze(Me) {
+                const Z = F.clientX, G = F.clientY, de = j[r.id];
+                F.currentTarget.setPointerCapture(F.pointerId);
+                function Se(Re) {
                   J(r.id, {
-                    x: de.x + Me.clientX - _,
-                    y: de.y + Me.clientY - G
+                    x: de.x + Re.clientX - Z,
+                    y: de.y + Re.clientY - G
                   });
                 }
-                function Se() {
-                  window.removeEventListener("pointermove", ze), window.removeEventListener("pointerup", Se);
+                function Ae() {
+                  window.removeEventListener("pointermove", Se), window.removeEventListener("pointerup", Ae);
                 }
-                window.addEventListener("pointermove", ze), window.addEventListener("pointerup", Se);
+                window.addEventListener("pointermove", Se), window.addEventListener("pointerup", Ae);
               },
-              onKeyDown: (X) => {
-                if (b === "readonly")
+              onKeyDown: (F) => {
+                if (f === "readonly")
                   return;
-                const _ = c ? g : 8, G = j[r.id];
-                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());
+                const Z = u ? x : 8, G = j[r.id];
+                F.key === "ArrowLeft" && (J(r.id, { x: G.x - Z, y: G.y }), F.preventDefault()), F.key === "ArrowRight" && (J(r.id, { x: G.x + Z, y: G.y }), F.preventDefault()), F.key === "ArrowUp" && (J(r.id, { x: G.x, y: G.y - Z }), F.preventDefault()), F.key === "ArrowDown" && (J(r.id, { x: G.x, y: G.y + Z }), F.preventDefault());
               },
-              children: v ? v(r, O) : /* @__PURE__ */ e(N, { fontWeight: 800, children: r.label })
+              children: v ? v(r, H) : /* @__PURE__ */ t(E, { fontWeight: 800, children: r.label })
             },
             r.id
           );
         }),
-        y && K && h ? /* @__PURE__ */ e(
-          p,
+        g && K && b ? /* @__PURE__ */ t(
+          d,
           {
             sx: {
               position: "absolute",
@@ -1268,71 +1269,71 @@ function mr({
               bgcolor: "background.paper",
               boxShadow: "0 20px 48px rgba(15,23,42,0.22)"
             },
-            children: /* @__PURE__ */ m(q, { spacing: 1.25, sx: { p: 1.5 }, children: [
-              /* @__PURE__ */ m(q, { direction: "row", spacing: 0.75, alignItems: "center", children: [
-                /* @__PURE__ */ e(N, { variant: "subtitle2", fontWeight: 900, sx: { flex: 1 }, children: "Box editor" }),
-                /* @__PURE__ */ e(ie, { title: "Add box", children: /* @__PURE__ */ e(ue, { size: "small", color: "primary", onClick: ce, children: /* @__PURE__ */ e(_e, { fontSize: "small" }) }) }),
-                /* @__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" }) }) }) }),
-                /* @__PURE__ */ e(ie, { title: "Close editor", children: /* @__PURE__ */ e(ue, { size: "small", onClick: () => S(!1), children: /* @__PURE__ */ e(Qe, { fontSize: "small" }) }) })
+            children: /* @__PURE__ */ m(V, { spacing: 1.25, sx: { p: 1.5 }, children: [
+              /* @__PURE__ */ m(V, { direction: "row", spacing: 0.75, alignItems: "center", children: [
+                /* @__PURE__ */ t(E, { variant: "subtitle2", fontWeight: 900, sx: { flex: 1 }, children: "Box editor" }),
+                /* @__PURE__ */ t(ie, { title: "Add box", children: /* @__PURE__ */ t(ue, { size: "small", color: "primary", onClick: ce, children: /* @__PURE__ */ t(_e, { fontSize: "small" }) }) }),
+                /* @__PURE__ */ t(ie, { title: "Remove box", children: /* @__PURE__ */ t("span", { children: /* @__PURE__ */ t(ue, { size: "small", color: "error", onClick: me, disabled: !K, children: /* @__PURE__ */ t(Ke, { fontSize: "small" }) }) }) }),
+                /* @__PURE__ */ t(ie, { title: "Close editor", children: /* @__PURE__ */ t(ue, { size: "small", onClick: () => z(!1), children: /* @__PURE__ */ t(Je, { fontSize: "small" }) }) })
               ] }),
-              /* @__PURE__ */ m(p, { sx: { display: "grid", gridTemplateColumns: "1fr 96px", gap: 1 }, children: [
-                /* @__PURE__ */ e(
-                  Z,
+              /* @__PURE__ */ m(d, { sx: { display: "grid", gridTemplateColumns: "1fr 96px", gap: 1 }, children: [
+                /* @__PURE__ */ t(
+                  _,
                   {
                     size: "small",
                     label: "Label",
                     value: K?.label ?? "",
                     disabled: !K,
-                    onChange: (r) => me({ label: r.target.value })
+                    onChange: (r) => xe({ label: r.target.value })
                   }
                 ),
-                /* @__PURE__ */ e(
-                  Z,
+                /* @__PURE__ */ t(
+                  _,
                   {
                     size: "small",
                     label: "Color",
                     type: "color",
                     value: K?.color ?? "#ffffff",
                     disabled: !K,
-                    onChange: (r) => me({ color: r.target.value })
+                    onChange: (r) => xe({ color: r.target.value })
                   }
                 )
               ] }),
-              /* @__PURE__ */ m(p, { sx: { display: "grid", gridTemplateColumns: "1fr", gap: 1.25 }, children: [
-                /* @__PURE__ */ m(q, { spacing: 1, children: [
-                  /* @__PURE__ */ e(N, { variant: "caption", fontWeight: 900, color: "text.secondary", children: "Links" }),
-                  /* @__PURE__ */ m(p, { sx: { display: "grid", gridTemplateColumns: "1fr 32px", gap: 0.5, alignItems: "center" }, children: [
+              /* @__PURE__ */ m(d, { sx: { display: "grid", gridTemplateColumns: "1fr", gap: 1.25 }, children: [
+                /* @__PURE__ */ m(V, { spacing: 1, children: [
+                  /* @__PURE__ */ t(E, { variant: "caption", fontWeight: 900, color: "text.secondary", children: "Links" }),
+                  /* @__PURE__ */ m(d, { sx: { display: "grid", gridTemplateColumns: "1fr 32px", gap: 0.5, alignItems: "center" }, children: [
                     /* @__PURE__ */ m(
-                      Z,
+                      _,
                       {
                         select: !0,
                         size: "small",
                         label: "To",
-                        value: D,
+                        value: B,
                         disabled: !K,
-                        onChange: (r) => i(r.target.value),
+                        onChange: (r) => a(r.target.value),
                         children: [
-                          /* @__PURE__ */ e(pe, { value: "", children: "Pick target" }),
-                          w.filter((r) => r.id !== U).map((r) => /* @__PURE__ */ e(pe, { value: r.id, children: r.label }, r.id))
+                          /* @__PURE__ */ t(pe, { value: "", children: "Pick target" }),
+                          $.filter((r) => r.id !== U).map((r) => /* @__PURE__ */ t(pe, { value: r.id, children: r.label }, r.id))
                         ]
                       }
                     ),
-                    /* @__PURE__ */ e(ie, { title: `Add link from ${K?.label ?? "box"}`, children: /* @__PURE__ */ e("span", { children: /* @__PURE__ */ e(
+                    /* @__PURE__ */ t(ie, { title: `Add link from ${K?.label ?? "box"}`, children: /* @__PURE__ */ t("span", { children: /* @__PURE__ */ t(
                       ue,
                       {
                         size: "small",
                         color: "primary",
-                        disabled: !K || !D,
-                        onClick: Ie,
+                        disabled: !K || !B,
+                        onClick: ze,
                         sx: { width: 32, height: 32, border: 1, borderColor: "divider", borderRadius: 1 },
-                        children: /* @__PURE__ */ e(Ze, { fontSize: "small" })
+                        children: /* @__PURE__ */ t(Qe, { fontSize: "small" })
                       }
                     ) }) })
                   ] }),
                   he.length ? he.map(({ connection: r, index: A }) => {
-                    const O = w.find((G) => G.id === r.from), X = w.find((G) => G.id === r.to), _ = V === A;
+                    const H = $.find((G) => G.id === r.from), F = $.find((G) => G.id === r.to), Z = q === A;
                     return /* @__PURE__ */ m(
-                      p,
+                      d,
                       {
                         sx: {
                           width: "100%",
@@ -1342,8 +1343,8 @@ function mr({
                           alignItems: "center"
                         },
                         children: [
-                          /* @__PURE__ */ e(
-                            p,
+                          /* @__PURE__ */ t(
+                            d,
                             {
                               component: "button",
                               onClick: () => ee(A),
@@ -1352,72 +1353,72 @@ function mr({
                                 py: 0.75,
                                 minWidth: 0,
                                 border: 1,
-                                borderColor: _ ? "primary.main" : "divider",
+                                borderColor: Z ? "primary.main" : "divider",
                                 borderRadius: 1,
-                                bgcolor: _ ? "primary.main" : "background.paper",
-                                color: _ ? "primary.contrastText" : "text.primary",
+                                bgcolor: Z ? "primary.main" : "background.paper",
+                                color: Z ? "primary.contrastText" : "text.primary",
                                 cursor: "pointer",
                                 font: "inherit",
                                 textAlign: "left"
                               },
-                              children: (O?.label ?? r.from) + " -> " + (X?.label ?? r.to)
+                              children: (H?.label ?? r.from) + " -> " + (F?.label ?? r.to)
                             }
                           ),
-                          /* @__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" }) }) })
+                          /* @__PURE__ */ t(ie, { title: "Remove link", children: /* @__PURE__ */ t(ue, { size: "small", color: "error", onClick: () => He(A), sx: { width: 32, height: 32 }, children: /* @__PURE__ */ t(et, { fontSize: "small" }) }) })
                         ]
                       },
                       `${r.from}-${r.to}-${A}`
                     );
-                  }) : /* @__PURE__ */ e(N, { variant: "body2", color: "text.secondary", children: "No linked boxes." })
+                  }) : /* @__PURE__ */ t(E, { variant: "body2", color: "text.secondary", children: "No linked boxes." })
                 ] }),
-                /* @__PURE__ */ m(q, { spacing: 1, children: [
-                  /* @__PURE__ */ e(N, { variant: "caption", fontWeight: 900, color: "text.secondary", children: "Link details" }),
-                  V !== null && L[V] ? /* @__PURE__ */ m(Ee, { children: [
-                    /* @__PURE__ */ e(
-                      Z,
+                /* @__PURE__ */ m(V, { spacing: 1, children: [
+                  /* @__PURE__ */ t(E, { variant: "caption", fontWeight: 900, color: "text.secondary", children: "Link details" }),
+                  q !== null && L[q] ? /* @__PURE__ */ m(Ye, { children: [
+                    /* @__PURE__ */ t(
+                      _,
                       {
                         select: !0,
                         size: "small",
                         label: "From",
-                        value: L[V].from,
-                        onChange: (r) => xe(V, { from: r.target.value }),
-                        children: w.filter((r) => r.id !== L[V].to).map((r) => /* @__PURE__ */ e(pe, { value: r.id, children: r.label }, r.id))
+                        value: L[q].from,
+                        onChange: (r) => ye(q, { from: r.target.value }),
+                        children: $.filter((r) => r.id !== L[q].to).map((r) => /* @__PURE__ */ t(pe, { value: r.id, children: r.label }, r.id))
                       }
                     ),
-                    /* @__PURE__ */ m(p, { sx: { display: "grid", gridTemplateColumns: "1fr 1fr", gap: 1 }, children: [
-                      /* @__PURE__ */ e(
-                        Z,
+                    /* @__PURE__ */ m(d, { sx: { display: "grid", gridTemplateColumns: "1fr 1fr", gap: 1 }, children: [
+                      /* @__PURE__ */ t(
+                        _,
                         {
                           select: !0,
                           size: "small",
                           label: "To",
-                          value: L[V].to,
-                          onChange: (r) => xe(V, { to: r.target.value }),
-                          children: w.filter((r) => r.id !== L[V].from).map((r) => /* @__PURE__ */ e(pe, { value: r.id, children: r.label }, r.id))
+                          value: L[q].to,
+                          onChange: (r) => ye(q, { to: r.target.value }),
+                          children: $.filter((r) => r.id !== L[q].from).map((r) => /* @__PURE__ */ t(pe, { value: r.id, children: r.label }, r.id))
                         }
                       ),
-                      /* @__PURE__ */ e(
-                        Z,
+                      /* @__PURE__ */ t(
+                        _,
                         {
                           select: !0,
                           size: "small",
                           label: "Shape",
-                          value: L[V].type ?? x,
-                          onChange: (r) => xe(V, { type: r.target.value }),
-                          children: k.map((r) => /* @__PURE__ */ e(pe, { value: r, children: r }, r))
+                          value: L[q].type ?? y,
+                          onChange: (r) => ye(q, { type: r.target.value }),
+                          children: w.map((r) => /* @__PURE__ */ t(pe, { value: r, children: r }, r))
                         }
                       )
                     ] }),
-                    /* @__PURE__ */ e(
-                      Z,
+                    /* @__PURE__ */ t(
+                      _,
                       {
                         size: "small",
                         label: "Label",
-                        value: L[V].label ?? "",
-                        onChange: (r) => xe(V, { label: r.target.value })
+                        value: L[q].label ?? "",
+                        onChange: (r) => ye(q, { label: r.target.value })
                       }
                     )
-                  ] }) : /* @__PURE__ */ e(N, { variant: "body2", color: "text.secondary", children: "Pick a link." })
+                  ] }) : /* @__PURE__ */ t(E, { variant: "body2", color: "text.secondary", children: "Pick a link." })
                 ] })
               ] })
             ] })
@@ -1427,61 +1428,61 @@ function mr({
     }
   );
 }
-function xr({ before: t, after: n, initialPosition: d = 50, sx: s, ...b }) {
-  const [c, g] = T(d);
+function zr({ before: e, after: n, initialPosition: l = 50, sx: s, ...f }) {
+  const [u, x] = W(l);
   return /* @__PURE__ */ m(
-    p,
+    d,
     {
-      ...b,
+      ...f,
       sx: [
         { position: "relative", overflow: "hidden", minHeight: 280 },
         ...Array.isArray(s) ? s : s ? [s] : []
       ],
-      onPointerMove: (f) => {
-        if (f.buttons !== 1)
+      onPointerMove: (p) => {
+        if (p.buttons !== 1)
           return;
-        const a = f.currentTarget.getBoundingClientRect();
-        g((f.clientX - a.left) / a.width * 100);
+        const i = p.currentTarget.getBoundingClientRect();
+        x((p.clientX - i.left) / i.width * 100);
       },
       children: [
-        /* @__PURE__ */ e(p, { sx: { position: "absolute", inset: 0 }, children: n }),
-        /* @__PURE__ */ e(p, { sx: { position: "absolute", inset: 0, width: `${c}%`, overflow: "hidden" }, children: t }),
-        /* @__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" } })
+        /* @__PURE__ */ t(d, { sx: { position: "absolute", inset: 0 }, children: n }),
+        /* @__PURE__ */ t(d, { sx: { position: "absolute", inset: 0, width: `${u}%`, overflow: "hidden" }, children: e }),
+        /* @__PURE__ */ t(d, { sx: { position: "absolute", top: 0, bottom: 0, left: `${u}%`, width: 3, bgcolor: "#ffffff", boxShadow: "0 0 0 1px rgba(0,0,0,0.2)", cursor: "ew-resize" } })
       ]
     }
   );
 }
-function yr({
-  initialWidth: t = 320,
+function Sr({
+  initialWidth: e = 320,
   initialHeight: n = 220,
-  minWidth: d = 160,
+  minWidth: l = 160,
   minHeight: s = 120,
-  sx: b,
-  children: c,
-  ...g
+  sx: f,
+  children: u,
+  ...x
 }) {
-  const [f, a] = T({ width: t, height: n });
+  const [p, i] = W({ width: e, height: n });
   return /* @__PURE__ */ m(
-    p,
+    d,
     {
-      ...g,
+      ...x,
       sx: [
         {
           position: "relative",
-          width: f.width,
-          height: f.height,
+          width: p.width,
+          height: p.height,
           overflow: "auto",
           border: 1,
           borderColor: "divider",
           borderRadius: 1,
           bgcolor: "background.paper"
         },
-        ...Array.isArray(b) ? b : b ? [b] : []
+        ...Array.isArray(f) ? f : f ? [f] : []
       ],
       children: [
-        c,
-        /* @__PURE__ */ e(
-          p,
+        u,
+        /* @__PURE__ */ t(
+          d,
           {
             sx: {
               position: "absolute",
@@ -1499,91 +1500,91 @@ function yr({
               borderRadius: 1,
               boxShadow: "0 6px 16px rgba(15,23,42,0.14)"
             },
-            onPointerDown: (x) => {
-              const y = x.clientX, k = x.clientY, v = f;
-              function B(o) {
-                a({
-                  width: Math.max(d, v.width + o.clientX - y),
-                  height: Math.max(s, v.height + o.clientY - k)
+            onPointerDown: (y) => {
+              const g = y.clientX, w = y.clientY, v = p;
+              function P(o) {
+                i({
+                  width: Math.max(l, v.width + o.clientX - g),
+                  height: Math.max(s, v.height + o.clientY - w)
                 });
               }
               function C() {
-                window.removeEventListener("pointermove", B), window.removeEventListener("pointerup", C);
+                window.removeEventListener("pointermove", P), window.removeEventListener("pointerup", C);
               }
-              window.addEventListener("pointermove", B), window.addEventListener("pointerup", C);
+              window.addEventListener("pointermove", P), window.addEventListener("pointerup", C);
             },
-            children: /* @__PURE__ */ e(et, { fontSize: "small" })
+            children: /* @__PURE__ */ t(tt, { fontSize: "small" })
           }
         )
       ]
     }
   );
 }
-function vt(t) {
-  return t.type === "boolean" ? t.value ? "On" : "Off" : `${t.value}${t.unit ? ` ${t.unit}` : ""}`;
+function kt(e) {
+  return e.type === "boolean" ? e.value ? "On" : "Off" : `${e.value}${e.unit ? ` ${e.unit}` : ""}`;
 }
-function kt(t) {
-  return t.reduce((n, d) => {
-    const s = d.group ?? "Settings";
+function Ct(e) {
+  return e.reduce((n, l) => {
+    const s = l.group ?? "Settings";
     return {
       ...n,
-      [s]: [...n[s] ?? [], d]
+      [s]: [...n[s] ?? [], l]
     };
   }, {});
 }
-function wr({
-  fields: t,
+function Ar({
+  fields: e,
   onChange: n,
-  title: d = "Inspector",
+  title: l = "Inspector",
   description: s,
-  density: b = "comfortable",
-  showValueSummary: c = !0,
-  showReset: g = !0,
-  sx: f
+  density: f = "comfortable",
+  showValueSummary: u = !0,
+  showReset: x = !0,
+  sx: p
 }) {
-  const a = kt(t), x = b === "compact" ? 1.25 : 2, y = b === "compact" ? "small" : "medium";
-  function k(v) {
+  const i = Ct(e), y = f === "compact" ? 1.25 : 2, g = f === "compact" ? "small" : "medium";
+  function w(v) {
     v.defaultValue !== void 0 && n?.(v.id, v.defaultValue);
   }
-  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: [
-    /* @__PURE__ */ m(p, { children: [
-      /* @__PURE__ */ m(q, { direction: "row", alignItems: "center", justifyContent: "space-between", spacing: 1, children: [
-        /* @__PURE__ */ e(N, { variant: "subtitle1", fontWeight: 850, children: d }),
-        c ? /* @__PURE__ */ e(we, { size: "small", label: `${t.length} fields` }) : null
+  return /* @__PURE__ */ t(Me, { variant: "outlined", sx: [{ p: f === "compact" ? 1.5 : 2, borderRadius: 1 }, ...Array.isArray(p) ? p : [p]], children: /* @__PURE__ */ m(V, { spacing: y, children: [
+    /* @__PURE__ */ m(d, { children: [
+      /* @__PURE__ */ m(V, { direction: "row", alignItems: "center", justifyContent: "space-between", spacing: 1, children: [
+        /* @__PURE__ */ t(E, { variant: "subtitle1", fontWeight: 850, children: l }),
+        u ? /* @__PURE__ */ t(we, { size: "small", label: `${e.length} fields` }) : null
       ] }),
-      s ? /* @__PURE__ */ e(N, { variant: "body2", color: "text.secondary", sx: { mt: 0.5 }, children: s }) : null
+      s ? /* @__PURE__ */ t(E, { variant: "body2", color: "text.secondary", sx: { mt: 0.5 }, children: s }) : null
     ] }),
-    Object.entries(a).map(([v, B], C) => /* @__PURE__ */ m(q, { spacing: x, children: [
-      C > 0 ? /* @__PURE__ */ e(rt, {}) : null,
-      /* @__PURE__ */ e(N, { variant: "caption", color: "text.secondary", fontWeight: 850, sx: { textTransform: "uppercase" }, children: v }),
-      B.map((o) => {
-        const R = g && o.defaultValue !== void 0 && o.defaultValue !== o.value;
-        return o.type === "boolean" ? /* @__PURE__ */ m(p, { children: [
-          /* @__PURE__ */ m(q, { direction: "row", alignItems: "center", justifyContent: "space-between", spacing: 1, children: [
-            /* @__PURE__ */ e(
-              nt,
+    Object.entries(i).map(([v, P], C) => /* @__PURE__ */ m(V, { spacing: y, children: [
+      C > 0 ? /* @__PURE__ */ t(nt, {}) : null,
+      /* @__PURE__ */ t(E, { variant: "caption", color: "text.secondary", fontWeight: 850, sx: { textTransform: "uppercase" }, children: v }),
+      P.map((o) => {
+        const R = x && o.defaultValue !== void 0 && o.defaultValue !== o.value;
+        return o.type === "boolean" ? /* @__PURE__ */ m(d, { children: [
+          /* @__PURE__ */ m(V, { direction: "row", alignItems: "center", justifyContent: "space-between", spacing: 1, children: [
+            /* @__PURE__ */ t(
+              ot,
               {
-                control: /* @__PURE__ */ e(
-                  tt,
+                control: /* @__PURE__ */ t(
+                  rt,
                   {
                     checked: !!o.value,
                     disabled: o.disabled,
-                    onChange: (u) => n?.(o.id, u.target.checked)
+                    onChange: (h) => n?.(o.id, h.target.checked)
                   }
                 ),
                 label: o.label
               }
             ),
-            R ? /* @__PURE__ */ e(ae, { size: "small", onClick: () => k(o), children: "Reset" }) : null
+            R ? /* @__PURE__ */ t(ae, { size: "small", onClick: () => w(o), children: "Reset" }) : null
           ] }),
-          o.description ? /* @__PURE__ */ e(N, { variant: "caption", color: "text.secondary", children: o.description }) : null
-        ] }, o.id) : o.type === "number" ? /* @__PURE__ */ m(q, { spacing: 1, children: [
-          /* @__PURE__ */ m(q, { direction: "row", spacing: 1, alignItems: "flex-start", children: [
-            /* @__PURE__ */ e(
-              Z,
+          o.description ? /* @__PURE__ */ t(E, { variant: "caption", color: "text.secondary", children: o.description }) : null
+        ] }, o.id) : o.type === "number" ? /* @__PURE__ */ m(V, { spacing: 1, children: [
+          /* @__PURE__ */ m(V, { direction: "row", spacing: 1, alignItems: "flex-start", children: [
+            /* @__PURE__ */ t(
+              _,
               {
                 fullWidth: !0,
-                size: y,
+                size: g,
                 label: o.label,
                 type: "number",
                 value: o.value,
@@ -1594,14 +1595,14 @@ function wr({
                   max: o.max,
                   step: o.step
                 },
-                onChange: (u) => n?.(o.id, Number(u.target.value))
+                onChange: (h) => n?.(o.id, Number(h.target.value))
               }
             ),
-            o.unit ? /* @__PURE__ */ e(we, { label: o.unit, size: "small", sx: { mt: 1 } }) : null,
-            R ? /* @__PURE__ */ e(ae, { size: "small", onClick: () => k(o), sx: { mt: 0.5 }, children: "Reset" }) : null
+            o.unit ? /* @__PURE__ */ t(we, { label: o.unit, size: "small", sx: { mt: 1 } }) : null,
+            R ? /* @__PURE__ */ t(ae, { size: "small", onClick: () => w(o), sx: { mt: 0.5 }, children: "Reset" }) : null
           ] }),
-          o.min !== void 0 || o.max !== void 0 ? /* @__PURE__ */ e(
-            Fe,
+          o.min !== void 0 || o.max !== void 0 ? /* @__PURE__ */ t(
+            Ne,
             {
               value: Number(o.value),
               min: o.min ?? 0,
@@ -1609,45 +1610,45 @@ function wr({
               step: o.step ?? 1,
               disabled: o.disabled,
               valueLabelDisplay: "auto",
-              onChange: (u, z) => n?.(o.id, Array.isArray(z) ? z[0] : z)
+              onChange: (h, M) => n?.(o.id, Array.isArray(M) ? M[0] : M)
             }
           ) : null
-        ] }, o.id) : o.type === "select" ? /* @__PURE__ */ m(q, { direction: "row", spacing: 1, alignItems: "flex-start", children: [
-          /* @__PURE__ */ e(
-            Z,
+        ] }, o.id) : o.type === "select" ? /* @__PURE__ */ m(V, { direction: "row", spacing: 1, alignItems: "flex-start", children: [
+          /* @__PURE__ */ t(
+            _,
             {
               select: !0,
               fullWidth: !0,
-              size: y,
+              size: g,
               label: o.label,
               value: o.value,
               helperText: o.description,
               disabled: o.disabled,
-              onChange: (u) => n?.(o.id, u.target.value),
-              children: (o.options ?? []).map((u) => /* @__PURE__ */ e(pe, { value: u.value, children: u.label }, u.value))
+              onChange: (h) => n?.(o.id, h.target.value),
+              children: (o.options ?? []).map((h) => /* @__PURE__ */ t(pe, { value: h.value, children: h.label }, h.value))
             }
           ),
-          R ? /* @__PURE__ */ e(ae, { size: "small", onClick: () => k(o), sx: { mt: 0.5 }, children: "Reset" }) : null
-        ] }, o.id) : o.type === "color" ? /* @__PURE__ */ m(q, { direction: "row", spacing: 1, alignItems: "flex-start", children: [
-          /* @__PURE__ */ e(
-            Z,
+          R ? /* @__PURE__ */ t(ae, { size: "small", onClick: () => w(o), sx: { mt: 0.5 }, children: "Reset" }) : null
+        ] }, o.id) : o.type === "color" ? /* @__PURE__ */ m(V, { direction: "row", spacing: 1, alignItems: "flex-start", children: [
+          /* @__PURE__ */ t(
+            _,
             {
               fullWidth: !0,
-              size: y,
+              size: g,
               label: o.label,
               value: o.value,
               helperText: o.description,
               disabled: o.disabled,
-              onChange: (u) => n?.(o.id, u.target.value),
+              onChange: (h) => n?.(o.id, h.target.value),
               InputProps: {
-                startAdornment: /* @__PURE__ */ e(
-                  p,
+                startAdornment: /* @__PURE__ */ t(
+                  d,
                   {
                     component: "input",
                     type: "color",
                     value: String(o.value),
                     disabled: o.disabled,
-                    onChange: (u) => n?.(o.id, u.target.value),
+                    onChange: (h) => n?.(o.id, h.target.value),
                     sx: {
                       width: 28,
                       height: 28,
@@ -1662,42 +1663,42 @@ function wr({
               }
             }
           ),
-          R ? /* @__PURE__ */ e(ae, { size: "small", onClick: () => k(o), sx: { mt: 0.5 }, children: "Reset" }) : null
-        ] }, o.id) : /* @__PURE__ */ m(q, { direction: "row", spacing: 1, alignItems: "flex-start", children: [
-          /* @__PURE__ */ e(
-            Z,
+          R ? /* @__PURE__ */ t(ae, { size: "small", onClick: () => w(o), sx: { mt: 0.5 }, children: "Reset" }) : null
+        ] }, o.id) : /* @__PURE__ */ m(V, { direction: "row", spacing: 1, alignItems: "flex-start", children: [
+          /* @__PURE__ */ t(
+            _,
             {
               fullWidth: !0,
-              size: y,
+              size: g,
               label: o.label,
               value: o.value,
               helperText: o.description,
               disabled: o.disabled,
-              onChange: (u) => n?.(o.id, u.target.value)
+              onChange: (h) => n?.(o.id, h.target.value)
             }
           ),
-          R ? /* @__PURE__ */ e(ae, { size: "small", onClick: () => k(o), sx: { mt: 0.5 }, children: "Reset" }) : null
+          R ? /* @__PURE__ */ t(ae, { size: "small", onClick: () => w(o), sx: { mt: 0.5 }, children: "Reset" }) : null
         ] }, o.id);
       })
     ] }, v)),
-    c ? /* @__PURE__ */ m(p, { sx: { p: 1.25, borderRadius: 1, bgcolor: "action.hover" }, children: [
-      /* @__PURE__ */ e(N, { variant: "caption", color: "text.secondary", fontWeight: 850, children: "Current values" }),
-      /* @__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)) })
+    u ? /* @__PURE__ */ m(d, { sx: { p: 1.25, borderRadius: 1, bgcolor: "action.hover" }, children: [
+      /* @__PURE__ */ t(E, { variant: "caption", color: "text.secondary", fontWeight: 850, children: "Current values" }),
+      /* @__PURE__ */ t(V, { direction: "row", flexWrap: "wrap", gap: 0.75, sx: { mt: 1 }, children: e.map((v) => /* @__PURE__ */ t(we, { size: "small", label: `${v.label}: ${kt(v)}` }, v.id)) })
     ] }) : null
   ] }) });
 }
-function vr({
-  value: t,
+function Rr({
+  value: e,
   alpha: n = 1,
-  swatches: d = ["#2563eb", "#7c3aed", "#db2777", "#dc2626", "#f59e0b", "#059669"],
+  swatches: l = ["#2563eb", "#7c3aed", "#db2777", "#dc2626", "#f59e0b", "#059669"],
   showValue: s = !0,
-  onChange: b,
-  onAlphaChange: c
+  onChange: f,
+  onAlphaChange: u
 }) {
-  const g = Math.round(n * 100), f = `${t}${Math.round(n * 255).toString(16).padStart(2, "0")}`;
-  return /* @__PURE__ */ e(Ye, { variant: "outlined", sx: { p: 2, borderRadius: 1 }, children: /* @__PURE__ */ m(q, { spacing: 2, children: [
-    /* @__PURE__ */ e(
-      p,
+  const x = Math.round(n * 100), p = `${e}${Math.round(n * 255).toString(16).padStart(2, "0")}`;
+  return /* @__PURE__ */ t(Me, { variant: "outlined", sx: { p: 2, borderRadius: 1 }, children: /* @__PURE__ */ m(V, { spacing: 2, children: [
+    /* @__PURE__ */ t(
+      d,
       {
         sx: {
           height: 96,
@@ -1708,97 +1709,97 @@ function vr({
           backgroundSize: "18px 18px",
           backgroundPosition: "0 0, 0 9px, 9px -9px, -9px 0"
         },
-        children: /* @__PURE__ */ e(p, { sx: { height: "100%", borderRadius: 1, bgcolor: t, opacity: n } })
+        children: /* @__PURE__ */ t(d, { sx: { height: "100%", borderRadius: 1, bgcolor: e, opacity: n } })
       }
     ),
-    /* @__PURE__ */ m(q, { direction: { xs: "column", sm: "row" }, spacing: 1.5, children: [
-      /* @__PURE__ */ e(
-        Z,
+    /* @__PURE__ */ m(V, { direction: { xs: "column", sm: "row" }, spacing: 1.5, children: [
+      /* @__PURE__ */ t(
+        _,
         {
           label: "Color",
           type: "color",
-          value: t,
-          onChange: (a) => b?.(a.target.value),
+          value: e,
+          onChange: (i) => f?.(i.target.value),
           sx: { width: { xs: "100%", sm: 120 } }
         }
       ),
-      /* @__PURE__ */ e(
-        Z,
+      /* @__PURE__ */ t(
+        _,
         {
           label: "Hex",
-          value: t,
-          onChange: (a) => b?.(a.target.value),
+          value: e,
+          onChange: (i) => f?.(i.target.value),
           fullWidth: !0
         }
       )
     ] }),
-    /* @__PURE__ */ m(p, { children: [
-      /* @__PURE__ */ e(N, { variant: "caption", color: "text.secondary", fontWeight: 800, children: "Alpha" }),
-      /* @__PURE__ */ e(
-        Fe,
+    /* @__PURE__ */ m(d, { children: [
+      /* @__PURE__ */ t(E, { variant: "caption", color: "text.secondary", fontWeight: 800, children: "Alpha" }),
+      /* @__PURE__ */ t(
+        Ne,
         {
           min: 0,
           max: 1,
           step: 0.01,
           value: n,
-          onChange: (a, x) => c?.(Array.isArray(x) ? x[0] : x),
+          onChange: (i, y) => u?.(Array.isArray(y) ? y[0] : y),
           valueLabelDisplay: "auto",
-          valueLabelFormat: (a) => `${Math.round(a * 100)}%`
+          valueLabelFormat: (i) => `${Math.round(i * 100)}%`
         }
       ),
-      /* @__PURE__ */ e(
-        Z,
+      /* @__PURE__ */ t(
+        _,
         {
           label: "Alpha",
           type: "number",
-          value: g,
-          onChange: (a) => c?.(Math.min(Math.max(Number(a.target.value), 0), 100) / 100),
+          value: x,
+          onChange: (i) => u?.(Math.min(Math.max(Number(i.target.value), 0), 100) / 100),
           InputProps: {
-            endAdornment: /* @__PURE__ */ e(ot, { position: "end", children: "%" })
+            endAdornment: /* @__PURE__ */ t(it, { position: "end", children: "%" })
           },
           fullWidth: !0
         }
       )
     ] }),
-    /* @__PURE__ */ e(p, { sx: { display: "flex", gap: 1, flexWrap: "wrap" }, children: d.map((a) => /* @__PURE__ */ e(
-      p,
+    /* @__PURE__ */ t(d, { sx: { display: "flex", gap: 1, flexWrap: "wrap" }, children: l.map((i) => /* @__PURE__ */ t(
+      d,
       {
         component: "button",
-        "aria-label": a,
-        onClick: () => b?.(a),
+        "aria-label": i,
+        onClick: () => f?.(i),
         sx: {
           width: 32,
           height: 32,
           borderRadius: "50%",
           border: 2,
-          borderColor: a.toLowerCase() === t.toLowerCase() ? "text.primary" : "divider",
-          bgcolor: a,
+          borderColor: i.toLowerCase() === e.toLowerCase() ? "text.primary" : "divider",
+          bgcolor: i,
           cursor: "pointer"
         }
       },
-      a
+      i
     )) }),
-    s ? /* @__PURE__ */ m(p, { sx: { p: 1.5, borderRadius: 1, bgcolor: "#0f172a", color: "#e5e7eb" }, children: [
-      /* @__PURE__ */ e(N, { variant: "caption", color: "#94a3b8", children: "selected color" }),
-      /* @__PURE__ */ e(N, { fontFamily: "monospace", children: f })
+    s ? /* @__PURE__ */ m(d, { sx: { p: 1.5, borderRadius: 1, bgcolor: "#0f172a", color: "#e5e7eb" }, children: [
+      /* @__PURE__ */ t(E, { variant: "caption", color: "#94a3b8", children: "selected color" }),
+      /* @__PURE__ */ t(E, { fontFamily: "monospace", children: p })
     ] }) : null
   ] }) });
 }
-function kr({ onFiles: t, sx: n, ...d }) {
-  const [s, b] = T(!1);
-  function c(g) {
-    g && t?.(Array.from(g));
+function Lr({ onFiles: e, sx: n, ...l }) {
+  const [s, f] = W(!1);
+  function u(x) {
+    x && e?.(Array.from(x));
   }
   return /* @__PURE__ */ m(
-    p,
+    d,
     {
-      ...d,
-      onDragOver: (g) => {
-        g.preventDefault(), b(!0);
+      ...l,
+      onDragOver: (x) => {
+        x.preventDefault(), f(!0);
       },
-      onDragLeave: () => b(!1),
-      onDrop: (g) => {
-        g.preventDefault(), b(!1), c(g.dataTransfer.files);
+      onDragLeave: () => f(!1),
+      onDrop: (x) => {
+        x.preventDefault(), f(!1), u(x.dataTransfer.files);
       },
       sx: [
         {
@@ -1813,113 +1814,113 @@ function kr({ onFiles: t, sx: n, ...d }) {
         ...Array.isArray(n) ? n : n ? [n] : []
       ],
       children: [
-        /* @__PURE__ */ e(N, { fontWeight: 800, children: "Drop files here" }),
-        /* @__PURE__ */ e(N, { variant: "body2", color: "text.secondary", children: "Drag files into this zone" })
+        /* @__PURE__ */ t(E, { fontWeight: 800, children: "Drop files here" }),
+        /* @__PURE__ */ t(E, { variant: "body2", color: "text.secondary", children: "Drag files into this zone" })
       ]
     }
   );
 }
-function ye(t, n, d) {
-  return Math.min(Math.max(t, n), d);
+function ve(e, n, l) {
+  return Math.min(Math.max(e, n), l);
 }
-function $t(t) {
-  const n = Math.floor(t / 60), d = Math.floor(t % 60);
-  return `${n}:${String(d).padStart(2, "0")}`;
+function It(e) {
+  const n = Math.floor(e / 60), l = Math.floor(e % 60);
+  return `${n}:${String(l).padStart(2, "0")}`;
 }
-function ke(t, n) {
-  return n > 0 ? ye(t / n * 100, 0, 100) : 0;
+function ke(e, n) {
+  return n > 0 ? ve(e / n * 100, 0, 100) : 0;
 }
-function Ct(t, n) {
-  return n.reduce((d, s) => d ? Math.abs(s.time - t) < Math.abs(d.time - t) ? s : d : s, null);
+function Mt(e, n) {
+  return n.reduce((l, s) => l ? Math.abs(s.time - e) < Math.abs(l.time - e) ? s : l : s, null);
 }
-function $r({
-  duration: t,
+function Pr({
+  duration: e,
   value: n,
-  defaultValue: d = 0,
+  defaultValue: l = 0,
   markers: s = [],
-  thumbnails: b = [],
-  disabled: c = !1,
-  showTime: g = !0,
-  preview: f = !0,
-  step: a = 1,
-  formatTime: x = $t,
-  onChange: y,
-  sx: k,
+  thumbnails: f = [],
+  disabled: u = !1,
+  showTime: x = !0,
+  preview: p = !0,
+  step: i = 1,
+  formatTime: y = It,
+  onChange: g,
+  sx: w,
   ...v
 }) {
-  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);
-  function F(h, S) {
-    const D = a > 0 ? Math.round(h / a) * a : h, i = ye(D, 0, t);
-    n === void 0 && o(i), y?.(i, S);
+  const P = oe(null), [C, o] = W(l), [R, h] = W(!1), [M, N] = W(null), X = ve(n ?? C, 0, e), k = M === null ? X : M, D = ke(X, e), $ = ke(k, e), L = Ie(() => [...s].sort((b, z) => b.time - z.time), [s]), j = Mt(k, f);
+  function O(b, z) {
+    const B = i > 0 ? Math.round(b / i) * i : b, a = ve(B, 0, e);
+    n === void 0 && o(a), g?.(a, z);
   }
-  function l(h) {
-    const S = B.current;
-    if (!S)
-      return E;
-    const D = S.getBoundingClientRect();
-    return ye((h - D.left) / D.width, 0, 1) * t;
+  function c(b) {
+    const z = P.current;
+    if (!z)
+      return X;
+    const B = z.getBoundingClientRect();
+    return ve((b - B.left) / B.width, 0, 1) * e;
   }
-  function M(h) {
-    Y(l(h));
+  function S(b) {
+    N(c(b));
   }
   return /* @__PURE__ */ m(
-    p,
+    d,
     {
       ...v,
       sx: [
         {
           width: "100%",
-          color: c ? "text.disabled" : "text.primary",
+          color: u ? "text.disabled" : "text.primary",
           userSelect: "none"
         },
-        ...Array.isArray(k) ? k : k ? [k] : []
+        ...Array.isArray(w) ? w : w ? [w] : []
       ],
       children: [
-        g ? /* @__PURE__ */ m(p, { sx: { display: "flex", justifyContent: "space-between", mb: 1 }, children: [
-          /* @__PURE__ */ e(N, { variant: "caption", fontWeight: 800, children: x(E) }),
-          /* @__PURE__ */ e(N, { variant: "caption", color: "text.secondary", children: x(t) })
+        x ? /* @__PURE__ */ m(d, { sx: { display: "flex", justifyContent: "space-between", mb: 1 }, children: [
+          /* @__PURE__ */ t(E, { variant: "caption", fontWeight: 800, children: y(X) }),
+          /* @__PURE__ */ t(E, { variant: "caption", color: "text.secondary", children: y(e) })
         ] }) : null,
         /* @__PURE__ */ m(
-          p,
+          d,
           {
-            ref: B,
+            ref: P,
             role: "slider",
-            tabIndex: c ? -1 : 0,
+            tabIndex: u ? -1 : 0,
             "aria-valuemin": 0,
-            "aria-valuemax": t,
-            "aria-valuenow": Math.round(E),
-            onPointerMove: (h) => {
-              c || (M(h.clientX), R && F(l(h.clientX), "drag"));
+            "aria-valuemax": e,
+            "aria-valuenow": Math.round(X),
+            onPointerMove: (b) => {
+              u || (S(b.clientX), R && O(c(b.clientX), "drag"));
             },
             onPointerLeave: () => {
-              R || Y(null);
+              R || N(null);
             },
-            onPointerDown: (h) => {
-              c || (u(!0), h.currentTarget.setPointerCapture(h.pointerId), F(l(h.clientX), "click"));
+            onPointerDown: (b) => {
+              u || (h(!0), b.currentTarget.setPointerCapture(b.pointerId), O(c(b.clientX), "click"));
             },
-            onPointerUp: (h) => {
-              u(!1), h.currentTarget.releasePointerCapture(h.pointerId);
+            onPointerUp: (b) => {
+              h(!1), b.currentTarget.releasePointerCapture(b.pointerId);
             },
-            onPointerCancel: () => u(!1),
-            onKeyDown: (h) => {
-              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()));
+            onPointerCancel: () => h(!1),
+            onKeyDown: (b) => {
+              u || (b.key === "ArrowLeft" && (O(X - i, "keyboard"), b.preventDefault()), b.key === "ArrowRight" && (O(X + i, "keyboard"), b.preventDefault()), b.key === "Home" && (O(0, "keyboard"), b.preventDefault()), b.key === "End" && (O(e, "keyboard"), b.preventDefault()));
             },
             sx: {
               position: "relative",
               height: 86,
-              cursor: c ? "default" : "pointer",
+              cursor: u ? "default" : "pointer",
               outline: "none",
               "&:focus-visible .TimelineScrubber-track": {
                 boxShadow: "0 0 0 3px rgba(37,99,235,0.28)"
               }
             },
             children: [
-              f && z !== null ? /* @__PURE__ */ m(
-                p,
+              p && M !== null ? /* @__PURE__ */ m(
+                d,
                 {
                   sx: {
                     position: "absolute",
-                    left: `${w}%`,
+                    left: `${$}%`,
                     top: 0,
                     transform: "translateX(-50%)",
                     width: 116,
@@ -1933,13 +1934,13 @@ function $r({
                     zIndex: 2
                   },
                   children: [
-                    /* @__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($) }) }) }),
-                    /* @__PURE__ */ e(N, { variant: "caption", fontWeight: 800, sx: { display: "block", mt: 0.5, textAlign: "center" }, children: x($) })
+                    /* @__PURE__ */ t(d, { sx: { height: 56, borderRadius: 0.75, overflow: "hidden", bgcolor: "#e5e7eb" }, children: j?.thumbnail ?? /* @__PURE__ */ t(d, { sx: { height: "100%", display: "grid", placeItems: "center", bgcolor: "#0f172a", color: "#fff" }, children: /* @__PURE__ */ t(E, { variant: "caption", fontWeight: 900, children: y(k) }) }) }),
+                    /* @__PURE__ */ t(E, { variant: "caption", fontWeight: 800, sx: { display: "block", mt: 0.5, textAlign: "center" }, children: y(k) })
                   ]
                 }
               ) : null,
-              /* @__PURE__ */ e(
-                p,
+              /* @__PURE__ */ t(
+                d,
                 {
                   className: "TimelineScrubber-track",
                   sx: {
@@ -1953,11 +1954,11 @@ function $r({
                     overflow: "hidden",
                     transition: "box-shadow 120ms ease"
                   },
-                  children: /* @__PURE__ */ e(
-                    p,
+                  children: /* @__PURE__ */ t(
+                    d,
                     {
                       sx: {
-                        width: `${W}%`,
+                        width: `${D}%`,
                         height: "100%",
                         borderRadius: 999,
                         background: "linear-gradient(90deg, #2563eb, #06b6d4)"
@@ -1966,37 +1967,37 @@ function $r({
                   )
                 }
               ),
-              L.map((h) => {
-                const S = ke(h.time, t);
-                return /* @__PURE__ */ e(ie, { title: h.label ?? x(h.time), arrow: !0, children: /* @__PURE__ */ e(
-                  p,
+              L.map((b) => {
+                const z = ke(b.time, e);
+                return /* @__PURE__ */ t(ie, { title: b.label ?? y(b.time), arrow: !0, children: /* @__PURE__ */ t(
+                  d,
                   {
-                    onPointerDown: (D) => {
-                      D.stopPropagation(), F(h.time, "marker");
+                    onPointerDown: (B) => {
+                      B.stopPropagation(), O(b.time, "marker");
                     },
                     sx: {
                       position: "absolute",
-                      left: `${S}%`,
+                      left: `${z}%`,
                       bottom: 11,
                       width: 12,
                       height: 26,
                       borderRadius: 999,
                       transform: "translateX(-50%)",
-                      bgcolor: h.color ?? "#f59e0b",
+                      bgcolor: b.color ?? "#f59e0b",
                       border: "2px solid",
                       borderColor: "background.paper",
                       boxShadow: "0 8px 18px rgba(15,23,42,0.2)",
                       zIndex: 1
                     }
                   }
-                ) }, h.id);
+                ) }, b.id);
               }),
-              /* @__PURE__ */ e(
-                p,
+              /* @__PURE__ */ t(
+                d,
                 {
                   sx: {
                     position: "absolute",
-                    left: `${W}%`,
+                    left: `${D}%`,
                     bottom: 5,
                     width: 28,
                     height: 28,
@@ -2016,83 +2017,83 @@ function $r({
     }
   );
 }
-function De(t, n, d) {
-  return Math.min(Math.max(t, n), d);
+function Xe(e, n, l) {
+  return Math.min(Math.max(e, n), l);
 }
-function Cr({
-  items: t = [],
+function Tr({
+  items: e = [],
   defaultViewport: n = { x: 0, y: 0, zoom: 1 },
-  viewport: d,
+  viewport: l,
   minZoom: s = 0.3,
-  maxZoom: b = 2.5,
-  showGrid: c = !0,
-  showMinimap: g = !0,
-  selectedItemId: f,
-  renderItem: a,
-  onViewportChange: x,
-  onItemMove: y,
-  onItemSelect: k,
+  maxZoom: f = 2.5,
+  showGrid: u = !0,
+  showMinimap: x = !0,
+  selectedItemId: p,
+  renderItem: i,
+  onViewportChange: y,
+  onItemMove: g,
+  onItemSelect: w,
   sx: v,
-  ...B
+  ...P
 }) {
-  const C = oe(null), [o, R] = T(n), [u, z] = T(
-    Object.fromEntries(t.map((l) => [l.id, { x: l.x, y: l.y }]))
-  ), [Y, E] = T(f ?? null), $ = d ?? o, W = f ?? Y, w = Ce(() => {
-    const l = t.map((i) => ({
-      x: u[i.id]?.x ?? i.x,
-      y: u[i.id]?.y ?? i.y,
-      width: i.width ?? 140,
-      height: i.height ?? 80
+  const C = oe(null), [o, R] = W(n), [h, M] = W(
+    Object.fromEntries(e.map((c) => [c.id, { x: c.x, y: c.y }]))
+  ), [N, X] = W(p ?? null), k = l ?? o, D = p ?? N, $ = Ie(() => {
+    const c = e.map((a) => ({
+      x: h[a.id]?.x ?? a.x,
+      y: h[a.id]?.y ?? a.y,
+      width: a.width ?? 140,
+      height: a.height ?? 80
     }));
-    if (!l.length)
+    if (!c.length)
       return { minX: -200, minY: -120, width: 400, height: 240 };
-    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;
-    return { minX: M, minY: h, width: S - M, height: D - h };
-  }, [u, t]);
-  function L(l) {
-    const M = {
-      ...l,
-      zoom: De(l.zoom, s, b)
+    const S = Math.min(...c.map((a) => a.x)) - 80, b = Math.min(...c.map((a) => a.y)) - 80, z = Math.max(...c.map((a) => a.x + a.width)) + 80, B = Math.max(...c.map((a) => a.y + a.height)) + 80;
+    return { minX: S, minY: b, width: z - S, height: B - b };
+  }, [h, e]);
+  function L(c) {
+    const S = {
+      ...c,
+      zoom: Xe(c.zoom, s, f)
     };
-    d === void 0 && R(M), x?.(M);
+    l === void 0 && R(S), y?.(S);
   }
-  function j(l, M) {
-    const h = C.current?.getBoundingClientRect();
+  function j(c, S) {
+    const b = C.current?.getBoundingClientRect();
     return {
-      x: (l - (h?.left ?? 0) - $.x) / $.zoom,
-      y: (M - (h?.top ?? 0) - $.y) / $.zoom
+      x: (c - (b?.left ?? 0) - k.x) / k.zoom,
+      y: (S - (b?.top ?? 0) - k.y) / k.zoom
     };
   }
-  function F(l) {
-    E(l?.id ?? null), k?.(l);
+  function O(c) {
+    X(c?.id ?? null), w?.(c);
   }
   return /* @__PURE__ */ m(
-    p,
+    d,
     {
-      ...B,
+      ...P,
       ref: C,
-      onWheel: (l) => {
-        l.preventDefault();
-        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;
-        L({ x: D, y: i, zoom: M });
+      onWheel: (c) => {
+        c.preventDefault();
+        const S = Xe(k.zoom * (c.deltaY > 0 ? 0.92 : 1.08), s, f), b = j(c.clientX, c.clientY), z = C.current?.getBoundingClientRect(), B = c.clientX - (z?.left ?? 0) - b.x * S, a = c.clientY - (z?.top ?? 0) - b.y * S;
+        L({ x: B, y: a, zoom: S });
       },
-      onPointerDown: (l) => {
-        if (l.target !== l.currentTarget)
+      onPointerDown: (c) => {
+        if (c.target !== c.currentTarget)
           return;
-        F(null);
-        const M = l.clientX, h = l.clientY, S = $;
-        l.currentTarget.setPointerCapture(l.pointerId);
-        function D(P) {
+        O(null);
+        const S = c.clientX, b = c.clientY, z = k;
+        c.currentTarget.setPointerCapture(c.pointerId);
+        function B(T) {
           L({
-            ...S,
-            x: S.x + P.clientX - M,
-            y: S.y + P.clientY - h
+            ...z,
+            x: z.x + T.clientX - S,
+            y: z.y + T.clientY - b
           });
         }
-        function i() {
-          window.removeEventListener("pointermove", D), window.removeEventListener("pointerup", i);
+        function a() {
+          window.removeEventListener("pointermove", B), window.removeEventListener("pointerup", a);
         }
-        window.addEventListener("pointermove", D), window.addEventListener("pointerup", i);
+        window.addEventListener("pointermove", B), window.addEventListener("pointerup", a);
       },
       sx: [
         {
@@ -2106,78 +2107,78 @@ function Cr({
         ...Array.isArray(v) ? v : v ? [v] : []
       ],
       children: [
-        /* @__PURE__ */ e(
-          p,
+        /* @__PURE__ */ t(
+          d,
           {
             sx: {
               position: "absolute",
               inset: 0,
               pointerEvents: "none",
-              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,
-              backgroundSize: `${32 * $.zoom}px ${32 * $.zoom}px`,
-              backgroundPosition: `${$.x}px ${$.y}px`
+              backgroundImage: u ? "linear-gradient(rgba(148,163,184,0.25) 1px, transparent 1px), linear-gradient(90deg, rgba(148,163,184,0.25) 1px, transparent 1px)" : void 0,
+              backgroundSize: `${32 * k.zoom}px ${32 * k.zoom}px`,
+              backgroundPosition: `${k.x}px ${k.y}px`
             }
           }
         ),
-        /* @__PURE__ */ e(
-          p,
+        /* @__PURE__ */ t(
+          d,
           {
             sx: {
               position: "absolute",
-              left: $.x,
-              top: $.y,
-              transform: `scale(${$.zoom})`,
+              left: k.x,
+              top: k.y,
+              transform: `scale(${k.zoom})`,
               transformOrigin: "0 0"
             },
-            children: t.map((l) => {
-              const M = u[l.id] ?? { x: l.x, y: l.y }, h = l.id === W;
-              return /* @__PURE__ */ e(
-                p,
+            children: e.map((c) => {
+              const S = h[c.id] ?? { x: c.x, y: c.y }, b = c.id === D;
+              return /* @__PURE__ */ t(
+                d,
                 {
-                  onPointerDown: (S) => {
-                    S.stopPropagation(), F(l);
-                    const D = u[l.id] ?? { x: l.x, y: l.y }, i = j(S.clientX, S.clientY);
-                    S.currentTarget.setPointerCapture(S.pointerId);
-                    function P(le) {
-                      const se = j(le.clientX, le.clientY), V = {
-                        x: D.x + se.x - i.x,
-                        y: D.y + se.y - i.y
+                  onPointerDown: (z) => {
+                    z.stopPropagation(), O(c);
+                    const B = h[c.id] ?? { x: c.x, y: c.y }, a = j(z.clientX, z.clientY);
+                    z.currentTarget.setPointerCapture(z.pointerId);
+                    function T(le) {
+                      const se = j(le.clientX, le.clientY), q = {
+                        x: B.x + se.x - a.x,
+                        y: B.y + se.y - a.y
                       };
-                      z((ee) => ({
+                      M((ee) => ({
                         ...ee,
-                        [l.id]: V
-                      })), y?.(l.id, V);
+                        [c.id]: q
+                      })), g?.(c.id, q);
                     }
                     function Q() {
-                      window.removeEventListener("pointermove", P), window.removeEventListener("pointerup", Q);
+                      window.removeEventListener("pointermove", T), window.removeEventListener("pointerup", Q);
                     }
-                    window.addEventListener("pointermove", P), window.addEventListener("pointerup", Q);
+                    window.addEventListener("pointermove", T), window.addEventListener("pointerup", Q);
                   },
                   sx: {
                     position: "absolute",
-                    left: M.x,
-                    top: M.y,
-                    width: l.width ?? 140,
-                    height: l.height ?? 80,
+                    left: S.x,
+                    top: S.y,
+                    width: c.width ?? 140,
+                    height: c.height ?? 80,
                     display: "grid",
                     placeItems: "center",
-                    border: h ? 2 : 1,
-                    borderColor: h ? "primary.main" : "divider",
+                    border: b ? 2 : 1,
+                    borderColor: b ? "primary.main" : "divider",
                     borderRadius: 1,
-                    bgcolor: l.color ?? "background.paper",
-                    boxShadow: h ? "0 18px 40px rgba(37,99,235,0.24)" : "0 12px 28px rgba(15,23,42,0.13)",
+                    bgcolor: c.color ?? "background.paper",
+                    boxShadow: b ? "0 18px 40px rgba(37,99,235,0.24)" : "0 12px 28px rgba(15,23,42,0.13)",
                     cursor: "grab",
                     userSelect: "none"
                   },
-                  children: a ? a(l, h) : /* @__PURE__ */ e(N, { fontWeight: 900, children: l.label ?? l.id })
+                  children: i ? i(c, b) : /* @__PURE__ */ t(E, { fontWeight: 900, children: c.label ?? c.id })
                 },
-                l.id
+                c.id
               );
             })
           }
         ),
         /* @__PURE__ */ m(
-          p,
+          d,
           {
             sx: {
               position: "absolute",
@@ -2196,13 +2197,13 @@ function Cr({
               fontWeight: 800
             },
             children: [
-              Math.round($.zoom * 100),
+              Math.round(k.zoom * 100),
               "%"
             ]
           }
         ),
-        g ? /* @__PURE__ */ e(
-          p,
+        x ? /* @__PURE__ */ t(
+          d,
           {
             sx: {
               position: "absolute",
@@ -2216,24 +2217,24 @@ function Cr({
               bgcolor: "rgba(255,255,255,0.9)",
               overflow: "hidden"
             },
-            children: t.map((l) => {
-              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;
-              return /* @__PURE__ */ e(
-                p,
+            children: e.map((c) => {
+              const S = h[c.id] ?? { x: c.x, y: c.y }, b = (S.x - $.minX) / $.width * 100, z = (S.y - $.minY) / $.height * 100, B = (c.width ?? 140) / $.width * 100, a = (c.height ?? 80) / $.height * 100;
+              return /* @__PURE__ */ t(
+                d,
                 {
                   sx: {
                     position: "absolute",
-                    left: `${h}%`,
-                    top: `${S}%`,
-                    width: `${D}%`,
-                    height: `${i}%`,
+                    left: `${b}%`,
+                    top: `${z}%`,
+                    width: `${B}%`,
+                    height: `${a}%`,
                     minWidth: 6,
                     minHeight: 4,
                     borderRadius: 0.5,
-                    bgcolor: l.id === W ? "primary.main" : l.color ?? "#94a3b8"
+                    bgcolor: c.id === D ? "primary.main" : c.color ?? "#94a3b8"
                   }
                 },
-                l.id
+                c.id
               );
             })
           }
@@ -2242,78 +2243,78 @@ function Cr({
     }
   );
 }
-function Ir({
-  children: t,
+function Wr({
+  children: e,
   title: n,
-  content: d,
+  content: l,
   media: s,
-  actions: b = [],
-  copyText: c,
-  placement: g = "top",
-  pinMode: f = !0,
-  defaultPinned: a = !1,
-  openDelay: x = 120,
-  sx: y,
-  ...k
+  actions: f = [],
+  copyText: u,
+  placement: x = "top",
+  pinMode: p = !0,
+  defaultPinned: i = !1,
+  openDelay: y = 120,
+  sx: g,
+  ...w
 }) {
-  const v = oe(null), B = oe(null), C = oe(null), [o, R] = T(a), [u, z] = T(a), [Y, E] = T(!1);
-  function $() {
-    C.current && window.clearTimeout(C.current), B.current && window.clearTimeout(B.current);
+  const v = oe(null), P = oe(null), C = oe(null), [o, R] = W(i), [h, M] = W(i), [N, X] = W(!1);
+  function k() {
+    C.current && window.clearTimeout(C.current), P.current && window.clearTimeout(P.current);
   }
-  function W() {
-    $(), !o && (C.current = window.setTimeout(() => R(!0), x));
+  function D() {
+    k(), !o && (C.current = window.setTimeout(() => R(!0), y));
   }
-  function w() {
-    $(), R(!0);
+  function $() {
+    k(), R(!0);
   }
   function L() {
-    $(), u || (B.current = window.setTimeout(() => R(!1), 100));
+    k(), h || (P.current = window.setTimeout(() => R(!1), 100));
   }
   function j() {
-    const l = !u;
-    z(l), R(l || o);
+    const c = !h;
+    M(c), R(c || o);
   }
-  async function F() {
-    c && (await navigator.clipboard?.writeText(c), E(!0), window.setTimeout(() => E(!1), 1100));
+  async function O() {
+    u && (await navigator.clipboard?.writeText(u), X(!0), window.setTimeout(() => X(!1), 1100));
   }
-  return /* @__PURE__ */ m(Ee, { children: [
-    /* @__PURE__ */ e(
-      p,
+  return /* @__PURE__ */ m(Ye, { children: [
+    /* @__PURE__ */ t(
+      d,
       {
         component: "span",
         ref: v,
-        onMouseEnter: W,
+        onMouseEnter: D,
         onMouseLeave: L,
-        onFocus: W,
+        onFocus: D,
         onBlur: L,
         onClick: () => {
-          f && (R(!0), z(!0));
+          p && (R(!0), M(!0));
         },
         sx: { display: "inline-flex" },
-        children: t
+        children: e
       }
     ),
-    /* @__PURE__ */ e(
-      ct,
+    /* @__PURE__ */ t(
+      dt,
       {
         open: o,
         anchorEl: v.current,
-        placement: g,
+        placement: x,
         modifiers: [
           { name: "offset", options: { offset: [0, 10] } },
           { name: "preventOverflow", options: { padding: 12 } }
         ],
         sx: { zIndex: 1500 },
-        children: /* @__PURE__ */ e(
-          st,
+        children: /* @__PURE__ */ t(
+          ct,
           {
             onClickAway: () => {
-              u && (R(!1), z(!1));
+              h && (R(!1), M(!1));
             },
-            children: /* @__PURE__ */ e(
-              p,
+            children: /* @__PURE__ */ t(
+              d,
               {
-                onMouseEnter: w,
+                onMouseEnter: $,
                 onMouseLeave: L,
                 sx: {
                   width: 320,
@@ -2323,18 +2324,18 @@ function Ir({
                   boxShadow: "0 24px 64px rgba(15,23,42,0.28)",
                   bgcolor: "background.paper"
                 },
-                children: /* @__PURE__ */ e(p, { ...k, sx: [{ p: 1.25 }, ...Array.isArray(y) ? y : y ? [y] : []], children: /* @__PURE__ */ m(q, { spacing: 1.25, children: [
-                  s ? /* @__PURE__ */ e(p, { sx: { borderRadius: 1, overflow: "hidden", bgcolor: "#e5e7eb" }, children: s }) : null,
-                  /* @__PURE__ */ m(q, { direction: "row", spacing: 1, alignItems: "flex-start", children: [
-                    /* @__PURE__ */ m(p, { sx: { minWidth: 0, flex: 1 }, children: [
-                      n ? /* @__PURE__ */ e(N, { fontWeight: 900, children: n }) : null,
-                      d ? /* @__PURE__ */ e(N, { variant: "body2", color: "text.secondary", sx: { mt: n ? 0.25 : 0 }, children: d }) : null
+                children: /* @__PURE__ */ t(d, { ...w, sx: [{ p: 1.25 }, ...Array.isArray(g) ? g : g ? [g] : []], children: /* @__PURE__ */ m(V, { spacing: 1.25, children: [
+                  s ? /* @__PURE__ */ t(d, { sx: { borderRadius: 1, overflow: "hidden", bgcolor: "#e5e7eb" }, children: s }) : null,
+                  /* @__PURE__ */ m(V, { direction: "row", spacing: 1, alignItems: "flex-start", children: [
+                    /* @__PURE__ */ m(d, { sx: { minWidth: 0, flex: 1 }, children: [
+                      n ? /* @__PURE__ */ t(E, { fontWeight: 900, children: n }) : null,
+                      l ? /* @__PURE__ */ t(E, { variant: "body2", color: "text.secondary", sx: { mt: n ? 0.25 : 0 }, children: l }) : null
                     ] }),
-                    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
+                    p ? /* @__PURE__ */ t(ie, { title: h ? "Unpin" : "Pin", children: /* @__PURE__ */ t(ue, { size: "small", onClick: j, children: h ? /* @__PURE__ */ t(lt, { fontSize: "small" }) : /* @__PURE__ */ t(st, { fontSize: "small" }) }) }) : null
                   ] }),
-                  c || b.length ? /* @__PURE__ */ m(q, { direction: "row", spacing: 1, flexWrap: "wrap", children: [
-                    c ? /* @__PURE__ */ e(ae, { size: "small", variant: "outlined", startIcon: /* @__PURE__ */ e(it, {}), onClick: F, children: Y ? "Copied" : "Copy" }) : null,
-                    b.map((l) => /* @__PURE__ */ e(ae, { size: "small", variant: "contained", startIcon: l.icon, onClick: l.onClick, children: l.label }, l.id))
+                  u || f.length ? /* @__PURE__ */ m(V, { direction: "row", spacing: 1, flexWrap: "wrap", children: [
+                    u ? /* @__PURE__ */ t(ae, { size: "small", variant: "outlined", startIcon: /* @__PURE__ */ t(at, {}), onClick: O, children: N ? "Copied" : "Copy" }) : null,
+                    f.map((c) => /* @__PURE__ */ t(ae, { size: "small", variant: "contained", startIcon: c.icon, onClick: c.onClick, children: c.label }, c.id))
                   ] }) : null
                 ] }) })
               }
@@ -2345,24 +2346,176 @@ function Ir({
     )
   ] });
 }
+const fe = {
+  neutral: "#64748b",
+  good: "#059669",
+  warning: "#d97706",
+  danger: "#dc2626"
+};
+function zt(e, n, l) {
+  return Math.min(Math.max(e, n), l);
+}
+function St(e) {
+  return e.color ?? fe[e.status ?? "neutral"];
+}
+function At(e) {
+  return typeof e.delta == "number" ? e.delta : typeof e.value == "number" && typeof e.previousValue == "number" && e.previousValue !== 0 ? (e.value - e.previousValue) / Math.abs(e.previousValue) * 100 : null;
+}
+function Rt(e) {
+  return e.formatter ? e.formatter(e.value) : typeof e.value == "number" ? new Intl.NumberFormat("en", { maximumFractionDigits: 1 }).format(e.value) : e.value;
+}
+function Lt(e, n, l) {
+  if (e.length < 2)
+    return "";
+  const s = Math.min(...e), u = Math.max(...e) - s || 1;
+  return e.map((x, p) => {
+    const i = p / (e.length - 1) * n, y = l - (x - s) / u * l;
+    return `${p === 0 ? "M" : "L"} ${i.toFixed(2)} ${y.toFixed(2)}`;
+  }).join(" ");
+}
+function Pt({ values: e, color: n }) {
+  const f = Lt(e, 180, 54), u = f ? `${f} L 180 54 L 0 54 Z` : "";
+  return /* @__PURE__ */ m(d, { component: "svg", viewBox: "0 0 180 54", sx: { display: "block", width: "100%", height: 54 }, children: [
+    /* @__PURE__ */ t(d, { component: "path", d: u, sx: { fill: Y(n, 0.14) } }),
+    /* @__PURE__ */ t(d, { component: "path", d: f, sx: { fill: "none", stroke: n, strokeWidth: 4, strokeLinecap: "round", strokeLinejoin: "round" } }),
+    e.length ? /* @__PURE__ */ t(
+      d,
+      {
+        component: "circle",
+        cx: 180,
+        cy: 54 - (e[e.length - 1] - Math.min(...e)) / (Math.max(...e) - Math.min(...e) || 1) * 54,
+        r: 4,
+        sx: { fill: n }
+      }
+    ) : null
+  ] });
+}
+function Dr({
+  metrics: e,
+  title: n,
+  subtitle: l,
+  columns: s = 3,
+  density: f = "comfortable",
+  showSparklines: u = !0,
+  showProgress: x = !0,
+  sx: p,
+  ...i
+}) {
+  const y = f === "compact";
+  return /* @__PURE__ */ m(
+    d,
+    {
+      ...i,
+      sx: [
+        {
+          width: "100%"
+        },
+        ...Array.isArray(p) ? p : p ? [p] : []
+      ],
+      children: [
+        n || l ? /* @__PURE__ */ m(d, { sx: { mb: 2 }, children: [
+          n ? /* @__PURE__ */ t(E, { variant: "h6", fontWeight: 900, children: n }) : null,
+          l ? /* @__PURE__ */ t(E, { variant: "body2", color: "text.secondary", children: l }) : null
+        ] }) : null,
+        /* @__PURE__ */ t(
+          d,
+          {
+            sx: {
+              display: "grid",
+              gridTemplateColumns: {
+                xs: "1fr",
+                sm: "repeat(2, minmax(0, 1fr))",
+                lg: `repeat(${s}, minmax(0, 1fr))`
+              },
+              gap: y ? 1.25 : 2
+            },
+            children: e.map((g) => {
+              const w = St(g), v = At(g), P = (v ?? 0) >= 0;
+              return /* @__PURE__ */ t(
+                Me,
+                {
+                  variant: "outlined",
+                  sx: {
+                    p: y ? 1.5 : 2,
+                    borderRadius: 1,
+                    overflow: "hidden",
+                    position: "relative",
+                    borderColor: Y(w, 0.32),
+                    background: `linear-gradient(180deg, ${Y(w, 0.08)}, rgba(255,255,255,0) 42%)`
+                  },
+                  children: /* @__PURE__ */ m(V, { spacing: y ? 1 : 1.5, children: [
+                    /* @__PURE__ */ m(V, { direction: "row", spacing: 1, alignItems: "flex-start", justifyContent: "space-between", children: [
+                      /* @__PURE__ */ m(d, { sx: { minWidth: 0 }, children: [
+                        /* @__PURE__ */ t(E, { variant: "caption", color: "text.secondary", fontWeight: 850, sx: { textTransform: "uppercase" }, children: g.label }),
+                        /* @__PURE__ */ m(V, { direction: "row", spacing: 0.75, alignItems: "baseline", sx: { mt: 0.5 }, children: [
+                          /* @__PURE__ */ t(E, { variant: y ? "h5" : "h4", fontWeight: 950, sx: { lineHeight: 1 }, children: Rt(g) }),
+                          g.unit ? /* @__PURE__ */ t(E, { variant: "body2", color: "text.secondary", fontWeight: 800, children: g.unit }) : null
+                        ] })
+                      ] }),
+                      g.icon ? /* @__PURE__ */ t(d, { sx: { color: w, display: "grid", placeItems: "center", mt: 0.25 }, children: g.icon }) : null
+                    ] }),
+                    /* @__PURE__ */ m(V, { direction: "row", spacing: 1, alignItems: "center", justifyContent: "space-between", children: [
+                      v !== null ? /* @__PURE__ */ t(
+                        we,
+                        {
+                          size: "small",
+                          label: `${P ? "+" : ""}${v.toFixed(1)}%`,
+                          sx: {
+                            color: P ? fe.good : fe.danger,
+                            bgcolor: Y(P ? fe.good : fe.danger, 0.12),
+                            fontWeight: 850
+                          }
+                        }
+                      ) : /* @__PURE__ */ t(d, {}),
+                      g.helper ? /* @__PURE__ */ t(E, { variant: "caption", color: "text.secondary", textAlign: "right", children: g.helper }) : null
+                    ] }),
+                    u && g.trend?.length ? /* @__PURE__ */ t(Pt, { values: g.trend, color: w }) : null,
+                    x && typeof g.progress == "number" ? /* @__PURE__ */ t(
+                      ut,
+                      {
+                        variant: "determinate",
+                        value: zt(g.progress, 0, 100),
+                        sx: {
+                          height: 8,
+                          borderRadius: 999,
+                          bgcolor: Y(w, 0.14),
+                          "& .MuiLinearProgress-bar": {
+                            bgcolor: w,
+                            borderRadius: 999
+                          }
+                        }
+                      }
+                    ) : null
+                  ] })
+                },
+                g.id
+              );
+            })
+          }
+        )
+      ]
+    }
+  );
+}
 export {
-  xr as BeforeAfterSlider,
-  sr as CodeViewer,
-  vr as ColorPicker,
-  pr as CommandPalette,
-  lr as ComponentExample,
-  ur as DockBar,
-  cr as DraggableBox,
-  kr as FileDropZone,
-  fr as FloatingToolbar,
-  dr as GlassBox,
-  Cr as InfiniteCanvas,
-  wr as InspectorPanel,
-  br as MagneticCard,
-  mr as NodeCanvas,
-  yr as ResizableFrame,
-  Ir as SmartTooltip,
-  hr as SplitPane,
-  gr as SpotlightPanel,
-  $r as TimelineScrubber
+  zr as BeforeAfterSlider,
+  mr as CodeViewer,
+  Rr as ColorPicker,
+  vr as CommandPalette,
+  br as ComponentExample,
+  Dr as DataCardGrid,
+  wr as DockBar,
+  xr as DraggableBox,
+  Lr as FileDropZone,
+  kr as FloatingToolbar,
+  yr as GlassBox,
+  Tr as InfiniteCanvas,
+  Ar as InspectorPanel,
+  Cr as MagneticCard,
+  Mr as NodeCanvas,
+  Sr as ResizableFrame,
+  Wr as SmartTooltip,
+  $r as SplitPane,
+  Ir as SpotlightPanel,
+  Pr as TimelineScrubber
 };