@opencxh/ui-kit 3.110.2 → 3.111.0

package/dist/index.js

@@ -1,7 +1,7 @@
 import { clsx as qe } from "clsx";
 import { jsxs as i, jsx as e, Fragment as fe } from "react/jsx-runtime";
 import { VideoOff as We, User as Ke, MicOff as _e, Mic as Ge, X as ve, ChevronDown as be, ExternalLink as Je, Calendar as Ye, ChevronLeft as Pe, ChevronRight as ye, ChevronDownIcon as Xe, Loader2 as Ze, Search as Ne, Check as Me, ChevronUp as Qe, ChevronsLeft as et, ChevronsRight as tt, FileText as we, HardDrive as $e, ArrowLeft as ze, FolderPlus as rt, Upload as nt, Folder as De, Trash2 as st, Plus as at, Sparkles as lt, ImageOff as ot, Pencil as ct, ArrowUpRight as it } from "lucide-react";
-import le, { useRef as se, useEffect as J, forwardRef as de, useState as V, useLayoutEffect as dt, useMemo as me, useCallback as ce, createContext as ut, Component as mt } from "react";
+import le, { useRef as se, useEffect as J, forwardRef as de, useState as R, useLayoutEffect as dt, useMemo as me, useCallback as ce, createContext as ut, Component as mt } from "react";
 function d(...t) {
   return qe(t);
 }
