@opencxh/ui-kit 3.137.4 → 3.137.6

package/dist/index.js

@@ -1,35 +1,35 @@
 import { clsx as et } from "clsx";
-import { jsxs as i, jsx as e, Fragment as ve } from "react/jsx-runtime";
-import { VideoOff as tt, User as rt, MicOff as nt, Mic as st, X as we, ChevronDown as Se, ExternalLink as at, Calendar as lt, ChevronLeft as Ee, ChevronRight as ze, ChevronDownIcon as ot, Loader2 as ct, Search as Me, Check as Ie, ChevronUp as it, Ellipsis as dt, FileText as Te, HardDrive as Pe, ArrowLeft as ut, FolderPlus as mt, Upload as ft, Folder as je, Trash2 as ht, Plus as xt, Sparkles as bt, ImageOff as pt, Pencil as gt, ArrowUpRight as vt } from "lucide-react";
-import oe, { useRef as se, useEffect as X, forwardRef as xe, useState as O, useLayoutEffect as yt, useMemo as ge, useCallback as he, createContext as Nt, Component as wt } from "react";
+import { jsxs as c, jsx as e, Fragment as ve } from "react/jsx-runtime";
+import { VideoOff as tt, User as rt, MicOff as nt, Mic as st, X as we, ChevronDown as Se, ExternalLink as at, Calendar as lt, ChevronLeft as Ee, ChevronRight as ze, ChevronDownIcon as ot, Loader2 as ct, Search as Me, Check as Pe, ChevronUp as it, Ellipsis as dt, FileText as Te, HardDrive as Ie, ArrowLeft as ut, FolderPlus as mt, Upload as ft, Folder as je, Trash2 as ht, Plus as xt, Sparkles as bt, ImageOff as gt, Pencil as pt, ArrowUpRight as vt } from "lucide-react";
+import oe, { useRef as se, useEffect as X, forwardRef as xe, useState as O, useLayoutEffect as yt, useMemo as pe, useCallback as he, createContext as Nt, Component as wt } from "react";
 import kt from "dompurify";
 import Ct from "react-markdown";
 import St from "remark-gfm";
 function d(...t) {
   return et(t);
 }
