@opencxh/ui-kit 3.158.0 → 3.160.0

package/dist/index.js

@@ -1,8 +1,8 @@
 import { clsx as ut } from "clsx";
-import ce, { useState as j, useLayoutEffect as mt, useRef as ae, useEffect as G, forwardRef as be, useMemo as pe, useCallback as xe, createContext as Xe, useId as ft, useContext as ht, Component as xt } from "react";
-import { jsxs as c, jsx as e, Fragment as ke } from "react/jsx-runtime";
+import ce, { useState as F, useLayoutEffect as mt, useRef as te, useEffect as Y, forwardRef as be, useMemo as ge, useCallback as xe, createContext as Xe, useId as ft, useContext as ht, Component as xt } from "react";
+import { jsxs as c, jsx as e, Fragment as Ce } from "react/jsx-runtime";
 import * as bt from "lucide-react";
-import { VideoOff as gt, User as pt, MicOff as vt, Mic as yt, X as we, ChevronDown as $e, ExternalLink as Nt, Calendar as wt, ChevronLeft as Ce, ChevronRight as De, ChevronDownIcon as kt, Loader2 as Ct, Search as Ae, Check as He, ChevronUp as St, Ellipsis as Et, FileText as Pe, HardDrive as qe, ArrowLeft as zt, FolderPlus as Mt, Upload as Tt, Folder as Ve, Trash2 as _t, Plus as $t, Sparkles as Dt, ImageOff as At, Pencil as Lt, ArrowUpRight as It } from "lucide-react";
+import { VideoOff as gt, User as pt, MicOff as vt, Mic as yt, X as ke, ChevronDown as $e, ExternalLink as Nt, Calendar as wt, ChevronLeft as Se, ChevronRight as De, ChevronDownIcon as kt, Loader2 as Ct, Search as Ae, Check as He, ChevronUp as St, Ellipsis as Et, FileText as Pe, HardDrive as qe, ArrowLeft as zt, FolderPlus as Mt, Upload as Tt, Folder as Ve, Trash2 as _t, Plus as $t, Sparkles as Dt, ImageOff as At, Pencil as Lt, ArrowUpRight as It } from "lucide-react";
 import Pt from "dompurify";
 import Ot from "react-markdown";
 import jt from "remark-gfm";