@@ -106,16 +106,16 @@ const ft = {
     rightIcon: l,
     iconOnly: c = !1,
     shape: f = "default",
-    className: g,
+    className: p,
     children: N,
-    disabled: x,
-    ...u
-  }, h) => {
-    const v = x || s;
+    disabled: h,
+    ...m
+  }, x) => {
+    const v = h || s;
     return /* @__PURE__ */ i(
       "button",
       {
-        ref: h,
+        ref: x,
         type: "button",
         className: d(
           "inline-flex shrink-0 items-center justify-center gap-2 font-semibold",
@@ -128,11 +128,11 @@ const ft = {
           c ? xt[r] : ht[r],
           (n || r === "full") && "w-full",
           s && "cursor-wait",
-          g
+          p
         ),
         disabled: v,
         "aria-busy": s || void 0,
-        ...u,
+        ...m,
         children: [
           s && /* @__PURE__ */ e(
             "span",
@@ -201,7 +201,7 @@ const Gr = ({
   "aria-label": c,
   ...f
 }) => {
-  const g = typeof r == "number" ? r : gt(r), N = d(
+  const p = typeof r == "number" ? r : gt(r), N = d(
     "inline-block shrink-0",
     bt[n],
     s && [
@@ -209,8 +209,8 @@ const Gr = ({
       "focus-visible:outline-none focus-visible:focus-ring"
     ],
     l
-  ), x = {
-    size: g,
+  ), h = {
+    size: p,
     strokeWidth: 2,
     className: N,
     onClick: s ? a : void 0,
@@ -218,12 +218,12 @@ const Gr = ({
     "aria-hidden": c ? void 0 : !0,
     role: s ? "button" : void 0,
     tabIndex: s ? 0 : void 0,
-    onKeyDown: s ? (u) => {
-      (u.key === "Enter" || u.key === " ") && (u.preventDefault(), a?.());
+    onKeyDown: s ? (m) => {
+      (m.key === "Enter" || m.key === " ") && (m.preventDefault(), a?.());
     } : void 0,
     ...f
   };
-  return /* @__PURE__ */ e(t, { ...x });
+  return /* @__PURE__ */ e(t, { ...h });
 };
 function gt(t) {
   return {
@@ -249,42 +249,43 @@ function Jr({
   active: l = !1,
   caret: c = !1,
   onClear: f,
-  clearLabel: g = "Filter wissen",
+  clearLabel: p = "Filter wissen",
   onClick: N,
-  className: x
+  title: h,
+  className: m
 }) {
-  const u = l && !!f, h = s === "pill" ? "rounded-full" : "rounded-md", v = d(
+  const x = l && !!f, v = s === "pill" ? "rounded-full" : "rounded-md", C = d(
     // A button's default cursor is an arrow, so it has to be asked for.
     "inline-flex cursor-pointer select-none items-center text-sm font-semibold",
     a === "sm" ? "h-control-sm" : "h-control-md",
     "transition-colors duration-fast ease-out",
-    h,
+    v,
     // Picking a value outranks whatever the value happens to mean.
     l ? "bg-accent text-accent-fg" : d("border", pt[n]),
-    x
-  ), C = /* @__PURE__ */ i(fe, { children: [
+    m
+  ), y = /* @__PURE__ */ i(fe, { children: [
     r,
     t,
     c && /* @__PURE__ */ e(X, { icon: be, size: "xs" })
-  ] }), p = d(
+  ] }), g = d(
     "inline-flex items-center gap-1.5 pl-3",
-    h,
-    u ? "pr-1.5" : "pr-3",
+    v,
+    x ? "pr-1.5" : "pr-3",
     "focus-visible:outline-none focus-visible:focus-ring"
   );
-  return u ? /* @__PURE__ */ i("span", { className: v, children: [
-    /* @__PURE__ */ e("button", { type: "button", onClick: N, className: p, children: C }),
+  return x ? /* @__PURE__ */ i("span", { className: C, title: h, children: [
+    /* @__PURE__ */ e("button", { type: "button", onClick: N, className: g, children: y }),
     /* @__PURE__ */ e(
       "button",
       {
         type: "button",
-        "aria-label": g,
+        "aria-label": p,
         onClick: f,
-        className: d("inline-flex h-full items-center pr-3 focus-visible:outline-none focus-visible:focus-ring", h),
+        className: d("inline-flex h-full items-center pr-3 focus-visible:outline-none focus-visible:focus-ring", v),
         children: /* @__PURE__ */ e(X, { icon: ve, size: "xs" })
       }
     )
-  ] }) : /* @__PURE__ */ e("button", { type: "button", onClick: N, className: d(v, p), children: C });
+  ] }) : /* @__PURE__ */ e("button", { type: "button", title: h, onClick: N, className: d(C, g), children: y });
 }
 const vt = {
   xs: "text-xs",
@@ -319,11 +320,11 @@ const vt = {
   className: l,
   children: c,
   href: f,
-  target: g,
+  target: p,
   rel: N,
-  ...x
+  ...h
 }) => {
-  const u = a || f && (f.startsWith("http") || f.startsWith("mailto:")), h = d(
+  const m = a || f && (f.startsWith("http") || f.startsWith("mailto:")), x = d(
     "inline-flex items-center gap-1 underline-offset-2",
     "transition-colors duration-fast ease-out",
     "focus-visible:outline-none focus-visible:focus-ring",
@@ -338,15 +339,15 @@ const vt = {
     s && "pointer-events-none cursor-not-allowed text-text-disabled opacity-50",
     l
   ), v = {
-    ...x,
+    ...h,
     href: s ? void 0 : f,
-    target: u ? "_blank" : g,
-    rel: u ? "noopener noreferrer" : N,
+    target: m ? "_blank" : p,
+    rel: m ? "noopener noreferrer" : N,
     "aria-disabled": s || void 0
   };
-  return /* @__PURE__ */ i("a", { className: h, ...v, children: [
+  return /* @__PURE__ */ i("a", { className: x, ...v, children: [
     c,
-    u && /* @__PURE__ */ e(Je, { className: "size-icon-sm shrink-0", "aria-hidden": !0 })
+    m && /* @__PURE__ */ e(Je, { className: "size-icon-sm shrink-0", "aria-hidden": !0 })
   ] });
 }, wt = {
   sm: "h-control-sm px-3 text-sm",
@@ -398,37 +399,37 @@ const kt = ({
   disabled: a = !1,
   triggerLabel: l
 }) => {
-  const [c, f] = V(!1), [g, N] = V({}), x = se(null), u = se(null);
+  const [c, f] = R(!1), [p, N] = R({}), h = se(null), m = se(null);
   J(() => {
     if (!c) return;
-    const C = (y) => {
-      x.current && !x.current.contains(y.target) && f(!1);
-    }, p = (y) => {
-      y.key === "Escape" && f(!1);
+    const C = (g) => {
+      h.current && !h.current.contains(g.target) && f(!1);
+    }, y = (g) => {
+      g.key === "Escape" && f(!1);
     };
-    return document.addEventListener("mousedown", C), document.addEventListener("keydown", p), () => {
-      document.removeEventListener("mousedown", C), document.removeEventListener("keydown", p);
+    return document.addEventListener("mousedown", C), document.addEventListener("keydown", y), () => {
+      document.removeEventListener("mousedown", C), document.removeEventListener("keydown", y);
     };
   }, [c]);
-  const h = (C) => {
+  const x = (C) => {
     if (C.stopPropagation(), !a) {
       if (!c) {
-        const p = u.current?.getBoundingClientRect();
-        if (p) {
-          const T = {};
-          n.startsWith("bottom") ? T.top = p.bottom + 6 : T.bottom = window.innerHeight - p.top + 6, n.endsWith("start") ? T.left = p.left : T.right = window.innerWidth - p.right, N(T);
+        const y = m.current?.getBoundingClientRect();
+        if (y) {
+          const A = {};
+          n.startsWith("bottom") ? A.top = y.bottom + 6 : A.bottom = window.innerHeight - y.top + 6, n.endsWith("start") ? A.left = y.left : A.right = window.innerWidth - y.right, N(A);
         }
       }
-      f((p) => !p);
+      f((y) => !y);
     }
   }, v = () => f(!1);
-  return /* @__PURE__ */ i("div", { ref: x, className: "relative inline-flex", children: [
+  return /* @__PURE__ */ i("div", { ref: h, className: "relative inline-flex", children: [
     /* @__PURE__ */ e(
       "button",
       {
-        ref: u,
+        ref: m,
         type: "button",
-        onClick: h,
+        onClick: x,
         disabled: a,
         "aria-label": l,
         "aria-expanded": c,
@@ -443,7 +444,7 @@ const kt = ({
           "fixed z-overlay bg-surface rounded-lg shadow-overlay border border-border",
           s
         ),
-        style: g,
+        style: p,
         children: typeof r == "function" ? r(v) : r
       }
     )
@@ -465,10 +466,10 @@ function je({
   options: l,
   disabled: c = !1,
   loading: f = !1,
-  menuPlacement: g = "bottom-end",
+  menuPlacement: p = "bottom-end",
   menuLabel: N = "More options"
 }) {
-  const x = c || f, u = l.length > 0;
+  const h = c || f, m = l.length > 0;
   return /* @__PURE__ */ i("div", { className: "inline-flex items-center gap-px", children: [
     /* @__PURE__ */ e(
       re,
@@ -479,15 +480,15 @@ function je({
         disabled: c,
         loading: f,
         leftIcon: a,
-        className: d(u && "rounded-r-none"),
+        className: d(m && "rounded-r-none"),
         children: t
       }
     ),
-    u && /* @__PURE__ */ e(
+    m && /* @__PURE__ */ e(
       kt,
       {
-        placement: g,
-        disabled: x,
+        placement: p,
+        disabled: h,
         triggerLabel: N,
         className: "min-w-menu py-1",
         trigger: /* @__PURE__ */ e(
@@ -499,17 +500,17 @@ function je({
               "transition-colors duration-fast ease-out",
               Ct[n],
               St[s],
-              x && "cursor-not-allowed opacity-50"
+              h && "cursor-not-allowed opacity-50"
             ),
             children: /* @__PURE__ */ e(be, { className: "size-icon-md" })
           }
         ),
-        children: (h) => /* @__PURE__ */ e(fe, { children: l.map((v) => /* @__PURE__ */ i(
+        children: (x) => /* @__PURE__ */ e(fe, { children: l.map((v) => /* @__PURE__ */ i(
           "button",
           {
             type: "button",
             onClick: () => {
-              v.onClick(), h();
+              v.onClick(), x();
             },
             className: d(
               "flex w-full items-center gap-2 px-3 py-1.5 text-left text-sm",
@@ -553,14 +554,14 @@ const zt = {
     containerClassName: l,
     labelClassName: c,
     className: f,
-    id: g,
+    id: p,
     ...N
-  }, x) => {
-    const u = le.useId(), h = g || `checkbox-${u}`, v = !!n, C = le.useRef(null), p = le.useCallback(
-      (y) => {
-        C.current = y, typeof x == "function" ? x(y) : x && typeof x == "object" && (x.current = y);
+  }, h) => {
+    const m = le.useId(), x = p || `checkbox-${m}`, v = !!n, C = le.useRef(null), y = le.useCallback(
+      (g) => {
+        C.current = g, typeof h == "function" ? h(g) : h && typeof h == "object" && (h.current = g);
       },
-      [x]
+      [h]
     );
     return le.useEffect(() => {
       C.current && (C.current.indeterminate = a);
@@ -569,8 +570,8 @@ const zt = {
         /* @__PURE__ */ e(
           "input",
           {
-            ref: p,
-            id: h,
+            ref: y,
+            id: x,
             type: "checkbox",
             "aria-invalid": v || void 0,
             className: d(
@@ -589,7 +590,7 @@ const zt = {
           /* @__PURE__ */ e(
             "label",
             {
-              htmlFor: h,
+              htmlFor: x,
               className: d(
                 "cursor-pointer",
                 v ? "text-danger-fg" : "text-text",
@@ -608,14 +609,14 @@ const zt = {
 );
 xe.displayName = "Checkbox";
 function Ee(t, r, { gap: n = 6, matchWidth: s = !1, placement: a = "bottom-start" } = {}) {
-  const [l, c] = V({});
+  const [l, c] = R({});
   return dt(() => {
     if (!t) return;
     const f = () => {
-      const g = r.current;
-      if (!g) return;
-      const N = g.getBoundingClientRect(), x = window.innerHeight - N.bottom, u = N.top, h = a.startsWith("top"), v = h ? u < 200 && x > u : x < 200 && u > x, C = h !== v, p = { position: "fixed" };
-      C ? (p.bottom = window.innerHeight - N.top + n, p.maxHeight = Math.max(120, u - n * 2)) : (p.top = N.bottom + n, p.maxHeight = Math.max(120, x - n * 2)), a.endsWith("end") ? p.right = window.innerWidth - N.right : p.left = N.left, s && (p.width = N.width), c(p);
+      const p = r.current;
+      if (!p) return;
+      const N = p.getBoundingClientRect(), h = window.innerHeight - N.bottom, m = N.top, x = a.startsWith("top"), v = x ? m < 200 && h > m : h < 200 && m > h, C = x !== v, y = { position: "fixed" };
+      C ? (y.bottom = window.innerHeight - N.top + n, y.maxHeight = Math.max(120, m - n * 2)) : (y.top = N.bottom + n, y.maxHeight = Math.max(120, h - n * 2)), a.endsWith("end") ? y.right = window.innerWidth - N.right : y.left = N.left, s && (y.width = N.width), c(y);
     };
     return f(), window.addEventListener("scroll", f, !0), window.addEventListener("resize", f), () => {
       window.removeEventListener("scroll", f, !0), window.removeEventListener("resize", f);
@@ -631,49 +632,49 @@ const $t = () => /* @__PURE__ */ e(X, { icon: Ye, size: "md", color: "current" }
   size: l = "md",
   className: c,
   minDate: f,
-  maxDate: g,
+  maxDate: p,
   format: N = "MM/dd/yyyy",
-  withTime: x = !1
-}, u) => {
-  const [h, v] = V(!1), [C, p] = V(() => t || /* @__PURE__ */ new Date()), y = se(null), T = Ee(h, y);
+  withTime: h = !1
+}, m) => {
+  const [x, v] = R(!1), [C, y] = R(() => t || /* @__PURE__ */ new Date()), g = se(null), A = Ee(x, g);
   J(() => {
-    const b = (m) => {
-      y.current && !y.current.contains(m.target) && v(!1);
+    const b = (u) => {
+      g.current && !g.current.contains(u.target) && v(!1);
     };
-    return h && document.addEventListener("mousedown", b), () => {
+    return x && document.addEventListener("mousedown", b), () => {
       document.removeEventListener("mousedown", b);
     };
-  }, [h]);
-  const M = (b) => {
+  }, [x]);
+  const $ = (b) => {
     if (!b) return "";
-    const m = b.getDate().toString().padStart(2, "0"), E = (b.getMonth() + 1).toString().padStart(2, "0"), w = b.getFullYear(), I = N === "dd/MM/yyyy" ? `${m}/${E}/${w}` : N === "yyyy-MM-dd" ? `${w}-${E}-${m}` : `${E}/${m}/${w}`;
-    return x ? `${I} ${P(b)}` : I;
-  }, P = (b) => `${b.getHours().toString().padStart(2, "0")}:${b.getMinutes().toString().padStart(2, "0")}`, B = (b) => {
-    const [m, E] = b.split(":").map(Number);
-    if (Number.isNaN(m) || Number.isNaN(E)) return;
+    const u = b.getDate().toString().padStart(2, "0"), E = (b.getMonth() + 1).toString().padStart(2, "0"), w = b.getFullYear(), P = N === "dd/MM/yyyy" ? `${u}/${E}/${w}` : N === "yyyy-MM-dd" ? `${w}-${E}-${u}` : `${E}/${u}/${w}`;
+    return h ? `${P} ${_(b)}` : P;
+  }, _ = (b) => `${b.getHours().toString().padStart(2, "0")}:${b.getMinutes().toString().padStart(2, "0")}`, M = (b) => {
+    const [u, E] = b.split(":").map(Number);
+    if (Number.isNaN(u) || Number.isNaN(E)) return;
     const w = t ? new Date(t) : /* @__PURE__ */ new Date();
-    w.setHours(m, E, 0, 0), r?.(w);
-  }, W = () => {
-    const b = C.getFullYear(), m = C.getMonth(), E = new Date(b, m, 1), w = new Date(E);
+    w.setHours(u, E, 0, 0), r?.(w);
+  }, U = () => {
+    const b = C.getFullYear(), u = C.getMonth(), E = new Date(b, u, 1), w = new Date(E);
     w.setDate(w.getDate() - E.getDay());
-    const I = [], k = new Date(w);
+    const P = [], k = new Date(w);
     for (let ae = 0; ae < 42; ae++)
-      I.push(new Date(k)), k.setDate(k.getDate() + 1);
-    return I;
-  }, H = (b) => {
-    if (b.getMonth() === C.getMonth() && !(f && b < f) && !(g && b > g)) {
-      if (x) {
+      P.push(new Date(k)), k.setDate(k.getDate() + 1);
+    return P;
+  }, V = (b) => {
+    if (b.getMonth() === C.getMonth() && !(f && b < f) && !(p && b > p)) {
+      if (h) {
         const E = new Date(b);
         E.setHours(t?.getHours() ?? 0, t?.getMinutes() ?? 0, 0, 0), r?.(E);
         return;
       }
       r?.(b), v(!1);
     }
-  }, L = () => {
-    p(new Date(C.getFullYear(), C.getMonth() - 1, 1));
-  }, K = () => {
-    p(new Date(C.getFullYear(), C.getMonth() + 1, 1));
-  }, U = () => {
+  }, I = () => {
+    y(new Date(C.getFullYear(), C.getMonth() - 1, 1));
+  }, W = () => {
+    y(new Date(C.getFullYear(), C.getMonth() + 1, 1));
+  }, H = () => {
     r?.(null), v(!1);
   }, Y = d(
     "w-full border border-border rounded-md transition-colors duration-fast",
@@ -688,7 +689,7 @@ const $t = () => /* @__PURE__ */ e(X, { icon: Ye, size: "md", color: "current" }
       "h-control-md w-full px-3 text-base": l === "full"
     },
     c
-  ), Z = W(), Q = [
+  ), Z = U(), Q = [
     "January",
     "February",
     "March",
@@ -702,19 +703,19 @@ const $t = () => /* @__PURE__ */ e(X, { icon: Ye, size: "md", color: "current" }
     "November",
     "December"
   ];
-  return /* @__PURE__ */ i("div", { ref: y, className: "relative", children: [
+  return /* @__PURE__ */ i("div", { ref: g, className: "relative", children: [
     /* @__PURE__ */ i("div", { className: "relative", children: [
       /* @__PURE__ */ e(
         "input",
         {
-          ref: u,
+          ref: m,
           type: "text",
-          value: M(t ?? null),
+          value: $(t ?? null),
           placeholder: n,
           disabled: s,
           required: a,
           readOnly: !0,
-          onClick: () => !s && v(!h),
+          onClick: () => !s && v(!x),
           className: d(Y, "pr-10 cursor-pointer")
         }
       ),
@@ -722,19 +723,19 @@ const $t = () => /* @__PURE__ */ e(X, { icon: Ye, size: "md", color: "current" }
         "button",
         {
           type: "button",
-          onClick: () => !s && v(!h),
+          onClick: () => !s && v(!x),
           disabled: s,
           className: "absolute inset-y-0 right-0 flex items-center pr-3 text-text-muted hover:text-text-muted",
           children: /* @__PURE__ */ e($t, {})
         }
       )
     ] }),
-    h && /* @__PURE__ */ i("div", { style: T, className: "z-overlay overflow-auto rounded-lg border border-border bg-surface p-4 shadow-overlay min-w-panel", children: [
+    x && /* @__PURE__ */ i("div", { style: A, className: "z-overlay overflow-auto rounded-lg border border-border bg-surface p-4 shadow-overlay min-w-panel", children: [
       /* @__PURE__ */ i("div", { className: "flex items-center justify-between mb-4", children: [
         /* @__PURE__ */ e(
           "button",
           {
-            onClick: L,
+            onClick: I,
             className: "p-1 hover:bg-surface-hover rounded",
             children: /* @__PURE__ */ e(Dt, {})
           }
@@ -747,43 +748,43 @@ const $t = () => /* @__PURE__ */ e(X, { icon: Ye, size: "md", color: "current" }
         /* @__PURE__ */ e(
           "button",
           {
-            onClick: K,
+            onClick: W,
             className: "p-1 hover:bg-surface-hover rounded",
             children: /* @__PURE__ */ e(Tt, {})
           }
         )
       ] }),
       /* @__PURE__ */ e("div", { className: "grid grid-cols-7 gap-1 mb-2", children: ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"].map((b) => /* @__PURE__ */ e("div", { className: "text-xs font-medium text-text-muted text-center py-1", children: b }, b)) }),
-      /* @__PURE__ */ e("div", { className: "grid grid-cols-7 gap-1", children: Z.map((b, m) => {
-        const E = b.getMonth() === C.getMonth(), w = t && b.toDateString() === t.toDateString(), I = b.toDateString() === (/* @__PURE__ */ new Date()).toDateString(), k = !E || f && b < f || g && b > g;
+      /* @__PURE__ */ e("div", { className: "grid grid-cols-7 gap-1", children: Z.map((b, u) => {
+        const E = b.getMonth() === C.getMonth(), w = t && b.toDateString() === t.toDateString(), P = b.toDateString() === (/* @__PURE__ */ new Date()).toDateString(), k = !E || f && b < f || p && b > p;
         return /* @__PURE__ */ e(
           "button",
           {
-            onClick: () => !k && H(b),
+            onClick: () => !k && V(b),
             disabled: k,
             className: d(
               "w-8 h-8 text-sm rounded transition-colors duration-fast",
               {
                 "text-text hover:bg-surface-hover": E && !w && !k,
                 "bg-accent text-accent-fg": w,
-                "bg-surface-hover text-text": I && !w,
+                "bg-surface-hover text-text": P && !w,
                 "text-text-muted cursor-not-allowed": k
               }
             ),
             children: b.getDate()
           },
-          m
+          u
         );
       }) }),
-      x && /* @__PURE__ */ i("div", { className: "mt-3 flex items-center gap-2 border-t border-border pt-3", children: [
+      h && /* @__PURE__ */ i("div", { className: "mt-3 flex items-center gap-2 border-t border-border pt-3", children: [
         /* @__PURE__ */ e("label", { htmlFor: "datepicker-time", className: "text-sm text-text-muted", children: "Tijd" }),
         /* @__PURE__ */ e(
           "input",
           {
             id: "datepicker-time",
             type: "time",
-            value: t ? P(t) : "",
-            onChange: (b) => B(b.target.value),
+            value: t ? _(t) : "",
+            onChange: (b) => M(b.target.value),
             className: "h-control-sm rounded-md border border-border bg-surface-input px-2 text-sm text-text focus-visible:outline-none focus-visible:focus-ring"
           }
         )
@@ -792,7 +793,7 @@ const $t = () => /* @__PURE__ */ e(X, { icon: Ye, size: "md", color: "current" }
         /* @__PURE__ */ e(
           "button",
           {
-            onClick: U,
+            onClick: H,
             className: "text-sm text-text-muted hover:text-text",
             children: "Clear"
           }
@@ -823,90 +824,90 @@ const $t = () => /* @__PURE__ */ e(X, { icon: Ye, size: "md", color: "current" }
     options: l,
     placeholder: c,
     containerClassName: f,
-    labelClassName: g,
+    labelClassName: p,
     className: N,
-    id: x,
-    searchable: u,
-    multiple: h,
+    id: h,
+    searchable: m,
+    multiple: x,
     value: v,
     onChange: C,
-    allowCreate: p,
-    onCreateOption: y,
-    ...T
-  }, M) => {
-    const P = x || `select-${Math.random().toString(36).substr(2, 9)}`, B = !!n, [W, H] = le.useState(!1), [L, K] = le.useState(""), U = le.useRef(null), Y = le.useRef(null), Z = Ee(W, Y, { matchWidth: !0 }), [Q, b] = le.useState(l);
-    le.useImperativeHandle(M, () => U.current), le.useEffect(() => {
-      const S = (D) => {
-        U.current && !U.current.contains(D.target) && H(!1);
+    allowCreate: y,
+    onCreateOption: g,
+    ...A
+  }, $) => {
+    const _ = h || `select-${Math.random().toString(36).substr(2, 9)}`, M = !!n, [U, V] = le.useState(!1), [I, W] = le.useState(""), H = le.useRef(null), Y = le.useRef(null), Z = Ee(U, Y, { matchWidth: !0 }), [Q, b] = le.useState(l);
+    le.useImperativeHandle($, () => H.current), le.useEffect(() => {
+      const S = (T) => {
+        H.current && !H.current.contains(T.target) && V(!1);
       };
       return document.addEventListener("mousedown", S), () => document.removeEventListener("mousedown", S);
     }, []);
-    const m = le.useCallback(
-      (S, D) => S.some(
-        (A) => ge(A.value) === ge(D) || ge(A.label) === ge(D)
+    const u = le.useCallback(
+      (S, T) => S.some(
+        (L) => ge(L.value) === ge(T) || ge(L.label) === ge(T)
       ),
       []
     ), E = le.useCallback(
-      (S, D) => {
-        const A = [...S], $ = (q) => {
+      (S, T) => {
+        const L = [...S], D = (q) => {
           const j = (q ?? "").trim();
-          j && (m(A, j) || A.push({ value: j, label: j }));
+          j && (u(L, j) || L.push({ value: j, label: j }));
         };
-        return Array.isArray(D) ? D.forEach($) : $(D), A;
+        return Array.isArray(T) ? T.forEach(D) : D(T), L;
       },
-      [m]
+      [u]
     );
     le.useEffect(() => {
       b((S) => {
-        const D = [...l];
-        return S.forEach((A) => {
-          !m(D, A.value) && !m(D, A.label) && D.push(A);
-        }), E(D, v);
+        const T = [...l];
+        return S.forEach((L) => {
+          !u(T, L.value) && !u(T, L.label) && T.push(L);
+        }), E(T, v);
       });
-    }, [l, v, E, m]);
+    }, [l, v, E, u]);
     const w = (S) => {
-      if (h) {
-        const D = Array.isArray(v) ? v : [], A = D.includes(S) ? D.filter(($) => $ !== S) : [...D, S];
-        C?.(A);
+      if (x) {
+        const T = Array.isArray(v) ? v : [], L = T.includes(S) ? T.filter((D) => D !== S) : [...T, S];
+        C?.(L);
       } else
-        C?.(S), H(!1), K("");
-    }, I = h ? null : Q.find((S) => S.value === v), k = h ? Q.filter(
+        C?.(S), V(!1), W("");
+    }, P = x ? null : Q.find((S) => S.value === v), k = x ? Q.filter(
       (S) => Array.isArray(v) && v.includes(S.value)
-    ) : [], ae = u && L ? Q.filter(
-      (S) => S.label.toLowerCase().includes(L.toLowerCase())
-    ) : Q, ne = !!p && !!u && !!L.trim() && !m(Q, L), ee = (S) => {
-      const D = S.trim();
-      if (!D) return;
-      const A = y?.(D) ?? {
-        value: D,
-        label: D
+    ) : [], ae = m && I ? Q.filter(
+      (S) => S.label.toLowerCase().includes(I.toLowerCase())
+    ) : Q, ne = !!y && !!m && !!I.trim() && !u(Q, I), ee = (S) => {
+      const T = S.trim();
+      if (!T) return;
+      const L = g?.(T) ?? {
+        value: T,
+        label: T
       };
-      if (m(Q, A.value) || m(Q, A.label)) {
-        w(A.value), K(""), h || H(!1);
+      if (u(Q, L.value) || u(Q, L.label)) {
+        w(L.value), W(""), x || V(!1);
         return;
       }
-      b(($) => [...$, A]), w(A.value), K(""), h || H(!1);
-    }, G = () => h ? k.length > 0 ? k.map((S) => S.label).join(", ") : c || "Select options" : I?.label || c || "Select an option";
+      b((D) => [...D, L]), w(L.value), W(""), x || V(!1);
+    }, G = () => x ? k.length > 0 ? k.map((S) => S.label).join(", ") : c || "Select options" : P?.label || c || "Select an option";
     return /* @__PURE__ */ i(
       "div",
       {
-        ref: U,
+        ref: H,
         className: d(
           "relative flex flex-col",
           a && "w-full",
           f
         ),
-        ...T,
+        ...A,
         children: [
           t && /* @__PURE__ */ e(
             "label",
             {
-              htmlFor: P,
-              onClick: () => H(!W),
+              htmlFor: _,
+              onClick: () => V(!U),
               className: d(
                 "block text-xs font-semibold uppercase tracking-label mb-1.5",
-                B ? "text-danger-fg" : "text-text-muted",
-                g
+                M ? "text-danger-fg" : "text-text-muted",
+                p
               ),
               children: t
             }
@@ -917,15 +918,15 @@ const $t = () => /* @__PURE__ */ e(X, { icon: Ye, size: "md", color: "current" }
               {
                 ref: Y,
                 type: "button",
-                id: P,
-                onClick: () => H(!W),
+                id: _,
+                onClick: () => V(!U),
                 className: d(
                   "flex w-full items-center justify-between gap-2 rounded-md border transition-colors duration-fast text-left",
                   "focus-visible:outline-none focus-visible:focus-ring",
                   "disabled:cursor-not-allowed disabled:bg-surface-hover disabled:text-text-disabled",
                   "bg-surface",
                   At[s],
-                  B ? "border-danger-border text-danger-fg focus-visible:focus-ring" : "border-border text-text",
+                  M ? "border-danger-border text-danger-fg focus-visible:focus-ring" : "border-border text-text",
                   N
                 ),
                 children: [
@@ -936,23 +937,23 @@ const $t = () => /* @__PURE__ */ e(X, { icon: Ye, size: "md", color: "current" }
                       size: 16,
                       className: d(
                         "shrink-0 opacity-60 transition-transform duration-fast",
-                        W && "rotate-180"
+                        U && "rotate-180"
                       )
                     }
                   )
                 ]
               }
             ),
-            W && /* @__PURE__ */ i("div", { style: Z, className: "z-overlay flex flex-col overflow-hidden rounded-lg border border-border bg-surface shadow-overlay", children: [
-              u && /* @__PURE__ */ e("div", { className: "p-2", children: /* @__PURE__ */ e(
+            U && /* @__PURE__ */ i("div", { style: Z, className: "z-overlay flex flex-col overflow-hidden rounded-lg border border-border bg-surface shadow-overlay", children: [
+              m && /* @__PURE__ */ e("div", { className: "p-2", children: /* @__PURE__ */ e(
                 "input",
                 {
                   type: "text",
                   placeholder: "Search...",
-                  value: L,
-                  onChange: (S) => K(S.target.value),
+                  value: I,
+                  onChange: (S) => W(S.target.value),
                   onKeyDown: (S) => {
-                    S.key === "Enter" && ne && (S.preventDefault(), ee(L));
+                    S.key === "Enter" && ne && (S.preventDefault(), ee(I));
                   },
                   className: d(
                     "w-full px-3 py-2 text-sm rounded-md border",
@@ -967,27 +968,27 @@ const $t = () => /* @__PURE__ */ e(X, { icon: Ye, size: "md", color: "current" }
                     "cursor-pointer px-3 py-1.5 text-sm",
                     "text-info-fg hover:bg-surface-hover"
                   ),
-                  onClick: () => ee(L),
+                  onClick: () => ee(I),
                   children: [
                     "+: “",
-                    L.trim(),
+                    I.trim(),
                     "”"
                   ]
                 }
               ),
               /* @__PURE__ */ i("ul", { className: "min-h-0 flex-1 overflow-auto py-1", children: [
-                c && !h && /* @__PURE__ */ e(
+                c && !x && /* @__PURE__ */ e(
                   "li",
                   {
                     className: "cursor-pointer px-3 py-1.5 text-sm text-text-muted hover:bg-surface-hover",
                     onClick: () => {
-                      C?.(""), H(!1);
+                      C?.(""), V(!1);
                     },
                     children: c
                   }
                 ),
                 ae.map((S) => {
-                  const D = h ? Array.isArray(v) && v.includes(S.value) : v === S.value;
+                  const T = x ? Array.isArray(v) && v.includes(S.value) : v === S.value;
                   return /* @__PURE__ */ e(
                     "li",
                     {
@@ -996,14 +997,14 @@ const $t = () => /* @__PURE__ */ e(X, { icon: Ye, size: "md", color: "current" }
                         "cursor-pointer px-3 py-1.5 text-sm",
                         "text-text",
                         S.disabled ? "opacity-50 cursor-not-allowed" : "hover:bg-surface-hover",
-                        D && "bg-accent-soft text-accent font-semibold"
+                        T && "bg-accent-soft text-accent font-semibold"
                       ),
                       children: /* @__PURE__ */ i("div", { className: "flex items-center", children: [
-                        h && /* @__PURE__ */ e(
+                        x && /* @__PURE__ */ e(
                           "input",
                           {
                             type: "checkbox",
-                            checked: D,
+                            checked: T,
                             readOnly: !0,
                             className: "mr-3 h-4 w-4 rounded border-border [&:not(:checked)]:bg-surface-input text-accent "
                           }
@@ -1022,7 +1023,7 @@ const $t = () => /* @__PURE__ */ e(X, { icon: Ye, size: "md", color: "current" }
             {
               className: d(
                 "mt-1 text-xs",
-                B ? "text-danger-fg" : "text-text-muted"
+                M ? "text-danger-fg" : "text-text-muted"
               ),
               children: n || r
             }
@@ -1048,21 +1049,21 @@ const Lt = {
     startIcon: l,
     endIcon: c,
     loading: f = !1,
-    containerClassName: g,
+    containerClassName: p,
     labelClassName: N,
-    className: x,
-    id: u,
-    ...h
+    className: h,
+    id: m,
+    ...x
   }, v) => {
-    const C = le.useId(), p = u || `textfield-${C}`, y = !!n, T = n || r ? `${p}-description` : void 0;
-    return /* @__PURE__ */ i("div", { className: d("flex flex-col", a && "w-full", g), children: [
+    const C = le.useId(), y = m || `textfield-${C}`, g = !!n, A = n || r ? `${y}-description` : void 0;
+    return /* @__PURE__ */ i("div", { className: d("flex flex-col", a && "w-full", p), children: [
       t && /* @__PURE__ */ e(
         "label",
         {
-          htmlFor: p,
+          htmlFor: y,
           className: d(
             Oe,
-            y ? "text-danger-fg" : "text-text-subtle",
+            g ? "text-danger-fg" : "text-text-subtle",
             N
           ),
           children: t
@@ -1074,9 +1075,9 @@ const Lt = {
           "input",
           {
             ref: v,
-            id: p,
-            "aria-invalid": y || void 0,
-            "aria-describedby": T,
+            id: y,
+            "aria-invalid": g || void 0,
+            "aria-describedby": A,
             className: d(
               "block w-full rounded-md border bg-surface-input text-text",
               "transition-colors duration-fast ease-out",
@@ -1086,10 +1087,10 @@ const Lt = {
               Lt[s],
               l && "pl-9",
               (c || f) && "pr-9",
-              y ? "border-danger-border bg-danger-soft" : "border-border hover:border-border-strong",
-              x
+              g ? "border-danger-border bg-danger-soft" : "border-border hover:border-border-strong",
+              h
             ),
-            ...h
+            ...x
           }
         ),
         (c || f) && /* @__PURE__ */ e("span", { className: "absolute inset-y-0 right-0 flex items-center pr-3 text-text-muted", children: f ? /* @__PURE__ */ e(
@@ -1103,8 +1104,8 @@ const Lt = {
       (n || r) && /* @__PURE__ */ e(
         "p",
         {
-          id: T,
-          className: d("mt-1 text-xs", y ? "text-danger-fg" : "text-text-subtle"),
+          id: A,
+          className: d("mt-1 text-xs", g ? "text-danger-fg" : "text-text-subtle"),
           children: n || r
         }
       )
@@ -1122,27 +1123,27 @@ function It({
   templatePlaceholder: c,
   showTemplate: f = !0
 }) {
-  const [g, N] = V([]);
+  const [p, N] = R([]);
   J(() => {
-    let u = !0;
-    return Promise.resolve(n?.()).then((h) => {
-      u && h && N(h.data ?? []);
+    let m = !0;
+    return Promise.resolve(n?.()).then((x) => {
+      m && x && N(x.data ?? []);
     }).catch(() => {
     }), () => {
-      u = !1;
+      m = !1;
     };
   }, []);
-  const x = t ?? {};
+  const h = t ?? {};
   return /* @__PURE__ */ i("div", { className: "flex flex-col gap-2", children: [
     /* @__PURE__ */ e(
       pe,
       {
         size: a,
         fullWidth: !0,
-        value: x.folderId ?? "",
-        options: g.map((u) => ({ value: u.id, label: u.name })),
+        value: h.folderId ?? "",
+        options: p.map((m) => ({ value: m.id, label: m.name })),
         placeholder: l ?? "Select a folder",
-        onChange: (u) => r?.({ ...x, folderId: u })
+        onChange: (m) => r?.({ ...h, folderId: m })
       }
     ),
     f && /* @__PURE__ */ e(
@@ -1150,9 +1151,9 @@ function It({
       {
         size: a,
         disabled: s ?? !1,
-        value: x.pathTemplate ?? "",
+        value: h.pathTemplate ?? "",
         placeholder: c ?? "Sub-path e.g. {yyyy}/{mm}/{dd} (optional)",
-        onChange: (u) => r?.({ ...x, pathTemplate: u.target.value })
+        onChange: (m) => r?.({ ...h, pathTemplate: m.target.value })
       }
     )
   ] });
@@ -1177,40 +1178,40 @@ const ue = (...t) => t.filter(Boolean).join(" "), Pt = (t) => /* @__PURE__ */ e(
     startIcon: l = /* @__PURE__ */ e(Pt, {}),
     loading: c = !1,
     containerClassName: f,
-    labelClassName: g,
+    labelClassName: p,
     className: N,
-    id: x,
-    options: u,
-    onRemoteSearch: h,
+    id: h,
+    options: m,
+    onRemoteSearch: x,
     onSelect: v,
     debounceTime: C = 500,
-    showAllOnOpen: p = !1,
-    value: y,
-    onChange: T,
-    ...M
-  }, P) => {
-    const B = x || `searchfield-${Math.random().toString(36).substr(2, 9)}`, W = !!n, H = se(null), L = se(null), [K, U] = V(y || ""), [Y, Z] = V(!1), [Q, b] = V(!1), [m, E] = V(!1);
+    showAllOnOpen: y = !1,
+    value: g,
+    onChange: A,
+    ...$
+  }, _) => {
+    const M = h || `searchfield-${Math.random().toString(36).substr(2, 9)}`, U = !!n, V = se(null), I = se(null), [W, H] = R(g || ""), [Y, Z] = R(!1), [Q, b] = R(!1), [u, E] = R(!1);
     J(() => {
-      y !== void 0 && U(y);
-    }, [y]);
+      g !== void 0 && H(g);
+    }, [g]);
     const w = me(() => {
-      if (p && !m || !K) return u;
-      const S = String(K).toLowerCase();
-      return u.filter(
-        (D) => String(D.label).toLowerCase().includes(S)
+      if (y && !u || !W) return m;
+      const S = String(W).toLowerCase();
+      return m.filter(
+        (T) => String(T.label).toLowerCase().includes(S)
       );
-    }, [K, u, p, m]);
+    }, [W, m, y, u]);
     J(() => {
-      if (!h || !K) {
+      if (!x || !W) {
         b(!1);
         return;
       }
       const S = setTimeout(async () => {
         b(!0);
         try {
-          await h(String(K));
-        } catch (D) {
-          console.error("Remote search failed:", D);
+          await x(String(W));
+        } catch (T) {
+          console.error("Remote search failed:", T);
         } finally {
           b(!1);
         }
@@ -1218,20 +1219,20 @@ const ue = (...t) => t.filter(Boolean).join(" "), Pt = (t) => /* @__PURE__ */ e(
       return () => {
         clearTimeout(S), b(!1);
       };
-    }, [K, C, h]), J(() => {
-      const S = (D) => {
-        H.current && !H.current.contains(D.target) && Z(!1);
+    }, [W, C, x]), J(() => {
+      const S = (T) => {
+        V.current && !V.current.contains(T.target) && Z(!1);
       };
       return document.addEventListener("mousedown", S), () => document.removeEventListener("mousedown", S);
     }, []);
-    const I = (S) => {
-      const D = S.target.value;
-      U(D), Z(!0), E(!0), T && T(S);
+    const P = (S) => {
+      const T = S.target.value;
+      H(T), Z(!0), E(!0), A && A(S);
     }, k = (S) => {
-      U(S.label), Z(!1), E(!1), v && v(S.value);
+      H(S.label), Z(!1), E(!1), v && v(S.value);
     }, ae = () => {
-      (u.length > 0 || h) && (Z(!0), E(!1));
-    }, ne = c || Q, ee = Y && (w.length > 0 || ne), G = me(() => P || L, [P]);
+      (m.length > 0 || x) && (Z(!0), E(!1));
+    }, ne = c || Q, ee = Y && (w.length > 0 || ne), G = me(() => _ || I, [_]);
     return /* @__PURE__ */ i(
       "div",
       {
@@ -1241,16 +1242,16 @@ const ue = (...t) => t.filter(Boolean).join(" "), Pt = (t) => /* @__PURE__ */ e(
           f || "",
           "relative"
         ),
-        ref: H,
+        ref: V,
         children: [
           t && /* @__PURE__ */ e(
             "label",
             {
-              htmlFor: B,
+              htmlFor: M,
               className: ue(
                 "block text-sm font-medium mb-1",
-                W ? "text-danger-fg" : "text-text",
-                g || ""
+                U ? "text-danger-fg" : "text-text",
+                p || ""
               ),
               children: t
             }
@@ -1261,9 +1262,9 @@ const ue = (...t) => t.filter(Boolean).join(" "), Pt = (t) => /* @__PURE__ */ e(
               "input",
               {
                 ref: G,
-                id: B,
-                value: K,
-                onChange: I,
+                id: M,
+                value: W,
+                onChange: P,
                 onFocus: ae,
                 className: ue(
                   // Base styles
@@ -1277,10 +1278,10 @@ const ue = (...t) => t.filter(Boolean).join(" "), Pt = (t) => /* @__PURE__ */ e(
                   "pr-10",
                   // Altijd padding rechts voor de dropdown/loading icon
                   // State styles
-                  W ? "border-danger-border text-danger-fg focus-visible:focus-ring" : "border-border text-text",
+                  U ? "border-danger-border text-danger-fg focus-visible:focus-ring" : "border-border text-text",
                   N || ""
                 ),
-                ...M
+                ...$
               }
             ),
             /* @__PURE__ */ e("div", { className: "absolute inset-y-0 right-0 pr-3 flex items-center", children: ne || c ? (
@@ -1320,7 +1321,7 @@ const ue = (...t) => t.filter(Boolean).join(" "), Pt = (t) => /* @__PURE__ */ e(
                   className: "px-4 py-2 cursor-pointer text-text hover:bg-accent-soft hover:text-accent transition-colors",
                   onClick: () => k(S),
                   role: "option",
-                  "aria-selected": K === S.label,
+                  "aria-selected": W === S.label,
                   children: S.label
                 },
                 S.value
@@ -1332,14 +1333,14 @@ const ue = (...t) => t.filter(Boolean).join(" "), Pt = (t) => /* @__PURE__ */ e(
             {
               className: ue(
                 "mt-1 text-xs",
-                W ? "text-danger-fg" : "text-text-muted"
+                U ? "text-danger-fg" : "text-text-muted"
               ),
               children: n || r
             }
           ),
-          h && /* @__PURE__ */ i("p", { className: "mt-2 text-xs text-success-fg", children: [
+          x && /* @__PURE__ */ i("p", { className: "mt-2 text-xs text-success-fg", children: [
             "Huidige zoekterm (niet-gedebounced): ",
-            String(K)
+            String(W)
           ] })
         ]
       }
@@ -1388,7 +1389,7 @@ const Ft = de(
               role: "switch",
               checked: t,
               disabled: s,
-              onChange: (g) => r(g.target.checked),
+              onChange: (p) => r(p.target.checked),
               className: "peer sr-only",
               ...l
             }
@@ -1437,7 +1438,7 @@ function Rt({
         {
           className: "grid gap-2 border-t border-border-subtle p-3",
           style: { gridTemplateColumns: `repeat(${s}, minmax(0, 1fr))` },
-          children: Array.from({ length: s }).map((g, N) => /* @__PURE__ */ e(
+          children: Array.from({ length: s }).map((p, N) => /* @__PURE__ */ e(
             "div",
             {
               className: "h-4 w-full rounded-sm bg-surface-hover"
@@ -1459,64 +1460,64 @@ const Vt = ({
   disabled: l = !1,
   className: c,
   showCheck: f = !0,
-  header: g
+  header: p
 }) => {
-  const [N, x] = V(!1), [u, h] = V(null), [v, C] = V({ top: 0, left: 0 }), p = se(null), y = se(null), T = se(null), M = se(null), P = Ee(N, y, { placement: a }), B = se(null), W = () => Array.from(
-    M.current?.querySelectorAll("button[data-option-value]:not(:disabled)") ?? []
+  const [N, h] = R(!1), [m, x] = R(null), [v, C] = R({ top: 0, left: 0 }), y = se(null), g = se(null), A = se(null), $ = se(null), _ = Ee(N, g, { placement: a }), M = se(null), U = () => Array.from(
+    $.current?.querySelectorAll("button[data-option-value]:not(:disabled)") ?? []
   );
   J(() => {
-    N && W()[0]?.focus();
+    N && U()[0]?.focus();
   }, [N]);
-  const H = (m) => {
-    if (!["ArrowDown", "ArrowUp", "Home", "End"].includes(m.key)) return;
-    const w = W();
+  const V = (u) => {
+    if (!["ArrowDown", "ArrowUp", "Home", "End"].includes(u.key)) return;
+    const w = U();
     if (w.length === 0) return;
-    m.preventDefault();
-    const I = w.indexOf(document.activeElement), k = m.key === "Home" ? 0 : m.key === "End" ? w.length - 1 : m.key === "ArrowDown" ? (I + 1) % w.length : (I - 1 + w.length) % w.length;
+    u.preventDefault();
+    const P = w.indexOf(document.activeElement), k = u.key === "Home" ? 0 : u.key === "End" ? w.length - 1 : u.key === "ArrowDown" ? (P + 1) % w.length : (P - 1 + w.length) % w.length;
     w[k]?.focus();
   };
   J(() => {
-    const m = (E) => {
-      p.current && (!p.current.contains(E.target) || T.current && !T.current.contains(E.target)) && (x(!1), h(null), B.current && (clearTimeout(B.current), B.current = null));
+    const u = (E) => {
+      y.current && (!y.current.contains(E.target) || A.current && !A.current.contains(E.target)) && (h(!1), x(null), M.current && (clearTimeout(M.current), M.current = null));
     };
-    return N && document.addEventListener("mousedown", m), () => {
-      document.removeEventListener("mousedown", m);
+    return N && document.addEventListener("mousedown", u), () => {
+      document.removeEventListener("mousedown", u);
     };
   }, [N]), J(() => {
-    const m = (E) => {
-      E.key === "Escape" && (x(!1), h(null), y.current?.focus(), B.current && (clearTimeout(B.current), B.current = null));
+    const u = (E) => {
+      E.key === "Escape" && (h(!1), x(null), g.current?.focus(), M.current && (clearTimeout(M.current), M.current = null));
     };
-    return N && document.addEventListener("keydown", m), () => {
-      document.removeEventListener("keydown", m);
+    return N && document.addEventListener("keydown", u), () => {
+      document.removeEventListener("keydown", u);
     };
   }, [N]), J(() => {
-    if (u && p.current) {
-      const m = p.current.querySelector(
-        `[data-option-value="${u}"]`
+    if (m && y.current) {
+      const u = y.current.querySelector(
+        `[data-option-value="${m}"]`
       );
-      if (m) {
-        const E = m.getBoundingClientRect();
+      if (u) {
+        const E = u.getBoundingClientRect();
         C({
           top: E.top,
           left: E.right + 8
         });
       }
     }
-  }, [u]), J(() => () => {
-    B.current && clearTimeout(B.current);
+  }, [m]), J(() => () => {
+    M.current && clearTimeout(M.current);
   }, []);
-  const L = (m) => {
-    m.stopPropagation(), !l && (x(!N), h(null), B.current && (clearTimeout(B.current), B.current = null));
-  }, K = (m, E, w) => {
-    m.stopPropagation(), !E.disabled && !E.divider && (!E.children || E.children.length === 0) && (s?.(E.value, w), x(!1), h(null));
-  }, U = (m) => {
-    B.current && (clearTimeout(B.current), B.current = null), m.children && m.children.length > 0 ? h(m.value) : h(null);
-  }, Y = (m) => {
-    m.children && m.children.length > 0 ? B.current = setTimeout(() => {
-      h(null);
-    }, 150) : h(null);
-  }, Z = (m, E, w) => {
-    m.stopPropagation(), !E.disabled && !E.divider && (s?.(E.value, w), x(!1), h(null));
+  const I = (u) => {
+    u.stopPropagation(), !l && (h(!N), x(null), M.current && (clearTimeout(M.current), M.current = null));
+  }, W = (u, E, w) => {
+    u.stopPropagation(), !E.disabled && !E.divider && (!E.children || E.children.length === 0) && (s?.(E.value, w), h(!1), x(null));
+  }, H = (u) => {
+    M.current && (clearTimeout(M.current), M.current = null), u.children && u.children.length > 0 ? x(u.value) : x(null);
+  }, Y = (u) => {
+    u.children && u.children.length > 0 ? M.current = setTimeout(() => {
+      x(null);
+    }, 150) : x(null);
+  }, Z = (u, E, w) => {
+    u.stopPropagation(), !E.disabled && !E.divider && (s?.(E.value, w), h(!1), x(null));
   }, Q = d(
     "fixed z-overlay min-w-menu bg-surface rounded-lg shadow-overlay border border-border",
     "max-h-60 overflow-auto"
@@ -1527,7 +1528,7 @@ const Vt = ({
   return /* @__PURE__ */ i(
     "div",
     {
-      ref: p,
+      ref: y,
       className: d(
         "relative flex flex-row items-center justify-center rounded-lg hover:bg-surface-hover",
         c
@@ -1536,8 +1537,8 @@ const Vt = ({
         /* @__PURE__ */ e(
           "button",
           {
-            ref: y,
-            onClick: L,
+            ref: g,
+            onClick: I,
             disabled: l,
             "aria-haspopup": "menu",
             "aria-expanded": N,
@@ -1547,10 +1548,10 @@ const Vt = ({
             children: t
           }
         ),
-        N && /* @__PURE__ */ e("div", { ref: M, className: Q, style: P, onKeyDown: H, children: /* @__PURE__ */ i("div", { className: "p-2", role: "menu", children: [
-          g && (typeof g == "string" ? /* @__PURE__ */ e("div", { className: "text-xs font-medium text-text-muted uppercase tracking-label px-3 py-2", children: g }) : g),
-          r.map((m, E) => {
-            if (m.divider)
+        N && /* @__PURE__ */ e("div", { ref: $, className: Q, style: _, onKeyDown: V, children: /* @__PURE__ */ i("div", { className: "p-2", role: "menu", children: [
+          p && (typeof p == "string" ? /* @__PURE__ */ e("div", { className: "text-xs font-medium text-text-muted uppercase tracking-label px-3 py-2", children: p }) : p),
+          r.map((u, E) => {
+            if (u.divider)
               return /* @__PURE__ */ e(
                 "div",
                 {
@@ -1558,58 +1559,58 @@ const Vt = ({
                 },
                 `divider-${E}`
               );
-            const w = m.children && m.children.length > 0, I = u === m.value;
+            const w = u.children && u.children.length > 0, P = m === u.value;
             return /* @__PURE__ */ i("div", { className: "relative group", children: [
               /* @__PURE__ */ i(
                 "button",
                 {
-                  "data-option-value": m.value,
+                  "data-option-value": u.value,
                   role: "menuitem",
                   "aria-haspopup": w ? "menu" : void 0,
-                  onClick: (k) => K(k, m),
-                  onMouseEnter: () => U(m),
-                  onMouseLeave: () => Y(m),
-                  disabled: m.disabled,
+                  onClick: (k) => W(k, u),
+                  onMouseEnter: () => H(u),
+                  onMouseLeave: () => Y(u),
+                  disabled: u.disabled,
                   className: d(
                     "flex w-full items-center justify-between rounded-md px-3 py-1.5 text-sm text-text transition-colors duration-fast ease-out hover:bg-surface-hover focus-visible:outline-none focus-visible:focus-ring",
                     {
-                      "opacity-50 cursor-not-allowed": m.disabled,
-                      "bg-surface-hover": I && w
+                      "opacity-50 cursor-not-allowed": u.disabled,
+                      "bg-surface-hover": P && w
                     }
                   ),
                   children: [
                     /* @__PURE__ */ i("div", { className: "flex items-center space-x-2 min-w-0", children: [
-                      m.icon && /* @__PURE__ */ e("span", { className: "flex-shrink-0", children: m.icon }),
+                      u.icon && /* @__PURE__ */ e("span", { className: "flex-shrink-0", children: u.icon }),
                       /* @__PURE__ */ i("div", { className: "flex flex-col items-start min-w-0", children: [
-                        /* @__PURE__ */ e("span", { className: "font-base truncate", children: m.label }),
-                        m.description && /* @__PURE__ */ e("span", { className: "text-xs text-text-muted", children: m.description })
+                        /* @__PURE__ */ e("span", { className: "font-base truncate", children: u.label }),
+                        u.description && /* @__PURE__ */ e("span", { className: "text-xs text-text-muted", children: u.description })
                       ] })
                     ] }),
                     /* @__PURE__ */ i("div", { className: "flex items-center space-x-2", children: [
-                      f && n === m.value && /* @__PURE__ */ e(Me, { className: "size-icon-md shrink-0 text-success-fg", "aria-hidden": !0 }),
+                      f && n === u.value && /* @__PURE__ */ e(Me, { className: "size-icon-md shrink-0 text-success-fg", "aria-hidden": !0 }),
                       w && /* @__PURE__ */ e("span", { className: "text-text-muted text-xs", children: "▶" })
                     ] })
                   ]
                 }
               ),
-              w && I && /* @__PURE__ */ e(
+              w && P && /* @__PURE__ */ e(
                 "div",
                 {
-                  ref: T,
+                  ref: A,
                   className: b,
                   style: {
                     top: `${v.top}px`,
                     left: `${v.left}px`
                   },
                   onMouseEnter: () => {
-                    B.current && (clearTimeout(B.current), B.current = null), h(m.value);
+                    M.current && (clearTimeout(M.current), M.current = null), x(u.value);
                   },
                   onMouseLeave: () => {
-                    B.current = setTimeout(() => {
-                      h(null);
+                    M.current = setTimeout(() => {
+                      x(null);
                     }, 150);
                   },
-                  children: /* @__PURE__ */ e("div", { className: "p-2", children: m.children.map((k, ae) => {
+                  children: /* @__PURE__ */ e("div", { className: "p-2", children: u.children.map((k, ae) => {
                     if (k.divider)
                       return /* @__PURE__ */ e(
                         "div",
@@ -1618,7 +1619,7 @@ const Vt = ({
                         },
                         `divider-${ae}`
                       );
-                    const ne = typeof n == "object" && n[m.value] && n[m.value].includes(
+                    const ne = typeof n == "object" && n[u.value] && n[u.value].includes(
                       k.value
                     ) || n === k.value;
                     return /* @__PURE__ */ i(
@@ -1627,7 +1628,7 @@ const Vt = ({
                         onClick: (ee) => Z(
                           ee,
                           k,
-                          m.value
+                          u.value
                         ),
                         disabled: k.disabled,
                         className: d(
@@ -1652,16 +1653,16 @@ const Vt = ({
                   }) })
                 }
               )
-            ] }, m.value);
+            ] }, u.value);
           }),
           (() => {
-            const m = r.reduce((E, w) => {
+            const u = r.reduce((E, w) => {
               if (w.divider) return E;
-              const I = w.children ? w.children.filter((k) => !k.divider).length : 0;
-              return E + 1 + I;
+              const P = w.children ? w.children.filter((k) => !k.divider).length : 0;
+              return E + 1 + P;
             }, 0);
-            return m > 1 && /* @__PURE__ */ e("div", { className: "border-t border-border mt-2 pt-2", children: /* @__PURE__ */ i("div", { className: "text-xs text-text-muted px-3 py-1", children: [
-              m,
+            return u > 1 && /* @__PURE__ */ e("div", { className: "border-t border-border mt-2 pt-2", children: /* @__PURE__ */ i("div", { className: "text-xs text-text-muted px-3 py-1", children: [
+              u,
               " options available"
             ] }) });
           })()
@@ -1725,104 +1726,104 @@ const Vt = ({
   filters: l = [],
   paginated: c = !1,
   pageSizeOptions: f = [10, 25, 50, 100],
-  defaultPageSize: g = 10,
+  defaultPageSize: p = 10,
   actions: N = [],
-  onRowClick: x,
-  selectable: u = !1,
-  selectedRows: h = [],
+  onRowClick: h,
+  selectable: m = !1,
+  selectedRows: x = [],
   onSelectionChange: v,
-  getRowKey: C = (W, H) => H,
-  emptyContent: p,
-  hoverable: y = !0,
-  bordered: T = !1,
-  striped: M = !1,
-  className: P,
-  rowClassName: B
+  getRowKey: C = (U, V) => V,
+  emptyContent: y,
+  hoverable: g = !0,
+  bordered: A = !1,
+  striped: $ = !1,
+  className: _,
+  rowClassName: M
 }) => {
-  const [W, H] = V(""), [L, K] = V({
+  const [U, V] = R(""), [I, W] = R({
     column: null,
     direction: null
-  }), [U, Y] = V({
+  }), [H, Y] = R({
     page: 0,
-    pageSize: g
+    pageSize: p
   }), Z = se(null), Q = me(() => {
     let o = t;
-    if (s && W.trim()) {
+    if (s && U.trim()) {
       const z = r.filter(
-        (R) => R.searchable !== !1
-      ), F = W.toLowerCase();
-      o = o.filter((R) => z.some((O) => {
-        const te = typeof O.accessor == "function" ? O.accessor(R) : R[O.accessor];
-        return String(te || "").toLowerCase().includes(F);
+        (F) => F.searchable !== !1
+      ), B = U.toLowerCase();
+      o = o.filter((F) => z.some((O) => {
+        const te = typeof O.accessor == "function" ? O.accessor(F) : F[O.accessor];
+        return String(te || "").toLowerCase().includes(B);
       }));
     }
     return l.forEach((z) => {
-      z.value && z.value !== "all" && (o = o.filter((F) => {
-        const R = r.find((te) => te.id === z.id);
-        if (!R) return !0;
-        const O = typeof R.accessor == "function" ? R.accessor(F) : F[R.accessor];
+      z.value && z.value !== "all" && (o = o.filter((B) => {
+        const F = r.find((te) => te.id === z.id);
+        if (!F) return !0;
+        const O = typeof F.accessor == "function" ? F.accessor(B) : B[F.accessor];
         return String(O || "") === z.value;
       }));
     }), o;
-  }, [t, W, r, s, l]), b = me(() => {
-    if (!L.column || !L.direction) return Q;
-    const o = r.find((z) => z.id === L.column);
-    return o ? [...Q].sort((z, F) => {
-      const R = typeof o.accessor == "function" ? o.accessor(z) : z[o.accessor], O = typeof o.accessor == "function" ? o.accessor(F) : F[o.accessor];
+  }, [t, U, r, s, l]), b = me(() => {
+    if (!I.column || !I.direction) return Q;
+    const o = r.find((z) => z.id === I.column);
+    return o ? [...Q].sort((z, B) => {
+      const F = typeof o.accessor == "function" ? o.accessor(z) : z[o.accessor], O = typeof o.accessor == "function" ? o.accessor(B) : B[o.accessor];
       let te = 0;
-      return R < O ? te = -1 : R > O && (te = 1), L.direction === "desc" ? -te : te;
+      return F < O ? te = -1 : F > O && (te = 1), I.direction === "desc" ? -te : te;
     }) : Q;
-  }, [Q, L, r]), m = me(() => {
+  }, [Q, I, r]), u = me(() => {
     if (!c) return b;
-    const o = U.page * U.pageSize, z = o + U.pageSize;
+    const o = H.page * H.pageSize, z = o + H.pageSize;
     return b.slice(o, z);
-  }, [b, U, c]), E = ce(
+  }, [b, H, c]), E = ce(
     (o) => {
-      r.find((F) => F.id === o)?.sortable && K((F) => F.column !== o ? { column: o, direction: "asc" } : F.direction === "asc" ? { column: o, direction: "desc" } : { column: null, direction: null });
+      r.find((B) => B.id === o)?.sortable && W((B) => B.column !== o ? { column: o, direction: "asc" } : B.direction === "asc" ? { column: o, direction: "desc" } : { column: null, direction: null });
     },
     [r]
   ), w = ce((o) => {
     Y((z) => ({ ...z, page: o }));
-  }, []), I = ce((o) => {
+  }, []), P = ce((o) => {
     Y({ page: 0, pageSize: o });
   }, []), k = ce(
     (o, z) => {
       if (!v) return;
-      const F = C(o, 0);
-      h.map((R, O) => C(R, O)), v(z ? [...h, o] : h.filter(
-        (R, O) => C(h[O], O) !== F
+      const B = C(o, 0);
+      x.map((F, O) => C(F, O)), v(z ? [...x, o] : x.filter(
+        (F, O) => C(x[O], O) !== B
       ));
     },
-    [h, v, C]
+    [x, v, C]
   ), ae = ce(
     (o) => {
-      v && v(o ? [...m] : []);
+      v && v(o ? [...u] : []);
     },
-    [m, v]
+    [u, v]
   );
   J(() => {
     Y((o) => ({ ...o, page: 0 }));
-  }, [W, L]), J(() => {
+  }, [U, I]), J(() => {
     Y((o) => ({ ...o, page: 0 }));
   }, [l.map((o) => o.value).join(",")]);
-  const ne = b.length, ee = Math.ceil(ne / U.pageSize), G = U.page * U.pageSize + 1, S = Math.min(G + U.pageSize - 1, ne), D = m.length > 0 && m.every((o) => {
+  const ne = b.length, ee = Math.ceil(ne / H.pageSize), G = H.page * H.pageSize + 1, S = Math.min(G + H.pageSize - 1, ne), T = u.length > 0 && u.every((o) => {
     const z = C(o, 0);
-    return h.some(
-      (F, R) => C(F, R) === z
+    return x.some(
+      (B, F) => C(B, F) === z
     );
-  }), A = m.some((o) => {
+  }), L = u.some((o) => {
     const z = C(o, 0);
-    return h.some(
-      (F, R) => C(F, R) === z
+    return x.some(
+      (B, F) => C(B, F) === z
     );
-  }), $ = d(
+  }), D = d(
     "w-full text-sm leading-5 text-text border-collapse",
-    P
+    _
   ), q = d("bg-surface"), j = d(
     "text-text p-3 border-b border-border"
-  ), _ = d("h-row-lg", {
-    "hover:bg-surface-sunk": y,
-    "cursor-pointer": x
+  ), K = d("h-row-lg", {
+    "hover:bg-surface-sunk": g,
+    "cursor-pointer": h
   });
   return /* @__PURE__ */ i("div", { className: "space-y-4", children: [
     (s || l.length > 0) && /* @__PURE__ */ e("div", { className: "pt-4 pb-2", children: /* @__PURE__ */ i("div", { className: "flex flex-wrap gap-4 items-start", children: [
@@ -1831,8 +1832,8 @@ const Vt = ({
         he,
         {
           placeholder: a,
-          value: W,
-          onChange: (o) => H(o.target.value),
+          value: U,
+          onChange: (o) => V(o.target.value),
           startIcon: /* @__PURE__ */ e(Ht, {}),
           className: "max-w-sm"
         }
@@ -1847,15 +1848,15 @@ const Vt = ({
           tableColumns: r.length
         }
       ) }),
-      /* @__PURE__ */ i("table", { ref: Z, className: d($, "min-w-full"), children: [
+      /* @__PURE__ */ i("table", { ref: Z, className: d(D, "min-w-full"), children: [
         /* @__PURE__ */ e("thead", { className: q, children: /* @__PURE__ */ i("tr", { children: [
-          u && /* @__PURE__ */ e("th", { className: d(j, "w-12"), children: /* @__PURE__ */ e(
+          m && /* @__PURE__ */ e("th", { className: d(j, "w-12"), children: /* @__PURE__ */ e(
             "input",
             {
               type: "checkbox",
-              checked: D,
+              checked: T,
               ref: (o) => {
-                o && (o.indeterminate = A && !D);
+                o && (o.indeterminate = L && !T);
               },
               onChange: (o) => ae(o.target.checked),
               className: "rounded border-border [&:not(:checked)]:bg-surface-input text-accent"
@@ -1886,19 +1887,19 @@ const Vt = ({
                   {
                     className: d(
                       "flex flex-col opacity-0 group-hover:opacity-100 transition-opacity",
-                      L.column === o.id && "opacity-100"
+                      I.column === o.id && "opacity-100"
                     ),
                     children: [
                       /* @__PURE__ */ e(
                         Ut,
                         {
-                          active: L.column === o.id && L.direction === "asc"
+                          active: I.column === o.id && I.direction === "asc"
                         }
                       ),
                       /* @__PURE__ */ e(
                         qt,
                         {
-                          active: L.column === o.id && L.direction === "desc"
+                          active: I.column === o.id && I.direction === "desc"
                         }
                       )
                     ]
@@ -1910,37 +1911,37 @@ const Vt = ({
           )),
           N.length > 0 && /* @__PURE__ */ e("th", { className: d(j, "w-20"), children: /* @__PURE__ */ e("span", { className: "sr-only", children: "Actions" }) })
         ] }) }),
-        /* @__PURE__ */ e("tbody", { children: m.length === 0 || n ? !n && /* @__PURE__ */ e("tr", { children: /* @__PURE__ */ e(
+        /* @__PURE__ */ e("tbody", { children: u.length === 0 || n ? !n && /* @__PURE__ */ e("tr", { children: /* @__PURE__ */ e(
           "td",
           {
-            colSpan: r.length + (u ? 1 : 0) + (N.length > 0 ? 1 : 0),
+            colSpan: r.length + (m ? 1 : 0) + (N.length > 0 ? 1 : 0),
             className: d(
               j,
               "text-center py-8 text-text-muted"
             ),
-            children: p || "No data available"
+            children: y || "No data available"
           }
-        ) }) : m.map((o, z) => {
-          const F = C(o, z), R = h.some(
-            (O, te) => C(O, te) === F
+        ) }) : u.map((o, z) => {
+          const B = C(o, z), F = x.some(
+            (O, te) => C(O, te) === B
           );
           return /* @__PURE__ */ i(
             "tr",
             {
               className: d(
-                _,
-                { "bg-accent-soft": R },
-                B?.(o, z)
+                K,
+                { "bg-accent-soft": F },
+                M?.(o, z)
               ),
               onClick: (O) => {
-                O.stopPropagation(), x?.(o, z);
+                O.stopPropagation(), h?.(o, z);
               },
               children: [
-                u && /* @__PURE__ */ e("td", { className: j, children: /* @__PURE__ */ e(
+                m && /* @__PURE__ */ e("td", { className: j, children: /* @__PURE__ */ e(
                   "input",
                   {
                     type: "checkbox",
-                    checked: R,
+                    checked: F,
                     onChange: (O) => {
                       O.stopPropagation(), k(o, O.target.checked);
                     },
@@ -1988,7 +1989,7 @@ const Vt = ({
                 ) })
               ]
             },
-            F
+            B
           );
         }) })
       ] })
@@ -2009,8 +2010,8 @@ const Vt = ({
           /* @__PURE__ */ e(
             "select",
             {
-              value: U.pageSize,
-              onChange: (o) => I(Number(o.target.value)),
+              value: H.pageSize,
+              onChange: (o) => P(Number(o.target.value)),
               className: "h-control-sm w-16 rounded-md border border-border bg-surface-input px-2 text-sm text-text",
               children: f.map((o) => /* @__PURE__ */ e("option", { value: o, children: o }, o))
             }
@@ -2024,7 +2025,7 @@ const Vt = ({
             size: "sm",
             variant: "ghost",
             onClick: () => w(0),
-            disabled: U.page === 0,
+            disabled: H.page === 0,
             iconOnly: !0,
             children: /* @__PURE__ */ e(_t, {})
           }
@@ -2034,15 +2035,15 @@ const Vt = ({
           {
             size: "sm",
             variant: "ghost",
-            onClick: () => w(U.page - 1),
-            disabled: U.page === 0,
+            onClick: () => w(H.page - 1),
+            disabled: H.page === 0,
             iconOnly: !0,
             children: /* @__PURE__ */ e(Wt, {})
           }
         ),
         /* @__PURE__ */ i("span", { className: "px-3 py-1 text-sm text-text-muted", children: [
           "Page ",
-          U.page + 1,
+          H.page + 1,
           " of ",
           ee
         ] }),
@@ -2051,8 +2052,8 @@ const Vt = ({
           {
             size: "sm",
             variant: "ghost",
-            onClick: () => w(U.page + 1),
-            disabled: U.page >= ee - 1,
+            onClick: () => w(H.page + 1),
+            disabled: H.page >= ee - 1,
             iconOnly: !0,
             children: /* @__PURE__ */ e(Kt, {})
           }
@@ -2063,7 +2064,7 @@ const Vt = ({
             size: "sm",
             variant: "ghost",
             onClick: () => w(ee - 1),
-            disabled: U.page >= ee - 1,
+            disabled: H.page >= ee - 1,
             iconOnly: !0,
             children: /* @__PURE__ */ e(Gt, {})
           }
@@ -2077,31 +2078,31 @@ const Vt = ({
   onTabChange: n,
   className: s
 }) => {
-  const [a, l] = V(t[0]?.id || ""), c = r || a, f = (g) => {
-    n ? n(g) : l(g);
+  const [a, l] = R(t[0]?.id || ""), c = r || a, f = (p) => {
+    n ? n(p) : l(p);
   };
-  return /* @__PURE__ */ e("div", { className: d("border-b border-border", s), children: /* @__PURE__ */ e("nav", { className: "-mb-px flex space-x-8", children: t.map((g) => /* @__PURE__ */ e(
+  return /* @__PURE__ */ e("div", { className: d("border-b border-border", s), children: /* @__PURE__ */ e("nav", { className: "-mb-px flex space-x-8", children: t.map((p) => /* @__PURE__ */ e(
     "button",
     {
-      onClick: () => !g.disabled && f(g.id),
-      disabled: g.disabled,
+      onClick: () => !p.disabled && f(p.id),
+      disabled: p.disabled,
       className: d(
         "border-b-2 py-2 px-1 text-sm font-medium transition-colors duration-fast",
         {
-          "border-accent-border text-text": c === g.id,
-          "border-transparent text-text-muted hover:text-text": c !== g.id && !g.disabled,
-          "border-transparent text-disabled cursor-not-allowed": g.disabled
+          "border-accent-border text-text": c === p.id,
+          "border-transparent text-text-muted hover:text-text": c !== p.id && !p.disabled,
+          "border-transparent text-disabled cursor-not-allowed": p.disabled
         }
       ),
       children: /* @__PURE__ */ i("span", { className: "flex items-center gap-2", children: [
-        g.label,
-        g.badge && /* @__PURE__ */ e("span", { className: d(
+        p.label,
+        p.badge && /* @__PURE__ */ e("span", { className: d(
           "inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium",
-          c === g.id ? "bg-accent-soft text-accent" : "bg-surface-hover text-text-muted"
-        ), children: g.badge })
+          c === p.id ? "bg-accent-soft text-accent" : "bg-surface-hover text-text-muted"
+        ), children: p.badge })
       ] })
     },
-    g.id
+    p.id
   )) }) });
 }, Xt = ({
   items: t,
@@ -2112,14 +2113,14 @@ const Vt = ({
   size: l = "md",
   className: c
 }) => {
-  const [f, g] = V(
+  const [f, p] = R(
     r || n || t[0]?.id || ""
-  ), N = n || f, x = (p) => {
-    s ? s(p) : g(p);
-  }, u = {
+  ), N = n || f, h = (y) => {
+    s ? s(y) : p(y);
+  }, m = {
     activeTab: N,
-    setActiveTab: x
-  }, h = t.find((p) => p.id === N), v = d(
+    setActiveTab: h
+  }, x = t.find((y) => y.id === N), v = d(
     "flex",
     {
       "border-b border-border px-2": a === "default" || a === "underline",
@@ -2128,57 +2129,57 @@ const Vt = ({
       "space-x-8": a === "default" || a === "underline"
     },
     c
-  ), C = (p, y) => {
-    const T = "transition-colors duration-fast font-medium", M = {
+  ), C = (y, g) => {
+    const A = "transition-colors duration-fast font-medium", $ = {
       "text-xs px-2 py-1": l === "sm",
       "text-sm px-3 py-2": l === "md",
       "text-base px-4 py-3": l === "lg"
-    }, P = {
+    }, _ = {
       // Default variant
       "border-b-2 -mb-px": a === "default",
       // Pills variant
       "rounded-md": a === "pills",
       // Underline variant
       "border-b-2 pb-2": a === "underline"
-    }, B = {
-      "opacity-50 cursor-not-allowed": p.disabled,
-      "cursor-pointer": !p.disabled
-    }, W = y ? {
+    }, M = {
+      "opacity-50 cursor-not-allowed": y.disabled,
+      "cursor-pointer": !y.disabled
+    }, U = g ? {
       "border-accent-border text-text": a === "default" || a === "underline",
       "bg-surface text-text shadow-none": a === "pills"
-    } : {}, H = !y && !p.disabled ? {
+    } : {}, V = !g && !y.disabled ? {
       "border-transparent text-text-muted hover:text-text": a === "default",
       "text-text-muted hover:text-text": a === "pills",
       "border-transparent text-text-muted hover:text-text hover:border-border": a === "underline"
     } : {};
-    return d(T, M, P, B, W, H);
+    return d(A, $, _, M, U, V);
   };
-  return /* @__PURE__ */ e(Yt.Provider, { value: u, children: /* @__PURE__ */ i("div", { children: [
-    /* @__PURE__ */ e("div", { className: v, role: "tablist", children: t.map((p) => /* @__PURE__ */ e(
+  return /* @__PURE__ */ e(Yt.Provider, { value: m, children: /* @__PURE__ */ i("div", { children: [
+    /* @__PURE__ */ e("div", { className: v, role: "tablist", children: t.map((y) => /* @__PURE__ */ e(
       "button",
       {
         type: "button",
         role: "tab",
-        "aria-selected": N === p.id,
-        "aria-controls": `tabpanel-${p.id}`,
-        disabled: p.disabled,
-        onClick: () => !p.disabled && x(p.id),
-        className: C(p, N === p.id),
+        "aria-selected": N === y.id,
+        "aria-controls": `tabpanel-${y.id}`,
+        disabled: y.disabled,
+        onClick: () => !y.disabled && h(y.id),
+        className: C(y, N === y.id),
         children: /* @__PURE__ */ i("span", { className: "flex items-center gap-2", children: [
-          p.label,
-          p.badge && /* @__PURE__ */ e("span", { className: "inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-surface-hover text-text-muted", children: p.badge })
+          y.label,
+          y.badge && /* @__PURE__ */ e("span", { className: "inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-surface-hover text-text-muted", children: y.badge })
         ] })
       },
-      p.id
+      y.id
     )) }),
-    h?.content && /* @__PURE__ */ e(
+    x?.content && /* @__PURE__ */ e(
       "div",
       {
         role: "tabpanel",
         id: `tabpanel-${N}`,
         "aria-labelledby": `tab-${N}`,
         className: "mt-4",
-        children: h.content
+        children: x.content
       }
     )
   ] }) });
@@ -2198,18 +2199,18 @@ function Fe({
   closeOnEscape: l = !0,
   className: c,
   backdropClassName: f,
-  children: g,
+  children: p,
   footer: N,
-  showCloseButton: x = !0
+  showCloseButton: h = !0
 }) {
-  const u = se(null), h = se(null);
+  const m = se(null), x = se(null);
   J(() => {
     if (!t || !l) return;
-    const C = (p) => {
-      p.key === "Escape" && r();
+    const C = (y) => {
+      y.key === "Escape" && r();
     };
     return document.addEventListener("keydown", C), () => document.removeEventListener("keydown", C);
-  }, [t, l, r]), J(() => (t ? (h.current = document.activeElement, u.current && u.current.focus(), document.body.style.overflow = "hidden") : (h.current && h.current.focus(), document.body.style.overflow = ""), () => {
+  }, [t, l, r]), J(() => (t ? (x.current = document.activeElement, m.current && m.current.focus(), document.body.style.overflow = "hidden") : (x.current && x.current.focus(), document.body.style.overflow = ""), () => {
     document.body.style.overflow = "";
   }), [t]);
   const v = (C) => {
@@ -2228,7 +2229,7 @@ function Fe({
       children: /* @__PURE__ */ i(
         "div",
         {
-          ref: u,
+          ref: m,
           className: d(
             "relative w-full bg-surface rounded-lg shadow-modal",
             // 'animate-scale-in',
@@ -2241,7 +2242,7 @@ function Fe({
           "aria-labelledby": n ? "modal-title" : void 0,
           tabIndex: -1,
           children: [
-            (n || x) && /* @__PURE__ */ i("div", { className: "flex items-center justify-between p-6 pb-0", children: [
+            (n || h) && /* @__PURE__ */ i("div", { className: "flex items-center justify-between p-6 pb-0", children: [
               n && /* @__PURE__ */ e(
                 "span",
                 {
@@ -2250,7 +2251,7 @@ function Fe({
                   children: n
                 }
               ),
-              x && /* @__PURE__ */ e(
+              h && /* @__PURE__ */ e(
                 "button",
                 {
                   onClick: r,
@@ -2260,7 +2261,7 @@ function Fe({
                 }
               )
             ] }),
-            /* @__PURE__ */ e("div", { className: "p-6", children: g }),
+            /* @__PURE__ */ e("div", { className: "p-6", children: p }),
             N && /* @__PURE__ */ e("div", { className: "px-6 py-4", children: N })
           ]
         }
@@ -2309,32 +2310,32 @@ const Qt = {
   truncate: l = !1,
   italic: c = !1,
   underline: f = !1,
-  lineHeight: g = "normal",
+  lineHeight: p = "normal",
   as: N,
-  className: x,
-  children: u,
-  ...h
+  className: h,
+  children: m,
+  ...x
 }) => {
-  const v = N || sr(t), C = t === "caption", p = t === "label", y = t === "code", T = d(
+  const v = N || sr(t), C = t === "caption", y = t === "label", g = t === "code", A = d(
     "font-sans",
     // Variant — caption and label pin their own size/weight
     C && "text-xs text-text-subtle",
-    p && "text-xs font-semibold uppercase tracking-label text-text-subtle",
-    y && "font-mono text-sm rounded-sm bg-surface-hover px-1 py-0.5",
+    y && "text-xs font-semibold uppercase tracking-label text-text-subtle",
+    g && "font-mono text-sm rounded-sm bg-surface-hover px-1 py-0.5",
     // Size — only where the variant does not pin it
-    !C && !p && !y && Qt[r],
+    !C && !y && !g && Qt[r],
     // Weight — label owns its weight
-    !p && er[n],
+    !y && er[n],
     tr[s],
     rr[a],
     // Line height only overrides the body variant
-    t === "body" && nr[g],
+    t === "body" && nr[p],
     c && "italic",
     f && "underline",
     l && "truncate",
-    x
+    h
   );
-  return /* @__PURE__ */ e(v, { className: T, ...h, children: u });
+  return /* @__PURE__ */ e(v, { className: A, ...x, children: m });
 };
 function sr(t) {
   return {
@@ -2353,47 +2354,47 @@ const ar = ({
   disabled: l,
   accept: c,
   onListFiles: f,
-  onListMounts: g,
+  onListMounts: p,
   onUploadFile: N,
-  onDownloadFile: x,
-  onRegisterFile: u
+  onDownloadFile: h,
+  onRegisterFile: m
 }) => {
-  const [h, v] = V(!1), [C, p] = V([]), [y, T] = V(null), [M, P] = V("/"), [B, W] = V([]), [H, L] = V(!1), [K, U] = V(""), [Y, Z] = V(
+  const [x, v] = R(!1), [C, y] = R([]), [g, A] = R(null), [$, _] = R("/"), [M, U] = R([]), [V, I] = R(!1), [W, H] = R(""), [Y, Z] = R(
     typeof t == "object" ? t : null
-  ), [Q, b] = V(!1), [m, E] = V(""), w = se(null);
+  ), [Q, b] = R(!1), [u, E] = R(""), w = se(null);
   J(() => {
-    h && I();
-  }, [h]), J(() => {
-    h && y && k();
-  }, [h, y, M, K]);
-  const I = async () => {
-    L(!0);
+    x && P();
+  }, [x]), J(() => {
+    x && g && k();
+  }, [x, g, $, W]);
+  const P = async () => {
+    I(!0);
     try {
-      const o = await g?.();
-      o?.data && p(o.data);
+      const o = await p?.();
+      o?.data && y(o.data);
     } catch (o) {
       console.error("Failed to load mounts", o);
     } finally {
-      L(!1);
+      I(!1);
     }
   }, k = async () => {
-    if (y) {
-      L(!0);
+    if (g) {
+      I(!0);
       try {
-        const o = await f?.({ mountId: y.id, name: K, path: M });
-        o?.data && W(o.data);
+        const o = await f?.({ mountId: g.id, name: W, path: $ });
+        o?.data && U(o.data);
       } catch (o) {
         console.error("Failed to load files", o);
       } finally {
-        L(!1);
+        I(!1);
       }
     }
   }, ae = async (o) => {
     const z = o.target.files?.[0];
     if (z) {
-      L(!0);
+      I(!0);
       try {
-        const F = await z.arrayBuffer(), R = new Uint8Array(F), O = {
+        const B = await z.arrayBuffer(), F = new Uint8Array(B), O = {
           id: `local-${Date.now()}`,
           name: z.name,
           type: "file",
@@ -2404,99 +2405,99 @@ const ar = ({
           providerKey: z.name,
           ownerId: "me"
         };
-        Z(O), r(O, R), v(!1);
-      } catch (F) {
-        console.error("Local file selection failed", F);
+        Z(O), r(O, F), v(!1);
+      } catch (B) {
+        console.error("Local file selection failed", B);
       } finally {
-        L(!1);
+        I(!1);
       }
     }
   }, ne = async (o) => {
     const z = o.target.files?.[0];
-    if (!(!z || !y)) {
-      L(!0);
+    if (!(!z || !g)) {
+      I(!0);
       try {
-        const F = await z.arrayBuffer(), R = await N?.({
-          file: new Uint8Array(F),
+        const B = await z.arrayBuffer(), F = await N?.({
+          file: new Uint8Array(B),
           filename: z.name,
           mimeType: z.type || "application/octet-stream",
-          mountId: y.id,
-          path: M
+          mountId: g.id,
+          path: $
         });
-        if (R?.data) {
-          const O = R.data;
-          Z(O), r(O, new Uint8Array(F)), v(!1);
+        if (F?.data) {
+          const O = F.data;
+          Z(O), r(O, new Uint8Array(B)), v(!1);
         }
-      } catch (F) {
-        console.error("Upload failed", F);
+      } catch (B) {
+        console.error("Upload failed", B);
       } finally {
-        L(!1);
+        I(!1);
       }
     }
   }, ee = async () => {
-    if (!(!m || !y)) {
-      L(!0);
+    if (!(!u || !g)) {
+      I(!0);
       try {
-        const o = `${M}${m}/`;
-        u && (await u({
-          name: m,
+        const o = `${$}${u}/`;
+        m && (await m({
+          name: u,
           type: "folder",
-          path: M,
+          path: $,
           mimeType: "application/x-directory",
           size: 0,
-          mountId: y.id,
+          mountId: g.id,
           providerKey: o,
           ownerId: "me"
         }), await k()), b(!1), E("");
       } catch (o) {
         console.error("Failed to create folder", o);
       } finally {
-        L(!1);
+        I(!1);
       }
     }
   }, G = async (o) => {
-    L(!0);
+    I(!0);
     try {
-      const z = await x?.(o.id);
+      const z = await h?.(o.id);
       Z(o), r(o, z), v(!1);
     } catch (z) {
       console.error("Failed to download file", z);
     } finally {
-      L(!1);
+      I(!1);
     }
   }, S = (o) => {
     o.stopPropagation(), Z(null), r(null);
-  }, D = me(() => {
+  }, T = me(() => {
     const o = /* @__PURE__ */ new Set(), z = [];
-    return B.forEach((F) => {
-      if (F.type === "folder") {
-        F.path === M && o.add(F.name);
+    return M.forEach((B) => {
+      if (B.type === "folder") {
+        B.path === $ && o.add(B.name);
         return;
       }
-      const R = F.providerKey || F.name, te = (M ? R.substring(M.length) : R).split("/").filter((ie) => ie !== "");
-      te.length > 1 ? o.add(te[0]) : te.length === 1 && z.push(F);
+      const F = B.providerKey || B.name, te = ($ ? F.substring($.length) : F).split("/").filter((ie) => ie !== "");
+      te.length > 1 ? o.add(te[0]) : te.length === 1 && z.push(B);
     }), {
       folders: Array.from(o).sort(),
-      files: z.sort((F, R) => F.name.localeCompare(R.name))
+      files: z.sort((B, F) => B.name.localeCompare(F.name))
     };
-  }, [B, M]), A = (o) => {
-    P((z) => `${z}${o}/`);
-  }, $ = () => {
-    const o = M.split("/").filter((z) => z !== "");
-    o.pop(), o.length === 0 ? P("/") : P(`${o.join("/")}/`);
+  }, [M, $]), L = (o) => {
+    _((z) => `${z}${o}/`);
+  }, D = () => {
+    const o = $.split("/").filter((z) => z !== "");
+    o.pop(), o.length === 0 ? _("/") : _(`${o.join("/")}/`);
   }, q = me(() => {
-    const o = D.folders.map((z) => ({
+    const o = T.folders.map((z) => ({
       id: `folder-${z}`,
       name: z,
       type: "folder"
     }));
-    return D.files.forEach((z) => {
+    return T.files.forEach((z) => {
       o.push({
         ...z,
         type: "file"
       });
     }), o;
-  }, [D]), j = [
+  }, [T]), j = [
     {
       id: "name",
       header: "Name",
@@ -2533,15 +2534,15 @@ const ar = ({
         {
           size: "sm",
           variant: "outline",
-          onClick: (F) => {
-            F.stopPropagation(), z.type === "folder" ? A(z.name) : G(z);
+          onClick: (B) => {
+            B.stopPropagation(), z.type === "folder" ? L(z.name) : G(z);
           },
-          loading: H && z.type === "file" && Y?.id === z.id,
+          loading: V && z.type === "file" && Y?.id === z.id,
           children: z.type === "folder" ? "Open" : "Select"
         }
       )
     }
-  ], _ = [
+  ], K = [
     {
       id: "name",
       header: "Mount Name",
@@ -2556,7 +2557,7 @@ const ar = ({
       header: "",
       accessor: "id",
       align: "right",
-      cell: (o, z) => /* @__PURE__ */ e(re, { size: "sm", variant: "outline", onClick: () => T(z), children: "Open" })
+      cell: (o, z) => /* @__PURE__ */ e(re, { size: "sm", variant: "outline", onClick: () => A(z), children: "Open" })
     }
   ];
   return /* @__PURE__ */ i("div", { className: "space-y-1", children: [
@@ -2589,11 +2590,11 @@ const ar = ({
     /* @__PURE__ */ e(
       Fe,
       {
-        open: h,
+        open: x,
         onClose: () => {
-          v(!1), T(null), P("/"), b(!1);
+          v(!1), A(null), _("/"), b(!1);
         },
-        title: y ? `Explorer: ${y.name}` : "Select Storage Mount",
+        title: g ? `Explorer: ${g.name}` : "Select Storage Mount",
         size: "lg",
         children: /* @__PURE__ */ e(
           Xt,
@@ -2603,7 +2604,7 @@ const ar = ({
               {
                 id: "remote",
                 label: "Platform Storage",
-                content: /* @__PURE__ */ e("div", { className: "space-y-4", children: y ? /* @__PURE__ */ i(fe, { children: [
+                content: /* @__PURE__ */ e("div", { className: "space-y-4", children: g ? /* @__PURE__ */ i(fe, { children: [
                   /* @__PURE__ */ i("div", { className: "flex flex-wrap items-center gap-2", children: [
                     /* @__PURE__ */ e(
                       re,
@@ -2611,19 +2612,19 @@ const ar = ({
                         variant: "ghost",
                         size: "sm",
                         onClick: () => {
-                          M && M !== "/" ? $() : T(null);
+                          $ && $ !== "/" ? D() : A(null);
                         },
                         leftIcon: /* @__PURE__ */ e(X, { icon: ze, size: "xs" }),
-                        children: M ? "Back" : "Back to Mounts"
+                        children: $ ? "Back" : "Back to Mounts"
                       }
                     ),
-                    /* @__PURE__ */ e("div", { className: "flex items-center gap-1 text-xs text-text-muted overflow-hidden bg-surface-hover px-2 py-1 rounded", children: /* @__PURE__ */ e("span", { className: "truncate", children: M }) }),
+                    /* @__PURE__ */ e("div", { className: "flex items-center gap-1 text-xs text-text-muted overflow-hidden bg-surface-hover px-2 py-1 rounded", children: /* @__PURE__ */ e("span", { className: "truncate", children: $ }) }),
                     /* @__PURE__ */ e("div", { className: "flex-grow min-w-40", children: /* @__PURE__ */ e(
                       he,
                       {
                         placeholder: "Search...",
-                        value: K,
-                        onChange: (o) => U(o.target.value),
+                        value: W,
+                        onChange: (o) => H(o.target.value),
                         startIcon: /* @__PURE__ */ e(Ne, { size: 14 }),
                         fullWidth: !0,
                         size: "sm"
@@ -2647,7 +2648,7 @@ const ar = ({
                           size: "sm",
                           onClick: () => w.current?.click(),
                           leftIcon: /* @__PURE__ */ e(X, { icon: nt, size: "xs" }),
-                          loading: H,
+                          loading: V,
                           children: "Upload"
                         }
                       ),
@@ -2670,12 +2671,12 @@ const ar = ({
                       {
                         size: "sm",
                         placeholder: "Folder name",
-                        value: m,
+                        value: u,
                         onChange: (o) => E(o.target.value),
                         autoFocus: !0
                       }
                     ),
-                    /* @__PURE__ */ e(re, { size: "sm", onClick: ee, loading: H, children: "Create" }),
+                    /* @__PURE__ */ e(re, { size: "sm", onClick: ee, loading: V, children: "Create" }),
                     /* @__PURE__ */ e(re, { size: "sm", variant: "ghost", onClick: () => b(!1), children: "Cancel" })
                   ] }),
                   /* @__PURE__ */ e("div", { className: "max-h-100 overflow-auto rounded-lg border border-border", children: /* @__PURE__ */ e(
@@ -2683,19 +2684,19 @@ const ar = ({
                     {
                       data: q,
                       columns: j,
-                      loading: H,
+                      loading: V,
                       emptyContent: "This folder is empty",
-                      onRowClick: (o) => o.type === "folder" ? A(o.name) : G(o)
+                      onRowClick: (o) => o.type === "folder" ? L(o.name) : G(o)
                     }
                   ) })
                 ] }) : /* @__PURE__ */ e("div", { className: "max-h-100 overflow-auto rounded-lg border border-border", children: /* @__PURE__ */ e(
                   Te,
                   {
                     data: C,
-                    columns: _,
-                    loading: H,
+                    columns: K,
+                    loading: V,
                     emptyContent: "No storage mounts configured",
-                    onRowClick: (o) => T(o)
+                    onRowClick: (o) => A(o)
                   }
                 ) }) })
               },
@@ -2711,7 +2712,7 @@ const ar = ({
                     " be uploaded to platform storage."
                   ] }),
                   /* @__PURE__ */ i("label", { className: "cursor-pointer", children: [
-                    /* @__PURE__ */ e(re, { variant: "primary", size: "lg", loading: H, className: "pointer-events-none", children: "Browse Local File" }),
+                    /* @__PURE__ */ e(re, { variant: "primary", size: "lg", loading: V, className: "pointer-events-none", children: "Browse Local File" }),
                     /* @__PURE__ */ e(
                       "input",
                       {
@@ -2719,7 +2720,7 @@ const ar = ({
                         className: "hidden",
                         onChange: ae,
                         accept: c,
-                        disabled: H
+                        disabled: V
                       }
                     )
                   ] })
@@ -2746,12 +2747,12 @@ const ar = ({
     loading: l = !1,
     containerClassName: c,
     labelClassName: f,
-    className: g,
+    className: p,
     id: N,
-    rows: x = 4,
-    ...u
-  }, h) => {
-    const v = le.useId(), C = N || `textarea-${v}`, p = !!n, y = n || r ? `${C}-description` : void 0;
+    rows: h = 4,
+    ...m
+  }, x) => {
+    const v = le.useId(), C = N || `textarea-${v}`, y = !!n, g = n || r ? `${C}-description` : void 0;
     return /* @__PURE__ */ i("div", { className: d("flex flex-col", a && "w-full", c), children: [
       t && /* @__PURE__ */ e(
         "label",
@@ -2759,7 +2760,7 @@ const ar = ({
           htmlFor: C,
           className: d(
             Oe,
-            p ? "text-danger-fg" : "text-text-subtle",
+            y ? "text-danger-fg" : "text-text-subtle",
             f
           ),
           children: t
@@ -2769,11 +2770,11 @@ const ar = ({
         /* @__PURE__ */ e(
           "textarea",
           {
-            ref: h,
+            ref: x,
             id: C,
-            rows: x,
-            "aria-invalid": p || void 0,
-            "aria-describedby": y,
+            rows: h,
+            "aria-invalid": y || void 0,
+            "aria-describedby": g,
             className: d(
               "block w-full resize-y rounded-md border bg-surface-input text-text",
               "transition-colors duration-fast ease-out",
@@ -2781,10 +2782,10 @@ const ar = ({
               "focus-visible:outline-none focus-visible:focus-ring",
               "disabled:cursor-not-allowed disabled:bg-surface-hover disabled:text-text-disabled",
               lr[s],
-              p ? "border-danger-border bg-danger-soft" : "border-border hover:border-border-strong",
-              g
+              y ? "border-danger-border bg-danger-soft" : "border-border hover:border-border-strong",
+              p
             ),
-            ...u
+            ...m
           }
         ),
         l && /* @__PURE__ */ e(
@@ -2798,8 +2799,8 @@ const ar = ({
       (n || r) && /* @__PURE__ */ e(
         "p",
         {
-          id: y,
-          className: d("mt-1 text-xs", p ? "text-danger-fg" : "text-text-subtle"),
+          id: g,
+          className: d("mt-1 text-xs", y ? "text-danger-fg" : "text-text-subtle"),
           children: n || r
         }
       )
@@ -2817,8 +2818,8 @@ function or(t, r, n) {
   const s = r.split("."), a = Array.isArray(t) ? [...t] : { ...t };
   let l = a;
   for (let c = 0; c < s.length - 1; c++) {
-    const f = s[c], g = l[f];
-    l[f] = g && typeof g == "object" ? Array.isArray(g) ? [...g] : { ...g } : {}, l = l[f];
+    const f = s[c], p = l[f];
+    l[f] = p && typeof p == "object" ? Array.isArray(p) ? [...p] : { ...p } : {}, l = l[f];
   }
   return l[s[s.length - 1]] = n, a;
 }
@@ -2841,95 +2842,95 @@ const Qr = ({
   transform: l,
   validate: c,
   submitButton: f = { label: "Submit", variant: "primary" },
-  cancelButton: g = { label: "Cancel", variant: "outline" },
+  cancelButton: p = { label: "Cancel", variant: "outline" },
   showButtons: N = !0,
-  layout: x = "vertical",
-  size: u = "md",
-  loading: h = !1,
+  layout: h = "vertical",
+  size: m = "md",
+  loading: x = !1,
   className: v,
   ref: C,
-  sdk: p
+  sdk: y
 }) => {
-  const [y, T] = V(r || {}), [M, P] = V({}), [B, W] = V({});
+  const [g, A] = R(r || {}), [$, _] = R({}), [M, U] = R({});
   J(() => {
-    r && T({ ...r });
+    r && A({ ...r });
   }, [r]);
-  const H = ce(
-    (b, m, E) => {
-      const w = t.flatMap((I) => I.items).find((I) => I.name === b);
+  const V = ce(
+    (b, u, E) => {
+      const w = t.flatMap((P) => P.items).find((P) => P.name === b);
       if (!w) return null;
-      if (w.required && (m == null || m === ""))
+      if (w.required && (u == null || u === ""))
         return `${w.label} is required`;
       if (w.type === "array") {
-        if (w.required && (!m || m.length === 0))
+        if (w.required && (!u || u.length === 0))
           return `${w.label} cannot be empty.`;
-        if (m && !Array.isArray(m))
+        if (u && !Array.isArray(u))
           return `${w.label} must be an array.`;
-        if (Array.isArray(m) && w.arrayFields) {
-          const I = [];
+        if (Array.isArray(u) && w.arrayFields) {
+          const P = [];
           let k = !1;
-          if (m.forEach((ae, ne) => {
+          if (u.forEach((ae, ne) => {
             const ee = {};
             for (const G of w.arrayFields) {
               const S = ae?.[G.name];
               if (G.required && (S == null || S === ""))
                 ee[G.name] = `${G.label} is required`, k = !0;
               else if (G.validator) {
-                const D = G.validator(S, ae);
-                D && (ee[G.name] = D, k = !0);
+                const T = G.validator(S, ae);
+                T && (ee[G.name] = T, k = !0);
               }
             }
-            I[ne] = ee;
+            P[ne] = ee;
           }), k)
-            return JSON.stringify(I);
+            return JSON.stringify(P);
         }
       }
-      return w.validator ? w.validator(m, E) : null;
+      return w.validator ? w.validator(u, E) : null;
     },
     [t]
-  ), L = ce(
-    (b, m) => {
+  ), I = ce(
+    (b, u) => {
       let E = or(
-        y,
+        g,
         b,
-        m
+        u
       );
-      t.flatMap((k) => k.items).find((k) => k.name === b)?.removeIfEmpty && (m == null || m === "") && (E = cr(E, b)), T(E), W((k) => ({ ...k, [b]: !0 }));
-      const I = H(b, m, E);
-      P((k) => ({
+      t.flatMap((k) => k.items).find((k) => k.name === b)?.removeIfEmpty && (u == null || u === "") && (E = cr(E, b)), A(E), U((k) => ({ ...k, [b]: !0 }));
+      const P = V(b, u, E);
+      _((k) => ({
         ...k,
-        [b]: I || ""
+        [b]: P || ""
       })), a?.(E, b);
     },
-    [y, t, H, a]
-  ), K = ce(
+    [g, t, V, a]
+  ), W = ce(
     async (b) => {
-      if (b.preventDefault(), h) return;
-      const m = {}, E = t.flatMap((I) => I.items);
-      for (const I of E) {
-        if (I.hidden || I.conditional && !I.conditional(y))
+      if (b.preventDefault(), x) return;
+      const u = {}, E = t.flatMap((P) => P.items);
+      for (const P of E) {
+        if (P.hidden || P.conditional && !P.conditional(g))
           continue;
-        const k = H(
-          I.name,
-          Ae(y, I.name),
-          y
+        const k = V(
+          P.name,
+          Ae(g, P.name),
+          g
         );
-        k && (m[I.name] = k);
+        k && (u[P.name] = k);
       }
       if (c) {
-        const I = c(y);
-        I && Object.assign(m, I);
+        const P = c(g);
+        P && Object.assign(u, P);
       }
-      if (P(m), Object.keys(m).some((I) => m[I]))
+      if (_(u), Object.keys(u).some((P) => u[P]))
         return;
-      const w = l ? l(y) : y;
-      await n?.(y, w);
+      const w = l ? l(g) : g;
+      await n?.(g, w);
     },
-    [y, t, H, c, l, n, h]
-  ), U = ce(
+    [g, t, V, c, l, n, x]
+  ), H = ce(
     (b) => {
-      const m = Ae(y, b.name), E = B[b.name] ? M[b.name] : void 0, w = b.disabled || h, I = {
-        value: m || "",
+      const u = Ae(g, b.name), E = M[b.name] ? $[b.name] : void 0, w = b.disabled || x, P = {
+        value: u || "",
         disabled: w,
         required: b.required,
         placeholder: b.placeholder,
@@ -2945,31 +2946,31 @@ const Qr = ({
           return /* @__PURE__ */ e(
             he,
             {
-              ...I,
-              onChange: (k) => L(b.name, k.target.value),
+              ...P,
+              onChange: (k) => I(b.name, k.target.value),
               type: b.textType || b.type,
               autoComplete: b.autocomplete,
               error: E,
-              size: u
+              size: m
             }
           );
         case "textarea":
           return /* @__PURE__ */ e(
             Se,
             {
-              ...I,
-              onChange: (k) => L(b.name, k.target.value),
+              ...P,
+              onChange: (k) => I(b.name, k.target.value),
               rows: 4,
               error: E,
-              size: u
+              size: m
             }
           );
         case "select":
           return /* @__PURE__ */ e(
             pe,
             {
-              ...I,
-              onChange: (k) => L(b.name, k),
+              ...P,
+              onChange: (k) => I(b.name, k),
               options: (b.options || []).map((k) => ({
                 ...k,
                 value: String(k.value)
@@ -2978,17 +2979,17 @@ const Qr = ({
               multiple: b.multiple,
               allowCreate: b.allowCreate,
               error: E,
-              size: u
+              size: m
             }
           );
         case "checkbox":
           return /* @__PURE__ */ e(
             xe,
             {
-              ...I,
-              checked: !!m,
-              onChange: (k) => L(b.name, k.target.checked),
-              size: u
+              ...P,
+              checked: !!u,
+              onChange: (k) => I(b.name, k.target.checked),
+              size: m
             }
           );
         case "radio":
@@ -3003,8 +3004,8 @@ const Qr = ({
                     type: "radio",
                     name: b.name,
                     value: k.value,
-                    checked: m === k.value,
-                    onChange: () => L(b.name, k.value),
+                    checked: u === k.value,
+                    onChange: () => I(b.name, k.value),
                     disabled: w || k.disabled,
                     className: "size-checkbox shrink-0 border border-border-strong bg-surface-input accent-accent focus-visible:outline-none focus-visible:focus-ring"
                   }
@@ -3018,39 +3019,39 @@ const Qr = ({
           return /* @__PURE__ */ e(
             Ce,
             {
-              ...I,
-              value: m ? new Date(m) : null,
-              onChange: (k) => L(b.name, k),
-              size: u
+              ...P,
+              value: u ? new Date(u) : null,
+              onChange: (k) => I(b.name, k),
+              size: m
             }
           );
         case "file":
           return /* @__PURE__ */ e(
             ar,
             {
-              ...I,
-              value: m,
-              onChange: (k) => L(b.name, k),
+              ...P,
+              value: u,
+              onChange: (k) => I(b.name, k),
               error: E,
-              onListFiles: (k) => p?.http.invoke({
+              onListFiles: (k) => y?.http.invoke({
                 method: "POST",
                 action: "storage.file.list",
                 body: k
               }),
-              onListMounts: () => p?.http.invoke({
+              onListMounts: () => y?.http.invoke({
                 method: "GET",
                 action: "storage.mount"
               }),
-              onUploadFile: (k) => p?.http.invoke({
+              onUploadFile: (k) => y?.http.invoke({
                 method: "POST",
                 action: "storage.file.upload",
                 body: k
               }),
-              onDownloadFile: (k) => p?.http.invoke({
+              onDownloadFile: (k) => y?.http.invoke({
                 method: "GET",
                 action: `storage.file.${k}.download`
               }),
-              onRegisterFile: (k) => p?.http.invoke({
+              onRegisterFile: (k) => y?.http.invoke({
                 method: "POST",
                 action: "storage.file.folder",
                 body: k
@@ -3061,26 +3062,26 @@ const Qr = ({
           return /* @__PURE__ */ e(
             It,
             {
-              value: m || {},
-              onChange: (k) => L(b.name, k),
-              onListFolders: () => p?.http.invoke({
+              value: u || {},
+              onChange: (k) => I(b.name, k),
+              onListFolders: () => y?.http.invoke({
                 method: "GET",
                 action: "storage.mount"
               }),
               disabled: w,
-              size: u,
+              size: m,
               placeholder: b.placeholder
             }
           );
         case "custom":
           return b.customComponent?.({
-            value: m,
-            onChange: (k) => L(b.name, k),
+            value: u,
+            onChange: (k) => I(b.name, k),
             error: E,
             disabled: w
           });
         case "array": {
-          const k = m || [];
+          const k = u || [];
           let ae = [];
           if (typeof E == "string" && E.startsWith("["))
             try {
@@ -3088,41 +3089,41 @@ const Qr = ({
             } catch {
             }
           const ne = () => {
-            L(b.name, [...k, {}]);
+            I(b.name, [...k, {}]);
           }, ee = (S) => {
-            L(
+            I(
               b.name,
-              k.filter((D, A) => A !== S)
+              k.filter((T, L) => L !== S)
             );
-          }, G = (S, D, A) => {
-            const $ = [...k];
-            $[S] = {
-              ...$[S],
-              [D]: A
-            }, L(b.name, $);
+          }, G = (S, T, L) => {
+            const D = [...k];
+            D[S] = {
+              ...D[S],
+              [T]: L
+            }, I(b.name, D);
           };
           return /* @__PURE__ */ i("div", { className: "flex flex-col gap-2", children: [
-            k.map((S, D) => /* @__PURE__ */ i("div", { className: "flex items-start gap-2", children: [
-              /* @__PURE__ */ e("div", { className: "grid flex-1 gap-2 sm:grid-cols-2", children: b.arrayFields?.map((A) => {
-                const $ = ae?.[D]?.[A.name];
+            k.map((S, T) => /* @__PURE__ */ i("div", { className: "flex items-start gap-2", children: [
+              /* @__PURE__ */ e("div", { className: "grid flex-1 gap-2 sm:grid-cols-2", children: b.arrayFields?.map((L) => {
+                const D = ae?.[T]?.[L.name];
                 return /* @__PURE__ */ i(
                   "div",
                   {
                     className: "flex flex-col gap-1",
                     children: [
-                      D === 0 && /* @__PURE__ */ i("label", { className: "block text-xs font-semibold uppercase tracking-label text-text-subtle", children: [
-                        A.label,
-                        A.required && /* @__PURE__ */ e("span", { className: "ml-1 text-danger-fg", children: "*" })
+                      T === 0 && /* @__PURE__ */ i("label", { className: "block text-xs font-semibold uppercase tracking-label text-text-subtle", children: [
+                        L.label,
+                        L.required && /* @__PURE__ */ e("span", { className: "ml-1 text-danger-fg", children: "*" })
                       ] }),
                       (() => {
                         const q = {
-                          value: S?.[A.name] || "",
+                          value: S?.[L.name] || "",
                           disabled: w,
-                          required: A.required,
-                          placeholder: A.placeholder,
-                          ...A.fieldProps
+                          required: L.required,
+                          placeholder: L.placeholder,
+                          ...L.fieldProps
                         };
-                        switch (A.type) {
+                        switch (L.type) {
                           case "text":
                           case "email":
                           case "password":
@@ -3134,14 +3135,14 @@ const Qr = ({
                               {
                                 ...q,
                                 onChange: (j) => G(
-                                  D,
-                                  A.name,
+                                  T,
+                                  L.name,
                                   j.target.value
                                 ),
-                                type: A.textType || A.type,
-                                autoComplete: A.autocomplete,
-                                error: $,
-                                size: u
+                                type: L.textType || L.type,
+                                autoComplete: L.autocomplete,
+                                error: D,
+                                size: m
                               }
                             );
                           case "textarea":
@@ -3150,13 +3151,13 @@ const Qr = ({
                               {
                                 ...q,
                                 onChange: (j) => G(
-                                  D,
-                                  A.name,
+                                  T,
+                                  L.name,
                                   j.target.value
                                 ),
                                 rows: 4,
-                                error: $,
-                                size: u
+                                error: D,
+                                size: m
                               }
                             );
                           case "select":
@@ -3165,21 +3166,21 @@ const Qr = ({
                               {
                                 ...q,
                                 onChange: (j) => G(
-                                  D,
-                                  A.name,
+                                  T,
+                                  L.name,
                                   j
                                 ),
-                                options: (A.options || []).map(
+                                options: (L.options || []).map(
                                   (j) => ({
                                     ...j,
                                     value: String(j.value)
                                   })
                                 ),
-                                searchable: A.searchable,
-                                multiple: A.multiple,
-                                allowCreate: A.allowCreate,
-                                error: $,
-                                size: u
+                                searchable: L.searchable,
+                                multiple: L.multiple,
+                                allowCreate: L.allowCreate,
+                                error: D,
+                                size: m
                               }
                             );
                           case "checkbox":
@@ -3187,17 +3188,17 @@ const Qr = ({
                               xe,
                               {
                                 ...q,
-                                checked: !!S?.[A.name],
+                                checked: !!S?.[L.name],
                                 onChange: (j) => G(
-                                  D,
-                                  A.name,
+                                  T,
+                                  L.name,
                                   j.target.checked
                                 ),
-                                size: u
+                                size: m
                               }
                             );
                           case "radio":
-                            return /* @__PURE__ */ e("div", { className: "flex flex-col gap-2", children: A.options?.map((j) => /* @__PURE__ */ i(
+                            return /* @__PURE__ */ e("div", { className: "flex flex-col gap-2", children: L.options?.map((j) => /* @__PURE__ */ i(
                               "label",
                               {
                                 className: "flex cursor-pointer items-center gap-2 text-base text-text",
@@ -3206,12 +3207,12 @@ const Qr = ({
                                     "input",
                                     {
                                       type: "radio",
-                                      name: `${b.name}.${D}.${A.name}`,
+                                      name: `${b.name}.${T}.${L.name}`,
                                       value: j.value,
-                                      checked: S?.[A.name] === j.value,
+                                      checked: S?.[L.name] === j.value,
                                       onChange: () => G(
-                                        D,
-                                        A.name,
+                                        T,
+                                        L.name,
                                         j.value
                                       ),
                                       disabled: w || j.disabled,
@@ -3224,30 +3225,30 @@ const Qr = ({
                               j.value
                             )) });
                           case "date": {
-                            const j = S?.[A.name];
+                            const j = S?.[L.name];
                             return /* @__PURE__ */ e(
                               Ce,
                               {
                                 ...q,
                                 value: j ? new Date(j) : null,
-                                onChange: (_) => G(
-                                  D,
-                                  A.name,
-                                  _
+                                onChange: (K) => G(
+                                  T,
+                                  L.name,
+                                  K
                                 ),
-                                size: u
+                                size: m
                               }
                             );
                           }
                           case "custom":
-                            return A.customComponent?.({
-                              value: S?.[A.name],
+                            return L.customComponent?.({
+                              value: S?.[L.name],
                               onChange: (j) => G(
-                                D,
-                                A.name,
+                                T,
+                                L.name,
                                 j
                               ),
-                              error: $,
+                              error: D,
                               disabled: w
                             });
                           // Add other field types here as needed
@@ -3255,14 +3256,14 @@ const Qr = ({
                             return /* @__PURE__ */ i("p", { children: [
                               "Unsupported field type in array:",
                               " ",
-                              A.type
+                              L.type
                             ] });
                         }
                       })(),
-                      $ && /* @__PURE__ */ e("p", { className: "text-xs text-danger-fg", children: $ })
+                      D && /* @__PURE__ */ e("p", { className: "text-xs text-danger-fg", children: D })
                     ]
                   },
-                  A.name
+                  L.name
                 );
               }) }),
               /* @__PURE__ */ e(
@@ -3273,13 +3274,13 @@ const Qr = ({
                   variant: "ghost",
                   size: "md",
                   "aria-label": `${b.label} verwijderen`,
-                  onClick: () => ee(D),
+                  onClick: () => ee(T),
                   disabled: w,
-                  className: d("shrink-0", D === 0 && "mt-5"),
+                  className: d("shrink-0", T === 0 && "mt-5"),
                   children: /* @__PURE__ */ e(st, { className: "size-icon-md" })
                 }
               )
-            ] }, D)),
+            ] }, T)),
             /* @__PURE__ */ i(
               re,
               {
@@ -3301,13 +3302,13 @@ const Qr = ({
           return null;
       }
     },
-    [y, B, M, h, u, L]
+    [g, M, $, x, m, I]
   ), Y = ce(
     (b) => {
-      if (b.conditional && !b.conditional(y))
+      if (b.conditional && !b.conditional(g))
         return null;
-      const m = b.items.filter((w) => !(w.hidden || w.conditional && !w.conditional(y)));
-      if (m.length === 0) return null;
+      const u = b.items.filter((w) => !(w.hidden || w.conditional && !w.conditional(g)));
+      if (u.length === 0) return null;
       const E = d(
         b.layout === "flex" ? "flex flex-wrap gap-3" : "grid gap-3",
         b.layout !== "flex" && {
@@ -3327,7 +3328,7 @@ const Qr = ({
               /* @__PURE__ */ e("span", { className: "text-sm font-semibold text-text", children: b.title }),
               b.description && /* @__PURE__ */ e("p", { className: "mt-1 text-xs leading-4 text-text-subtle", children: b.description })
             ] }),
-            /* @__PURE__ */ e("div", { className: "min-w-0 flex-1", children: /* @__PURE__ */ e("div", { className: E, children: m.map((w) => (B[w.name] && M[w.name], /* @__PURE__ */ i(
+            /* @__PURE__ */ e("div", { className: "min-w-0 flex-1", children: /* @__PURE__ */ e("div", { className: E, children: u.map((w) => (M[w.name] && $[w.name], /* @__PURE__ */ i(
               "div",
               {
                 className: d(
@@ -3343,7 +3344,7 @@ const Qr = ({
                     w.label,
                     w.required && /* @__PURE__ */ e("span", { className: "ml-1 text-danger-fg", children: "*" })
                   ] }),
-                  U(w)
+                  H(w)
                 ]
               },
               w.name
@@ -3353,18 +3354,18 @@ const Qr = ({
         b.id
       );
     },
-    [y, B, M, U]
+    [g, M, $, H]
   ), Z = d(
     "overflow-hidden rounded-lg border border-border bg-surface",
     {
-      "max-w-md": u === "sm",
-      "max-w-2xl": u === "md",
-      "max-w-4xl": u === "lg",
-      "max-w-full": u === "full"
+      "max-w-md": m === "sm",
+      "max-w-2xl": m === "md",
+      "max-w-4xl": m === "lg",
+      "max-w-full": m === "full"
     },
     v
-  ), Q = u === "full" ? "md" : u;
-  return /* @__PURE__ */ i("form", { ref: C, onSubmit: K, className: Z, children: [
+  ), Q = m === "full" ? "md" : m;
+  return /* @__PURE__ */ i("form", { ref: C, onSubmit: W, className: Z, children: [
     /* @__PURE__ */ e("div", { className: "flex flex-col", children: t.map(Y) }),
     /* @__PURE__ */ e("div", { className: "flex items-center gap-2 border-t border-border-subtle bg-surface-sunk px-5 py-3", children: N && /* @__PURE__ */ i(fe, { children: [
       /* @__PURE__ */ e("div", { className: "ml-auto" }),
@@ -3372,12 +3373,12 @@ const Qr = ({
         re,
         {
           type: "button",
-          variant: g.variant ?? "ghost",
-          size: g.size || Q,
-          disabled: g.disabled || h,
+          variant: p.variant ?? "ghost",
+          size: p.size || Q,
+          disabled: p.disabled || x,
           onClick: s,
-          className: g.className,
-          children: g.label
+          className: p.className,
+          children: p.label
         }
       ),
       /* @__PURE__ */ e(
@@ -3386,8 +3387,8 @@ const Qr = ({
           type: "submit",
           variant: f.variant,
           size: f.size || Q,
-          disabled: f.disabled || h,
-          loading: h,
+          disabled: f.disabled || x,
+          loading: x,
           className: f.className,
           children: f.label
         }
@@ -3404,17 +3405,17 @@ function en({
   tone: l = "default",
   loading: c = !1,
   onConfirm: f,
-  onCancel: g
+  onCancel: p
 }) {
   return /* @__PURE__ */ e(
     Fe,
     {
       open: t,
-      onClose: g,
+      onClose: p,
       title: r,
       size: "sm",
       footer: /* @__PURE__ */ i("div", { className: "flex w-full items-center justify-end gap-2", children: [
-        /* @__PURE__ */ e(re, { variant: "ghost", onClick: g, disabled: c, children: a }),
+        /* @__PURE__ */ e(re, { variant: "ghost", onClick: p, disabled: c, children: a }),
         /* @__PURE__ */ e(
           re,
           {
@@ -3459,7 +3460,7 @@ function tn({
   onDismiss: l,
   className: c,
   children: f,
-  ...g
+  ...p
 }) {
   return /* @__PURE__ */ i(
     "span",
@@ -3473,7 +3474,7 @@ function tn({
         dr[r],
         c
       ),
-      ...g,
+      ...p,
       children: [
         n && /* @__PURE__ */ e(
           "span",
@@ -3703,32 +3704,32 @@ function on({
   className: a
 }) {
   const l = t.indexOf(r), c = { role: s ? "group" : void 0, "aria-label": s, "aria-hidden": s ? void 0 : !0 };
-  return n === "dots" ? /* @__PURE__ */ e("div", { ...c, className: d("flex items-center gap-1.5", a), children: t.map((f, g) => /* @__PURE__ */ e(
+  return n === "dots" ? /* @__PURE__ */ e("div", { ...c, className: d("flex items-center gap-1.5", a), children: t.map((f, p) => /* @__PURE__ */ e(
     "span",
     {
       className: d(
         "h-step-bar rounded-full transition-all duration-fast ease-out",
-        g === l ? "w-5 bg-accent" : "w-3.5",
-        g < l && "bg-border-strong",
-        g > l && "bg-border"
+        p === l ? "w-5 bg-accent" : "w-3.5",
+        p < l && "bg-border-strong",
+        p > l && "bg-border"
       )
     },
     f
-  )) }) : /* @__PURE__ */ e("div", { ...c, className: d("flex items-center gap-2", a), children: t.map((f, g) => /* @__PURE__ */ i("div", { className: "flex items-center gap-2", children: [
+  )) }) : /* @__PURE__ */ e("div", { ...c, className: d("flex items-center gap-2", a), children: t.map((f, p) => /* @__PURE__ */ i("div", { className: "flex items-center gap-2", children: [
     /* @__PURE__ */ e(
       "span",
       {
-        "aria-current": g === l ? "step" : void 0,
+        "aria-current": p === l ? "step" : void 0,
         className: d(
           "flex size-tile-sm items-center justify-center rounded-full text-xs font-medium",
-          g === l && "bg-accent text-accent-fg",
-          g < l && "bg-accent-soft text-accent",
-          g > l && "bg-surface-hover text-text-muted"
+          p === l && "bg-accent text-accent-fg",
+          p < l && "bg-accent-soft text-accent",
+          p > l && "bg-surface-hover text-text-muted"
         ),
-        children: g + 1
+        children: p + 1
       }
     ),
-    g < t.length - 1 && /* @__PURE__ */ e("span", { className: "h-px w-8 bg-border-strong" })
+    p < t.length - 1 && /* @__PURE__ */ e("span", { className: "h-px w-8 bg-border-strong" })
   ] }, f)) });
 }
 function cn({ title: t, icon: r = /* @__PURE__ */ e(lt, { className: "size-icon-md", "aria-hidden": !0 }), action: n, children: s, className: a, ...l }) {
@@ -3850,22 +3851,22 @@ const mn = ({
   showLoading: l = !0,
   showError: c = !0,
   fallback: f,
-  loadingContent: g,
+  loadingContent: p,
   errorContent: N,
-  className: x,
-  onLoad: u,
-  onError: h,
+  className: h,
+  onLoad: m,
+  onError: x,
   ...v
 }) => {
-  const [C, p] = V(!0), [y, T] = V(!1), [M, P] = V(t), B = (Z) => {
-    p(!1), T(!1), u?.(Z);
-  }, W = (Z) => {
-    if (p(!1), T(!0), f && M !== f) {
-      P(f), T(!1), p(!0);
+  const [C, y] = R(!0), [g, A] = R(!1), [$, _] = R(t), M = (Z) => {
+    y(!1), A(!1), m?.(Z);
+  }, U = (Z) => {
+    if (y(!1), A(!0), f && $ !== f) {
+      _(f), A(!1), y(!0);
       return;
     }
-    h?.(Z);
-  }, H = d(
+    x?.(Z);
+  }, V = d(
     "relative overflow-hidden bg-surface-hover",
     // Size variants
     {
@@ -3892,34 +3893,34 @@ const mn = ({
       "rounded-xl": a === "xl",
       "rounded-full": a === "full"
     },
-    x
-  ), L = d(
+    h
+  ), I = d(
     "w-full h-full object-cover transition-opacity duration-fast",
     {
-      "opacity-0": C || y,
-      "opacity-100": !C && !y
+      "opacity-0": C || g,
+      "opacity-100": !C && !g
     }
-  ), K = d(
+  ), W = d(
     "absolute inset-0 flex items-center justify-center",
     "text-text-muted"
-  ), U = /* @__PURE__ */ e("div", { className: "animate-pulse", children: /* @__PURE__ */ e("div", { className: "w-6 h-6 bg-surface-hover rounded" }) }), Y = /* @__PURE__ */ i("div", { className: "text-center", children: [
+  ), H = /* @__PURE__ */ e("div", { className: "animate-pulse", children: /* @__PURE__ */ e("div", { className: "w-6 h-6 bg-surface-hover rounded" }) }), Y = /* @__PURE__ */ i("div", { className: "text-center", children: [
     /* @__PURE__ */ e(X, { icon: ot, size: "lg", className: "mx-auto mb-1" }),
     /* @__PURE__ */ e("span", { className: "text-xs", children: "Failed to load" })
   ] });
-  return /* @__PURE__ */ i("div", { className: H, children: [
+  return /* @__PURE__ */ i("div", { className: V, children: [
     /* @__PURE__ */ e(
       "img",
       {
         ...v,
-        src: M,
+        src: $,
         alt: r,
-        className: L,
-        onLoad: B,
-        onError: W
+        className: I,
+        onLoad: M,
+        onError: U
       }
     ),
-    C && l && /* @__PURE__ */ e("div", { className: K, children: g || U }),
-    y && c && /* @__PURE__ */ e("div", { className: K, children: N || Y })
+    C && l && /* @__PURE__ */ e("div", { className: W, children: p || H }),
+    g && c && /* @__PURE__ */ e("div", { className: W, children: N || Y })
   ] });
 };
 function fn({
@@ -3931,52 +3932,52 @@ function fn({
   trailing: l,
   onSelect: c,
   onActiveIndexChange: f,
-  isActive: g,
+  isActive: p,
   unread: N,
-  dimmed: x,
-  groupBy: u,
-  groups: h,
+  dimmed: h,
+  groupBy: m,
+  groups: x,
   renderGroupHeader: v,
   stickyGroupHeaders: C = !1,
-  collapsibleGroups: p = !1,
-  hideGroupCount: y = !1,
-  selectable: T = !1,
-  selectedItems: M = [],
-  onSelectionChange: P,
-  bulkActions: B,
-  header: W,
-  stickyHeader: H = !1,
-  bordered: L = !1,
-  emptyContent: K,
-  loading: U = !1,
+  collapsibleGroups: y = !1,
+  hideGroupCount: g = !1,
+  selectable: A = !1,
+  selectedItems: $ = [],
+  onSelectionChange: _,
+  bulkActions: M,
+  header: U,
+  stickyHeader: V = !1,
+  bordered: I = !1,
+  emptyContent: W,
+  loading: H = !1,
   loadingRows: Y = 4,
   className: Z,
   "aria-label": Q
 }) {
-  const [b, m] = le.useState(
+  const [b, u] = le.useState(
     () => Object.fromEntries(
-      (h ?? []).filter(($) => $.defaultCollapsed).map(($) => [$.id, !0])
+      (x ?? []).filter((D) => D.defaultCollapsed).map((D) => [D.id, !0])
     )
-  ), E = le.useRef(null), w = ($) => {
-    if (!["ArrowDown", "ArrowUp", "Home", "End"].includes($.key)) return;
+  ), E = le.useRef(null), w = (D) => {
+    if (!["ArrowDown", "ArrowUp", "Home", "End"].includes(D.key)) return;
     const j = Array.from(
       E.current?.querySelectorAll("li[data-list-row]") ?? []
     );
     if (j.length === 0) return;
-    $.preventDefault();
-    const _ = j.indexOf(document.activeElement), o = $.key === "Home" ? 0 : $.key === "End" ? j.length - 1 : $.key === "ArrowDown" ? (_ + 1) % j.length : (_ - 1 + j.length) % j.length;
+    D.preventDefault();
+    const K = j.indexOf(document.activeElement), o = D.key === "Home" ? 0 : D.key === "End" ? j.length - 1 : D.key === "ArrowDown" ? (K + 1) % j.length : (K - 1 + j.length) % j.length;
     j[o]?.focus();
-  }, I = ($, q) => r ? r($, q) : q, k = ($) => M.includes($), ae = ($, q) => {
-    P && P(
-      q ? [...M, $] : M.filter((j) => j !== $)
+  }, P = (D, q) => r ? r(D, q) : q, k = (D) => $.includes(D), ae = (D, q) => {
+    _ && _(
+      q ? [...$, D] : $.filter((j) => j !== D)
     );
-  }, ne = ($) => P?.($ ? [...t] : []), ee = d(
+  }, ne = (D) => _?.(D ? [...t] : []), ee = d(
     "flex flex-col",
-    L && "overflow-hidden rounded-lg border border-border-subtle",
+    I && "overflow-hidden rounded-lg border border-border-subtle",
     Z
   );
-  if (U)
-    return /* @__PURE__ */ e("div", { className: ee, children: Array.from({ length: Y }).map(($, q) => /* @__PURE__ */ i(
+  if (H)
+    return /* @__PURE__ */ e("div", { className: ee, children: Array.from({ length: Y }).map((D, q) => /* @__PURE__ */ i(
       "div",
       {
         className: d(
@@ -3992,10 +3993,10 @@ function fn({
       },
       `skeleton-${q}`
     )) });
-  if (t.length === 0 && K)
-    return /* @__PURE__ */ e("div", { className: ee, children: K });
-  const G = t.length > 0 && M.length === t.length, S = M.length > 0 && !G, D = ($, q, j) => {
-    const _ = g?.($, q) ?? !1, o = N?.($, q) ?? !1, z = x?.($, q) ?? !1, F = T && k($);
+  if (t.length === 0 && W)
+    return /* @__PURE__ */ e("div", { className: ee, children: W });
+  const G = t.length > 0 && $.length === t.length, S = $.length > 0 && !G, T = (D, q, j) => {
+    const K = p?.(D, q) ?? !1, o = N?.(D, q) ?? !1, z = h?.(D, q) ?? !1, B = A && k(D);
     return /* @__PURE__ */ i(
       "li",
       {
@@ -4003,28 +4004,28 @@ function fn({
           role: "button",
           tabIndex: 0,
           "data-list-row": "",
-          "aria-current": _ || void 0,
-          onClick: () => c($, q),
+          "aria-current": K || void 0,
+          onClick: () => c(D, q),
           onFocus: () => f?.(q),
-          onKeyDown: (R) => {
-            R.key !== "Enter" && R.key !== " " || (R.preventDefault(), c($, q));
+          onKeyDown: (F) => {
+            F.key !== "Enter" && F.key !== " " || (F.preventDefault(), c(D, q));
           }
         } : {},
         className: d(
-          "flex items-center gap-3 px-4 py-2.5 text-base",
+          "flex items-center gap-3 px-4 py-2 text-base",
           "transition-colors duration-fast ease-out",
           n === "divided" && !j && "border-t border-border-subtle",
           c && "cursor-pointer focus-visible:outline-none focus-visible:focus-ring",
-          _ || F ? "bg-accent-soft text-text" : c && "hover:bg-surface-hover",
+          K || B ? "bg-accent-soft text-text" : c && "hover:bg-surface-hover",
           o && "font-bold",
           z && "opacity-55"
         ),
         children: [
-          T && /* @__PURE__ */ e("span", { onClick: (R) => R.stopPropagation(), children: /* @__PURE__ */ e(
+          A && /* @__PURE__ */ e("span", { onClick: (F) => F.stopPropagation(), children: /* @__PURE__ */ e(
             xe,
             {
-              checked: k($),
-              onChange: (R) => ae($, R.target.checked),
+              checked: k(D),
+              onChange: (F) => ae(D, F.target.checked),
               "aria-label": "Rij selecteren"
             }
           ) }),
@@ -4035,30 +4036,30 @@ function fn({
               className: "mt-2 size-1.5 shrink-0 self-start rounded-full bg-border-strong"
             }
           ),
-          s && /* @__PURE__ */ e("span", { className: "shrink-0", children: s($, q) }),
-          /* @__PURE__ */ e("div", { className: "flex min-w-0 flex-1 items-center gap-2", children: a ? a($, q) : String($) }),
-          l && /* @__PURE__ */ e("span", { className: "shrink-0 text-xs text-text-subtle", children: l($, q) })
+          s && /* @__PURE__ */ e("span", { className: "shrink-0", children: s(D, q) }),
+          /* @__PURE__ */ e("div", { className: "flex min-w-0 flex-1 items-center gap-2", children: a ? a(D, q) : String(D) }),
+          l && /* @__PURE__ */ e("span", { className: "shrink-0 text-xs text-text-subtle", children: l(D, q) })
         ]
       },
-      I($, q)
+      P(D, q)
     );
-  }, A = (() => {
-    if (!u)
-      return t.map((_, o) => D(_, o, o === 0));
-    const $ = /* @__PURE__ */ new Map();
-    t.forEach((_, o) => {
-      const z = u(_, o);
-      $.has(z) || $.set(z, []), $.get(z).push({ item: _, index: o });
+  }, L = (() => {
+    if (!m)
+      return t.map((K, o) => T(K, o, o === 0));
+    const D = /* @__PURE__ */ new Map();
+    t.forEach((K, o) => {
+      const z = m(K, o);
+      D.has(z) || D.set(z, []), D.get(z).push({ item: K, index: o });
     });
-    const q = h ?? [];
+    const q = x ?? [];
     return [
-      ...q.filter((_) => $.has(_.id)),
-      ...[...$.keys()].filter((_) => !q.some((o) => o.id === _)).map((_) => ({ id: _ }))
-    ].flatMap((_, o) => {
-      const z = $.get(_.id) ?? [], F = p && b[_.id], R = _.title ?? _.id, O = _.count ?? z.length, te = /* @__PURE__ */ e(
+      ...q.filter((K) => D.has(K.id)),
+      ...[...D.keys()].filter((K) => !q.some((o) => o.id === K)).map((K) => ({ id: K }))
+    ].flatMap((K, o) => {
+      const z = D.get(K.id) ?? [], B = y && b[K.id], F = K.title ?? K.id, O = K.count ?? z.length, te = /* @__PURE__ */ e(
         "li",
         {
-          onClick: p ? () => m((ie) => ({ ...ie, [_.id]: !ie[_.id] })) : void 0,
+          onClick: y ? () => u((ie) => ({ ...ie, [K.id]: !ie[K.id] })) : void 0,
           className: d(
             "flex items-center gap-2 bg-surface-sunk px-4 py-1.5",
             "text-xs font-semibold uppercase tracking-label text-text-subtle",
@@ -4066,64 +4067,64 @@ function fn({
             o > 0 && "border-t",
             "border-b",
             C && "sticky z-10",
-            p && "cursor-pointer select-none hover:text-text"
+            y && "cursor-pointer select-none hover:text-text"
           ),
-          "aria-expanded": p ? !F : void 0,
-          style: C ? { top: H ? 28 : 0 } : void 0,
-          children: v ? v(_, z.map((ie) => ie.item)) : /* @__PURE__ */ i(fe, { children: [
-            p && /* @__PURE__ */ e(
+          "aria-expanded": y ? !B : void 0,
+          style: C ? { top: V ? 28 : 0 } : void 0,
+          children: v ? v(K, z.map((ie) => ie.item)) : /* @__PURE__ */ i(fe, { children: [
+            y && /* @__PURE__ */ e(
               ye,
               {
                 "aria-hidden": !0,
                 className: d(
                   "size-icon-sm shrink-0 transition-transform duration-fast ease-out",
-                  !F && "rotate-90"
+                  !B && "rotate-90"
                 )
               }
             ),
-            /* @__PURE__ */ e("span", { children: R }),
-            !y && /* @__PURE__ */ e("span", { className: "ml-auto font-normal tabular-nums", children: O })
+            /* @__PURE__ */ e("span", { children: F }),
+            !g && /* @__PURE__ */ e("span", { className: "ml-auto font-normal tabular-nums", children: O })
           ] })
         },
-        `group-${_.id}`
+        `group-${K.id}`
       );
-      return F ? [te] : [
+      return B ? [te] : [
         te,
         ...z.map(
-          ({ item: ie, index: He }, Ue) => D(ie, He, Ue === 0)
+          ({ item: ie, index: He }, Ue) => T(ie, He, Ue === 0)
         )
       ];
     });
   })();
   return /* @__PURE__ */ i("div", { ref: E, className: ee, onKeyDown: c ? w : void 0, children: [
-    T && M.length > 0 && /* @__PURE__ */ i("div", { className: "flex items-center gap-3 border-b border-border-subtle bg-surface-sunk px-4 py-2", children: [
+    A && $.length > 0 && /* @__PURE__ */ i("div", { className: "flex items-center gap-3 border-b border-border-subtle bg-surface-sunk px-4 py-2", children: [
       /* @__PURE__ */ e(
         xe,
         {
           checked: G,
           indeterminate: S,
-          onChange: ($) => ne($.target.checked),
+          onChange: (D) => ne(D.target.checked),
           "aria-label": "Alles selecteren"
         }
       ),
       /* @__PURE__ */ i("span", { className: "text-xs text-text-subtle", children: [
-        M.length,
+        $.length,
         " geselecteerd"
       ] }),
-      B && /* @__PURE__ */ e("div", { className: "ml-auto flex gap-2", children: B })
+      M && /* @__PURE__ */ e("div", { className: "ml-auto flex gap-2", children: M })
     ] }),
-    W && /* @__PURE__ */ e(
+    U && /* @__PURE__ */ e(
       "div",
       {
         className: d(
           "flex items-center gap-3 border-b border-border-subtle px-4 py-1.5",
           "text-xs font-semibold uppercase tracking-label text-text-subtle",
-          H && "sticky top-0 z-20"
+          V && "sticky top-0 z-20"
         ),
-        children: W
+        children: U
       }
     ),
-    /* @__PURE__ */ e("ul", { "aria-label": Q, className: "flex flex-col", children: A })
+    /* @__PURE__ */ e("ul", { "aria-label": Q, className: "flex flex-col", children: L })
   ] });
 }
 function hn({
@@ -4167,27 +4168,28 @@ const bn = ({
   surface: t = !1,
   title: r,
   subtitle: n,
-  actions: s = [],
-  children: a,
-  className: l,
-  backLabel: c = "Back",
-  backClassName: f,
-  onBack: g,
-  editable: N = !1,
-  onTitleChange: x
+  meta: s,
+  actions: a = [],
+  children: l,
+  className: c,
+  backLabel: f = "Back",
+  backClassName: p,
+  onBack: N,
+  editable: h = !1,
+  onTitleChange: m
 }) => {
-  const [u, h] = V(!1), [v, C] = V(r), p = se(null);
+  const [x, v] = R(!1), [C, y] = R(r), g = se(null);
   J(() => {
-    C(r);
+    y(r);
   }, [r]), J(() => {
-    u && p.current && (p.current.focus(), p.current.select());
-  }, [u]);
-  const y = () => {
-    N && h(!0);
-  }, T = () => {
-    h(!1), v.trim() !== "" && v !== r && x ? x(v.trim()) : C(r);
-  }, M = (P) => {
-    P.key === "Enter" ? p.current?.blur() : P.key === "Escape" && (C(r), h(!1));
+    x && g.current && (g.current.focus(), g.current.select());
+  }, [x]);
+  const A = () => {
+    h && v(!0);
+  }, $ = () => {
+    v(!1), C.trim() !== "" && C !== r && m ? m(C.trim()) : y(r);
+  }, _ = (M) => {
+    M.key === "Enter" ? g.current?.blur() : M.key === "Escape" && (y(r), v(!1));
   };
   return /* @__PURE__ */ i(
     "div",
@@ -4196,86 +4198,89 @@ const bn = ({
         "p-5 pb-3",
         // App-bar treatment: own background, full-bleed, closed with a rule.
         t && "bg-surface border-b border-border",
-        l
+        c
       ),
       children: [
         /* @__PURE__ */ i("div", { className: "flex flex-row sm:items-start sm:justify-between items-center gap-4", children: [
-          /* @__PURE__ */ e("div", { className: "min-w-0 flex-1", children: /* @__PURE__ */ i("div", { className: "flex items-center gap-2 text-text", children: [
-            g && /* @__PURE__ */ e(
-              "button",
-              {
-                type: "button",
-                onClick: g,
-                className: d(
-                  "flex items-center text-sm cursor-pointer transition",
-                  f
-                ),
-                children: /* @__PURE__ */ e(ze, { size: 16, color: "currentColor" })
-              }
-            ),
-            u ? /* @__PURE__ */ e(
-              "input",
-              {
-                ref: p,
-                type: "text",
-                value: v,
-                onChange: (P) => C(P.target.value),
-                onBlur: T,
-                onKeyDown: M,
-                className: "text-1xl font-semibold bg-transparent border-b-1 border-border rounded-lg outline-none focus:border-none px-1 -mx-1 min-w-0 flex-1"
-              }
-            ) : /* @__PURE__ */ i("div", { className: "group flex items-baseline gap-2.5 min-w-0", children: [
-              /* @__PURE__ */ e(
-                "h2",
+          /* @__PURE__ */ i("div", { className: "min-w-0 flex-1", children: [
+            /* @__PURE__ */ i("div", { className: "flex items-center gap-2 text-text", children: [
+              N && /* @__PURE__ */ e(
+                "button",
                 {
-                  onClick: y,
+                  type: "button",
+                  onClick: N,
                   className: d(
-                    "text-2xl font-semibold truncate",
-                    N && "cursor-pointer"
+                    "flex items-center text-sm cursor-pointer transition",
+                    p
                   ),
-                  title: N ? "Klik om te bewerken" : void 0,
-                  children: r
+                  children: /* @__PURE__ */ e(ze, { size: 16, color: "currentColor" })
                 }
               ),
-              n && /* @__PURE__ */ e("span", { className: "shrink-0 text-base text-text-muted truncate", children: n }),
-              N && /* @__PURE__ */ e(
-                ct,
+              x ? /* @__PURE__ */ e(
+                "input",
                 {
-                  size: 15,
-                  onClick: y,
-                  className: "shrink-0 cursor-pointer text-text-muted opacity-0 group-hover:opacity-100 transition-opacity"
+                  ref: g,
+                  type: "text",
+                  value: C,
+                  onChange: (M) => y(M.target.value),
+                  onBlur: $,
+                  onKeyDown: _,
+                  className: "text-1xl font-semibold bg-transparent border-b-1 border-border rounded-lg outline-none focus:border-none px-1 -mx-1 min-w-0 flex-1"
                 }
-              )
-            ] })
-          ] }) }),
-          s.length > 0 && /* @__PURE__ */ e("div", { className: "flex flex-wrap sm:flex-nowrap gap-2 sm:gap-3", children: s.map(
-            (P) => P.render ? /* @__PURE__ */ e(le.Fragment, { children: P.render() }, P.id) : P.splitOptions && P.splitOptions.length > 0 ? /* @__PURE__ */ e(
+              ) : /* @__PURE__ */ i("div", { className: "group flex items-baseline gap-2.5 min-w-0", children: [
+                /* @__PURE__ */ e(
+                  "h2",
+                  {
+                    onClick: A,
+                    className: d(
+                      "text-2xl font-semibold truncate",
+                      h && "cursor-pointer"
+                    ),
+                    title: h ? "Klik om te bewerken" : void 0,
+                    children: r
+                  }
+                ),
+                n && /* @__PURE__ */ e("span", { className: "shrink-0 text-base text-text-muted truncate", children: n }),
+                h && /* @__PURE__ */ e(
+                  ct,
+                  {
+                    size: 15,
+                    onClick: A,
+                    className: "shrink-0 cursor-pointer text-text-muted opacity-0 group-hover:opacity-100 transition-opacity"
+                  }
+                )
+              ] })
+            ] }),
+            s && /* @__PURE__ */ e("div", { className: "mt-0.5 truncate text-xs text-text-muted", children: s })
+          ] }),
+          a.length > 0 && /* @__PURE__ */ e("div", { className: "flex flex-wrap sm:flex-nowrap gap-2 sm:gap-3", children: a.map(
+            (M) => M.render ? /* @__PURE__ */ e(le.Fragment, { children: M.render() }, M.id) : M.splitOptions && M.splitOptions.length > 0 ? /* @__PURE__ */ e(
               je,
               {
-                label: P.label,
-                onClick: P.onClick,
-                icon: P.icon,
-                variant: P.variant === "primary" ? "primary" : "secondary",
-                options: P.splitOptions,
-                disabled: P.disabled
+                label: M.label,
+                onClick: M.onClick,
+                icon: M.icon,
+                variant: M.variant === "primary" ? "primary" : "secondary",
+                options: M.splitOptions,
+                disabled: M.disabled
               },
-              P.id
+              M.id
             ) : /* @__PURE__ */ e(
               re,
               {
-                variant: P.variant ?? "secondary",
-                onClick: (B) => {
-                  B.stopPropagation(), B.target.blur(), P.onClick();
+                variant: M.variant ?? "secondary",
+                onClick: (U) => {
+                  U.stopPropagation(), U.target.blur(), M.onClick();
                 },
-                disabled: P.disabled,
-                leftIcon: P.icon,
-                children: P.label
+                disabled: M.disabled,
+                leftIcon: M.icon,
+                children: M.label
               },
-              P.id
+              M.id
             )
           ) })
         ] }),
-        a && /* @__PURE__ */ e("div", { className: "mt-4", children: a })
+        l && /* @__PURE__ */ e("div", { className: "mt-4", children: l })
       ]
     }
   );
@@ -4402,26 +4407,26 @@ const wn = ({
   size: n = "md",
   className: s
 }) => {
-  const a = (x) => {
-    if (!x) return "-";
+  const a = (h) => {
+    if (!h) return "-";
     try {
-      return new Date(x).toLocaleDateString("nl-NL", {
+      return new Date(h).toLocaleDateString("nl-NL", {
         year: "numeric",
         month: "long",
         day: "numeric"
       });
     } catch {
-      return String(x);
+      return String(h);
     }
-  }, l = (x) => x ? "Ja" : "Nee", c = (x, u) => {
-    if (!u) return String(x || "-");
-    const h = u.find((v) => v.value === x);
-    return h ? h.label : String(x || "-");
+  }, l = (h) => h ? "Ja" : "Nee", c = (h, m) => {
+    if (!m) return String(h || "-");
+    const x = m.find((v) => v.value === h);
+    return x ? x.label : String(h || "-");
   }, f = ce(
-    (x) => {
-      const u = zr(r, x.name);
-      if (x.type === "array") {
-        const v = u;
+    (h) => {
+      const m = zr(r, h.name);
+      if (h.type === "array") {
+        const v = m;
         return !v || v.length === 0 ? /* @__PURE__ */ e(
           oe,
           {
@@ -4430,7 +4435,7 @@ const wn = ({
             className: "text-text-muted",
             children: "Geen items"
           }
-        ) : /* @__PURE__ */ e("div", { className: "space-y-3", children: v.map((C, p) => /* @__PURE__ */ i(
+        ) : /* @__PURE__ */ e("div", { className: "space-y-3", children: v.map((C, y) => /* @__PURE__ */ i(
           "div",
           {
             className: "p-4 border border-border rounded-xl space-y-3",
@@ -4443,53 +4448,53 @@ const wn = ({
                   weight: "medium",
                   className: "text-text-muted",
                   children: [
-                    x.label,
+                    h.label,
                     " ",
-                    p + 1
+                    y + 1
                   ]
                 }
               ) }),
-              /* @__PURE__ */ e("div", { className: "grid grid-cols-1 sm:grid-cols-2 gap-3", children: x.arrayFields?.map((y) => {
-                const T = C?.[y.name];
-                let M = "-";
-                switch (y.type) {
+              /* @__PURE__ */ e("div", { className: "grid grid-cols-1 sm:grid-cols-2 gap-3", children: h.arrayFields?.map((g) => {
+                const A = C?.[g.name];
+                let $ = "-";
+                switch (g.type) {
                   case "text":
                   case "email":
                   case "number":
                   case "tel":
                   case "url":
                   case "textarea":
-                    M = T || "-";
+                    $ = A || "-";
                     break;
                   case "select":
                   case "radio":
-                    M = c(
-                      T,
-                      y.options
+                    $ = c(
+                      A,
+                      g.options
                     );
                     break;
                   case "checkbox":
-                    M = l(T);
+                    $ = l(A);
                     break;
                   case "date":
-                    M = a(T);
+                    $ = a(A);
                     break;
                   case "custom":
-                    M = y.customComponent?.({
-                      value: T
+                    $ = g.customComponent?.({
+                      value: A
                     });
                     break;
                   default:
-                    M = String(T || "-");
+                    $ = String(A || "-");
                 }
-                return y.format && (M = y.format(T, C)), /* @__PURE__ */ i("div", { className: "space-y-1", children: [
+                return g.format && ($ = g.format(A, C)), /* @__PURE__ */ i("div", { className: "space-y-1", children: [
                   /* @__PURE__ */ e(
                     oe,
                     {
                       variant: "label",
                       size: "xs",
                       className: "text-text-muted",
-                      children: y.label
+                      children: g.label
                     }
                   ),
                   /* @__PURE__ */ e(
@@ -4498,20 +4503,20 @@ const wn = ({
                       variant: "body",
                       size: "sm",
                       className: "text-text",
-                      children: M
+                      children: $
                     }
                   )
-                ] }, y.name);
+                ] }, g.name);
               }) })
             ]
           },
-          p
+          y
         )) });
       }
-      if (x.type === "custom" && x.customComponent)
-        return x.customComponent({ value: u });
-      if (x.format) {
-        const v = x.format(u, r);
+      if (h.type === "custom" && h.customComponent)
+        return h.customComponent({ value: m });
+      if (h.format) {
+        const v = h.format(m, r);
         return /* @__PURE__ */ e(
           oe,
           {
@@ -4522,31 +4527,31 @@ const wn = ({
           }
         );
       }
-      let h = "-";
-      switch (x.type) {
+      let x = "-";
+      switch (h.type) {
         case "text":
         case "email":
         case "password":
         case "number":
         case "tel":
         case "url":
-          h = u ? String(u) : "-";
+          x = m ? String(m) : "-";
           break;
         case "textarea":
-          h = u ? /* @__PURE__ */ e("div", { className: "whitespace-pre-wrap", children: String(u || "-") }) : "-";
+          x = m ? /* @__PURE__ */ e("div", { className: "whitespace-pre-wrap", children: String(m || "-") }) : "-";
           break;
         case "select":
         case "radio":
-          h = c(u, x.options);
+          x = c(m, h.options);
           break;
         case "checkbox":
-          h = l(u);
+          x = l(m);
           break;
         case "date":
-          h = a(u);
+          x = a(m);
           break;
         default:
-          h = u ? String(u) : "-";
+          x = m ? String(m) : "-";
       }
       return /* @__PURE__ */ e(
         oe,
@@ -4554,30 +4559,30 @@ const wn = ({
           variant: "body",
           size: "sm",
           className: "text-text",
-          children: h
+          children: x
         }
       );
     },
     [r]
-  ), g = ce(
-    (x) => {
-      if (x.conditional && !x.conditional(r))
+  ), p = ce(
+    (h) => {
+      if (h.conditional && !h.conditional(r))
         return null;
-      const u = x.items.filter((v) => !(v.hidden || v.conditional && !v.conditional(r)));
-      if (u.length === 0) return null;
-      const h = d(
+      const m = h.items.filter((v) => !(v.hidden || v.conditional && !v.conditional(r)));
+      if (m.length === 0) return null;
+      const x = d(
         "space-y-4",
         {
-          "grid gap-4": x.layout === "grid",
-          "flex flex-wrap gap-4": x.layout === "flex"
+          "grid gap-4": h.layout === "grid",
+          "flex flex-wrap gap-4": h.layout === "flex"
         },
-        x.layout === "grid" && {
-          "grid-cols-1": !x.columns || x.columns === 1,
-          "grid-cols-2": x.columns === 2,
-          "grid-cols-3": x.columns === 3,
-          "grid-cols-4": x.columns === 4
+        h.layout === "grid" && {
+          "grid-cols-1": !h.columns || h.columns === 1,
+          "grid-cols-2": h.columns === 2,
+          "grid-cols-3": h.columns === 3,
+          "grid-cols-4": h.columns === 4
         },
-        x.className
+        h.className
       );
       return /* @__PURE__ */ i(
         "div",
@@ -4592,20 +4597,20 @@ const wn = ({
                   size: "lg",
                   weight: "semibold",
                   className: "text-text",
-                  children: x.title
+                  children: h.title
                 }
               ),
-              x.description && /* @__PURE__ */ e(
+              h.description && /* @__PURE__ */ e(
                 oe,
                 {
                   variant: "body",
                   size: "sm",
                   className: "text-text-muted mt-1",
-                  children: x.description
+                  children: h.description
                 }
               )
             ] }),
-            /* @__PURE__ */ e("div", { className: "md:col-span-2", children: /* @__PURE__ */ e("div", { className: h, children: u.map((v) => /* @__PURE__ */ i(
+            /* @__PURE__ */ e("div", { className: "md:col-span-2", children: /* @__PURE__ */ e("div", { className: x, children: m.map((v) => /* @__PURE__ */ i(
               "div",
               {
                 className: "space-y-1",
@@ -4630,7 +4635,7 @@ const wn = ({
             )) }) })
           ]
         },
-        x.id
+        h.id
       );
     },
     [r, f]
@@ -4644,7 +4649,7 @@ const wn = ({
     },
     s
   );
-  return /* @__PURE__ */ e("div", { className: N, children: /* @__PURE__ */ e("div", { className: "space-y-8", children: t.map(g) }) });
+  return /* @__PURE__ */ e("div", { className: N, children: /* @__PURE__ */ e("div", { className: "space-y-8", children: t.map(p) }) });
 }, Re = ({ item: t, isSelectedHandler: r, onClick: n, depth: s = 0 }) => {
   const a = !!(t.children && t.children.length > 0), l = r ? r(t.path) : !1;
   return a ? /* @__PURE__ */ i("li", { children: [
@@ -4774,9 +4779,9 @@ const wn = ({
   truncate: l = !1,
   className: c,
   children: f,
-  ...g
+  ...p
 }) => {
-  const N = `h${t}`, x = d(
+  const N = `h${t}`, h = d(
     "font-sans text-pretty",
     Er[r || Tr(t)],
     Mr[n],
@@ -4785,7 +4790,7 @@ const wn = ({
     l && "truncate",
     c
   );
-  return /* @__PURE__ */ e(N, { className: x, ...g, children: f });
+  return /* @__PURE__ */ e(N, { className: h, ...p, children: f });
 };
 function Tr(t) {
   return {
@@ -4805,44 +4810,44 @@ const Sn = ({
   initialCommandPath: a,
   initialActiveIndex: l
 }) => {
-  const [c, f] = V(""), [g, N] = V(a || []), [x, u] = V(l || 0), h = se(null), v = se(null), p = (g.length ? t.find((y) => y.id === g[0])?.subCommands || [] : t).filter(
-    (y) => y.label.toLowerCase().includes(c.toLowerCase())
+  const [c, f] = R(""), [p, N] = R(a || []), [h, m] = R(l || 0), x = se(null), v = se(null), y = (p.length ? t.find((g) => g.id === p[0])?.subCommands || [] : t).filter(
+    (g) => g.label.toLowerCase().includes(c.toLowerCase())
   );
   return J(() => {
-    r || (f(""), N(a || []), u(l || 0));
+    r || (f(""), N(a || []), m(l || 0));
   }, [r]), J(() => {
-    const y = (T) => {
+    const g = (A) => {
       if (r) {
-        if (T.key === "Escape")
+        if (A.key === "Escape")
           n();
-        else if (T.key === "ArrowUp")
-          u(
-            (M) => M > 0 ? M - 1 : p.length - 1
+        else if (A.key === "ArrowUp")
+          m(
+            ($) => $ > 0 ? $ - 1 : y.length - 1
           );
-        else if (T.key === "ArrowDown")
-          u(
-            (M) => M < p.length - 1 ? M + 1 : 0
+        else if (A.key === "ArrowDown")
+          m(
+            ($) => $ < y.length - 1 ? $ + 1 : 0
           );
-        else if (T.key === "Enter") {
-          const M = p[x];
-          M && (M.subCommands ? (N([...g, M.id]), u(0)) : M.action && (M.action(), n()));
+        else if (A.key === "Enter") {
+          const $ = y[h];
+          $ && ($.subCommands ? (N([...p, $.id]), m(0)) : $.action && ($.action(), n()));
         }
       }
     };
-    return document.addEventListener("keydown", y), () => document.removeEventListener("keydown", y);
-  }, [r, n, p, x, g]), J(() => {
-    const y = (T) => {
-      h.current && !h.current.contains(T.target) && n();
+    return document.addEventListener("keydown", g), () => document.removeEventListener("keydown", g);
+  }, [r, n, y, h, p]), J(() => {
+    const g = (A) => {
+      x.current && !x.current.contains(A.target) && n();
     };
-    return r && document.addEventListener("mousedown", y), () => document.removeEventListener("mousedown", y);
+    return r && document.addEventListener("mousedown", g), () => document.removeEventListener("mousedown", g);
   }, [r, n]), J(() => {
     if (!r) return;
-    v.current?.querySelector(`[data-index="${x}"]`)?.scrollIntoView({ block: "nearest" });
-  }, [x, r]), r ? /* @__PURE__ */ e("div", { className: "fixed inset-0 z-modal flex items-center justify-center bg-scrim", children: /* @__PURE__ */ i(
+    v.current?.querySelector(`[data-index="${h}"]`)?.scrollIntoView({ block: "nearest" });
+  }, [h, r]), r ? /* @__PURE__ */ e("div", { className: "fixed inset-0 z-modal flex items-center justify-center bg-scrim", children: /* @__PURE__ */ i(
     "div",
     {
       className: "flex flex-col w-full max-w-lg max-h-dialog p-2 mx-auto rounded-lg border border-border shadow-modal bg-surface",
-      ref: h,
+      ref: x,
       children: [
         /* @__PURE__ */ i("div", { className: "flex items-center gap-2 px-3 flex-shrink-0", children: [
           /* @__PURE__ */ e(Ne, { className: "w-4 h-4 text-text-muted shrink-0" }),
@@ -4853,7 +4858,7 @@ const Sn = ({
               autoFocus: !0,
               placeholder: s?.searchPlaceholder || "Search commands...",
               value: c,
-              onChange: (y) => f(y.target.value),
+              onChange: (g) => f(g.target.value),
               className: "w-full border-0 bg-transparent py-2 text-text focus:outline-none"
             }
           )
@@ -4864,23 +4869,23 @@ const Sn = ({
             ref: v,
             className: "mt-2 pt-2 text-sm border-t border-border max-h-dialog-list overflow-y-auto",
             children: [
-              p.length === 0 && /* @__PURE__ */ e("div", { className: "text-text-muted text-center text-sm", children: s?.noCommandsFound || "No commands found" }),
-              p.map((y, T) => /* @__PURE__ */ i(
+              y.length === 0 && /* @__PURE__ */ e("div", { className: "text-text-muted text-center text-sm", children: s?.noCommandsFound || "No commands found" }),
+              y.map((g, A) => /* @__PURE__ */ i(
                 "div",
                 {
-                  "data-index": T,
-                  className: `flex items-center p-2 cursor-pointer rounded-md ${T === x ? "bg-accent-soft text-accent" : "text-text"}`,
+                  "data-index": A,
+                  className: `flex items-center p-2 cursor-pointer rounded-md ${A === h ? "bg-accent-soft text-accent" : "text-text"}`,
                   onClick: () => {
-                    y.subCommands ? (N([...g, y.id]), u(0)) : y.action && (y.action(), n());
+                    g.subCommands ? (N([...p, g.id]), m(0)) : g.action && (g.action(), n());
                   },
-                  onMouseEnter: () => u(T),
+                  onMouseEnter: () => m(A),
                   children: [
-                    y.icon && /* @__PURE__ */ e("span", { className: "mr-3", children: y.icon }),
-                    /* @__PURE__ */ e("span", { className: "flex-grow", children: y.label }),
-                    y.subCommands && /* @__PURE__ */ e("span", { className: "text-text-muted", children: /* @__PURE__ */ e(ye, { className: "w-4 h-4" }) })
+                    g.icon && /* @__PURE__ */ e("span", { className: "mr-3", children: g.icon }),
+                    /* @__PURE__ */ e("span", { className: "flex-grow", children: g.label }),
+                    g.subCommands && /* @__PURE__ */ e("span", { className: "text-text-muted", children: /* @__PURE__ */ e(ye, { className: "w-4 h-4" }) })
                   ]
                 },
-                y.id
+                g.id
               ))
             ]
           }
@@ -4973,12 +4978,12 @@ const Sn = ({
     border: l,
     borderColor: c,
     className: f,
-    children: g,
+    children: p,
     ...N
-  }, x) => /* @__PURE__ */ e(
+  }, h) => /* @__PURE__ */ e(
     "div",
     {
-      ref: x,
+      ref: h,
       className: d(
         t && Ar[t],
         r && Lr[r],
@@ -4990,7 +4995,7 @@ const Sn = ({
         f
       ),
       ...N,
-      children: g
+      children: p
     }
   )
 );
@@ -5018,41 +5023,41 @@ function En({
   componentProps: a,
   className: l
 }) {
-  const c = se(null), [f, g] = V(!0), [N, x] = V(null), u = se(null);
+  const c = se(null), [f, p] = R(!0), [N, h] = R(null), m = se(null);
   return se(null), J(() => {
-    let h = !0;
+    let x = !0;
     return (async () => {
-      g(!0);
+      p(!0);
       try {
         const C = await r();
-        if (!h) return;
-        const p = C.component || C.default || C;
-        x(n === "react" ? () => p : () => C);
+        if (!x) return;
+        const y = C.component || C.default || C;
+        h(n === "react" ? () => y : () => C);
       } catch (C) {
         console.error(`[FederatedResource] Load failed: ${t}`, C);
       } finally {
-        h && g(!1);
+        x && p(!1);
       }
     })(), () => {
-      h = !1;
+      x = !1;
     };
   }, [t, r]), J(() => {
     if (f || !N || n === "react") return;
-    const h = c.current;
-    if (h) {
+    const x = c.current;
+    if (x) {
       if (n === "svelte") {
-        const v = N.default || N, C = new v({ target: h, props: a || {} });
-        return u.current = C, () => C.$destroy();
+        const v = N.default || N, C = new v({ target: x, props: a || {} });
+        return m.current = C, () => C.$destroy();
       }
       if (N.mount) {
-        const v = N.mount({ container: h, props: a || {} });
+        const v = N.mount({ container: x, props: a || {} });
         return () => {
-          typeof v == "function" ? v() : N.unmount?.(h);
+          typeof v == "function" ? v() : N.unmount?.(x);
         };
       }
     }
   }, [N, n, f]), J(() => {
-    n === "svelte" && u.current && u.current.$set?.(a);
+    n === "svelte" && m.current && m.current.$set?.(a);
   }, [a, n]), /* @__PURE__ */ i("div", { ref: c, className: l, style: { display: "contents" }, children: [
     f && s,
     n === "react" && N && /* @__PURE__ */ e(N, { ...a })