-function cn(t) {
+function un(t) {
   return (r, n) => t[r]?.[n] || "";
 }
-function dn(t) {
+function mn(t) {
   return (r) => t[r] || "";
 }
 const Oe = ["cat-1", "cat-2", "cat-3", "cat-4", "cat-5"];
-function un(t) {
+function fn(t) {
   let r = 0;
   for (let n = 0; n < t.length; n++) r = r * 31 + t.charCodeAt(n) >>> 0;
   return Oe[r % Oe.length];
 }
-function mn({ tiles: t, pinned: r, className: n }) {
+function hn({ tiles: t, pinned: r, className: n }) {
   if (r)
-    return /* @__PURE__ */ i("div", { className: d("flex flex-col md:flex-row gap-2 h-full min-h-0", n), children: [
+    return /* @__PURE__ */ c("div", { className: d("flex flex-col md:flex-row gap-2 h-full min-h-0", n), children: [
       /* @__PURE__ */ e("div", { className: "flex-1 min-h-0", children: r }),
       t.length > 0 && /* @__PURE__ */ e("div", { className: "flex md:flex-col gap-2 md:w-48 overflow-auto", children: t.map((a, l) => /* @__PURE__ */ e("div", { className: "min-w-40 md:min-w-0", children: a }, l)) })
     ] });
   const s = t.length <= 1 ? "grid-cols-1" : t.length <= 4 ? "grid-cols-2" : t.length <= 9 ? "grid-cols-3" : "grid-cols-4";
   return /* @__PURE__ */ e("div", { className: d("grid gap-2 h-full", s, n), children: t.map((a, l) => /* @__PURE__ */ e("div", { children: a }, l)) });
 }
-function fn({
+function xn({
   name: t,
   avatarUrl: r,
   muted: n,
@@ -37,20 +37,20 @@ function fn({
   hasVideo: a,
   videoSlot: l,
   className: o,
-  fill: u
+  fill: m
 }) {
-  return /* @__PURE__ */ i(
+  return /* @__PURE__ */ c(
     "div",
     {
       className: d(
         "relative rounded-lg overflow-hidden bg-video-surface flex items-center justify-center",
-        u ? "h-full w-full" : "aspect-video",
+        m ? "h-full w-full" : "aspect-video",
         s && "ring-2 ring-speaking",
         o
       ),
       children: [
         a && l ? /* @__PURE__ */ e("div", { className: "absolute inset-0", children: l }) : /* @__PURE__ */ e("div", { className: "flex flex-col items-center gap-2 text-gray-300", children: r ? /* @__PURE__ */ e("img", { src: r, alt: t, className: "w-16 h-16 rounded-full object-cover" }) : /* @__PURE__ */ e("div", { className: "w-16 h-16 rounded-full bg-video-surface-strong flex items-center justify-center", children: a ? /* @__PURE__ */ e(tt, { className: "w-8 h-8" }) : /* @__PURE__ */ e(rt, { className: "w-8 h-8" }) }) }),
-        /* @__PURE__ */ i("div", { className: "absolute bottom-2 left-2 flex items-center gap-1.5 px-2 py-1 rounded bg-video-overlay text-white text-xs", children: [
+        /* @__PURE__ */ c("div", { className: "absolute bottom-2 left-2 flex items-center gap-1.5 px-2 py-1 rounded bg-video-overlay text-white text-xs", children: [
           n ? /* @__PURE__ */ e(nt, { className: "w-3 h-3" }) : /* @__PURE__ */ e(st, { className: "w-3 h-3" }),
           /* @__PURE__ */ e("span", { className: "truncate max-w-35", children: t })
         ] })
@@ -58,7 +58,7 @@ function fn({
     }
   );
 }
-function hn({ attach: t, active: r = !0, mirrored: n = !1, className: s }) {
+function bn({ attach: t, active: r = !0, mirrored: n = !1, className: s }) {
   const a = se(null);
   return X(() => {
     if (!r || !a.current) return;
@@ -116,14 +116,14 @@ const Et = {
     leftIcon: a,
     rightIcon: l,
     iconOnly: o = !1,
-    shape: u = "default",
-    className: m,
+    shape: m = "default",
+    className: u,
     children: y,
     disabled: x,
     ...h
   }, b) => {
     const v = x || s;
-    return /* @__PURE__ */ i(
+    return /* @__PURE__ */ c(
       "button",
       {
         ref: b,
@@ -133,7 +133,7 @@ const Et = {
           // 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",
-          u === "circle" ? "rounded-full" : "rounded-md",
+          m === "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",
@@ -142,7 +142,7 @@ const Et = {
           o ? Mt[r] : zt[r],
           (n || r === "full") && "w-full",
           s && "cursor-wait",
-          m
+          u
         ),
         disabled: v,
         "aria-busy": s || void 0,
@@ -165,7 +165,7 @@ const Et = {
   }
 );
 ae.displayName = "Button";
-const xn = ({
+const gn = ({
   children: t,
   size: r = "md",
   orientation: n = "horizontal",
@@ -213,9 +213,9 @@ const xn = ({
   onClick: a,
   className: l,
   "aria-label": o,
-  ...u
+  ...m
 }) => {
-  const m = typeof r == "number" ? r : Dt(r), y = d(
+  const u = typeof r == "number" ? r : Dt(r), y = d(
     "inline-block shrink-0",
     $t[n],
     s && [
@@ -224,7 +224,7 @@ const xn = ({
     ],
     l
   ), x = {
-    size: m,
+    size: u,
     strokeWidth: 2,
     className: y,
     onClick: s ? a : void 0,
@@ -235,7 +235,7 @@ const xn = ({
     onKeyDown: s ? (h) => {
       (h.key === "Enter" || h.key === " ") && (h.preventDefault(), a?.());
     } : void 0,
-    ...u
+    ...m
   };
   return /* @__PURE__ */ e(t, { ...x });
 };
@@ -252,14 +252,14 @@ function $e(t, r, { gap: n = 6, matchWidth: s = !1, placement: a = "bottom-start
   const [l, o] = O({});
   return yt(() => {
     if (!t) return;
-    const u = () => {
-      const m = r.current;
-      if (!m) return;
-      const y = m.getBoundingClientRect(), x = window.innerHeight - y.bottom, h = y.top, b = a.startsWith("top"), v = b ? h < 200 && x > h : x < 200 && h > x, k = b !== v, p = { position: "fixed" };
-      k ? (p.bottom = window.innerHeight - y.top + n, p.maxHeight = Math.max(120, h - n * 2)) : (p.top = y.bottom + n, p.maxHeight = Math.max(120, x - n * 2)), a.endsWith("end") ? p.right = window.innerWidth - y.right : p.left = y.left, s && (p.width = y.width), o(p);
+    const m = () => {
+      const u = r.current;
+      if (!u) return;
+      const y = u.getBoundingClientRect(), x = window.innerHeight - y.bottom, h = y.top, b = a.startsWith("top"), v = b ? h < 200 && x > h : x < 200 && h > x, k = b !== v, g = { position: "fixed" };
+      k ? (g.bottom = window.innerHeight - y.top + n, g.maxHeight = Math.max(120, h - n * 2)) : (g.top = y.bottom + n, g.maxHeight = Math.max(120, x - n * 2)), a.endsWith("end") ? g.right = window.innerWidth - y.right : g.left = y.left, s && (g.width = y.width), o(g);
     };
-    return u(), window.addEventListener("scroll", u, !0), window.addEventListener("resize", u), () => {
-      window.removeEventListener("scroll", u, !0), window.removeEventListener("resize", u);
+    return m(), window.addEventListener("scroll", m, !0), window.addEventListener("resize", m), () => {
+      window.removeEventListener("scroll", m, !0), window.removeEventListener("resize", m);
     };
   }, [t, r, n, s, a]), l;
 }
@@ -271,24 +271,24 @@ const Ve = ({
   rootClassName: a,
   triggerClassName: l,
   disabled: o = !1,
-  triggerLabel: u
+  triggerLabel: m
 }) => {
-  const [m, y] = O(!1), x = se(null), h = se(null), b = $e(m, h, { placement: n });
+  const [u, y] = O(!1), x = se(null), h = se(null), b = $e(u, h, { placement: n });
   X(() => {
-    if (!m) return;
-    const p = ($) => {
+    if (!u) return;
+    const g = ($) => {
       x.current && !x.current.contains($.target) && y(!1);
     }, f = ($) => {
       $.key === "Escape" && y(!1);
     };
-    return document.addEventListener("mousedown", p), document.addEventListener("keydown", f), () => {
-      document.removeEventListener("mousedown", p), document.removeEventListener("keydown", f);
+    return document.addEventListener("mousedown", g), document.addEventListener("keydown", f), () => {
+      document.removeEventListener("mousedown", g), document.removeEventListener("keydown", f);
     };
-  }, [m]);
-  const v = (p) => {
-    p.stopPropagation(), !o && y((f) => !f);
+  }, [u]);
+  const v = (g) => {
+    g.stopPropagation(), !o && y((f) => !f);
   }, k = () => y(!1);
-  return /* @__PURE__ */ i("div", { ref: x, className: d("relative inline-flex", a), children: [
+  return /* @__PURE__ */ c("div", { ref: x, className: d("relative inline-flex", a), children: [
     /* @__PURE__ */ e(
       "button",
       {
@@ -296,8 +296,8 @@ const Ve = ({
         type: "button",
         onClick: v,
         disabled: o,
-        "aria-label": u,
-        "aria-expanded": m,
+        "aria-label": m,
+        "aria-expanded": u,
         className: d(
           "inline-flex items-center",
           o && "cursor-not-allowed opacity-50",
@@ -306,7 +306,7 @@ const Ve = ({
         children: t
       }
     ),
-    m && /* @__PURE__ */ e(
+    u && /* @__PURE__ */ e(
       "div",
       {
         className: d(
@@ -350,15 +350,15 @@ function Lt({
   size: a = "md",
   active: l = !1,
   caret: o = !1,
-  menu: u,
-  menuClassName: m,
+  menu: m,
+  menuClassName: u,
   onClear: y,
   clearLabel: x = "Filter wissen",
   onClick: h,
   title: b,
   className: v
 }) {
-  const k = l && !!y, p = s === "pill" ? "rounded-full" : "rounded-md", f = _t({ active: l, tone: n, shape: s, size: a, className: v }), $ = /* @__PURE__ */ i(ve, { children: [
+  const k = l && !!y, g = s === "pill" ? "rounded-full" : "rounded-md", f = _t({ active: l, tone: n, shape: s, size: a, className: v }), $ = /* @__PURE__ */ c(ve, { children: [
     r,
     t,
     o && /* @__PURE__ */ e(Q, { icon: Se, size: "xs" })
@@ -368,34 +368,34 @@ function Lt({
       type: "button",
       "aria-label": x,
       onClick: y,
-      className: d("inline-flex h-full items-center pr-3 focus-visible:outline-none focus-visible:focus-ring", p),
+      className: d("inline-flex h-full items-center pr-3 focus-visible:outline-none focus-visible:focus-ring", g),
       children: /* @__PURE__ */ e(Q, { icon: we, size: "xs" })
     }
   );
-  return u ? /* @__PURE__ */ i("span", { className: f, title: b, children: [
+  return m ? /* @__PURE__ */ c("span", { className: f, title: b, children: [
     /* @__PURE__ */ e(
       Ve,
       {
         trigger: $,
         rootClassName: "h-full",
         triggerClassName: d(C, "h-full"),
-        className: d("min-w-menu p-1.5", m),
-        children: u
+        className: d("min-w-menu p-1.5", u),
+        children: m
       }
     ),
     q
-  ] }) : k ? /* @__PURE__ */ i("span", { className: f, title: b, children: [
+  ] }) : k ? /* @__PURE__ */ c("span", { className: f, title: b, children: [
     /* @__PURE__ */ e("button", { type: "button", onClick: h, className: C, children: $ }),
     q
   ] }) : /* @__PURE__ */ e("button", { type: "button", title: b, onClick: h, className: d(f, C), children: $ });
 }
-const It = {
+const Pt = {
   xs: "text-xs",
   sm: "text-sm",
   md: "text-base",
   lg: "text-md",
   xl: "text-lg"
-}, Pt = {
+}, It = {
   primary: "text-text hover:text-info-fg hover:underline",
   info: "text-info-fg hover:underline",
   secondary: "text-text-muted hover:text-text",
@@ -413,7 +413,7 @@ const It = {
   warning: "bg-warning-soft",
   error: "bg-danger-soft",
   info: "bg-info-soft"
-}, bn = ({
+}, pn = ({
   variant: t = "default",
   size: r = "md",
   color: n = "primary",
@@ -421,17 +421,17 @@ const It = {
   external: a = !1,
   className: l,
   children: o,
-  href: u,
-  target: m,
+  href: m,
+  target: u,
   rel: y,
   ...x
 }) => {
-  const h = a || u && (u.startsWith("http") || u.startsWith("mailto:")), b = d(
+  const h = a || m && (m.startsWith("http") || m.startsWith("mailto:")), b = d(
     "inline-flex items-center gap-1 underline-offset-2",
     "transition-colors duration-fast ease-out",
     "focus-visible:outline-none focus-visible:focus-ring",
-    It[r],
-    !s && Pt[n],
+    Pt[r],
+    !s && It[n],
     t === "subtle" && "no-underline opacity-70 hover:opacity-100",
     t === "underline" && "underline decoration-1 hover:decoration-2",
     t === "button" && [
@@ -442,12 +442,12 @@ const It = {
     l
   ), v = {
     ...x,
-    href: s ? void 0 : u,
-    target: h ? "_blank" : m,
+    href: s ? void 0 : m,
+    target: h ? "_blank" : u,
     rel: h ? "noopener noreferrer" : y,
     "aria-disabled": s || void 0
   };
-  return /* @__PURE__ */ i("a", { className: b, ...v, children: [
+  return /* @__PURE__ */ c("a", { className: b, ...v, children: [
     o,
     h && /* @__PURE__ */ e(at, { className: "size-icon-sm shrink-0", "aria-hidden": !0 })
   ] });
@@ -463,28 +463,28 @@ function Ft({
   tone: a = "sunk",
   fullWidth: l = !1,
   className: o,
-  "aria-label": u
+  "aria-label": m
 }) {
   return /* @__PURE__ */ e(
     "div",
     {
       role: "tablist",
-      "aria-label": u,
+      "aria-label": m,
       className: d(
         "gap-0.5 rounded-md p-0.5",
         a === "track" ? "bg-surface-track" : "bg-surface-sunk",
         l ? "flex w-full" : "inline-flex",
         o
       ),
-      children: t.map((m) => {
-        const y = m.value === r;
+      children: t.map((u) => {
+        const y = u.value === r;
         return /* @__PURE__ */ e(
           "button",
           {
             role: "tab",
             "aria-selected": y,
             type: "button",
-            onClick: () => n(m.value),
+            onClick: () => n(u.value),
             className: d(
               "inline-flex cursor-pointer items-center justify-center gap-1.5 rounded-sm",
               "transition-colors duration-fast ease-out",
@@ -493,9 +493,9 @@ function Ft({
               Ot[s],
               y ? "bg-surface text-text font-medium shadow-sm" : "text-text-muted hover:text-text"
             ),
-            children: m.label
+            children: u.label
           },
-          m.value
+          u.value
         );
       })
     }
@@ -517,12 +517,12 @@ function qe({
   icon: a,
   options: l,
   disabled: o = !1,
-  loading: u = !1,
-  menuPlacement: m = "bottom-end",
+  loading: m = !1,
+  menuPlacement: u = "bottom-end",
   menuLabel: y = "More options"
 }) {
-  const x = o || u, h = l.length > 0;
-  return /* @__PURE__ */ i("div", { className: d("inline-flex items-center", n === "primary" && "gap-0.5"), children: [
+  const x = o || m, h = l.length > 0;
+  return /* @__PURE__ */ c("div", { className: d("inline-flex items-center", n === "primary" && "gap-0.5"), children: [
     /* @__PURE__ */ e(
       ae,
       {
@@ -530,7 +530,7 @@ function qe({
         size: s,
         onClick: r,
         disabled: o,
-        loading: u,
+        loading: m,
         leftIcon: a,
         className: d(h && "rounded-r-none"),
         children: t
@@ -539,7 +539,7 @@ function qe({
     h && /* @__PURE__ */ e(
       Ve,
       {
-        placement: m,
+        placement: u,
         disabled: x,
         triggerLabel: y,
         className: "min-w-menu py-1",
@@ -557,7 +557,7 @@ function qe({
             children: /* @__PURE__ */ e(Se, { className: "size-icon-md" })
           }
         ),
-        children: (b) => /* @__PURE__ */ e(ve, { children: l.map((v) => /* @__PURE__ */ i(
+        children: (b) => /* @__PURE__ */ e(ve, { children: l.map((v) => /* @__PURE__ */ c(
           "button",
           {
             type: "button",
@@ -605,11 +605,11 @@ const Ht = {
     indeterminate: a = !1,
     containerClassName: l,
     labelClassName: o,
-    className: u,
-    id: m,
+    className: m,
+    id: u,
     ...y
   }, x) => {
-    const h = oe.useId(), b = m || `checkbox-${h}`, v = !!n, k = oe.useRef(null), p = oe.useCallback(
+    const h = oe.useId(), b = u || `checkbox-${h}`, v = !!n, k = oe.useRef(null), g = oe.useCallback(
       (f) => {
         k.current = f, typeof x == "function" ? x(f) : x && typeof x == "object" && (x.current = f);
       },
@@ -617,12 +617,12 @@ const Ht = {
     );
     return oe.useEffect(() => {
       k.current && (k.current.indeterminate = a);
-    }, [a]), /* @__PURE__ */ i("div", { className: d("flex flex-col", l), children: [
-      /* @__PURE__ */ i("div", { className: d("flex items-center gap-3", Vt[s]), children: [
+    }, [a]), /* @__PURE__ */ c("div", { className: d("flex flex-col", l), children: [
+      /* @__PURE__ */ c("div", { className: d("flex items-center gap-3", Vt[s]), children: [
         /* @__PURE__ */ e(
           "input",
           {
-            ref: p,
+            ref: g,
             id: b,
             type: "checkbox",
             "aria-invalid": v || void 0,
@@ -637,12 +637,12 @@ const Ht = {
               "disabled:cursor-not-allowed disabled:bg-surface-hover",
               Ht[s],
               v ? "border-danger-border" : "border-border-strong",
-              u
+              m
             ),
             ...y
           }
         ),
-        t && /* @__PURE__ */ i("div", { className: "flex-1", children: [
+        t && /* @__PURE__ */ c("div", { className: "flex-1", children: [
           /* @__PURE__ */ e(
             "label",
             {
@@ -672,49 +672,49 @@ const Ut = () => /* @__PURE__ */ e(Q, { icon: lt, size: "md", color: "current" }
   required: a = !1,
   size: l = "md",
   className: o,
-  minDate: u,
-  maxDate: m,
+  minDate: m,
+  maxDate: u,
   format: y = "MM/dd/yyyy",
   withTime: x = !1
 }, h) => {
-  const [b, v] = O(!1), [k, p] = O(() => t || /* @__PURE__ */ new Date()), f = se(null), $ = se(null), C = $e(b, $);
+  const [b, v] = O(!1), [k, g] = O(() => t || /* @__PURE__ */ new Date()), f = se(null), $ = se(null), C = $e(b, $);
   X(() => {
-    const c = (S) => {
+    const i = (S) => {
       f.current && !f.current.contains(S.target) && v(!1);
     };
-    return b && document.addEventListener("mousedown", c), () => {
-      document.removeEventListener("mousedown", c);
+    return b && document.addEventListener("mousedown", i), () => {
+      document.removeEventListener("mousedown", i);
     };
   }, [b]);
-  const q = (c) => {
-    if (!c) return "";
-    const S = c.getDate().toString().padStart(2, "0"), g = (c.getMonth() + 1).toString().padStart(2, "0"), _ = c.getFullYear(), N = y === "dd/MM/yyyy" ? `${S}/${g}/${_}` : y === "yyyy-MM-dd" ? `${_}-${g}-${S}` : `${g}/${S}/${_}`;
-    return x ? `${N} ${T(c)}` : N;
-  }, T = (c) => `${c.getHours().toString().padStart(2, "0")}:${c.getMinutes().toString().padStart(2, "0")}`, G = (c) => {
-    const [S, g] = c.split(":").map(Number);
-    if (Number.isNaN(S) || Number.isNaN(g)) return;
+  const q = (i) => {
+    if (!i) return "";
+    const S = i.getDate().toString().padStart(2, "0"), p = (i.getMonth() + 1).toString().padStart(2, "0"), _ = i.getFullYear(), N = y === "dd/MM/yyyy" ? `${S}/${p}/${_}` : y === "yyyy-MM-dd" ? `${_}-${p}-${S}` : `${p}/${S}/${_}`;
+    return x ? `${N} ${T(i)}` : N;
+  }, T = (i) => `${i.getHours().toString().padStart(2, "0")}:${i.getMinutes().toString().padStart(2, "0")}`, G = (i) => {
+    const [S, p] = i.split(":").map(Number);
+    if (Number.isNaN(S) || Number.isNaN(p)) return;
     const _ = t ? new Date(t) : /* @__PURE__ */ new Date();
-    _.setHours(S, g, 0, 0), r?.(_);
+    _.setHours(S, p, 0, 0), r?.(_);
   }, V = () => {
-    const c = k.getFullYear(), S = k.getMonth(), g = new Date(c, S, 1), _ = new Date(g);
-    _.setDate(_.getDate() - g.getDay());
+    const i = k.getFullYear(), S = k.getMonth(), p = new Date(i, S, 1), _ = new Date(p);
+    _.setDate(_.getDate() - p.getDay());
     const N = [], U = new Date(_);
     for (let re = 0; re < 42; re++)
       N.push(new Date(U)), U.setDate(U.getDate() + 1);
     return N;
-  }, I = (c) => {
-    if (c.getMonth() === k.getMonth() && !(u && c < u) && !(m && c > m)) {
+  }, P = (i) => {
+    if (i.getMonth() === k.getMonth() && !(m && i < m) && !(u && i > u)) {
       if (x) {
-        const g = new Date(c);
-        g.setHours(t?.getHours() ?? 0, t?.getMinutes() ?? 0, 0, 0), r?.(g);
+        const p = new Date(i);
+        p.setHours(t?.getHours() ?? 0, t?.getMinutes() ?? 0, 0, 0), r?.(p);
         return;
       }
-      r?.(c), v(!1);
+      r?.(i), v(!1);
     }
   }, H = () => {
-    p(new Date(k.getFullYear(), k.getMonth() - 1, 1));
+    g(new Date(k.getFullYear(), k.getMonth() - 1, 1));
   }, te = () => {
-    p(new Date(k.getFullYear(), k.getMonth() + 1, 1));
+    g(new Date(k.getFullYear(), k.getMonth() + 1, 1));
   }, J = () => {
     r?.(null), v(!1);
   }, K = d(
@@ -744,8 +744,8 @@ const Ut = () => /* @__PURE__ */ e(Q, { icon: lt, size: "md", color: "current" }
     "November",
     "December"
   ];
-  return /* @__PURE__ */ i("div", { ref: f, className: "relative", children: [
-    /* @__PURE__ */ i("div", { ref: $, className: "relative", children: [
+  return /* @__PURE__ */ c("div", { ref: f, className: "relative", children: [
+    /* @__PURE__ */ c("div", { ref: $, className: "relative", children: [
       /* @__PURE__ */ e(
         "input",
         {
@@ -771,8 +771,8 @@ const Ut = () => /* @__PURE__ */ e(Q, { icon: lt, size: "md", color: "current" }
         }
       )
     ] }),
-    b && /* @__PURE__ */ i("div", { style: C, className: "fixed z-overlay overflow-auto rounded-lg border border-border bg-surface p-4 shadow-overlay min-w-panel", children: [
-      /* @__PURE__ */ i("div", { className: "flex items-center justify-between mb-4", children: [
+    b && /* @__PURE__ */ c("div", { style: C, 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",
           {
@@ -781,7 +781,7 @@ const Ut = () => /* @__PURE__ */ e(Q, { icon: lt, size: "md", color: "current" }
             children: /* @__PURE__ */ e(Wt, {})
           }
         ),
-        /* @__PURE__ */ i("h3", { className: "text-sm font-medium text-text", children: [
+        /* @__PURE__ */ c("h3", { className: "text-sm font-medium text-text", children: [
           w[k.getMonth()],
           " ",
           k.getFullYear()
@@ -795,29 +795,29 @@ const Ut = () => /* @__PURE__ */ e(Q, { icon: lt, size: "md", color: "current" }
           }
         )
       ] }),
-      /* @__PURE__ */ e("div", { className: "grid grid-cols-7 gap-1 mb-2", children: ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"].map((c) => /* @__PURE__ */ e("div", { className: "text-xs font-medium text-text-muted text-center py-1", children: c }, c)) }),
-      /* @__PURE__ */ e("div", { className: "grid grid-cols-7 gap-1", children: ce.map((c, S) => {
-        const g = c.getMonth() === k.getMonth(), _ = t && c.toDateString() === t.toDateString(), N = c.toDateString() === (/* @__PURE__ */ new Date()).toDateString(), U = !g || u && c < u || m && c > m;
+      /* @__PURE__ */ e("div", { className: "grid grid-cols-7 gap-1 mb-2", children: ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"].map((i) => /* @__PURE__ */ e("div", { className: "text-xs font-medium text-text-muted text-center py-1", children: i }, i)) }),
+      /* @__PURE__ */ e("div", { className: "grid grid-cols-7 gap-1", children: ce.map((i, S) => {
+        const p = i.getMonth() === k.getMonth(), _ = t && i.toDateString() === t.toDateString(), N = i.toDateString() === (/* @__PURE__ */ new Date()).toDateString(), U = !p || m && i < m || u && i > u;
         return /* @__PURE__ */ e(
           "button",
           {
-            onClick: () => !U && I(c),
+            onClick: () => !U && P(i),
             disabled: U,
             className: d(
               "w-8 h-8 text-sm rounded transition-colors duration-fast",
               {
-                "text-text hover:bg-surface-hover": g && !_ && !U,
+                "text-text hover:bg-surface-hover": p && !_ && !U,
                 "bg-accent text-accent-fg": _,
                 "bg-surface-hover text-text": N && !_,
                 "text-text-muted cursor-not-allowed": U
               }
             ),
-            children: c.getDate()
+            children: i.getDate()
           },
           S
         );
       }) }),
-      x && /* @__PURE__ */ i("div", { className: "mt-3 flex items-center gap-2 border-t border-border pt-3", children: [
+      x && /* @__PURE__ */ c("div", { className: "mt-3 flex items-center gap-2 border-t border-border pt-3", children: [
         /* @__PURE__ */ e("label", { htmlFor: "datepicker-time", className: "text-sm text-text-muted", children: "Tijd" }),
         /* @__PURE__ */ e(
           "input",
@@ -825,12 +825,12 @@ const Ut = () => /* @__PURE__ */ e(Q, { icon: lt, size: "md", color: "current" }
             id: "datepicker-time",
             type: "time",
             value: t ? T(t) : "",
-            onChange: (c) => G(c.target.value),
+            onChange: (i) => G(i.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"
           }
         )
       ] }),
-      /* @__PURE__ */ i("div", { className: "flex justify-between items-center mt-4 pt-3 border-t border-border", children: [
+      /* @__PURE__ */ c("div", { className: "flex justify-between items-center mt-4 pt-3 border-t border-border", children: [
         /* @__PURE__ */ e(
           "button",
           {
@@ -864,23 +864,23 @@ const Ut = () => /* @__PURE__ */ e(Q, { icon: lt, size: "md", color: "current" }
     fullWidth: a = !1,
     disabled: l = !1,
     options: o,
-    placeholder: u,
-    containerClassName: m,
+    placeholder: m,
+    containerClassName: u,
     labelClassName: y,
     className: x,
     id: h,
     searchable: b,
     multiple: v,
     value: k,
-    onChange: p,
+    onChange: g,
     allowCreate: f,
     onCreateOption: $,
     ...C
   }, q) => {
-    const T = h || `select-${Math.random().toString(36).substr(2, 9)}`, G = !!n, [V, I] = oe.useState(!1), [H, te] = oe.useState(""), J = oe.useRef(null), K = oe.useRef(null), ce = $e(V, K, { matchWidth: !0 }), [w, c] = oe.useState(o);
+    const T = h || `select-${Math.random().toString(36).substr(2, 9)}`, G = !!n, [V, P] = oe.useState(!1), [H, te] = oe.useState(""), J = oe.useRef(null), K = oe.useRef(null), ce = $e(V, K, { matchWidth: !0 }), [w, i] = oe.useState(o);
     oe.useImperativeHandle(q, () => J.current), oe.useEffect(() => {
       const D = (A) => {
-        J.current && !J.current.contains(A.target) && I(!1);
+        J.current && !J.current.contains(A.target) && P(!1);
       };
       return document.addEventListener("mousedown", D), () => document.removeEventListener("mousedown", D);
     }, []);
@@ -889,7 +889,7 @@ const Ut = () => /* @__PURE__ */ e(Q, { icon: lt, size: "md", color: "current" }
         (z) => ke(z.value) === ke(A) || ke(z.label) === ke(A)
       ),
       []
-    ), g = oe.useCallback(
+    ), p = oe.useCallback(
       (D, A) => {
         const z = [...D], F = (j) => {
           const B = (j ?? "").trim();
@@ -900,19 +900,19 @@ const Ut = () => /* @__PURE__ */ e(Q, { icon: lt, size: "md", color: "current" }
       [S]
     );
     oe.useEffect(() => {
-      c((D) => {
+      i((D) => {
         const A = [...o];
         return D.forEach((z) => {
           !S(A, z.value) && !S(A, z.label) && A.push(z);
-        }), g(A, k);
+        }), p(A, k);
       });
-    }, [o, k, g, S]);
+    }, [o, k, p, S]);
     const _ = (D) => {
       if (v) {
         const A = Array.isArray(k) ? k : [], z = A.includes(D) ? A.filter((F) => F !== D) : [...A, D];
-        p?.(z);
+        g?.(z);
       } else
-        p?.(D), I(!1), te("");
+        g?.(D), P(!1), te("");
     }, N = v ? null : w.find((D) => D.value === k), U = v ? w.filter(
       (D) => Array.isArray(k) && k.includes(D.value)
     ) : [], re = b && H ? w.filter(
@@ -925,19 +925,19 @@ const Ut = () => /* @__PURE__ */ e(Q, { icon: lt, size: "md", color: "current" }
         label: A
       };
       if (S(w, z.value) || S(w, z.label)) {
-        _(z.value), te(""), v || I(!1);
+        _(z.value), te(""), v || P(!1);
         return;
       }
-      c((F) => [...F, z]), _(z.value), te(""), v || I(!1);
-    }, P = () => v ? U.length > 0 ? U.map((D) => D.label).join(", ") : u || "Select options" : N?.label || u || "Select an option";
-    return /* @__PURE__ */ i(
+      i((F) => [...F, z]), _(z.value), te(""), v || P(!1);
+    }, I = () => v ? U.length > 0 ? U.map((D) => D.label).join(", ") : m || "Select options" : N?.label || m || "Select an option";
+    return /* @__PURE__ */ c(
       "div",
       {
         ref: J,
         className: d(
           "relative flex flex-col",
           a && "w-full",
-          m
+          u
         ),
         ...C,
         children: [
@@ -945,7 +945,7 @@ const Ut = () => /* @__PURE__ */ e(Q, { icon: lt, size: "md", color: "current" }
             "label",
             {
               htmlFor: T,
-              onClick: () => I(!V),
+              onClick: () => P(!V),
               className: d(
                 "block text-xs font-semibold uppercase tracking-label mb-1.5",
                 G ? "text-danger-fg" : "text-text-muted",
@@ -954,15 +954,15 @@ const Ut = () => /* @__PURE__ */ e(Q, { icon: lt, size: "md", color: "current" }
               children: t
             }
           ),
-          /* @__PURE__ */ i("div", { className: "relative", children: [
-            /* @__PURE__ */ i(
+          /* @__PURE__ */ c("div", { className: "relative", children: [
+            /* @__PURE__ */ c(
               "button",
               {
                 ref: K,
                 type: "button",
                 id: T,
                 disabled: l,
-                onClick: () => I(!V),
+                onClick: () => P(!V),
                 className: d(
                   "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",
@@ -973,7 +973,7 @@ const Ut = () => /* @__PURE__ */ e(Q, { icon: lt, size: "md", color: "current" }
                   x
                 ),
                 children: [
-                  /* @__PURE__ */ e("span", { className: "truncate flex-1 min-w-0", children: P() }),
+                  /* @__PURE__ */ e("span", { className: "truncate flex-1 min-w-0", children: I() }),
                   /* @__PURE__ */ e(
                     ot,
                     {
@@ -987,7 +987,7 @@ const Ut = () => /* @__PURE__ */ e(Q, { icon: lt, size: "md", color: "current" }
                 ]
               }
             ),
-            V && /* @__PURE__ */ i("div", { style: ce, className: "fixed z-overlay flex flex-col overflow-hidden rounded-lg border border-border bg-surface shadow-overlay", children: [
+            V && /* @__PURE__ */ c("div", { style: ce, 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",
                 {
@@ -1004,7 +1004,7 @@ const Ut = () => /* @__PURE__ */ e(Q, { icon: lt, size: "md", color: "current" }
                   )
                 }
               ) }),
-              ee && /* @__PURE__ */ i(
+              ee && /* @__PURE__ */ c(
                 "div",
                 {
                   className: d(
@@ -1019,15 +1019,15 @@ const Ut = () => /* @__PURE__ */ e(Q, { icon: lt, size: "md", color: "current" }
                   ]
                 }
               ),
-              /* @__PURE__ */ i("ul", { className: "min-h-0 flex-1 overflow-auto py-1", children: [
-                u && !v && /* @__PURE__ */ e(
+              /* @__PURE__ */ c("ul", { className: "min-h-0 flex-1 overflow-auto py-1", children: [
+                m && !v && /* @__PURE__ */ e(
                   "li",
                   {
                     className: "cursor-pointer px-3 py-1.5 text-sm text-text-muted hover:bg-surface-hover",
                     onClick: () => {
-                      p?.(""), I(!1);
+                      g?.(""), P(!1);
                     },
-                    children: u
+                    children: m
                   }
                 ),
                 re.map((D) => {
@@ -1042,7 +1042,7 @@ const Ut = () => /* @__PURE__ */ e(Q, { icon: lt, size: "md", color: "current" }
                         D.disabled ? "opacity-50 cursor-not-allowed" : "hover:bg-surface-hover",
                         A && "bg-accent-soft text-accent font-semibold"
                       ),
-                      children: /* @__PURE__ */ i("div", { className: "flex items-center", children: [
+                      children: /* @__PURE__ */ c("div", { className: "flex items-center", children: [
                         v && /* @__PURE__ */ e(
                           "input",
                           {
@@ -1091,19 +1091,19 @@ const Jt = {
     fullWidth: a = !1,
     startIcon: l,
     endIcon: o,
-    loading: u = !1,
-    containerClassName: m,
+    loading: m = !1,
+    containerClassName: u,
     labelClassName: y,
     className: x,
     id: h,
     ...b
   }, v) => {
-    const k = oe.useId(), p = h || `textfield-${k}`, f = !!n, $ = n || r ? `${p}-description` : void 0;
-    return /* @__PURE__ */ i("div", { className: d("flex flex-col", a && "w-full", m), children: [
+    const k = oe.useId(), g = h || `textfield-${k}`, f = !!n, $ = n || r ? `${g}-description` : void 0;
+    return /* @__PURE__ */ c("div", { className: d("flex flex-col", a && "w-full", u), children: [
       t && /* @__PURE__ */ e(
         "label",
         {
-          htmlFor: p,
+          htmlFor: g,
           className: d(
             Ue,
             f ? "text-danger-fg" : "text-text-muted",
@@ -1112,27 +1112,27 @@ const Jt = {
           children: t
         }
       ),
-      /* @__PURE__ */ i("div", { className: "relative", children: [
+      /* @__PURE__ */ c("div", { className: "relative", children: [
         l && /* @__PURE__ */ e("span", { className: "pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3 text-text-muted", children: l }),
         /* @__PURE__ */ e(
           "input",
           {
             ref: v,
-            id: p,
+            id: g,
             "aria-invalid": f || void 0,
             "aria-describedby": $,
             className: d(
               We,
               Jt[s],
               l && "pl-9",
-              (o || u) && "pr-9",
+              (o || m) && "pr-9",
               Ke(f),
               x
             ),
             ...b
           }
         ),
-        (o || u) && /* @__PURE__ */ e("span", { className: "absolute inset-y-0 right-0 flex items-center pr-3 text-text-muted", children: u ? /* @__PURE__ */ e(
+        (o || m) && /* @__PURE__ */ e("span", { className: "absolute inset-y-0 right-0 flex items-center pr-3 text-text-muted", children: m ? /* @__PURE__ */ e(
           "span",
           {
             "aria-hidden": !0,
@@ -1160,9 +1160,9 @@ function Yt({
   size: a = "md",
   placeholder: l,
   templatePlaceholder: o,
-  showTemplate: u = !0
+  showTemplate: m = !0
 }) {
-  const [m, y] = O([]);
+  const [u, y] = O([]);
   X(() => {
     let h = !0;
     return Promise.resolve(n?.()).then((b) => {
@@ -1173,19 +1173,19 @@ function Yt({
     };
   }, []);
   const x = t ?? {};
-  return /* @__PURE__ */ i("div", { className: "flex flex-col gap-2", children: [
+  return /* @__PURE__ */ c("div", { className: "flex flex-col gap-2", children: [
     /* @__PURE__ */ e(
       Ce,
       {
         size: a,
         fullWidth: !0,
         value: x.folderId ?? "",
-        options: m.map((h) => ({ value: h.id, label: h.name })),
+        options: u.map((h) => ({ value: h.id, label: h.name })),
         placeholder: l ?? "Select a folder",
         onChange: (h) => r?.({ ...x, folderId: h })
       }
     ),
-    u && /* @__PURE__ */ e(
+    m && /* @__PURE__ */ e(
       Ne,
       {
         size: a,
@@ -1197,7 +1197,7 @@ function Yt({
     )
   ] });
 }
-const pe = (...t) => t.filter(Boolean).join(" "), Xt = (t) => /* @__PURE__ */ e(Me, { ...t, strokeWidth: 1.5, "aria-hidden": !0 }), Zt = (t) => /* @__PURE__ */ e(Se, { ...t, strokeWidth: 1.5, "aria-hidden": !0 }), Qt = {
+const ge = (...t) => t.filter(Boolean).join(" "), Xt = (t) => /* @__PURE__ */ e(Me, { ...t, strokeWidth: 1.5, "aria-hidden": !0 }), Zt = (t) => /* @__PURE__ */ e(Se, { ...t, strokeWidth: 1.5, "aria-hidden": !0 }), Qt = {
   sm: "h-control-sm px-3 text-sm",
   md: "h-control-md px-3 text-base",
   lg: "h-control-lg px-3 text-base",
@@ -1216,36 +1216,36 @@ const pe = (...t) => t.filter(Boolean).join(" "), Xt = (t) => /* @__PURE__ */ e(
     fullWidth: a = !1,
     startIcon: l = /* @__PURE__ */ e(Xt, {}),
     loading: o = !1,
-    containerClassName: u,
-    labelClassName: m,
+    containerClassName: m,
+    labelClassName: u,
     className: y,
     id: x,
     options: h,
     onRemoteSearch: b,
     onSelect: v,
     debounceTime: k = 500,
-    showAllOnOpen: p = !1,
+    showAllOnOpen: g = !1,
     value: f,
     onChange: $,
     ...C
   }, q) => {
-    const T = x || `searchfield-${Math.random().toString(36).substr(2, 9)}`, G = !!n, V = se(null), I = se(null), [H, te] = O(f || ""), [J, K] = O(!1), [ce, w] = O(!1), [c, S] = O(!1);
+    const T = x || `searchfield-${Math.random().toString(36).substr(2, 9)}`, G = !!n, V = se(null), P = se(null), [H, te] = O(f || ""), [J, K] = O(!1), [ce, w] = O(!1), [i, S] = O(!1);
     X(() => {
       f !== void 0 && te(f);
     }, [f]);
-    const g = ge(() => {
-      if (p && !c || !H) return h;
-      const P = String(H).toLowerCase();
+    const p = pe(() => {
+      if (g && !i || !H) return h;
+      const I = String(H).toLowerCase();
       return h.filter(
-        (D) => String(D.label).toLowerCase().includes(P)
+        (D) => String(D.label).toLowerCase().includes(I)
       );
-    }, [H, h, p, c]);
+    }, [H, h, g, i]);
     X(() => {
       if (!b || !H) {
         w(!1);
         return;
       }
-      const P = setTimeout(async () => {
+      const I = setTimeout(async () => {
         w(!0);
         try {
           await b(String(H));
@@ -1256,29 +1256,29 @@ const pe = (...t) => t.filter(Boolean).join(" "), Xt = (t) => /* @__PURE__ */ e(
         }
       }, k);
       return () => {
-        clearTimeout(P), w(!1);
+        clearTimeout(I), w(!1);
       };
     }, [H, k, b]), X(() => {
-      const P = (D) => {
+      const I = (D) => {
         V.current && !V.current.contains(D.target) && K(!1);
       };
-      return document.addEventListener("mousedown", P), () => document.removeEventListener("mousedown", P);
+      return document.addEventListener("mousedown", I), () => document.removeEventListener("mousedown", I);
     }, []);
-    const _ = (P) => {
-      const D = P.target.value;
-      te(D), K(!0), S(!0), $ && $(P);
-    }, N = (P) => {
-      te(P.label), K(!1), S(!1), v && v(P.value);
+    const _ = (I) => {
+      const D = I.target.value;
+      te(D), K(!0), S(!0), $ && $(I);
+    }, N = (I) => {
+      te(I.label), K(!1), S(!1), v && v(I.value);
     }, U = () => {
       (h.length > 0 || b) && (K(!0), S(!1));
-    }, re = o || ce, ee = J && (g.length > 0 || re), Y = ge(() => q || I, [q]);
-    return /* @__PURE__ */ i(
+    }, re = o || ce, ee = J && (p.length > 0 || re), Y = pe(() => q || P, [q]);
+    return /* @__PURE__ */ c(
       "div",
       {
-        className: pe(
+        className: ge(
           "flex flex-col",
           a ? "w-full" : "",
-          u || "",
+          m || "",
           "relative"
         ),
         ref: V,
@@ -1287,16 +1287,16 @@ const pe = (...t) => t.filter(Boolean).join(" "), Xt = (t) => /* @__PURE__ */ e(
             "label",
             {
               htmlFor: T,
-              className: pe(
+              className: ge(
                 "block text-sm font-medium mb-1",
                 G ? "text-danger-fg" : "text-text",
-                m || ""
+                u || ""
               ),
               children: t
             }
           ),
-          /* @__PURE__ */ i("div", { className: "relative", children: [
-            l && /* @__PURE__ */ e("div", { className: "absolute left-0 pl-3 flex items-center pointer-events-none h-full", children: /* @__PURE__ */ e("span", { className: pe("text-text-muted", _e[s]), children: l }) }),
+          /* @__PURE__ */ c("div", { className: "relative", children: [
+            l && /* @__PURE__ */ e("div", { className: "absolute left-0 pl-3 flex items-center pointer-events-none h-full", children: /* @__PURE__ */ e("span", { className: ge("text-text-muted", _e[s]), children: l }) }),
             /* @__PURE__ */ e(
               "input",
               {
@@ -1305,7 +1305,7 @@ const pe = (...t) => t.filter(Boolean).join(" "), Xt = (t) => /* @__PURE__ */ e(
                 value: H,
                 onChange: _,
                 onFocus: U,
-                className: pe(
+                className: ge(
                   // Base styles
                   "block w-full rounded-tile border bg-surface-input transition-colors duration-fast ease-out",
                   "placeholder:text-text-subtle focus-visible:outline-none focus-visible:focus-ring",
@@ -1328,7 +1328,7 @@ const pe = (...t) => t.filter(Boolean).join(" "), Xt = (t) => /* @__PURE__ */ e(
               /* @__PURE__ */ e(
                 ct,
                 {
-                  className: pe("animate-spin text-info-fg", _e[s]),
+                  className: ge("animate-spin text-info-fg", _e[s]),
                   "aria-hidden": !0
                 }
               )
@@ -1337,13 +1337,13 @@ const pe = (...t) => t.filter(Boolean).join(" "), Xt = (t) => /* @__PURE__ */ e(
               /* @__PURE__ */ e(
                 Zt,
                 {
-                  className: pe(
+                  className: ge(
                     "text-text-muted cursor-pointer transition-transform",
                     _e[s],
                     J ? "rotate-180" : "rotate-0"
                   ),
                   onClick: () => {
-                    K((P) => (P || S(!1), !P));
+                    K((I) => (I || S(!1), !I));
                   }
                 }
               )
@@ -1354,30 +1354,30 @@ const pe = (...t) => t.filter(Boolean).join(" "), Xt = (t) => /* @__PURE__ */ e(
             {
               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: g.length > 0 ? g.map((P) => /* @__PURE__ */ e(
+              children: p.length > 0 ? p.map((I) => /* @__PURE__ */ e(
                 "li",
                 {
                   className: "px-4 py-2 cursor-pointer text-text hover:bg-accent-soft hover:text-accent transition-colors",
-                  onClick: () => N(P),
+                  onClick: () => N(I),
                   role: "option",
-                  "aria-selected": H === P.label,
-                  children: P.label
+                  "aria-selected": H === I.label,
+                  children: I.label
                 },
-                P.value
+                I.value
               )) : /* @__PURE__ */ e("li", { className: "px-4 py-2 text-text-muted", children: re || o ? "Zoeken op afstand..." : "Geen resultaten gevonden." })
             }
           ),
           (n || r) && /* @__PURE__ */ e(
             "p",
             {
-              className: pe(
+              className: ge(
                 "mt-1 text-xs",
                 G ? "text-danger-fg" : "text-text-muted"
               ),
               children: n || r
             }
           ),
-          b && /* @__PURE__ */ i("p", { className: "mt-2 text-xs text-success-fg", children: [
+          b && /* @__PURE__ */ c("p", { className: "mt-2 text-xs text-success-fg", children: [
             "Huidige zoekterm (niet-gedebounced): ",
             String(H)
           ] })
@@ -1396,9 +1396,9 @@ const Ge = xe(
     clearLabel: a = "Clear search",
     containerClassName: l,
     className: o,
-    disabled: u,
-    ...m
-  }, y) => /* @__PURE__ */ i(
+    disabled: m,
+    ...u
+  }, y) => /* @__PURE__ */ c(
     "div",
     {
       className: d(
@@ -1408,7 +1408,7 @@ const Ge = xe(
         "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",
-        u && "opacity-60",
+        m && "opacity-60",
         l
       ),
       children: [
@@ -1419,7 +1419,7 @@ const Ge = xe(
             ref: y,
             type: "search",
             value: t,
-            disabled: u,
+            disabled: m,
             onChange: (x) => r(x.target.value),
             className: d(
               // The forms base layer hands every input a white fill, a 1px border
@@ -1434,7 +1434,7 @@ const Ge = xe(
               "[&::-webkit-search-cancel-button]:appearance-none",
               o
             ),
-            ...m
+            ...u
           }
         ),
         t ? /* @__PURE__ */ e(
@@ -1454,7 +1454,7 @@ const Ge = xe(
 Ge.displayName = "SearchField";
 const tr = xe(
   ({ checked: t, onChange: r, label: n, disabled: s = !1, className: a, ...l }, o) => {
-    const u = /* @__PURE__ */ e(
+    const m = /* @__PURE__ */ e(
       "span",
       {
         "aria-hidden": !0,
@@ -1476,7 +1476,7 @@ const tr = xe(
         )
       }
     );
-    return /* @__PURE__ */ i(
+    return /* @__PURE__ */ c(
       "label",
       {
         className: d(
@@ -1493,12 +1493,12 @@ const tr = xe(
               role: "switch",
               checked: t,
               disabled: s,
-              onChange: (m) => r(m.target.checked),
+              onChange: (u) => r(u.target.checked),
               className: "peer sr-only",
               ...l
             }
           ),
-          /* @__PURE__ */ e("span", { className: "inline-flex rounded-full peer-focus-visible:focus-ring", children: u }),
+          /* @__PURE__ */ e("span", { className: "inline-flex rounded-full peer-focus-visible:focus-ring", children: m }),
           n && /* @__PURE__ */ e("span", { className: "text-sm text-text", children: n })
         ]
       }
@@ -1514,43 +1514,43 @@ function rr({
   tableRows: a = 8
 }) {
   const l = ({ children: o }) => t === "inline" ? /* @__PURE__ */ e(ve, { children: o }) : /* @__PURE__ */ e("main", { className: "flex-1 bg-surface p-6", children: o });
-  return r ? /* @__PURE__ */ e(l, { children: /* @__PURE__ */ e("div", { className: "w-full max-w-6xl mx-auto animate-pulse", children: r }) }) : /* @__PURE__ */ e(l, { children: /* @__PURE__ */ i("div", { className: "w-full mx-auto space-y-6 animate-pulse", children: [
-    !n && /* @__PURE__ */ i(ve, { children: [
+  return r ? /* @__PURE__ */ e(l, { children: /* @__PURE__ */ e("div", { className: "w-full max-w-6xl mx-auto animate-pulse", children: r }) }) : /* @__PURE__ */ e(l, { children: /* @__PURE__ */ c("div", { className: "w-full mx-auto space-y-6 animate-pulse", children: [
+    !n && /* @__PURE__ */ c(ve, { children: [
       /* @__PURE__ */ e("div", { className: "h-6 w-1/4 rounded-sm bg-surface-hover" }),
-      /* @__PURE__ */ i("div", { className: "space-y-2", children: [
+      /* @__PURE__ */ c("div", { className: "space-y-2", children: [
         /* @__PURE__ */ e("div", { className: "h-4 w-3/4 rounded-sm bg-surface-hover" }),
         /* @__PURE__ */ e("div", { className: "h-4 w-1/2 rounded-sm bg-surface-hover" })
       ] })
     ] }),
-    n && /* @__PURE__ */ i("div", { className: "rounded-lg overflow-hidden", children: [
+    n && /* @__PURE__ */ c("div", { className: "rounded-lg overflow-hidden", children: [
       /* @__PURE__ */ e(
         "div",
         {
           className: "grid gap-2 bg-surface-hover p-3",
           style: { gridTemplateColumns: `repeat(${s}, minmax(0, 1fr))` },
-          children: Array.from({ length: s }).map((o, u) => /* @__PURE__ */ e(
+          children: Array.from({ length: s }).map((o, m) => /* @__PURE__ */ e(
             "div",
             {
               className: "h-4 w-2/3 rounded-sm bg-border-strong"
             },
-            `header-${u}`
+            `header-${m}`
           ))
         }
       ),
-      Array.from({ length: a }).map((o, u) => /* @__PURE__ */ e(
+      Array.from({ length: a }).map((o, m) => /* @__PURE__ */ e(
         "div",
         {
           className: "grid gap-2 border-t border-border-subtle p-3",
           style: { gridTemplateColumns: `repeat(${s}, minmax(0, 1fr))` },
-          children: Array.from({ length: s }).map((m, y) => /* @__PURE__ */ e(
+          children: Array.from({ length: s }).map((u, y) => /* @__PURE__ */ e(
             "div",
             {
               className: "h-4 w-full rounded-sm bg-surface-hover"
             },
-            `cell-${u}-${y}`
+            `cell-${m}-${y}`
           ))
         },
-        `row-${u}`
+        `row-${m}`
       ))
     ] })
   ] }) });
@@ -1563,44 +1563,44 @@ const nr = ({
   placement: a = "bottom-start",
   disabled: l = !1,
   className: o,
-  showCheck: u = !0,
-  header: m
+  showCheck: m = !0,
+  header: u
 }) => {
-  const [y, x] = O(!1), [h, b] = O(null), [v, k] = O({ top: 0, left: 0 }), p = se(null), f = se(null), $ = se(null), C = se(null), q = $e(y, f, { placement: a }), T = se(null), G = () => Array.from(
+  const [y, x] = O(!1), [h, b] = O(null), [v, k] = O({ top: 0, left: 0 }), g = se(null), f = se(null), $ = se(null), C = se(null), q = $e(y, f, { placement: a }), T = se(null), G = () => Array.from(
     C.current?.querySelectorAll("button[data-option-value]:not(:disabled)") ?? []
   );
   X(() => {
     y && G()[0]?.focus();
   }, [y]);
-  const V = (c) => {
-    if (!["ArrowDown", "ArrowUp", "Home", "End"].includes(c.key)) return;
-    const g = G();
-    if (g.length === 0) return;
-    c.preventDefault();
-    const _ = g.indexOf(document.activeElement), N = c.key === "Home" ? 0 : c.key === "End" ? g.length - 1 : c.key === "ArrowDown" ? (_ + 1) % g.length : (_ - 1 + g.length) % g.length;
-    g[N]?.focus();
+  const V = (i) => {
+    if (!["ArrowDown", "ArrowUp", "Home", "End"].includes(i.key)) return;
+    const p = G();
+    if (p.length === 0) return;
+    i.preventDefault();
+    const _ = p.indexOf(document.activeElement), N = i.key === "Home" ? 0 : i.key === "End" ? p.length - 1 : i.key === "ArrowDown" ? (_ + 1) % p.length : (_ - 1 + p.length) % p.length;
+    p[N]?.focus();
   };
   X(() => {
-    const c = (S) => {
-      p.current && (!p.current.contains(S.target) || $.current && !$.current.contains(S.target)) && (x(!1), b(null), T.current && (clearTimeout(T.current), T.current = null));
+    const i = (S) => {
+      g.current && (!g.current.contains(S.target) || $.current && !$.current.contains(S.target)) && (x(!1), b(null), T.current && (clearTimeout(T.current), T.current = null));
     };
-    return y && document.addEventListener("mousedown", c), () => {
-      document.removeEventListener("mousedown", c);
+    return y && document.addEventListener("mousedown", i), () => {
+      document.removeEventListener("mousedown", i);
     };
   }, [y]), X(() => {
-    const c = (S) => {
+    const i = (S) => {
       S.key === "Escape" && (x(!1), b(null), f.current?.focus(), T.current && (clearTimeout(T.current), T.current = null));
     };
-    return y && document.addEventListener("keydown", c), () => {
-      document.removeEventListener("keydown", c);
+    return y && document.addEventListener("keydown", i), () => {
+      document.removeEventListener("keydown", i);
     };
   }, [y]), X(() => {
-    if (h && p.current) {
-      const c = p.current.querySelector(
+    if (h && g.current) {
+      const i = g.current.querySelector(
         `[data-option-value="${h}"]`
       );
-      if (c) {
-        const S = c.getBoundingClientRect();
+      if (i) {
+        const S = i.getBoundingClientRect();
         k({
           top: S.top,
           left: S.right + 8
@@ -1610,18 +1610,18 @@ const nr = ({
   }, [h]), X(() => () => {
     T.current && clearTimeout(T.current);
   }, []);
-  const I = (c) => {
-    c.stopPropagation(), !l && (x(!y), b(null), T.current && (clearTimeout(T.current), T.current = null));
-  }, H = (c, S, g) => {
-    c.stopPropagation(), !S.disabled && !S.divider && (!S.children || S.children.length === 0) && (s?.(S.value, g), x(!1), b(null));
-  }, te = (c) => {
-    T.current && (clearTimeout(T.current), T.current = null), c.children && c.children.length > 0 ? b(c.value) : b(null);
-  }, J = (c) => {
-    c.children && c.children.length > 0 ? T.current = setTimeout(() => {
+  const P = (i) => {
+    i.stopPropagation(), !l && (x(!y), b(null), T.current && (clearTimeout(T.current), T.current = null));
+  }, H = (i, S, p) => {
+    i.stopPropagation(), !S.disabled && !S.divider && (!S.children || S.children.length === 0) && (s?.(S.value, p), x(!1), b(null));
+  }, te = (i) => {
+    T.current && (clearTimeout(T.current), T.current = null), i.children && i.children.length > 0 ? b(i.value) : b(null);
+  }, J = (i) => {
+    i.children && i.children.length > 0 ? T.current = setTimeout(() => {
       b(null);
     }, 150) : b(null);
-  }, K = (c, S, g) => {
-    c.stopPropagation(), !S.disabled && !S.divider && (s?.(S.value, g), x(!1), b(null));
+  }, K = (i, S, p) => {
+    i.stopPropagation(), !S.disabled && !S.divider && (s?.(S.value, p), x(!1), b(null));
   }, ce = d(
     "fixed z-overlay min-w-menu bg-surface rounded-lg shadow-overlay border border-border",
     "max-h-60 overflow-auto"
@@ -1629,10 +1629,10 @@ const nr = ({
     "fixed z-overlay min-w-menu bg-surface rounded-lg shadow-overlay border border-border",
     "max-h-60 overflow-auto"
   );
-  return /* @__PURE__ */ i(
+  return /* @__PURE__ */ c(
     "div",
     {
-      ref: p,
+      ref: g,
       className: d(
         "relative flex flex-row items-center justify-center rounded-lg hover:bg-surface-hover",
         o
@@ -1642,7 +1642,7 @@ const nr = ({
           "button",
           {
             ref: f,
-            onClick: I,
+            onClick: P,
             disabled: l,
             "aria-haspopup": "menu",
             "aria-expanded": y,
@@ -1652,10 +1652,10 @@ const nr = ({
             children: t
           }
         ),
-        y && /* @__PURE__ */ e("div", { ref: C, className: ce, style: q, onKeyDown: V, children: /* @__PURE__ */ i("div", { className: "p-2", role: "menu", children: [
-          m && (typeof m == "string" ? /* @__PURE__ */ e("div", { className: "text-xs font-medium text-text-muted uppercase tracking-label px-3 py-2", children: m }) : m),
-          r.map((c, S) => {
-            if (c.divider)
+        y && /* @__PURE__ */ e("div", { ref: C, className: ce, style: q, onKeyDown: V, children: /* @__PURE__ */ c("div", { className: "p-2", role: "menu", children: [
+          u && (typeof u == "string" ? /* @__PURE__ */ e("div", { className: "text-xs font-medium text-text-muted uppercase tracking-label px-3 py-2", children: u }) : u),
+          r.map((i, S) => {
+            if (i.divider)
               return /* @__PURE__ */ e(
                 "div",
                 {
@@ -1663,41 +1663,41 @@ const nr = ({
                 },
                 `divider-${S}`
               );
-            const g = c.children && c.children.length > 0, _ = h === c.value;
-            return /* @__PURE__ */ i("div", { className: "relative group", children: [
-              /* @__PURE__ */ i(
+            const p = i.children && i.children.length > 0, _ = h === i.value;
+            return /* @__PURE__ */ c("div", { className: "relative group", children: [
+              /* @__PURE__ */ c(
                 "button",
                 {
-                  "data-option-value": c.value,
+                  "data-option-value": i.value,
                   role: "menuitem",
-                  "aria-haspopup": g ? "menu" : void 0,
-                  onClick: (N) => H(N, c),
-                  onMouseEnter: () => te(c),
-                  onMouseLeave: () => J(c),
-                  disabled: c.disabled,
+                  "aria-haspopup": p ? "menu" : void 0,
+                  onClick: (N) => H(N, i),
+                  onMouseEnter: () => te(i),
+                  onMouseLeave: () => J(i),
+                  disabled: i.disabled,
                   className: d(
                     "flex w-full items-center justify-between rounded-md px-3 py-1.5 text-sm text-text transition-colors duration-fast ease-out hover:bg-surface-hover focus-visible:outline-none focus-visible:focus-ring",
                     {
-                      "opacity-50 cursor-not-allowed": c.disabled,
-                      "bg-surface-hover": _ && g
+                      "opacity-50 cursor-not-allowed": i.disabled,
+                      "bg-surface-hover": _ && p
                     }
                   ),
                   children: [
-                    /* @__PURE__ */ i("div", { className: "flex items-center space-x-2 min-w-0", children: [
-                      c.icon && /* @__PURE__ */ e("span", { className: "flex-shrink-0", children: c.icon }),
-                      /* @__PURE__ */ i("div", { className: "flex flex-col items-start min-w-0", children: [
-                        /* @__PURE__ */ e("span", { className: "font-base truncate", children: c.label }),
-                        c.description && /* @__PURE__ */ e("span", { className: "text-xs text-text-muted", children: c.description })
+                    /* @__PURE__ */ c("div", { className: "flex items-center space-x-2 min-w-0", children: [
+                      i.icon && /* @__PURE__ */ e("span", { className: "flex-shrink-0", children: i.icon }),
+                      /* @__PURE__ */ c("div", { className: "flex flex-col items-start min-w-0", children: [
+                        /* @__PURE__ */ e("span", { className: "font-base truncate", children: i.label }),
+                        i.description && /* @__PURE__ */ e("span", { className: "text-xs text-text-muted", children: i.description })
                       ] })
                     ] }),
-                    /* @__PURE__ */ i("div", { className: "flex items-center space-x-2", children: [
-                      u && n === c.value && /* @__PURE__ */ e(Ie, { className: "size-icon-md shrink-0 text-success-fg", "aria-hidden": !0 }),
-                      g && /* @__PURE__ */ e("span", { className: "text-text-muted text-xs", children: "▶" })
+                    /* @__PURE__ */ c("div", { className: "flex items-center space-x-2", children: [
+                      m && n === i.value && /* @__PURE__ */ e(Pe, { className: "size-icon-md shrink-0 text-success-fg", "aria-hidden": !0 }),
+                      p && /* @__PURE__ */ e("span", { className: "text-text-muted text-xs", children: "▶" })
                     ] })
                   ]
                 }
               ),
-              g && _ && /* @__PURE__ */ e(
+              p && _ && /* @__PURE__ */ e(
                 "div",
                 {
                   ref: $,
@@ -1707,14 +1707,14 @@ const nr = ({
                     left: `${v.left}px`
                   },
                   onMouseEnter: () => {
-                    T.current && (clearTimeout(T.current), T.current = null), b(c.value);
+                    T.current && (clearTimeout(T.current), T.current = null), b(i.value);
                   },
                   onMouseLeave: () => {
                     T.current = setTimeout(() => {
                       b(null);
                     }, 150);
                   },
-                  children: /* @__PURE__ */ e("div", { className: "p-2", children: c.children.map((N, U) => {
+                  children: /* @__PURE__ */ e("div", { className: "p-2", children: i.children.map((N, U) => {
                     if (N.divider)
                       return /* @__PURE__ */ e(
                         "div",
@@ -1723,16 +1723,16 @@ const nr = ({
                         },
                         `divider-${U}`
                       );
-                    const re = typeof n == "object" && n[c.value] && n[c.value].includes(
+                    const re = typeof n == "object" && n[i.value] && n[i.value].includes(
                       N.value
                     ) || n === N.value;
-                    return /* @__PURE__ */ i(
+                    return /* @__PURE__ */ c(
                       "button",
                       {
                         onClick: (ee) => K(
                           ee,
                           N,
-                          c.value
+                          i.value
                         ),
                         disabled: N.disabled,
                         className: d(
@@ -1742,14 +1742,14 @@ const nr = ({
                           }
                         ),
                         children: [
-                          /* @__PURE__ */ i("div", { className: "flex items-center space-x-2 min-w-0", children: [
+                          /* @__PURE__ */ c("div", { className: "flex items-center space-x-2 min-w-0", children: [
                             N.icon && /* @__PURE__ */ e("span", { className: "flex-shrink-0", children: N.icon }),
-                            /* @__PURE__ */ i("div", { className: "flex flex-col items-start min-w-0", children: [
+                            /* @__PURE__ */ c("div", { className: "flex flex-col items-start min-w-0", children: [
                               /* @__PURE__ */ e("span", { className: "font-base truncate", children: N.label }),
                               N.description && /* @__PURE__ */ e("span", { className: "text-xs text-text-muted", children: N.description })
                             ] })
                           ] }),
-                          u && re && /* @__PURE__ */ e(Ie, { className: "size-icon-md shrink-0 text-success-fg", "aria-hidden": !0 })
+                          m && re && /* @__PURE__ */ e(Pe, { className: "size-icon-md shrink-0 text-success-fg", "aria-hidden": !0 })
                         ]
                       },
                       N.value
@@ -1757,16 +1757,16 @@ const nr = ({
                   }) })
                 }
               )
-            ] }, c.value);
+            ] }, i.value);
           }),
           (() => {
-            const c = r.reduce((S, g) => {
-              if (g.divider) return S;
-              const _ = g.children ? g.children.filter((N) => !N.divider).length : 0;
+            const i = r.reduce((S, p) => {
+              if (p.divider) return S;
+              const _ = p.children ? p.children.filter((N) => !N.divider).length : 0;
               return S + 1 + _;
             }, 0);
-            return c > 1 && /* @__PURE__ */ e("div", { className: "border-t border-border mt-2 pt-2", children: /* @__PURE__ */ i("div", { className: "text-xs text-text-muted px-3 py-1", children: [
-              c,
+            return i > 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: [
+              i,
               " options available"
             ] }) });
           })()
@@ -1808,14 +1808,14 @@ const nr = ({
   sm: "p-2",
   md: "px-5 py-4",
   lg: "p-6"
-}, pn = ({
+}, vn = ({
   actions: t = [],
   onBack: r,
   backLabel: n = "Back",
   className: s,
   padding: a = "md",
   children: l
-}) => /* @__PURE__ */ i("div", { className: d("flex items-center gap-2", sr[a], s), children: [
+}) => /* @__PURE__ */ c("div", { className: d("flex items-center gap-2", sr[a], s), children: [
   r && /* @__PURE__ */ e(
     ae,
     {
@@ -1828,7 +1828,7 @@ const nr = ({
   ),
   l && /* @__PURE__ */ e("div", { className: "min-w-0 flex-1", children: l }),
   /* @__PURE__ */ e(Je, { actions: t, className: d(!l && "ml-auto") })
-] }), gn = (t) => (r) => t(r instanceof Date ? r : null), vn = (t) => (r) => t(typeof r == "string" ? r : ""), ar = {
+] }), yn = (t) => (r) => t(r instanceof Date ? r : null), Nn = (t) => (r) => t(typeof r == "string" ? r : ""), ar = {
   none: "px-0",
   sm: "px-2",
   md: "px-3.5",
@@ -1853,17 +1853,17 @@ const cr = (t) => {
       Ae,
       {
         value: t.value,
-        onChange: (u) => t.onChange(u),
+        onChange: (m) => t.onChange(m),
         placeholder: t.placeholder || t.label,
-        className: d("min-w-40", o && "border-info text-info-fg")
+        className: d("min-w-40", o && "bg-info-soft text-info-fg")
       }
     );
   }
-  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) => {
+  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) => {
     if (!t.multiSelect) return t.onChange(o);
-    const u = Array.isArray(t.value) ? t.value : [];
+    const m = Array.isArray(t.value) ? t.value : [];
     t.onChange(
-      u.includes(o) ? u.filter((m) => m !== o) : [...u, o]
+      m.includes(o) ? m.filter((u) => u !== o) : [...m, o]
     );
   }, l = r.length > 0;
   return /* @__PURE__ */ e(
@@ -1876,24 +1876,24 @@ const cr = (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((u) => /* @__PURE__ */ e(
+      menu: (o) => /* @__PURE__ */ e("div", { role: "listbox", className: "flex flex-col", children: t.options?.map((m) => /* @__PURE__ */ e(
         "button",
         {
           type: "button",
           role: "option",
-          "aria-selected": s(u.value),
+          "aria-selected": s(m.value),
           onClick: () => {
-            a(u.value), t.multiSelect || o();
+            a(m.value), t.multiSelect || o();
           },
           className: d(
             "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(u.value) ? "font-medium text-text" : "text-text-muted"
+            s(m.value) ? "font-medium text-text" : "text-text-muted"
           ),
-          children: u.label
+          children: m.label
         },
-        u.value
+        m.value
       )) })
     }
   );
@@ -1905,15 +1905,15 @@ const cr = (t) => {
   searchPlaceholder: a = "Search...",
   searchValue: l,
   onSearchChange: o,
-  filters: u = [],
-  toolbarActions: m = [],
+  filters: m = [],
+  toolbarActions: u = [],
   paginated: y = !1,
   defaultPageSize: x = 10,
   actions: h = [],
   onRowClick: b,
   selectable: v = !1,
   selectedRows: k = [],
-  onSelectionChange: p,
+  onSelectionChange: g,
   getRowKey: f = (te, J) => J,
   emptyContent: $,
   footerSummary: C,
@@ -1921,16 +1921,16 @@ const cr = (t) => {
   hoverable: T = !0,
   padding: G = "md",
   className: V,
-  rowClassName: I,
+  rowClassName: P,
   headerBackground: H = !0
 }) => {
-  const [te, J] = O(""), K = l !== void 0, ce = K ? l : te, w = o ?? J, [c, S] = O({
+  const [te, J] = O(""), K = l !== void 0, ce = K ? l : te, w = o ?? J, [i, S] = O({
     column: null,
     direction: null
-  }), [g, _] = O({
+  }), [p, _] = O({
     page: 0,
     pageSize: x
-  }), N = se(null), U = ge(() => {
+  }), N = se(null), U = pe(() => {
     let E = t;
     if (s && !K && ce.trim()) {
       const W = r.filter(
@@ -1941,7 +1941,7 @@ const cr = (t) => {
         return String(ue || "").toLowerCase().includes(le);
       }));
     }
-    return u.forEach((W) => {
+    return m.forEach((W) => {
       W.value && W.value !== "all" && (E = E.filter((le) => {
         const ie = r.find((ue) => ue.id === W.id);
         if (!ie) return !0;
@@ -1949,46 +1949,46 @@ const cr = (t) => {
         return String(R || "") === W.value;
       }));
     }), E;
-  }, [t, ce, K, r, s, u]), re = ge(() => {
-    if (!c.column || !c.direction) return U;
-    const E = r.find((W) => W.id === c.column);
+  }, [t, ce, K, r, s, m]), re = pe(() => {
+    if (!i.column || !i.direction) return U;
+    const E = r.find((W) => W.id === i.column);
     return E ? [...U].sort((W, le) => {
       const ie = typeof E.accessor == "function" ? E.accessor(W) : W[E.accessor], R = typeof E.accessor == "function" ? E.accessor(le) : le[E.accessor];
       let ue = 0;
-      return ie < R ? ue = -1 : ie > R && (ue = 1), c.direction === "desc" ? -ue : ue;
+      return ie < R ? ue = -1 : ie > R && (ue = 1), i.direction === "desc" ? -ue : ue;
     }) : U;
-  }, [U, c, r]), ee = ge(() => {
+  }, [U, i, r]), ee = pe(() => {
     if (!y) return re;
-    const E = g.page * g.pageSize, W = E + g.pageSize;
+    const E = p.page * p.pageSize, W = E + p.pageSize;
     return re.slice(E, W);
-  }, [re, g, y]), Y = he(
+  }, [re, p, y]), Y = he(
     (E) => {
       r.find((le) => le.id === E)?.sortable && S((le) => le.column !== E ? { column: E, direction: "asc" } : le.direction === "asc" ? { column: E, direction: "desc" } : { column: null, direction: null });
     },
     [r]
-  ), P = he((E) => {
+  ), I = he((E) => {
     _((W) => ({ ...W, page: E }));
   }, []), D = he(
     (E, W) => {
-      if (!p) return;
+      if (!g) return;
       const le = f(E, 0);
-      p(W ? [...k, E] : k.filter(
+      g(W ? [...k, E] : k.filter(
         (ie, R) => f(k[R], R) !== le
       ));
     },
-    [k, p, f]
+    [k, g, f]
   ), A = he(
     (E) => {
-      p && p(E ? [...ee] : []);
+      g && g(E ? [...ee] : []);
     },
-    [ee, p]
+    [ee, g]
   );
   X(() => {
     _((E) => ({ ...E, page: 0 }));
-  }, [ce, c]), X(() => {
+  }, [ce, i]), X(() => {
     _((E) => ({ ...E, page: 0 }));
-  }, [u.map((E) => E.value).join(",")]);
-  const z = re.length, F = Math.ceil(z / g.pageSize), j = g.page * g.pageSize + 1, B = Math.min(j + g.pageSize - 1, z), M = ee.length > 0 && ee.every((E) => {
+  }, [m.map((E) => E.value).join(",")]);
+  const z = re.length, F = Math.ceil(z / p.pageSize), j = p.page * p.pageSize + 1, B = Math.min(j + p.pageSize - 1, z), M = ee.length > 0 && ee.every((E) => {
     const W = f(E, 0);
     return k.some(
       (le, ie) => f(le, ie) === W
@@ -1998,9 +1998,9 @@ const cr = (t) => {
     return k.some(
       (le, ie) => f(le, ie) === W
     );
-  }), Z = ar[G], ne = H ? "bg-surface-sunk" : "bg-surface", de = d("text-text", Z), be = s || u.length > 0 || m.length > 0, fe = y && z > 0, De = fe || C !== void 0;
-  return /* @__PURE__ */ i("div", { className: d("flex min-w-0 flex-col", V), children: [
-    be && /* @__PURE__ */ i("div", { className: "flex flex-wrap items-center gap-2 pb-3", children: [
+  }), Z = ar[G], ne = H ? "bg-surface-sunk" : "bg-surface", de = d("text-text", Z), be = s || m.length > 0 || u.length > 0, fe = y && z > 0, De = fe || C !== void 0;
+  return /* @__PURE__ */ c("div", { className: d("flex min-w-0 flex-col", V), children: [
+    be && /* @__PURE__ */ c("div", { className: "flex flex-wrap items-center gap-2 pb-3", children: [
       s && /* @__PURE__ */ e(
         Ge,
         {
@@ -2010,10 +2010,10 @@ const cr = (t) => {
           containerClassName: "w-full sm:w-66"
         }
       ),
-      u.map((E) => /* @__PURE__ */ e(cr, { ...E }, E.id)),
-      m.length > 0 && /* @__PURE__ */ e(Je, { actions: m, className: "ml-auto" })
+      m.map((E) => /* @__PURE__ */ e(cr, { ...E }, E.id)),
+      u.length > 0 && /* @__PURE__ */ e(Je, { actions: u, className: "ml-auto" })
     ] }),
-    /* @__PURE__ */ i("div", { className: "relative w-full overflow-x-auto rounded-lg ring-1 ring-border", children: [
+    /* @__PURE__ */ c("div", { className: "relative w-full overflow-x-auto rounded-lg ring-1 ring-border", children: [
       n && /* @__PURE__ */ e("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ e(
         rr,
         {
@@ -2022,8 +2022,8 @@ const cr = (t) => {
           tableColumns: r.length
         }
       ) }),
-      /* @__PURE__ */ i("table", { ref: N, className: "min-w-full border-collapse text-base text-text", children: [
-        /* @__PURE__ */ e("thead", { className: d(ne, "h-control-lg"), children: /* @__PURE__ */ i("tr", { children: [
+      /* @__PURE__ */ c("table", { ref: N, className: "min-w-full border-collapse text-base text-text", children: [
+        /* @__PURE__ */ e("thead", { className: d(ne, "h-control-lg"), children: /* @__PURE__ */ c("tr", { children: [
           v && /* @__PURE__ */ e("th", { className: d(de, "w-10"), children: /* @__PURE__ */ e(
             ye,
             {
@@ -2052,16 +2052,16 @@ const cr = (t) => {
               ),
               style: { width: E.width },
               onClick: () => E.sortable && Y(E.id),
-              children: /* @__PURE__ */ i("div", { className: "flex items-center gap-1.5", children: [
+              children: /* @__PURE__ */ c("div", { className: "flex items-center gap-1.5", children: [
                 E.headerCell ? E.headerCell() : E.header,
                 E.sortable && /* @__PURE__ */ e(
                   Q,
                   {
-                    icon: c.column === E.id && c.direction === "desc" ? Se : it,
+                    icon: i.column === E.id && i.direction === "desc" ? Se : it,
                     size: "xs",
                     className: d(
                       "transition-opacity duration-fast ease-out",
-                      c.column === E.id ? "text-text opacity-100" : "text-text-subtle opacity-0 group-hover:opacity-100"
+                      i.column === E.id ? "text-text opacity-100" : "text-text-subtle opacity-0 group-hover:opacity-100"
                     )
                   }
                 )
@@ -2085,7 +2085,7 @@ const cr = (t) => {
           const le = f(E, W), ie = k.some(
             (R, ue) => f(R, ue) === le
           );
-          return /* @__PURE__ */ i(
+          return /* @__PURE__ */ c(
             "tr",
             {
               className: d(
@@ -2096,7 +2096,7 @@ const cr = (t) => {
                 T && "transition-colors duration-fast ease-out hover:bg-surface-hover",
                 b && "cursor-pointer",
                 ie && "bg-accent-soft",
-                I?.(E, W)
+                P?.(E, W)
               ),
               onClick: (R) => {
                 R.stopPropagation(), b?.(E, W);
@@ -2158,9 +2158,9 @@ const cr = (t) => {
         }) })
       ] })
     ] }),
-    De && /* @__PURE__ */ i("div", { className: "flex flex-wrap items-center gap-3 px-1 pt-3 text-xs text-text-muted", children: [
+    De && /* @__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: C ?? `Showing ${j}–${B} of ${z}` }),
-      fe && /* @__PURE__ */ i("div", { className: "flex items-center gap-0.5", children: [
+      fe && /* @__PURE__ */ c("div", { className: "flex items-center gap-0.5", children: [
         /* @__PURE__ */ e(
           ae,
           {
@@ -2168,23 +2168,23 @@ const cr = (t) => {
             variant: "ghost",
             iconOnly: !0,
             "aria-label": "Previous page",
-            onClick: () => P(g.page - 1),
-            disabled: g.page === 0,
+            onClick: () => I(p.page - 1),
+            disabled: p.page === 0,
             children: /* @__PURE__ */ e(Q, { icon: Ee, size: "md", color: "current" })
           }
         ),
-        or(g.page, F).map(
+        or(p.page, F).map(
           (E, W) => E === "gap" ? /* @__PURE__ */ e("span", { className: "px-1 text-text-subtle", children: "…" }, `gap-${W}`) : /* @__PURE__ */ e(
             "button",
             {
               type: "button",
-              "aria-current": E === g.page ? "page" : void 0,
-              onClick: () => P(E),
+              "aria-current": E === p.page ? "page" : void 0,
+              onClick: () => I(E),
               className: d(
                 "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 === g.page ? "bg-surface-sunk font-semibold text-text" : "text-text-muted hover:bg-surface-hover hover:text-text"
+                E === p.page ? "bg-surface-sunk font-semibold text-text" : "text-text-muted hover:bg-surface-hover hover:text-text"
               ),
               children: E + 1
             },
@@ -2198,45 +2198,45 @@ const cr = (t) => {
             variant: "ghost",
             iconOnly: !0,
             "aria-label": "Next page",
-            onClick: () => P(g.page + 1),
-            disabled: g.page >= F - 1,
+            onClick: () => I(p.page + 1),
+            disabled: p.page >= F - 1,
             children: /* @__PURE__ */ e(Q, { icon: ze, size: "md", color: "current" })
           }
         )
       ] })
     ] })
   ] });
-}, ir = Nt(null), yn = ({
+}, ir = Nt(null), wn = ({
   items: t,
   activeTab: r,
   onTabChange: n,
   className: s
 }) => {
-  const [a, l] = O(t[0]?.id || ""), o = r || a, u = (m) => {
-    n ? n(m) : l(m);
+  const [a, l] = O(t[0]?.id || ""), o = r || a, m = (u) => {
+    n ? n(u) : l(u);
   };
-  return /* @__PURE__ */ e("div", { className: d("border-b border-border", s), children: /* @__PURE__ */ e("nav", { className: "-mb-px flex space-x-8", children: t.map((m) => /* @__PURE__ */ e(
+  return /* @__PURE__ */ e("div", { className: d("border-b border-border", s), children: /* @__PURE__ */ e("nav", { className: "-mb-px flex space-x-8", children: t.map((u) => /* @__PURE__ */ e(
     "button",
     {
-      onClick: () => !m.disabled && u(m.id),
-      disabled: m.disabled,
+      onClick: () => !u.disabled && m(u.id),
+      disabled: u.disabled,
       className: d(
         "border-b-2 py-2 px-1 text-sm font-medium transition-colors duration-fast",
         {
-          "border-accent-border text-text": o === m.id,
-          "border-transparent text-text-muted hover:text-text": o !== m.id && !m.disabled,
-          "border-transparent text-disabled cursor-not-allowed": m.disabled
+          "border-accent-border text-text": o === u.id,
+          "border-transparent text-text-muted hover:text-text": o !== u.id && !u.disabled,
+          "border-transparent text-disabled cursor-not-allowed": u.disabled
         }
       ),
-      children: /* @__PURE__ */ i("span", { className: "flex items-center gap-2", children: [
-        m.label,
-        m.badge && /* @__PURE__ */ e("span", { className: d(
+      children: /* @__PURE__ */ c("span", { className: "flex items-center gap-2", children: [
+        u.label,
+        u.badge && /* @__PURE__ */ e("span", { className: d(
           "inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium",
-          o === m.id ? "bg-accent-soft text-accent" : "bg-surface-hover text-text-muted"
-        ), children: m.badge })
+          o === u.id ? "bg-accent-soft text-accent" : "bg-surface-hover text-text-muted"
+        ), children: u.badge })
       ] })
     },
-    m.id
+    u.id
   )) }) });
 }, dr = ({
   items: t,
@@ -2247,14 +2247,14 @@ const cr = (t) => {
   size: l = "md",
   className: o
 }) => {
-  const [u, m] = O(
+  const [m, u] = O(
     r || n || t[0]?.id || ""
-  ), y = n || u, x = (p) => {
-    s ? s(p) : m(p);
+  ), y = n || m, x = (g) => {
+    s ? s(g) : u(g);
   }, h = {
     activeTab: y,
     setActiveTab: x
-  }, b = t.find((p) => p.id === y), v = d(
+  }, b = t.find((g) => g.id === y), v = d(
     "flex",
     {
       "border-b border-border px-2": a === "default" || a === "underline",
@@ -2263,7 +2263,7 @@ const cr = (t) => {
       "space-x-8": a === "default" || a === "underline"
     },
     o
-  ), k = (p, f) => {
+  ), k = (g, f) => {
     const $ = "transition-colors duration-fast font-medium", C = {
       "text-xs px-2 py-1": l === "sm",
       "text-sm px-3 py-2": l === "md",
@@ -2276,35 +2276,35 @@ const cr = (t) => {
       // Underline variant
       "border-b-2 pb-2": a === "underline"
     }, T = {
-      "opacity-50 cursor-not-allowed": p.disabled,
-      "cursor-pointer": !p.disabled
+      "opacity-50 cursor-not-allowed": g.disabled,
+      "cursor-pointer": !g.disabled
     }, G = f ? {
       "border-accent-border text-text": a === "default" || a === "underline",
       "bg-surface text-text shadow-none": a === "pills"
-    } : {}, V = !f && !p.disabled ? {
+    } : {}, V = !f && !g.disabled ? {
       "border-transparent text-text-muted hover:text-text": a === "default",
       "text-text-muted hover:text-text": a === "pills",
       "border-transparent text-text-muted hover:text-text hover:border-border": a === "underline"
     } : {};
     return d($, C, q, T, G, V);
   };
-  return /* @__PURE__ */ e(ir.Provider, { value: h, children: /* @__PURE__ */ i("div", { children: [
-    /* @__PURE__ */ e("div", { className: v, role: "tablist", children: t.map((p) => /* @__PURE__ */ e(
+  return /* @__PURE__ */ e(ir.Provider, { value: h, children: /* @__PURE__ */ c("div", { children: [
+    /* @__PURE__ */ e("div", { className: v, role: "tablist", children: t.map((g) => /* @__PURE__ */ e(
       "button",
       {
         type: "button",
         role: "tab",
-        "aria-selected": y === p.id,
-        "aria-controls": `tabpanel-${p.id}`,
-        disabled: p.disabled,
-        onClick: () => !p.disabled && x(p.id),
-        className: k(p, y === p.id),
-        children: /* @__PURE__ */ i("span", { className: "flex items-center gap-2", children: [
-          p.label,
-          p.badge && /* @__PURE__ */ e("span", { className: "inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-surface-hover text-text-muted", children: p.badge })
+        "aria-selected": y === g.id,
+        "aria-controls": `tabpanel-${g.id}`,
+        disabled: g.disabled,
+        onClick: () => !g.disabled && x(g.id),
+        className: k(g, y === g.id),
+        children: /* @__PURE__ */ c("span", { className: "flex items-center gap-2", children: [
+          g.label,
+          g.badge && /* @__PURE__ */ e("span", { className: "inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-surface-hover text-text-muted", children: g.badge })
         ] })
       },
-      p.id
+      g.id
     )) }),
     b?.content && /* @__PURE__ */ e(
       "div",
@@ -2332,16 +2332,16 @@ function Ye({
   closeOnBackdropClick: a = !0,
   closeOnEscape: l = !0,
   className: o,
-  backdropClassName: u,
-  children: m,
+  backdropClassName: m,
+  children: u,
   footer: y,
   showCloseButton: x = !0
 }) {
   const h = se(null), b = se(null);
   X(() => {
     if (!t || !l) return;
-    const k = (p) => {
-      p.key === "Escape" && r();
+    const k = (g) => {
+      g.key === "Escape" && r();
     };
     return document.addEventListener("keydown", k), () => document.removeEventListener("keydown", k);
   }, [t, l, r]), X(() => (t ? (b.current = document.activeElement, h.current && h.current.focus(), document.body.style.overflow = "hidden") : (b.current && b.current.focus(), document.body.style.overflow = ""), () => {
@@ -2357,10 +2357,10 @@ function Ye({
         "fixed inset-0 z-modal flex items-center justify-center p-4",
         "bg-scrim",
         // 'animate-fade-in',
-        u
+        m
       ),
       onClick: v,
-      children: /* @__PURE__ */ i(
+      children: /* @__PURE__ */ c(
         "div",
         {
           ref: h,
@@ -2376,7 +2376,7 @@ function Ye({
           "aria-labelledby": n ? "modal-title" : void 0,
           tabIndex: -1,
           children: [
-            (n || x) && /* @__PURE__ */ i("div", { className: "flex items-center justify-between p-6 pb-0", children: [
+            (n || x) && /* @__PURE__ */ c("div", { className: "flex items-center justify-between p-6 pb-0", children: [
               n && /* @__PURE__ */ e(
                 "span",
                 {
@@ -2395,7 +2395,7 @@ function Ye({
                 }
               )
             ] }),
-            /* @__PURE__ */ e("div", { className: "p-6", children: m }),
+            /* @__PURE__ */ e("div", { className: "p-6", children: u }),
             y && /* @__PURE__ */ e("div", { className: "px-6 py-4", children: y })
           ]
         }
@@ -2443,35 +2443,35 @@ const mr = {
   align: a = "left",
   truncate: l = !1,
   italic: o = !1,
-  underline: u = !1,
-  lineHeight: m = "normal",
+  underline: m = !1,
+  lineHeight: u = "normal",
   as: y,
   className: x,
   children: h,
   ...b
 }) => {
-  const v = y || pr(t), k = t === "caption", p = t === "label", f = t === "code", $ = d(
+  const v = y || gr(t), k = t === "caption", g = t === "label", f = t === "code", $ = d(
     "font-sans",
     // Variant — caption and label pin their own size/weight
     k && "text-xs text-text-subtle",
-    p && "text-xs font-semibold uppercase tracking-label text-text-subtle",
+    g && "text-xs font-semibold uppercase tracking-label text-text-subtle",
     f && "font-mono text-sm rounded-sm bg-surface-hover px-1 py-0.5",
     // Size — only where the variant does not pin it
-    !k && !p && !f && mr[r],
+    !k && !g && !f && mr[r],
     // Weight — label owns its weight
-    !p && fr[n],
+    !g && fr[n],
     hr[s],
     xr[a],
     // Line height only overrides the body variant
-    t === "body" && br[m],
+    t === "body" && br[u],
     o && "italic",
-    u && "underline",
+    m && "underline",
     l && "truncate",
     x
   );
   return /* @__PURE__ */ e(v, { className: $, ...b, children: h });
 };
-function pr(t) {
+function gr(t) {
   return {
     body: "p",
     caption: "span",
@@ -2479,7 +2479,7 @@ function pr(t) {
     code: "code"
   }[t] || "p";
 }
-const gr = ({
+const pr = ({
   value: t,
   onChange: r,
   label: n,
@@ -2487,46 +2487,46 @@ const gr = ({
   error: a,
   disabled: l,
   accept: o,
-  onListFiles: u,
-  onListMounts: m,
+  onListFiles: m,
+  onListMounts: u,
   onUploadFile: y,
   onDownloadFile: x,
   onRegisterFile: h
 }) => {
-  const [b, v] = O(!1), [k, p] = O([]), [f, $] = O(null), [C, q] = O("/"), [T, G] = O([]), [V, I] = O(!1), [H, te] = O(""), [J, K] = O(
+  const [b, v] = O(!1), [k, g] = O([]), [f, $] = O(null), [C, q] = O("/"), [T, G] = O([]), [V, P] = O(!1), [H, te] = O(""), [J, K] = O(
     typeof t == "object" ? t : null
-  ), [ce, w] = O(!1), [c, S] = O(""), g = se(null);
+  ), [ce, w] = O(!1), [i, S] = O(""), p = se(null);
   X(() => {
     b && _();
   }, [b]), X(() => {
     b && f && N();
   }, [b, f, C, H]);
   const _ = async () => {
-    I(!0);
+    P(!0);
     try {
-      const M = await m?.();
-      M?.data && p(M.data);
+      const M = await u?.();
+      M?.data && g(M.data);
     } catch (M) {
       console.error("Failed to load mounts", M);
     } finally {
-      I(!1);
+      P(!1);
     }
   }, N = async () => {
     if (f) {
-      I(!0);
+      P(!0);
       try {
-        const M = await u?.({ mountId: f.id, name: H, path: C });
+        const M = await m?.({ mountId: f.id, name: H, path: C });
         M?.data && G(M.data);
       } catch (M) {
         console.error("Failed to load files", M);
       } finally {
-        I(!1);
+        P(!1);
       }
     }
   }, U = async (M) => {
     const L = M.target.files?.[0];
     if (L) {
-      I(!0);
+      P(!0);
       try {
         const Z = await L.arrayBuffer(), ne = new Uint8Array(Z), de = {
           id: `local-${Date.now()}`,
@@ -2543,13 +2543,13 @@ const gr = ({
       } catch (Z) {
         console.error("Local file selection failed", Z);
       } finally {
-        I(!1);
+        P(!1);
       }
     }
   }, re = async (M) => {
     const L = M.target.files?.[0];
     if (!(!L || !f)) {
-      I(!0);
+      P(!0);
       try {
         const Z = await L.arrayBuffer(), ne = await y?.({
           file: new Uint8Array(Z),
@@ -2565,16 +2565,16 @@ const gr = ({
       } catch (Z) {
         console.error("Upload failed", Z);
       } finally {
-        I(!1);
+        P(!1);
       }
     }
   }, ee = async () => {
-    if (!(!c || !f)) {
-      I(!0);
+    if (!(!i || !f)) {
+      P(!0);
       try {
-        const M = `${C}${c}/`;
+        const M = `${C}${i}/`;
         h && (await h({
-          name: c,
+          name: i,
           type: "folder",
           path: C,
           mimeType: "application/x-directory",
@@ -2586,22 +2586,22 @@ const gr = ({
       } catch (M) {
         console.error("Failed to create folder", M);
       } finally {
-        I(!1);
+        P(!1);
       }
     }
   }, Y = async (M) => {
-    I(!0);
+    P(!0);
     try {
       const L = await x?.(M.id);
       K(M), r(M, L), v(!1);
     } catch (L) {
       console.error("Failed to download file", L);
     } finally {
-      I(!1);
+      P(!1);
     }
-  }, P = (M) => {
+  }, I = (M) => {
     M.stopPropagation(), K(null), r(null);
-  }, D = ge(() => {
+  }, D = pe(() => {
     const M = /* @__PURE__ */ new Set(), L = [];
     return T.forEach((Z) => {
       if (Z.type === "folder") {
@@ -2619,7 +2619,7 @@ const gr = ({
   }, z = () => {
     const M = C.split("/").filter((L) => L !== "");
     M.pop(), M.length === 0 ? q("/") : q(`${M.join("/")}/`);
-  }, F = ge(() => {
+  }, F = pe(() => {
     const M = D.folders.map((L) => ({
       id: `folder-${L}`,
       name: L,
@@ -2636,7 +2636,7 @@ const gr = ({
       id: "name",
       header: "Name",
       accessor: "name",
-      cell: (M, L) => /* @__PURE__ */ i("div", { className: "flex items-center gap-2", children: [
+      cell: (M, L) => /* @__PURE__ */ c("div", { className: "flex items-center gap-2", children: [
         /* @__PURE__ */ e(
           Q,
           {
@@ -2680,8 +2680,8 @@ const gr = ({
       id: "name",
       header: "Mount Name",
       accessor: "name",
-      cell: (M) => /* @__PURE__ */ i("div", { className: "flex items-center gap-2 font-medium", children: [
-        /* @__PURE__ */ e(Q, { icon: Pe, size: "sm", color: "primary" }),
+      cell: (M) => /* @__PURE__ */ c("div", { className: "flex items-center gap-2 font-medium", children: [
+        /* @__PURE__ */ e(Q, { icon: Ie, size: "sm", color: "primary" }),
         /* @__PURE__ */ e("span", { children: M })
       ] })
     },
@@ -2693,9 +2693,9 @@ const gr = ({
       cell: (M, L) => /* @__PURE__ */ e(ae, { variant: "outline", onClick: () => $(L), children: "Open" })
     }
   ];
-  return /* @__PURE__ */ i("div", { className: "space-y-1", children: [
+  return /* @__PURE__ */ c("div", { className: "space-y-1", children: [
     n && /* @__PURE__ */ e(me, { variant: "label", size: "sm", weight: "medium", children: n }),
-    /* @__PURE__ */ i(
+    /* @__PURE__ */ c(
       "div",
       {
         onClick: () => !l && v(!0),
@@ -2706,12 +2706,12 @@ const gr = ({
           l && "opacity-50 cursor-not-allowed bg-surface-sunk"
         ),
         children: [
-          /* @__PURE__ */ e("div", { className: "flex-shrink-0", children: /* @__PURE__ */ e(Q, { icon: J ? Te : Pe, color: J ? "primary" : "secondary" }) }),
+          /* @__PURE__ */ e("div", { className: "flex-shrink-0", children: /* @__PURE__ */ e(Q, { icon: J ? Te : Ie, color: J ? "primary" : "secondary" }) }),
           /* @__PURE__ */ e("div", { className: "flex-grow truncate", children: J ? /* @__PURE__ */ e("span", { className: "text-sm text-text font-medium", children: J.name }) : /* @__PURE__ */ e("span", { className: "text-sm text-text-muted", children: s }) }),
           J && !l && /* @__PURE__ */ e(
             "button",
             {
-              onClick: P,
+              onClick: I,
               className: "p-1 hover:bg-surface-hover rounded",
               children: /* @__PURE__ */ e(Q, { icon: we, size: "xs" })
             }
@@ -2737,8 +2737,8 @@ const gr = ({
               {
                 id: "remote",
                 label: "Platform Storage",
-                content: /* @__PURE__ */ e("div", { className: "space-y-4", children: f ? /* @__PURE__ */ i(ve, { children: [
-                  /* @__PURE__ */ i("div", { className: "flex flex-wrap items-center gap-2", children: [
+                content: /* @__PURE__ */ e("div", { className: "space-y-4", children: f ? /* @__PURE__ */ c(ve, { children: [
+                  /* @__PURE__ */ c("div", { className: "flex flex-wrap items-center gap-2", children: [
                     /* @__PURE__ */ e(
                       ae,
                       {
@@ -2761,7 +2761,7 @@ const gr = ({
                         fullWidth: !0
                       }
                     ) }),
-                    /* @__PURE__ */ i("div", { className: "flex items-center gap-1", children: [
+                    /* @__PURE__ */ c("div", { className: "flex items-center gap-1", children: [
                       /* @__PURE__ */ e(
                         ae,
                         {
@@ -2775,7 +2775,7 @@ const gr = ({
                         ae,
                         {
                           variant: "primary",
-                          onClick: () => g.current?.click(),
+                          onClick: () => p.current?.click(),
                           leftIcon: /* @__PURE__ */ e(Q, { icon: ft, size: "xs" }),
                           loading: V,
                           children: "Upload"
@@ -2786,20 +2786,20 @@ const gr = ({
                         {
                           type: "file",
                           className: "hidden",
-                          ref: g,
+                          ref: p,
                           onChange: re,
                           accept: o
                         }
                       )
                     ] })
                   ] }),
-                  ce && /* @__PURE__ */ i("div", { className: "flex items-center gap-2 p-3 bg-surface-sunk rounded-lg border border-border", children: [
+                  ce && /* @__PURE__ */ c("div", { className: "flex items-center gap-2 p-3 bg-surface-sunk rounded-lg border border-border", children: [
                     /* @__PURE__ */ e(Q, { icon: je, size: "sm", color: "warning" }),
                     /* @__PURE__ */ e(
                       Ne,
                       {
                         placeholder: "Folder name",
-                        value: c,
+                        value: i,
                         onChange: (M) => S(M.target.value),
                         autoFocus: !0
                       }
@@ -2831,15 +2831,15 @@ const gr = ({
               {
                 id: "local",
                 label: "Local File",
-                content: /* @__PURE__ */ e("div", { className: "space-y-6", children: /* @__PURE__ */ i("div", { className: "flex flex-col items-center justify-center py-12 border-2 border-dashed border-border rounded-xl bg-surface-sunk/50", children: [
+                content: /* @__PURE__ */ e("div", { className: "space-y-6", children: /* @__PURE__ */ c("div", { className: "flex flex-col items-center justify-center py-12 border-2 border-dashed border-border rounded-xl bg-surface-sunk/50", children: [
                   /* @__PURE__ */ e("div", { className: "p-4 bg-accent-soft rounded-full mb-4", children: /* @__PURE__ */ e(Q, { icon: Te, size: "xl", color: "primary" }) }),
                   /* @__PURE__ */ e(me, { variant: "label", size: "lg", weight: "semibold", children: "Select a file from your computer" }),
-                  /* @__PURE__ */ i(me, { variant: "body", size: "sm", className: "text-text-muted mt-1 mb-6 text-center max-w-xs", children: [
+                  /* @__PURE__ */ c(me, { variant: "body", size: "sm", className: "text-text-muted mt-1 mb-6 text-center max-w-xs", children: [
                     "This file will be used directly in the form and will ",
                     /* @__PURE__ */ e("strong", { children: "not" }),
                     " be uploaded to platform storage."
                   ] }),
-                  /* @__PURE__ */ i("label", { className: "cursor-pointer", children: [
+                  /* @__PURE__ */ c("label", { className: "cursor-pointer", children: [
                     /* @__PURE__ */ e(ae, { variant: "primary", size: "lg", loading: V, className: "pointer-events-none", children: "Browse Local File" }),
                     /* @__PURE__ */ e(
                       "input",
@@ -2874,41 +2874,41 @@ const gr = ({
     fullWidth: a = !1,
     loading: l = !1,
     containerClassName: o,
-    labelClassName: u,
-    className: m,
+    labelClassName: m,
+    className: u,
     id: y,
     rows: x = 4,
     ...h
   }, b) => {
-    const v = oe.useId(), k = y || `textarea-${v}`, p = !!n, f = n || r ? `${k}-description` : void 0;
-    return /* @__PURE__ */ i("div", { className: d("flex flex-col", a && "w-full", o), children: [
+    const v = oe.useId(), k = y || `textarea-${v}`, g = !!n, f = n || r ? `${k}-description` : void 0;
+    return /* @__PURE__ */ c("div", { className: d("flex flex-col", a && "w-full", o), children: [
       t && /* @__PURE__ */ e(
         "label",
         {
           htmlFor: k,
           className: d(
             Ue,
-            p ? "text-danger-fg" : "text-text-muted",
-            u
+            g ? "text-danger-fg" : "text-text-muted",
+            m
           ),
           children: t
         }
       ),
-      /* @__PURE__ */ i("div", { className: "relative", children: [
+      /* @__PURE__ */ c("div", { className: "relative", children: [
         /* @__PURE__ */ e(
           "textarea",
           {
             ref: b,
             id: k,
             rows: x,
-            "aria-invalid": p || void 0,
+            "aria-invalid": g || void 0,
             "aria-describedby": f,
             className: d(
               We,
               "resize-y leading-relaxed",
               vr[s],
-              Ke(p),
-              m
+              Ke(g),
+              u
             ),
             ...h
           }
@@ -2925,7 +2925,7 @@ const gr = ({
         "p",
         {
           id: f,
-          className: d("mt-1 text-xs", p ? "text-danger-fg" : "text-text-subtle"),
+          className: d("mt-1 text-xs", g ? "text-danger-fg" : "text-text-subtle"),
           children: n || r
         }
       )
@@ -2943,8 +2943,8 @@ function yr(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 u = s[o], m = l[u];
-    l[u] = m && typeof m == "object" ? Array.isArray(m) ? [...m] : { ...m } : {}, l = l[u];
+    const m = s[o], u = l[m];
+    l[m] = u && typeof u == "object" ? Array.isArray(u) ? [...u] : { ...u } : {}, l = l[m];
   }
   return l[s[s.length - 1]] = n, a;
 }
@@ -2964,15 +2964,15 @@ function wr({
   className: n,
   children: s
 }) {
-  return /* @__PURE__ */ i("div", { className: d("flex flex-col gap-4 py-6 sm:flex-row sm:gap-8", n), children: [
-    /* @__PURE__ */ i("div", { className: "w-full shrink-0 sm:w-form-label", children: [
+  return /* @__PURE__ */ c("div", { className: d("flex flex-col gap-4 py-6 sm:flex-row sm:gap-8", n), children: [
+    /* @__PURE__ */ c("div", { className: "w-full shrink-0 sm:w-form-label", children: [
       t && /* @__PURE__ */ e("span", { className: "text-base font-semibold text-text", children: t }),
       r && /* @__PURE__ */ e("p", { className: "mt-1 text-sm leading-relaxed text-pretty text-text-subtle", children: r })
     ] }),
     /* @__PURE__ */ e("div", { className: "min-w-0 flex-1", children: s })
   ] });
 }
-const Nn = ({
+const kn = ({
   groups: t,
   data: r,
   onSubmit: n,
@@ -2980,42 +2980,42 @@ const Nn = ({
   onChange: a,
   transform: l,
   validate: o,
-  submitButton: u = { label: "Submit", variant: "primary" },
-  cancelButton: m = { label: "Cancel", variant: "outline" },
+  submitButton: m = { label: "Submit", variant: "primary" },
+  cancelButton: u = { label: "Cancel", variant: "outline" },
   showButtons: y = !0,
   layout: x = "vertical",
   size: h = "md",
   loading: b = !1,
   className: v,
   ref: k,
-  sdk: p
+  sdk: g
 }) => {
   const [f, $] = O(r || {}), [C, q] = O({}), [T, G] = O({});
   X(() => {
     r && $({ ...r });
   }, [r]);
   const V = he(
-    (w, c, S) => {
-      const g = t.flatMap((_) => _.items).find((_) => _.name === w);
-      if (!g) return null;
-      if (g.required && (c == null || c === ""))
-        return `${g.label} is required`;
-      if (g.type === "array") {
-        if (g.required && (!c || c.length === 0))
-          return `${g.label} cannot be empty.`;
-        if (c && !Array.isArray(c))
-          return `${g.label} must be an array.`;
-        if (Array.isArray(c) && g.arrayFields) {
+    (w, i, S) => {
+      const p = t.flatMap((_) => _.items).find((_) => _.name === w);
+      if (!p) return null;
+      if (p.required && (i == null || i === ""))
+        return `${p.label} is required`;
+      if (p.type === "array") {
+        if (p.required && (!i || i.length === 0))
+          return `${p.label} cannot be empty.`;
+        if (i && !Array.isArray(i))
+          return `${p.label} must be an array.`;
+        if (Array.isArray(i) && p.arrayFields) {
           const _ = [];
           let N = !1;
-          if (c.forEach((U, re) => {
+          if (i.forEach((U, re) => {
             const ee = {};
-            for (const Y of g.arrayFields) {
-              const P = U?.[Y.name];
-              if (Y.required && (P == null || P === ""))
+            for (const Y of p.arrayFields) {
+              const I = U?.[Y.name];
+              if (Y.required && (I == null || I === ""))
                 ee[Y.name] = `${Y.label} is required`, N = !0;
               else if (Y.validator) {
-                const D = Y.validator(P, U);
+                const D = Y.validator(I, U);
                 D && (ee[Y.name] = D, N = !0);
               }
             }
@@ -3024,18 +3024,18 @@ const Nn = ({
             return JSON.stringify(_);
         }
       }
-      return g.validator ? g.validator(c, S) : null;
+      return p.validator ? p.validator(i, S) : null;
     },
     [t]
-  ), I = he(
-    (w, c) => {
+  ), P = he(
+    (w, i) => {
       let S = yr(
         f,
         w,
-        c
+        i
       );
-      t.flatMap((N) => N.items).find((N) => N.name === w)?.removeIfEmpty && (c == null || c === "") && (S = Nr(S, w)), $(S), G((N) => ({ ...N, [w]: !0 }));
-      const _ = V(w, c, S);
+      t.flatMap((N) => N.items).find((N) => N.name === w)?.removeIfEmpty && (i == null || i === "") && (S = Nr(S, w)), $(S), G((N) => ({ ...N, [w]: !0 }));
+      const _ = V(w, i, S);
       q((N) => ({
         ...N,
         [w]: _ || ""
@@ -3045,7 +3045,7 @@ const Nn = ({
   ), H = he(
     async (w) => {
       if (w.preventDefault(), b) return;
-      const c = {}, S = t.flatMap((_) => _.items);
+      const i = {}, S = t.flatMap((_) => _.items);
       for (const _ of S) {
         if (_.hidden || _.conditional && !_.conditional(f))
           continue;
@@ -3054,23 +3054,23 @@ const Nn = ({
           Be(f, _.name),
           f
         );
-        N && (c[_.name] = N);
+        N && (i[_.name] = N);
       }
       if (o) {
         const _ = o(f);
-        _ && Object.assign(c, _);
+        _ && Object.assign(i, _);
       }
-      if (q(c), Object.keys(c).some((_) => c[_]))
+      if (q(i), Object.keys(i).some((_) => i[_]))
         return;
-      const g = l ? l(f) : f;
-      await n?.(f, g);
+      const p = l ? l(f) : f;
+      await n?.(f, p);
     },
     [f, t, V, o, l, n, b]
   ), te = he(
     (w) => {
-      const c = Be(f, w.name), S = T[w.name] ? C[w.name] : void 0, g = w.disabled || b, _ = {
-        value: c || "",
-        disabled: g,
+      const i = Be(f, w.name), S = T[w.name] ? C[w.name] : void 0, p = w.disabled || b, _ = {
+        value: i || "",
+        disabled: p,
         required: w.required,
         placeholder: w.placeholder,
         ...w.fieldProps
@@ -3086,7 +3086,7 @@ const Nn = ({
             Ne,
             {
               ..._,
-              onChange: (N) => I(w.name, N.target.value),
+              onChange: (N) => P(w.name, N.target.value),
               type: w.textType || w.type,
               autoComplete: w.autocomplete,
               error: S,
@@ -3098,7 +3098,7 @@ const Nn = ({
             Le,
             {
               ..._,
-              onChange: (N) => I(w.name, N.target.value),
+              onChange: (N) => P(w.name, N.target.value),
               rows: 4,
               error: S,
               size: h
@@ -3109,7 +3109,7 @@ const Nn = ({
             Ce,
             {
               ..._,
-              onChange: (N) => I(w.name, N),
+              onChange: (N) => P(w.name, N),
               options: (w.options || []).map((N) => ({
                 ...N,
                 value: String(N.value)
@@ -3129,8 +3129,8 @@ const Nn = ({
             Ft,
             {
               "aria-label": w.label,
-              value: c == null ? "" : String(c),
-              onChange: (N) => I(w.name, N),
+              value: i == null ? "" : String(i),
+              onChange: (N) => P(w.name, N),
               options: (w.options || []).map((N) => ({
                 value: String(N.value),
                 label: N.label
@@ -3145,13 +3145,13 @@ const Nn = ({
             {
               ..._,
               label: w.label,
-              checked: !!c,
-              onChange: (N) => I(w.name, N.target.checked),
+              checked: !!i,
+              onChange: (N) => P(w.name, N.target.checked),
               size: h
             }
           );
         case "radio":
-          return /* @__PURE__ */ e("div", { className: "flex flex-col gap-2", children: w.options?.map((N) => /* @__PURE__ */ i(
+          return /* @__PURE__ */ e("div", { className: "flex flex-col gap-2", children: w.options?.map((N) => /* @__PURE__ */ c(
             "label",
             {
               className: "flex cursor-pointer items-center gap-3 text-base text-text",
@@ -3162,9 +3162,9 @@ const Nn = ({
                     type: "radio",
                     name: w.name,
                     value: N.value,
-                    checked: c === N.value,
-                    onChange: () => I(w.name, N.value),
-                    disabled: g || N.disabled,
+                    checked: i === N.value,
+                    onChange: () => P(w.name, N.value),
+                    disabled: p || 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"
                   }
                 ),
@@ -3178,38 +3178,38 @@ const Nn = ({
             Ae,
             {
               ..._,
-              value: c ? new Date(c) : null,
-              onChange: (N) => I(w.name, N),
+              value: i ? new Date(i) : null,
+              onChange: (N) => P(w.name, N),
               size: h
             }
           );
         case "file":
           return /* @__PURE__ */ e(
-            gr,
+            pr,
             {
               ..._,
-              value: c,
-              onChange: (N) => I(w.name, N),
+              value: i,
+              onChange: (N) => P(w.name, N),
               error: S,
-              onListFiles: (N) => p?.http.invoke({
+              onListFiles: (N) => g?.http.invoke({
                 method: "POST",
                 action: "storage.file.list",
                 body: N
               }),
-              onListMounts: () => p?.http.invoke({
+              onListMounts: () => g?.http.invoke({
                 method: "GET",
                 action: "storage.mount"
               }),
-              onUploadFile: (N) => p?.http.invoke({
+              onUploadFile: (N) => g?.http.invoke({
                 method: "POST",
                 action: "storage.file.upload",
                 body: N
               }),
-              onDownloadFile: (N) => p?.http.invoke({
+              onDownloadFile: (N) => g?.http.invoke({
                 method: "GET",
                 action: `storage.file.${N}.download`
               }),
-              onRegisterFile: (N) => p?.http.invoke({
+              onRegisterFile: (N) => g?.http.invoke({
                 method: "POST",
                 action: "storage.file.folder",
                 body: N
@@ -3220,26 +3220,26 @@ const Nn = ({
           return /* @__PURE__ */ e(
             Yt,
             {
-              value: c || {},
-              onChange: (N) => I(w.name, N),
-              onListFolders: () => p?.http.invoke({
+              value: i || {},
+              onChange: (N) => P(w.name, N),
+              onListFolders: () => g?.http.invoke({
                 method: "GET",
                 action: "storage.mount"
               }),
-              disabled: g,
+              disabled: p,
               size: h,
               placeholder: w.placeholder
             }
           );
         case "custom":
           return w.customComponent?.({
-            value: c,
-            onChange: (N) => I(w.name, N),
+            value: i,
+            onChange: (N) => P(w.name, N),
             error: S,
-            disabled: g
+            disabled: p
           });
         case "array": {
-          const N = c || [];
+          const N = i || [];
           let U = [];
           if (typeof S == "string" && S.startsWith("["))
             try {
@@ -3247,36 +3247,36 @@ const Nn = ({
             } catch {
             }
           const re = () => {
-            I(w.name, [...N, {}]);
-          }, ee = (P) => {
-            I(
+            P(w.name, [...N, {}]);
+          }, ee = (I) => {
+            P(
               w.name,
-              N.filter((D, A) => A !== P)
+              N.filter((D, A) => A !== I)
             );
-          }, Y = (P, D, A) => {
+          }, Y = (I, D, A) => {
             const z = [...N];
-            z[P] = {
-              ...z[P],
+            z[I] = {
+              ...z[I],
               [D]: A
-            }, I(w.name, z);
+            }, P(w.name, z);
           };
-          return /* @__PURE__ */ i("div", { className: "flex flex-col gap-2", children: [
-            N.map((P, D) => /* @__PURE__ */ i("div", { className: "flex items-start gap-2", children: [
+          return /* @__PURE__ */ c("div", { className: "flex flex-col gap-2", children: [
+            N.map((I, D) => /* @__PURE__ */ c("div", { className: "flex items-start gap-2", children: [
               /* @__PURE__ */ e("div", { className: "grid flex-1 gap-2 sm:grid-cols-2", children: w.arrayFields?.map((A) => {
                 const z = U?.[D]?.[A.name];
-                return /* @__PURE__ */ i(
+                return /* @__PURE__ */ c(
                   "div",
                   {
                     className: "flex flex-col gap-1",
                     children: [
-                      D === 0 && /* @__PURE__ */ i("label", { className: "block text-xs font-semibold uppercase tracking-label text-text-subtle", children: [
+                      D === 0 && /* @__PURE__ */ c("label", { className: "block text-xs font-semibold uppercase tracking-label text-text-subtle", children: [
                         A.label,
                         A.required && /* @__PURE__ */ e("span", { className: "ml-1 text-danger-fg", children: "*" })
                       ] }),
                       (() => {
                         const F = {
-                          value: P?.[A.name] || "",
-                          disabled: g,
+                          value: I?.[A.name] || "",
+                          disabled: p,
                           required: A.required,
                           placeholder: A.placeholder,
                           ...A.fieldProps
@@ -3346,7 +3346,7 @@ const Nn = ({
                               ye,
                               {
                                 ...F,
-                                checked: !!P?.[A.name],
+                                checked: !!I?.[A.name],
                                 onChange: (j) => Y(
                                   D,
                                   A.name,
@@ -3356,7 +3356,7 @@ const Nn = ({
                               }
                             );
                           case "radio":
-                            return /* @__PURE__ */ e("div", { className: "flex flex-col gap-2", children: A.options?.map((j) => /* @__PURE__ */ i(
+                            return /* @__PURE__ */ e("div", { className: "flex flex-col gap-2", children: A.options?.map((j) => /* @__PURE__ */ c(
                               "label",
                               {
                                 className: "flex cursor-pointer items-center gap-2 text-base text-text",
@@ -3367,13 +3367,13 @@ const Nn = ({
                                       type: "radio",
                                       name: `${w.name}.${D}.${A.name}`,
                                       value: j.value,
-                                      checked: P?.[A.name] === j.value,
+                                      checked: I?.[A.name] === j.value,
                                       onChange: () => Y(
                                         D,
                                         A.name,
                                         j.value
                                       ),
-                                      disabled: g || j.disabled,
+                                      disabled: p || j.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"
                                     }
                                   ),
@@ -3383,7 +3383,7 @@ const Nn = ({
                               j.value
                             )) });
                           case "date": {
-                            const j = P?.[A.name];
+                            const j = I?.[A.name];
                             return /* @__PURE__ */ e(
                               Ae,
                               {
@@ -3400,18 +3400,18 @@ const Nn = ({
                           }
                           case "custom":
                             return A.customComponent?.({
-                              value: P?.[A.name],
+                              value: I?.[A.name],
                               onChange: (j) => Y(
                                 D,
                                 A.name,
                                 j
                               ),
                               error: z,
-                              disabled: g
+                              disabled: p
                             });
                           // Add other field types here as needed
                           default:
-                            return /* @__PURE__ */ i("p", { children: [
+                            return /* @__PURE__ */ c("p", { children: [
                               "Unsupported field type in array:",
                               " ",
                               A.type
@@ -3433,20 +3433,20 @@ const Nn = ({
                   size: "md",
                   "aria-label": `${w.label} verwijderen`,
                   onClick: () => ee(D),
-                  disabled: g,
+                  disabled: p,
                   className: d("shrink-0", D === 0 && "mt-5"),
                   children: /* @__PURE__ */ e(ht, { className: "size-icon-md" })
                 }
               )
             ] }, D)),
-            /* @__PURE__ */ i(
+            /* @__PURE__ */ c(
               ae,
               {
                 type: "button",
                 variant: "secondary",
                 leftIcon: /* @__PURE__ */ e(xt, { className: "size-icon-sm" }),
                 onClick: re,
-                disabled: g,
+                disabled: p,
                 children: [
                   w.label,
                   " toevoegen"
@@ -3459,13 +3459,13 @@ const Nn = ({
           return null;
       }
     },
-    [f, T, C, b, h, I]
+    [f, T, C, b, h, P]
   ), J = he(
     (w) => {
       if (w.conditional && !w.conditional(f))
         return null;
-      const c = w.items.filter((g) => !(g.hidden || g.conditional && !g.conditional(f)));
-      if (c.length === 0) return null;
+      const i = w.items.filter((p) => !(p.hidden || p.conditional && !p.conditional(f)));
+      if (i.length === 0) return null;
       const S = d(
         w.layout === "flex" ? "flex flex-wrap gap-3.5" : "grid gap-3.5",
         w.layout !== "flex" && {
@@ -3486,29 +3486,29 @@ const Nn = ({
             title: w.title,
             description: w.description,
             className: "not-last:border-b not-last:border-border-subtle",
-            children: /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e("div", { className: S, children: c.map((g) => {
-              const _ = T[g.name] ? C[g.name] : void 0;
-              return /* @__PURE__ */ i(
+            children: /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e("div", { className: S, children: i.map((p) => {
+              const _ = T[p.name] ? C[p.name] : void 0;
+              return /* @__PURE__ */ c(
                 "div",
                 {
                   className: d(
                     "flex min-w-0 flex-col gap-1.5",
-                    g.type === "checkbox" && "justify-center"
+                    p.type === "checkbox" && "justify-center"
                   ),
                   style: {
-                    width: typeof g.width == "string" ? g.width : void 0,
-                    gridColumn: typeof g.width == "number" ? `span ${g.width} / span ${g.width}` : void 0
+                    width: typeof p.width == "string" ? p.width : void 0,
+                    gridColumn: typeof p.width == "number" ? `span ${p.width} / span ${p.width}` : void 0
                   },
                   children: [
-                    g.type !== "custom" && g.type !== "checkbox" && /* @__PURE__ */ i("label", { className: "block text-sm font-medium text-text-muted", children: [
-                      g.label,
-                      g.required && /* @__PURE__ */ e("span", { className: "ml-1 text-danger-fg", children: "*" })
+                    p.type !== "custom" && p.type !== "checkbox" && /* @__PURE__ */ c("label", { className: "block text-sm font-medium text-text-muted", children: [
+                      p.label,
+                      p.required && /* @__PURE__ */ e("span", { className: "ml-1 text-danger-fg", children: "*" })
                     ] }),
-                    te(g),
-                    g.help && !_ && /* @__PURE__ */ e("p", { className: "text-xs leading-4 text-text-subtle", children: g.help })
+                    te(p),
+                    p.help && !_ && /* @__PURE__ */ e("p", { className: "text-xs leading-4 text-text-subtle", children: p.help })
                   ]
                 },
-                g.name
+                p.name
               );
             }) }) })
           },
@@ -3526,39 +3526,39 @@ const Nn = ({
     },
     v
   ), ce = h === "full" ? "md" : h;
-  return /* @__PURE__ */ i("form", { ref: k, onSubmit: H, className: K, children: [
+  return /* @__PURE__ */ c("form", { ref: k, onSubmit: H, className: K, children: [
     !y && /* @__PURE__ */ e("button", { type: "submit", className: "hidden", tabIndex: -1, "aria-hidden": !0 }),
     /* @__PURE__ */ e("div", { className: "flex flex-col", children: t.map(J) }),
-    y && /* @__PURE__ */ e("div", { className: "flex items-center gap-2 border-t border-border-subtle py-4", children: /* @__PURE__ */ i(ve, { children: [
+    y && /* @__PURE__ */ e("div", { className: "flex items-center gap-2 border-t border-border-subtle py-4", children: /* @__PURE__ */ c(ve, { children: [
       /* @__PURE__ */ e("div", { className: "ml-auto" }),
       s && /* @__PURE__ */ e(
         ae,
         {
           type: "button",
-          variant: m.variant ?? "ghost",
-          size: m.size || ce,
-          disabled: m.disabled || b,
+          variant: u.variant ?? "ghost",
+          size: u.size || ce,
+          disabled: u.disabled || b,
           onClick: s,
-          className: m.className,
-          children: m.label
+          className: u.className,
+          children: u.label
         }
       ),
       /* @__PURE__ */ e(
         ae,
         {
           type: "submit",
-          variant: u.variant,
-          size: u.size || ce,
-          disabled: u.disabled || b,
+          variant: m.variant,
+          size: m.size || ce,
+          disabled: m.disabled || b,
           loading: b,
-          className: u.className,
-          children: u.label
+          className: m.className,
+          children: m.label
         }
       )
     ] }) })
   ] });
 };
-function wn({
+function Cn({
   open: t,
   title: r,
   description: n,
@@ -3566,23 +3566,23 @@ function wn({
   cancelLabel: a = "Annuleren",
   tone: l = "default",
   loading: o = !1,
-  onConfirm: u,
-  onCancel: m
+  onConfirm: m,
+  onCancel: u
 }) {
   return /* @__PURE__ */ e(
     Ye,
     {
       open: t,
-      onClose: m,
+      onClose: u,
       title: r,
       size: "sm",
-      footer: /* @__PURE__ */ i("div", { className: "flex w-full items-center justify-end gap-2", children: [
-        /* @__PURE__ */ e(ae, { variant: "ghost", onClick: m, disabled: o, children: a }),
+      footer: /* @__PURE__ */ c("div", { className: "flex w-full items-center justify-end gap-2", children: [
+        /* @__PURE__ */ e(ae, { variant: "ghost", onClick: u, disabled: o, children: a }),
         /* @__PURE__ */ e(
           ae,
           {
             variant: l === "danger" ? "destructive" : "primary",
-            onClick: u,
+            onClick: m,
             loading: o,
             children: s
           }
@@ -3616,7 +3616,7 @@ const kr = {
   info: "bg-info",
   note: "bg-note"
 };
-function kn({
+function Sn({
   variant: t = "default",
   size: r = "md",
   dot: n = !1,
@@ -3624,10 +3624,10 @@ function kn({
   dismissible: a = !1,
   onDismiss: l,
   className: o,
-  children: u,
-  ...m
+  children: m,
+  ...u
 }) {
-  return /* @__PURE__ */ i(
+  return /* @__PURE__ */ c(
     "span",
     {
       className: d(
@@ -3639,7 +3639,7 @@ function kn({
         Cr[r],
         o
       ),
-      ...m,
+      ...u,
       children: [
         n && /* @__PURE__ */ e(
           "span",
@@ -3650,8 +3650,8 @@ function kn({
             )
           }
         ),
-        s && /* @__PURE__ */ e("span", { className: d("flex-shrink-0", u && "mr-1"), children: s }),
-        u,
+        s && /* @__PURE__ */ e("span", { className: d("flex-shrink-0", m && "mr-1"), children: s }),
+        m,
         a && l && /* @__PURE__ */ e(
           "button",
           {
@@ -3669,7 +3669,7 @@ const Er = {
   neutral: "bg-surface-hover text-text-muted",
   success: "bg-success-soft text-success-fg"
 };
-function Cn({
+function En({
   icon: t,
   tone: r = "neutral",
   title: n,
@@ -3677,9 +3677,9 @@ function Cn({
   actions: a,
   card: l = !1,
   className: o,
-  ...u
+  ...m
 }) {
-  return /* @__PURE__ */ i(
+  return /* @__PURE__ */ c(
     "div",
     {
       className: d(
@@ -3687,7 +3687,7 @@ function Cn({
         l && "rounded-lg border border-border bg-surface px-11 py-9 shadow-overlay",
         o
       ),
-      ...u,
+      ...m,
       children: [
         t != null && /* @__PURE__ */ e("span", { className: d("flex size-disc items-center justify-center rounded-full text-2xl", Er[r]), children: t }),
         /* @__PURE__ */ e("div", { className: "text-lg font-semibold text-text", children: n }),
@@ -3697,7 +3697,7 @@ function Cn({
     }
   );
 }
-function Sn({ children: t, className: r, ...n }) {
+function zn({ children: t, className: r, ...n }) {
   return /* @__PURE__ */ e(
     "kbd",
     {
@@ -3717,7 +3717,7 @@ const zr = {
   accent: "bg-accent",
   success: "bg-success"
 };
-function En({ value: t, variant: r = "accent", size: n = "md", className: s, ...a }) {
+function Mn({ value: t, variant: r = "accent", size: n = "md", className: s, ...a }) {
   const l = Math.max(0, Math.min(100, t));
   return /* @__PURE__ */ e(
     "div",
@@ -3756,7 +3756,7 @@ const $r = {
   lg: "text-base",
   xl: "text-lg"
 };
-function zn({
+function $n({
   size: t = "md",
   variant: r = "primary",
   label: n = "Loading...",
@@ -3764,7 +3764,7 @@ function zn({
   className: a,
   ...l
 }) {
-  return /* @__PURE__ */ i(
+  return /* @__PURE__ */ c(
     "div",
     {
       className: d(
@@ -3774,7 +3774,7 @@ function zn({
       ),
       ...l,
       children: [
-        /* @__PURE__ */ i(
+        /* @__PURE__ */ c(
           "svg",
           {
             className: d(
@@ -3838,7 +3838,7 @@ const _r = {
   "cat-4": "bg-cat-4",
   "cat-5": "bg-cat-5"
 };
-function Mn({
+function Dn({
   tone: t = "neutral",
   shape: r = "round",
   pulse: n = !1,
@@ -3861,7 +3861,7 @@ function Mn({
     }
   );
 }
-function $n({
+function Tn({
   steps: t,
   current: r,
   variant: n = "numbered",
@@ -3869,36 +3869,36 @@ function $n({
   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: d("flex items-center gap-1.5", a), children: t.map((u, m) => /* @__PURE__ */ e(
+  return n === "dots" ? /* @__PURE__ */ e("div", { ...o, className: d("flex items-center gap-1.5", a), children: t.map((m, u) => /* @__PURE__ */ e(
     "span",
     {
       className: d(
         "h-step-bar rounded-full transition-all duration-fast ease-out",
-        m === l ? "w-5 bg-accent" : "w-3.5",
-        m < l && "bg-border-strong",
-        m > l && "bg-border"
+        u === l ? "w-5 bg-accent" : "w-3.5",
+        u < l && "bg-border-strong",
+        u > l && "bg-border"
       )
     },
-    u
-  )) }) : /* @__PURE__ */ e("div", { ...o, className: d("flex items-center gap-2", a), children: t.map((u, m) => /* @__PURE__ */ i("div", { className: "flex items-center gap-2", children: [
+    m
+  )) }) : /* @__PURE__ */ e("div", { ...o, className: d("flex items-center gap-2", a), children: t.map((m, u) => /* @__PURE__ */ c("div", { className: "flex items-center gap-2", children: [
     /* @__PURE__ */ e(
       "span",
       {
-        "aria-current": m === l ? "step" : void 0,
+        "aria-current": u === l ? "step" : void 0,
         className: d(
           "flex size-tile-sm items-center justify-center rounded-full text-xs font-medium",
-          m === l && "bg-accent text-accent-fg",
-          m < l && "bg-accent-soft text-accent",
-          m > l && "bg-surface-hover text-text-muted"
+          u === l && "bg-accent text-accent-fg",
+          u < l && "bg-accent-soft text-accent",
+          u > l && "bg-surface-hover text-text-muted"
         ),
-        children: m + 1
+        children: u + 1
       }
     ),
-    m < t.length - 1 && /* @__PURE__ */ e("span", { className: "h-px w-8 bg-border-strong" })
-  ] }, u)) });
+    u < t.length - 1 && /* @__PURE__ */ e("span", { className: "h-px w-8 bg-border-strong" })
+  ] }, m)) });
 }
-function Dn({ title: t, icon: r = /* @__PURE__ */ e(bt, { className: "size-icon-md", "aria-hidden": !0 }), action: n, children: s, className: a, ...l }) {
-  return /* @__PURE__ */ i(
+function _n({ title: t, icon: r = /* @__PURE__ */ e(bt, { className: "size-icon-md", "aria-hidden": !0 }), action: n, children: s, className: a, ...l }) {
+  return /* @__PURE__ */ c(
     "div",
     {
       className: d(
@@ -3908,7 +3908,7 @@ function Dn({ title: t, icon: r = /* @__PURE__ */ e(bt, { className: "size-icon-
       ),
       ...l,
       children: [
-        /* @__PURE__ */ i("div", { className: "flex items-center gap-2 text-assistant", children: [
+        /* @__PURE__ */ c("div", { className: "flex items-center gap-2 text-assistant", children: [
           /* @__PURE__ */ e("span", { "aria-hidden": !0, children: r }),
           /* @__PURE__ */ e("span", { className: "text-sm font-semibold", children: t }),
           n && /* @__PURE__ */ e("span", { className: "ml-auto", children: n })
@@ -3919,41 +3919,46 @@ function Dn({ title: t, icon: r = /* @__PURE__ */ e(bt, { className: "size-icon-
   );
 }
 const Ar = {
+  default: "bg-avatar text-avatar-fg",
+  in: "bg-avatar-in text-avatar-in-fg",
+  out: "bg-accent text-accent-fg",
+  note: "bg-avatar-note text-avatar-note-fg"
+}, Lr = {
   xs: "w-5 h-5 text-xs",
   sm: "w-6 h-6 text-xs",
   md: "w-7 h-7 text-base",
   lg: "w-9 h-9 text-sm"
 };
-function Lr(t) {
+function Pr(t) {
   if (!t) return "?";
   const r = t.trim().split(/[^\p{L}\p{N}]+/u).filter(Boolean);
   return r.length >= 2 ? (r[0][0] + r[1][0]).toUpperCase() : r.length === 1 ? r[0].slice(0, 2).toUpperCase() : "?";
 }
-const Ir = ({ name: t, src: r, size: n = "sm", className: s, title: a }) => {
-  const [l, o] = oe.useState(!1), u = d(
-    // `avatar`, 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. It needs its own token because it is a fill that must stay a step
-    // away from its background in *both* themes.
-    "inline-flex items-center justify-center rounded-full overflow-hidden shrink-0 font-semibold select-none bg-avatar text-avatar-fg",
+const Ir = ({ name: t, src: r, tone: n = "default", size: s = "sm", className: a, title: l }) => {
+  const [o, m] = oe.useState(!1), u = d(
+    // 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.
+    "inline-flex items-center justify-center rounded-full overflow-hidden shrink-0 font-semibold select-none",
     Ar[n],
-    s
+    Lr[s],
+    a
   );
-  return r && !l ? /* @__PURE__ */ e(
+  return r && !o ? /* @__PURE__ */ e(
     "img",
     {
       src: r,
       alt: t ?? "",
-      title: a ?? t,
+      title: l ?? t,
       className: d(u, "object-cover"),
-      onError: () => o(!0)
+      onError: () => m(!0)
     }
-  ) : /* @__PURE__ */ e("span", { className: u, title: a ?? t, "aria-label": t, children: Lr(t) });
-}, Re = "ring-surface", Pr = "ring-surface-accent", Tn = ({ people: t, max: r = 4, size: n = "sm", className: s }) => {
+  ) : /* @__PURE__ */ e("span", { className: u, title: l ?? t, "aria-label": t, children: Pr(t) });
+}, Re = "ring-surface", jr = "ring-surface-accent", An = ({ 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__ */ i("span", { className: d("inline-flex items-center", s), children: [
-    a.map((o, u) => /* @__PURE__ */ e(
+  return /* @__PURE__ */ c("span", { className: d("inline-flex items-center", s), children: [
+    a.map((o, m) => /* @__PURE__ */ e(
       Ir,
       {
         name: o.name,
@@ -3961,14 +3966,14 @@ const Ir = ({ name: t, src: r, size: n = "sm", className: s, title: a }) => {
         size: n,
         title: o.name ? o.seen === !1 ? `${o.name} — nog niet gelezen` : o.name : void 0,
         className: d(
-          u > 0 && "-ml-2",
-          o.owner ? Pr : Re,
+          m > 0 && "-ml-2",
+          o.owner ? jr : Re,
           o.seen === !1 && "opacity-40"
         )
       },
-      o.id ?? `${o.name}-${u}`
+      o.id ?? `${o.name}-${m}`
     )),
-    l > 0 && /* @__PURE__ */ i(
+    l > 0 && /* @__PURE__ */ c(
       "span",
       {
         className: d(
@@ -3991,12 +3996,12 @@ const Ir = ({ name: t, src: r, size: n = "sm", className: s, title: a }) => {
   chat: { fg: "text-channel-chat-fg", bg: "bg-channel-chat-soft" },
   tel: { fg: "text-channel-phone-fg", bg: "bg-channel-phone-soft" },
   note: { fg: "text-channel-note-fg", bg: "bg-channel-note-soft" }
-}, jr = {
+}, Or = {
   sm: "size-avatar-xs rounded-sm text-xs",
   md: "size-avatar-sm rounded-md text-xs",
   lg: "size-avatar-lg rounded-md text-base"
 };
-function _n({ channel: t, children: r, size: n = "md", className: s, title: a }) {
+function Ln({ channel: t, children: r, size: n = "md", className: s, title: a }) {
   const l = He[t in He ? t : "note"];
   return /* @__PURE__ */ e(
     "span",
@@ -4004,7 +4009,7 @@ function _n({ channel: t, children: r, size: n = "md", className: s, title: a })
       title: a,
       className: d(
         "inline-flex shrink-0 items-center justify-center font-bold",
-        jr[n],
+        Or[n],
         l.fg,
         l.bg,
         s
@@ -4013,7 +4018,7 @@ function _n({ channel: t, children: r, size: n = "md", className: s, title: a })
     }
   );
 }
-const An = ({
+const Pn = ({
   src: t,
   alt: r,
   size: n = "md",
@@ -4021,19 +4026,19 @@ const An = ({
   radius: a = "md",
   showLoading: l = !0,
   showError: o = !0,
-  fallback: u,
-  loadingContent: m,
+  fallback: m,
+  loadingContent: u,
   errorContent: y,
   className: x,
   onLoad: h,
   onError: b,
   ...v
 }) => {
-  const [k, p] = O(!0), [f, $] = O(!1), [C, q] = O(t), T = (K) => {
-    p(!1), $(!1), h?.(K);
+  const [k, g] = O(!0), [f, $] = O(!1), [C, q] = O(t), T = (K) => {
+    g(!1), $(!1), h?.(K);
   }, G = (K) => {
-    if (p(!1), $(!0), u && C !== u) {
-      q(u), $(!1), p(!0);
+    if (g(!1), $(!0), m && C !== m) {
+      q(m), $(!1), g(!0);
       return;
     }
     b?.(K);
@@ -4065,7 +4070,7 @@ const An = ({
       "rounded-full": a === "full"
     },
     x
-  ), I = d(
+  ), P = d(
     "w-full h-full object-cover transition-opacity duration-fast",
     {
       "opacity-0": k || f,
@@ -4074,32 +4079,32 @@ const An = ({
   ), H = d(
     "absolute inset-0 flex items-center justify-center",
     "text-text-muted"
-  ), te = /* @__PURE__ */ e("div", { className: "animate-pulse", children: /* @__PURE__ */ e("div", { className: "w-6 h-6 bg-surface-hover rounded" }) }), J = /* @__PURE__ */ i("div", { className: "text-center", children: [
-    /* @__PURE__ */ e(Q, { icon: pt, size: "lg", className: "mx-auto mb-1" }),
+  ), te = /* @__PURE__ */ e("div", { className: "animate-pulse", children: /* @__PURE__ */ e("div", { className: "w-6 h-6 bg-surface-hover rounded" }) }), J = /* @__PURE__ */ c("div", { className: "text-center", children: [
+    /* @__PURE__ */ e(Q, { icon: gt, size: "lg", className: "mx-auto mb-1" }),
     /* @__PURE__ */ e("span", { className: "text-xs", children: "Failed to load" })
   ] });
-  return /* @__PURE__ */ i("div", { className: V, children: [
+  return /* @__PURE__ */ c("div", { className: V, children: [
     /* @__PURE__ */ e(
       "img",
       {
         ...v,
         src: C,
         alt: r,
-        className: I,
+        className: P,
         onLoad: T,
         onError: G
       }
     ),
-    k && l && /* @__PURE__ */ e("div", { className: H, children: m || te }),
+    k && l && /* @__PURE__ */ e("div", { className: H, children: u || te }),
     f && o && /* @__PURE__ */ e("div", { className: H, children: y || J })
   ] });
 };
-function Ln({
+function In({
   icon: t,
   onClick: r,
   children: n
 }) {
-  return /* @__PURE__ */ i(
+  return /* @__PURE__ */ c(
     "button",
     {
       type: "button",
@@ -4117,7 +4122,7 @@ function Ln({
     }
   );
 }
-function In({
+function jn({
   items: t,
   getRowKey: r,
   variant: n = "divided",
@@ -4125,15 +4130,15 @@ function In({
   renderItem: a,
   trailing: l,
   onSelect: o,
-  onActiveIndexChange: u,
-  isActive: m,
+  onActiveIndexChange: m,
+  isActive: u,
   unread: y,
   dimmed: x,
   groupBy: h,
   groups: b,
   renderGroupHeader: v,
   stickyGroupHeaders: k = !1,
-  collapsibleGroups: p = !1,
+  collapsibleGroups: g = !1,
   hideGroupCount: f = !1,
   selectable: $ = !1,
   selectedItems: C = [],
@@ -4141,18 +4146,18 @@ function In({
   bulkActions: T,
   header: G,
   stickyHeader: V = !1,
-  bordered: I = !1,
+  bordered: P = !1,
   emptyContent: H,
   loading: te = !1,
   loadingRows: J = 4,
   className: K,
   "aria-label": ce
 }) {
-  const [w, c] = oe.useState(
+  const [w, i] = oe.useState(
     () => Object.fromEntries(
       (b ?? []).filter((z) => z.defaultCollapsed).map((z) => [z.id, !0])
     )
-  ), S = oe.useRef(null), g = (z) => {
+  ), S = oe.useRef(null), p = (z) => {
     if (!["ArrowDown", "ArrowUp", "Home", "End"].includes(z.key)) return;
     const j = Array.from(
       S.current?.querySelectorAll("li[data-list-row]") ?? []
@@ -4167,11 +4172,18 @@ function In({
     );
   }, re = (z) => q?.(z ? [...t] : []), ee = d(
     "flex flex-col",
-    I && "overflow-hidden rounded-lg border border-border-subtle",
+    // 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
+    // the dock hung right under the last row instead of at the bottom of the
+    // 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.
+    $ && C.length > 0 && "min-h-full",
+    P && "overflow-hidden rounded-lg border border-border-subtle",
     K
   );
   if (te)
-    return /* @__PURE__ */ e("div", { className: ee, children: Array.from({ length: J }).map((z, F) => /* @__PURE__ */ i(
+    return /* @__PURE__ */ e("div", { className: ee, children: Array.from({ length: J }).map((z, F) => /* @__PURE__ */ c(
       "div",
       {
         className: d(
@@ -4189,9 +4201,9 @@ function In({
     )) });
   if (t.length === 0 && H)
     return /* @__PURE__ */ e("div", { className: ee, children: H });
-  const Y = t.length > 0 && C.length === t.length, P = C.length > 0 && !Y, D = (z, F, j) => {
-    const B = m?.(z, F) ?? !1, M = y?.(z, F) ?? !1, L = x?.(z, F) ?? !1, Z = $ && N(z);
-    return /* @__PURE__ */ i(
+  const Y = t.length > 0 && C.length === t.length, I = C.length > 0 && !Y, D = (z, F, j) => {
+    const B = u?.(z, F) ?? !1, M = y?.(z, F) ?? !1, L = x?.(z, F) ?? !1, Z = $ && N(z);
+    return /* @__PURE__ */ c(
       "li",
       {
         ...o ? {
@@ -4200,7 +4212,7 @@ function In({
           "data-list-row": "",
           "aria-current": B || void 0,
           onClick: () => o(z, F),
-          onFocus: () => u?.(F),
+          onFocus: () => m?.(F),
           onKeyDown: (ne) => {
             ne.key !== "Enter" && ne.key !== " " || (ne.preventDefault(), o(z, F));
           }
@@ -4256,10 +4268,10 @@ function In({
       ...F.filter((B) => z.has(B.id)),
       ...[...z.keys()].filter((B) => !F.some((M) => M.id === B)).map((B) => ({ id: B }))
     ].flatMap((B, M) => {
-      const L = z.get(B.id) ?? [], Z = p && w[B.id], ne = B.title ?? B.id, de = B.count ?? L.length, be = /* @__PURE__ */ e(
+      const L = z.get(B.id) ?? [], Z = g && w[B.id], ne = B.title ?? B.id, de = B.count ?? L.length, be = /* @__PURE__ */ e(
         "li",
         {
-          onClick: p ? () => c((fe) => ({ ...fe, [B.id]: !fe[B.id] })) : void 0,
+          onClick: g ? () => i((fe) => ({ ...fe, [B.id]: !fe[B.id] })) : void 0,
           className: d(
             // 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.
@@ -4268,12 +4280,12 @@ function In({
             M > 0 ? "pt-5" : "pt-3",
             B.tone === "danger" ? "text-danger-fg" : B.tone === "muted" ? "text-text-subtle" : "text-text",
             k && "sticky z-10",
-            p && "cursor-pointer select-none"
+            g && "cursor-pointer select-none"
           ),
-          "aria-expanded": p ? !Z : void 0,
+          "aria-expanded": g ? !Z : void 0,
           style: k ? { top: V ? 28 : 0 } : void 0,
-          children: v ? v(B, L.map((fe) => fe.item)) : /* @__PURE__ */ i(ve, { children: [
-            p && /* @__PURE__ */ e(
+          children: v ? v(B, L.map((fe) => fe.item)) : /* @__PURE__ */ c(ve, { children: [
+            g && /* @__PURE__ */ e(
               ze,
               {
                 "aria-hidden": !0,
@@ -4306,8 +4318,8 @@ function In({
       ];
     });
   })();
-  return /* @__PURE__ */ i("div", { ref: S, className: ee, onKeyDown: o ? g : void 0, children: [
-    G && /* @__PURE__ */ i(
+  return /* @__PURE__ */ c("div", { ref: S, className: ee, onKeyDown: o ? p : void 0, children: [
+    G && /* @__PURE__ */ c(
       "div",
       {
         className: d(
@@ -4322,7 +4334,7 @@ function In({
             ye,
             {
               checked: Y,
-              indeterminate: P,
+              indeterminate: I,
               onChange: (z) => re(z.target.checked),
               "aria-label": "Alles selecteren"
             }
@@ -4332,8 +4344,8 @@ function In({
       }
     ),
     /* @__PURE__ */ e("ul", { "aria-label": ce, className: "flex flex-col", children: A }),
-    $ && C.length > 0 && /* @__PURE__ */ e("div", { className: "pointer-events-none sticky bottom-0 z-10 flex justify-center px-5 pb-4", children: /* @__PURE__ */ i("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__ */ i("span", { className: "text-sm font-medium", children: [
+    $ && C.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: [
         C.length,
         " geselecteerd"
       ] }),
@@ -4353,7 +4365,7 @@ function In({
     ] }) })
   ] });
 }
-function Pn({
+function On({
   side: t,
   continued: r = !1,
   tone: n = "default",
@@ -4366,7 +4378,10 @@ function Pn({
       className: d(
         // A bubble never spans the whole column; it narrows further from md,
         // where the thread itself is wide enough for the difference to matter.
-        "min-w-0 max-w-bubble md:max-w-bubble-md shadow-sm",
+        // No shadow: a bubble is an inner card, and inner cards separate
+        // themselves with a fill. The shadow was doing the separating while both
+        // sides were white.
+        "min-w-0 max-w-bubble md:max-w-bubble-md",
         // No outline on an ordinary message: its fill already separates it from
         // the thread, and a border on every bubble turns a conversation into a
         // stack of boxes. The flagged tones keep theirs — there the outline is
@@ -4375,7 +4390,11 @@ function Pn({
         // tone === "note" && "border border-note-border",
         // The tight corner points back at the sender.
         t === "out" ? "rounded-lg rounded-tr-sm" : "rounded-lg rounded-tl-sm",
-        n === "note" ? "bg-note-soft" : "bg-surface",
+        // Sent is a pale blue, received the neutral sunk grey — the same pair the
+        // full-width feed cards use, so a chat thread and a mail thread say
+        // "ours" and "theirs" the same way. Both used to be white on white,
+        // which left the corner radius as the only cue.
+        n === "note" ? "bg-note-soft" : t === "out" ? "bg-bubble-out-soft" : "bg-surface-sunk",
         r && "mt-1",
         s
       ),
@@ -4383,18 +4402,18 @@ function Pn({
     }
   );
 }
-const Or = {
+const Fr = {
   default: "text-text",
   urgent: "text-danger-fg",
   success: "text-success-fg"
 };
-function jn({ value: t, label: r, tone: n = "default", className: s, ...a }) {
-  return /* @__PURE__ */ i("div", { className: d("rounded-xl bg-editor px-4 py-3.5", s), ...a, children: [
-    /* @__PURE__ */ e("div", { className: d("text-2xl font-semibold", Or[n]), children: t }),
+function Fn({ value: t, label: r, tone: n = "default", className: s, ...a }) {
+  return /* @__PURE__ */ c("div", { className: d("rounded-xl bg-editor px-4 py-3.5", s), ...a, children: [
+    /* @__PURE__ */ e("div", { className: d("text-2xl font-semibold", Fr[n]), children: t }),
     /* @__PURE__ */ e("div", { className: "pt-0.5 text-xs text-text-muted", children: r })
   ] });
 }
-const On = ({
+const Bn = ({
   surface: t = !1,
   title: r,
   subtitle: n,
@@ -4402,26 +4421,26 @@ const On = ({
   actions: a = [],
   children: l,
   className: o,
-  backLabel: u = "Back",
-  backClassName: m,
+  backLabel: m = "Back",
+  backClassName: u,
   onBack: y,
   editable: x = !1,
   onTitleChange: h
 }) => {
-  const [b, v] = O(!1), [k, p] = O(r), f = se(null);
+  const [b, v] = O(!1), [k, g] = O(r), f = se(null);
   X(() => {
-    p(r);
+    g(r);
   }, [r]), X(() => {
     b && f.current && (f.current.focus(), f.current.select());
   }, [b]);
   const $ = () => {
     x && v(!0);
   }, C = () => {
-    v(!1), k.trim() !== "" && k !== r && h ? h(k.trim()) : p(r);
+    v(!1), k.trim() !== "" && k !== r && h ? h(k.trim()) : g(r);
   }, q = (T) => {
-    T.key === "Enter" ? f.current?.blur() : T.key === "Escape" && (p(r), v(!1));
+    T.key === "Enter" ? f.current?.blur() : T.key === "Escape" && (g(r), v(!1));
   };
-  return /* @__PURE__ */ i(
+  return /* @__PURE__ */ c(
     "div",
     {
       className: d(
@@ -4434,22 +4453,24 @@ const On = ({
         o
       ),
       children: [
-        /* @__PURE__ */ i("div", { className: "flex flex-row sm:items-start sm:justify-between items-center gap-4", children: [
-          /* @__PURE__ */ e("div", { className: "min-w-0 flex-1", children: /* @__PURE__ */ i("div", { className: "flex items-start gap-4 text-text", children: [
-            y && /* @__PURE__ */ e(ae, { variant: "outline", onClick: y, leftIcon: /* @__PURE__ */ e(Q, { icon: Ee, size: "sm" }), iconOnly: !0 }),
-            /* @__PURE__ */ i("div", { className: "min-w-0 flex-1", children: [
+        /* @__PURE__ */ c("div", { className: "flex flex-row sm:items-start sm:justify-between items-center gap-4", children: [
+          /* @__PURE__ */ e("div", { className: "min-w-0 flex-1", children: /* @__PURE__ */ c("div", { className: "flex items-start gap-4 text-text", children: [
+            y && // Ghost: a framed box around a back chevron makes the way out of a
+            // page look like the page's primary control.
+            /* @__PURE__ */ e(ae, { variant: "ghost", onClick: y, leftIcon: /* @__PURE__ */ e(Q, { icon: Ee, size: "md" }), iconOnly: !0 }),
+            /* @__PURE__ */ c("div", { className: "min-w-0 flex-1", children: [
               b ? /* @__PURE__ */ e(
                 "input",
                 {
                   ref: f,
                   type: "text",
                   value: k,
-                  onChange: (T) => p(T.target.value),
+                  onChange: (T) => g(T.target.value),
                   onBlur: C,
                   onKeyDown: q,
                   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__ */ i("div", { className: "group flex items-baseline gap-2.5 min-w-0", children: [
+              ) : /* @__PURE__ */ c("div", { className: "group flex items-baseline gap-2.5 min-w-0", children: [
                 /* @__PURE__ */ e(
                   "h2",
                   {
@@ -4464,7 +4485,7 @@ const On = ({
                 ),
                 n && /* @__PURE__ */ e("span", { className: "shrink-0 text-base text-text-muted truncate", children: n }),
                 x && /* @__PURE__ */ e(
-                  gt,
+                  pt,
                   {
                     size: 15,
                     onClick: $,
@@ -4519,7 +4540,7 @@ const On = ({
       ]
     }
   );
-}, Fr = /<[a-z][\s\S]*>/i, Br = [
+}, Br = /<[a-z][\s\S]*>/i, Rr = [
   "[&_p]:my-1.5 [&_p:first-child]:mt-0 [&_p:last-child]:mb-0 [&_p]:leading-relaxed",
   "[&_a]:text-accent [&_a]:underline [&_a]:underline-offset-2",
   "[&_strong]:font-semibold [&_em]:italic",
@@ -4534,7 +4555,7 @@ const On = ({
   "[&_table]:my-1.5 [&_table]:w-full [&_table]:border-collapse [&_table]:text-xs",
   "[&_th]:border [&_th]:border-border [&_th]:px-2 [&_th]:py-1 [&_th]:text-left [&_th]:font-semibold",
   "[&_td]:border [&_td]:border-border [&_td]:px-2 [&_td]:py-1"
-].join(" "), Rr = {
+].join(" "), Hr = {
   p: (t) => /* @__PURE__ */ e("p", { className: "my-1.5 leading-relaxed first:mt-0 last:mb-0", ...t }),
   a: (t) => /* @__PURE__ */ e("a", { className: "text-accent underline underline-offset-2 hover:opacity-80", target: "_blank", rel: "noopener noreferrer", ...t }),
   strong: (t) => /* @__PURE__ */ e("strong", { className: "font-semibold", ...t }),
@@ -4557,31 +4578,31 @@ const On = ({
   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 Fn({ text: t, className: r, as: n }) {
+function Rn({ text: t, className: r, as: n }) {
   const s = t ?? "";
-  return (n ? n === "html" : Fr.test(s)) ? /* @__PURE__ */ e(
+  return (n ? n === "html" : Br.test(s)) ? /* @__PURE__ */ e(
     "div",
     {
-      className: d("break-words", Br, r),
+      className: d("break-words", Rr, r),
       dangerouslySetInnerHTML: { __html: kt.sanitize(s, { ADD_ATTR: ["target", "rel"] }) }
     }
-  ) : /* @__PURE__ */ e("div", { className: d("break-words", r), children: /* @__PURE__ */ e(Ct, { remarkPlugins: [St], components: Rr, children: s }) });
+  ) : /* @__PURE__ */ e("div", { className: d("break-words", r), children: /* @__PURE__ */ e(Ct, { remarkPlugins: [St], components: Hr, children: s }) });
 }
-const Bn = ({ label: t, meta: r, action: n, className: s }) => /* @__PURE__ */ i("div", { className: d("flex items-center gap-2 px-1 pb-2 pt-7 first:pt-0", s), children: [
+const Hn = ({ label: t, meta: r, action: n, className: s }) => /* @__PURE__ */ c("div", { className: d("flex items-center gap-2 px-1 pb-2 pt-7 first:pt-0", s), children: [
   /* @__PURE__ */ e("span", { className: "shrink-0 text-2xs font-semibold uppercase tracking-label text-text-subtle", children: t }),
   r && /* @__PURE__ */ e("span", { className: "min-w-0 flex-1 truncate text-right text-xs tabular-nums text-text-subtle", children: r }),
   n && /* @__PURE__ */ e("span", { className: "ml-auto shrink-0", children: n })
 ] });
-function Rn({ label: t, trailing: r, align: n = "center", className: s }) {
+function Vn({ label: t, trailing: r, align: n = "center", className: s }) {
   const a = /* @__PURE__ */ e("span", { className: "h-px flex-1 bg-border-subtle", "aria-hidden": !0 });
-  return !t && !r ? /* @__PURE__ */ e("div", { className: d("flex items-center py-2", s), children: a }) : /* @__PURE__ */ i("div", { className: d("flex items-center gap-3 py-2", s), children: [
+  return !t && !r ? /* @__PURE__ */ e("div", { className: d("flex items-center py-2", s), children: a }) : /* @__PURE__ */ c("div", { className: d("flex items-center gap-3 py-2", s), children: [
     n === "center" && a,
     /* @__PURE__ */ e("span", { className: "shrink-0 text-xs font-medium text-text-muted", children: t }),
     a,
     r && /* @__PURE__ */ e("span", { className: "shrink-0", children: r })
   ] });
 }
-function Hn({
+function qn({
   label: t,
   description: r,
   control: n,
@@ -4589,7 +4610,7 @@ function Hn({
   disabled: a = !1,
   className: l
 }) {
-  return /* @__PURE__ */ i(
+  return /* @__PURE__ */ c(
     "div",
     {
       className: d(
@@ -4599,7 +4620,7 @@ function Hn({
         l
       ),
       children: [
-        /* @__PURE__ */ i("div", { className: "min-w-0", children: [
+        /* @__PURE__ */ c("div", { className: "min-w-0", children: [
           /* @__PURE__ */ e("div", { className: "text-sm text-text", children: t }),
           r && /* @__PURE__ */ e("div", { className: "text-xs text-text-muted", children: r })
         ] }),
@@ -4608,7 +4629,7 @@ function Hn({
     }
   );
 }
-function Vn({
+function Un({
   icon: t,
   title: r,
   description: n,
@@ -4616,10 +4637,10 @@ function Vn({
   children: a,
   className: l
 }) {
-  return /* @__PURE__ */ i("section", { className: d("flex flex-col gap-2", l), children: [
-    /* @__PURE__ */ i("div", { className: "flex items-start gap-2", children: [
+  return /* @__PURE__ */ c("section", { className: d("flex flex-col gap-2", l), children: [
+    /* @__PURE__ */ c("div", { className: "flex items-start gap-2", children: [
       t && /* @__PURE__ */ e(Q, { icon: t, size: "md", color: "secondary", className: "mt-0.5" }),
-      /* @__PURE__ */ i("div", { className: "min-w-0 flex-1", children: [
+      /* @__PURE__ */ c("div", { className: "min-w-0 flex-1", children: [
         /* @__PURE__ */ e("h3", { className: "text-sm font-semibold text-text", children: r }),
         n && /* @__PURE__ */ e("p", { className: "text-xs text-text-muted", children: n })
       ] }),
@@ -4628,8 +4649,8 @@ function Vn({
     /* @__PURE__ */ e("div", { className: d("flex flex-col", t && "pl-6"), children: a })
   ] });
 }
-function qn({ label: t, dotColor: r, onClick: n, className: s }) {
-  return /* @__PURE__ */ i(
+function Wn({ label: t, dotColor: r, onClick: n, className: s }) {
+  return /* @__PURE__ */ c(
     "button",
     {
       type: "button",
@@ -4646,13 +4667,13 @@ function qn({ label: t, dotColor: r, onClick: n, className: s }) {
     }
   );
 }
-function Hr(t, r) {
+function Vr(t, r) {
   return r.split(".").reduce(
     (n, s) => n && typeof n == "object" && s in n ? n[s] : void 0,
     t
   );
 }
-const Un = ({
+const Kn = ({
   groups: t,
   data: r,
   size: n = "md",
@@ -4673,9 +4694,9 @@ const Un = ({
     if (!h) return String(x || "-");
     const b = h.find((v) => v.value === x);
     return b ? b.label : String(x || "-");
-  }, u = he(
+  }, m = he(
     (x) => {
-      const h = Hr(r, x.name);
+      const h = Vr(r, x.name);
       if (x.type === "array") {
         const v = h;
         return !v || v.length === 0 ? /* @__PURE__ */ e(
@@ -4686,12 +4707,12 @@ const Un = ({
             className: "text-text-muted",
             children: "Geen items"
           }
-        ) : /* @__PURE__ */ e("div", { className: "space-y-3", children: v.map((k, p) => /* @__PURE__ */ i(
+        ) : /* @__PURE__ */ e("div", { className: "space-y-3", children: v.map((k, g) => /* @__PURE__ */ c(
           "div",
           {
             className: "p-4 border border-border rounded-xl space-y-3",
             children: [
-              /* @__PURE__ */ e("div", { className: "flex items-center justify-between", children: /* @__PURE__ */ i(
+              /* @__PURE__ */ e("div", { className: "flex items-center justify-between", children: /* @__PURE__ */ c(
                 me,
                 {
                   variant: "label",
@@ -4701,7 +4722,7 @@ const Un = ({
                   children: [
                     x.label,
                     " ",
-                    p + 1
+                    g + 1
                   ]
                 }
               ) }),
@@ -4738,7 +4759,7 @@ const Un = ({
                   default:
                     C = String($ || "-");
                 }
-                return f.format && (C = f.format($, k)), /* @__PURE__ */ i("div", { className: "space-y-1", children: [
+                return f.format && (C = f.format($, k)), /* @__PURE__ */ c("div", { className: "space-y-1", children: [
                   /* @__PURE__ */ e(
                     me,
                     {
@@ -4761,7 +4782,7 @@ const Un = ({
               }) })
             ]
           },
-          p
+          g
         )) });
       }
       if (x.type === "custom" && x.customComponent)
@@ -4815,7 +4836,7 @@ const Un = ({
       );
     },
     [r]
-  ), m = he(
+  ), u = he(
     (x) => {
       if (x.conditional && !x.conditional(r))
         return null;
@@ -4835,12 +4856,12 @@ const Un = ({
         },
         x.className
       );
-      return /* @__PURE__ */ i(
+      return /* @__PURE__ */ c(
         "div",
         {
           className: "grid grid-cols-1 md:grid-cols-3 gap-8 p-6 border border-border rounded-xl",
           children: [
-            /* @__PURE__ */ i("div", { className: "md:col-span-1", children: [
+            /* @__PURE__ */ c("div", { className: "md:col-span-1", children: [
               /* @__PURE__ */ e(
                 me,
                 {
@@ -4861,7 +4882,7 @@ const Un = ({
                 }
               )
             ] }),
-            /* @__PURE__ */ e("div", { className: "md:col-span-2", children: /* @__PURE__ */ e("div", { className: b, children: h.map((v) => /* @__PURE__ */ i(
+            /* @__PURE__ */ e("div", { className: "md:col-span-2", children: /* @__PURE__ */ e("div", { className: b, children: h.map((v) => /* @__PURE__ */ c(
               "div",
               {
                 className: "space-y-1",
@@ -4879,7 +4900,7 @@ const Un = ({
                       children: v.label
                     }
                   ),
-                  u(v)
+                  m(v)
                 ]
               },
               v.name
@@ -4889,7 +4910,7 @@ const Un = ({
         x.id
       );
     },
-    [r, u]
+    [r, m]
   ), y = d(
     "space-y-6",
     {
@@ -4900,12 +4921,24 @@ const Un = ({
     },
     s
   );
-  return /* @__PURE__ */ e("div", { className: y, children: /* @__PURE__ */ e("div", { className: "space-y-8", children: t.map(m) }) });
-}, Xe = ({ item: t, isSelectedHandler: r, onClick: n, depth: s = 0 }) => {
+  return /* @__PURE__ */ e("div", { className: y, children: /* @__PURE__ */ e("div", { className: "space-y-8", children: t.map(u) }) });
+}, qr = () => /* @__PURE__ */ c("div", { className: "flex flex-col gap-px", "aria-hidden": !0, children: [
+  /* @__PURE__ */ e("div", { className: "px-2.5 pb-2 pt-5", children: /* @__PURE__ */ e("span", { className: "block h-2 w-16 rounded-xs bg-page-hover" }) }),
+  [0, 1, 2, 3].map((t) => /* @__PURE__ */ c("div", { className: "flex h-row-md items-center gap-2.5 px-2.5", children: [
+    /* @__PURE__ */ e("span", { className: "size-4 shrink-0 rounded-xs bg-page-hover" }),
+    /* @__PURE__ */ e(
+      "span",
+      {
+        className: "h-2 rounded-xs bg-page-hover",
+        style: { width: `${[62, 44, 74, 52][t]}%` }
+      }
+    )
+  ] }, t))
+] }), Xe = ({ item: t, isSelectedHandler: r, onClick: n, depth: s = 0 }) => {
   const a = !!(t.children && t.children.length > 0), l = r ? r(t.path) : !1;
   if (a)
-    return /* @__PURE__ */ i("li", { children: [
-      /* @__PURE__ */ i(
+    return /* @__PURE__ */ c("li", { children: [
+      /* @__PURE__ */ c(
         "div",
         {
           className: d(
@@ -4917,10 +4950,10 @@ const Un = ({
           ]
         }
       ),
-      /* @__PURE__ */ e("ul", { className: "flex flex-col gap-px", children: t.children?.map((m, y) => /* @__PURE__ */ e(
+      /* @__PURE__ */ e("ul", { className: "flex flex-col gap-px", children: t.children?.map((u, y) => /* @__PURE__ */ e(
         Xe,
         {
-          item: m,
+          item: u,
           isSelectedHandler: r,
           onClick: n,
           depth: s + 1
@@ -4928,15 +4961,15 @@ const Un = ({
         y
       )) })
     ] });
-  const o = t.action, u = o?.visibility !== "always";
-  return /* @__PURE__ */ e("li", { children: /* @__PURE__ */ i(
+  const o = t.action, m = o?.visibility !== "always";
+  return /* @__PURE__ */ e("li", { children: /* @__PURE__ */ c(
     "div",
     {
       role: "button",
       tabIndex: 0,
       onClick: () => t.path && n?.(t.path),
-      onKeyDown: (m) => {
-        (m.key === "Enter" || m.key === " ") && (m.preventDefault(), t.path && n?.(t.path));
+      onKeyDown: (u) => {
+        (u.key === "Enter" || u.key === " ") && (u.preventDefault(), t.path && n?.(t.path));
       },
       className: d(
         // De kolom ligt op de backdrop, niet op een paneel: het actieve item
@@ -4945,7 +4978,7 @@ const Un = ({
         "group/item flex h-row-md cursor-pointer items-center gap-2.5 rounded-md px-2.5 text-base no-underline",
         "transition-colors duration-fast ease-out",
         "focus-visible:outline-none focus-visible:focus-ring",
-        l ? "bg-surface font-medium text-text shadow-sm" : "text-text-muted hover:bg-page-hover hover:text-text"
+        l ? "bg-surface-hover font-medium text-text shadow-sm" : "text-text-muted hover:bg-page-hover hover:text-text"
       ),
       children: [
         t.icon && /* @__PURE__ */ e(
@@ -4965,7 +4998,7 @@ const Un = ({
             className: d(
               "shrink-0 text-xs tabular-nums",
               l ? "rounded-full bg-accent px-1.5 font-semibold text-accent-fg" : "text-text-subtle",
-              o && u && "group-hover/item:hidden group-focus-within/item:hidden"
+              o && m && "group-hover/item:hidden group-focus-within/item:hidden"
             ),
             children: t.count
           }
@@ -4976,16 +5009,16 @@ const Un = ({
             type: "button",
             "aria-label": o.label,
             title: o.label,
-            onClick: (m) => {
-              m.stopPropagation(), o.onClick();
+            onClick: (u) => {
+              u.stopPropagation(), o.onClick();
             },
-            onKeyDown: (m) => m.stopPropagation(),
+            onKeyDown: (u) => u.stopPropagation(),
             className: d(
               "flex size-5 shrink-0 items-center justify-center rounded-sm",
               "text-text-subtle transition-colors duration-fast ease-out",
               "hover:bg-page-hover hover:text-text",
               "focus-visible:outline-none focus-visible:focus-ring",
-              u && "opacity-0 group-hover/item:opacity-100 focus-visible:opacity-100"
+              m && "opacity-0 group-hover/item:opacity-100 focus-visible:opacity-100"
             ),
             children: o.icon
           }
@@ -4993,25 +5026,29 @@ const Un = ({
       ]
     }
   ) });
-}, Wn = ({
+}, Gn = ({
   items: t,
   isSelectedHandler: r,
   onClick: n,
-  preMenuItemsComponent: s
-}) => /* @__PURE__ */ i("nav", { className: "flex h-full min-h-0 shrink-0 flex-col", children: [
+  preMenuItemsComponent: s,
+  loading: a = !1
+}) => a ? /* @__PURE__ */ c("nav", { className: "flex h-full min-h-0 shrink-0 flex-col", children: [
+  s && /* @__PURE__ */ e("div", { className: "pb-4", children: s }),
+  /* @__PURE__ */ e(qr, {})
+] }) : /* @__PURE__ */ c("nav", { className: "flex h-full min-h-0 shrink-0 flex-col", children: [
   s && /* @__PURE__ */ e("div", { className: "pb-4", children: s }),
   /* @__PURE__ */ e("ul", { className: "flex min-h-0 flex-1 flex-col gap-px overflow-y-auto", children: t.map(
-    (a, l) => !a.path && !a.label && !a.children ? /* @__PURE__ */ e("li", { "aria-hidden": !0, className: "h-4" }, l) : /* @__PURE__ */ e(
+    (l, o) => !l.path && !l.label && !l.children ? /* @__PURE__ */ e("li", { "aria-hidden": !0, className: "h-4" }, o) : /* @__PURE__ */ e(
       Xe,
       {
-        item: a,
+        item: l,
         isSelectedHandler: r,
         onClick: n
       },
-      l
+      o
     )
   ) })
-] }), Vr = {
+] }), Ur = {
   xs: "text-xs",
   sm: "text-sm",
   md: "text-base",
@@ -5020,13 +5057,13 @@ const Un = ({
   "2xl": "text-2xl",
   "3xl": "text-3xl",
   "4xl": "text-3xl"
-}, qr = {
+}, Wr = {
   light: "font-normal",
   normal: "font-normal",
   medium: "font-medium",
   semibold: "font-semibold",
   bold: "font-bold"
-}, Ur = {
+}, Kr = {
   primary: "text-text",
   secondary: "text-text-muted",
   accent: "text-accent",
@@ -5036,11 +5073,11 @@ const Un = ({
   info: "text-info-fg",
   neutral: "text-text",
   current: "text-current"
-}, Wr = {
+}, Gr = {
   left: "text-left",
   center: "text-center",
   right: "text-right"
-}, Kn = ({
+}, Jn = ({
   level: t = 1,
   size: r,
   weight: n = "semibold",
@@ -5048,21 +5085,21 @@ const Un = ({
   align: a = "left",
   truncate: l = !1,
   className: o,
-  children: u,
-  ...m
+  children: m,
+  ...u
 }) => {
   const y = `h${t}`, x = d(
     "font-sans text-pretty",
-    Vr[r || Kr(t)],
-    qr[n],
-    Ur[s],
-    Wr[a],
+    Ur[r || Jr(t)],
+    Wr[n],
+    Kr[s],
+    Gr[a],
     l && "truncate",
     o
   );
-  return /* @__PURE__ */ e(y, { className: x, ...m, children: u });
+  return /* @__PURE__ */ e(y, { className: x, ...u, children: m });
 };
-function Kr(t) {
+function Jr(t) {
   return {
     1: "2xl",
     2: "xl",
@@ -5072,7 +5109,7 @@ function Kr(t) {
     6: "md"
   }[t] || "md";
 }
-const Gn = ({
+const Yn = ({
   commands: t,
   isOpen: r,
   onClose: n,
@@ -5080,11 +5117,11 @@ const Gn = ({
   initialCommandPath: a,
   initialActiveIndex: l
 }) => {
-  const [o, u] = O(""), [m, y] = O(a || []), [x, h] = O(l || 0), b = se(null), v = se(null), p = (m.length ? t.find((f) => f.id === m[0])?.subCommands || [] : t).filter(
+  const [o, m] = O(""), [u, y] = O(a || []), [x, h] = O(l || 0), b = se(null), v = se(null), g = (u.length ? t.find((f) => f.id === u[0])?.subCommands || [] : t).filter(
     (f) => f.label.toLowerCase().includes(o.toLowerCase())
   );
   return X(() => {
-    r || (u(""), y(a || []), h(l || 0));
+    r || (m(""), y(a || []), h(l || 0));
   }, [r]), X(() => {
     const f = ($) => {
       if (r) {
@@ -5092,20 +5129,20 @@ const Gn = ({
           n();
         else if ($.key === "ArrowUp")
           h(
-            (C) => C > 0 ? C - 1 : p.length - 1
+            (C) => C > 0 ? C - 1 : g.length - 1
           );
         else if ($.key === "ArrowDown")
           h(
-            (C) => C < p.length - 1 ? C + 1 : 0
+            (C) => C < g.length - 1 ? C + 1 : 0
           );
         else if ($.key === "Enter") {
-          const C = p[x];
-          C && (C.subCommands ? (y([...m, C.id]), h(0)) : C.action && (C.action(), n()));
+          const C = g[x];
+          C && (C.subCommands ? (y([...u, C.id]), h(0)) : C.action && (C.action(), n()));
         }
       }
     };
     return document.addEventListener("keydown", f), () => document.removeEventListener("keydown", f);
-  }, [r, n, p, x, m]), X(() => {
+  }, [r, n, g, x, u]), X(() => {
     const f = ($) => {
       b.current && !b.current.contains($.target) && n();
     };
@@ -5113,13 +5150,13 @@ const Gn = ({
   }, [r, n]), X(() => {
     if (!r) return;
     v.current?.querySelector(`[data-index="${x}"]`)?.scrollIntoView({ block: "nearest" });
-  }, [x, r]), r ? /* @__PURE__ */ e("div", { className: "fixed inset-0 z-modal flex items-center justify-center bg-scrim", children: /* @__PURE__ */ i(
+  }, [x, r]), r ? /* @__PURE__ */ e("div", { className: "fixed inset-0 z-modal flex items-center justify-center bg-scrim", children: /* @__PURE__ */ c(
     "div",
     {
       className: "flex flex-col w-full max-w-lg max-h-dialog p-2 mx-auto rounded-lg border border-border shadow-modal bg-surface",
       ref: b,
       children: [
-        /* @__PURE__ */ i("div", { className: "flex items-center gap-2 px-3 flex-shrink-0", children: [
+        /* @__PURE__ */ c("div", { className: "flex items-center gap-2 px-3 flex-shrink-0", children: [
           /* @__PURE__ */ e(Me, { className: "w-4 h-4 text-text-muted shrink-0" }),
           /* @__PURE__ */ e(
             "input",
@@ -5128,25 +5165,25 @@ const Gn = ({
               autoFocus: !0,
               placeholder: s?.searchPlaceholder || "Search commands...",
               value: o,
-              onChange: (f) => u(f.target.value),
+              onChange: (f) => m(f.target.value),
               className: "w-full border-0 bg-transparent py-2 text-text focus:outline-none"
             }
           )
         ] }),
-        /* @__PURE__ */ i(
+        /* @__PURE__ */ c(
           "div",
           {
             ref: v,
             className: "mt-2 pt-2 text-sm border-t border-border max-h-dialog-list overflow-y-auto",
             children: [
-              p.length === 0 && /* @__PURE__ */ e("div", { className: "text-text-muted text-center text-sm", children: s?.noCommandsFound || "No commands found" }),
-              p.map((f, $) => /* @__PURE__ */ i(
+              g.length === 0 && /* @__PURE__ */ e("div", { className: "text-text-muted text-center text-sm", children: s?.noCommandsFound || "No commands found" }),
+              g.map((f, $) => /* @__PURE__ */ c(
                 "div",
                 {
                   "data-index": $,
                   className: `flex items-center p-2 cursor-pointer rounded-md ${$ === x ? "bg-accent-soft text-accent" : "text-text"}`,
                   onClick: () => {
-                    f.subCommands ? (y([...m, f.id]), h(0)) : f.action && (f.action(), n());
+                    f.subCommands ? (y([...u, f.id]), h(0)) : f.action && (f.action(), n());
                   },
                   onMouseEnter: () => h($),
                   children: [
@@ -5160,16 +5197,16 @@ const Gn = ({
             ]
           }
         ),
-        /* @__PURE__ */ i("div", { className: "flex items-center gap-4 px-3 pt-2 mt-2 text-xs text-text-muted border-t border-border", children: [
-          /* @__PURE__ */ i("span", { className: "flex items-center gap-1.5", children: [
+        /* @__PURE__ */ c("div", { className: "flex items-center gap-4 px-3 pt-2 mt-2 text-xs text-text-muted border-t border-border", children: [
+          /* @__PURE__ */ c("span", { className: "flex items-center gap-1.5", children: [
             /* @__PURE__ */ e("kbd", { className: "inline-flex items-center justify-center min-w-5 px-1 py-0.5 rounded border border-border bg-surface-sunk text-xs font-medium not-italic", children: "↑↓" }),
             s?.navigate || "to navigate"
           ] }),
-          /* @__PURE__ */ i("span", { className: "flex items-center gap-1.5", children: [
+          /* @__PURE__ */ c("span", { className: "flex items-center gap-1.5", children: [
             /* @__PURE__ */ e("kbd", { className: "inline-flex items-center justify-center min-w-5 px-1 py-0.5 rounded border border-border bg-surface-sunk text-xs font-medium not-italic", children: "↵" }),
             s?.select || "to select"
           ] }),
-          /* @__PURE__ */ i("span", { className: "flex items-center gap-1.5", children: [
+          /* @__PURE__ */ c("span", { className: "flex items-center gap-1.5", children: [
             /* @__PURE__ */ e("kbd", { className: "inline-flex items-center justify-center min-w-5 px-1 py-0.5 rounded border border-border bg-surface-sunk text-xs font-medium not-italic", children: "Esc" }),
             s?.close || "to close"
           ] })
@@ -5177,7 +5214,7 @@ const Gn = ({
       ]
     }
   ) }) : null;
-}, Gr = {
+}, Yr = {
   none: "p-0",
   xs: "p-1",
   sm: "p-2",
@@ -5185,7 +5222,7 @@ const Gn = ({
   lg: "p-6",
   xl: "p-8",
   "2xl": "p-12"
-}, Jr = {
+}, Xr = {
   none: "m-0",
   xs: "m-1",
   sm: "m-2",
@@ -5193,7 +5230,7 @@ const Gn = ({
   lg: "m-6",
   xl: "m-8",
   "2xl": "m-12"
-}, Yr = {
+}, Zr = {
   none: "",
   primary: "bg-accent text-accent-fg",
   secondary: "bg-surface-hover",
@@ -5209,26 +5246,26 @@ const Gn = ({
   backdrop: "bg-page",
   editor: "bg-surface",
   input: "bg-surface-input"
-}, Xr = {
+}, Qr = {
   none: "rounded-none",
   sm: "rounded-sm",
   md: "rounded-md",
   lg: "rounded-lg",
   xl: "rounded-xl",
   full: "rounded-full"
-}, Zr = {
+}, en = {
   none: "shadow-none",
   sm: "shadow-none",
   md: "shadow-overlay",
   lg: "shadow-overlay",
   xl: "shadow-modal",
   "2xl": "shadow-modal"
-}, Qr = {
+}, tn = {
   none: "border-0",
   sm: "border",
   md: "border-2",
   lg: "border-4"
-}, en = {
+}, rn = {
   primary: "border-accent-border",
   secondary: "border-border",
   accent: "border-accent-border",
@@ -5247,30 +5284,30 @@ const Gn = ({
     shadow: a,
     border: l,
     borderColor: o,
-    className: u,
-    children: m,
+    className: m,
+    children: u,
     ...y
   }, x) => /* @__PURE__ */ e(
     "div",
     {
       ref: x,
       className: d(
-        t && Gr[t],
-        r && Jr[r],
-        n && Yr[n],
-        s && Xr[s],
-        a && Zr[a],
-        l && Qr[l],
-        o && en[o],
-        u
+        t && Yr[t],
+        r && Xr[r],
+        n && Zr[n],
+        s && Qr[s],
+        a && en[a],
+        l && tn[l],
+        o && rn[o],
+        m
       ),
       ...y,
-      children: m
+      children: u
     }
   )
 );
 Ze.displayName = "Box";
-const Jn = ({ children: t, title: r, ...n }) => /* @__PURE__ */ i(
+const Xn = ({ children: t, title: r, ...n }) => /* @__PURE__ */ c(
   Ze,
   {
     background: "module",
@@ -5285,7 +5322,7 @@ const Jn = ({ children: t, title: r, ...n }) => /* @__PURE__ */ i(
     ]
   }
 );
-function Yn({
+function Zn({
   identifier: t,
   resourceLoader: r,
   framework: n = "react",
@@ -5294,15 +5331,15 @@ function Yn({
   componentProps: l,
   className: o
 }) {
-  const u = se(null), [m, y] = O(!0), [x, h] = O(!1), [b, v] = O(null), k = se(null);
+  const m = se(null), [u, y] = O(!0), [x, h] = O(!1), [b, v] = O(null), k = se(null);
   se(null);
-  const p = se(r);
-  return p.current = r, X(() => {
+  const g = se(r);
+  return g.current = r, X(() => {
     let f = !0;
     return (async () => {
       y(!0), h(!1), v(null);
       try {
-        const C = await p.current();
+        const C = await g.current();
         if (!f) return;
         const q = C.component || C.default || C;
         v(n === "react" ? () => q : () => C);
@@ -5315,8 +5352,8 @@ function Yn({
       f = !1;
     };
   }, [t, n]), X(() => {
-    if (m || !b || n === "react") return;
-    const f = u.current;
+    if (u || !b || n === "react") return;
+    const f = m.current;
     if (f) {
       if (n === "svelte") {
         const $ = b.default || b, C = new $({ target: f, props: l || {} });
@@ -5329,15 +5366,15 @@ function Yn({
         };
       }
     }
-  }, [b, n, m]), X(() => {
+  }, [b, n, u]), X(() => {
     n === "svelte" && k.current && k.current.$set?.(l);
-  }, [l, n]), /* @__PURE__ */ i("div", { ref: u, className: o, style: { display: "contents" }, children: [
-    m && s,
-    !m && x && a,
+  }, [l, n]), /* @__PURE__ */ c("div", { ref: m, className: o, style: { display: "contents" }, children: [
+    u && s,
+    !u && x && a,
     n === "react" && !x && b && /* @__PURE__ */ e(b, { ...l })
   ] });
 }
-class Xn extends wt {
+class Qn extends wt {
   constructor() {
     super(...arguments), this.state = {
       hasError: !1,
@@ -5351,7 +5388,7 @@ class Xn extends wt {
     console.error(`[ErrorBoundary] Error in ${this.props.name || "Component"}:`, r, n);
   }
   render() {
-    return this.state.hasError ? this.props.fallback ? this.props.fallback : /* @__PURE__ */ i("div", { className: "p-4 m-4 border border-danger-border bg-danger-soft rounded-lg", children: [
+    return this.state.hasError ? this.props.fallback ? this.props.fallback : /* @__PURE__ */ c("div", { className: "p-4 m-4 border border-danger-border bg-danger-soft rounded-lg", children: [
       /* @__PURE__ */ e("h2", { className: "text-lg font-semibold text-danger-fg", children: "Something went wrong" }),
       /* @__PURE__ */ e("p", { className: "text-sm text-danger-fg mt-1", children: this.props.name ? `Error in ${this.props.name}` : "The component failed to render." }),
       /* @__PURE__ */ e(
@@ -5366,75 +5403,75 @@ class Xn extends wt {
   }
 }
 export {
-  Dn as AssistantCard,
+  _n as AssistantCard,
   Ir as Avatar,
-  Tn as AvatarStack,
-  kn as Badge,
+  An as AvatarStack,
+  Sn as Badge,
   Ze as Box,
   ae as Button,
-  xn as ButtonGroup,
-  Jn as Card,
-  _n as ChannelBadge,
+  gn as ButtonGroup,
+  Xn as Card,
+  Ln as ChannelBadge,
   ye as Checkbox,
-  Gn as CommandPalette,
-  wn as ConfirmDialog,
+  Yn as CommandPalette,
+  Cn as ConfirmDialog,
   rr as ContentLoading,
   Ae as DatePicker,
   nr as Dropdown,
-  Cn as EmptyState,
-  Xn as ErrorBoundary,
-  Yn as FederatedResource,
+  En as EmptyState,
+  Qn as ErrorBoundary,
+  Zn as FederatedResource,
   Lt as FilterChip,
   Yt as FolderSelect,
-  Nn as Form,
+  kn as Form,
   wr as FormSection,
-  Kn as Heading,
+  Jn as Heading,
   Q as Icon,
-  An as Image,
-  Sn as Kbd,
-  jn as KpiCard,
-  bn as Link,
-  In as List,
-  Ln as ListBulkAction,
-  mn as MeetingGrid,
-  Pn as MessageBubble,
+  Pn as Image,
+  zn as Kbd,
+  Fn as KpiCard,
+  pn as Link,
+  jn as List,
+  In as ListBulkAction,
+  hn as MeetingGrid,
+  On as MessageBubble,
   Ye as Modal,
-  On as PageHeader,
-  pn as PageToolbar,
+  Bn as PageHeader,
+  vn as PageToolbar,
   Je as PageToolbarActions,
-  fn as ParticipantTile,
+  xn as ParticipantTile,
   Ve as Popover,
-  En as ProgressBar,
-  Fn as RichText,
+  Mn as ProgressBar,
+  Rn as RichText,
   Ge as SearchField,
   er as SearchableTextField,
-  Bn as SectionCaption,
-  Rn as SectionDivider,
+  Hn as SectionCaption,
+  Vn as SectionDivider,
   Ft as SegmentedToggle,
   Ce as Select,
-  Hn as SettingsRow,
-  Vn as SettingsSection,
-  Wn as SidebarMenu,
-  qn as SourceChip,
-  zn as Spinner,
+  qn as SettingsRow,
+  Un as SettingsSection,
+  Gn as SidebarMenu,
+  Wn as SourceChip,
+  $n as Spinner,
   qe as SplitButton,
-  Mn as StatusDot,
-  $n as StepIndicator,
-  gr as StorageInput,
+  Dn as StatusDot,
+  Tn as StepIndicator,
+  pr as StorageInput,
   tr as Switch,
-  yn as TabBar,
+  wn as TabBar,
   Fe as Table,
   dr as Tabs,
   me as Text,
   Le as TextArea,
   Ne as TextField,
-  hn as VideoSurface,
-  Un as View,
-  un as catTone,
+  bn as VideoSurface,
+  Kn as View,
+  fn as catTone,
   d as cn,
-  dn as createSizes,
-  cn as createVariants,
-  gn as dateFilterHandler,
-  vn as selectFilterHandler
+  mn as createSizes,
+  un as createVariants,
+  yn as dateFilterHandler,
+  Nn as selectFilterHandler
 };
 //# sourceMappingURL=index.js.map