@@ -16,17 +16,17 @@ function Un(t) {
   return (r) => t[r] || "";
 }
 function Le(t, r, { gap: n = 6, matchWidth: s = !1, placement: a = "bottom-start" } = {}) {
-  const [l, o] = j({});
+  const [l, o] = F({});
   return mt(() => {
     if (!t) return;
-    const m = () => {
+    const u = () => {
       const d = r.current;
       if (!d) return;
-      const v = d.getBoundingClientRect(), h = window.innerHeight - v.bottom, u = v.top, b = a.startsWith("top"), g = b ? u < 200 && h > u : h < 200 && u > h, w = b !== g, p = { position: "fixed" };
-      w ? (p.bottom = window.innerHeight - v.top + n, p.maxHeight = Math.max(120, u - n * 2)) : (p.top = v.bottom + n, p.maxHeight = Math.max(120, h - n * 2)), a.endsWith("end") ? p.right = window.innerWidth - v.right : p.left = v.left, s && (p.width = v.width), o(p);
+      const v = d.getBoundingClientRect(), h = window.innerHeight - v.bottom, m = v.top, b = a.startsWith("top"), g = b ? m < 200 && h > m : h < 200 && m > h, w = b !== g, p = { position: "fixed" };
+      w ? (p.bottom = window.innerHeight - v.top + n, p.maxHeight = Math.max(120, m - n * 2)) : (p.top = v.bottom + n, p.maxHeight = Math.max(120, h - n * 2)), a.endsWith("end") ? p.right = window.innerWidth - v.right : p.left = v.left, s && (p.width = v.width), o(p);
     };
-    return m(), window.addEventListener("scroll", m, !0), window.addEventListener("resize", m), () => {
-      window.removeEventListener("scroll", m, !0), window.removeEventListener("resize", m);
+    return u(), window.addEventListener("scroll", u, !0), window.addEventListener("resize", u), () => {
+      window.removeEventListener("scroll", u, !0), window.removeEventListener("resize", u);
     };
   }, [t, r, n, s, a]), l;
 }
@@ -66,7 +66,7 @@ function Kn(t) {
   for (let n = 0; n < t.length; n++) r = r * 31 + t.charCodeAt(n) >>> 0;
   return Ue[r % Ue.length];
 }
-const Me = (t) => t == null ? "" : String(t), qt = (t) => Me(t).trim().toLowerCase();
+const Te = (t) => t == null ? "" : String(t), qt = (t) => Te(t).trim().toLowerCase();
 function Gn({ tiles: t, pinned: r, className: n }) {
   if (r)
     return /* @__PURE__ */ c("div", { className: i("flex flex-col md:flex-row gap-2 h-full min-h-0", n), children: [
@@ -84,14 +84,14 @@ function Jn({
   hasVideo: a,
   videoSlot: l,
   className: o,
-  fill: m
+  fill: u
 }) {
   return /* @__PURE__ */ c(
     "div",
     {
       className: i(
         "relative rounded-lg overflow-hidden bg-video-surface flex items-center justify-center",
-        m ? "h-full w-full" : "aspect-video",
+        u ? "h-full w-full" : "aspect-video",
         s && "ring-2 ring-speaking",
         o
       ),
@@ -106,8 +106,8 @@ function Jn({
   );
 }
 function Yn({ attach: t, active: r = !0, mirrored: n = !1, className: s }) {
-  const a = ae(null);
-  return G(() => {
+  const a = te(null);
+  return Y(() => {
     if (!r || !a.current) return;
     const l = t(a.current);
     return () => {
@@ -154,7 +154,7 @@ const Vt = {
   xl: "h-control-xl w-10",
   "2xl": "h-control-2xl w-12",
   full: "h-control-md w-8"
-}, te = be(
+}, ne = be(
   ({
     variant: t = "primary",
     size: r = "md",
@@ -163,11 +163,11 @@ const Vt = {
     leftIcon: a,
     rightIcon: l,
     iconOnly: o = !1,
-    shape: m = "default",
+    shape: u = "default",
     className: d,
     children: v,
     disabled: h,
-    ...u
+    ...m
   }, b) => {
     const g = h || s;
     return /* @__PURE__ */ c(
@@ -180,7 +180,7 @@ const Vt = {
           // the same weight as an emphasised nav item, and 600 at 12–13px
           // reads as a heavier control than the surrounding chrome.
           "inline-flex shrink-0 items-center justify-center gap-2 cursor-pointer font-medium",
-          m === "circle" ? "rounded-full" : "rounded-md",
+          u === "circle" ? "rounded-full" : "rounded-md",
           "transition-colors duration-fast ease-out",
           "focus-visible:outline-none focus-visible:focus-ring",
           "disabled:cursor-not-allowed disabled:border-border-subtle",
@@ -193,7 +193,7 @@ const Vt = {
         ),
         disabled: g,
         "aria-busy": s || void 0,
-        ...u,
+        ...m,
         children: [
           s && /* @__PURE__ */ e(
             "span",
@@ -211,7 +211,7 @@ const Vt = {
     );
   }
 );
-te.displayName = "Button";
+ne.displayName = "Button";
 const Xn = ({
   children: t,
   size: r = "md",
@@ -266,7 +266,7 @@ const Kt = {
   onClick: a,
   className: l,
   "aria-label": o,
-  ...m
+  ...u
 }) => {
   const d = typeof r == "number" ? r : Gt(r), v = i(
     "inline-block shrink-0",
@@ -285,10 +285,10 @@ const Kt = {
     "aria-hidden": o ? 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,
-    ...m
+    ...u
   };
   return /* @__PURE__ */ e(t, { ...h });
 };
@@ -309,15 +309,15 @@ const et = ({
   rootClassName: a,
   triggerClassName: l,
   disabled: o = !1,
-  triggerLabel: m
+  triggerLabel: u
 }) => {
-  const [d, v] = j(!1), h = ae(null), u = ae(null), b = Le(d, u, { placement: n });
-  G(() => {
+  const [d, v] = F(!1), h = te(null), m = te(null), b = Le(d, m, { placement: n });
+  Y(() => {
     if (!d) return;
-    const p = (S) => {
-      h.current && !h.current.contains(S.target) && v(!1);
-    }, x = (S) => {
-      S.key === "Escape" && v(!1);
+    const p = (C) => {
+      h.current && !h.current.contains(C.target) && v(!1);
+    }, x = (C) => {
+      C.key === "Escape" && v(!1);
     };
     return document.addEventListener("mousedown", p), document.addEventListener("keydown", x), () => {
       document.removeEventListener("mousedown", p), document.removeEventListener("keydown", x);
@@ -330,11 +330,11 @@ const et = ({
     /* @__PURE__ */ e(
       "button",
       {
-        ref: u,
+        ref: m,
         type: "button",
         onClick: g,
         disabled: o,
-        "aria-label": m,
+        "aria-label": u,
         "aria-expanded": d,
         className: i(
           "inline-flex items-center",
@@ -388,44 +388,44 @@ function Zt({
   size: a = "md",
   active: l = !1,
   caret: o = !1,
-  menu: m,
+  menu: u,
   menuClassName: d,
   onClear: v,
   clearLabel: h = "Filter wissen",
-  onClick: u,
+  onClick: m,
   title: b,
   className: g
 }) {
-  const w = l && !!v, p = s === "pill" ? "rounded-full" : "rounded-md", x = Yt({ active: l, tone: n, shape: s, size: a, className: g }), S = /* @__PURE__ */ c(ke, { children: [
+  const w = l && !!v, p = s === "pill" ? "rounded-full" : "rounded-md", x = Yt({ active: l, tone: n, shape: s, size: a, className: g }), C = /* @__PURE__ */ c(Ce, { children: [
     r,
     t,
     o && /* @__PURE__ */ e(Z, { icon: $e, size: "xs" })
-  ] }), _ = Xt({ shape: s, withClear: w }), B = w && /* @__PURE__ */ e(
+  ] }), E = Xt({ shape: s, withClear: w }), j = w && /* @__PURE__ */ e(
     "button",
     {
       type: "button",
       "aria-label": h,
       onClick: v,
       className: i("inline-flex h-full items-center pr-3 focus-visible:outline-none focus-visible:focus-ring", p),
-      children: /* @__PURE__ */ e(Z, { icon: we, size: "xs" })
+      children: /* @__PURE__ */ e(Z, { icon: ke, size: "xs" })
     }
   );
-  return m ? /* @__PURE__ */ c("span", { className: x, title: b, children: [
+  return u ? /* @__PURE__ */ c("span", { className: x, title: b, children: [
     /* @__PURE__ */ e(
       et,
       {
-        trigger: S,
+        trigger: C,
         rootClassName: "h-full",
-        triggerClassName: i(_, "h-full"),
+        triggerClassName: i(E, "h-full"),
         className: i("min-w-menu p-1.5", d),
-        children: m
+        children: u
       }
     ),
-    B
+    j
   ] }) : w ? /* @__PURE__ */ c("span", { className: x, title: b, children: [
-    /* @__PURE__ */ e("button", { type: "button", onClick: u, className: _, children: S }),
-    B
-  ] }) : /* @__PURE__ */ e("button", { type: "button", title: b, onClick: u, className: i(x, _), children: S });
+    /* @__PURE__ */ e("button", { type: "button", onClick: m, className: E, children: C }),
+    j
+  ] }) : /* @__PURE__ */ e("button", { type: "button", title: b, onClick: m, className: i(x, E), children: C });
 }
 const Qt = {
   xs: "text-xs",
@@ -459,12 +459,12 @@ const Qt = {
   external: a = !1,
   className: l,
   children: o,
-  href: m,
+  href: u,
   target: d,
   rel: v,
   ...h
 }) => {
-  const u = a || m && (m.startsWith("http") || m.startsWith("mailto:")), b = i(
+  const m = a || u && (u.startsWith("http") || u.startsWith("mailto:")), b = i(
     "inline-flex items-center gap-1 underline-offset-2",
     "transition-colors duration-fast ease-out",
     "focus-visible:outline-none focus-visible:focus-ring",
@@ -480,14 +480,14 @@ const Qt = {
     l
   ), g = {
     ...h,
-    href: s ? void 0 : m,
-    target: u ? "_blank" : d,
-    rel: u ? "noopener noreferrer" : v,
+    href: s ? void 0 : u,
+    target: m ? "_blank" : d,
+    rel: m ? "noopener noreferrer" : v,
     "aria-disabled": s || void 0
   };
   return /* @__PURE__ */ c("a", { className: b, ...g, children: [
     o,
-    u && /* @__PURE__ */ e(Nt, { className: "size-icon-sm shrink-0", "aria-hidden": !0 })
+    m && /* @__PURE__ */ e(Nt, { className: "size-icon-sm shrink-0", "aria-hidden": !0 })
   ] });
 }, rr = {
   sm: "h-control-sm px-3 text-sm",
@@ -501,13 +501,13 @@ function nr({
   tone: a = "sunk",
   fullWidth: l = !1,
   className: o,
-  "aria-label": m
+  "aria-label": u
 }) {
   return /* @__PURE__ */ e(
     "div",
     {
       role: "tablist",
-      "aria-label": m,
+      "aria-label": u,
       className: i(
         "gap-0.5 rounded-md p-0.5",
         a === "track" ? "bg-surface-track" : "bg-surface-sunk",
@@ -557,11 +557,11 @@ function tt({
   icon: a,
   options: l,
   disabled: o = !1,
-  loading: m = !1,
+  loading: u = !1,
   menuPlacement: d = "bottom-end",
   menuLabel: v = "More options"
 }) {
-  const h = o || m, u = l.length > 0;
+  const h = o || u, m = l.length > 0;
   return (
     // De scheiding tussen beide helften is een kier in de vulling, niet een
     // lijn: bij een ink-gevulde knop leest 2px als een spleet. 1px is genoeg
@@ -569,19 +569,19 @@ function tt({
     // eigen randen al en houden de helften tegen elkaar.
     /* @__PURE__ */ c("div", { className: i("inline-flex items-center", n === "primary" && "gap-px"), children: [
       /* @__PURE__ */ e(
-        te,
+        ne,
         {
           variant: n,
           size: s,
           onClick: r,
           disabled: o,
-          loading: m,
+          loading: u,
           leftIcon: a,
-          className: i(u && "rounded-r-none"),
+          className: i(m && "rounded-r-none"),
           children: t
         }
       ),
-      u && /* @__PURE__ */ e(
+      m && /* @__PURE__ */ e(
         et,
         {
           placement: d,
@@ -602,7 +602,7 @@ function tt({
               children: /* @__PURE__ */ e($e, { className: "size-icon-md" })
             }
           ),
-          children: (b) => /* @__PURE__ */ e(ke, { children: l.map((g) => /* @__PURE__ */ c(
+          children: (b) => /* @__PURE__ */ e(Ce, { children: l.map((g) => /* @__PURE__ */ c(
             "button",
             {
               type: "button",
@@ -651,11 +651,11 @@ const lr = {
     indeterminate: a = !1,
     containerClassName: l,
     labelClassName: o,
-    className: m,
+    className: u,
     id: d,
     ...v
   }, h) => {
-    const u = ce.useId(), b = d || `checkbox-${u}`, g = !!n, w = ce.useRef(null), p = ce.useCallback(
+    const m = ce.useId(), b = d || `checkbox-${m}`, g = !!n, w = ce.useRef(null), p = ce.useCallback(
       (x) => {
         w.current = x, typeof h == "function" ? h(x) : h && typeof h == "object" && (h.current = x);
       },
@@ -683,7 +683,7 @@ const lr = {
               "disabled:cursor-not-allowed disabled:bg-surface-hover",
               lr[s],
               g ? "border-danger-border" : "border-border-strong",
-              m
+              u
             ),
             ...v
           }
@@ -750,14 +750,14 @@ const ir = {
   align: a = "left",
   truncate: l = !1,
   italic: o = !1,
-  underline: m = !1,
+  underline: u = !1,
   lineHeight: d = "normal",
   as: v,
   className: h,
-  children: u,
+  children: m,
   ...b
 }) => {
-  const g = v || hr(t), w = t === "caption", p = t === "label", x = t === "code", S = i(
+  const g = v || hr(t), w = t === "caption", p = t === "label", x = t === "code", C = i(
     "font-sans",
     // Variant — caption and label pin their own size/weight
     w && "text-xs text-text-subtle",
@@ -772,11 +772,11 @@ const ir = {
     // Line height only overrides the body variant
     t === "body" && fr[d],
     o && "italic",
-    m && "underline",
+    u && "underline",
     l && "truncate",
     h
   );
-  return /* @__PURE__ */ e(g, { className: S, ...b, children: u });
+  return /* @__PURE__ */ e(g, { className: C, ...b, children: m });
 };
 function hr(t) {
   return {
@@ -794,21 +794,21 @@ function es({
   maxBytes: a,
   aspect: l = "square",
   helperText: o,
-  disabled: m,
+  disabled: u,
   className: d,
   chooseLabel: v = "Choose",
   removeLabel: h = "Remove",
-  tooLargeLabel: u = "That image is too large."
+  tooLargeLabel: m = "That image is too large."
 }) {
-  const b = ae(null), [g, w] = j(null), p = async (x) => {
+  const b = te(null), [g, w] = F(null), p = async (x) => {
     if (!x) return;
     w(null);
-    const S = await br(x, s);
-    if (a && xr(S) > a) {
-      w(u);
+    const C = await br(x, s);
+    if (a && xr(C) > a) {
+      w(m);
       return;
     }
-    n(S);
+    n(C);
   };
   return /* @__PURE__ */ c("div", { className: i("flex flex-col gap-1.5", d), children: [
     t && /* @__PURE__ */ e("span", { className: "text-sm font-medium text-text", children: t }),
@@ -826,21 +826,21 @@ function es({
       /* @__PURE__ */ c("div", { className: "flex flex-col gap-2", children: [
         /* @__PURE__ */ c("div", { className: "flex gap-2", children: [
           /* @__PURE__ */ e(
-            te,
+            ne,
             {
               type: "button",
               variant: "secondary",
-              disabled: m,
+              disabled: u,
               onClick: () => b.current?.click(),
               children: v
             }
           ),
           r && /* @__PURE__ */ e(
-            te,
+            ne,
             {
               type: "button",
               variant: "ghost",
-              disabled: m,
+              disabled: u,
               onClick: () => {
                 w(null), n(void 0);
               },
@@ -873,19 +873,19 @@ function br(t, r) {
     a.onload = () => {
       const l = new Image();
       l.onload = () => {
-        const o = Math.min(1, r / Math.max(l.width, l.height)), m = Math.round(l.width * o), d = Math.round(l.height * o), v = document.createElement("canvas");
-        v.width = m, v.height = d;
+        const o = Math.min(1, r / Math.max(l.width, l.height)), u = Math.round(l.width * o), d = Math.round(l.height * o), v = document.createElement("canvas");
+        v.width = u, v.height = d;
         const h = v.getContext("2d");
         if (!h) {
           n(a.result);
           return;
         }
-        h.drawImage(l, 0, 0, m, d), n(v.toDataURL("image/png"));
+        h.drawImage(l, 0, 0, u, d), n(v.toDataURL("image/png"));
       }, l.onerror = s, l.src = a.result;
     }, a.onerror = s, a.readAsDataURL(t);
   });
 }
-const gr = () => /* @__PURE__ */ e(Z, { icon: wt, size: "md", color: "current" }), pr = () => /* @__PURE__ */ e(Z, { icon: Ce, size: "md", color: "current" }), vr = () => /* @__PURE__ */ e(Z, { icon: De, size: "md", color: "current" }), Fe = be(({
+const gr = () => /* @__PURE__ */ e(Z, { icon: wt, size: "md", color: "current" }), pr = () => /* @__PURE__ */ e(Z, { icon: Se, size: "md", color: "current" }), vr = () => /* @__PURE__ */ e(Z, { icon: De, size: "md", color: "current" }), Fe = be(({
   value: t,
   onChange: r,
   placeholder: n = "Select date",
@@ -893,38 +893,38 @@ const gr = () => /* @__PURE__ */ e(Z, { icon: wt, size: "md", color: "current" }
   required: a = !1,
   size: l = "md",
   className: o,
-  minDate: m,
+  minDate: u,
   maxDate: d,
   format: v = "MM/dd/yyyy",
   withTime: h = !1
-}, u) => {
-  const [b, g] = j(!1), [w, p] = j(() => t || /* @__PURE__ */ new Date()), x = ae(null), S = ae(null), _ = Le(b, S);
-  G(() => {
-    const f = (z) => {
-      x.current && !x.current.contains(z.target) && g(!1);
+}, m) => {
+  const [b, g] = F(!1), [w, p] = F(() => t || /* @__PURE__ */ new Date()), x = te(null), C = te(null), E = Le(b, C);
+  Y(() => {
+    const f = (M) => {
+      x.current && !x.current.contains(M.target) && g(!1);
     };
     return b && document.addEventListener("mousedown", f), () => {
       document.removeEventListener("mousedown", f);
     };
   }, [b]);
-  const B = (f) => {
+  const j = (f) => {
     if (!f) return "";
-    const z = f.getDate().toString().padStart(2, "0"), y = (f.getMonth() + 1).toString().padStart(2, "0"), $ = f.getFullYear(), N = v === "dd/MM/yyyy" ? `${z}/${y}/${$}` : v === "yyyy-MM-dd" ? `${$}-${y}-${z}` : `${y}/${z}/${$}`;
+    const M = f.getDate().toString().padStart(2, "0"), y = (f.getMonth() + 1).toString().padStart(2, "0"), $ = f.getFullYear(), N = v === "dd/MM/yyyy" ? `${M}/${y}/${$}` : v === "yyyy-MM-dd" ? `${$}-${y}-${M}` : `${y}/${M}/${$}`;
     return h ? `${N} ${D(f)}` : N;
-  }, D = (f) => `${f.getHours().toString().padStart(2, "0")}:${f.getMinutes().toString().padStart(2, "0")}`, J = (f) => {
-    const [z, y] = f.split(":").map(Number);
-    if (Number.isNaN(z) || Number.isNaN(y)) return;
+  }, D = (f) => `${f.getHours().toString().padStart(2, "0")}:${f.getMinutes().toString().padStart(2, "0")}`, U = (f) => {
+    const [M, y] = f.split(":").map(Number);
+    if (Number.isNaN(M) || Number.isNaN(y)) return;
     const $ = t ? new Date(t) : /* @__PURE__ */ new Date();
-    $.setHours(z, y, 0, 0), r?.($);
-  }, V = () => {
-    const f = w.getFullYear(), z = w.getMonth(), y = new Date(f, z, 1), $ = new Date(y);
+    $.setHours(M, y, 0, 0), r?.($);
+  }, q = () => {
+    const f = w.getFullYear(), M = w.getMonth(), y = new Date(f, M, 1), $ = new Date(y);
     $.setDate($.getDate() - y.getDay());
-    const N = [], K = new Date($);
-    for (let ne = 0; ne < 42; ne++)
-      N.push(new Date(K)), K.setDate(K.getDate() + 1);
+    const N = [], J = new Date($);
+    for (let se = 0; se < 42; se++)
+      N.push(new Date(J)), J.setDate(J.getDate() + 1);
     return N;
-  }, P = (f) => {
-    if (f.getMonth() === w.getMonth() && !(m && f < m) && !(d && f > d)) {
+  }, A = (f) => {
+    if (f.getMonth() === w.getMonth() && !(u && f < u) && !(d && f > d)) {
       if (h) {
         const y = new Date(f);
         y.setHours(t?.getHours() ?? 0, t?.getMinutes() ?? 0, 0, 0), r?.(y);
@@ -932,13 +932,13 @@ const gr = () => /* @__PURE__ */ e(Z, { icon: wt, size: "md", color: "current" }
       }
       r?.(f), g(!1);
     }
-  }, q = () => {
+  }, R = () => {
     p(new Date(w.getFullYear(), w.getMonth() - 1, 1));
-  }, re = () => {
+  }, ee = () => {
     p(new Date(w.getFullYear(), w.getMonth() + 1, 1));
-  }, Y = () => {
+  }, K = () => {
     r?.(null), g(!1);
-  }, W = i(
+  }, G = i(
     "w-full border border-border-strong rounded-tile transition-colors duration-fast",
     "bg-surface text-text",
     "placeholder:text-text-muted",
@@ -951,7 +951,7 @@ const gr = () => /* @__PURE__ */ e(Z, { icon: wt, size: "md", color: "current" }
       "h-control-md w-full px-3 text-base": l === "full"
     },
     o
-  ), ie = V(), k = [
+  ), ie = q(), k = [
     "January",
     "February",
     "March",
@@ -966,19 +966,19 @@ const gr = () => /* @__PURE__ */ e(Z, { icon: wt, size: "md", color: "current" }
     "December"
   ];
   return /* @__PURE__ */ c("div", { ref: x, className: "relative", children: [
-    /* @__PURE__ */ c("div", { ref: S, className: "relative", children: [
+    /* @__PURE__ */ c("div", { ref: C, className: "relative", children: [
       /* @__PURE__ */ e(
         "input",
         {
-          ref: u,
+          ref: m,
           type: "text",
-          value: B(t ?? null),
+          value: j(t ?? null),
           placeholder: n,
           disabled: s,
           required: a,
           readOnly: !0,
           onClick: () => !s && g(!b),
-          className: i(W, "pr-10 cursor-pointer")
+          className: i(G, "pr-10 cursor-pointer")
         }
       ),
       /* @__PURE__ */ e(
@@ -992,12 +992,12 @@ const gr = () => /* @__PURE__ */ e(Z, { icon: wt, size: "md", color: "current" }
         }
       )
     ] }),
-    b && /* @__PURE__ */ c("div", { style: _, className: "fixed z-overlay overflow-auto rounded-lg border border-border bg-surface p-4 shadow-overlay min-w-panel", children: [
+    b && /* @__PURE__ */ c("div", { style: E, className: "fixed z-overlay overflow-auto rounded-lg border border-border bg-surface p-4 shadow-overlay min-w-panel", children: [
       /* @__PURE__ */ c("div", { className: "flex items-center justify-between mb-4", children: [
         /* @__PURE__ */ e(
           "button",
           {
-            onClick: q,
+            onClick: R,
             className: "p-1 hover:bg-surface-hover rounded",
             children: /* @__PURE__ */ e(pr, {})
           }
@@ -1010,32 +1010,32 @@ const gr = () => /* @__PURE__ */ e(Z, { icon: wt, size: "md", color: "current" }
         /* @__PURE__ */ e(
           "button",
           {
-            onClick: re,
+            onClick: ee,
             className: "p-1 hover:bg-surface-hover rounded",
             children: /* @__PURE__ */ e(vr, {})
           }
         )
       ] }),
       /* @__PURE__ */ e("div", { className: "grid grid-cols-7 gap-1 mb-2", children: ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"].map((f) => /* @__PURE__ */ e("div", { className: "text-xs font-medium text-text-muted text-center py-1", children: f }, f)) }),
-      /* @__PURE__ */ e("div", { className: "grid grid-cols-7 gap-1", children: ie.map((f, z) => {
-        const y = f.getMonth() === w.getMonth(), $ = t && f.toDateString() === t.toDateString(), N = f.toDateString() === (/* @__PURE__ */ new Date()).toDateString(), K = !y || m && f < m || d && f > d;
+      /* @__PURE__ */ e("div", { className: "grid grid-cols-7 gap-1", children: ie.map((f, M) => {
+        const y = f.getMonth() === w.getMonth(), $ = t && f.toDateString() === t.toDateString(), N = f.toDateString() === (/* @__PURE__ */ new Date()).toDateString(), J = !y || u && f < u || d && f > d;
         return /* @__PURE__ */ e(
           "button",
           {
-            onClick: () => !K && P(f),
-            disabled: K,
+            onClick: () => !J && A(f),
+            disabled: J,
             className: i(
               "w-8 h-8 text-sm rounded transition-colors duration-fast",
               {
-                "text-text hover:bg-surface-hover": y && !$ && !K,
+                "text-text hover:bg-surface-hover": y && !$ && !J,
                 "bg-accent text-accent-fg": $,
                 "bg-surface-hover text-text": N && !$,
-                "text-text-muted cursor-not-allowed": K
+                "text-text-muted cursor-not-allowed": J
               }
             ),
             children: f.getDate()
           },
-          z
+          M
         );
       }) }),
       h && /* @__PURE__ */ c("div", { className: "mt-3 flex items-center gap-2 border-t border-border pt-3", children: [
@@ -1046,7 +1046,7 @@ const gr = () => /* @__PURE__ */ e(Z, { icon: wt, size: "md", color: "current" }
             id: "datepicker-time",
             type: "time",
             value: t ? D(t) : "",
-            onChange: (f) => J(f.target.value),
+            onChange: (f) => U(f.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"
           }
         )
@@ -1055,7 +1055,7 @@ const gr = () => /* @__PURE__ */ e(Z, { icon: wt, size: "md", color: "current" }
         /* @__PURE__ */ e(
           "button",
           {
-            onClick: Y,
+            onClick: K,
             className: "text-sm text-text-muted hover:text-text",
             children: "Clear"
           }
@@ -1076,7 +1076,7 @@ const gr = () => /* @__PURE__ */ e(Z, { icon: wt, size: "md", color: "current" }
   md: "h-control-md px-3 text-sm",
   lg: "h-control-lg px-3 text-base",
   full: "h-control-md w-full px-3 text-sm"
-}, Se = qt, Te = be(
+}, Ee = qt, _e = be(
   ({
     label: t,
     helperText: r,
@@ -1085,94 +1085,94 @@ const gr = () => /* @__PURE__ */ e(Z, { icon: wt, size: "md", color: "current" }
     fullWidth: a = !1,
     disabled: l = !1,
     options: o,
-    placeholder: m,
+    placeholder: u,
     containerClassName: d,
     labelClassName: v,
     className: h,
-    id: u,
+    id: m,
     searchable: b,
     multiple: g,
     value: w,
     onChange: p,
     allowCreate: x,
-    onCreateOption: S,
-    ..._
-  }, B) => {
-    const D = u || `select-${Math.random().toString(36).substr(2, 9)}`, J = !!n, [V, P] = ce.useState(!1), [q, re] = ce.useState(""), Y = ce.useRef(null), W = ce.useRef(null), ie = Le(V, W, { matchWidth: !0 }), [k, f] = ce.useState(o);
-    ce.useImperativeHandle(B, () => Y.current), ce.useEffect(() => {
-      const M = (C) => {
-        Y.current && !Y.current.contains(C.target) && P(!1);
+    onCreateOption: C,
+    ...E
+  }, j) => {
+    const D = m || `select-${Math.random().toString(36).substr(2, 9)}`, U = !!n, [q, A] = ce.useState(!1), [R, ee] = ce.useState(""), K = ce.useRef(null), G = ce.useRef(null), ie = Le(q, G, { matchWidth: !0 }), [k, f] = ce.useState(o);
+    ce.useImperativeHandle(j, () => K.current), ce.useEffect(() => {
+      const T = (S) => {
+        K.current && !K.current.contains(S.target) && A(!1);
       };
-      return document.addEventListener("mousedown", M), () => document.removeEventListener("mousedown", M);
+      return document.addEventListener("mousedown", T), () => document.removeEventListener("mousedown", T);
     }, []);
-    const z = ce.useCallback(
-      (M, C) => M.some(
-        (A) => Se(A.value) === Se(C) || Se(A.label) === Se(C)
+    const M = ce.useCallback(
+      (T, S) => T.some(
+        (L) => Ee(L.value) === Ee(S) || Ee(L.label) === Ee(S)
       ),
       []
     ), y = ce.useCallback(
-      (M, C) => {
-        const A = [...M], O = (H) => {
-          const T = Me(H).trim();
-          T && (z(A, T) || A.push({ value: T, label: T }));
+      (T, S) => {
+        const L = [...T], O = (V) => {
+          const _ = Te(V).trim();
+          _ && (M(L, _) || L.push({ value: _, label: _ }));
         };
-        return Array.isArray(C) ? C.forEach(O) : O(C), A;
+        return Array.isArray(S) ? S.forEach(O) : O(S), L;
       },
-      [z]
+      [M]
     );
     ce.useEffect(() => {
-      f((M) => {
-        const C = [...o];
-        return M.forEach((A) => {
-          !z(C, A.value) && !z(C, A.label) && C.push(A);
-        }), y(C, w);
+      f((T) => {
+        const S = [...o];
+        return T.forEach((L) => {
+          !M(S, L.value) && !M(S, L.label) && S.push(L);
+        }), y(S, w);
       });
-    }, [o, w, y, z]);
+    }, [o, w, y, M]);
     const $ = ce.useMemo(
-      () => Array.isArray(w) ? w.map(Me) : w == null ? void 0 : Me(w),
+      () => Array.isArray(w) ? w.map(Te) : w == null ? void 0 : Te(w),
       [w]
-    ), N = (M) => {
+    ), N = (T) => {
       if (g) {
-        const C = Array.isArray($) ? $ : [], A = C.includes(M) ? C.filter((O) => O !== M) : [...C, M];
-        p?.(A);
+        const S = Array.isArray($) ? $ : [], L = S.includes(T) ? S.filter((O) => O !== T) : [...S, T];
+        p?.(L);
       } else
-        p?.(M), P(!1), re("");
-    }, K = g ? null : k.find((M) => M.value === $), ne = g ? k.filter(
-      (M) => Array.isArray($) && $.includes(M.value)
-    ) : [], ee = b && q ? k.filter(
-      (M) => M.label.toLowerCase().includes(q.toLowerCase())
-    ) : k, X = !!x && !!b && !!q.trim() && !z(k, q), I = (M) => {
-      const C = M.trim();
-      if (!C) return;
-      const A = S?.(C) ?? {
-        value: C,
-        label: C
+        p?.(T), A(!1), ee("");
+    }, J = g ? null : k.find((T) => T.value === $), se = g ? k.filter(
+      (T) => Array.isArray($) && $.includes(T.value)
+    ) : [], re = b && R ? k.filter(
+      (T) => T.label.toLowerCase().includes(R.toLowerCase())
+    ) : k, X = !!x && !!b && !!R.trim() && !M(k, R), P = (T) => {
+      const S = T.trim();
+      if (!S) return;
+      const L = C?.(S) ?? {
+        value: S,
+        label: S
       };
-      if (z(k, A.value) || z(k, A.label)) {
-        N(A.value), re(""), g || P(!1);
+      if (M(k, L.value) || M(k, L.label)) {
+        N(L.value), ee(""), g || A(!1);
         return;
       }
-      f((O) => [...O, A]), N(A.value), re(""), g || P(!1);
-    }, R = () => g ? ne.length > 0 ? ne.map((M) => M.label).join(", ") : m || "Select options" : K?.label || m || "Select an option";
+      f((O) => [...O, L]), N(L.value), ee(""), g || A(!1);
+    }, H = () => g ? se.length > 0 ? se.map((T) => T.label).join(", ") : u || "Select options" : J?.label || u || "Select an option";
     return /* @__PURE__ */ c(
       "div",
       {
-        ref: Y,
+        ref: K,
         className: i(
           "relative flex flex-col",
           a && "w-full",
           d
         ),
-        ..._,
+        ...E,
         children: [
           t && /* @__PURE__ */ e(
             "label",
             {
               htmlFor: D,
-              onClick: () => P(!V),
+              onClick: () => A(!q),
               className: i(
                 "block text-xs font-semibold uppercase tracking-label mb-1.5",
-                J ? "text-danger-fg" : "text-text-muted",
+                U ? "text-danger-fg" : "text-text-muted",
                 v
               ),
               children: t
@@ -1182,45 +1182,45 @@ const gr = () => /* @__PURE__ */ e(Z, { icon: wt, size: "md", color: "current" }
             /* @__PURE__ */ c(
               "button",
               {
-                ref: W,
+                ref: G,
                 type: "button",
                 id: D,
                 disabled: l,
-                onClick: () => P(!V),
+                onClick: () => A(!q),
                 className: i(
                   "flex w-full items-center justify-between gap-2 rounded-tile 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",
                   yr[s],
-                  J ? "border-danger-border text-danger-fg focus-visible:focus-ring" : "border-border-strong text-text",
+                  U ? "border-danger-border text-danger-fg focus-visible:focus-ring" : "border-border-strong text-text",
                   h
                 ),
                 children: [
-                  /* @__PURE__ */ e("span", { className: "truncate flex-1 min-w-0", children: R() }),
+                  /* @__PURE__ */ e("span", { className: "truncate flex-1 min-w-0", children: H() }),
                   /* @__PURE__ */ e(
                     kt,
                     {
                       size: 16,
                       className: i(
                         "shrink-0 opacity-60 transition-transform duration-fast",
-                        V && "rotate-180"
+                        q && "rotate-180"
                       )
                     }
                   )
                 ]
               }
             ),
-            V && /* @__PURE__ */ c("div", { style: ie, className: "fixed z-overlay flex flex-col overflow-hidden rounded-lg border border-border bg-surface shadow-overlay", children: [
+            q && /* @__PURE__ */ c("div", { style: ie, className: "fixed z-overlay flex flex-col overflow-hidden rounded-lg border border-border bg-surface shadow-overlay", children: [
               b && /* @__PURE__ */ e("div", { className: "p-2", children: /* @__PURE__ */ e(
                 "input",
                 {
                   type: "text",
                   placeholder: "Search...",
-                  value: q,
-                  onChange: (M) => re(M.target.value),
-                  onKeyDown: (M) => {
-                    M.key === "Enter" && X && (M.preventDefault(), I(q));
+                  value: R,
+                  onChange: (T) => ee(T.target.value),
+                  onKeyDown: (T) => {
+                    T.key === "Enter" && X && (T.preventDefault(), P(R));
                   },
                   className: i(
                     "w-full px-3 py-2 text-sm rounded-md border",
@@ -1235,51 +1235,51 @@ const gr = () => /* @__PURE__ */ e(Z, { icon: wt, size: "md", color: "current" }
                     "cursor-pointer px-3 py-1.5 text-sm",
                     "text-info-fg hover:bg-surface-hover"
                   ),
-                  onClick: () => I(q),
+                  onClick: () => P(R),
                   children: [
                     "+: “",
-                    q.trim(),
+                    R.trim(),
                     "”"
                   ]
                 }
               ),
               /* @__PURE__ */ c("ul", { className: "min-h-0 flex-1 overflow-auto py-1", children: [
-                m && !g && /* @__PURE__ */ e(
+                u && !g && /* @__PURE__ */ e(
                   "li",
                   {
                     className: "cursor-pointer px-3 py-1.5 text-sm text-text-muted hover:bg-surface-hover",
                     onClick: () => {
-                      p?.(""), P(!1);
+                      p?.(""), A(!1);
                     },
-                    children: m
+                    children: u
                   }
                 ),
-                ee.map((M) => {
-                  const C = g ? Array.isArray($) && $.includes(M.value) : $ === M.value;
+                re.map((T) => {
+                  const S = g ? Array.isArray($) && $.includes(T.value) : $ === T.value;
                   return /* @__PURE__ */ e(
                     "li",
                     {
-                      onClick: () => !M.disabled && N(M.value),
+                      onClick: () => !T.disabled && N(T.value),
                       className: i(
                         "cursor-pointer px-3 py-1.5 text-sm",
                         "text-text",
-                        M.disabled ? "opacity-50 cursor-not-allowed" : "hover:bg-surface-hover",
-                        C && "bg-accent-soft text-accent font-semibold"
+                        T.disabled ? "opacity-50 cursor-not-allowed" : "hover:bg-surface-hover",
+                        S && "bg-accent-soft text-accent font-semibold"
                       ),
                       children: /* @__PURE__ */ c("div", { className: "flex items-center", children: [
                         g && /* @__PURE__ */ e(
                           "input",
                           {
                             type: "checkbox",
-                            checked: C,
+                            checked: S,
                             readOnly: !0,
                             className: "mr-3 h-4 w-4 rounded border-border [&:not(:checked)]:bg-surface-input text-accent "
                           }
                         ),
-                        /* @__PURE__ */ e("span", { children: M.label })
+                        /* @__PURE__ */ e("span", { children: T.label })
                       ] })
                     },
-                    M.value
+                    T.value
                   );
                 })
               ] })
@@ -1290,7 +1290,7 @@ const gr = () => /* @__PURE__ */ e(Z, { icon: wt, size: "md", color: "current" }
             {
               className: i(
                 "mt-1 text-xs",
-                J ? "text-danger-fg" : "text-text-muted"
+                U ? "text-danger-fg" : "text-text-muted"
               ),
               children: n || r
             }
@@ -1300,13 +1300,13 @@ const gr = () => /* @__PURE__ */ e(Z, { icon: wt, size: "md", color: "current" }
     );
   }
 );
-Te.displayName = "Select";
+_e.displayName = "Select";
 const Nr = {
   sm: "h-control-sm px-3 text-sm",
   md: "h-control-md px-3 text-base",
   lg: "h-control-lg px-3 text-base",
   full: "h-control-md px-3 text-base"
-}, rt = "mb-1.5 block text-sm font-medium", nt = "block w-full rounded-tile border bg-surface-input text-text transition-colors duration-fast ease-out placeholder:text-text-subtle focus-visible:outline-none focus-visible:focus-ring disabled:cursor-not-allowed disabled:bg-surface-hover disabled:text-text-disabled", st = (t) => t ? "border-danger-border bg-danger-soft" : "border-border-strong", Ne = be(
+}, rt = "mb-1.5 block text-sm font-medium", nt = "block w-full rounded-tile border bg-surface-input text-text transition-colors duration-fast ease-out placeholder:text-text-subtle focus-visible:outline-none focus-visible:focus-ring disabled:cursor-not-allowed disabled:bg-surface-hover disabled:text-text-disabled", st = (t) => t ? "border-danger-border bg-danger-soft" : "border-border-strong", we = be(
   ({
     label: t,
     helperText: r,
@@ -1315,14 +1315,14 @@ const Nr = {
     fullWidth: a = !1,
     startIcon: l,
     endIcon: o,
-    loading: m = !1,
+    loading: u = !1,
     containerClassName: d,
     labelClassName: v,
     className: h,
-    id: u,
+    id: m,
     ...b
   }, g) => {
-    const w = ce.useId(), p = u || `textfield-${w}`, x = !!n, S = n || r ? `${p}-description` : void 0;
+    const w = ce.useId(), p = m || `textfield-${w}`, x = !!n, C = n || r ? `${p}-description` : void 0;
     return /* @__PURE__ */ c("div", { className: i("flex flex-col", a && "w-full", d), children: [
       t && /* @__PURE__ */ e(
         "label",
@@ -1344,19 +1344,19 @@ const Nr = {
             ref: g,
             id: p,
             "aria-invalid": x || void 0,
-            "aria-describedby": S,
+            "aria-describedby": C,
             className: i(
               nt,
               Nr[s],
               l && "pl-9",
-              (o || m) && "pr-9",
+              (o || u) && "pr-9",
               st(x),
               h
             ),
             ...b
           }
         ),
-        (o || m) && /* @__PURE__ */ e("span", { className: "absolute inset-y-0 right-0 flex items-center pr-3 text-text-muted", children: m ? /* @__PURE__ */ e(
+        (o || u) && /* @__PURE__ */ e("span", { className: "absolute inset-y-0 right-0 flex items-center pr-3 text-text-muted", children: u ? /* @__PURE__ */ e(
           "span",
           {
             "aria-hidden": !0,
@@ -1367,7 +1367,7 @@ const Nr = {
       (n || r) && /* @__PURE__ */ e(
         "p",
         {
-          id: S,
+          id: C,
           className: i("mt-1 text-xs", x ? "text-danger-fg" : "text-text-subtle"),
           children: n || r
         }
@@ -1375,7 +1375,7 @@ const Nr = {
     ] });
   }
 );
-Ne.displayName = "TextField";
+we.displayName = "TextField";
 function wr({
   value: t,
   onChange: r,
@@ -1384,39 +1384,39 @@ function wr({
   size: a = "md",
   placeholder: l,
   templatePlaceholder: o,
-  showTemplate: m = !0
+  showTemplate: u = !0
 }) {
-  const [d, v] = j([]);
-  G(() => {
-    let u = !0;
+  const [d, v] = F([]);
+  Y(() => {
+    let m = !0;
     return Promise.resolve(n?.()).then((b) => {
-      u && b && v(b.data ?? []);
+      m && b && v(b.data ?? []);
     }).catch(() => {
     }), () => {
-      u = !1;
+      m = !1;
     };
   }, []);
   const h = t ?? {};
   return /* @__PURE__ */ c("div", { className: "flex flex-col gap-2", children: [
     /* @__PURE__ */ e(
-      Te,
+      _e,
       {
         size: a,
         fullWidth: !0,
         value: h.folderId ?? "",
-        options: d.map((u) => ({ value: u.id, label: u.name })),
+        options: d.map((m) => ({ value: m.id, label: m.name })),
         placeholder: l ?? "Select a folder",
-        onChange: (u) => r?.({ ...h, folderId: u })
+        onChange: (m) => r?.({ ...h, folderId: m })
       }
     ),
-    m && /* @__PURE__ */ e(
-      Ne,
+    u && /* @__PURE__ */ e(
+      we,
       {
         size: a,
         disabled: s ?? !1,
         value: h.pathTemplate ?? "",
         placeholder: o ?? "Sub-path e.g. {yyyy}/{mm}/{dd} (optional)",
-        onChange: (u) => r?.({ ...h, pathTemplate: u.target.value })
+        onChange: (m) => r?.({ ...h, pathTemplate: m.target.value })
       }
     )
   ] });
@@ -1440,72 +1440,72 @@ const ve = (...t) => t.filter(Boolean).join(" "), kr = (t) => /* @__PURE__ */ e(
     fullWidth: a = !1,
     startIcon: l = /* @__PURE__ */ e(kr, {}),
     loading: o = !1,
-    containerClassName: m,
+    containerClassName: u,
     labelClassName: d,
     className: v,
     id: h,
-    options: u,
+    options: m,
     onRemoteSearch: b,
     onSelect: g,
     debounceTime: w = 500,
     showAllOnOpen: p = !1,
     value: x,
-    onChange: S,
-    ..._
-  }, B) => {
-    const D = h || `searchfield-${Math.random().toString(36).substr(2, 9)}`, J = !!n, V = ae(null), P = ae(null), [q, re] = j(x || ""), [Y, W] = j(!1), [ie, k] = j(!1), [f, z] = j(!1);
-    G(() => {
-      x !== void 0 && re(x);
+    onChange: C,
+    ...E
+  }, j) => {
+    const D = h || `searchfield-${Math.random().toString(36).substr(2, 9)}`, U = !!n, q = te(null), A = te(null), [R, ee] = F(x || ""), [K, G] = F(!1), [ie, k] = F(!1), [f, M] = F(!1);
+    Y(() => {
+      x !== void 0 && ee(x);
     }, [x]);
-    const y = pe(() => {
-      if (p && !f || !q) return u;
-      const I = String(q).toLowerCase();
-      return u.filter(
-        (R) => String(R.label).toLowerCase().includes(I)
+    const y = ge(() => {
+      if (p && !f || !R) return m;
+      const P = String(R).toLowerCase();
+      return m.filter(
+        (H) => String(H.label).toLowerCase().includes(P)
       );
-    }, [q, u, p, f]);
-    G(() => {
-      if (!b || !q) {
+    }, [R, m, p, f]);
+    Y(() => {
+      if (!b || !R) {
         k(!1);
         return;
       }
-      const I = setTimeout(async () => {
+      const P = setTimeout(async () => {
         k(!0);
         try {
-          await b(String(q));
-        } catch (R) {
-          console.error("Remote search failed:", R);
+          await b(String(R));
+        } catch (H) {
+          console.error("Remote search failed:", H);
         } finally {
           k(!1);
         }
       }, w);
       return () => {
-        clearTimeout(I), k(!1);
+        clearTimeout(P), k(!1);
       };
-    }, [q, w, b]), G(() => {
-      const I = (R) => {
-        V.current && !V.current.contains(R.target) && W(!1);
+    }, [R, w, b]), Y(() => {
+      const P = (H) => {
+        q.current && !q.current.contains(H.target) && G(!1);
       };
-      return document.addEventListener("mousedown", I), () => document.removeEventListener("mousedown", I);
+      return document.addEventListener("mousedown", P), () => document.removeEventListener("mousedown", P);
     }, []);
-    const $ = (I) => {
-      const R = I.target.value;
-      re(R), W(!0), z(!0), S && S(I);
-    }, N = (I) => {
-      re(I.label), W(!1), z(!1), g && g(I.value);
-    }, K = () => {
-      (u.length > 0 || b) && (W(!0), z(!1));
-    }, ne = o || ie, ee = Y && (y.length > 0 || ne), X = pe(() => B || P, [B]);
+    const $ = (P) => {
+      const H = P.target.value;
+      ee(H), G(!0), M(!0), C && C(P);
+    }, N = (P) => {
+      ee(P.label), G(!1), M(!1), g && g(P.value);
+    }, J = () => {
+      (m.length > 0 || b) && (G(!0), M(!1));
+    }, se = o || ie, re = K && (y.length > 0 || se), X = ge(() => j || A, [j]);
     return /* @__PURE__ */ c(
       "div",
       {
         className: ve(
           "flex flex-col",
           a ? "w-full" : "",
-          m || "",
+          u || "",
           "relative"
         ),
-        ref: V,
+        ref: q,
         children: [
           t && /* @__PURE__ */ e(
             "label",
@@ -1513,7 +1513,7 @@ const ve = (...t) => t.filter(Boolean).join(" "), kr = (t) => /* @__PURE__ */ e(
               htmlFor: D,
               className: ve(
                 "block text-sm font-medium mb-1",
-                J ? "text-danger-fg" : "text-text",
+                U ? "text-danger-fg" : "text-text",
                 d || ""
               ),
               children: t
@@ -1526,9 +1526,9 @@ const ve = (...t) => t.filter(Boolean).join(" "), kr = (t) => /* @__PURE__ */ e(
               {
                 ref: X,
                 id: D,
-                value: q,
+                value: R,
                 onChange: $,
-                onFocus: K,
+                onFocus: J,
                 className: ve(
                   // Base styles
                   "block w-full rounded-tile border bg-surface-input transition-colors duration-fast ease-out",
@@ -1541,13 +1541,13 @@ const ve = (...t) => t.filter(Boolean).join(" "), kr = (t) => /* @__PURE__ */ e(
                   "pr-10",
                   // Altijd padding rechts voor de dropdown/loading icon
                   // State styles
-                  J ? "border-danger-border text-danger-fg focus-visible:focus-ring" : "border-border-strong text-text",
+                  U ? "border-danger-border text-danger-fg focus-visible:focus-ring" : "border-border-strong text-text",
                   v || ""
                 ),
-                ..._
+                ...E
               }
             ),
-            /* @__PURE__ */ e("div", { className: "absolute inset-y-0 right-0 pr-3 flex items-center", children: ne || o ? (
+            /* @__PURE__ */ e("div", { className: "absolute inset-y-0 right-0 pr-3 flex items-center", children: se || o ? (
               // Loading Spinner
               /* @__PURE__ */ e(
                 Ct,
@@ -1564,31 +1564,31 @@ const ve = (...t) => t.filter(Boolean).join(" "), kr = (t) => /* @__PURE__ */ e(
                   className: ve(
                     "text-text-muted cursor-pointer transition-transform",
                     Oe[s],
-                    Y ? "rotate-180" : "rotate-0"
+                    K ? "rotate-180" : "rotate-0"
                   ),
                   onClick: () => {
-                    W((I) => (I || z(!1), !I));
+                    G((P) => (P || M(!1), !P));
                   }
                 }
               )
             ) })
           ] }),
-          ee && /* @__PURE__ */ e(
+          re && /* @__PURE__ */ e(
             "ul",
             {
               className: "absolute z-10 mt-1 w-full bg-surface border border-border rounded-lg shadow-lg max-h-60 overflow-auto top-full",
               role: "listbox",
-              children: y.length > 0 ? y.map((I) => /* @__PURE__ */ e(
+              children: y.length > 0 ? y.map((P) => /* @__PURE__ */ e(
                 "li",
                 {
                   className: "px-4 py-2 cursor-pointer text-text hover:bg-accent-soft hover:text-accent transition-colors",
-                  onClick: () => N(I),
+                  onClick: () => N(P),
                   role: "option",
-                  "aria-selected": q === I.label,
-                  children: I.label
+                  "aria-selected": R === P.label,
+                  children: P.label
                 },
-                I.value
-              )) : /* @__PURE__ */ e("li", { className: "px-4 py-2 text-text-muted", children: ne || o ? "Zoeken op afstand..." : "Geen resultaten gevonden." })
+                P.value
+              )) : /* @__PURE__ */ e("li", { className: "px-4 py-2 text-text-muted", children: se || o ? "Zoeken op afstand..." : "Geen resultaten gevonden." })
             }
           ),
           (n || r) && /* @__PURE__ */ e(
@@ -1596,14 +1596,14 @@ const ve = (...t) => t.filter(Boolean).join(" "), kr = (t) => /* @__PURE__ */ e(
             {
               className: ve(
                 "mt-1 text-xs",
-                J ? "text-danger-fg" : "text-text-muted"
+                U ? "text-danger-fg" : "text-text-muted"
               ),
               children: n || r
             }
           ),
           b && /* @__PURE__ */ c("p", { className: "mt-2 text-xs text-success-fg", children: [
             "Huidige zoekterm (niet-gedebounced): ",
-            String(q)
+            String(R)
           ] })
         ]
       }
@@ -1620,7 +1620,7 @@ const at = be(
     clearLabel: a = "Clear search",
     containerClassName: l,
     className: o,
-    disabled: m,
+    disabled: u,
     ...d
   }, v) => /* @__PURE__ */ c(
     "div",
@@ -1632,7 +1632,7 @@ const at = be(
         "flex items-center gap-2 rounded-md bg-surface-sunk px-2.5 text-text-muted",
         "transition-colors duration-fast ease-out",
         s === "sm" ? "h-control-sm" : "h-control-md",
-        m && "opacity-60",
+        u && "opacity-60",
         l
       ),
       children: [
@@ -1643,7 +1643,7 @@ const at = be(
             ref: v,
             type: "search",
             value: t,
-            disabled: m,
+            disabled: u,
             onChange: (h) => r(h.target.value),
             className: i(
               // The forms base layer hands every input a white fill, a 1px border
@@ -1668,7 +1668,7 @@ const at = be(
             "aria-label": a,
             onClick: () => r(""),
             className: "grid size-4 shrink-0 cursor-pointer place-items-center rounded-xs text-text-subtle transition-colors duration-fast ease-out hover:text-text focus-visible:outline-none focus-visible:focus-ring",
-            children: /* @__PURE__ */ e(Z, { icon: we, size: "sm", color: "current" })
+            children: /* @__PURE__ */ e(Z, { icon: ke, size: "sm", color: "current" })
           }
         ) : n && /* @__PURE__ */ e("span", { className: "shrink-0 text-xs text-text-subtle", children: n })
       ]
@@ -1678,7 +1678,7 @@ const at = be(
 at.displayName = "SearchField";
 const zr = be(
   ({ checked: t, onChange: r, label: n, disabled: s = !1, className: a, ...l }, o) => {
-    const m = /* @__PURE__ */ e(
+    const u = /* @__PURE__ */ e(
       "span",
       {
         "aria-hidden": !0,
@@ -1722,7 +1722,7 @@ const zr = be(
               ...l
             }
           ),
-          /* @__PURE__ */ e("span", { className: "inline-flex rounded-full peer-focus-visible:focus-ring", children: m }),
+          /* @__PURE__ */ e("span", { className: "inline-flex rounded-full peer-focus-visible:focus-ring", children: u }),
           n && /* @__PURE__ */ e("span", { className: "text-sm text-text", children: n })
         ]
       }
@@ -1738,65 +1738,65 @@ const Mr = ({
   placement: a = "bottom-start",
   disabled: l = !1,
   className: o,
-  showCheck: m = !0,
+  showCheck: u = !0,
   header: d
 }) => {
-  const [v, h] = j(!1), [u, b] = j(null), [g, w] = j({ top: 0, left: 0 }), p = ae(null), x = ae(null), S = ae(null), _ = ae(null), B = Le(v, x, { placement: a }), D = ae(null), J = () => Array.from(
-    _.current?.querySelectorAll("button[data-option-value]:not(:disabled)") ?? []
+  const [v, h] = F(!1), [m, b] = F(null), [g, w] = F({ top: 0, left: 0 }), p = te(null), x = te(null), C = te(null), E = te(null), j = Le(v, x, { placement: a }), D = te(null), U = () => Array.from(
+    E.current?.querySelectorAll("button[data-option-value]:not(:disabled)") ?? []
   );
-  G(() => {
-    v && J()[0]?.focus();
+  Y(() => {
+    v && U()[0]?.focus();
   }, [v]);
-  const V = (f) => {
+  const q = (f) => {
     if (!["ArrowDown", "ArrowUp", "Home", "End"].includes(f.key)) return;
-    const y = J();
+    const y = U();
     if (y.length === 0) return;
     f.preventDefault();
     const $ = y.indexOf(document.activeElement), N = f.key === "Home" ? 0 : f.key === "End" ? y.length - 1 : f.key === "ArrowDown" ? ($ + 1) % y.length : ($ - 1 + y.length) % y.length;
     y[N]?.focus();
   };
-  G(() => {
-    const f = (z) => {
-      p.current && (!p.current.contains(z.target) || S.current && !S.current.contains(z.target)) && (h(!1), b(null), D.current && (clearTimeout(D.current), D.current = null));
+  Y(() => {
+    const f = (M) => {
+      p.current && (!p.current.contains(M.target) || C.current && !C.current.contains(M.target)) && (h(!1), b(null), D.current && (clearTimeout(D.current), D.current = null));
     };
     return v && document.addEventListener("mousedown", f), () => {
       document.removeEventListener("mousedown", f);
     };
-  }, [v]), G(() => {
-    const f = (z) => {
-      z.key === "Escape" && (h(!1), b(null), x.current?.focus(), D.current && (clearTimeout(D.current), D.current = null));
+  }, [v]), Y(() => {
+    const f = (M) => {
+      M.key === "Escape" && (h(!1), b(null), x.current?.focus(), D.current && (clearTimeout(D.current), D.current = null));
     };
     return v && document.addEventListener("keydown", f), () => {
       document.removeEventListener("keydown", f);
     };
-  }, [v]), G(() => {
-    if (u && p.current) {
+  }, [v]), Y(() => {
+    if (m && p.current) {
       const f = p.current.querySelector(
-        `[data-option-value="${u}"]`
+        `[data-option-value="${m}"]`
       );
       if (f) {
-        const z = f.getBoundingClientRect();
+        const M = f.getBoundingClientRect();
         w({
-          top: z.top,
-          left: z.right + 8
+          top: M.top,
+          left: M.right + 8
         });
       }
     }
-  }, [u]), G(() => () => {
+  }, [m]), Y(() => () => {
     D.current && clearTimeout(D.current);
   }, []);
-  const P = (f) => {
+  const A = (f) => {
     f.stopPropagation(), !l && (h(!v), b(null), D.current && (clearTimeout(D.current), D.current = null));
-  }, q = (f, z, y) => {
-    f.stopPropagation(), !z.disabled && !z.divider && (!z.children || z.children.length === 0) && (s?.(z.value, y), h(!1), b(null));
-  }, re = (f) => {
+  }, R = (f, M, y) => {
+    f.stopPropagation(), !M.disabled && !M.divider && (!M.children || M.children.length === 0) && (s?.(M.value, y), h(!1), b(null));
+  }, ee = (f) => {
     D.current && (clearTimeout(D.current), D.current = null), f.children && f.children.length > 0 ? b(f.value) : b(null);
-  }, Y = (f) => {
+  }, K = (f) => {
     f.children && f.children.length > 0 ? D.current = setTimeout(() => {
       b(null);
     }, 150) : b(null);
-  }, W = (f, z, y) => {
-    f.stopPropagation(), !z.disabled && !z.divider && (s?.(z.value, y), h(!1), b(null));
+  }, G = (f, M, y) => {
+    f.stopPropagation(), !M.disabled && !M.divider && (s?.(M.value, y), h(!1), b(null));
   }, ie = i(
     "fixed z-overlay min-w-menu bg-surface rounded-lg shadow-overlay border border-border",
     "max-h-60 overflow-auto"
@@ -1817,7 +1817,7 @@ const Mr = ({
           "button",
           {
             ref: x,
-            onClick: P,
+            onClick: A,
             disabled: l,
             "aria-haspopup": "menu",
             "aria-expanded": v,
@@ -1827,18 +1827,18 @@ const Mr = ({
             children: t
           }
         ),
-        v && /* @__PURE__ */ e("div", { ref: _, className: ie, style: B, onKeyDown: V, children: /* @__PURE__ */ c("div", { className: "p-2", role: "menu", children: [
+        v && /* @__PURE__ */ e("div", { ref: E, className: ie, style: j, onKeyDown: q, children: /* @__PURE__ */ c("div", { className: "p-2", role: "menu", children: [
           d && (typeof d == "string" ? /* @__PURE__ */ e("div", { className: "text-xs font-medium text-text-muted uppercase tracking-label px-3 py-2", children: d }) : d),
-          r.map((f, z) => {
+          r.map((f, M) => {
             if (f.divider)
               return /* @__PURE__ */ e(
                 "div",
                 {
                   className: "border-t border-border my-2"
                 },
-                `divider-${z}`
+                `divider-${M}`
               );
-            const y = f.children && f.children.length > 0, $ = u === f.value;
+            const y = f.children && f.children.length > 0, $ = m === f.value;
             return /* @__PURE__ */ c("div", { className: "relative group", children: [
               /* @__PURE__ */ c(
                 "button",
@@ -1846,9 +1846,9 @@ const Mr = ({
                   "data-option-value": f.value,
                   role: "menuitem",
                   "aria-haspopup": y ? "menu" : void 0,
-                  onClick: (N) => q(N, f),
-                  onMouseEnter: () => re(f),
-                  onMouseLeave: () => Y(f),
+                  onClick: (N) => R(N, f),
+                  onMouseEnter: () => ee(f),
+                  onMouseLeave: () => K(f),
                   disabled: f.disabled,
                   className: i(
                     "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",
@@ -1866,7 +1866,7 @@ const Mr = ({
                       ] })
                     ] }),
                     /* @__PURE__ */ c("div", { className: "flex items-center space-x-2", children: [
-                      m && n === f.value && /* @__PURE__ */ e(He, { className: "size-icon-md shrink-0 text-success-fg", "aria-hidden": !0 }),
+                      u && n === f.value && /* @__PURE__ */ e(He, { className: "size-icon-md shrink-0 text-success-fg", "aria-hidden": !0 }),
                       y && /* @__PURE__ */ e("span", { className: "text-text-muted text-xs", children: "▶" })
                     ] })
                   ]
@@ -1875,7 +1875,7 @@ const Mr = ({
               y && $ && /* @__PURE__ */ e(
                 "div",
                 {
-                  ref: S,
+                  ref: C,
                   className: k,
                   style: {
                     top: `${g.top}px`,
@@ -1889,23 +1889,23 @@ const Mr = ({
                       b(null);
                     }, 150);
                   },
-                  children: /* @__PURE__ */ e("div", { className: "p-2", children: f.children.map((N, K) => {
+                  children: /* @__PURE__ */ e("div", { className: "p-2", children: f.children.map((N, J) => {
                     if (N.divider)
                       return /* @__PURE__ */ e(
                         "div",
                         {
                           className: "border-t border-border my-2"
                         },
-                        `divider-${K}`
+                        `divider-${J}`
                       );
-                    const ne = typeof n == "object" && n[f.value] && n[f.value].includes(
+                    const se = typeof n == "object" && n[f.value] && n[f.value].includes(
                       N.value
                     ) || n === N.value;
                     return /* @__PURE__ */ c(
                       "button",
                       {
-                        onClick: (ee) => W(
-                          ee,
+                        onClick: (re) => G(
+                          re,
                           N,
                           f.value
                         ),
@@ -1924,7 +1924,7 @@ const Mr = ({
                               N.description && /* @__PURE__ */ e("span", { className: "text-xs text-text-muted", children: N.description })
                             ] })
                           ] }),
-                          m && ne && /* @__PURE__ */ e(He, { className: "size-icon-md shrink-0 text-success-fg", "aria-hidden": !0 })
+                          u && se && /* @__PURE__ */ e(He, { className: "size-icon-md shrink-0 text-success-fg", "aria-hidden": !0 })
                         ]
                       },
                       N.value
@@ -1935,10 +1935,10 @@ const Mr = ({
             ] }, f.value);
           }),
           (() => {
-            const f = r.reduce((z, y) => {
-              if (y.divider) return z;
+            const f = r.reduce((M, y) => {
+              if (y.divider) return M;
               const $ = y.children ? y.children.filter((N) => !N.divider).length : 0;
-              return z + 1 + $;
+              return M + 1 + $;
             }, 0);
             return f > 1 && /* @__PURE__ */ e("div", { className: "border-t border-border mt-2 pt-2", children: /* @__PURE__ */ c("div", { className: "text-xs text-text-muted px-3 py-1", children: [
               f,
@@ -1949,7 +1949,7 @@ const Mr = ({
       ]
     }
   );
-}, _e = ({
+}, Ne = ({
   actions: t,
   defaultVariant: r = "secondary",
   className: n
@@ -1966,7 +1966,7 @@ const Mr = ({
     },
     s.id
   ) : /* @__PURE__ */ e(
-    te,
+    ne,
     {
       variant: s.variant ?? r,
       onClick: (a) => {
@@ -1992,17 +1992,17 @@ const Mr = ({
   children: l
 }) => /* @__PURE__ */ c("div", { className: i("flex items-center gap-2", Tr[a], s), children: [
   r && /* @__PURE__ */ e(
-    te,
+    ne,
     {
       variant: "secondary",
       onClick: r,
       "aria-label": n,
-      leftIcon: /* @__PURE__ */ e(Z, { icon: Ce, size: "sm" }),
+      leftIcon: /* @__PURE__ */ e(Z, { icon: Se, size: "sm" }),
       iconOnly: !0
     }
   ),
   l && /* @__PURE__ */ e("div", { className: "min-w-0 flex-1", children: l }),
-  /* @__PURE__ */ e(_e, { actions: t, className: i(!l && "ml-auto") })
+  /* @__PURE__ */ e(Ne, { actions: t, className: i(!l && "ml-auto") })
 ] }), rs = (t) => (r) => t(r instanceof Date ? r : null), ns = (t) => (r) => t(typeof r == "string" ? r : ""), _r = {
   none: "px-0",
   sm: "px-2",
@@ -2028,17 +2028,17 @@ const Lr = (t) => {
       Fe,
       {
         value: t.value,
-        onChange: (m) => t.onChange(m),
+        onChange: (u) => t.onChange(u),
         placeholder: t.placeholder || t.label,
         className: i("min-w-40", o && "bg-info-soft text-info-fg")
       }
     );
   }
-  const n = (o) => t.options?.find((m) => m.value === o)?.label ?? String(o), s = (o) => Array.isArray(t.value) ? t.value.includes(o) : t.value === o, a = (o) => {
+  const n = (o) => t.options?.find((u) => u.value === o)?.label ?? String(o), s = (o) => Array.isArray(t.value) ? t.value.includes(o) : t.value === o, a = (o) => {
     if (!t.multiSelect) return t.onChange(o);
-    const m = Array.isArray(t.value) ? t.value : [];
+    const u = Array.isArray(t.value) ? t.value : [];
     t.onChange(
-      m.includes(o) ? m.filter((d) => d !== o) : [...m, o]
+      u.includes(o) ? u.filter((d) => d !== o) : [...u, o]
     );
   }, l = r.length > 0;
   return /* @__PURE__ */ e(
@@ -2051,24 +2051,24 @@ const Lr = (t) => {
       label: l ? `${t.label}: ${r.map(n).join(", ")}` : t.label,
       title: t.label,
       onClear: () => t.onChange(t.multiSelect ? [] : "all"),
-      menu: (o) => /* @__PURE__ */ e("div", { role: "listbox", className: "flex flex-col", children: t.options?.map((m) => /* @__PURE__ */ e(
+      menu: (o) => /* @__PURE__ */ e("div", { role: "listbox", className: "flex flex-col", children: t.options?.map((u) => /* @__PURE__ */ e(
         "button",
         {
           type: "button",
           role: "option",
-          "aria-selected": s(m.value),
+          "aria-selected": s(u.value),
           onClick: () => {
-            a(m.value), t.multiSelect || o();
+            a(u.value), t.multiSelect || o();
           },
           className: i(
             "flex cursor-pointer items-center gap-2 rounded-md px-2.5 py-1.5 text-left text-sm",
             "transition-colors duration-fast ease-out hover:bg-surface-hover",
             "focus-visible:outline-none focus-visible:focus-ring",
-            s(m.value) ? "font-medium text-text" : "text-text-muted"
+            s(u.value) ? "font-medium text-text" : "text-text-muted"
           ),
-          children: m.label
+          children: u.label
         },
-        m.value
+        u.value
       )) })
     }
   );
@@ -2080,102 +2080,102 @@ const Lr = (t) => {
   searchPlaceholder: a = "Search...",
   searchValue: l,
   onSearchChange: o,
-  filters: m = [],
+  filters: u = [],
   toolbarActions: d = [],
   paginated: v = !1,
   defaultPageSize: h = 10,
-  actions: u = [],
+  actions: m = [],
   onRowClick: b,
   selectable: g = !1,
   selectedRows: w = [],
   onSelectionChange: p,
-  getRowKey: x = (re, Y) => Y,
-  emptyContent: S,
-  footerSummary: _,
-  size: B = "md",
+  getRowKey: x = (ee, K) => K,
+  emptyContent: C,
+  footerSummary: E,
+  size: j = "md",
   hoverable: D = !0,
-  padding: J = "md",
-  className: V,
-  rowClassName: P,
-  headerBackground: q = !0
+  padding: U = "md",
+  className: q,
+  rowClassName: A,
+  headerBackground: R = !0
 }) => {
-  const [re, Y] = j(""), W = l !== void 0, ie = W ? l : re, k = o ?? Y, [f, z] = j({
+  const [ee, K] = F(""), G = l !== void 0, ie = G ? l : ee, k = o ?? K, [f, M] = F({
     column: null,
     direction: null
-  }), [y, $] = j({
+  }), [y, $] = F({
     page: 0,
     pageSize: h
-  }), N = ae(null), K = pe(() => {
-    let E = t;
-    if (s && !W && ie.trim()) {
-      const U = r.filter(
+  }), N = te(null), J = ge(() => {
+    let z = t;
+    if (s && !G && ie.trim()) {
+      const W = r.filter(
         (oe) => oe.searchable !== !1
-      ), se = ie.toLowerCase();
-      E = E.filter((oe) => U.some((F) => {
-        const ue = typeof F.accessor == "function" ? F.accessor(oe) : oe[F.accessor];
-        return String(ue || "").toLowerCase().includes(se);
+      ), ae = ie.toLowerCase();
+      z = z.filter((oe) => W.some((B) => {
+        const ue = typeof B.accessor == "function" ? B.accessor(oe) : oe[B.accessor];
+        return String(ue || "").toLowerCase().includes(ae);
       }));
     }
-    return m.forEach((U) => {
-      U.value && U.value !== "all" && (E = E.filter((se) => {
-        const oe = r.find((ue) => ue.id === U.id);
+    return u.forEach((W) => {
+      W.value && W.value !== "all" && (z = z.filter((ae) => {
+        const oe = r.find((ue) => ue.id === W.id);
         if (!oe) return !0;
-        const F = typeof oe.accessor == "function" ? oe.accessor(se) : se[oe.accessor];
-        return String(F || "") === U.value;
+        const B = typeof oe.accessor == "function" ? oe.accessor(ae) : ae[oe.accessor];
+        return String(B || "") === W.value;
       }));
-    }), E;
-  }, [t, ie, W, r, s, m]), ne = pe(() => {
-    if (!f.column || !f.direction) return K;
-    const E = r.find((U) => U.id === f.column);
-    return E ? [...K].sort((U, se) => {
-      const oe = typeof E.accessor == "function" ? E.accessor(U) : U[E.accessor], F = typeof E.accessor == "function" ? E.accessor(se) : se[E.accessor];
+    }), z;
+  }, [t, ie, G, r, s, u]), se = ge(() => {
+    if (!f.column || !f.direction) return J;
+    const z = r.find((W) => W.id === f.column);
+    return z ? [...J].sort((W, ae) => {
+      const oe = typeof z.accessor == "function" ? z.accessor(W) : W[z.accessor], B = typeof z.accessor == "function" ? z.accessor(ae) : ae[z.accessor];
       let ue = 0;
-      return oe < F ? ue = -1 : oe > F && (ue = 1), f.direction === "desc" ? -ue : ue;
-    }) : K;
-  }, [K, f, r]), ee = pe(() => {
-    if (!v) return ne;
-    const E = y.page * y.pageSize, U = E + y.pageSize;
-    return ne.slice(E, U);
-  }, [ne, y, v]), X = xe(
-    (E) => {
-      r.find((se) => se.id === E)?.sortable && z((se) => se.column !== E ? { column: E, direction: "asc" } : se.direction === "asc" ? { column: E, direction: "desc" } : { column: null, direction: null });
+      return oe < B ? ue = -1 : oe > B && (ue = 1), f.direction === "desc" ? -ue : ue;
+    }) : J;
+  }, [J, f, r]), re = ge(() => {
+    if (!v) return se;
+    const z = y.page * y.pageSize, W = z + y.pageSize;
+    return se.slice(z, W);
+  }, [se, y, v]), X = xe(
+    (z) => {
+      r.find((ae) => ae.id === z)?.sortable && M((ae) => ae.column !== z ? { column: z, direction: "asc" } : ae.direction === "asc" ? { column: z, direction: "desc" } : { column: null, direction: null });
     },
     [r]
-  ), I = xe((E) => {
-    $((U) => ({ ...U, page: E }));
-  }, []), R = xe(
-    (E, U) => {
+  ), P = xe((z) => {
+    $((W) => ({ ...W, page: z }));
+  }, []), H = xe(
+    (z, W) => {
       if (!p) return;
-      const se = x(E, 0);
-      p(U ? [...w, E] : w.filter(
-        (oe, F) => x(w[F], F) !== se
+      const ae = x(z, 0);
+      p(W ? [...w, z] : w.filter(
+        (oe, B) => x(w[B], B) !== ae
       ));
     },
     [w, p, x]
-  ), M = xe(
-    (E) => {
-      p && p(E ? [...ee] : []);
+  ), T = xe(
+    (z) => {
+      p && p(z ? [...re] : []);
     },
-    [ee, p]
+    [re, p]
   );
-  G(() => {
-    $((E) => ({ ...E, page: 0 }));
-  }, [ie, f]), G(() => {
-    $((E) => ({ ...E, page: 0 }));
-  }, [m.map((E) => E.value).join(",")]);
-  const C = ne.length, A = Math.ceil(C / y.pageSize), O = y.page * y.pageSize + 1, H = Math.min(O + y.pageSize - 1, C), T = ee.length > 0 && ee.every((E) => {
-    const U = x(E, 0);
+  Y(() => {
+    $((z) => ({ ...z, page: 0 }));
+  }, [ie, f]), Y(() => {
+    $((z) => ({ ...z, page: 0 }));
+  }, [u.map((z) => z.value).join(",")]);
+  const S = se.length, L = Math.ceil(S / y.pageSize), O = y.page * y.pageSize + 1, V = Math.min(O + y.pageSize - 1, S), _ = re.length > 0 && re.every((z) => {
+    const W = x(z, 0);
     return w.some(
-      (se, oe) => x(se, oe) === U
+      (ae, oe) => x(ae, oe) === W
     );
-  }), L = ee.some((E) => {
-    const U = x(E, 0);
+  }), I = re.some((z) => {
+    const W = x(z, 0);
     return w.some(
-      (se, oe) => x(se, oe) === U
+      (ae, oe) => x(ae, oe) === W
     );
-  }), Q = _r[J], le = q ? "bg-surface-sunk" : "bg-surface", de = i("text-text", Q), ge = s || m.length > 0 || d.length > 0, he = v && C > 0, Ie = he || _ !== void 0;
-  return /* @__PURE__ */ c("div", { className: i("flex min-w-0 flex-col", V), children: [
-    ge && /* @__PURE__ */ c("div", { className: "flex flex-wrap items-center gap-2 pb-3", children: [
+  }), Q = _r[U], le = R ? "bg-surface-sunk" : "bg-surface", de = i("text-text", Q), pe = s || u.length > 0 || d.length > 0, he = v && S > 0, Ie = he || E !== void 0;
+  return /* @__PURE__ */ c("div", { className: i("flex min-w-0 flex-col", q), children: [
+    pe && /* @__PURE__ */ c("div", { className: "flex flex-wrap items-center gap-2 pb-3", children: [
       s && /* @__PURE__ */ e(
         at,
         {
@@ -2185,8 +2185,8 @@ const Lr = (t) => {
           containerClassName: "w-full sm:w-66"
         }
       ),
-      m.map((E) => /* @__PURE__ */ e(Lr, { ...E }, E.id)),
-      d.length > 0 && /* @__PURE__ */ e(_e, { actions: d, className: "ml-auto" })
+      u.map((z) => /* @__PURE__ */ e(Lr, { ...z }, z.id)),
+      d.length > 0 && /* @__PURE__ */ e(Ne, { actions: d, className: "ml-auto" })
     ] }),
     /* @__PURE__ */ e("div", { className: "relative w-full overflow-x-auto rounded-lg ring-1 ring-border", children: /* @__PURE__ */ c("table", { ref: N, className: "min-w-full border-collapse text-base text-text", children: [
       /* @__PURE__ */ e("thead", { className: i(le, "h-control-lg"), children: /* @__PURE__ */ c("tr", { children: [
@@ -2194,13 +2194,13 @@ const Lr = (t) => {
           ye,
           {
             size: "sm",
-            checked: T,
-            indeterminate: L && !T,
-            onChange: (E) => M(E.target.checked),
+            checked: _,
+            indeterminate: I && !_,
+            onChange: (z) => T(z.target.checked),
             "aria-label": "Select all rows"
           }
         ) }),
-        r.map((E) => /* @__PURE__ */ e(
+        r.map((z) => /* @__PURE__ */ e(
           "th",
           {
             className: i(
@@ -2208,74 +2208,74 @@ const Lr = (t) => {
               "text-xs font-semibold uppercase tracking-label text-text-muted",
               "group",
               {
-                "text-left": E.align === "left" || !E.align,
-                "text-center": E.align === "center",
-                "text-right": E.align === "right",
-                "cursor-pointer select-none": E.sortable,
-                [`sticky left-0 ${le}`]: E.sticky === "left",
-                [`sticky right-0 ${le}`]: E.sticky === "right"
+                "text-left": z.align === "left" || !z.align,
+                "text-center": z.align === "center",
+                "text-right": z.align === "right",
+                "cursor-pointer select-none": z.sortable,
+                [`sticky left-0 ${le}`]: z.sticky === "left",
+                [`sticky right-0 ${le}`]: z.sticky === "right"
               }
             ),
-            style: { width: E.width },
-            onClick: () => E.sortable && X(E.id),
+            style: { width: z.width },
+            onClick: () => z.sortable && X(z.id),
             children: /* @__PURE__ */ c("div", { className: "flex items-center gap-1.5", children: [
-              E.headerCell ? E.headerCell() : E.header,
-              E.sortable && /* @__PURE__ */ e(
+              z.headerCell ? z.headerCell() : z.header,
+              z.sortable && /* @__PURE__ */ e(
                 Z,
                 {
-                  icon: f.column === E.id && f.direction === "desc" ? $e : St,
+                  icon: f.column === z.id && f.direction === "desc" ? $e : St,
                   size: "xs",
                   className: i(
                     "transition-opacity duration-fast ease-out",
-                    f.column === E.id ? "text-text opacity-100" : "text-text-subtle opacity-0 group-hover:opacity-100"
+                    f.column === z.id ? "text-text opacity-100" : "text-text-subtle opacity-0 group-hover:opacity-100"
                   )
                 }
               )
             ] })
           },
-          E.id
+          z.id
         )),
-        u.length > 0 && /* @__PURE__ */ e("th", { className: i(de, "w-10"), children: /* @__PURE__ */ e("span", { className: "sr-only", children: "Actions" }) })
+        m.length > 0 && /* @__PURE__ */ e("th", { className: i(de, "w-10"), children: /* @__PURE__ */ e("span", { className: "sr-only", children: "Actions" }) })
       ] }) }),
-      /* @__PURE__ */ e("tbody", { children: n ? Array.from({ length: Dr }).map((E, U) => /* @__PURE__ */ c("tr", { className: "animate-pulse border-t border-border-subtle", "aria-hidden": !0, children: [
+      /* @__PURE__ */ e("tbody", { children: n ? Array.from({ length: Dr }).map((z, W) => /* @__PURE__ */ c("tr", { className: "animate-pulse border-t border-border-subtle", "aria-hidden": !0, children: [
         g && /* @__PURE__ */ e("td", { className: i(de, "h-row-lg"), children: /* @__PURE__ */ e("span", { className: "block size-4 rounded-xs bg-surface-hover" }) }),
-        r.map((se, oe) => /* @__PURE__ */ e("td", { className: i(de, "h-row-lg"), style: { width: se.width }, children: /* @__PURE__ */ e(
+        r.map((ae, oe) => /* @__PURE__ */ e("td", { className: i(de, "h-row-lg"), style: { width: ae.width }, children: /* @__PURE__ */ e(
           "span",
           {
             className: "block h-3 rounded-xs bg-surface-hover",
-            style: { width: We[(U + oe) % We.length] }
+            style: { width: We[(W + oe) % We.length] }
           }
-        ) }, se.id)),
-        u.length > 0 && /* @__PURE__ */ e("td", { className: i(de, "h-row-lg") })
-      ] }, `skeleton-${U}`)) : ee.length === 0 ? /* @__PURE__ */ e("tr", { children: /* @__PURE__ */ e(
+        ) }, ae.id)),
+        m.length > 0 && /* @__PURE__ */ e("td", { className: i(de, "h-row-lg") })
+      ] }, `skeleton-${W}`)) : re.length === 0 ? /* @__PURE__ */ e("tr", { children: /* @__PURE__ */ e(
         "td",
         {
-          colSpan: r.length + (g ? 1 : 0) + (u.length > 0 ? 1 : 0),
+          colSpan: r.length + (g ? 1 : 0) + (m.length > 0 ? 1 : 0),
           className: i(
             de,
             "border-t border-border-subtle py-10 text-center text-text-muted"
           ),
-          children: S || "No data available"
+          children: C || "No data available"
         }
-      ) }) : ee.map((E, U) => {
-        const se = x(E, U), oe = w.some(
-          (F, ue) => x(F, ue) === se
+      ) }) : re.map((z, W) => {
+        const ae = x(z, W), oe = w.some(
+          (B, ue) => x(B, ue) === ae
         );
         return /* @__PURE__ */ c(
           "tr",
           {
             className: i(
-              $r[B],
+              $r[j],
               // Hairline above every row, including the first: it is
               // what separates the body from the column strip.
               "border-t border-border-subtle",
               D && "transition-colors duration-fast ease-out hover:bg-surface-hover",
               b && "cursor-pointer",
               oe && "bg-accent-soft",
-              P?.(E, U)
+              A?.(z, W)
             ),
-            onClick: (F) => {
-              F.stopPropagation(), b?.(E, U);
+            onClick: (B) => {
+              B.stopPropagation(), b?.(z, W);
             },
             children: [
               g && /* @__PURE__ */ e("td", { className: de, children: /* @__PURE__ */ e(
@@ -2283,98 +2283,98 @@ const Lr = (t) => {
                 {
                   size: "sm",
                   checked: oe,
-                  onClick: (F) => F.stopPropagation(),
-                  onChange: (F) => {
-                    F.stopPropagation(), R(E, F.target.checked);
+                  onClick: (B) => B.stopPropagation(),
+                  onChange: (B) => {
+                    B.stopPropagation(), H(z, B.target.checked);
                   },
                   "aria-label": "Select row"
                 }
               ) }),
-              r.map((F) => {
-                const ue = typeof F.accessor == "function" ? F.accessor(E) : E[F.accessor];
+              r.map((B) => {
+                const ue = typeof B.accessor == "function" ? B.accessor(z) : z[B.accessor];
                 return /* @__PURE__ */ e(
                   "td",
                   {
                     className: i(de, {
-                      "text-left": F.align === "left" || !F.align,
-                      "text-center": F.align === "center",
-                      "text-right": F.align === "right",
-                      "sticky left-0 bg-surface": F.sticky === "left",
-                      "sticky right-0 bg-surface": F.sticky === "right"
+                      "text-left": B.align === "left" || !B.align,
+                      "text-center": B.align === "center",
+                      "text-right": B.align === "right",
+                      "sticky left-0 bg-surface": B.sticky === "left",
+                      "sticky right-0 bg-surface": B.sticky === "right"
                     }),
-                    children: F.cell ? F.cell(ue, E, U) : String(ue || "")
+                    children: B.cell ? B.cell(ue, z, W) : String(ue || "")
                   },
-                  F.id
+                  B.id
                 );
               }),
-              u.length > 0 && /* @__PURE__ */ e("td", { className: de, children: /* @__PURE__ */ e(
+              m.length > 0 && /* @__PURE__ */ e("td", { className: de, children: /* @__PURE__ */ e(
                 Mr,
                 {
                   className: "rounded-md",
                   trigger: /* @__PURE__ */ e("span", { className: "grid size-7 place-items-center text-text-subtle", children: /* @__PURE__ */ e(Z, { icon: Et, size: "md", color: "current" }) }),
-                  options: u.map((F) => ({
-                    value: F.id,
-                    label: F.label,
-                    icon: F.icon,
-                    disabled: F.disabled?.(E)
+                  options: m.map((B) => ({
+                    value: B.id,
+                    label: B.label,
+                    icon: B.icon,
+                    disabled: B.disabled?.(z)
                   })),
-                  onSelect: (F) => {
-                    const ue = u.find(
-                      (dt) => dt.id === F
+                  onSelect: (B) => {
+                    const ue = m.find(
+                      (dt) => dt.id === B
                     );
-                    ue && ue.onClick(E, U);
+                    ue && ue.onClick(z, W);
                   },
                   placement: "bottom-end"
                 }
               ) })
             ]
           },
-          se
+          ae
         );
       }) })
     ] }) }),
     Ie && /* @__PURE__ */ c("div", { className: "flex flex-wrap items-center gap-3 px-1 pt-3 text-xs text-text-muted", children: [
-      /* @__PURE__ */ e("span", { className: "min-w-0 flex-1", children: _ ?? `Showing ${O}–${H} of ${C}` }),
+      /* @__PURE__ */ e("span", { className: "min-w-0 flex-1", children: E ?? `Showing ${O}–${V} of ${S}` }),
       he && /* @__PURE__ */ c("div", { className: "flex items-center gap-0.5", children: [
         /* @__PURE__ */ e(
-          te,
+          ne,
           {
             size: "xs",
             variant: "ghost",
             iconOnly: !0,
             "aria-label": "Previous page",
-            onClick: () => I(y.page - 1),
+            onClick: () => P(y.page - 1),
             disabled: y.page === 0,
-            children: /* @__PURE__ */ e(Z, { icon: Ce, size: "md", color: "current" })
+            children: /* @__PURE__ */ e(Z, { icon: Se, size: "md", color: "current" })
           }
         ),
-        Ar(y.page, A).map(
-          (E, U) => E === "gap" ? /* @__PURE__ */ e("span", { className: "px-1 text-text-subtle", children: "…" }, `gap-${U}`) : /* @__PURE__ */ e(
+        Ar(y.page, L).map(
+          (z, W) => z === "gap" ? /* @__PURE__ */ e("span", { className: "px-1 text-text-subtle", children: "…" }, `gap-${W}`) : /* @__PURE__ */ e(
             "button",
             {
               type: "button",
-              "aria-current": E === y.page ? "page" : void 0,
-              onClick: () => I(E),
+              "aria-current": z === y.page ? "page" : void 0,
+              onClick: () => P(z),
               className: i(
                 "h-control-xs min-w-6 cursor-pointer rounded-sm px-1.5 tabular-nums",
                 "transition-colors duration-fast ease-out",
                 "focus-visible:outline-none focus-visible:focus-ring",
-                E === y.page ? "bg-surface-sunk font-semibold text-text" : "text-text-muted hover:bg-surface-hover hover:text-text"
+                z === y.page ? "bg-surface-sunk font-semibold text-text" : "text-text-muted hover:bg-surface-hover hover:text-text"
               ),
-              children: E + 1
+              children: z + 1
             },
-            E
+            z
           )
         ),
         /* @__PURE__ */ e(
-          te,
+          ne,
           {
             size: "xs",
             variant: "ghost",
             iconOnly: !0,
             "aria-label": "Next page",
-            onClick: () => I(y.page + 1),
-            disabled: y.page >= A - 1,
+            onClick: () => P(y.page + 1),
+            disabled: y.page >= L - 1,
             children: /* @__PURE__ */ e(Z, { icon: De, size: "md", color: "current" })
           }
         )
@@ -2387,13 +2387,13 @@ const Lr = (t) => {
   onTabChange: n,
   className: s
 }) => {
-  const [a, l] = j(t[0]?.id || ""), o = r || a, m = (d) => {
+  const [a, l] = F(t[0]?.id || ""), o = r || a, u = (d) => {
     n ? n(d) : l(d);
   };
   return /* @__PURE__ */ e("div", { className: i("border-b border-border", s), children: /* @__PURE__ */ e("nav", { className: "-mb-px flex space-x-8", children: t.map((d) => /* @__PURE__ */ e(
     "button",
     {
-      onClick: () => !d.disabled && m(d.id),
+      onClick: () => !d.disabled && u(d.id),
       disabled: d.disabled,
       className: i(
         "border-b-2 py-2 px-1 text-sm font-medium transition-colors duration-fast",
@@ -2422,11 +2422,11 @@ const Lr = (t) => {
   size: l = "md",
   className: o
 }) => {
-  const [m, d] = j(
+  const [u, d] = F(
     r || n || t[0]?.id || ""
-  ), v = n || m, h = (p) => {
+  ), v = n || u, h = (p) => {
     s ? s(p) : d(p);
-  }, u = {
+  }, m = {
     activeTab: v,
     setActiveTab: h
   }, b = t.find((p) => p.id === v), g = i(
@@ -2439,11 +2439,11 @@ const Lr = (t) => {
     },
     o
   ), w = (p, x) => {
-    const S = "transition-colors duration-fast font-medium", _ = {
+    const C = "transition-colors duration-fast font-medium", E = {
       "text-xs px-2 py-1": l === "sm",
       "text-sm px-3 py-2": l === "md",
       "text-base px-4 py-3": l === "lg"
-    }, B = {
+    }, j = {
       // Default variant
       "border-b-2 -mb-px": a === "default",
       // Pills variant
@@ -2453,17 +2453,17 @@ const Lr = (t) => {
     }, D = {
       "opacity-50 cursor-not-allowed": p.disabled,
       "cursor-pointer": !p.disabled
-    }, J = x ? {
+    }, U = x ? {
       "border-accent-border text-text": a === "default" || a === "underline",
       "bg-surface text-text shadow-none": a === "pills"
-    } : {}, V = !x && !p.disabled ? {
+    } : {}, q = !x && !p.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 i(S, _, B, D, J, V);
+    return i(C, E, j, D, U, q);
   };
-  return /* @__PURE__ */ e(Ir.Provider, { value: u, children: /* @__PURE__ */ c("div", { children: [
+  return /* @__PURE__ */ e(Ir.Provider, { value: m, children: /* @__PURE__ */ c("div", { children: [
     /* @__PURE__ */ e("div", { className: g, role: "tablist", children: t.map((p) => /* @__PURE__ */ e(
       "button",
       {
@@ -2507,19 +2507,19 @@ function lt({
   closeOnBackdropClick: a = !0,
   closeOnEscape: l = !0,
   className: o,
-  backdropClassName: m,
+  backdropClassName: u,
   children: d,
   footer: v,
   showCloseButton: h = !0
 }) {
-  const u = ae(null), b = ae(null);
-  G(() => {
+  const m = te(null), b = te(null);
+  Y(() => {
     if (!t || !l) return;
     const w = (p) => {
       p.key === "Escape" && r();
     };
     return document.addEventListener("keydown", w), () => document.removeEventListener("keydown", w);
-  }, [t, l, r]), G(() => (t ? (b.current = document.activeElement, u.current && u.current.focus(), document.body.style.overflow = "hidden") : (b.current && b.current.focus(), document.body.style.overflow = ""), () => {
+  }, [t, l, r]), Y(() => (t ? (b.current = document.activeElement, m.current && m.current.focus(), document.body.style.overflow = "hidden") : (b.current && b.current.focus(), document.body.style.overflow = ""), () => {
     document.body.style.overflow = "";
   }), [t]);
   const g = (w) => {
@@ -2532,13 +2532,13 @@ function lt({
         "fixed inset-0 z-modal flex items-center justify-center p-4",
         "bg-scrim",
         // 'animate-fade-in',
-        m
+        u
       ),
       onClick: g,
       children: /* @__PURE__ */ c(
         "div",
         {
-          ref: u,
+          ref: m,
           className: i(
             "relative w-full bg-surface rounded-lg shadow-modal",
             // 'animate-scale-in',
@@ -2566,7 +2566,7 @@ function lt({
                   onClick: r,
                   className: "p-1 text-text-muted hover:text-text transition-colors",
                   "aria-label": "Close modal",
-                  children: /* @__PURE__ */ e(Z, { icon: we, size: "lg", color: "current" })
+                  children: /* @__PURE__ */ e(Z, { icon: ke, size: "lg", color: "current" })
                 }
               )
             ] }),
@@ -2586,202 +2586,202 @@ const jr = ({
   error: a,
   disabled: l,
   accept: o,
-  onListFiles: m,
+  onListFiles: u,
   onListMounts: d,
   onUploadFile: v,
   onDownloadFile: h,
-  onRegisterFile: u
+  onRegisterFile: m
 }) => {
-  const [b, g] = j(!1), [w, p] = j([]), [x, S] = j(null), [_, B] = j("/"), [D, J] = j([]), [V, P] = j(!1), [q, re] = j(""), [Y, W] = j(
+  const [b, g] = F(!1), [w, p] = F([]), [x, C] = F(null), [E, j] = F("/"), [D, U] = F([]), [q, A] = F(!1), [R, ee] = F(""), [K, G] = F(
     typeof t == "object" ? t : null
-  ), [ie, k] = j(!1), [f, z] = j(""), y = ae(null);
-  G(() => {
+  ), [ie, k] = F(!1), [f, M] = F(""), y = te(null);
+  Y(() => {
     b && $();
-  }, [b]), G(() => {
+  }, [b]), Y(() => {
     b && x && N();
-  }, [b, x, _, q]);
+  }, [b, x, E, R]);
   const $ = async () => {
-    P(!0);
+    A(!0);
     try {
-      const T = await d?.();
-      T?.data && p(T.data);
-    } catch (T) {
-      console.error("Failed to load mounts", T);
+      const _ = await d?.();
+      _?.data && p(_.data);
+    } catch (_) {
+      console.error("Failed to load mounts", _);
     } finally {
-      P(!1);
+      A(!1);
     }
   }, N = async () => {
     if (x) {
-      P(!0);
+      A(!0);
       try {
-        const T = await m?.({ mountId: x.id, name: q, path: _ });
-        T?.data && J(T.data);
-      } catch (T) {
-        console.error("Failed to load files", T);
+        const _ = await u?.({ mountId: x.id, name: R, path: E });
+        _?.data && U(_.data);
+      } catch (_) {
+        console.error("Failed to load files", _);
       } finally {
-        P(!1);
+        A(!1);
       }
     }
-  }, K = async (T) => {
-    const L = T.target.files?.[0];
-    if (L) {
-      P(!0);
+  }, J = async (_) => {
+    const I = _.target.files?.[0];
+    if (I) {
+      A(!0);
       try {
-        const Q = await L.arrayBuffer(), le = new Uint8Array(Q), de = {
+        const Q = await I.arrayBuffer(), le = new Uint8Array(Q), de = {
           id: `local-${Date.now()}`,
-          name: L.name,
+          name: I.name,
           type: "file",
           path: "/",
-          mimeType: L.type || "application/octet-stream",
-          size: L.size,
+          mimeType: I.type || "application/octet-stream",
+          size: I.size,
           mountId: "local",
-          providerKey: L.name,
+          providerKey: I.name,
           ownerId: "me"
         };
-        W(de), r(de, le), g(!1);
+        G(de), r(de, le), g(!1);
       } catch (Q) {
         console.error("Local file selection failed", Q);
       } finally {
-        P(!1);
+        A(!1);
       }
     }
-  }, ne = async (T) => {
-    const L = T.target.files?.[0];
-    if (!(!L || !x)) {
-      P(!0);
+  }, se = async (_) => {
+    const I = _.target.files?.[0];
+    if (!(!I || !x)) {
+      A(!0);
       try {
-        const Q = await L.arrayBuffer(), le = await v?.({
+        const Q = await I.arrayBuffer(), le = await v?.({
           file: new Uint8Array(Q),
-          filename: L.name,
-          mimeType: L.type || "application/octet-stream",
+          filename: I.name,
+          mimeType: I.type || "application/octet-stream",
           mountId: x.id,
-          path: _
+          path: E
         });
         if (le?.data) {
           const de = le.data;
-          W(de), r(de, new Uint8Array(Q)), g(!1);
+          G(de), r(de, new Uint8Array(Q)), g(!1);
         }
       } catch (Q) {
         console.error("Upload failed", Q);
       } finally {
-        P(!1);
+        A(!1);
       }
     }
-  }, ee = async () => {
+  }, re = async () => {
     if (!(!f || !x)) {
-      P(!0);
+      A(!0);
       try {
-        const T = `${_}${f}/`;
-        u && (await u({
+        const _ = `${E}${f}/`;
+        m && (await m({
           name: f,
           type: "folder",
-          path: _,
+          path: E,
           mimeType: "application/x-directory",
           size: 0,
           mountId: x.id,
-          providerKey: T,
+          providerKey: _,
           ownerId: "me"
-        }), await N()), k(!1), z("");
-      } catch (T) {
-        console.error("Failed to create folder", T);
+        }), await N()), k(!1), M("");
+      } catch (_) {
+        console.error("Failed to create folder", _);
       } finally {
-        P(!1);
+        A(!1);
       }
     }
-  }, X = async (T) => {
-    P(!0);
+  }, X = async (_) => {
+    A(!0);
     try {
-      const L = await h?.(T.id);
-      W(T), r(T, L), g(!1);
-    } catch (L) {
-      console.error("Failed to download file", L);
+      const I = await h?.(_.id);
+      G(_), r(_, I), g(!1);
+    } catch (I) {
+      console.error("Failed to download file", I);
     } finally {
-      P(!1);
+      A(!1);
     }
-  }, I = (T) => {
-    T.stopPropagation(), W(null), r(null);
-  }, R = pe(() => {
-    const T = /* @__PURE__ */ new Set(), L = [];
+  }, P = (_) => {
+    _.stopPropagation(), G(null), r(null);
+  }, H = ge(() => {
+    const _ = /* @__PURE__ */ new Set(), I = [];
     return D.forEach((Q) => {
       if (Q.type === "folder") {
-        Q.path === _ && T.add(Q.name);
+        Q.path === E && _.add(Q.name);
         return;
       }
-      const le = Q.providerKey || Q.name, ge = (_ ? le.substring(_.length) : le).split("/").filter((he) => he !== "");
-      ge.length > 1 ? T.add(ge[0]) : ge.length === 1 && L.push(Q);
+      const le = Q.providerKey || Q.name, pe = (E ? le.substring(E.length) : le).split("/").filter((he) => he !== "");
+      pe.length > 1 ? _.add(pe[0]) : pe.length === 1 && I.push(Q);
     }), {
-      folders: Array.from(T).sort(),
-      files: L.sort((Q, le) => Q.name.localeCompare(le.name))
+      folders: Array.from(_).sort(),
+      files: I.sort((Q, le) => Q.name.localeCompare(le.name))
     };
-  }, [D, _]), M = (T) => {
-    B((L) => `${L}${T}/`);
-  }, C = () => {
-    const T = _.split("/").filter((L) => L !== "");
-    T.pop(), T.length === 0 ? B("/") : B(`${T.join("/")}/`);
-  }, A = pe(() => {
-    const T = R.folders.map((L) => ({
-      id: `folder-${L}`,
-      name: L,
+  }, [D, E]), T = (_) => {
+    j((I) => `${I}${_}/`);
+  }, S = () => {
+    const _ = E.split("/").filter((I) => I !== "");
+    _.pop(), _.length === 0 ? j("/") : j(`${_.join("/")}/`);
+  }, L = ge(() => {
+    const _ = H.folders.map((I) => ({
+      id: `folder-${I}`,
+      name: I,
       type: "folder"
     }));
-    return R.files.forEach((L) => {
-      T.push({
-        ...L,
+    return H.files.forEach((I) => {
+      _.push({
+        ...I,
         type: "file"
       });
-    }), T;
-  }, [R]), O = [
+    }), _;
+  }, [H]), O = [
     {
       id: "name",
       header: "Name",
       accessor: "name",
-      cell: (T, L) => /* @__PURE__ */ c("div", { className: "flex items-center gap-2", children: [
+      cell: (_, I) => /* @__PURE__ */ c("div", { className: "flex items-center gap-2", children: [
         /* @__PURE__ */ e(
           Z,
           {
-            icon: L.type === "folder" ? Ve : Pe,
+            icon: I.type === "folder" ? Ve : Pe,
             size: "sm",
-            color: L.type === "folder" ? "warning" : "secondary"
+            color: I.type === "folder" ? "warning" : "secondary"
           }
         ),
-        /* @__PURE__ */ e("span", { className: i(L.type === "folder" && "font-medium"), children: T })
+        /* @__PURE__ */ e("span", { className: i(I.type === "folder" && "font-medium"), children: _ })
       ] })
     },
     {
       id: "type",
       header: "Type",
-      accessor: (T) => T.type === "folder" ? "Folder" : T.mimeType
+      accessor: (_) => _.type === "folder" ? "Folder" : _.mimeType
     },
     {
       id: "size",
       header: "Size",
-      accessor: (T) => T.type === "file" ? `${(T.size / 1024).toFixed(1)} KB` : "-"
+      accessor: (_) => _.type === "file" ? `${(_.size / 1024).toFixed(1)} KB` : "-"
     },
     {
       id: "actions",
       header: "",
       accessor: "id",
       align: "right",
-      cell: (T, L) => /* @__PURE__ */ e(
-        te,
+      cell: (_, I) => /* @__PURE__ */ e(
+        ne,
         {
           variant: "outline",
           onClick: (Q) => {
-            Q.stopPropagation(), L.type === "folder" ? M(L.name) : X(L);
+            Q.stopPropagation(), I.type === "folder" ? T(I.name) : X(I);
           },
-          loading: V && L.type === "file" && Y?.id === L.id,
-          children: L.type === "folder" ? "Open" : "Select"
+          loading: q && I.type === "file" && K?.id === I.id,
+          children: I.type === "folder" ? "Open" : "Select"
         }
       )
     }
-  ], H = [
+  ], V = [
     {
       id: "name",
       header: "Mount Name",
       accessor: "name",
-      cell: (T) => /* @__PURE__ */ c("div", { className: "flex items-center gap-2 font-medium", children: [
+      cell: (_) => /* @__PURE__ */ c("div", { className: "flex items-center gap-2 font-medium", children: [
         /* @__PURE__ */ e(Z, { icon: qe, size: "sm", color: "primary" }),
-        /* @__PURE__ */ e("span", { children: T })
+        /* @__PURE__ */ e("span", { children: _ })
       ] })
     },
     {
@@ -2789,7 +2789,7 @@ const jr = ({
       header: "",
       accessor: "id",
       align: "right",
-      cell: (T, L) => /* @__PURE__ */ e(te, { variant: "outline", onClick: () => S(L), children: "Open" })
+      cell: (_, I) => /* @__PURE__ */ e(ne, { variant: "outline", onClick: () => C(I), children: "Open" })
     }
   ];
   return /* @__PURE__ */ c("div", { className: "space-y-1", children: [
@@ -2805,14 +2805,14 @@ const jr = ({
           l && "opacity-50 cursor-not-allowed bg-surface-sunk"
         ),
         children: [
-          /* @__PURE__ */ e("div", { className: "flex-shrink-0", children: /* @__PURE__ */ e(Z, { icon: Y ? Pe : qe, color: Y ? "primary" : "secondary" }) }),
-          /* @__PURE__ */ e("div", { className: "flex-grow truncate", children: Y ? /* @__PURE__ */ e("span", { className: "text-sm text-text font-medium", children: Y.name }) : /* @__PURE__ */ e("span", { className: "text-sm text-text-muted", children: s }) }),
-          Y && !l && /* @__PURE__ */ e(
+          /* @__PURE__ */ e("div", { className: "flex-shrink-0", children: /* @__PURE__ */ e(Z, { icon: K ? Pe : qe, color: K ? "primary" : "secondary" }) }),
+          /* @__PURE__ */ e("div", { className: "flex-grow truncate", children: K ? /* @__PURE__ */ e("span", { className: "text-sm text-text font-medium", children: K.name }) : /* @__PURE__ */ e("span", { className: "text-sm text-text-muted", children: s }) }),
+          K && !l && /* @__PURE__ */ e(
             "button",
             {
-              onClick: I,
+              onClick: P,
               className: "p-1 hover:bg-surface-hover rounded",
-              children: /* @__PURE__ */ e(Z, { icon: we, size: "xs" })
+              children: /* @__PURE__ */ e(Z, { icon: ke, size: "xs" })
             }
           )
         ]
@@ -2824,7 +2824,7 @@ const jr = ({
       {
         open: b,
         onClose: () => {
-          g(!1), S(null), B("/"), k(!1);
+          g(!1), C(null), j("/"), k(!1);
         },
         title: x ? `Explorer: ${x.name}` : "Select Storage Mount",
         size: "lg",
@@ -2836,33 +2836,33 @@ const jr = ({
               {
                 id: "remote",
                 label: "Platform Storage",
-                content: /* @__PURE__ */ e("div", { className: "space-y-4", children: x ? /* @__PURE__ */ c(ke, { children: [
+                content: /* @__PURE__ */ e("div", { className: "space-y-4", children: x ? /* @__PURE__ */ c(Ce, { children: [
                   /* @__PURE__ */ c("div", { className: "flex flex-wrap items-center gap-2", children: [
                     /* @__PURE__ */ e(
-                      te,
+                      ne,
                       {
                         variant: "ghost",
                         onClick: () => {
-                          _ && _ !== "/" ? C() : S(null);
+                          E && E !== "/" ? S() : C(null);
                         },
                         leftIcon: /* @__PURE__ */ e(Z, { icon: zt, size: "xs" }),
-                        children: _ ? "Back" : "Back to Mounts"
+                        children: E ? "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: _ }) }),
+                    /* @__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: E }) }),
                     /* @__PURE__ */ e("div", { className: "flex-grow min-w-40", children: /* @__PURE__ */ e(
-                      Ne,
+                      we,
                       {
                         placeholder: "Search...",
-                        value: q,
-                        onChange: (T) => re(T.target.value),
+                        value: R,
+                        onChange: (_) => ee(_.target.value),
                         startIcon: /* @__PURE__ */ e(Ae, { size: 14 }),
                         fullWidth: !0
                       }
                     ) }),
                     /* @__PURE__ */ c("div", { className: "flex items-center gap-1", children: [
                       /* @__PURE__ */ e(
-                        te,
+                        ne,
                         {
                           variant: "outline",
                           onClick: () => k(!0),
@@ -2871,12 +2871,12 @@ const jr = ({
                         }
                       ),
                       /* @__PURE__ */ e(
-                        te,
+                        ne,
                         {
                           variant: "primary",
                           onClick: () => y.current?.click(),
                           leftIcon: /* @__PURE__ */ e(Z, { icon: Tt, size: "xs" }),
-                          loading: V,
+                          loading: q,
                           children: "Upload"
                         }
                       ),
@@ -2886,7 +2886,7 @@ const jr = ({
                           type: "file",
                           className: "hidden",
                           ref: y,
-                          onChange: ne,
+                          onChange: se,
                           accept: o
                         }
                       )
@@ -2895,35 +2895,35 @@ const jr = ({
                   ie && /* @__PURE__ */ c("div", { className: "flex items-center gap-2 p-3 bg-surface-sunk rounded-lg border border-border", children: [
                     /* @__PURE__ */ e(Z, { icon: Ve, size: "sm", color: "warning" }),
                     /* @__PURE__ */ e(
-                      Ne,
+                      we,
                       {
                         placeholder: "Folder name",
                         value: f,
-                        onChange: (T) => z(T.target.value),
+                        onChange: (_) => M(_.target.value),
                         autoFocus: !0
                       }
                     ),
-                    /* @__PURE__ */ e(te, { onClick: ee, loading: V, children: "Create" }),
-                    /* @__PURE__ */ e(te, { variant: "ghost", onClick: () => k(!1), children: "Cancel" })
+                    /* @__PURE__ */ e(ne, { onClick: re, loading: q, children: "Create" }),
+                    /* @__PURE__ */ e(ne, { variant: "ghost", onClick: () => k(!1), children: "Cancel" })
                   ] }),
                   /* @__PURE__ */ e("div", { className: "max-h-100 overflow-auto rounded-lg border border-border", children: /* @__PURE__ */ e(
                     Ke,
                     {
-                      data: A,
+                      data: L,
                       columns: O,
-                      loading: V,
+                      loading: q,
                       emptyContent: "This folder is empty",
-                      onRowClick: (T) => T.type === "folder" ? M(T.name) : X(T)
+                      onRowClick: (_) => _.type === "folder" ? T(_.name) : X(_)
                     }
                   ) })
                 ] }) : /* @__PURE__ */ e("div", { className: "max-h-100 overflow-auto rounded-lg border border-border", children: /* @__PURE__ */ e(
                   Ke,
                   {
                     data: w,
-                    columns: H,
-                    loading: V,
+                    columns: V,
+                    loading: q,
                     emptyContent: "No storage mounts configured",
-                    onRowClick: (T) => S(T)
+                    onRowClick: (_) => C(_)
                   }
                 ) }) })
               },
@@ -2939,15 +2939,15 @@ const jr = ({
                     " be uploaded to platform storage."
                   ] }),
                   /* @__PURE__ */ c("label", { className: "cursor-pointer", children: [
-                    /* @__PURE__ */ e(te, { variant: "primary", size: "lg", loading: V, className: "pointer-events-none", children: "Browse Local File" }),
+                    /* @__PURE__ */ e(ne, { variant: "primary", size: "lg", loading: q, className: "pointer-events-none", children: "Browse Local File" }),
                     /* @__PURE__ */ e(
                       "input",
                       {
                         type: "file",
                         className: "hidden",
-                        onChange: K,
+                        onChange: J,
                         accept: o,
-                        disabled: V
+                        disabled: q
                       }
                     )
                   ] })
@@ -2973,11 +2973,11 @@ const jr = ({
     fullWidth: a = !1,
     loading: l = !1,
     containerClassName: o,
-    labelClassName: m,
+    labelClassName: u,
     className: d,
     id: v,
     rows: h = 4,
-    ...u
+    ...m
   }, b) => {
     const g = ce.useId(), w = v || `textarea-${g}`, p = !!n, x = n || r ? `${w}-description` : void 0;
     return /* @__PURE__ */ c("div", { className: i("flex flex-col", a && "w-full", o), children: [
@@ -2988,7 +2988,7 @@ const jr = ({
           className: i(
             rt,
             p ? "text-danger-fg" : "text-text-muted",
-            m
+            u
           ),
           children: t
         }
@@ -3009,7 +3009,7 @@ const jr = ({
               st(p),
               d
             ),
-            ...u
+            ...m
           }
         ),
         l && /* @__PURE__ */ e(
@@ -3089,8 +3089,8 @@ function Rr(t, r, n) {
   const s = r.split("."), a = Array.isArray(t) ? [...t] : { ...t };
   let l = a;
   for (let o = 0; o < s.length - 1; o++) {
-    const m = s[o], d = l[m];
-    l[m] = d && typeof d == "object" ? Array.isArray(d) ? [...d] : { ...d } : {}, l = l[m];
+    const u = s[o], d = l[u];
+    l[u] = d && typeof d == "object" ? Array.isArray(d) ? [...d] : { ...d } : {}, l = l[u];
   }
   return l[s[s.length - 1]] = n, a;
 }
@@ -3126,22 +3126,22 @@ const as = ({
   onChange: a,
   transform: l,
   validate: o,
-  submitButton: m = { label: "Submit", variant: "primary" },
+  submitButton: u = { label: "Submit", variant: "primary" },
   cancelButton: d = { label: "Cancel", variant: "outline" },
   showButtons: v = !0,
   layout: h = "vertical",
-  size: u = "md",
+  size: m = "md",
   loading: b = !1,
   className: g,
   ref: w,
   sdk: p
 }) => {
-  const [x, S] = j(r || {}), [_, B] = j({}), [D, J] = j({});
-  G(() => {
-    r && S({ ...r });
+  const [x, C] = F(r || {}), [E, j] = F({}), [D, U] = F({});
+  Y(() => {
+    r && C({ ...r });
   }, [r]);
-  const V = xe(
-    (k, f, z) => {
+  const q = xe(
+    (k, f, M) => {
       const y = t.flatMap(($) => $.items).find(($) => $.name === k);
       if (!y) return null;
       if (y.required && (f == null || f === ""))
@@ -3154,48 +3154,48 @@ const as = ({
         if (Array.isArray(f) && y.arrayFields) {
           const $ = [];
           let N = !1;
-          if (f.forEach((K, ne) => {
-            const ee = {};
+          if (f.forEach((J, se) => {
+            const re = {};
             for (const X of y.arrayFields) {
-              const I = K?.[X.name];
-              if (X.required && (I == null || I === ""))
-                ee[X.name] = `${X.label} is required`, N = !0;
+              const P = J?.[X.name];
+              if (X.required && (P == null || P === ""))
+                re[X.name] = `${X.label} is required`, N = !0;
               else if (X.validator) {
-                const R = X.validator(I, K);
-                R && (ee[X.name] = R, N = !0);
+                const H = X.validator(P, J);
+                H && (re[X.name] = H, N = !0);
               }
             }
-            $[ne] = ee;
+            $[se] = re;
           }), N)
             return JSON.stringify($);
         }
       }
-      return y.validator ? y.validator(f, z) : null;
+      return y.validator ? y.validator(f, M) : null;
     },
     [t]
-  ), P = xe(
+  ), A = xe(
     (k, f) => {
-      let z = Rr(
+      let M = Rr(
         x,
         k,
         f
       );
-      t.flatMap((N) => N.items).find((N) => N.name === k)?.removeIfEmpty && (f == null || f === "") && (z = Hr(z, k)), S(z), J((N) => ({ ...N, [k]: !0 }));
-      const $ = V(k, f, z);
-      B((N) => ({
+      t.flatMap((N) => N.items).find((N) => N.name === k)?.removeIfEmpty && (f == null || f === "") && (M = Hr(M, k)), C(M), U((N) => ({ ...N, [k]: !0 }));
+      const $ = q(k, f, M);
+      j((N) => ({
         ...N,
         [k]: $ || ""
-      })), a?.(z, k);
+      })), a?.(M, k);
     },
-    [x, t, V, a]
-  ), q = xe(
+    [x, t, q, a]
+  ), R = xe(
     async (k) => {
       if (k.preventDefault(), b) return;
-      const f = {}, z = t.flatMap(($) => $.items);
-      for (const $ of z) {
+      const f = {}, M = t.flatMap(($) => $.items);
+      for (const $ of M) {
         if ($.hidden || $.conditional && !$.conditional(x))
           continue;
-        const N = V(
+        const N = q(
           $.name,
           Je(x, $.name),
           x
@@ -3206,15 +3206,15 @@ const as = ({
         const $ = o(x);
         $ && Object.assign(f, $);
       }
-      if (B(f), Object.keys(f).some(($) => f[$]))
+      if (j(f), Object.keys(f).some(($) => f[$]))
         return;
       const y = l ? l(x) : x;
       await n?.(x, y);
     },
-    [x, t, V, o, l, n, b]
-  ), re = xe(
+    [x, t, q, o, l, n, b]
+  ), ee = xe(
     (k) => {
-      const f = Je(x, k.name), z = D[k.name] ? _[k.name] : void 0, y = k.disabled || b, $ = {
+      const f = Je(x, k.name), M = D[k.name] ? E[k.name] : void 0, y = k.disabled || b, $ = {
         value: f || "",
         disabled: y,
         required: k.required,
@@ -3230,14 +3230,14 @@ const as = ({
         case "url":
         case "color":
           return /* @__PURE__ */ e(
-            Ne,
+            we,
             {
               ...$,
-              onChange: (N) => P(k.name, N.target.value),
+              onChange: (N) => A(k.name, N.target.value),
               type: k.textType || k.type,
               ...Ge(k.autocomplete),
-              error: z,
-              size: u
+              error: M,
+              size: m
             }
           );
         case "textarea":
@@ -3245,18 +3245,18 @@ const as = ({
             Be,
             {
               ...$,
-              onChange: (N) => P(k.name, N.target.value),
+              onChange: (N) => A(k.name, N.target.value),
               rows: k.rows ?? 4,
-              error: z,
-              size: u
+              error: M,
+              size: m
             }
           );
         case "select":
           return /* @__PURE__ */ e(
-            Te,
+            _e,
             {
               ...$,
-              onChange: (N) => P(k.name, N),
+              onChange: (N) => A(k.name, N),
               options: (k.options || []).map((N) => ({
                 ...N,
                 value: String(N.value)
@@ -3264,8 +3264,8 @@ const as = ({
               searchable: k.searchable,
               multiple: k.multiple,
               allowCreate: k.allowCreate,
-              error: z,
-              size: u
+              error: M,
+              size: m
             }
           );
         // A short, fixed set of mutually exclusive values — priority, a scope,
@@ -3277,12 +3277,12 @@ const as = ({
             {
               "aria-label": k.label,
               value: f == null ? "" : String(f),
-              onChange: (N) => P(k.name, N),
+              onChange: (N) => A(k.name, N),
               options: (k.options || []).map((N) => ({
                 value: String(N.value),
                 label: N.label
               })),
-              size: u === "sm" ? "sm" : "md",
+              size: m === "sm" ? "sm" : "md",
               className: k.disabled ? "pointer-events-none opacity-50" : void 0
             }
           );
@@ -3293,8 +3293,8 @@ const as = ({
               ...$,
               label: k.label,
               checked: !!f,
-              onChange: (N) => P(k.name, N.target.checked),
-              size: u
+              onChange: (N) => A(k.name, N.target.checked),
+              size: m
             }
           );
         case "radio":
@@ -3310,7 +3310,7 @@ const as = ({
                     name: k.name,
                     value: N.value,
                     checked: f === N.value,
-                    onChange: () => P(k.name, N.value),
+                    onChange: () => A(k.name, N.value),
                     disabled: y || N.disabled,
                     className: "size-checkbox shrink-0 rounded-xs border border-border-strong bg-surface-input accent-accent focus-visible:outline-none focus-visible:focus-ring"
                   }
@@ -3326,8 +3326,8 @@ const as = ({
             {
               ...$,
               value: f ? new Date(f) : null,
-              onChange: (N) => P(k.name, N),
-              size: u
+              onChange: (N) => A(k.name, N),
+              size: m
             }
           );
         case "file":
@@ -3336,8 +3336,8 @@ const as = ({
             {
               ...$,
               value: f,
-              onChange: (N) => P(k.name, N),
-              error: z,
+              onChange: (N) => A(k.name, N),
+              error: M,
               onListFiles: (N) => p?.http.invoke({
                 method: "POST",
                 action: "storage.file.list",
@@ -3368,67 +3368,67 @@ const as = ({
             wr,
             {
               value: f || {},
-              onChange: (N) => P(k.name, N),
+              onChange: (N) => A(k.name, N),
               onListFolders: () => p?.http.invoke({
                 method: "GET",
                 action: "storage.mount"
               }),
               disabled: y,
-              size: u,
+              size: m,
               placeholder: k.placeholder
             }
           );
         case "custom":
           return k.customComponent?.({
             value: f,
-            onChange: (N) => P(k.name, N),
-            error: z,
+            onChange: (N) => A(k.name, N),
+            error: M,
             disabled: y
           });
         case "array": {
           const N = f || [];
-          let K = [];
-          if (typeof z == "string" && z.startsWith("["))
+          let J = [];
+          if (typeof M == "string" && M.startsWith("["))
             try {
-              K = JSON.parse(z);
+              J = JSON.parse(M);
             } catch {
             }
-          const ne = () => {
-            P(k.name, [...N, {}]);
-          }, ee = (I) => {
-            P(
+          const se = () => {
+            A(k.name, [...N, {}]);
+          }, re = (P) => {
+            A(
               k.name,
-              N.filter((R, M) => M !== I)
+              N.filter((H, T) => T !== P)
             );
-          }, X = (I, R, M) => {
-            const C = [...N];
-            C[I] = {
-              ...C[I],
-              [R]: M
-            }, P(k.name, C);
+          }, X = (P, H, T) => {
+            const S = [...N];
+            S[P] = {
+              ...S[P],
+              [H]: T
+            }, A(k.name, S);
           };
           return /* @__PURE__ */ c("div", { className: "flex flex-col gap-2", children: [
-            N.map((I, R) => /* @__PURE__ */ c("div", { className: "flex items-start gap-2", children: [
-              /* @__PURE__ */ e("div", { className: "grid flex-1 gap-2 sm:grid-cols-2", children: k.arrayFields?.map((M) => {
-                const C = K?.[R]?.[M.name];
+            N.map((P, H) => /* @__PURE__ */ c("div", { className: "flex items-start gap-2", children: [
+              /* @__PURE__ */ e("div", { className: "grid flex-1 gap-2 sm:grid-cols-2", children: k.arrayFields?.map((T) => {
+                const S = J?.[H]?.[T.name];
                 return /* @__PURE__ */ c(
                   "div",
                   {
                     className: "flex flex-col gap-1",
                     children: [
-                      R === 0 && /* @__PURE__ */ c("label", { className: "block text-xs font-semibold uppercase tracking-label text-text-subtle", children: [
-                        M.label,
-                        M.required && /* @__PURE__ */ e("span", { className: "ml-1 text-danger-fg", children: "*" })
+                      H === 0 && /* @__PURE__ */ c("label", { className: "block text-xs font-semibold uppercase tracking-label text-text-subtle", children: [
+                        T.label,
+                        T.required && /* @__PURE__ */ e("span", { className: "ml-1 text-danger-fg", children: "*" })
                       ] }),
                       (() => {
-                        const A = {
-                          value: I?.[M.name] || "",
+                        const L = {
+                          value: P?.[T.name] || "",
                           disabled: y,
-                          required: M.required,
-                          placeholder: M.placeholder,
-                          ...M.fieldProps
+                          required: T.required,
+                          placeholder: T.placeholder,
+                          ...T.fieldProps
                         };
-                        switch (M.type) {
+                        switch (T.type) {
                           case "text":
                           case "email":
                           case "password":
@@ -3436,74 +3436,74 @@ const as = ({
                           case "tel":
                           case "url":
                             return /* @__PURE__ */ e(
-                              Ne,
+                              we,
                               {
-                                ...A,
+                                ...L,
                                 onChange: (O) => X(
-                                  R,
-                                  M.name,
+                                  H,
+                                  T.name,
                                   O.target.value
                                 ),
-                                type: M.textType || M.type,
-                                ...Ge(M.autocomplete),
-                                error: C,
-                                size: u
+                                type: T.textType || T.type,
+                                ...Ge(T.autocomplete),
+                                error: S,
+                                size: m
                               }
                             );
                           case "textarea":
                             return /* @__PURE__ */ e(
                               Be,
                               {
-                                ...A,
+                                ...L,
                                 onChange: (O) => X(
-                                  R,
-                                  M.name,
+                                  H,
+                                  T.name,
                                   O.target.value
                                 ),
-                                rows: M.rows ?? 4,
-                                error: C,
-                                size: u
+                                rows: T.rows ?? 4,
+                                error: S,
+                                size: m
                               }
                             );
                           case "select":
                             return /* @__PURE__ */ e(
-                              Te,
+                              _e,
                               {
-                                ...A,
+                                ...L,
                                 onChange: (O) => X(
-                                  R,
-                                  M.name,
+                                  H,
+                                  T.name,
                                   O
                                 ),
-                                options: (M.options || []).map(
+                                options: (T.options || []).map(
                                   (O) => ({
                                     ...O,
                                     value: String(O.value)
                                   })
                                 ),
-                                searchable: M.searchable,
-                                multiple: M.multiple,
-                                allowCreate: M.allowCreate,
-                                error: C,
-                                size: u
+                                searchable: T.searchable,
+                                multiple: T.multiple,
+                                allowCreate: T.allowCreate,
+                                error: S,
+                                size: m
                               }
                             );
                           case "checkbox":
                             return /* @__PURE__ */ e(
                               ye,
                               {
-                                ...A,
-                                checked: !!I?.[M.name],
+                                ...L,
+                                checked: !!P?.[T.name],
                                 onChange: (O) => X(
-                                  R,
-                                  M.name,
+                                  H,
+                                  T.name,
                                   O.target.checked
                                 ),
-                                size: u
+                                size: m
                               }
                             );
                           case "radio":
-                            return /* @__PURE__ */ e("div", { className: "flex flex-col gap-2", children: M.options?.map((O) => /* @__PURE__ */ c(
+                            return /* @__PURE__ */ e("div", { className: "flex flex-col gap-2", children: T.options?.map((O) => /* @__PURE__ */ c(
                               "label",
                               {
                                 className: "flex cursor-pointer items-center gap-2 text-base text-text",
@@ -3512,12 +3512,12 @@ const as = ({
                                     "input",
                                     {
                                       type: "radio",
-                                      name: `${k.name}.${R}.${M.name}`,
+                                      name: `${k.name}.${H}.${T.name}`,
                                       value: O.value,
-                                      checked: I?.[M.name] === O.value,
+                                      checked: P?.[T.name] === O.value,
                                       onChange: () => X(
-                                        R,
-                                        M.name,
+                                        H,
+                                        T.name,
                                         O.value
                                       ),
                                       disabled: y || O.disabled,
@@ -3530,30 +3530,30 @@ const as = ({
                               O.value
                             )) });
                           case "date": {
-                            const O = I?.[M.name];
+                            const O = P?.[T.name];
                             return /* @__PURE__ */ e(
                               Fe,
                               {
-                                ...A,
+                                ...L,
                                 value: O ? new Date(O) : null,
-                                onChange: (H) => X(
-                                  R,
-                                  M.name,
-                                  H
+                                onChange: (V) => X(
+                                  H,
+                                  T.name,
+                                  V
                                 ),
-                                size: u
+                                size: m
                               }
                             );
                           }
                           case "custom":
-                            return M.customComponent?.({
-                              value: I?.[M.name],
+                            return T.customComponent?.({
+                              value: P?.[T.name],
                               onChange: (O) => X(
-                                R,
-                                M.name,
+                                H,
+                                T.name,
                                 O
                               ),
-                              error: C,
+                              error: S,
                               disabled: y
                             });
                           // Add other field types here as needed
@@ -3561,38 +3561,38 @@ const as = ({
                             return /* @__PURE__ */ c("p", { children: [
                               "Unsupported field type in array:",
                               " ",
-                              M.type
+                              T.type
                             ] });
                         }
                       })(),
-                      C && /* @__PURE__ */ e("p", { className: "text-xs text-danger-fg", children: C })
+                      S && /* @__PURE__ */ e("p", { className: "text-xs text-danger-fg", children: S })
                     ]
                   },
-                  M.name
+                  T.name
                 );
               }) }),
               /* @__PURE__ */ e(
-                te,
+                ne,
                 {
                   type: "button",
                   iconOnly: !0,
                   variant: "ghost",
                   size: "md",
                   "aria-label": `${k.label} verwijderen`,
-                  onClick: () => ee(R),
+                  onClick: () => re(H),
                   disabled: y,
-                  className: i("shrink-0", R === 0 && "mt-5"),
+                  className: i("shrink-0", H === 0 && "mt-5"),
                   children: /* @__PURE__ */ e(_t, { className: "size-icon-md" })
                 }
               )
-            ] }, R)),
+            ] }, H)),
             /* @__PURE__ */ c(
-              te,
+              ne,
               {
                 type: "button",
                 variant: "secondary",
                 leftIcon: /* @__PURE__ */ e($t, { className: "size-icon-sm" }),
-                onClick: ne,
+                onClick: se,
                 disabled: y,
                 children: [
                   k.label,
@@ -3606,14 +3606,14 @@ const as = ({
           return null;
       }
     },
-    [x, D, _, b, u, P]
-  ), Y = xe(
+    [x, D, E, b, m, A]
+  ), K = xe(
     (k) => {
       if (k.conditional && !k.conditional(x))
         return null;
       const f = k.items.filter((y) => !(y.hidden || y.conditional && !y.conditional(x)));
       if (f.length === 0) return null;
-      const z = i(
+      const M = i(
         k.layout === "flex" ? "flex flex-wrap gap-3.5" : "grid gap-3.5",
         k.layout !== "flex" && {
           "grid-cols-1": !k.columns || k.columns === 1,
@@ -3633,8 +3633,8 @@ const as = ({
             title: k.title,
             description: k.description,
             className: "not-last:border-b not-last:border-border-subtle",
-            children: /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e("div", { className: z, children: f.map((y) => {
-              const $ = D[y.name] ? _[y.name] : void 0;
+            children: /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e("div", { className: M, children: f.map((y) => {
+              const $ = D[y.name] ? E[y.name] : void 0;
               return /* @__PURE__ */ c(
                 "div",
                 {
@@ -3651,7 +3651,7 @@ const as = ({
                       y.label,
                       y.required && /* @__PURE__ */ e("span", { className: "ml-1 text-danger-fg", children: "*" })
                     ] }),
-                    re(y),
+                    ee(y),
                     y.help && !$ && /* @__PURE__ */ e("p", { className: "text-xs leading-4 text-text-subtle", children: y.help })
                   ]
                 },
@@ -3663,23 +3663,23 @@ const as = ({
         )
       );
     },
-    [x, D, _, re]
-  ), W = i(
+    [x, D, E, ee]
+  ), G = i(
     {
-      "max-w-settings": u === "sm",
-      "max-w-form": u === "md",
-      "max-w-6xl": u === "lg",
-      "max-w-full": u === "full"
+      "max-w-settings": m === "sm",
+      "max-w-form": m === "md",
+      "max-w-6xl": m === "lg",
+      "max-w-full": m === "full"
     },
     g
-  ), ie = u === "full" ? "md" : u;
-  return /* @__PURE__ */ c("form", { ref: w, onSubmit: q, className: W, children: [
+  ), ie = m === "full" ? "md" : m;
+  return /* @__PURE__ */ c("form", { ref: w, onSubmit: R, className: G, children: [
     !v && /* @__PURE__ */ e("button", { type: "submit", className: "hidden", tabIndex: -1, "aria-hidden": !0 }),
-    /* @__PURE__ */ e("div", { className: "flex flex-col", children: t.map(Y) }),
-    v && /* @__PURE__ */ e("div", { className: "flex items-center gap-2 border-t border-border-subtle py-4", children: /* @__PURE__ */ c(ke, { children: [
+    /* @__PURE__ */ e("div", { className: "flex flex-col", children: t.map(K) }),
+    v && /* @__PURE__ */ e("div", { className: "flex items-center gap-2 border-t border-border-subtle py-4", children: /* @__PURE__ */ c(Ce, { children: [
       /* @__PURE__ */ e("div", { className: "ml-auto" }),
       s && /* @__PURE__ */ e(
-        te,
+        ne,
         {
           type: "button",
           variant: d.variant ?? "ghost",
@@ -3691,15 +3691,15 @@ const as = ({
         }
       ),
       /* @__PURE__ */ e(
-        te,
+        ne,
         {
           type: "submit",
-          variant: m.variant,
-          size: m.size || ie,
-          disabled: m.disabled || b,
+          variant: u.variant,
+          size: u.size || ie,
+          disabled: u.disabled || b,
           loading: b,
-          className: m.className,
-          children: m.label
+          className: u.className,
+          children: u.label
         }
       )
     ] }) })
@@ -3713,7 +3713,7 @@ function ls({
   cancelLabel: a = "Annuleren",
   tone: l = "default",
   loading: o = !1,
-  onConfirm: m,
+  onConfirm: u,
   onCancel: d
 }) {
   return /* @__PURE__ */ e(
@@ -3724,12 +3724,12 @@ function ls({
       title: r,
       size: "sm",
       footer: /* @__PURE__ */ c("div", { className: "flex w-full items-center justify-end gap-2", children: [
-        /* @__PURE__ */ e(te, { variant: "ghost", onClick: d, disabled: o, children: a }),
+        /* @__PURE__ */ e(ne, { variant: "ghost", onClick: d, disabled: o, children: a }),
         /* @__PURE__ */ e(
-          te,
+          ne,
           {
             variant: l === "danger" ? "destructive" : "primary",
-            onClick: m,
+            onClick: u,
             loading: o,
             children: s
           }
@@ -3771,7 +3771,7 @@ function Kr({
   dismissible: a = !1,
   onDismiss: l,
   className: o,
-  children: m,
+  children: u,
   ...d
 }) {
   return /* @__PURE__ */ c(
@@ -3797,15 +3797,15 @@ function Kr({
             )
           }
         ),
-        s && /* @__PURE__ */ e("span", { className: i("flex-shrink-0", m && "mr-1"), children: s }),
-        m,
+        s && /* @__PURE__ */ e("span", { className: i("flex-shrink-0", u && "mr-1"), children: s }),
+        u,
         a && l && /* @__PURE__ */ e(
           "button",
           {
             onClick: l,
             className: "ml-1.5 flex-shrink-0 hover:opacity-70 transition-opacity",
             "aria-label": "Remove badge",
-            children: /* @__PURE__ */ e(Z, { icon: we, size: "xs", color: "current" })
+            children: /* @__PURE__ */ e(Z, { icon: ke, size: "xs", color: "current" })
           }
         )
       ]
@@ -3893,10 +3893,10 @@ function Re({
   children: a,
   className: l,
   showTableSkeleton: o = !1,
-  tableColumns: m,
+  tableColumns: u,
   tableRows: d
 }) {
-  const v = r ?? (o ? "table" : "text"), h = n ?? d ?? Jr[v], u = s ?? m ?? (v === "cards" ? 3 : 6), b = /* @__PURE__ */ e("div", { className: i("w-full animate-pulse", l), "aria-hidden": !0, children: a ?? /* @__PURE__ */ e(Gr, { shape: v, rows: h, columns: u }) });
+  const v = r ?? (o ? "table" : "text"), h = n ?? d ?? Jr[v], m = s ?? u ?? (v === "cards" ? 3 : 6), b = /* @__PURE__ */ e("div", { className: i("w-full animate-pulse", l), "aria-hidden": !0, children: a ?? /* @__PURE__ */ e(Gr, { shape: v, rows: h, columns: m }) });
   return t === "inline" ? b : /* @__PURE__ */ e("main", { className: "flex-1 bg-surface p-6", children: b });
 }
 const Yr = {
@@ -3911,7 +3911,7 @@ function os({
   actions: a,
   card: l = !1,
   className: o,
-  ...m
+  ...u
 }) {
   return /* @__PURE__ */ c(
     "div",
@@ -3921,7 +3921,7 @@ function os({
         l && "rounded-lg border border-border bg-surface px-11 py-9 shadow-overlay",
         o
       ),
-      ...m,
+      ...u,
       children: [
         t != null && /* @__PURE__ */ e("span", { className: i("flex size-disc items-center justify-center rounded-full text-2xl", Yr[r]), children: t }),
         /* @__PURE__ */ e("div", { className: "text-lg font-semibold text-text", children: n }),
@@ -4103,7 +4103,7 @@ function ms({
   className: a
 }) {
   const l = t.indexOf(r), o = { role: s ? "group" : void 0, "aria-label": s, "aria-hidden": s ? void 0 : !0 };
-  return n === "dots" ? /* @__PURE__ */ e("div", { ...o, className: i("flex items-center gap-1.5", a), children: t.map((m, d) => /* @__PURE__ */ e(
+  return n === "dots" ? /* @__PURE__ */ e("div", { ...o, className: i("flex items-center gap-1.5", a), children: t.map((u, d) => /* @__PURE__ */ e(
     "span",
     {
       className: i(
@@ -4113,8 +4113,8 @@ function ms({
         d > l && "bg-border"
       )
     },
-    m
-  )) }) : /* @__PURE__ */ e("div", { ...o, className: i("flex items-center gap-2", a), children: t.map((m, d) => /* @__PURE__ */ c("div", { className: "flex items-center gap-2", children: [
+    u
+  )) }) : /* @__PURE__ */ e("div", { ...o, className: i("flex items-center gap-2", a), children: t.map((u, d) => /* @__PURE__ */ c("div", { className: "flex items-center gap-2", children: [
     /* @__PURE__ */ e(
       "span",
       {
@@ -4129,7 +4129,7 @@ function ms({
       }
     ),
     d < t.length - 1 && /* @__PURE__ */ e("span", { className: "h-px w-8 bg-border-strong" })
-  ] }, m)) });
+  ] }, u)) });
 }
 const nn = /<[a-z][\s\S]*>/i, sn = [
   "[&_p]:my-1.5 [&_p:first-child]:mt-0 [&_p:last-child]:mb-0 [&_p]:leading-relaxed",
@@ -4169,7 +4169,7 @@ const nn = /<[a-z][\s\S]*>/i, sn = [
   th: (t) => /* @__PURE__ */ e("th", { className: "border border-border px-2 py-1 text-left font-semibold", ...t }),
   td: (t) => /* @__PURE__ */ e("td", { className: "border border-border px-2 py-1", ...t })
 };
-function Ee({ text: t, className: r, as: n }) {
+function ze({ text: t, className: r, as: n }) {
   const s = t ?? "";
   return (n ? n === "html" : nn.test(s)) ? /* @__PURE__ */ e(
     "div",
@@ -4200,9 +4200,9 @@ function dn({ block: t }) {
     case "heading":
       return t.level === 1 ? /* @__PURE__ */ e("h1", { className: "text-2xl font-semibold tracking-tight text-text", children: t.text }) : t.level === 2 ? /* @__PURE__ */ e("h2", { className: "pt-2 text-base font-semibold tracking-tight text-text", children: t.text }) : /* @__PURE__ */ e("h3", { className: "pt-1 text-sm font-semibold text-text", children: t.text });
     case "paragraph":
-      return /* @__PURE__ */ e(Ee, { as: "markdown", text: t.text, className: "text-sm text-text" });
+      return /* @__PURE__ */ e(ze, { as: "markdown", text: t.text, className: "text-sm text-text" });
     case "quote":
-      return /* @__PURE__ */ e("blockquote", { className: "border-l-2 border-border pl-3.5", children: /* @__PURE__ */ e(Ee, { as: "markdown", text: t.text, className: "text-sm text-text-muted" }) });
+      return /* @__PURE__ */ e("blockquote", { className: "border-l-2 border-border pl-3.5", children: /* @__PURE__ */ e(ze, { as: "markdown", text: t.text, className: "text-sm text-text-muted" }) });
     case "code":
       return /* @__PURE__ */ e("pre", { className: "overflow-x-auto rounded-lg bg-surface-sunk p-3 text-xs", children: /* @__PURE__ */ e("code", { className: "font-mono", children: t.text }) });
     case "divider":
@@ -4221,7 +4221,7 @@ function dn({ block: t }) {
               n.lead,
               " "
             ] }),
-            /* @__PURE__ */ e(Ee, { as: "markdown", text: n.text, className: "inline" })
+            /* @__PURE__ */ e(ze, { as: "markdown", text: n.text, className: "inline" })
           ] }, s))
         }
       );
@@ -4271,7 +4271,7 @@ function dn({ block: t }) {
     case "callout":
       return /* @__PURE__ */ c("div", { className: i("rounded-lg border px-4 py-3", on[t.tone]), children: [
         t.title && /* @__PURE__ */ e("div", { className: "pb-0.5 text-sm font-semibold text-text", children: t.title }),
-        /* @__PURE__ */ e(Ee, { as: "markdown", text: t.text, className: "text-sm text-text" })
+        /* @__PURE__ */ e(ze, { as: "markdown", text: t.text, className: "text-sm text-text" })
       ] });
     default:
       return null;
@@ -4325,7 +4325,7 @@ function fn(t) {
   return r.length >= 2 ? (r[0][0] + r[1][0]).toUpperCase() : r.length === 1 ? r[0].slice(0, 2).toUpperCase() : "?";
 }
 const hn = ({ name: t, src: r, tone: n = "default", size: s = "sm", className: a, title: l }) => {
-  const [o, m] = ce.useState(!1), d = i(
+  const [o, u] = ce.useState(!1), d = i(
     // Its own token and not `surface-hover`: at 0.972 the plate was within a few
     // percent of every surface it sits on, so the monogram floated instead of
     // sitting in a disc.
@@ -4343,14 +4343,14 @@ const hn = ({ name: t, src: r, tone: n = "default", size: s = "sm", className: a
       alt: t ?? "",
       title: l ?? t,
       className: i(d, "object-cover"),
-      onError: () => m(!0)
+      onError: () => u(!0)
     }
   ) : /* @__PURE__ */ e("span", { className: d, title: l ?? t, "aria-label": t, children: fn(t) });
 }, Ye = "ring-surface", xn = "ring-surface-accent", xs = ({ people: t, max: r = 4, size: n = "sm", className: s }) => {
   if (t.length === 0) return null;
   const a = t.slice(0, r), l = t.length - a.length;
   return /* @__PURE__ */ c("span", { className: i("inline-flex items-center", s), children: [
-    a.map((o, m) => /* @__PURE__ */ e(
+    a.map((o, u) => /* @__PURE__ */ e(
       hn,
       {
         name: o.name,
@@ -4358,12 +4358,12 @@ const hn = ({ name: t, src: r, tone: n = "default", size: s = "sm", className: a
         size: n,
         title: o.name ? o.seen === !1 ? `${o.name} — nog niet gelezen` : o.name : void 0,
         className: i(
-          m > 0 && "-ml-2",
+          u > 0 && "-ml-2",
           o.owner ? xn : Ye,
           o.seen === !1 && "opacity-40"
         )
       },
-      o.id ?? `${o.name}-${m}`
+      o.id ?? `${o.name}-${u}`
     )),
     l > 0 && /* @__PURE__ */ c(
       "span",
@@ -4382,7 +4382,7 @@ const hn = ({ name: t, src: r, tone: n = "default", size: s = "sm", className: a
       }
     )
   ] });
-}, ze = {
+}, Me = {
   mail: { fg: "text-channel-mail-fg", bg: "bg-channel-mail-soft" },
   wa: { fg: "text-channel-whatsapp-fg", bg: "bg-channel-whatsapp-soft" },
   chat: { fg: "text-channel-chat-fg", bg: "bg-channel-chat-soft" },
@@ -4394,7 +4394,7 @@ const hn = ({ name: t, src: r, tone: n = "default", size: s = "sm", className: a
   lg: "size-avatar-lg rounded-md text-base"
 };
 function bs({ channel: t, children: r, size: n = "md", className: s, title: a }) {
-  const l = t in ze ? ze[t] : void 0;
+  const l = t in Me ? Me[t] : void 0;
   return /* @__PURE__ */ e(
     "span",
     {
@@ -4405,7 +4405,7 @@ function bs({ channel: t, children: r, size: n = "md", className: s, title: a })
         // An undeclared channel used to collapse onto the neutral "note" tone,
         // which is also what a real internal note looks like. Deriving from the
         // key keeps it distinguishable and keeps `note` meaning `note`.
-        l ? i(l.fg, l.bg) : t ? Qe(t) : i(ze.note.fg, ze.note.bg),
+        l ? i(l.fg, l.bg) : t ? Qe(t) : i(Me.note.fg, Me.note.bg),
         s
       ),
       children: r
@@ -4420,23 +4420,23 @@ const gs = ({
   radius: a = "md",
   showLoading: l = !0,
   showError: o = !0,
-  fallback: m,
+  fallback: u,
   loadingContent: d,
   errorContent: v,
   className: h,
-  onLoad: u,
+  onLoad: m,
   onError: b,
   ...g
 }) => {
-  const [w, p] = j(!0), [x, S] = j(!1), [_, B] = j(t), D = (W) => {
-    p(!1), S(!1), u?.(W);
-  }, J = (W) => {
-    if (p(!1), S(!0), m && _ !== m) {
-      B(m), S(!1), p(!0);
+  const [w, p] = F(!0), [x, C] = F(!1), [E, j] = F(t), D = (G) => {
+    p(!1), C(!1), m?.(G);
+  }, U = (G) => {
+    if (p(!1), C(!0), u && E !== u) {
+      j(u), C(!1), p(!0);
       return;
     }
-    b?.(W);
-  }, V = i(
+    b?.(G);
+  }, q = i(
     "relative overflow-hidden bg-surface-hover",
     // Size variants
     {
@@ -4464,33 +4464,33 @@ const gs = ({
       "rounded-full": a === "full"
     },
     h
-  ), P = i(
+  ), A = i(
     "w-full h-full object-cover transition-opacity duration-fast",
     {
       "opacity-0": w || x,
       "opacity-100": !w && !x
     }
-  ), q = i(
+  ), R = i(
     "absolute inset-0 flex items-center justify-center",
     "text-text-muted"
-  ), re = /* @__PURE__ */ e("div", { className: "animate-pulse", children: /* @__PURE__ */ e("div", { className: "w-6 h-6 bg-surface-hover rounded" }) }), Y = /* @__PURE__ */ c("div", { className: "text-center", children: [
+  ), ee = /* @__PURE__ */ e("div", { className: "animate-pulse", children: /* @__PURE__ */ e("div", { className: "w-6 h-6 bg-surface-hover rounded" }) }), K = /* @__PURE__ */ c("div", { className: "text-center", children: [
     /* @__PURE__ */ e(Z, { icon: At, size: "lg", className: "mx-auto mb-1" }),
     /* @__PURE__ */ e("span", { className: "text-xs", children: "Failed to load" })
   ] });
-  return /* @__PURE__ */ c("div", { className: V, children: [
+  return /* @__PURE__ */ c("div", { className: q, children: [
     /* @__PURE__ */ e(
       "img",
       {
         ...g,
-        src: _,
+        src: E,
         alt: r,
-        className: P,
+        className: A,
         onLoad: D,
-        onError: J
+        onError: U
       }
     ),
-    w && l && /* @__PURE__ */ e("div", { className: q, children: d || re }),
-    x && o && /* @__PURE__ */ e("div", { className: q, children: v || Y })
+    w && l && /* @__PURE__ */ e("div", { className: R, children: d || ee }),
+    x && o && /* @__PURE__ */ e("div", { className: R, children: v || K })
   ] });
 };
 function ps({
@@ -4524,47 +4524,47 @@ function vs({
   renderItem: a,
   trailing: l,
   onSelect: o,
-  onActiveIndexChange: m,
+  onActiveIndexChange: u,
   isActive: d,
   unread: v,
   dimmed: h,
-  groupBy: u,
+  groupBy: m,
   groups: b,
   renderGroupHeader: g,
   stickyGroupHeaders: w = !1,
   collapsibleGroups: p = !1,
   hideGroupCount: x = !1,
-  selectable: S = !1,
-  selectedItems: _ = [],
-  onSelectionChange: B,
+  selectable: C = !1,
+  selectedItems: E = [],
+  onSelectionChange: j,
   bulkActions: D,
-  header: J,
-  stickyHeader: V = !1,
-  bordered: P = !1,
-  emptyContent: q,
-  loading: re = !1,
-  loadingRows: Y = 4,
-  className: W,
+  header: U,
+  stickyHeader: q = !1,
+  bordered: A = !1,
+  emptyContent: R,
+  loading: ee = !1,
+  loadingRows: K = 4,
+  className: G,
   "aria-label": ie
 }) {
   const [k, f] = ce.useState(
     () => Object.fromEntries(
-      (b ?? []).filter((C) => C.defaultCollapsed).map((C) => [C.id, !0])
+      (b ?? []).filter((S) => S.defaultCollapsed).map((S) => [S.id, !0])
     )
-  ), z = ce.useRef(null), y = (C) => {
-    if (!["ArrowDown", "ArrowUp", "Home", "End"].includes(C.key)) return;
+  ), M = ce.useRef(null), y = (S) => {
+    if (!["ArrowDown", "ArrowUp", "Home", "End"].includes(S.key)) return;
     const O = Array.from(
-      z.current?.querySelectorAll("li[data-list-row]") ?? []
+      M.current?.querySelectorAll("li[data-list-row]") ?? []
     );
     if (O.length === 0) return;
-    C.preventDefault();
-    const H = O.indexOf(document.activeElement), T = C.key === "Home" ? 0 : C.key === "End" ? O.length - 1 : C.key === "ArrowDown" ? (H + 1) % O.length : (H - 1 + O.length) % O.length;
-    O[T]?.focus();
-  }, $ = (C, A) => r ? r(C, A) : A, N = (C) => _.includes(C), K = (C, A) => {
-    B && B(
-      A ? [..._, C] : _.filter((O) => O !== C)
+    S.preventDefault();
+    const V = O.indexOf(document.activeElement), _ = S.key === "Home" ? 0 : S.key === "End" ? O.length - 1 : S.key === "ArrowDown" ? (V + 1) % O.length : (V - 1 + O.length) % O.length;
+    O[_]?.focus();
+  }, $ = (S, L) => r ? r(S, L) : L, N = (S) => E.includes(S), J = (S, L) => {
+    j && j(
+      L ? [...E, S] : E.filter((O) => O !== S)
     );
-  }, ne = (C) => B?.(C ? [...t] : []), ee = i(
+  }, se = (S) => j?.(S ? [...t] : []), re = i(
     "flex flex-col",
     // With a selection open the list has a dock at its foot. Sticky can only
     // park at the bottom of its own box, so on a list shorter than the window
@@ -4572,17 +4572,17 @@ function vs({
     // screen. Growing the box to the height of its parent puts it where it
     // belongs — and only while a selection exists, so an ordinary short list
     // keeps its natural height.
-    S && _.length > 0 && "min-h-full",
-    P && "overflow-hidden rounded-lg border border-border-subtle",
-    W
+    C && E.length > 0 && "min-h-full",
+    A && "overflow-hidden rounded-lg border border-border-subtle",
+    G
   );
-  if (re)
-    return /* @__PURE__ */ e("div", { className: ee, children: Array.from({ length: Y }).map((C, A) => /* @__PURE__ */ c(
+  if (ee)
+    return /* @__PURE__ */ e("div", { className: re, children: Array.from({ length: K }).map((S, L) => /* @__PURE__ */ c(
       "div",
       {
         className: i(
           "flex animate-pulse items-center gap-3 px-4 py-2",
-          n === "divided" && A > 0 && "border-t border-border-subtle"
+          n === "divided" && L > 0 && "border-t border-border-subtle"
         ),
         children: [
           /* @__PURE__ */ e("span", { className: "size-tile-sm shrink-0 rounded-md bg-surface-hover" }),
@@ -4591,12 +4591,12 @@ function vs({
           /* @__PURE__ */ e("span", { className: "h-3 w-8 shrink-0 rounded-sm bg-surface-hover" })
         ]
       },
-      `skeleton-${A}`
+      `skeleton-${L}`
     )) });
-  if (t.length === 0 && q)
-    return /* @__PURE__ */ e("div", { className: ee, children: q });
-  const X = t.length > 0 && _.length === t.length, I = _.length > 0 && !X, R = (C, A, O) => {
-    const H = d?.(C, A) ?? !1, T = v?.(C, A) ?? !1, L = h?.(C, A) ?? !1, Q = S && N(C);
+  if (t.length === 0 && R)
+    return /* @__PURE__ */ e("div", { className: re, children: R });
+  const X = t.length > 0 && E.length === t.length, P = E.length > 0 && !X, H = (S, L, O) => {
+    const V = d?.(S, L) ?? !1, _ = v?.(S, L) ?? !1, I = h?.(S, L) ?? !1, Q = C && N(S);
     return /* @__PURE__ */ c(
       "li",
       {
@@ -4604,11 +4604,11 @@ function vs({
           role: "button",
           tabIndex: 0,
           "data-list-row": "",
-          "aria-current": H || void 0,
-          onClick: () => o(C, A),
-          onFocus: () => m?.(A),
+          "aria-current": V || void 0,
+          onClick: () => o(S, L),
+          onFocus: () => u?.(L),
           onKeyDown: (le) => {
-            le.key !== "Enter" && le.key !== " " || (le.preventDefault(), o(C, A));
+            le.key !== "Enter" && le.key !== " " || (le.preventDefault(), o(S, L));
           }
         } : {},
         className: i(
@@ -4620,18 +4620,18 @@ function vs({
           // An unread row is tinted, not bolded: at five columns a bold row
           // shouts across all of them, while the tint marks the row and leaves
           // the consumer free to weight only the sender and the subject.
-          H || Q ? "bg-accent-soft text-text" : T ? i("bg-surface-unread", o && "hover:bg-surface-unread-hover") : o && "hover:bg-surface-hover",
+          V || Q ? "bg-accent-soft text-text" : _ ? i("bg-surface-unread", o && "hover:bg-surface-unread-hover") : o && "hover:bg-surface-hover",
           // Read rows stay at full opacity — fading them also fades the avatars
           // and team dots, which is exactly the identity you scan by. They read
           // as secondary through weight and text colour instead.
-          L && "text-text-muted"
+          I && "text-text-muted"
         ),
         children: [
-          S && /* @__PURE__ */ e("span", { onClick: (le) => le.stopPropagation(), children: /* @__PURE__ */ e(
+          C && /* @__PURE__ */ e("span", { onClick: (le) => le.stopPropagation(), children: /* @__PURE__ */ e(
             ye,
             {
-              checked: N(C),
-              onChange: (le) => K(C, le.target.checked),
+              checked: N(S),
+              onChange: (le) => J(S, le.target.checked),
               "aria-label": "Rij selecteren"
             }
           ) }),
@@ -4642,43 +4642,43 @@ function vs({
               className: "mt-2 size-1.5 shrink-0 self-start rounded-full bg-border-strong"
             }
           ),
-          s && /* @__PURE__ */ e("span", { className: "shrink-0", children: s(C, A) }),
-          /* @__PURE__ */ e("div", { className: "flex min-w-0 flex-1 items-center gap-2", children: a ? a(C, A) : String(C) }),
-          l && /* @__PURE__ */ e("span", { className: "shrink-0 text-xs text-text-subtle", children: l(C, A) })
+          s && /* @__PURE__ */ e("span", { className: "shrink-0", children: s(S, L) }),
+          /* @__PURE__ */ e("div", { className: "flex min-w-0 flex-1 items-center gap-2", children: a ? a(S, L) : String(S) }),
+          l && /* @__PURE__ */ e("span", { className: "shrink-0 text-xs text-text-subtle", children: l(S, L) })
         ]
       },
-      $(C, A)
+      $(S, L)
     );
-  }, M = (() => {
-    if (!u)
-      return t.map((H, T) => R(H, T, T === 0));
-    const C = /* @__PURE__ */ new Map();
-    t.forEach((H, T) => {
-      const L = u(H, T);
-      C.has(L) || C.set(L, []), C.get(L).push({ item: H, index: T });
+  }, T = (() => {
+    if (!m)
+      return t.map((V, _) => H(V, _, _ === 0));
+    const S = /* @__PURE__ */ new Map();
+    t.forEach((V, _) => {
+      const I = m(V, _);
+      S.has(I) || S.set(I, []), S.get(I).push({ item: V, index: _ });
     });
-    const A = b ?? [];
+    const L = b ?? [];
     return [
-      ...A.filter((H) => C.has(H.id)),
-      ...[...C.keys()].filter((H) => !A.some((T) => T.id === H)).map((H) => ({ id: H }))
-    ].flatMap((H, T) => {
-      const L = C.get(H.id) ?? [], Q = p && k[H.id], le = H.title ?? H.id, de = H.count ?? L.length, ge = /* @__PURE__ */ e(
+      ...L.filter((V) => S.has(V.id)),
+      ...[...S.keys()].filter((V) => !L.some((_) => _.id === V)).map((V) => ({ id: V }))
+    ].flatMap((V, _) => {
+      const I = S.get(V.id) ?? [], Q = p && k[V.id], le = V.title ?? V.id, de = V.count ?? I.length, pe = /* @__PURE__ */ e(
         "li",
         {
-          onClick: p ? () => f((he) => ({ ...he, [H.id]: !he[H.id] })) : void 0,
+          onClick: p ? () => f((he) => ({ ...he, [V.id]: !he[V.id] })) : void 0,
           className: i(
             // A caption over its rows, not a band across the table: same
             // surface as the rows, no rules, and the count as a quiet pill.
             // The old grey uppercase strip read as a second column header.
             "flex items-center gap-2.5 bg-surface px-5 pb-1.5 text-base font-semibold",
-            T > 0 ? "pt-5" : "pt-3",
-            H.tone === "danger" ? "text-danger-fg" : H.tone === "muted" ? "text-text-subtle" : "text-text",
+            _ > 0 ? "pt-5" : "pt-3",
+            V.tone === "danger" ? "text-danger-fg" : V.tone === "muted" ? "text-text-subtle" : "text-text",
             w && "sticky z-10",
             p && "cursor-pointer select-none"
           ),
           "aria-expanded": p ? !Q : void 0,
-          style: w ? { top: V ? 28 : 0 } : void 0,
-          children: g ? g(H, L.map((he) => he.item)) : /* @__PURE__ */ c(ke, { children: [
+          style: w ? { top: q ? 28 : 0 } : void 0,
+          children: g ? g(V, I.map((he) => he.item)) : /* @__PURE__ */ c(Ce, { children: [
             p && /* @__PURE__ */ e(
               De,
               {
@@ -4695,25 +4695,25 @@ function vs({
               {
                 className: i(
                   "rounded-full px-2 text-xs font-normal tabular-nums",
-                  H.tone === "danger" ? "bg-danger-soft text-danger-fg" : "bg-surface-sunk text-text-subtle"
+                  V.tone === "danger" ? "bg-danger-soft text-danger-fg" : "bg-surface-sunk text-text-subtle"
                 ),
                 children: de
               }
             )
           ] })
         },
-        `group-${H.id}`
+        `group-${V.id}`
       );
-      return Q ? [ge] : [
-        ge,
-        ...L.map(
-          ({ item: he, index: Ie }, E) => R(he, Ie, E === 0)
+      return Q ? [pe] : [
+        pe,
+        ...I.map(
+          ({ item: he, index: Ie }, z) => H(he, Ie, z === 0)
         )
       ];
     });
   })();
-  return /* @__PURE__ */ c("div", { ref: z, className: ee, onKeyDown: o ? y : void 0, children: [
-    J && /* @__PURE__ */ c(
+  return /* @__PURE__ */ c("div", { ref: M, className: re, onKeyDown: o ? y : void 0, children: [
+    U && /* @__PURE__ */ c(
       "div",
       {
         className: i(
@@ -4721,26 +4721,26 @@ function vs({
           // sticky group headers park against.
           "flex h-row-sm items-end gap-3 border-b border-border bg-surface px-5 pb-2",
           "text-xs font-semibold uppercase tracking-wider text-text-disabled",
-          V && "sticky top-0 z-20"
+          q && "sticky top-0 z-20"
         ),
         children: [
-          S && /* @__PURE__ */ e("span", { className: "flex items-center", children: /* @__PURE__ */ e(
+          C && /* @__PURE__ */ e("span", { className: "flex items-center", children: /* @__PURE__ */ e(
             ye,
             {
               checked: X,
-              indeterminate: I,
-              onChange: (C) => ne(C.target.checked),
+              indeterminate: P,
+              onChange: (S) => se(S.target.checked),
               "aria-label": "Alles selecteren"
             }
           ) }),
-          J
+          U
         ]
       }
     ),
-    /* @__PURE__ */ e("ul", { "aria-label": ie, className: "flex flex-col", children: M }),
-    S && _.length > 0 && /* @__PURE__ */ e("div", { className: "pointer-events-none sticky bottom-0 z-10 flex justify-center px-5 pb-4", children: /* @__PURE__ */ c("div", { className: "pointer-events-auto flex items-center gap-1.5 rounded-lg bg-accent py-1.5 pl-3.5 pr-1.5 text-accent-fg shadow-overlay", children: [
+    /* @__PURE__ */ e("ul", { "aria-label": ie, className: "flex flex-col", children: T }),
+    C && E.length > 0 && /* @__PURE__ */ e("div", { className: "pointer-events-none sticky bottom-0 z-10 flex justify-center px-5 pb-4", children: /* @__PURE__ */ c("div", { className: "pointer-events-auto flex items-center gap-1.5 rounded-lg bg-accent py-1.5 pl-3.5 pr-1.5 text-accent-fg shadow-overlay", children: [
       /* @__PURE__ */ c("span", { className: "text-sm font-medium", children: [
-        _.length,
+        E.length,
         " geselecteerd"
       ] }),
       /* @__PURE__ */ e("span", { "aria-hidden": !0, className: "mx-1.5 h-4 w-px bg-current opacity-25" }),
@@ -4750,10 +4750,10 @@ function vs({
         "button",
         {
           type: "button",
-          onClick: () => B?.([]),
+          onClick: () => j?.([]),
           "aria-label": "Selectie wissen",
           className: "grid size-tile-md shrink-0 cursor-pointer place-items-center rounded-md transition-colors duration-fast ease-out hover:bg-white/15 focus-visible:outline-none focus-visible:focus-ring",
-          children: /* @__PURE__ */ e(we, { className: "size-icon-lg" })
+          children: /* @__PURE__ */ e(ke, { className: "size-icon-lg" })
         }
       )
     ] }) })
@@ -4815,23 +4815,23 @@ const pn = ({
   actions: a = [],
   children: l,
   className: o,
-  backLabel: m = "Back",
+  backLabel: u = "Back",
   backClassName: d,
   onBack: v,
   editable: h = !1,
-  onTitleChange: u
+  onTitleChange: m
 }) => {
-  const [b, g] = j(!1), [w, p] = j(r), x = ae(null);
-  G(() => {
+  const [b, g] = F(!1), [w, p] = F(r), x = te(null);
+  Y(() => {
     p(r);
-  }, [r]), G(() => {
+  }, [r]), Y(() => {
     b && x.current && (x.current.focus(), x.current.select());
   }, [b]);
-  const S = () => {
+  const C = () => {
     h && g(!0);
-  }, _ = () => {
-    g(!1), w.trim() !== "" && w !== r && u ? u(w.trim()) : p(r);
-  }, B = (D) => {
+  }, E = () => {
+    g(!1), w.trim() !== "" && w !== r && m ? m(w.trim()) : p(r);
+  }, j = (D) => {
     D.key === "Enter" ? x.current?.blur() : D.key === "Escape" && (p(r), g(!1));
   };
   return /* @__PURE__ */ c(
@@ -4851,7 +4851,7 @@ const pn = ({
           /* @__PURE__ */ e("div", { className: "min-w-0 flex-1", children: /* @__PURE__ */ c("div", { className: "flex items-start gap-4 text-text", children: [
             v && // Ghost: a framed box around a back chevron makes the way out of a
             // page look like the page's primary control.
-            /* @__PURE__ */ e(te, { variant: "ghost", onClick: v, leftIcon: /* @__PURE__ */ e(Z, { icon: Ce, size: "md" }), iconOnly: !0 }),
+            /* @__PURE__ */ e(ne, { variant: "ghost", onClick: v, leftIcon: /* @__PURE__ */ e(Z, { icon: Se, size: "md" }), iconOnly: !0 }),
             /* @__PURE__ */ c("div", { className: "min-w-0 flex-1", children: [
               b ? /* @__PURE__ */ e(
                 "input",
@@ -4860,15 +4860,15 @@ const pn = ({
                   type: "text",
                   value: w,
                   onChange: (D) => p(D.target.value),
-                  onBlur: _,
-                  onKeyDown: B,
+                  onBlur: E,
+                  onKeyDown: j,
                   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 w-full"
                 }
               ) : /* @__PURE__ */ c("div", { className: "group flex items-baseline gap-2.5 min-w-0", children: [
                 /* @__PURE__ */ e(
                   "h2",
                   {
-                    onClick: S,
+                    onClick: C,
                     className: i(
                       "text-lg font-semibold tracking-title truncate",
                       h && "cursor-pointer"
@@ -4882,7 +4882,7 @@ const pn = ({
                   Lt,
                   {
                     size: 15,
-                    onClick: S,
+                    onClick: C,
                     className: "shrink-0 cursor-pointer text-text-muted opacity-0 group-hover:opacity-100 transition-opacity"
                   }
                 )
@@ -4916,11 +4916,11 @@ const pn = ({
               },
               D.id
             ) : /* @__PURE__ */ e(
-              te,
+              ne,
               {
                 variant: D.variant ?? "secondary",
-                onClick: (J) => {
-                  J.stopPropagation(), J.target.blur(), D.onClick();
+                onClick: (U) => {
+                  U.stopPropagation(), U.target.blur(), D.onClick();
                 },
                 disabled: D.disabled,
                 leftIcon: D.icon,
@@ -4946,18 +4946,18 @@ const pn = ({
   onBack: a,
   editable: l,
   onTitleChange: o,
-  surface: m = !1,
+  surface: u = !1,
   headerContent: d,
   loading: v = !1,
   loadingShape: h = "table",
-  empty: u,
+  empty: m,
   padding: b = "md",
   scroll: g = !0,
   className: w,
   contentClassName: p,
   children: x
 }) => {
-  const S = v ? /* @__PURE__ */ e(Re, { variant: "inline", shape: h }) : u ? /* @__PURE__ */ e("div", { className: "flex flex-col items-center justify-center py-12", children: u }) : x;
+  const C = v ? /* @__PURE__ */ e(Re, { variant: "inline", shape: h }) : m ? /* @__PURE__ */ e("div", { className: "flex flex-col items-center justify-center py-12", children: m }) : x;
   return /* @__PURE__ */ c(
     "div",
     {
@@ -4973,7 +4973,7 @@ const pn = ({
         /* @__PURE__ */ e(
           pn,
           {
-            surface: m,
+            surface: u,
             title: t,
             subtitle: r,
             meta: n,
@@ -4993,7 +4993,7 @@ const pn = ({
               vn[b],
               p
             ),
-            children: S
+            children: C
           }
         )
       ]
@@ -5018,7 +5018,7 @@ function yn() {
   return ht(ot);
 }
 function Es() {
-  const [t, r] = j(null), n = pe(
+  const [t, r] = F(null), n = ge(
     () => ({
       setTrail: (s, a) => r((l) => a ? { ownerId: s, entry: a } : l && l.ownerId !== s ? l : null)
     }),
@@ -5036,26 +5036,47 @@ const Nn = {
   children: t,
   actions: r = [],
   secondaryActions: n = [],
-  onBack: s,
-  backLabel: a = "Back",
-  title: l,
-  loading: o = !1,
-  loadingShape: m = "form",
-  padding: d = "md",
-  className: v,
-  contentClassName: h
+  actionsPlacement: s = "header",
+  onBack: a,
+  backLabel: l = "Back",
+  title: o,
+  loading: u = !1,
+  loadingShape: d = "form",
+  padding: v = "md",
+  className: h,
+  contentClassName: m
 }) => {
-  const u = yn(), b = ft(), g = ae(s);
-  g.current = s;
-  const w = !!s;
-  G(() => {
-    if (u && !(!w && !l))
-      return u.setTrail(b, {
-        title: l,
-        onBack: w ? () => g.current?.() : void 0
-      }), () => u.setTrail(b, null);
-  }, [u, b, l, w]);
-  const p = r.length > 0 || n.length > 0;
+  const b = yn(), g = ft(), w = te(a);
+  w.current = a;
+  const p = !!a, x = te(r);
+  x.current = r;
+  const C = te(n);
+  C.current = n;
+  const E = s === "header", j = E && (r.length > 0 || n.length > 0), D = j ? JSON.stringify(
+    [...n, ...r].map((A) => [A.id, A.label, A.variant, A.disabled])
+  ) : "", U = ge(() => {
+    if (!j) return;
+    const A = (R) => (ee, K) => ({
+      ...ee,
+      onClick: () => {
+        (R === "primary" ? x.current : C.current)[K]?.onClick();
+      }
+    });
+    return {
+      actions: x.current.map(A("primary")),
+      secondaryActions: C.current.map(A("secondary"))
+    };
+  }, [j, D]);
+  Y(() => {
+    if (b && !(!p && !o && !U))
+      return b.setTrail(g, {
+        title: o,
+        onBack: p ? () => w.current?.() : void 0,
+        actions: U?.actions,
+        secondaryActions: U?.secondaryActions
+      }), () => b.setTrail(g, null);
+  }, [b, g, o, p, U]);
+  const q = !E && (r.length > 0 || n.length > 0);
   return (
     /**
      * `min-h-full` + a sticky footer, rather than a nested scroll container.
@@ -5063,24 +5084,28 @@ const Nn = {
      * panel that has not been migrated yet. This way a short page still drops
      * its footer to the bottom, and a long one keeps it pinned while scrolling.
      */
-    /* @__PURE__ */ c("div", { className: i("flex min-h-full flex-col", v), children: [
-      !u && (w || l) && /* @__PURE__ */ c("div", { className: "flex shrink-0 items-center gap-2 px-5 pt-4", children: [
-        w && /* @__PURE__ */ e(
-          te,
+    /* @__PURE__ */ c("div", { className: i("flex min-h-full flex-col", h), children: [
+      !b && (p || o || j) && /* @__PURE__ */ c("div", { className: "flex shrink-0 items-center gap-2 px-5 pt-4", children: [
+        p && /* @__PURE__ */ e(
+          ne,
           {
             variant: "ghost",
-            onClick: () => g.current?.(),
-            "aria-label": a,
-            leftIcon: /* @__PURE__ */ e(Z, { icon: Ce, size: "sm" }),
+            onClick: () => w.current?.(),
+            "aria-label": l,
+            leftIcon: /* @__PURE__ */ e(Z, { icon: Se, size: "sm" }),
             iconOnly: !0
           }
         ),
-        l && /* @__PURE__ */ e("h2", { className: "min-w-0 truncate text-md font-semibold tracking-title text-text", children: l })
+        o && /* @__PURE__ */ e("h2", { className: "min-w-0 truncate text-md font-semibold tracking-title text-text", children: o }),
+        E && /* @__PURE__ */ c("div", { className: "ml-auto flex items-center gap-2", children: [
+          n.length > 0 && /* @__PURE__ */ e(Ne, { actions: n, defaultVariant: "ghost" }),
+          r.length > 0 && /* @__PURE__ */ e(Ne, { actions: r })
+        ] })
       ] }),
-      /* @__PURE__ */ e("div", { className: i("flex-1", Nn[d], h), children: o ? /* @__PURE__ */ e(Re, { variant: "inline", shape: m }) : t }),
-      p && /* @__PURE__ */ c("div", { className: "sticky bottom-0 z-10 flex shrink-0 items-center gap-2 border-t border-border bg-surface px-5 py-3", children: [
-        n.length > 0 && /* @__PURE__ */ e(_e, { actions: n, defaultVariant: "ghost" }),
-        r.length > 0 && /* @__PURE__ */ e(_e, { actions: r, className: "ml-auto" })
+      /* @__PURE__ */ e("div", { className: i("flex-1", Nn[v], m), children: u ? /* @__PURE__ */ e(Re, { variant: "inline", shape: d }) : t }),
+      q && /* @__PURE__ */ c("div", { className: "sticky bottom-0 z-10 flex shrink-0 items-center gap-2 border-t border-border bg-surface px-5 py-3", children: [
+        n.length > 0 && /* @__PURE__ */ e(Ne, { actions: n, defaultVariant: "ghost" }),
+        r.length > 0 && /* @__PURE__ */ e(Ne, { actions: r, className: "ml-auto" })
       ] })
     ] })
   );
@@ -5151,16 +5176,16 @@ function _s({ label: t, dotColor: r, onClick: n, className: s }) {
   );
 }
 function wn(t) {
-  const { id: r, header: n, accessor: s, label: a, tone: l, visible: o, width: m, sortable: d, align: v } = t;
+  const { id: r, header: n, accessor: s, label: a, tone: l, visible: o, width: u, sortable: d, align: v } = t;
   return {
     id: r,
     header: n,
     accessor: (h) => a(s(h), h),
-    cell: (h, u) => {
-      const b = s(u);
-      return o && !o(b, u) ? null : /* @__PURE__ */ e(Kr, { variant: l ? l(b, u) : "default", size: "sm", children: a(b, u) });
+    cell: (h, m) => {
+      const b = s(m);
+      return o && !o(b, m) ? null : /* @__PURE__ */ e(Kr, { variant: l ? l(b, m) : "default", size: "sm", children: a(b, m) });
     },
-    width: m,
+    width: u,
     sortable: d,
     align: v
   };
@@ -5173,7 +5198,7 @@ function $s(t) {
     onLabel: a,
     offLabel: l,
     onTone: o = "success",
-    offTone: m = "secondary",
+    offTone: u = "secondary",
     width: d,
     sortable: v
   } = t;
@@ -5182,7 +5207,7 @@ function $s(t) {
     header: n,
     accessor: (h) => !!s(h),
     label: (h) => h ? a : l,
-    tone: (h) => h ? o : m,
+    tone: (h) => h ? o : u,
     width: d,
     sortable: v
   });
@@ -5195,7 +5220,7 @@ function Ds(t) {
     label: a,
     empty: l = "—",
     separator: o = ", ",
-    width: m,
+    width: u,
     searchable: d,
     sortable: v
   } = t;
@@ -5203,10 +5228,10 @@ function Ds(t) {
     id: r,
     header: n,
     accessor: (h) => {
-      const u = s(h), g = (u == null ? [] : Array.isArray(u) ? u : [u]).filter(Boolean).map((w) => a(w) ?? w);
+      const m = s(h), g = (m == null ? [] : Array.isArray(m) ? m : [m]).filter(Boolean).map((w) => a(w) ?? w);
       return g.length ? g.join(o) : l;
     },
-    width: m,
+    width: u,
     searchable: d,
     sortable: v
   };
@@ -5234,15 +5259,15 @@ const As = ({
     } catch {
       return String(h);
     }
-  }, l = (h) => h ? "Ja" : "Nee", o = (h, u) => {
-    if (!u) return String(h || "-");
-    const b = u.find((g) => g.value === h);
+  }, l = (h) => h ? "Ja" : "Nee", o = (h, m) => {
+    if (!m) return String(h || "-");
+    const b = m.find((g) => g.value === h);
     return b ? b.label : String(h || "-");
-  }, m = xe(
+  }, u = xe(
     (h) => {
-      const u = kn(r, h.name);
+      const m = kn(r, h.name);
       if (h.type === "array") {
-        const g = u;
+        const g = m;
         return !g || g.length === 0 ? /* @__PURE__ */ e(
           me,
           {
@@ -5271,8 +5296,8 @@ const As = ({
                 }
               ) }),
               /* @__PURE__ */ e("div", { className: "grid grid-cols-1 sm:grid-cols-2 gap-3", children: h.arrayFields?.map((x) => {
-                const S = w?.[x.name];
-                let _ = "-";
+                const C = w?.[x.name];
+                let E = "-";
                 switch (x.type) {
                   case "text":
                   case "email":
@@ -5280,30 +5305,30 @@ const As = ({
                   case "tel":
                   case "url":
                   case "textarea":
-                    _ = S || "-";
+                    E = C || "-";
                     break;
                   case "select":
                   case "radio":
-                    _ = o(
-                      S,
+                    E = o(
+                      C,
                       x.options
                     );
                     break;
                   case "checkbox":
-                    _ = l(S);
+                    E = l(C);
                     break;
                   case "date":
-                    _ = a(S);
+                    E = a(C);
                     break;
                   case "custom":
-                    _ = x.customComponent?.({
-                      value: S
+                    E = x.customComponent?.({
+                      value: C
                     });
                     break;
                   default:
-                    _ = String(S || "-");
+                    E = String(C || "-");
                 }
-                return x.format && (_ = x.format(S, w)), /* @__PURE__ */ c("div", { className: "space-y-1", children: [
+                return x.format && (E = x.format(C, w)), /* @__PURE__ */ c("div", { className: "space-y-1", children: [
                   /* @__PURE__ */ e(
                     me,
                     {
@@ -5319,7 +5344,7 @@ const As = ({
                       variant: "body",
                       size: "sm",
                       className: "text-text",
-                      children: _
+                      children: E
                     }
                   )
                 ] }, x.name);
@@ -5330,9 +5355,9 @@ const As = ({
         )) });
       }
       if (h.type === "custom" && h.customComponent)
-        return h.customComponent({ value: u });
+        return h.customComponent({ value: m });
       if (h.format) {
-        const g = h.format(u, r);
+        const g = h.format(m, r);
         return /* @__PURE__ */ e(
           me,
           {
@@ -5351,23 +5376,23 @@ const As = ({
         case "number":
         case "tel":
         case "url":
-          b = u ? String(u) : "-";
+          b = m ? String(m) : "-";
           break;
         case "textarea":
-          b = u ? /* @__PURE__ */ e("div", { className: "whitespace-pre-wrap", children: String(u || "-") }) : "-";
+          b = m ? /* @__PURE__ */ e("div", { className: "whitespace-pre-wrap", children: String(m || "-") }) : "-";
           break;
         case "select":
         case "radio":
-          b = o(u, h.options);
+          b = o(m, h.options);
           break;
         case "checkbox":
-          b = l(u);
+          b = l(m);
           break;
         case "date":
-          b = a(u);
+          b = a(m);
           break;
         default:
-          b = u ? String(u) : "-";
+          b = m ? String(m) : "-";
       }
       return /* @__PURE__ */ e(
         me,
@@ -5384,8 +5409,8 @@ const As = ({
     (h) => {
       if (h.conditional && !h.conditional(r))
         return null;
-      const u = h.items.filter((g) => !(g.hidden || g.conditional && !g.conditional(r)));
-      if (u.length === 0) return null;
+      const m = h.items.filter((g) => !(g.hidden || g.conditional && !g.conditional(r)));
+      if (m.length === 0) return null;
       const b = i(
         "space-y-4",
         {
@@ -5426,7 +5451,7 @@ const As = ({
                 }
               )
             ] }),
-            /* @__PURE__ */ e("div", { className: "md:col-span-2", children: /* @__PURE__ */ e("div", { className: b, children: u.map((g) => /* @__PURE__ */ c(
+            /* @__PURE__ */ e("div", { className: "md:col-span-2", children: /* @__PURE__ */ e("div", { className: b, children: m.map((g) => /* @__PURE__ */ c(
               "div",
               {
                 className: "space-y-1",
@@ -5444,7 +5469,7 @@ const As = ({
                       children: g.label
                     }
                   ),
-                  m(g)
+                  u(g)
                 ]
               },
               g.name
@@ -5454,7 +5479,7 @@ const As = ({
         h.id
       );
     },
-    [r, m]
+    [r, u]
   ), v = i(
     "space-y-6",
     {
@@ -5493,7 +5518,7 @@ const As = ({
         v
       )) })
     ] });
-  const o = t.action, m = o?.visibility !== "always";
+  const o = t.action, u = o?.visibility !== "always";
   return /* @__PURE__ */ e("li", { children: /* @__PURE__ */ c(
     "div",
     {
@@ -5530,11 +5555,21 @@ const As = ({
             className: i(
               "shrink-0 text-xs tabular-nums",
               l ? "rounded-full bg-accent px-1.5 font-semibold text-accent-fg" : "text-text-subtle",
-              o && m && "group-hover/item:hidden group-focus-within/item:hidden"
+              o && u && "group-hover/item:hidden group-focus-within/item:hidden"
             ),
             children: t.count
           }
         ),
+        t.count === void 0 && t.meta !== void 0 && /* @__PURE__ */ e(
+          "span",
+          {
+            className: i(
+              "shrink-0 text-xs text-text-subtle",
+              o && u && "group-hover/item:hidden group-focus-within/item:hidden"
+            ),
+            children: t.meta
+          }
+        ),
         o && /* @__PURE__ */ e(
           "button",
           {
@@ -5550,7 +5585,7 @@ const As = ({
               "text-text-subtle transition-colors duration-fast ease-out",
               "hover:bg-page-hover hover:text-text",
               "focus-visible:outline-none focus-visible:focus-ring",
-              m && "opacity-0 group-hover/item:opacity-100 focus-visible:opacity-100"
+              u && "opacity-0 group-hover/item:opacity-100 focus-visible:opacity-100"
             ),
             children: o.icon
           }
@@ -5617,7 +5652,7 @@ const As = ({
   align: a = "left",
   truncate: l = !1,
   className: o,
-  children: m,
+  children: u,
   ...d
 }) => {
   const v = `h${t}`, h = i(
@@ -5629,7 +5664,7 @@ const As = ({
     l && "truncate",
     o
   );
-  return /* @__PURE__ */ e(v, { className: h, ...d, children: m });
+  return /* @__PURE__ */ e(v, { className: h, ...d, children: u });
 };
 function Tn(t) {
   return {
@@ -5649,37 +5684,37 @@ const Ps = ({
   initialCommandPath: a,
   initialActiveIndex: l
 }) => {
-  const [o, m] = j(""), [d, v] = j(a || []), [h, u] = j(l || 0), b = ae(null), g = ae(null), p = (d.length ? t.find((x) => x.id === d[0])?.subCommands || [] : t).filter(
+  const [o, u] = F(""), [d, v] = F(a || []), [h, m] = F(l || 0), b = te(null), g = te(null), p = (d.length ? t.find((x) => x.id === d[0])?.subCommands || [] : t).filter(
     (x) => x.label.toLowerCase().includes(o.toLowerCase())
   );
-  return G(() => {
-    r || (m(""), v(a || []), u(l || 0));
-  }, [r]), G(() => {
-    const x = (S) => {
+  return Y(() => {
+    r || (u(""), v(a || []), m(l || 0));
+  }, [r]), Y(() => {
+    const x = (C) => {
       if (r) {
-        if (S.key === "Escape")
+        if (C.key === "Escape")
           n();
-        else if (S.key === "ArrowUp")
-          u(
-            (_) => _ > 0 ? _ - 1 : p.length - 1
+        else if (C.key === "ArrowUp")
+          m(
+            (E) => E > 0 ? E - 1 : p.length - 1
           );
-        else if (S.key === "ArrowDown")
-          u(
-            (_) => _ < p.length - 1 ? _ + 1 : 0
+        else if (C.key === "ArrowDown")
+          m(
+            (E) => E < p.length - 1 ? E + 1 : 0
           );
-        else if (S.key === "Enter") {
-          const _ = p[h];
-          _ && (_.subCommands ? (v([...d, _.id]), u(0)) : _.action && (_.action(), n()));
+        else if (C.key === "Enter") {
+          const E = p[h];
+          E && (E.subCommands ? (v([...d, E.id]), m(0)) : E.action && (E.action(), n()));
         }
       }
     };
     return document.addEventListener("keydown", x), () => document.removeEventListener("keydown", x);
-  }, [r, n, p, h, d]), G(() => {
-    const x = (S) => {
-      b.current && !b.current.contains(S.target) && n();
+  }, [r, n, p, h, d]), Y(() => {
+    const x = (C) => {
+      b.current && !b.current.contains(C.target) && n();
     };
     return r && document.addEventListener("mousedown", x), () => document.removeEventListener("mousedown", x);
-  }, [r, n]), G(() => {
+  }, [r, n]), Y(() => {
     if (!r) return;
     g.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__ */ c(
@@ -5697,7 +5732,7 @@ const Ps = ({
               autoFocus: !0,
               placeholder: s?.searchPlaceholder || "Search commands...",
               value: o,
-              onChange: (x) => m(x.target.value),
+              onChange: (x) => u(x.target.value),
               className: "w-full border-0 bg-transparent py-2 text-text focus:outline-none"
             }
           )
@@ -5709,15 +5744,15 @@ const Ps = ({
             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((x, S) => /* @__PURE__ */ c(
+              p.map((x, C) => /* @__PURE__ */ c(
                 "div",
                 {
-                  "data-index": S,
-                  className: `flex items-center p-2 cursor-pointer rounded-md ${S === h ? "bg-accent-soft text-accent" : "text-text"}`,
+                  "data-index": C,
+                  className: `flex items-center p-2 cursor-pointer rounded-md ${C === h ? "bg-accent-soft text-accent" : "text-text"}`,
                   onClick: () => {
-                    x.subCommands ? (v([...d, x.id]), u(0)) : x.action && (x.action(), n());
+                    x.subCommands ? (v([...d, x.id]), m(0)) : x.action && (x.action(), n());
                   },
-                  onMouseEnter: () => u(S),
+                  onMouseEnter: () => m(C),
                   children: [
                     x.icon && /* @__PURE__ */ e("span", { className: "mr-3", children: x.icon }),
                     /* @__PURE__ */ e("span", { className: "flex-grow", children: x.label }),
@@ -5816,7 +5851,7 @@ const Ps = ({
     shadow: a,
     border: l,
     borderColor: o,
-    className: m,
+    className: u,
     children: d,
     ...v
   }, h) => /* @__PURE__ */ e(
@@ -5831,7 +5866,7 @@ const Ps = ({
         a && Ln[a],
         l && In[l],
         o && Pn[o],
-        m
+        u
       ),
       ...v,
       children: d
@@ -5863,41 +5898,41 @@ function js({
   componentProps: l,
   className: o
 }) {
-  const m = ae(null), [d, v] = j(null), [, h] = j(0), u = ae(null), b = ae(r);
-  b.current = r, G(() => {
+  const u = te(null), [d, v] = F(null), [, h] = F(0), m = te(null), b = te(r);
+  b.current = r, Y(() => {
     if (je.has(t)) return;
-    let S = !0;
+    let C = !0;
     return (async () => {
       try {
-        const B = await b.current();
-        if (!S) return;
-        je.set(t, B), h((D) => D + 1);
-      } catch (B) {
-        console.error(`[FederatedResource] Load failed: ${t}`, B), S && v(t);
+        const j = await b.current();
+        if (!C) return;
+        je.set(t, j), h((D) => D + 1);
+      } catch (j) {
+        console.error(`[FederatedResource] Load failed: ${t}`, j), C && v(t);
       }
     })(), () => {
-      S = !1;
+      C = !1;
     };
   }, [t]);
   const g = je.get(t) ?? null, w = !g && d === t, p = !g && !w, x = g ? n === "react" && (g.component || g.default) || g : null;
-  return G(() => {
+  return Y(() => {
     if (!x || n === "react") return;
-    const S = m.current;
-    if (S) {
+    const C = u.current;
+    if (C) {
       if (n === "svelte") {
-        const _ = x.default || x, B = new _({ target: S, props: l || {} });
-        return u.current = B, () => B.$destroy();
+        const E = x.default || x, j = new E({ target: C, props: l || {} });
+        return m.current = j, () => j.$destroy();
       }
       if (x.mount) {
-        const _ = x.mount({ container: S, props: l || {} });
+        const E = x.mount({ container: C, props: l || {} });
         return () => {
-          typeof _ == "function" ? _() : x.unmount?.(S);
+          typeof E == "function" ? E() : x.unmount?.(C);
         };
       }
     }
-  }, [x, n]), G(() => {
-    n === "svelte" && u.current && u.current.$set?.(l);
-  }, [l, n]), /* @__PURE__ */ c("div", { ref: m, className: o, style: { display: "contents" }, children: [
+  }, [x, n]), Y(() => {
+    n === "svelte" && m.current && m.current.$set?.(l);
+  }, [l, n]), /* @__PURE__ */ c("div", { ref: u, className: o, style: { display: "contents" }, children: [
     p && s,
     w && a,
     n === "react" && x && /* @__PURE__ */ e(x, { ...l })
@@ -5938,7 +5973,7 @@ export {
   xs as AvatarStack,
   Kr as Badge,
   it as Box,
-  te as Button,
+  ne as Button,
   Xn as ButtonGroup,
   Os as Card,
   bs as ChannelBadge,
@@ -5971,17 +6006,17 @@ export {
   ws as Page,
   pn as PageHeader,
   ts as PageToolbar,
-  _e as PageToolbarActions,
+  Ne as PageToolbarActions,
   Jn as ParticipantTile,
   et as Popover,
   is as ProgressBar,
-  Ee as RichText,
+  ze as RichText,
   at as SearchField,
   Er as SearchableTextField,
   ks as SectionCaption,
   Cs as SectionDivider,
   nr as SegmentedToggle,
-  Te as Select,
+  _e as Select,
   Ss as SettingsFrameProvider,
   zs as SettingsPage,
   Ms as SettingsRow,
@@ -5999,7 +6034,7 @@ export {
   Pr as Tabs,
   me as Text,
   Be as TextArea,
-  Ne as TextField,
+  we as TextField,
   Yn as VideoSurface,
   As as View,
   Ge as autofillProps,
@@ -6017,7 +6052,7 @@ export {
   qt as normalizeText,
   Zn as resolveLucideIcon,
   ns as selectFilterHandler,
-  Me as text,
+  Te as text,
   Le as useAnchoredPosition,
   yn as useSettingsFrame,
   Es as useSettingsFrameHost