@mickyballadelli/react-things 0.1.0

package/dist/react-things-ui.js

@@ -0,0 +1,2368 @@
+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 ie from "@mui/material/Tooltip";
+import N 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 _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 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 ae from "@mui/material/Button";
+import tt 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 }) {
+  return /* @__PURE__ */ m(
+    ne,
+    {
+      sx: {
+        border: 1,
+        borderColor: "divider",
+        borderRadius: 1,
+        p: 2,
+        bgcolor: "background.paper"
+      },
+      children: [
+        /* @__PURE__ */ e($e, { variant: "subtitle1", fontWeight: 700, children: t }),
+        n ? /* @__PURE__ */ e(ne, { sx: { mt: 1 }, children: n }) : null
+      ]
+    }
+  );
+}
+const ve = "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace", Le = 12, dt = {
+  c: "#659ad2",
+  cpp: "#00599c",
+  cplusplus: "#00599c",
+  "c++": "#00599c",
+  typescript: "#3178c6",
+  ts: "#3178c6",
+  tsx: "#3178c6",
+  javascript: "#f7df1e",
+  js: "#f7df1e",
+  jsx: "#f7df1e",
+  java: "#e76f00",
+  powershell: "#5391fe",
+  ps1: "#5391fe",
+  rust: "#dea584",
+  rs: "#dea584",
+  go: "#00add8",
+  golang: "#00add8",
+  shell: "#89e051",
+  sh: "#89e051",
+  bash: "#89e051",
+  zsh: "#89e051",
+  python: "#3776ab",
+  py: "#3776ab",
+  csharp: "#9b4f96",
+  "c#": "#9b4f96",
+  cs: "#9b4f96",
+  php: "#777bb4",
+  ruby: "#cc342d",
+  rb: "#cc342d",
+  swift: "#f05138",
+  kotlin: "#a97bff",
+  kt: "#a97bff",
+  sql: "#336791",
+  html: "#e34f26",
+  css: "#1572b6",
+  dart: "#0175c2"
+};
+function ut(t) {
+  return t.trim().replace(/^\./, "").toLowerCase().replace(/\s+/g, "");
+}
+function pt(t) {
+  return dt[ut(t)] ?? "#93c5fd";
+}
+function ht(t) {
+  return t.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(t) {
+  return t.split(/(\s+|<\/?[A-Z][\w.]*|['"`][^'"`]*['"`]|\d*\.?\d+|[A-Za-z_$][\w$-]*|[{}()[\].,:;=<>/]+)/g).map((n) => ft(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);
+  return /* @__PURE__ */ m(ne, { children: [
+    /* @__PURE__ */ m(
+      ne,
+      {
+        sx: {
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "space-between",
+          px: 1.5,
+          py: 1,
+          bgcolor: "#111827",
+          color: "#d1d5db",
+          borderTopLeftRadius: 4,
+          borderTopRightRadius: 4
+        },
+        children: [
+          /* @__PURE__ */ e($e, { variant: "caption", fontWeight: 800, children: t }),
+          /* @__PURE__ */ e(
+            $e,
+            {
+              variant: "caption",
+              sx: {
+                fontFamily: "monospace",
+                color: x,
+                textTransform: "lowercase"
+              },
+              children: n
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ m(
+      ne,
+      {
+        sx: {
+          display: "grid",
+          gridTemplateColumns: "48px 1fr",
+          minHeight: b,
+          bgcolor: "#0f172a",
+          borderBottomLeftRadius: 4,
+          borderBottomRightRadius: 4,
+          overflow: "hidden"
+        },
+        children: [
+          /* @__PURE__ */ e(
+            ne,
+            {
+              component: "pre",
+              "aria-hidden": "true",
+              sx: {
+                m: 0,
+                px: 1.5,
+                py: 1.5,
+                color: "#64748b",
+                bgcolor: "#111827",
+                fontFamily: ve,
+                fontSize: 14,
+                lineHeight: 1.6,
+                textAlign: "right",
+                userSelect: "none"
+              },
+              children: f
+            }
+          ),
+          /* @__PURE__ */ m(
+            ne,
+            {
+              sx: {
+                position: "relative",
+                minHeight: b,
+                bgcolor: "#0f172a",
+                overflow: "auto"
+              },
+              children: [
+                /* @__PURE__ */ e(
+                  ne,
+                  {
+                    component: "pre",
+                    "aria-hidden": "true",
+                    dangerouslySetInnerHTML: { __html: a },
+                    sx: {
+                      position: "absolute",
+                      inset: 0,
+                      m: 0,
+                      p: `${Le}px`,
+                      boxSizing: "border-box",
+                      pointerEvents: "none",
+                      color: "#e5e7eb",
+                      fontFamily: ve,
+                      fontSize: 14,
+                      lineHeight: 1.6,
+                      tabSize: 2,
+                      whiteSpace: "pre-wrap",
+                      overflowWrap: "normal"
+                    }
+                  }
+                ),
+                /* @__PURE__ */ e(
+                  ne,
+                  {
+                    component: "textarea",
+                    "aria-label": `${t} code editor`,
+                    spellCheck: !1,
+                    value: c,
+                    onChange: (y) => s(y.target.value),
+                    sx: {
+                      position: "relative",
+                      width: "100%",
+                      minWidth: 0,
+                      minHeight: b,
+                      resize: "vertical",
+                      border: 0,
+                      outline: 0,
+                      p: `${Le}px`,
+                      boxSizing: "border-box",
+                      color: "transparent",
+                      WebkitTextFillColor: "transparent",
+                      bgcolor: "transparent",
+                      caretColor: "#60a5fa",
+                      fontFamily: ve,
+                      fontSize: 14,
+                      lineHeight: 1.6,
+                      tabSize: 2,
+                      whiteSpace: "pre-wrap",
+                      overflow: "auto",
+                      textShadow: "none",
+                      MozOsxFontSmoothing: "auto",
+                      "&::selection": {
+                        color: "transparent",
+                        WebkitTextFillColor: "transparent",
+                        bgcolor: "rgba(96, 165, 250, 0.35)"
+                      }
+                    }
+                  }
+                )
+              ]
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}
+function cr({
+  children: t,
+  initialPosition: n = { x: 50, y: 50 },
+  dragSx: d,
+  onPositionChange: s,
+  onDraggingChange: b,
+  sx: c,
+  ...g
+}) {
+  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)
+      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
+    });
+  }, []);
+  function o(u, z) {
+    y(u), s?.(u, z);
+  }
+  function R(u, z, Y = k) {
+    const E = f.current, $ = a.current;
+    if (!E || !$)
+      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,
+      containerBackgroundImage: L.backgroundImage,
+      containerBackgroundSize: L.backgroundSize,
+      containerBackgroundPosition: L.backgroundPosition
+    });
+  }
+  return /* @__PURE__ */ e(
+    p,
+    {
+      ...g,
+      ref: f,
+      sx: [
+        {
+          position: "relative",
+          overflow: "hidden",
+          touchAction: "none"
+        },
+        ...Array.isArray(c) ? c : c ? [c] : []
+      ],
+      onPointerMove: (u) => {
+        B && R(u.clientX, u.clientY);
+      },
+      onPointerUp: (u) => {
+        C(!1), b?.(!1), u.currentTarget.releasePointerCapture(u.pointerId);
+      },
+      onPointerCancel: () => {
+        C(!1), b?.(!1);
+      },
+      children: /* @__PURE__ */ e(
+        p,
+        {
+          ref: a,
+          sx: [
+            {
+              position: "absolute",
+              left: `${x.x}%`,
+              top: `${x.y}%`,
+              transform: "translate(-50%, -50%)",
+              cursor: B ? "grabbing" : "grab",
+              userSelect: "none"
+            },
+            ...Array.isArray(d) ? d : d ? [d] : []
+          ],
+          onPointerDown: (u) => {
+            const z = u.currentTarget.getBoundingClientRect(), Y = {
+              x: u.clientX - z.left,
+              y: u.clientY - z.top
+            };
+            C(!0), b?.(!0), v(Y), u.currentTarget.setPointerCapture(u.pointerId), R(u.clientX, u.clientY, Y);
+          },
+          children: t
+        }
+      )
+    }
+  );
+}
+function Pe(t) {
+  return Math.min(Math.max(t, 0), 1);
+}
+function dr({
+  transparency: t = 0.36,
+  fill: n = 0.72,
+  liquidColor: d = "#39b8ff",
+  glassColor: s = "#ffffff",
+  motion: b = 0,
+  refractionActive: c = !0,
+  children: g,
+  sx: f,
+  ...a
+}) {
+  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;
+  return /* @__PURE__ */ m(
+    p,
+    {
+      ...a,
+      sx: [
+        {
+          position: "relative",
+          overflow: "hidden",
+          border: 1,
+          borderColor: H(s, 0.48),
+          borderRadius: 2,
+          minHeight: 160,
+          p: 3,
+          color: "common.white",
+          bgcolor: H(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)}
+          `,
+          backdropFilter: "blur(12px) saturate(170%) contrast(108%)",
+          WebkitBackdropFilter: "blur(12px) saturate(170%) contrast(108%)",
+          "&::before": {
+            content: '""',
+            position: "absolute",
+            left: 0,
+            right: 0,
+            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%)
+            `,
+            opacity: 0.95,
+            boxShadow: `
+              inset 0 18px 28px ${H(s, 0.12 + k * 0.16)},
+              inset 0 -34px 44px ${H("#032536", k * 0.22)}
+            `
+          },
+          "&::after": {
+            content: '""',
+            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%)
+            `,
+            pointerEvents: "none"
+          },
+          "& .GlassBox-liquidLens": {
+            position: "absolute",
+            inset: 0,
+            zIndex: 1,
+            pointerEvents: "none",
+            backgroundImage: "var(--glassbox-refraction-background, none)",
+            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,
+            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%)`
+          },
+          "& .GlassBox-refractionOffset": {
+            position: "absolute",
+            inset: 0,
+            zIndex: 2,
+            pointerEvents: "none",
+            opacity: z ? 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%)
+            `,
+            transition: "opacity 120ms ease-out",
+            maskImage: `linear-gradient(to bottom, transparent 0, transparent ${C}, black calc(${C} + 18px), black 100%)`,
+            WebkitMaskImage: `linear-gradient(to bottom, transparent 0, transparent ${C}, black calc(${C} + 18px), black 100%)`
+          },
+          "& .GlassBox-content": {
+            position: "relative",
+            zIndex: 3,
+            textShadow: `0 1px 10px ${H("#00121d", 0.36)}`
+          },
+          "& > *": {
+            position: "relative",
+            zIndex: 3
+          }
+        },
+        ...Array.isArray(f) ? f : f ? [f] : []
+      ],
+      children: [
+        /* @__PURE__ */ e(
+          p,
+          {
+            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(
+                "feTurbulence",
+                {
+                  type: "fractalNoise",
+                  baseFrequency: `${R} ${R * 2.6}`,
+                  numOctaves: "2",
+                  seed: o,
+                  result: "liquidNoise"
+                }
+              ),
+              /* @__PURE__ */ e(
+                "feDisplacementMap",
+                {
+                  in: "SourceGraphic",
+                  in2: "liquidNoise",
+                  scale: u,
+                  xChannelSelector: "R",
+                  yChannelSelector: "G"
+                }
+              )
+            ] })
+          }
+        ),
+        /* @__PURE__ */ e(p, { className: "GlassBox-liquidLens" }),
+        /* @__PURE__ */ e(p, { className: "GlassBox-refractionOffset" }),
+        /* @__PURE__ */ e(p, { className: "GlassBox-content", children: g })
+      ]
+    }
+  );
+}
+function gt(t, n, d) {
+  return Math.min(Math.max(t, n), d);
+}
+function ur({
+  items: t,
+  iconSize: n = 52,
+  magnification: d = 1.7,
+  gap: s = 10,
+  tooltip: b = !0,
+  sx: c,
+  ...g
+}) {
+  const [f, a] = T(null);
+  return /* @__PURE__ */ e(
+    p,
+    {
+      ...g,
+      role: "toolbar",
+      sx: [
+        {
+          display: "inline-flex",
+          alignItems: "flex-end",
+          gap: `${s}px`,
+          p: 1,
+          border: 1,
+          borderColor: "rgba(255,255,255,0.5)",
+          borderRadius: 3,
+          bgcolor: "rgba(255,255,255,0.34)",
+          boxShadow: "0 18px 44px rgba(15, 23, 42, 0.22)",
+          backdropFilter: "blur(18px) saturate(150%)",
+          WebkitBackdropFilter: "blur(18px) saturate(150%)"
+        },
+        ...Array.isArray(c) ? c : c ? [c] : []
+      ],
+      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,
+          {
+            component: "button",
+            type: "button",
+            "aria-label": x.label,
+            onClick: x.onClick,
+            onMouseEnter: () => a(y),
+            sx: {
+              width: n,
+              height: n,
+              display: "grid",
+              placeItems: "center",
+              flex: "0 0 auto",
+              border: 0,
+              borderRadius: 2,
+              p: 0,
+              color: "inherit",
+              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})`,
+              transformOrigin: "bottom center",
+              transition: "transform 130ms ease-out, background-color 130ms ease-out",
+              "&:focus-visible": {
+                outline: "2px solid #2563eb",
+                outlineOffset: 3
+              },
+              "&:active": {
+                bgcolor: "rgba(255,255,255,0.9)"
+              }
+            },
+            children: /* @__PURE__ */ e(
+              N,
+              {
+                component: "span",
+                "aria-hidden": "true",
+                sx: {
+                  display: "grid",
+                  placeItems: "center",
+                  fontSize: Math.round(n * 0.52),
+                  lineHeight: 1
+                },
+                children: x.icon
+              }
+            )
+          },
+          x.id
+        );
+        return b ? /* @__PURE__ */ e(ie, { title: x.label, placement: "top", arrow: !0, children: o }, x.id) : o;
+      })
+    }
+  );
+}
+function Ne(t) {
+  return t.toLowerCase().trim();
+}
+function mt(t) {
+  return Ne([
+    t.label,
+    t.description,
+    t.group,
+    t.parentId,
+    ...t.keywords ?? []
+  ].filter(Boolean).join(" "));
+}
+function Te(t) {
+  return Array.from(new Set(t.map((n) => n.group).filter(Boolean)));
+}
+function pr({
+  items: t,
+  variant: n = "list",
+  selectedId: d,
+  placeholder: s = "Search",
+  emptyText: b = "No items found",
+  maxResults: c,
+  showSearch: g = !0,
+  dense: f = !1,
+  expandedGroups: a,
+  defaultExpandedGroups: x,
+  onExpandedGroupsChange: y,
+  onSelect: k,
+  sx: v,
+  ...B
+}) {
+  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);
+  }
+  function l(i) {
+    a === void 0 && E(i), y?.(i);
+  }
+  function M(i) {
+    l(W.includes(i) ? W.filter((P) => P !== i) : [...W, i]);
+  }
+  function h(i, P = 0) {
+    const Q = i.id === d;
+    return /* @__PURE__ */ m(
+      Ae,
+      {
+        selected: Q,
+        dense: f,
+        onClick: () => F(i),
+        sx: {
+          borderRadius: 1,
+          pl: 1.25 + P * 2,
+          "&.Mui-selected": {
+            bgcolor: "action.selected",
+            color: "primary.main"
+          },
+          "&.Mui-selected:hover, &:hover": {
+            bgcolor: "action.hover"
+          }
+        },
+        children: [
+          i.icon ? /* @__PURE__ */ e(Ue, { sx: { minWidth: 34, color: "inherit" }, children: i.icon }) : null,
+          /* @__PURE__ */ e(
+            Re,
+            {
+              primary: i.label,
+              secondary: i.description,
+              primaryTypographyProps: { fontWeight: Q ? 850 : 700 },
+              secondaryTypographyProps: { color: "text.secondary" }
+            }
+          )
+        ]
+      },
+      i.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 D() {
+    return w.length ? L.length ? L.map((i) => {
+      const P = $ || W.includes(i);
+      return /* @__PURE__ */ m(p, { children: [
+        /* @__PURE__ */ m(
+          Ae,
+          {
+            dense: f,
+            onClick: () => M(i),
+            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,
+                {
+                  primary: i,
+                  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 });
+  }
+  return /* @__PURE__ */ m(
+    p,
+    {
+      ...B,
+      sx: [
+        {
+          display: "flex",
+          flexDirection: "column",
+          gap: 1,
+          minWidth: 0
+        },
+        ...Array.isArray(v) ? v : v ? [v] : []
+      ],
+      children: [
+        g ? /* @__PURE__ */ e(
+          p,
+          {
+            sx: {
+              px: 1.25,
+              py: 0.75,
+              border: 1,
+              borderColor: "divider",
+              borderRadius: 1,
+              bgcolor: "background.paper"
+            },
+            children: /* @__PURE__ */ e(
+              Ve,
+              {
+                fullWidth: !0,
+                value: o,
+                placeholder: s,
+                onChange: (i) => {
+                  R(i.target.value), z(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]));
+                },
+                sx: { fontSize: 14 }
+              }
+            )
+          }
+        ) : null,
+        /* @__PURE__ */ e(qe, { disablePadding: !0, dense: f, sx: { overflow: "auto" }, children: n === "tree" ? D() : S() })
+      ]
+    }
+  );
+}
+function We(t, n, d) {
+  return Math.min(Math.max(t, n), d);
+}
+function xt(t) {
+  if (!t || typeof window > "u")
+    return null;
+  const n = window.localStorage.getItem(t), d = n === null ? Number.NaN : Number(n);
+  return Number.isFinite(d) ? d : null;
+}
+function hr({
+  first: t,
+  second: n,
+  orientation: d = "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,
+  collapsed: v,
+  defaultCollapsed: B = null,
+  collapsedSize: C = 0,
+  persistKey: o,
+  keyboardStep: R = 5,
+  onSizeChange: u,
+  onCollapsedChange: z,
+  onDraggingChange: Y,
+  dividerLabel: E = "Resize panels",
+  sx: $,
+  ...W
+}) {
+  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);
+  }
+  function ee(I, te) {
+    const re = w.current;
+    if (!re)
+      return;
+    const J = re.getBoundingClientRect(), ce = S ? (I - J.left) / J.width * 100 : (te - J.top) / J.height * 100;
+    V(ce);
+  }
+  function U(I) {
+    V(i + I);
+  }
+  function K() {
+    V(k);
+  }
+  function he(I) {
+    be(P === I ? null : I);
+  }
+  function be(I) {
+    v === void 0 && l(I), z?.(I);
+  }
+  return /* @__PURE__ */ m(
+    p,
+    {
+      ...W,
+      ref: w,
+      sx: [
+        {
+          display: "grid",
+          gridTemplateColumns: S ? `${Q}% ${a}px 1fr` : "1fr",
+          gridTemplateRows: S ? "1fr" : `${Q}% ${a}px 1fr`,
+          minHeight: 280,
+          overflow: "hidden",
+          userSelect: M ? "none" : void 0
+        },
+        ...Array.isArray($) ? $ : $ ? [$] : []
+      ],
+      onPointerMove: (I) => {
+        M && ee(I.clientX, I.clientY);
+      },
+      onPointerUp: () => {
+        h(!1);
+      },
+      onPointerCancel: () => h(!1),
+      children: [
+        /* @__PURE__ */ e(p, { sx: { minWidth: 0, minHeight: 0, overflow: "auto", display: le ? "none" : void 0 }, children: t }),
+        /* @__PURE__ */ e(
+          p,
+          {
+            role: "separator",
+            "aria-label": E,
+            "aria-orientation": S ? "vertical" : "horizontal",
+            "aria-valuemin": g,
+            "aria-valuemax": f,
+            "aria-valuenow": Math.round(i),
+            tabIndex: 0,
+            onPointerDown: (I) => {
+              h(!0), I.currentTarget.setPointerCapture(I.pointerId), ee(I.clientX, I.clientY);
+            },
+            onPointerUp: (I) => {
+              h(!1), I.currentTarget.releasePointerCapture(I.pointerId);
+            },
+            onDoubleClick: K,
+            onKeyDown: (I) => {
+              I.key === "Enter" && (K(), I.preventDefault()), I.key === "Home" && (he("first"), I.preventDefault()), I.key === "End" && (he("second"), I.preventDefault()), (I.key === "ArrowLeft" || I.key === "ArrowUp") && (U(-R), I.preventDefault()), (I.key === "ArrowRight" || I.key === "ArrowDown") && (U(R), I.preventDefault());
+            },
+            sx: {
+              position: "relative",
+              bgcolor: M ? "primary.main" : "divider",
+              cursor: S ? "col-resize" : "row-resize",
+              touchAction: "none",
+              transition: "background-color 120ms ease",
+              "&:hover": {
+                bgcolor: "primary.main"
+              },
+              "&:focus-visible": {
+                outline: "2px solid",
+                outlineColor: "primary.main",
+                outlineOffset: -2
+              },
+              "&::after": {
+                content: '""',
+                position: "absolute",
+                inset: S ? "30% -4px" : "-4px 30%",
+                borderRadius: 999,
+                bgcolor: M ? "primary.contrastText" : "text.disabled",
+                opacity: 0.55
+              }
+            }
+          }
+        ),
+        /* @__PURE__ */ e(p, { sx: { minWidth: 0, minHeight: 0, overflow: "auto", display: se ? "none" : void 0 }, children: n })
+      ]
+    }
+  );
+}
+function yt(t, n) {
+  return n ?? t?.getBoundingClientRect() ?? null;
+}
+function fr({
+  open: t,
+  children: n,
+  anchorEl: d,
+  anchorRect: s,
+  containerRef: b,
+  placement: c = "top",
+  offset: g = 8,
+  boundaryPadding: f = 8,
+  autoUpdate: a = !0,
+  arrow: x = !0,
+  sx: y,
+  ...k
+}) {
+  const v = oe(null), [B, C] = T({ left: -9999, top: -9999 }), o = je(() => {
+    if (!t)
+      return;
+    const R = yt(d, s), u = v.current;
+    if (!R || !u)
+      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(() => {
+    o();
+  }, [o]), fe(() => {
+    if (!(!t || !a))
+      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,
+    {
+      ...k,
+      ref: v,
+      role: "toolbar",
+      sx: [
+        {
+          position: b ? "absolute" : "fixed",
+          left: B.left,
+          top: B.top,
+          zIndex: 1300,
+          display: "inline-flex",
+          alignItems: "center",
+          gap: 0.5,
+          p: 0.5,
+          borderRadius: 1.5,
+          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)",
+          backdropFilter: "blur(12px)",
+          "&::after": x ? {
+            content: '""',
+            position: "absolute",
+            left: "50%",
+            width: 10,
+            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
+          } : void 0
+        },
+        ...Array.isArray(y) ? y : y ? [y] : []
+      ],
+      children: n
+    }
+  ) : null;
+}
+function br({
+  strength: t = 18,
+  tilt: n = 10,
+  lift: d = 10,
+  glare: s = !0,
+  perspective: b = 900,
+  sx: c,
+  children: g,
+  ...f
+}) {
+  const [a, x] = T({
+    x: 0,
+    y: 0,
+    rotateX: 0,
+    rotateY: 0,
+    glareX: 50,
+    glareY: 50,
+    active: !1
+  });
+  return /* @__PURE__ */ e(
+    p,
+    {
+      ...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({
+          x: C,
+          y: o,
+          rotateX: (0.5 - B) * n,
+          rotateY: (v - 0.5) * n,
+          glareX: v * 100,
+          glareY: B * 100,
+          active: !0
+        });
+      },
+      onMouseLeave: () => x({
+        x: 0,
+        y: 0,
+        rotateX: 0,
+        rotateY: 0,
+        glareX: 50,
+        glareY: 50,
+        active: !1
+      }),
+      sx: [
+        {
+          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)
+          `,
+          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",
+          willChange: "transform",
+          boxShadow: a.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,
+            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%)`,
+            mixBlendMode: "screen"
+          } : void 0,
+          "& > *": {
+            position: "relative",
+            zIndex: 1,
+            transform: a.active ? "translateZ(24px)" : "translateZ(0)",
+            transition: "transform 180ms ease"
+          }
+        },
+        ...Array.isArray(c) ? c : c ? [c] : []
+      ],
+      children: g
+    }
+  );
+}
+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,
+    {
+      ...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
+        });
+      },
+      sx: [
+        {
+          position: "relative",
+          overflow: "hidden",
+          "&::after": {
+            content: '""',
+            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%)`
+          }
+        },
+        ...Array.isArray(d) ? d : d ? [d] : []
+      ],
+      children: s
+    }
+  );
+}
+function Be(t, n) {
+  return Math.round(t / 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}`;
+  }
+  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}`;
+}
+function mr({
+  nodes: t,
+  connections: n = [],
+  nodeWidth: d = 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"],
+  renderNode: v,
+  onNodesChange: B,
+  onConnectionsChange: C,
+  onNodeMove: o,
+  onNodeSelect: R,
+  sx: u,
+  ...z
+}) {
+  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 }]))
+    }));
+  }, [y, be]), fe(() => {
+    y || W(n);
+  }, [I, y]);
+  function te(r) {
+    E(r), B?.(r);
+  }
+  function re(r) {
+    W(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);
+  }
+  function ce() {
+    const r = w.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,
+      [A.id]: { x: A.x, y: A.y }
+    })), M(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(r) {
+    U && te(w.map((A) => A.id === U ? { ...A, ...r } : A));
+  }
+  function Ie() {
+    if (!U || !D || U === D)
+      return;
+    const r = {
+      from: U,
+      to: D,
+      type: P,
+      label: le,
+      color: P === "ellipse" ? "#db2777" : P === "step" ? "#059669" : "#2563eb"
+    }, A = [
+      ...L.filter((O) => !(O.from === U && O.to === D)),
+      r
+    ];
+    re(A), i(""), se(""), ee(A.indexOf(r));
+  }
+  function xe(r, A) {
+    const O = L[r];
+    if (!O)
+      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(_);
+  }
+  function Oe(r) {
+    re(L.filter((A, O) => O !== r)), ee(null);
+  }
+  return /* @__PURE__ */ m(
+    p,
+    {
+      ...z,
+      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
+        },
+        ...Array.isArray(u) ? u : u ? [u] : []
+      ],
+      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)
+            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;
+          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
+          ] }, `${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,
+            {
+              role: "button",
+              tabIndex: 0,
+              sx: {
+                position: "absolute",
+                left: A.x,
+                top: A.y,
+                width: d,
+                height: s,
+                display: "grid",
+                placeItems: "center",
+                border: O ? 2 : 1,
+                borderColor: O ? "primary.main" : "divider",
+                borderRadius: 1,
+                bgcolor: r.color ?? "background.paper",
+                cursor: b === "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)",
+                touchAction: "none"
+              },
+              onPointerDown: (X) => {
+                if (M(r.id), ee(null), y && S(!0), R?.(r), b === "readonly")
+                  return;
+                const _ = X.clientX, G = X.clientY, de = j[r.id];
+                X.currentTarget.setPointerCapture(X.pointerId);
+                function ze(Me) {
+                  J(r.id, {
+                    x: de.x + Me.clientX - _,
+                    y: de.y + Me.clientY - G
+                  });
+                }
+                function Se() {
+                  window.removeEventListener("pointermove", ze), window.removeEventListener("pointerup", Se);
+                }
+                window.addEventListener("pointermove", ze), window.addEventListener("pointerup", Se);
+              },
+              onKeyDown: (X) => {
+                if (b === "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());
+              },
+              children: v ? v(r, O) : /* @__PURE__ */ e(N, { fontWeight: 800, children: r.label })
+            },
+            r.id
+          );
+        }),
+        y && K && h ? /* @__PURE__ */ e(
+          p,
+          {
+            sx: {
+              position: "absolute",
+              right: 12,
+              top: 12,
+              zIndex: 20,
+              width: 340,
+              maxWidth: "calc(100% - 24px)",
+              maxHeight: "calc(100% - 24px)",
+              overflow: "auto",
+              border: 1,
+              borderColor: "divider",
+              borderRadius: 1,
+              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" }) }) })
+              ] }),
+              /* @__PURE__ */ m(p, { sx: { display: "grid", gridTemplateColumns: "1fr 96px", gap: 1 }, children: [
+                /* @__PURE__ */ e(
+                  Z,
+                  {
+                    size: "small",
+                    label: "Label",
+                    value: K?.label ?? "",
+                    disabled: !K,
+                    onChange: (r) => me({ label: r.target.value })
+                  }
+                ),
+                /* @__PURE__ */ e(
+                  Z,
+                  {
+                    size: "small",
+                    label: "Color",
+                    type: "color",
+                    value: K?.color ?? "#ffffff",
+                    disabled: !K,
+                    onChange: (r) => me({ 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(
+                      Z,
+                      {
+                        select: !0,
+                        size: "small",
+                        label: "To",
+                        value: D,
+                        disabled: !K,
+                        onChange: (r) => i(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__ */ e(ie, { title: `Add link from ${K?.label ?? "box"}`, children: /* @__PURE__ */ e("span", { children: /* @__PURE__ */ e(
+                      ue,
+                      {
+                        size: "small",
+                        color: "primary",
+                        disabled: !K || !D,
+                        onClick: Ie,
+                        sx: { width: 32, height: 32, border: 1, borderColor: "divider", borderRadius: 1 },
+                        children: /* @__PURE__ */ e(Ze, { 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;
+                    return /* @__PURE__ */ m(
+                      p,
+                      {
+                        sx: {
+                          width: "100%",
+                          display: "grid",
+                          gridTemplateColumns: "1fr 32px",
+                          gap: 0.5,
+                          alignItems: "center"
+                        },
+                        children: [
+                          /* @__PURE__ */ e(
+                            p,
+                            {
+                              component: "button",
+                              onClick: () => ee(A),
+                              sx: {
+                                px: 1,
+                                py: 0.75,
+                                minWidth: 0,
+                                border: 1,
+                                borderColor: _ ? "primary.main" : "divider",
+                                borderRadius: 1,
+                                bgcolor: _ ? "primary.main" : "background.paper",
+                                color: _ ? "primary.contrastText" : "text.primary",
+                                cursor: "pointer",
+                                font: "inherit",
+                                textAlign: "left"
+                              },
+                              children: (O?.label ?? r.from) + " -> " + (X?.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" }) }) })
+                        ]
+                      },
+                      `${r.from}-${r.to}-${A}`
+                    );
+                  }) : /* @__PURE__ */ e(N, { 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,
+                      {
+                        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))
+                      }
+                    ),
+                    /* @__PURE__ */ m(p, { sx: { display: "grid", gridTemplateColumns: "1fr 1fr", gap: 1 }, children: [
+                      /* @__PURE__ */ e(
+                        Z,
+                        {
+                          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))
+                        }
+                      ),
+                      /* @__PURE__ */ e(
+                        Z,
+                        {
+                          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))
+                        }
+                      )
+                    ] }),
+                    /* @__PURE__ */ e(
+                      Z,
+                      {
+                        size: "small",
+                        label: "Label",
+                        value: L[V].label ?? "",
+                        onChange: (r) => xe(V, { label: r.target.value })
+                      }
+                    )
+                  ] }) : /* @__PURE__ */ e(N, { variant: "body2", color: "text.secondary", children: "Pick a link." })
+                ] })
+              ] })
+            ] })
+          }
+        ) : null
+      ]
+    }
+  );
+}
+function xr({ before: t, after: n, initialPosition: d = 50, sx: s, ...b }) {
+  const [c, g] = T(d);
+  return /* @__PURE__ */ m(
+    p,
+    {
+      ...b,
+      sx: [
+        { position: "relative", overflow: "hidden", minHeight: 280 },
+        ...Array.isArray(s) ? s : s ? [s] : []
+      ],
+      onPointerMove: (f) => {
+        if (f.buttons !== 1)
+          return;
+        const a = f.currentTarget.getBoundingClientRect();
+        g((f.clientX - a.left) / a.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" } })
+      ]
+    }
+  );
+}
+function yr({
+  initialWidth: t = 320,
+  initialHeight: n = 220,
+  minWidth: d = 160,
+  minHeight: s = 120,
+  sx: b,
+  children: c,
+  ...g
+}) {
+  const [f, a] = T({ width: t, height: n });
+  return /* @__PURE__ */ m(
+    p,
+    {
+      ...g,
+      sx: [
+        {
+          position: "relative",
+          width: f.width,
+          height: f.height,
+          overflow: "auto",
+          border: 1,
+          borderColor: "divider",
+          borderRadius: 1,
+          bgcolor: "background.paper"
+        },
+        ...Array.isArray(b) ? b : b ? [b] : []
+      ],
+      children: [
+        c,
+        /* @__PURE__ */ e(
+          p,
+          {
+            sx: {
+              position: "absolute",
+              right: 4,
+              bottom: 4,
+              width: 28,
+              height: 28,
+              display: "grid",
+              placeItems: "center",
+              cursor: "nwse-resize",
+              color: "text.secondary",
+              bgcolor: "background.paper",
+              border: 1,
+              borderColor: "divider",
+              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)
+                });
+              }
+              function C() {
+                window.removeEventListener("pointermove", B), window.removeEventListener("pointerup", C);
+              }
+              window.addEventListener("pointermove", B), window.addEventListener("pointerup", C);
+            },
+            children: /* @__PURE__ */ e(et, { fontSize: "small" })
+          }
+        )
+      ]
+    }
+  );
+}
+function vt(t) {
+  return t.type === "boolean" ? t.value ? "On" : "Off" : `${t.value}${t.unit ? ` ${t.unit}` : ""}`;
+}
+function kt(t) {
+  return t.reduce((n, d) => {
+    const s = d.group ?? "Settings";
+    return {
+      ...n,
+      [s]: [...n[s] ?? [], d]
+    };
+  }, {});
+}
+function wr({
+  fields: t,
+  onChange: n,
+  title: d = "Inspector",
+  description: s,
+  density: b = "comfortable",
+  showValueSummary: c = !0,
+  showReset: g = !0,
+  sx: f
+}) {
+  const a = kt(t), x = b === "compact" ? 1.25 : 2, y = b === "compact" ? "small" : "medium";
+  function k(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
+      ] }),
+      s ? /* @__PURE__ */ e(N, { 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,
+              {
+                control: /* @__PURE__ */ e(
+                  tt,
+                  {
+                    checked: !!o.value,
+                    disabled: o.disabled,
+                    onChange: (u) => n?.(o.id, u.target.checked)
+                  }
+                ),
+                label: o.label
+              }
+            ),
+            R ? /* @__PURE__ */ e(ae, { size: "small", onClick: () => k(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,
+              {
+                fullWidth: !0,
+                size: y,
+                label: o.label,
+                type: "number",
+                value: o.value,
+                helperText: o.description,
+                disabled: o.disabled,
+                inputProps: {
+                  min: o.min,
+                  max: o.max,
+                  step: o.step
+                },
+                onChange: (u) => n?.(o.id, Number(u.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.min !== void 0 || o.max !== void 0 ? /* @__PURE__ */ e(
+            Fe,
+            {
+              value: Number(o.value),
+              min: o.min ?? 0,
+              max: o.max ?? 100,
+              step: o.step ?? 1,
+              disabled: o.disabled,
+              valueLabelDisplay: "auto",
+              onChange: (u, z) => n?.(o.id, Array.isArray(z) ? z[0] : z)
+            }
+          ) : null
+        ] }, o.id) : o.type === "select" ? /* @__PURE__ */ m(q, { direction: "row", spacing: 1, alignItems: "flex-start", children: [
+          /* @__PURE__ */ e(
+            Z,
+            {
+              select: !0,
+              fullWidth: !0,
+              size: y,
+              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))
+            }
+          ),
+          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,
+            {
+              fullWidth: !0,
+              size: y,
+              label: o.label,
+              value: o.value,
+              helperText: o.description,
+              disabled: o.disabled,
+              onChange: (u) => n?.(o.id, u.target.value),
+              InputProps: {
+                startAdornment: /* @__PURE__ */ e(
+                  p,
+                  {
+                    component: "input",
+                    type: "color",
+                    value: String(o.value),
+                    disabled: o.disabled,
+                    onChange: (u) => n?.(o.id, u.target.value),
+                    sx: {
+                      width: 28,
+                      height: 28,
+                      p: 0,
+                      mr: 1,
+                      border: 0,
+                      bgcolor: "transparent",
+                      cursor: o.disabled ? "default" : "pointer"
+                    }
+                  }
+                )
+              }
+            }
+          ),
+          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,
+            {
+              fullWidth: !0,
+              size: y,
+              label: o.label,
+              value: o.value,
+              helperText: o.description,
+              disabled: o.disabled,
+              onChange: (u) => n?.(o.id, u.target.value)
+            }
+          ),
+          R ? /* @__PURE__ */ e(ae, { size: "small", onClick: () => k(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)) })
+    ] }) : null
+  ] }) });
+}
+function vr({
+  value: t,
+  alpha: n = 1,
+  swatches: d = ["#2563eb", "#7c3aed", "#db2777", "#dc2626", "#f59e0b", "#059669"],
+  showValue: s = !0,
+  onChange: b,
+  onAlphaChange: c
+}) {
+  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,
+      {
+        sx: {
+          height: 96,
+          borderRadius: 1,
+          border: 1,
+          borderColor: "divider",
+          backgroundImage: "linear-gradient(45deg, #e5e7eb 25%, transparent 25%), linear-gradient(-45deg, #e5e7eb 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #e5e7eb 75%), linear-gradient(-45deg, transparent 75%, #e5e7eb 75%)",
+          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 } })
+      }
+    ),
+    /* @__PURE__ */ m(q, { direction: { xs: "column", sm: "row" }, spacing: 1.5, children: [
+      /* @__PURE__ */ e(
+        Z,
+        {
+          label: "Color",
+          type: "color",
+          value: t,
+          onChange: (a) => b?.(a.target.value),
+          sx: { width: { xs: "100%", sm: 120 } }
+        }
+      ),
+      /* @__PURE__ */ e(
+        Z,
+        {
+          label: "Hex",
+          value: t,
+          onChange: (a) => b?.(a.target.value),
+          fullWidth: !0
+        }
+      )
+    ] }),
+    /* @__PURE__ */ m(p, { children: [
+      /* @__PURE__ */ e(N, { variant: "caption", color: "text.secondary", fontWeight: 800, children: "Alpha" }),
+      /* @__PURE__ */ e(
+        Fe,
+        {
+          min: 0,
+          max: 1,
+          step: 0.01,
+          value: n,
+          onChange: (a, x) => c?.(Array.isArray(x) ? x[0] : x),
+          valueLabelDisplay: "auto",
+          valueLabelFormat: (a) => `${Math.round(a * 100)}%`
+        }
+      ),
+      /* @__PURE__ */ e(
+        Z,
+        {
+          label: "Alpha",
+          type: "number",
+          value: g,
+          onChange: (a) => c?.(Math.min(Math.max(Number(a.target.value), 0), 100) / 100),
+          InputProps: {
+            endAdornment: /* @__PURE__ */ e(ot, { position: "end", children: "%" })
+          },
+          fullWidth: !0
+        }
+      )
+    ] }),
+    /* @__PURE__ */ e(p, { sx: { display: "flex", gap: 1, flexWrap: "wrap" }, children: d.map((a) => /* @__PURE__ */ e(
+      p,
+      {
+        component: "button",
+        "aria-label": a,
+        onClick: () => b?.(a),
+        sx: {
+          width: 32,
+          height: 32,
+          borderRadius: "50%",
+          border: 2,
+          borderColor: a.toLowerCase() === t.toLowerCase() ? "text.primary" : "divider",
+          bgcolor: a,
+          cursor: "pointer"
+        }
+      },
+      a
+    )) }),
+    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 })
+    ] }) : null
+  ] }) });
+}
+function kr({ onFiles: t, sx: n, ...d }) {
+  const [s, b] = T(!1);
+  function c(g) {
+    g && t?.(Array.from(g));
+  }
+  return /* @__PURE__ */ m(
+    p,
+    {
+      ...d,
+      onDragOver: (g) => {
+        g.preventDefault(), b(!0);
+      },
+      onDragLeave: () => b(!1),
+      onDrop: (g) => {
+        g.preventDefault(), b(!1), c(g.dataTransfer.files);
+      },
+      sx: [
+        {
+          p: 4,
+          border: 2,
+          borderStyle: "dashed",
+          borderColor: s ? "primary.main" : "divider",
+          borderRadius: 1,
+          textAlign: "center",
+          bgcolor: s ? "primary.50" : "background.paper"
+        },
+        ...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" })
+      ]
+    }
+  );
+}
+function ye(t, n, d) {
+  return Math.min(Math.max(t, n), d);
+}
+function $t(t) {
+  const n = Math.floor(t / 60), d = Math.floor(t % 60);
+  return `${n}:${String(d).padStart(2, "0")}`;
+}
+function ke(t, n) {
+  return n > 0 ? ye(t / 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 $r({
+  duration: t,
+  value: n,
+  defaultValue: d = 0,
+  markers: s = [],
+  thumbnails: b = [],
+  disabled: c = !1,
+  showTime: g = !0,
+  preview: f = !0,
+  step: a = 1,
+  formatTime: x = $t,
+  onChange: y,
+  sx: k,
+  ...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);
+  }
+  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 M(h) {
+    Y(l(h));
+  }
+  return /* @__PURE__ */ m(
+    p,
+    {
+      ...v,
+      sx: [
+        {
+          width: "100%",
+          color: c ? "text.disabled" : "text.primary",
+          userSelect: "none"
+        },
+        ...Array.isArray(k) ? k : k ? [k] : []
+      ],
+      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) })
+        ] }) : null,
+        /* @__PURE__ */ m(
+          p,
+          {
+            ref: B,
+            role: "slider",
+            tabIndex: c ? -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"));
+            },
+            onPointerLeave: () => {
+              R || Y(null);
+            },
+            onPointerDown: (h) => {
+              c || (u(!0), h.currentTarget.setPointerCapture(h.pointerId), F(l(h.clientX), "click"));
+            },
+            onPointerUp: (h) => {
+              u(!1), h.currentTarget.releasePointerCapture(h.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()));
+            },
+            sx: {
+              position: "relative",
+              height: 86,
+              cursor: c ? "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,
+                {
+                  sx: {
+                    position: "absolute",
+                    left: `${w}%`,
+                    top: 0,
+                    transform: "translateX(-50%)",
+                    width: 116,
+                    p: 0.75,
+                    border: 1,
+                    borderColor: "divider",
+                    borderRadius: 1,
+                    bgcolor: "background.paper",
+                    boxShadow: "0 14px 34px rgba(15,23,42,0.18)",
+                    pointerEvents: "none",
+                    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($) })
+                  ]
+                }
+              ) : null,
+              /* @__PURE__ */ e(
+                p,
+                {
+                  className: "TimelineScrubber-track",
+                  sx: {
+                    position: "absolute",
+                    left: 0,
+                    right: 0,
+                    bottom: 18,
+                    height: 12,
+                    borderRadius: 999,
+                    bgcolor: "#e5e7eb",
+                    overflow: "hidden",
+                    transition: "box-shadow 120ms ease"
+                  },
+                  children: /* @__PURE__ */ e(
+                    p,
+                    {
+                      sx: {
+                        width: `${W}%`,
+                        height: "100%",
+                        borderRadius: 999,
+                        background: "linear-gradient(90deg, #2563eb, #06b6d4)"
+                      }
+                    }
+                  )
+                }
+              ),
+              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,
+                  {
+                    onPointerDown: (D) => {
+                      D.stopPropagation(), F(h.time, "marker");
+                    },
+                    sx: {
+                      position: "absolute",
+                      left: `${S}%`,
+                      bottom: 11,
+                      width: 12,
+                      height: 26,
+                      borderRadius: 999,
+                      transform: "translateX(-50%)",
+                      bgcolor: h.color ?? "#f59e0b",
+                      border: "2px solid",
+                      borderColor: "background.paper",
+                      boxShadow: "0 8px 18px rgba(15,23,42,0.2)",
+                      zIndex: 1
+                    }
+                  }
+                ) }, h.id);
+              }),
+              /* @__PURE__ */ e(
+                p,
+                {
+                  sx: {
+                    position: "absolute",
+                    left: `${W}%`,
+                    bottom: 5,
+                    width: 28,
+                    height: 28,
+                    borderRadius: "50%",
+                    transform: "translateX(-50%)",
+                    bgcolor: "background.paper",
+                    border: 3,
+                    borderColor: "#2563eb",
+                    boxShadow: R ? "0 12px 30px rgba(37,99,235,0.36)" : "0 8px 20px rgba(15,23,42,0.2)"
+                  }
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+function De(t, n, d) {
+  return Math.min(Math.max(t, n), d);
+}
+function Cr({
+  items: t = [],
+  defaultViewport: n = { x: 0, y: 0, zoom: 1 },
+  viewport: d,
+  minZoom: s = 0.3,
+  maxZoom: b = 2.5,
+  showGrid: c = !0,
+  showMinimap: g = !0,
+  selectedItemId: f,
+  renderItem: a,
+  onViewportChange: x,
+  onItemMove: y,
+  onItemSelect: k,
+  sx: v,
+  ...B
+}) {
+  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
+    }));
+    if (!l.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)
+    };
+    d === void 0 && R(M), x?.(M);
+  }
+  function j(l, M) {
+    const h = C.current?.getBoundingClientRect();
+    return {
+      x: (l - (h?.left ?? 0) - $.x) / $.zoom,
+      y: (M - (h?.top ?? 0) - $.y) / $.zoom
+    };
+  }
+  function F(l) {
+    E(l?.id ?? null), k?.(l);
+  }
+  return /* @__PURE__ */ m(
+    p,
+    {
+      ...B,
+      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 });
+      },
+      onPointerDown: (l) => {
+        if (l.target !== l.currentTarget)
+          return;
+        F(null);
+        const M = l.clientX, h = l.clientY, S = $;
+        l.currentTarget.setPointerCapture(l.pointerId);
+        function D(P) {
+          L({
+            ...S,
+            x: S.x + P.clientX - M,
+            y: S.y + P.clientY - h
+          });
+        }
+        function i() {
+          window.removeEventListener("pointermove", D), window.removeEventListener("pointerup", i);
+        }
+        window.addEventListener("pointermove", D), window.addEventListener("pointerup", i);
+      },
+      sx: [
+        {
+          position: "relative",
+          minHeight: 420,
+          overflow: "hidden",
+          bgcolor: "#f8fafc",
+          cursor: "grab",
+          touchAction: "none"
+        },
+        ...Array.isArray(v) ? v : v ? [v] : []
+      ],
+      children: [
+        /* @__PURE__ */ e(
+          p,
+          {
+            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`
+            }
+          }
+        ),
+        /* @__PURE__ */ e(
+          p,
+          {
+            sx: {
+              position: "absolute",
+              left: $.x,
+              top: $.y,
+              transform: `scale(${$.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,
+                {
+                  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
+                      };
+                      z((ee) => ({
+                        ...ee,
+                        [l.id]: V
+                      })), y?.(l.id, V);
+                    }
+                    function Q() {
+                      window.removeEventListener("pointermove", P), window.removeEventListener("pointerup", Q);
+                    }
+                    window.addEventListener("pointermove", P), window.addEventListener("pointerup", Q);
+                  },
+                  sx: {
+                    position: "absolute",
+                    left: M.x,
+                    top: M.y,
+                    width: l.width ?? 140,
+                    height: l.height ?? 80,
+                    display: "grid",
+                    placeItems: "center",
+                    border: h ? 2 : 1,
+                    borderColor: h ? "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)",
+                    cursor: "grab",
+                    userSelect: "none"
+                  },
+                  children: a ? a(l, h) : /* @__PURE__ */ e(N, { fontWeight: 900, children: l.label ?? l.id })
+                },
+                l.id
+              );
+            })
+          }
+        ),
+        /* @__PURE__ */ m(
+          p,
+          {
+            sx: {
+              position: "absolute",
+              left: 12,
+              bottom: 12,
+              display: "flex",
+              gap: 0.75,
+              alignItems: "center",
+              px: 1,
+              py: 0.5,
+              borderRadius: 1,
+              bgcolor: "rgba(255,255,255,0.92)",
+              border: 1,
+              borderColor: "divider",
+              fontSize: 12,
+              fontWeight: 800
+            },
+            children: [
+              Math.round($.zoom * 100),
+              "%"
+            ]
+          }
+        ),
+        g ? /* @__PURE__ */ e(
+          p,
+          {
+            sx: {
+              position: "absolute",
+              right: 12,
+              bottom: 12,
+              width: 160,
+              height: 100,
+              border: 1,
+              borderColor: "divider",
+              borderRadius: 1,
+              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,
+                {
+                  sx: {
+                    position: "absolute",
+                    left: `${h}%`,
+                    top: `${S}%`,
+                    width: `${D}%`,
+                    height: `${i}%`,
+                    minWidth: 6,
+                    minHeight: 4,
+                    borderRadius: 0.5,
+                    bgcolor: l.id === W ? "primary.main" : l.color ?? "#94a3b8"
+                  }
+                },
+                l.id
+              );
+            })
+          }
+        ) : null
+      ]
+    }
+  );
+}
+function Ir({
+  children: t,
+  title: n,
+  content: d,
+  media: s,
+  actions: b = [],
+  copyText: c,
+  placement: g = "top",
+  pinMode: f = !0,
+  defaultPinned: a = !1,
+  openDelay: x = 120,
+  sx: y,
+  ...k
+}) {
+  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);
+  }
+  function W() {
+    $(), !o && (C.current = window.setTimeout(() => R(!0), x));
+  }
+  function w() {
+    $(), R(!0);
+  }
+  function L() {
+    $(), u || (B.current = window.setTimeout(() => R(!1), 100));
+  }
+  function j() {
+    const l = !u;
+    z(l), R(l || o);
+  }
+  async function F() {
+    c && (await navigator.clipboard?.writeText(c), E(!0), window.setTimeout(() => E(!1), 1100));
+  }
+  return /* @__PURE__ */ m(Ee, { children: [
+    /* @__PURE__ */ e(
+      p,
+      {
+        component: "span",
+        ref: v,
+        onMouseEnter: W,
+        onMouseLeave: L,
+        onFocus: W,
+        onBlur: L,
+        onClick: () => {
+          f && (R(!0), z(!0));
+        },
+        sx: { display: "inline-flex" },
+        children: t
+      }
+    ),
+    /* @__PURE__ */ e(
+      ct,
+      {
+        open: o,
+        anchorEl: v.current,
+        placement: g,
+        modifiers: [
+          { name: "offset", options: { offset: [0, 10] } },
+          { name: "preventOverflow", options: { padding: 12 } }
+        ],
+        sx: { zIndex: 1500 },
+        children: /* @__PURE__ */ e(
+          st,
+          {
+            onClickAway: () => {
+              u && (R(!1), z(!1));
+            },
+            children: /* @__PURE__ */ e(
+              p,
+              {
+                onMouseEnter: w,
+                onMouseLeave: L,
+                sx: {
+                  width: 320,
+                  maxWidth: "calc(100vw - 24px)",
+                  borderRadius: 1,
+                  overflow: "hidden",
+                  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
+                    ] }),
+                    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
+                  ] }),
+                  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))
+                  ] }) : null
+                ] }) })
+              }
+            )
+          }
+        )
+      }
+    )
+  ] });
+}
+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
+};