@opencxh/ui-kit 3.136.0 → 3.136.2

package/dist/index.js

@@ -18,10 +18,10 @@ function nn({ tiles: t, pinned: r, className: n }) {
   if (r)
     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, o) => /* @__PURE__ */ e("div", { className: "min-w-40 md:min-w-0", children: a }, o)) })
+      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, o) => /* @__PURE__ */ e("div", { children: a }, o)) });
+  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 sn({
   name: t,
@@ -29,21 +29,21 @@ function sn({
   muted: n,
   speaking: s,
   hasVideo: a,
-  videoSlot: o,
-  className: l,
-  fill: u
+  videoSlot: l,
+  className: o,
+  fill: h
 }) {
   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",
+        h ? "h-full w-full" : "aspect-video",
         s && "ring-2 ring-speaking",
-        l
+        o
       ),
       children: [
-        a && o ? /* @__PURE__ */ e("div", { className: "absolute inset-0", children: o }) : /* @__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(Ke, { className: "w-8 h-8" }) : /* @__PURE__ */ e(Ge, { className: "w-8 h-8" }) }) }),
+        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(Ke, { className: "w-8 h-8" }) : /* @__PURE__ */ e(Ge, { className: "w-8 h-8" }) }) }),
         /* @__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(Je, { className: "w-3 h-3" }) : /* @__PURE__ */ e(Ye, { className: "w-3 h-3" }),
           /* @__PURE__ */ e("span", { className: "truncate max-w-35", children: t })
@@ -56,9 +56,9 @@ function an({ attach: t, active: r = !0, mirrored: n = !1, className: s }) {
   const a = se(null);
   return Q(() => {
     if (!r || !a.current) return;
-    const o = t(a.current);
+    const l = t(a.current);
     return () => {
-      typeof o == "function" && o(), a.current && (a.current.innerHTML = "");
+      typeof l == "function" && l(), a.current && (a.current.innerHTML = "");
     };
   }, [t, r]), /* @__PURE__ */ e(
     "div",
@@ -74,10 +74,10 @@ function an({ attach: t, active: r = !0, mirrored: n = !1, className: s }) {
 }
 const vt = {
   primary: "bg-accent text-accent-fg hover:bg-accent-hover disabled:bg-surface-hover",
-  secondary: "bg-gray-100 text-text hover:bg-surface-hover disabled:bg-surface-hover",
+  secondary: "bg-surface-sunk text-text-strong hover:bg-surface-hover disabled:bg-surface-hover",
   // No resting fill, so no disabled fill either — a greyed-out plate where
   // there was nothing reads as a different control, not as a disabled one.
-  outline: "border border-border text-accent hover:bg-surface-hover",
+  outline: "border border-border text-text-strong hover:bg-surface-hover",
   ghost: "text-text-muted hover:bg-surface-hover hover:text-text",
   destructive: "border border-danger-border bg-danger-soft text-danger-fg hover:border-danger disabled:bg-surface-hover",
   // Solid status fills. Reserved for a control whose colour IS the answer —
@@ -108,36 +108,39 @@ const vt = {
     fullWidth: n = !1,
     loading: s = !1,
     leftIcon: a,
-    rightIcon: o,
-    iconOnly: l = !1,
-    shape: u = "default",
-    className: m,
+    rightIcon: l,
+    iconOnly: o = !1,
+    shape: h = "default",
+    className: u,
     children: N,
-    disabled: f,
-    ...h
+    disabled: m,
+    ...f
   }, b) => {
-    const p = f || s;
+    const p = m || s;
     return /* @__PURE__ */ c(
       "button",
       {
         ref: b,
         type: "button",
         className: d(
-          "inline-flex shrink-0 items-center justify-center gap-2 cursor-pointer font-semibold",
-          u === "circle" ? "rounded-full" : "rounded-md",
+          // font-medium, not semibold: in the design a button's label carries
+          // 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",
+          h === "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",
           "disabled:text-text-disabled",
           vt[t],
-          l ? Nt[r] : yt[r],
+          o ? Nt[r] : yt[r],
           (n || r === "full") && "w-full",
           s && "cursor-wait",
-          m
+          u
         ),
         disabled: p,
         "aria-busy": s || void 0,
-        ...h,
+        ...f,
         children: [
           s && /* @__PURE__ */ e(
             "span",
@@ -147,9 +150,9 @@ const vt = {
             }
           ),
           !s && a && /* @__PURE__ */ e("span", { className: "flex items-center justify-center shrink-0", children: a }),
-          !l && N,
-          !s && o && /* @__PURE__ */ e("span", { className: "flex items-center justify-center shrink-0", children: o }),
-          l && !s && !a && !o && N
+          !o && N,
+          !s && l && /* @__PURE__ */ e("span", { className: "flex items-center justify-center shrink-0", children: l }),
+          o && !s && !a && !l && N
         ]
       }
     );
@@ -163,7 +166,7 @@ const ln = ({
   attached: s = !0,
   className: a
 }) => {
-  const o = d(
+  const l = d(
     "inline-flex",
     {
       // Orientation
@@ -185,7 +188,7 @@ const ln = ({
     },
     a
   );
-  return /* @__PURE__ */ e("div", { className: o, role: "group", children: t });
+  return /* @__PURE__ */ e("div", { className: l, role: "group", children: t });
 }, wt = {
   primary: "text-text",
   secondary: "text-text-muted",
@@ -202,33 +205,33 @@ const ln = ({
   color: n = "current",
   clickable: s = !1,
   onClick: a,
-  className: o,
-  "aria-label": l,
-  ...u
+  className: l,
+  "aria-label": o,
+  ...h
 }) => {
-  const m = typeof r == "number" ? r : kt(r), N = d(
+  const u = typeof r == "number" ? r : kt(r), N = d(
     "inline-block shrink-0",
     wt[n],
     s && [
       "cursor-pointer rounded-sm transition-opacity duration-fast ease-out hover:opacity-80",
       "focus-visible:outline-none focus-visible:focus-ring"
     ],
-    o
-  ), f = {
-    size: m,
+    l
+  ), m = {
+    size: u,
     strokeWidth: 2,
     className: N,
     onClick: s ? a : void 0,
-    "aria-label": l,
-    "aria-hidden": l ? void 0 : !0,
+    "aria-label": o,
+    "aria-hidden": o ? void 0 : !0,
     role: s ? "button" : void 0,
     tabIndex: s ? 0 : void 0,
-    onKeyDown: s ? (h) => {
-      (h.key === "Enter" || h.key === " ") && (h.preventDefault(), a?.());
+    onKeyDown: s ? (f) => {
+      (f.key === "Enter" || f.key === " ") && (f.preventDefault(), a?.());
     } : void 0,
-    ...u
+    ...h
   };
-  return /* @__PURE__ */ e(t, { ...f });
+  return /* @__PURE__ */ e(t, { ...m });
 };
 function kt(t) {
   return {
@@ -240,58 +243,58 @@ function kt(t) {
   }[t];
 }
 const Ct = {
-  none: "border-none hover:bg-surface-hover hover:text-text",
-  default: "border-border text-text-muted hover:bg-surface-hover hover:text-text",
-  muted: "border-border text-text-subtle hover:bg-surface-hover hover:text-text",
-  warning: "border-warning-border bg-warning-soft text-warning-fg hover:bg-surface-hover",
-  danger: "border-danger-border bg-danger-soft text-danger-fg hover:bg-surface-hover"
+  none: "hover:bg-surface-sunk hover:text-text",
+  default: "bg-surface-sunk text-text-muted hover:text-text",
+  muted: "bg-surface-sunk text-text-subtle hover:text-text",
+  warning: "bg-warning-soft text-warning-fg",
+  danger: "bg-danger-soft text-danger-fg"
 };
 function on({
   label: t,
   icon: r,
   tone: n = "default",
-  shape: s = "pill",
+  shape: s = "rect",
   size: a = "md",
-  active: o = !1,
-  caret: l = !1,
-  onClear: u,
-  clearLabel: m = "Filter wissen",
+  active: l = !1,
+  caret: o = !1,
+  onClear: h,
+  clearLabel: u = "Filter wissen",
   onClick: N,
-  title: f,
-  className: h
+  title: m,
+  className: f
 }) {
-  const b = o && !!u, p = s === "pill" ? "rounded-full" : "rounded-md", C = d(
+  const b = l && !!h, p = s === "pill" ? "rounded-full" : "rounded-md", C = d(
     // A button's default cursor is an arrow, so it has to be asked for.
-    "inline-flex cursor-pointer select-none items-center text-sm font-semibold",
+    "inline-flex cursor-pointer select-none items-center text-sm font-medium",
     a === "sm" ? "h-control-sm" : "h-control-md",
     "transition-colors duration-fast ease-out",
     p,
     // Picking a value outranks whatever the value happens to mean.
-    o ? "bg-accent text-accent-fg" : d("border", Ct[n]),
-    h
+    l ? "bg-info-soft text-info-fg" : Ct[n],
+    f
   ), g = /* @__PURE__ */ c(xe, { children: [
     r,
     t,
-    l && /* @__PURE__ */ e(Y, { icon: ge, size: "xs" })
+    o && /* @__PURE__ */ e(Y, { icon: ge, size: "xs" })
   ] }), x = d(
     "inline-flex items-center gap-1.5 pl-3",
     p,
     b ? "pr-1.5" : "pr-3",
     "focus-visible:outline-none focus-visible:focus-ring"
   );
-  return b ? /* @__PURE__ */ c("span", { className: C, title: f, children: [
+  return b ? /* @__PURE__ */ c("span", { className: C, title: m, children: [
     /* @__PURE__ */ e("button", { type: "button", onClick: N, className: x, children: g }),
     /* @__PURE__ */ e(
       "button",
       {
         type: "button",
-        "aria-label": m,
-        onClick: u,
+        "aria-label": u,
+        onClick: h,
         className: d("inline-flex h-full items-center pr-3 focus-visible:outline-none focus-visible:focus-ring", p),
         children: /* @__PURE__ */ e(Y, { icon: we, size: "xs" })
       }
     )
-  ] }) : /* @__PURE__ */ e("button", { type: "button", title: f, onClick: N, className: d(C, x), children: g });
+  ] }) : /* @__PURE__ */ e("button", { type: "button", title: m, onClick: N, className: d(C, x), children: g });
 }
 const St = {
   xs: "text-xs",
@@ -323,14 +326,14 @@ const St = {
   color: n = "primary",
   disabled: s = !1,
   external: a = !1,
-  className: o,
-  children: l,
-  href: u,
-  target: m,
+  className: l,
+  children: o,
+  href: h,
+  target: u,
   rel: N,
-  ...f
+  ...m
 }) => {
-  const h = a || u && (u.startsWith("http") || u.startsWith("mailto:")), b = d(
+  const f = a || h && (h.startsWith("http") || h.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",
@@ -343,17 +346,17 @@ const St = {
       Et[n]
     ],
     s && "pointer-events-none cursor-not-allowed text-text-disabled opacity-50",
-    o
+    l
   ), p = {
-    ...f,
-    href: s ? void 0 : u,
-    target: h ? "_blank" : m,
-    rel: h ? "noopener noreferrer" : N,
+    ...m,
+    href: s ? void 0 : h,
+    target: f ? "_blank" : u,
+    rel: f ? "noopener noreferrer" : N,
     "aria-disabled": s || void 0
   };
   return /* @__PURE__ */ c("a", { className: b, ...p, children: [
-    l,
-    h && /* @__PURE__ */ e(Xe, { className: "size-icon-sm shrink-0", "aria-hidden": !0 })
+    o,
+    f && /* @__PURE__ */ e(Xe, { className: "size-icon-sm shrink-0", "aria-hidden": !0 })
   ] });
 }, Mt = {
   sm: "h-control-sm px-3 text-sm",
@@ -365,52 +368,52 @@ function dn({
   onChange: n,
   size: s = "sm",
   className: a,
-  "aria-label": o
+  "aria-label": l
 }) {
   return /* @__PURE__ */ e(
     "div",
     {
       role: "tablist",
-      "aria-label": o,
-      className: d("inline-flex gap-0.5 rounded-md bg-surface-hover p-0.5", a),
-      children: t.map((l) => {
-        const u = l.value === r;
+      "aria-label": l,
+      className: d("inline-flex gap-0.5 rounded-md bg-surface-sunk p-0.5", a),
+      children: t.map((o) => {
+        const h = o.value === r;
         return /* @__PURE__ */ e(
           "button",
           {
             role: "tab",
-            "aria-selected": u,
+            "aria-selected": h,
             type: "button",
-            onClick: () => n(l.value),
+            onClick: () => n(o.value),
             className: d(
               "inline-flex items-center justify-center rounded-sm",
               "transition-colors duration-fast ease-out",
               "focus-visible:outline-none focus-visible:focus-ring",
               Mt[s],
-              u ? "bg-surface text-text font-semibold" : "text-text-muted hover:text-text"
+              h ? "bg-surface text-text font-medium shadow-sm" : "text-text-muted hover:text-text"
             ),
-            children: l.label
+            children: o.label
           },
-          l.value
+          o.value
         );
       })
     }
   );
 }
 function ze(t, r, { gap: n = 6, matchWidth: s = !1, placement: a = "bottom-start" } = {}) {
-  const [o, l] = R({});
+  const [l, o] = R({});
   return ft(() => {
     if (!t) return;
-    const u = () => {
-      const m = r.current;
-      if (!m) return;
-      const N = m.getBoundingClientRect(), f = window.innerHeight - N.bottom, h = N.top, b = a.startsWith("top"), p = b ? h < 200 && f > h : f < 200 && h > f, C = b !== p, g = { position: "fixed" };
-      C ? (g.bottom = window.innerHeight - N.top + n, g.maxHeight = Math.max(120, h - n * 2)) : (g.top = N.bottom + n, g.maxHeight = Math.max(120, f - n * 2)), a.endsWith("end") ? g.right = window.innerWidth - N.right : g.left = N.left, s && (g.width = N.width), l(g);
+    const h = () => {
+      const u = r.current;
+      if (!u) return;
+      const N = u.getBoundingClientRect(), m = window.innerHeight - N.bottom, f = N.top, b = a.startsWith("top"), p = b ? f < 200 && m > f : m < 200 && f > m, C = b !== p, g = { position: "fixed" };
+      C ? (g.bottom = window.innerHeight - N.top + n, g.maxHeight = Math.max(120, f - n * 2)) : (g.top = N.bottom + n, g.maxHeight = Math.max(120, m - n * 2)), a.endsWith("end") ? g.right = window.innerWidth - N.right : g.left = N.left, s && (g.width = N.width), o(g);
     };
-    return u(), window.addEventListener("scroll", u, !0), window.addEventListener("resize", u), () => {
-      window.removeEventListener("scroll", u, !0), window.removeEventListener("resize", u);
+    return h(), window.addEventListener("scroll", h, !0), window.addEventListener("resize", h), () => {
+      window.removeEventListener("scroll", h, !0), window.removeEventListener("resize", h);
     };
-  }, [t, r, n, s, a]), o;
+  }, [t, r, n, s, a]), l;
 }
 const $t = ({
   trigger: t,
@@ -418,44 +421,44 @@ const $t = ({
   placement: n = "bottom-start",
   className: s,
   rootClassName: a,
-  triggerClassName: o,
-  disabled: l = !1,
-  triggerLabel: u
+  triggerClassName: l,
+  disabled: o = !1,
+  triggerLabel: h
 }) => {
-  const [m, N] = R(!1), f = se(null), h = se(null), b = ze(m, h, { placement: n });
+  const [u, N] = R(!1), m = se(null), f = se(null), b = ze(u, f, { placement: n });
   Q(() => {
-    if (!m) return;
+    if (!u) return;
     const g = (_) => {
-      f.current && !f.current.contains(_.target) && N(!1);
+      m.current && !m.current.contains(_.target) && N(!1);
     }, x = (_) => {
       _.key === "Escape" && N(!1);
     };
     return document.addEventListener("mousedown", g), document.addEventListener("keydown", x), () => {
       document.removeEventListener("mousedown", g), document.removeEventListener("keydown", x);
     };
-  }, [m]);
+  }, [u]);
   const p = (g) => {
-    g.stopPropagation(), !l && N((x) => !x);
+    g.stopPropagation(), !o && N((x) => !x);
   }, C = () => N(!1);
-  return /* @__PURE__ */ c("div", { ref: f, className: d("relative inline-flex", a), children: [
+  return /* @__PURE__ */ c("div", { ref: m, className: d("relative inline-flex", a), children: [
     /* @__PURE__ */ e(
       "button",
       {
-        ref: h,
+        ref: f,
         type: "button",
         onClick: p,
-        disabled: l,
-        "aria-label": u,
-        "aria-expanded": m,
+        disabled: o,
+        "aria-label": h,
+        "aria-expanded": u,
         className: d(
           "inline-flex items-center",
-          l && "cursor-not-allowed opacity-50",
-          o
+          o && "cursor-not-allowed opacity-50",
+          l
         ),
         children: t
       }
     ),
-    m && /* @__PURE__ */ e(
+    u && /* @__PURE__ */ e(
       "div",
       {
         className: d(
@@ -483,13 +486,13 @@ function Re({
   variant: n = "primary",
   size: s = "md",
   icon: a,
-  options: o,
-  disabled: l = !1,
-  loading: u = !1,
-  menuPlacement: m = "bottom-end",
+  options: l,
+  disabled: o = !1,
+  loading: h = !1,
+  menuPlacement: u = "bottom-end",
   menuLabel: N = "More options"
 }) {
-  const f = l || u, h = o.length > 0;
+  const m = o || h, f = l.length > 0;
   return /* @__PURE__ */ c("div", { className: d("inline-flex items-center", n === "primary" && "gap-0.5"), children: [
     /* @__PURE__ */ e(
       ne,
@@ -497,18 +500,18 @@ function Re({
         variant: n,
         size: s,
         onClick: r,
-        disabled: l,
-        loading: u,
+        disabled: o,
+        loading: h,
         leftIcon: a,
-        className: d(h && "rounded-r-none"),
+        className: d(f && "rounded-r-none"),
         children: t
       }
     ),
-    h && /* @__PURE__ */ e(
+    f && /* @__PURE__ */ e(
       $t,
       {
-        placement: m,
-        disabled: f,
+        placement: u,
+        disabled: m,
         triggerLabel: N,
         className: "min-w-menu py-1",
         trigger: /* @__PURE__ */ e(
@@ -520,12 +523,12 @@ function Re({
               "transition-colors duration-fast ease-out",
               Dt[n],
               Tt[s],
-              f && "cursor-not-allowed opacity-50"
+              m && "cursor-not-allowed opacity-50"
             ),
             children: /* @__PURE__ */ e(ge, { className: "size-icon-md" })
           }
         ),
-        children: (b) => /* @__PURE__ */ e(xe, { children: o.map((p) => /* @__PURE__ */ c(
+        children: (b) => /* @__PURE__ */ e(xe, { children: l.map((p) => /* @__PURE__ */ c(
           "button",
           {
             type: "button",
@@ -571,21 +574,21 @@ const _t = {
     error: n,
     size: s = "md",
     indeterminate: a = !1,
-    containerClassName: o,
-    labelClassName: l,
-    className: u,
-    id: m,
+    containerClassName: l,
+    labelClassName: o,
+    className: h,
+    id: u,
     ...N
-  }, f) => {
-    const h = oe.useId(), b = m || `checkbox-${h}`, p = !!n, C = oe.useRef(null), g = oe.useCallback(
+  }, m) => {
+    const f = oe.useId(), b = u || `checkbox-${f}`, p = !!n, C = oe.useRef(null), g = oe.useCallback(
       (x) => {
-        C.current = x, typeof f == "function" ? f(x) : f && typeof f == "object" && (f.current = x);
+        C.current = x, typeof m == "function" ? m(x) : m && typeof m == "object" && (m.current = x);
       },
-      [f]
+      [m]
     );
     return oe.useEffect(() => {
       C.current && (C.current.indeterminate = a);
-    }, [a]), /* @__PURE__ */ c("div", { className: d("flex flex-col", o), children: [
+    }, [a]), /* @__PURE__ */ c("div", { className: d("flex flex-col", l), children: [
       /* @__PURE__ */ c("div", { className: d("flex items-center gap-3", At[s]), children: [
         /* @__PURE__ */ e(
           "input",
@@ -603,7 +606,7 @@ const _t = {
               "disabled:cursor-not-allowed disabled:bg-surface-hover",
               _t[s],
               p ? "border-danger-border" : "border-border-strong",
-              u
+              h
             ),
             ...N
           }
@@ -617,7 +620,7 @@ const _t = {
                 "cursor-pointer",
                 p ? "text-danger-fg" : "text-text",
                 Lt[s],
-                l
+                o
               ),
               children: t
             }
@@ -630,19 +633,19 @@ const _t = {
   }
 );
 pe.displayName = "Checkbox";
-const It = () => /* @__PURE__ */ e(Y, { icon: Ze, size: "md", color: "current" }), jt = () => /* @__PURE__ */ e(Y, { icon: ke, size: "md", color: "current" }), Pt = () => /* @__PURE__ */ e(Y, { icon: Ce, size: "md", color: "current" }), $e = me(({
+const It = () => /* @__PURE__ */ e(Y, { icon: Ze, size: "md", color: "current" }), Pt = () => /* @__PURE__ */ e(Y, { icon: ke, size: "md", color: "current" }), jt = () => /* @__PURE__ */ e(Y, { icon: Ce, size: "md", color: "current" }), $e = me(({
   value: t,
   onChange: r,
   placeholder: n = "Select date",
   disabled: s = !1,
   required: a = !1,
-  size: o = "md",
-  className: l,
-  minDate: u,
-  maxDate: m,
+  size: l = "md",
+  className: o,
+  minDate: h,
+  maxDate: u,
   format: N = "MM/dd/yyyy",
-  withTime: f = !1
-}, h) => {
+  withTime: m = !1
+}, f) => {
   const [b, p] = R(!1), [C, g] = R(() => t || /* @__PURE__ */ new Date()), x = se(null), _ = se(null), E = ze(b, _);
   Q(() => {
     const i = (S) => {
@@ -655,7 +658,7 @@ const It = () => /* @__PURE__ */ e(Y, { icon: Ze, size: "md", color: "current" }
   const W = (i) => {
     if (!i) return "";
     const S = i.getDate().toString().padStart(2, "0"), y = (i.getMonth() + 1).toString().padStart(2, "0"), A = i.getFullYear(), w = N === "dd/MM/yyyy" ? `${S}/${y}/${A}` : N === "yyyy-MM-dd" ? `${A}-${y}-${S}` : `${y}/${S}/${A}`;
-    return f ? `${w} ${D(i)}` : w;
+    return m ? `${w} ${D(i)}` : w;
   }, D = (i) => `${i.getHours().toString().padStart(2, "0")}:${i.getMinutes().toString().padStart(2, "0")}`, X = (i) => {
     const [S, y] = i.split(":").map(Number);
     if (Number.isNaN(S) || Number.isNaN(y)) return;
@@ -669,8 +672,8 @@ const It = () => /* @__PURE__ */ e(Y, { icon: Ze, size: "md", color: "current" }
       w.push(new Date(ee)), ee.setDate(ee.getDate() + 1);
     return w;
   }, I = (i) => {
-    if (i.getMonth() === C.getMonth() && !(u && i < u) && !(m && i > m)) {
-      if (f) {
+    if (i.getMonth() === C.getMonth() && !(h && i < h) && !(u && i > u)) {
+      if (m) {
         const y = new Date(i);
         y.setHours(t?.getHours() ?? 0, t?.getMinutes() ?? 0, 0, 0), r?.(y);
         return;
@@ -683,19 +686,19 @@ const It = () => /* @__PURE__ */ e(Y, { icon: Ze, size: "md", color: "current" }
     g(new Date(C.getFullYear(), C.getMonth() + 1, 1));
   }, re = () => {
     r?.(null), p(!1);
-  }, P = d(
+  }, j = d(
     "w-full border border-border rounded-md transition-colors duration-fast",
     "bg-surface text-text",
     "placeholder:text-text-muted",
     "focus-visible:outline-none focus-visible:focus-ring",
     "disabled:cursor-not-allowed disabled:bg-surface-hover disabled:text-text-disabled",
     {
-      "h-control-sm px-3 text-sm": o === "sm",
-      "h-control-md px-3 text-base": o === "md",
-      "h-control-lg px-3 text-base": o === "lg",
-      "h-control-md w-full px-3 text-base": o === "full"
+      "h-control-sm px-3 text-sm": l === "sm",
+      "h-control-md px-3 text-base": l === "md",
+      "h-control-lg px-3 text-base": l === "lg",
+      "h-control-md w-full px-3 text-base": l === "full"
     },
-    l
+    o
   ), ce = U(), k = [
     "January",
     "February",
@@ -715,7 +718,7 @@ const It = () => /* @__PURE__ */ e(Y, { icon: Ze, size: "md", color: "current" }
       /* @__PURE__ */ e(
         "input",
         {
-          ref: h,
+          ref: f,
           type: "text",
           value: W(t ?? null),
           placeholder: n,
@@ -723,7 +726,7 @@ const It = () => /* @__PURE__ */ e(Y, { icon: Ze, size: "md", color: "current" }
           required: a,
           readOnly: !0,
           onClick: () => !s && p(!b),
-          className: d(P, "pr-10 cursor-pointer")
+          className: d(j, "pr-10 cursor-pointer")
         }
       ),
       /* @__PURE__ */ e(
@@ -744,7 +747,7 @@ const It = () => /* @__PURE__ */ e(Y, { icon: Ze, size: "md", color: "current" }
           {
             onClick: q,
             className: "p-1 hover:bg-surface-hover rounded",
-            children: /* @__PURE__ */ e(jt, {})
+            children: /* @__PURE__ */ e(Pt, {})
           }
         ),
         /* @__PURE__ */ c("h3", { className: "text-sm font-medium text-text", children: [
@@ -757,13 +760,13 @@ const It = () => /* @__PURE__ */ e(Y, { icon: Ze, size: "md", color: "current" }
           {
             onClick: K,
             className: "p-1 hover:bg-surface-hover rounded",
-            children: /* @__PURE__ */ e(Pt, {})
+            children: /* @__PURE__ */ e(jt, {})
           }
         )
       ] }),
       /* @__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 y = i.getMonth() === C.getMonth(), A = t && i.toDateString() === t.toDateString(), w = i.toDateString() === (/* @__PURE__ */ new Date()).toDateString(), ee = !y || u && i < u || m && i > m;
+        const y = i.getMonth() === C.getMonth(), A = t && i.toDateString() === t.toDateString(), w = i.toDateString() === (/* @__PURE__ */ new Date()).toDateString(), ee = !y || h && i < h || u && i > u;
         return /* @__PURE__ */ e(
           "button",
           {
@@ -783,7 +786,7 @@ const It = () => /* @__PURE__ */ e(Y, { icon: Ze, size: "md", color: "current" }
           S
         );
       }) }),
-      f && /* @__PURE__ */ c("div", { className: "mt-3 flex items-center gap-2 border-t border-border pt-3", children: [
+      m && /* @__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",
@@ -828,13 +831,13 @@ const It = () => /* @__PURE__ */ e(Y, { icon: Ze, size: "md", color: "current" }
     error: n,
     size: s = "md",
     fullWidth: a = !1,
-    disabled: o = !1,
-    options: l,
-    placeholder: u,
-    containerClassName: m,
+    disabled: l = !1,
+    options: o,
+    placeholder: h,
+    containerClassName: u,
     labelClassName: N,
-    className: f,
-    id: h,
+    className: m,
+    id: f,
     searchable: b,
     multiple: p,
     value: C,
@@ -843,7 +846,7 @@ const It = () => /* @__PURE__ */ e(Y, { icon: Ze, size: "md", color: "current" }
     onCreateOption: _,
     ...E
   }, W) => {
-    const D = h || `select-${Math.random().toString(36).substr(2, 9)}`, X = !!n, [U, I] = oe.useState(!1), [q, K] = oe.useState(""), re = oe.useRef(null), P = oe.useRef(null), ce = ze(U, P, { matchWidth: !0 }), [k, i] = oe.useState(l);
+    const D = f || `select-${Math.random().toString(36).substr(2, 9)}`, X = !!n, [U, I] = oe.useState(!1), [q, K] = oe.useState(""), re = oe.useRef(null), j = oe.useRef(null), ce = ze(U, j, { matchWidth: !0 }), [k, i] = oe.useState(o);
     oe.useImperativeHandle(W, () => re.current), oe.useEffect(() => {
       const M = (T) => {
         re.current && !re.current.contains(T.target) && I(!1);
@@ -867,12 +870,12 @@ const It = () => /* @__PURE__ */ e(Y, { icon: Ze, size: "md", color: "current" }
     );
     oe.useEffect(() => {
       i((M) => {
-        const T = [...l];
+        const T = [...o];
         return M.forEach((z) => {
           !S(T, z.value) && !S(T, z.label) && T.push(z);
         }), y(T, C);
       });
-    }, [l, C, y, S]);
+    }, [o, C, y, S]);
     const A = (M) => {
       if (p) {
         const T = Array.isArray(C) ? C : [], z = T.includes(M) ? T.filter((B) => B !== M) : [...T, M];
@@ -895,7 +898,7 @@ const It = () => /* @__PURE__ */ e(Y, { icon: Ze, size: "md", color: "current" }
         return;
       }
       i((B) => [...B, z]), A(z.value), K(""), p || I(!1);
-    }, j = () => p ? ee.length > 0 ? ee.map((M) => M.label).join(", ") : u || "Select options" : w?.label || u || "Select an option";
+    }, P = () => p ? ee.length > 0 ? ee.map((M) => M.label).join(", ") : h || "Select options" : w?.label || h || "Select an option";
     return /* @__PURE__ */ c(
       "div",
       {
@@ -903,7 +906,7 @@ const It = () => /* @__PURE__ */ e(Y, { icon: Ze, size: "md", color: "current" }
         className: d(
           "relative flex flex-col",
           a && "w-full",
-          m
+          u
         ),
         ...E,
         children: [
@@ -924,10 +927,10 @@ const It = () => /* @__PURE__ */ e(Y, { icon: Ze, size: "md", color: "current" }
             /* @__PURE__ */ c(
               "button",
               {
-                ref: P,
+                ref: j,
                 type: "button",
                 id: D,
-                disabled: o,
+                disabled: l,
                 onClick: () => I(!U),
                 className: d(
                   "flex w-full items-center justify-between gap-2 rounded-md border transition-colors duration-fast text-left",
@@ -936,10 +939,10 @@ const It = () => /* @__PURE__ */ e(Y, { icon: Ze, size: "md", color: "current" }
                   "bg-surface",
                   Ot[s],
                   X ? "border-danger-border text-danger-fg focus-visible:focus-ring" : "border-border text-text",
-                  f
+                  m
                 ),
                 children: [
-                  /* @__PURE__ */ e("span", { className: "truncate flex-1 min-w-0", children: j() }),
+                  /* @__PURE__ */ e("span", { className: "truncate flex-1 min-w-0", children: P() }),
                   /* @__PURE__ */ e(
                     Qe,
                     {
@@ -986,14 +989,14 @@ const It = () => /* @__PURE__ */ e(Y, { icon: Ze, size: "md", color: "current" }
                 }
               ),
               /* @__PURE__ */ c("ul", { className: "min-h-0 flex-1 overflow-auto py-1", children: [
-                u && !p && /* @__PURE__ */ e(
+                h && !p && /* @__PURE__ */ e(
                   "li",
                   {
                     className: "cursor-pointer px-3 py-1.5 text-sm text-text-muted hover:bg-surface-hover",
                     onClick: () => {
                       g?.(""), I(!1);
                     },
-                    children: u
+                    children: h
                   }
                 ),
                 ae.map((M) => {
@@ -1055,17 +1058,17 @@ const Ft = {
     error: n,
     size: s = "md",
     fullWidth: a = !1,
-    startIcon: o,
-    endIcon: l,
-    loading: u = !1,
-    containerClassName: m,
+    startIcon: l,
+    endIcon: o,
+    loading: h = !1,
+    containerClassName: u,
     labelClassName: N,
-    className: f,
-    id: h,
+    className: m,
+    id: f,
     ...b
   }, p) => {
-    const C = oe.useId(), g = h || `textfield-${C}`, x = !!n, _ = n || r ? `${g}-description` : void 0;
-    return /* @__PURE__ */ c("div", { className: d("flex flex-col", a && "w-full", m), children: [
+    const C = oe.useId(), g = f || `textfield-${C}`, x = !!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",
         {
@@ -1079,7 +1082,7 @@ const Ft = {
         }
       ),
       /* @__PURE__ */ c("div", { className: "relative", children: [
-        o && /* @__PURE__ */ e("span", { className: "pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3 text-text-muted", children: o }),
+        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",
           {
@@ -1094,21 +1097,21 @@ const Ft = {
               "focus-visible:outline-none focus-visible:focus-ring",
               "disabled:cursor-not-allowed disabled:bg-surface-hover disabled:text-text-disabled",
               Ft[s],
-              o && "pl-9",
-              (l || u) && "pr-9",
+              l && "pl-9",
+              (o || h) && "pr-9",
               x ? "border-danger-border bg-danger-soft" : "border-border hover:border-border-strong",
-              f
+              m
             ),
             ...b
           }
         ),
-        (l || u) && /* @__PURE__ */ e("span", { className: "absolute inset-y-0 right-0 flex items-center pr-3 text-text-muted", children: u ? /* @__PURE__ */ e(
+        (o || h) && /* @__PURE__ */ e("span", { className: "absolute inset-y-0 right-0 flex items-center pr-3 text-text-muted", children: h ? /* @__PURE__ */ e(
           "span",
           {
             "aria-hidden": !0,
             className: "size-icon-md animate-spin rounded-full border-2 border-border border-t-transparent"
           }
-        ) : l })
+        ) : o })
       ] }),
       (n || r) && /* @__PURE__ */ e(
         "p",
@@ -1128,41 +1131,41 @@ function Rt({
   onListFolders: n,
   disabled: s,
   size: a = "md",
-  placeholder: o,
-  templatePlaceholder: l,
-  showTemplate: u = !0
+  placeholder: l,
+  templatePlaceholder: o,
+  showTemplate: h = !0
 }) {
-  const [m, N] = R([]);
+  const [u, N] = R([]);
   Q(() => {
-    let h = !0;
+    let f = !0;
     return Promise.resolve(n?.()).then((b) => {
-      h && b && N(b.data ?? []);
+      f && b && N(b.data ?? []);
     }).catch(() => {
     }), () => {
-      h = !1;
+      f = !1;
     };
   }, []);
-  const f = t ?? {};
+  const m = t ?? {};
   return /* @__PURE__ */ c("div", { className: "flex flex-col gap-2", children: [
     /* @__PURE__ */ e(
       Ne,
       {
         size: a,
         fullWidth: !0,
-        value: f.folderId ?? "",
-        options: m.map((h) => ({ value: h.id, label: h.name })),
-        placeholder: o ?? "Select a folder",
-        onChange: (h) => r?.({ ...f, folderId: h })
+        value: m.folderId ?? "",
+        options: u.map((f) => ({ value: f.id, label: f.name })),
+        placeholder: l ?? "Select a folder",
+        onChange: (f) => r?.({ ...m, folderId: f })
       }
     ),
-    u && /* @__PURE__ */ e(
+    h && /* @__PURE__ */ e(
       be,
       {
         size: a,
         disabled: s ?? !1,
-        value: f.pathTemplate ?? "",
-        placeholder: l ?? "Sub-path e.g. {yyyy}/{mm}/{dd} (optional)",
-        onChange: (h) => r?.({ ...f, pathTemplate: h.target.value })
+        value: m.pathTemplate ?? "",
+        placeholder: o ?? "Sub-path e.g. {yyyy}/{mm}/{dd} (optional)",
+        onChange: (f) => r?.({ ...m, pathTemplate: f.target.value })
       }
     )
   ] });
@@ -1184,13 +1187,13 @@ const fe = (...t) => t.filter(Boolean).join(" "), Bt = (t) => /* @__PURE__ */ e(
     error: n,
     size: s = "md",
     fullWidth: a = !1,
-    startIcon: o = /* @__PURE__ */ e(Bt, {}),
-    loading: l = !1,
-    containerClassName: u,
-    labelClassName: m,
+    startIcon: l = /* @__PURE__ */ e(Bt, {}),
+    loading: o = !1,
+    containerClassName: h,
+    labelClassName: u,
     className: N,
-    id: f,
-    options: h,
+    id: m,
+    options: f,
     onRemoteSearch: b,
     onSelect: p,
     debounceTime: C = 500,
@@ -1199,23 +1202,23 @@ const fe = (...t) => t.filter(Boolean).join(" "), Bt = (t) => /* @__PURE__ */ e(
     onChange: _,
     ...E
   }, W) => {
-    const D = f || `searchfield-${Math.random().toString(36).substr(2, 9)}`, X = !!n, U = se(null), I = se(null), [q, K] = R(x || ""), [re, P] = R(!1), [ce, k] = R(!1), [i, S] = R(!1);
+    const D = m || `searchfield-${Math.random().toString(36).substr(2, 9)}`, X = !!n, U = se(null), I = se(null), [q, K] = R(x || ""), [re, j] = R(!1), [ce, k] = R(!1), [i, S] = R(!1);
     Q(() => {
       x !== void 0 && K(x);
     }, [x]);
     const y = he(() => {
-      if (g && !i || !q) return h;
-      const j = String(q).toLowerCase();
-      return h.filter(
-        (M) => String(M.label).toLowerCase().includes(j)
+      if (g && !i || !q) return f;
+      const P = String(q).toLowerCase();
+      return f.filter(
+        (M) => String(M.label).toLowerCase().includes(P)
       );
-    }, [q, h, g, i]);
+    }, [q, f, g, i]);
     Q(() => {
       if (!b || !q) {
         k(!1);
         return;
       }
-      const j = setTimeout(async () => {
+      const P = setTimeout(async () => {
         k(!0);
         try {
           await b(String(q));
@@ -1226,29 +1229,29 @@ const fe = (...t) => t.filter(Boolean).join(" "), Bt = (t) => /* @__PURE__ */ e(
         }
       }, C);
       return () => {
-        clearTimeout(j), k(!1);
+        clearTimeout(P), k(!1);
       };
     }, [q, C, b]), Q(() => {
-      const j = (M) => {
-        U.current && !U.current.contains(M.target) && P(!1);
+      const P = (M) => {
+        U.current && !U.current.contains(M.target) && j(!1);
       };
-      return document.addEventListener("mousedown", j), () => document.removeEventListener("mousedown", j);
+      return document.addEventListener("mousedown", P), () => document.removeEventListener("mousedown", P);
     }, []);
-    const A = (j) => {
-      const M = j.target.value;
-      K(M), P(!0), S(!0), _ && _(j);
-    }, w = (j) => {
-      K(j.label), P(!1), S(!1), p && p(j.value);
+    const A = (P) => {
+      const M = P.target.value;
+      K(M), j(!0), S(!0), _ && _(P);
+    }, w = (P) => {
+      K(P.label), j(!1), S(!1), p && p(P.value);
     }, ee = () => {
-      (h.length > 0 || b) && (P(!0), S(!1));
-    }, ae = l || ce, le = re && (y.length > 0 || ae), G = he(() => W || I, [W]);
+      (f.length > 0 || b) && (j(!0), S(!1));
+    }, ae = o || ce, le = re && (y.length > 0 || ae), G = he(() => W || I, [W]);
     return /* @__PURE__ */ c(
       "div",
       {
         className: fe(
           "flex flex-col",
           a ? "w-full" : "",
-          u || "",
+          h || "",
           "relative"
         ),
         ref: U,
@@ -1260,13 +1263,13 @@ const fe = (...t) => t.filter(Boolean).join(" "), Bt = (t) => /* @__PURE__ */ e(
               className: fe(
                 "block text-sm font-medium mb-1",
                 X ? "text-danger-fg" : "text-text",
-                m || ""
+                u || ""
               ),
               children: t
             }
           ),
           /* @__PURE__ */ c("div", { className: "relative", children: [
-            o && /* @__PURE__ */ e("div", { className: "absolute left-0 pl-3 flex items-center pointer-events-none h-full", children: /* @__PURE__ */ e("span", { className: fe("text-text-muted", Me[s]), children: o }) }),
+            l && /* @__PURE__ */ e("div", { className: "absolute left-0 pl-3 flex items-center pointer-events-none h-full", children: /* @__PURE__ */ e("span", { className: fe("text-text-muted", Me[s]), children: l }) }),
             /* @__PURE__ */ e(
               "input",
               {
@@ -1283,7 +1286,7 @@ const fe = (...t) => t.filter(Boolean).join(" "), Bt = (t) => /* @__PURE__ */ e(
                   // Size styles
                   Vt[s],
                   // Icon padding
-                  o ? "pl-10" : "",
+                  l ? "pl-10" : "",
                   "pr-10",
                   // Altijd padding rechts voor de dropdown/loading icon
                   // State styles
@@ -1293,7 +1296,7 @@ const fe = (...t) => t.filter(Boolean).join(" "), Bt = (t) => /* @__PURE__ */ e(
                 ...E
               }
             ),
-            /* @__PURE__ */ e("div", { className: "absolute inset-y-0 right-0 pr-3 flex items-center", children: ae || l ? (
+            /* @__PURE__ */ e("div", { className: "absolute inset-y-0 right-0 pr-3 flex items-center", children: ae || o ? (
               // Loading Spinner
               /* @__PURE__ */ e(
                 et,
@@ -1313,7 +1316,7 @@ const fe = (...t) => t.filter(Boolean).join(" "), Bt = (t) => /* @__PURE__ */ e(
                     re ? "rotate-180" : "rotate-0"
                   ),
                   onClick: () => {
-                    P((j) => (j || S(!1), !j));
+                    j((P) => (P || S(!1), !P));
                   }
                 }
               )
@@ -1324,17 +1327,17 @@ const fe = (...t) => t.filter(Boolean).join(" "), Bt = (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: y.length > 0 ? y.map((j) => /* @__PURE__ */ e(
+              children: y.length > 0 ? y.map((P) => /* @__PURE__ */ e(
                 "li",
                 {
                   className: "px-4 py-2 cursor-pointer text-text hover:bg-accent-soft hover:text-accent transition-colors",
-                  onClick: () => w(j),
+                  onClick: () => w(P),
                   role: "option",
-                  "aria-selected": q === j.label,
-                  children: j.label
+                  "aria-selected": q === P.label,
+                  children: P.label
                 },
-                j.value
-              )) : /* @__PURE__ */ e("li", { className: "px-4 py-2 text-text-muted", children: ae || l ? "Zoeken op afstand..." : "Geen resultaten gevonden." })
+                P.value
+              )) : /* @__PURE__ */ e("li", { className: "px-4 py-2 text-text-muted", children: ae || o ? "Zoeken op afstand..." : "Geen resultaten gevonden." })
             }
           ),
           (n || r) && /* @__PURE__ */ e(
@@ -1358,8 +1361,8 @@ const fe = (...t) => t.filter(Boolean).join(" "), Bt = (t) => /* @__PURE__ */ e(
 );
 qt.displayName = "SearchableTextField";
 const Ut = me(
-  ({ checked: t, onChange: r, label: n, disabled: s = !1, className: a, ...o }, l) => {
-    const u = /* @__PURE__ */ e(
+  ({ checked: t, onChange: r, label: n, disabled: s = !1, className: a, ...l }, o) => {
+    const h = /* @__PURE__ */ e(
       "span",
       {
         "aria-hidden": !0,
@@ -1393,17 +1396,17 @@ const Ut = me(
           /* @__PURE__ */ e(
             "input",
             {
-              ref: l,
+              ref: o,
               type: "checkbox",
               role: "switch",
               checked: t,
               disabled: s,
-              onChange: (m) => r(m.target.checked),
+              onChange: (u) => r(u.target.checked),
               className: "peer sr-only",
-              ...o
+              ...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: h }),
           n && /* @__PURE__ */ e("span", { className: "text-sm text-text", children: n })
         ]
       }
@@ -1418,8 +1421,8 @@ function Wt({
   tableColumns: s = 6,
   tableRows: a = 8
 }) {
-  const o = ({ children: l }) => t === "inline" ? /* @__PURE__ */ e(xe, { children: l }) : /* @__PURE__ */ e("main", { className: "flex-1 bg-surface p-6", children: l });
-  return r ? /* @__PURE__ */ e(o, { children: /* @__PURE__ */ e("div", { className: "w-full max-w-6xl mx-auto animate-pulse", children: r }) }) : /* @__PURE__ */ e(o, { children: /* @__PURE__ */ c("div", { className: "w-full mx-auto space-y-6 animate-pulse", children: [
+  const l = ({ children: o }) => t === "inline" ? /* @__PURE__ */ e(xe, { 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__ */ c("div", { className: "w-full mx-auto space-y-6 animate-pulse", children: [
     !n && /* @__PURE__ */ c(xe, { children: [
       /* @__PURE__ */ e("div", { className: "h-6 w-1/4 rounded-sm bg-surface-hover" }),
       /* @__PURE__ */ c("div", { className: "space-y-2", children: [
@@ -1433,29 +1436,29 @@ function Wt({
         {
           className: "grid gap-2 bg-surface-hover p-3",
           style: { gridTemplateColumns: `repeat(${s}, minmax(0, 1fr))` },
-          children: Array.from({ length: s }).map((l, u) => /* @__PURE__ */ e(
+          children: Array.from({ length: s }).map((o, h) => /* @__PURE__ */ e(
             "div",
             {
               className: "h-4 w-2/3 rounded-sm bg-border-strong"
             },
-            `header-${u}`
+            `header-${h}`
           ))
         }
       ),
-      Array.from({ length: a }).map((l, u) => /* @__PURE__ */ e(
+      Array.from({ length: a }).map((o, h) => /* @__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, N) => /* @__PURE__ */ e(
+          children: Array.from({ length: s }).map((u, N) => /* @__PURE__ */ e(
             "div",
             {
               className: "h-4 w-full rounded-sm bg-surface-hover"
             },
-            `cell-${u}-${N}`
+            `cell-${h}-${N}`
           ))
         },
-        `row-${u}`
+        `row-${h}`
       ))
     ] })
   ] }) });
@@ -1466,12 +1469,12 @@ const Kt = ({
   value: n,
   onSelect: s,
   placement: a = "bottom-start",
-  disabled: o = !1,
-  className: l,
-  showCheck: u = !0,
-  header: m
+  disabled: l = !1,
+  className: o,
+  showCheck: h = !0,
+  header: u
 }) => {
-  const [N, f] = R(!1), [h, b] = R(null), [p, C] = R({ top: 0, left: 0 }), g = se(null), x = se(null), _ = se(null), E = se(null), W = ze(N, x, { placement: a }), D = se(null), X = () => Array.from(
+  const [N, m] = R(!1), [f, b] = R(null), [p, C] = R({ top: 0, left: 0 }), g = se(null), x = se(null), _ = se(null), E = se(null), W = ze(N, x, { placement: a }), D = se(null), X = () => Array.from(
     E.current?.querySelectorAll("button[data-option-value]:not(:disabled)") ?? []
   );
   Q(() => {
@@ -1487,22 +1490,22 @@ const Kt = ({
   };
   Q(() => {
     const i = (S) => {
-      g.current && (!g.current.contains(S.target) || _.current && !_.current.contains(S.target)) && (f(!1), b(null), D.current && (clearTimeout(D.current), D.current = null));
+      g.current && (!g.current.contains(S.target) || _.current && !_.current.contains(S.target)) && (m(!1), b(null), D.current && (clearTimeout(D.current), D.current = null));
     };
     return N && document.addEventListener("mousedown", i), () => {
       document.removeEventListener("mousedown", i);
     };
   }, [N]), Q(() => {
     const i = (S) => {
-      S.key === "Escape" && (f(!1), b(null), x.current?.focus(), D.current && (clearTimeout(D.current), D.current = null));
+      S.key === "Escape" && (m(!1), b(null), x.current?.focus(), D.current && (clearTimeout(D.current), D.current = null));
     };
     return N && document.addEventListener("keydown", i), () => {
       document.removeEventListener("keydown", i);
     };
   }, [N]), Q(() => {
-    if (h && g.current) {
+    if (f && g.current) {
       const i = g.current.querySelector(
-        `[data-option-value="${h}"]`
+        `[data-option-value="${f}"]`
       );
       if (i) {
         const S = i.getBoundingClientRect();
@@ -1512,21 +1515,21 @@ const Kt = ({
         });
       }
     }
-  }, [h]), Q(() => () => {
+  }, [f]), Q(() => () => {
     D.current && clearTimeout(D.current);
   }, []);
   const I = (i) => {
-    i.stopPropagation(), !o && (f(!N), b(null), D.current && (clearTimeout(D.current), D.current = null));
+    i.stopPropagation(), !l && (m(!N), b(null), D.current && (clearTimeout(D.current), D.current = null));
   }, q = (i, S, y) => {
-    i.stopPropagation(), !S.disabled && !S.divider && (!S.children || S.children.length === 0) && (s?.(S.value, y), f(!1), b(null));
+    i.stopPropagation(), !S.disabled && !S.divider && (!S.children || S.children.length === 0) && (s?.(S.value, y), m(!1), b(null));
   }, K = (i) => {
     D.current && (clearTimeout(D.current), D.current = null), i.children && i.children.length > 0 ? b(i.value) : b(null);
   }, re = (i) => {
     i.children && i.children.length > 0 ? D.current = setTimeout(() => {
       b(null);
     }, 150) : b(null);
-  }, P = (i, S, y) => {
-    i.stopPropagation(), !S.disabled && !S.divider && (s?.(S.value, y), f(!1), b(null));
+  }, j = (i, S, y) => {
+    i.stopPropagation(), !S.disabled && !S.divider && (s?.(S.value, y), m(!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"
@@ -1540,7 +1543,7 @@ const Kt = ({
       ref: g,
       className: d(
         "relative flex flex-row items-center justify-center rounded-lg hover:bg-surface-hover",
-        l
+        o
       ),
       children: [
         /* @__PURE__ */ e(
@@ -1548,17 +1551,17 @@ const Kt = ({
           {
             ref: x,
             onClick: I,
-            disabled: o,
+            disabled: l,
             "aria-haspopup": "menu",
             "aria-expanded": N,
             className: d("inline-flex items-center justify-center", {
-              "opacity-50 cursor-not-allowed": o
+              "opacity-50 cursor-not-allowed": l
             }),
             children: t
           }
         ),
         N && /* @__PURE__ */ e("div", { ref: E, className: ce, style: W, onKeyDown: U, children: /* @__PURE__ */ c("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),
+          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(
@@ -1568,7 +1571,7 @@ const Kt = ({
                 },
                 `divider-${S}`
               );
-            const y = i.children && i.children.length > 0, A = h === i.value;
+            const y = i.children && i.children.length > 0, A = f === i.value;
             return /* @__PURE__ */ c("div", { className: "relative group", children: [
               /* @__PURE__ */ c(
                 "button",
@@ -1596,7 +1599,7 @@ const Kt = ({
                       ] })
                     ] }),
                     /* @__PURE__ */ c("div", { className: "flex items-center space-x-2", children: [
-                      u && n === i.value && /* @__PURE__ */ e(Te, { className: "size-icon-md shrink-0 text-success-fg", "aria-hidden": !0 }),
+                      h && n === i.value && /* @__PURE__ */ e(Te, { className: "size-icon-md shrink-0 text-success-fg", "aria-hidden": !0 }),
                       y && /* @__PURE__ */ e("span", { className: "text-text-muted text-xs", children: "▶" })
                     ] })
                   ]
@@ -1634,7 +1637,7 @@ const Kt = ({
                     return /* @__PURE__ */ c(
                       "button",
                       {
-                        onClick: (le) => P(
+                        onClick: (le) => j(
                           le,
                           w,
                           i.value
@@ -1654,7 +1657,7 @@ const Kt = ({
                               w.description && /* @__PURE__ */ e("span", { className: "text-xs text-text-muted", children: w.description })
                             ] })
                           ] }),
-                          u && ae && /* @__PURE__ */ e(Te, { className: "size-icon-md shrink-0 text-success-fg", "aria-hidden": !0 })
+                          h && ae && /* @__PURE__ */ e(Te, { className: "size-icon-md shrink-0 text-success-fg", "aria-hidden": !0 })
                         ]
                       },
                       w.value
@@ -1736,19 +1739,19 @@ const Kt = ({
       )
     ] })
   ] }) }) });
-}, je = ({
+}, Pe = ({
   data: t,
   columns: r,
   loading: n = !1,
   searchable: s = !1,
   searchPlaceholder: a = "Search...",
-  filters: o = [],
-  paginated: l = !1,
-  pageSizeOptions: u = [10, 25, 50, 100],
-  defaultPageSize: m = 10,
+  filters: l = [],
+  paginated: o = !1,
+  pageSizeOptions: h = [10, 25, 50, 100],
+  defaultPageSize: u = 10,
   actions: N = [],
-  onRowClick: f,
-  selectable: h = !1,
+  onRowClick: m,
+  selectable: f = !1,
   selectedRows: b = [],
   onSelectionChange: p,
   getRowKey: C = (I, q) => q,
@@ -1764,9 +1767,9 @@ const Kt = ({
   const [I, q] = R(""), [K, re] = R({
     column: null,
     direction: null
-  }), [P, ce] = R({
+  }), [j, ce] = R({
     page: 0,
-    pageSize: m
+    pageSize: u
   }), k = se(null), i = he(() => {
     let v = t;
     if (s && I.trim()) {
@@ -1778,7 +1781,7 @@ const Kt = ({
         return String(ie || "").toLowerCase().includes(Z);
       }));
     }
-    return o.forEach((V) => {
+    return l.forEach((V) => {
       V.value && V.value !== "all" && (v = v.filter((Z) => {
         const J = r.find((ie) => ie.id === V.id);
         if (!J) return !0;
@@ -1786,7 +1789,7 @@ const Kt = ({
         return String(O || "") === V.value;
       }));
     }), v;
-  }, [t, I, r, s, o]), S = he(() => {
+  }, [t, I, r, s, l]), S = he(() => {
     if (!K.column || !K.direction) return i;
     const v = r.find((V) => V.id === K.column);
     return v ? [...i].sort((V, Z) => {
@@ -1795,10 +1798,10 @@ const Kt = ({
       return J < O ? ie = -1 : J > O && (ie = 1), K.direction === "desc" ? -ie : ie;
     }) : i;
   }, [i, K, r]), y = he(() => {
-    if (!l) return S;
-    const v = P.page * P.pageSize, V = v + P.pageSize;
+    if (!o) return S;
+    const v = j.page * j.pageSize, V = v + j.pageSize;
     return S.slice(v, V);
-  }, [S, P, l]), A = ue(
+  }, [S, j, o]), A = ue(
     (v) => {
       r.find((Z) => Z.id === v)?.sortable && re((Z) => Z.column !== v ? { column: v, direction: "asc" } : Z.direction === "asc" ? { column: v, direction: "desc" } : { column: null, direction: null });
     },
@@ -1826,8 +1829,8 @@ const Kt = ({
     ce((v) => ({ ...v, page: 0 }));
   }, [I, K]), Q(() => {
     ce((v) => ({ ...v, page: 0 }));
-  }, [o.map((v) => v.value).join(",")]);
-  const G = S.length, j = Math.ceil(G / P.pageSize), M = P.page * P.pageSize + 1, T = Math.min(M + P.pageSize - 1, G), z = y.length > 0 && y.every((v) => {
+  }, [l.map((v) => v.value).join(",")]);
+  const G = S.length, P = Math.ceil(G / j.pageSize), M = j.page * j.pageSize + 1, T = Math.min(M + j.pageSize - 1, G), z = y.length > 0 && y.every((v) => {
     const V = C(v, 0);
     return b.some(
       (Z, J) => C(Z, J) === V
@@ -1844,11 +1847,11 @@ const Kt = ({
     "text-text border-b border-border p-2"
   ), te = d("h-row-lg", {
     "hover:bg-surface-sunk": x,
-    "cursor-pointer": f
+    "cursor-pointer": m
   });
   return /* @__PURE__ */ c("div", { className: "space-y-4", children: [
-    (s || o.length > 0) && /* @__PURE__ */ e("div", { className: "px-4 pt-4 pb-2", children: /* @__PURE__ */ c("div", { className: "flex flex-wrap gap-4 items-start", children: [
-      o.map((v) => /* @__PURE__ */ e(tr, { ...v }, v.id)),
+    (s || l.length > 0) && /* @__PURE__ */ e("div", { className: "px-4 pt-4 pb-2", children: /* @__PURE__ */ c("div", { className: "flex flex-wrap gap-4 items-start", children: [
+      l.map((v) => /* @__PURE__ */ e(tr, { ...v }, v.id)),
       /* @__PURE__ */ e("div", { className: "w-full sm:w-auto sm:ml-auto min-w-menu", children: /* @__PURE__ */ e(
         be,
         {
@@ -1871,7 +1874,7 @@ const Kt = ({
       ) }),
       /* @__PURE__ */ c("table", { ref: k, className: d(F, "min-w-full"), children: [
         /* @__PURE__ */ e("thead", { className: $, children: /* @__PURE__ */ c("tr", { children: [
-          h && /* @__PURE__ */ e("th", { className: d(L, "w-12"), children: /* @__PURE__ */ e(
+          f && /* @__PURE__ */ e("th", { className: d(L, "w-12"), children: /* @__PURE__ */ e(
             "input",
             {
               type: "checkbox",
@@ -1937,7 +1940,7 @@ const Kt = ({
         /* @__PURE__ */ e("tbody", { children: y.length === 0 || n ? !n && /* @__PURE__ */ e("tr", { children: /* @__PURE__ */ e(
           "td",
           {
-            colSpan: r.length + (h ? 1 : 0) + (N.length > 0 ? 1 : 0),
+            colSpan: r.length + (f ? 1 : 0) + (N.length > 0 ? 1 : 0),
             className: d(
               L,
               "text-center py-8 text-text-muted"
@@ -1957,10 +1960,10 @@ const Kt = ({
                 X?.(v, V)
               ),
               onClick: (O) => {
-                O.stopPropagation(), f?.(v, V);
+                O.stopPropagation(), m?.(v, V);
               },
               children: [
-                h && /* @__PURE__ */ e("td", { className: L, children: /* @__PURE__ */ e(
+                f && /* @__PURE__ */ e("td", { className: L, children: /* @__PURE__ */ e(
                   "input",
                   {
                     type: "checkbox",
@@ -2022,7 +2025,7 @@ const Kt = ({
         }) })
       ] })
     ] }),
-    l && G > 0 && /* @__PURE__ */ c("div", { className: "flex items-center justify-between px-6", children: [
+    o && G > 0 && /* @__PURE__ */ c("div", { className: "flex items-center justify-between px-6", children: [
       /* @__PURE__ */ c("div", { className: "flex items-center gap-4", children: [
         /* @__PURE__ */ c("span", { className: "text-sm text-text-muted", children: [
           "Showing ",
@@ -2038,10 +2041,10 @@ const Kt = ({
           /* @__PURE__ */ e(
             "select",
             {
-              value: P.pageSize,
+              value: j.pageSize,
               onChange: (v) => ee(Number(v.target.value)),
               className: "h-control-sm w-16 rounded-md border border-border bg-surface-input px-2 text-sm text-text",
-              children: u.map((v) => /* @__PURE__ */ e("option", { value: v, children: v }, v))
+              children: h.map((v) => /* @__PURE__ */ e("option", { value: v, children: v }, v))
             }
           )
         ] })
@@ -2053,7 +2056,7 @@ const Kt = ({
             size: "sm",
             variant: "ghost",
             onClick: () => w(0),
-            disabled: P.page === 0,
+            disabled: j.page === 0,
             iconOnly: !0,
             children: /* @__PURE__ */ e(Qt, {})
           }
@@ -2063,25 +2066,25 @@ const Kt = ({
           {
             size: "sm",
             variant: "ghost",
-            onClick: () => w(P.page - 1),
-            disabled: P.page === 0,
+            onClick: () => w(j.page - 1),
+            disabled: j.page === 0,
             iconOnly: !0,
             children: /* @__PURE__ */ e(Xt, {})
           }
         ),
         /* @__PURE__ */ c("span", { className: "px-3 py-1 text-sm text-text-muted", children: [
           "Page ",
-          P.page + 1,
+          j.page + 1,
           " of ",
-          j
+          P
         ] }),
         /* @__PURE__ */ e(
           ne,
           {
             size: "sm",
             variant: "ghost",
-            onClick: () => w(P.page + 1),
-            disabled: P.page >= j - 1,
+            onClick: () => w(j.page + 1),
+            disabled: j.page >= P - 1,
             iconOnly: !0,
             children: /* @__PURE__ */ e(Zt, {})
           }
@@ -2091,8 +2094,8 @@ const Kt = ({
           {
             size: "sm",
             variant: "ghost",
-            onClick: () => w(j - 1),
-            disabled: P.page >= j - 1,
+            onClick: () => w(P - 1),
+            disabled: j.page >= P - 1,
             iconOnly: !0,
             children: /* @__PURE__ */ e(er, {})
           }
@@ -2106,31 +2109,31 @@ const Kt = ({
   onTabChange: n,
   className: s
 }) => {
-  const [a, o] = R(t[0]?.id || ""), l = r || a, u = (m) => {
-    n ? n(m) : o(m);
+  const [a, l] = R(t[0]?.id || ""), o = r || a, h = (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 && h(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": l === m.id,
-          "border-transparent text-text-muted hover:text-text": l !== 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__ */ c("span", { className: "flex items-center gap-2", children: [
-        m.label,
-        m.badge && /* @__PURE__ */ e("span", { className: d(
+        u.label,
+        u.badge && /* @__PURE__ */ e("span", { className: d(
           "inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium",
-          l === 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
   )) }) });
 }, nr = ({
   items: t,
@@ -2138,16 +2141,16 @@ const Kt = ({
   activeTab: n,
   onTabChange: s,
   variant: a = "default",
-  size: o = "md",
-  className: l
+  size: l = "md",
+  className: o
 }) => {
-  const [u, m] = R(
+  const [h, u] = R(
     r || n || t[0]?.id || ""
-  ), N = n || u, f = (g) => {
-    s ? s(g) : m(g);
-  }, h = {
+  ), N = n || h, m = (g) => {
+    s ? s(g) : u(g);
+  }, f = {
     activeTab: N,
-    setActiveTab: f
+    setActiveTab: m
   }, b = t.find((g) => g.id === N), p = d(
     "flex",
     {
@@ -2156,12 +2159,12 @@ const Kt = ({
       "space-x-1": a === "pills",
       "space-x-8": a === "default" || a === "underline"
     },
-    l
+    o
   ), C = (g, x) => {
     const _ = "transition-colors duration-fast font-medium", E = {
-      "text-xs px-2 py-1": o === "sm",
-      "text-sm px-3 py-2": o === "md",
-      "text-base px-4 py-3": o === "lg"
+      "text-xs px-2 py-1": l === "sm",
+      "text-sm px-3 py-2": l === "md",
+      "text-base px-4 py-3": l === "lg"
     }, W = {
       // Default variant
       "border-b-2 -mb-px": a === "default",
@@ -2182,7 +2185,7 @@ const Kt = ({
     } : {};
     return d(_, E, W, D, X, U);
   };
-  return /* @__PURE__ */ e(rr.Provider, { value: h, children: /* @__PURE__ */ c("div", { children: [
+  return /* @__PURE__ */ e(rr.Provider, { value: f, children: /* @__PURE__ */ c("div", { children: [
     /* @__PURE__ */ e("div", { className: p, role: "tablist", children: t.map((g) => /* @__PURE__ */ e(
       "button",
       {
@@ -2191,7 +2194,7 @@ const Kt = ({
         "aria-selected": N === g.id,
         "aria-controls": `tabpanel-${g.id}`,
         disabled: g.disabled,
-        onClick: () => !g.disabled && f(g.id),
+        onClick: () => !g.disabled && m(g.id),
         className: C(g, N === g.id),
         children: /* @__PURE__ */ c("span", { className: "flex items-center gap-2", children: [
           g.label,
@@ -2224,21 +2227,21 @@ function Ve({
   title: n,
   size: s = "md",
   closeOnBackdropClick: a = !0,
-  closeOnEscape: o = !0,
-  className: l,
-  backdropClassName: u,
-  children: m,
+  closeOnEscape: l = !0,
+  className: o,
+  backdropClassName: h,
+  children: u,
   footer: N,
-  showCloseButton: f = !0
+  showCloseButton: m = !0
 }) {
-  const h = se(null), b = se(null);
+  const f = se(null), b = se(null);
   Q(() => {
-    if (!t || !o) return;
+    if (!t || !l) return;
     const C = (g) => {
       g.key === "Escape" && r();
     };
     return document.addEventListener("keydown", C), () => document.removeEventListener("keydown", C);
-  }, [t, o, r]), Q(() => (t ? (b.current = document.activeElement, h.current && h.current.focus(), document.body.style.overflow = "hidden") : (b.current && b.current.focus(), document.body.style.overflow = ""), () => {
+  }, [t, l, r]), Q(() => (t ? (b.current = document.activeElement, f.current && f.current.focus(), document.body.style.overflow = "hidden") : (b.current && b.current.focus(), document.body.style.overflow = ""), () => {
     document.body.style.overflow = "";
   }), [t]);
   const p = (C) => {
@@ -2251,26 +2254,26 @@ function Ve({
         "fixed inset-0 z-modal flex items-center justify-center p-4",
         "bg-scrim",
         // 'animate-fade-in',
-        u
+        h
       ),
       onClick: p,
       children: /* @__PURE__ */ c(
         "div",
         {
-          ref: h,
+          ref: f,
           className: d(
             "relative w-full bg-surface rounded-lg shadow-modal",
             // 'animate-scale-in',
             "focus:outline-none",
             sr[s],
-            l
+            o
           ),
           role: "dialog",
           "aria-modal": "true",
           "aria-labelledby": n ? "modal-title" : void 0,
           tabIndex: -1,
           children: [
-            (n || f) && /* @__PURE__ */ c("div", { className: "flex items-center justify-between p-6 pb-0", children: [
+            (n || m) && /* @__PURE__ */ c("div", { className: "flex items-center justify-between p-6 pb-0", children: [
               n && /* @__PURE__ */ e(
                 "span",
                 {
@@ -2279,7 +2282,7 @@ function Ve({
                   children: n
                 }
               ),
-              f && /* @__PURE__ */ e(
+              m && /* @__PURE__ */ e(
                 "button",
                 {
                   onClick: r,
@@ -2289,7 +2292,7 @@ function Ve({
                 }
               )
             ] }),
-            /* @__PURE__ */ e("div", { className: "p-6", children: m }),
+            /* @__PURE__ */ e("div", { className: "p-6", children: u }),
             N && /* @__PURE__ */ e("div", { className: "px-6 py-4", children: N })
           ]
         }
@@ -2335,13 +2338,13 @@ const ar = {
   weight: n = "normal",
   color: s = "current",
   align: a = "left",
-  truncate: o = !1,
-  italic: l = !1,
-  underline: u = !1,
-  lineHeight: m = "normal",
+  truncate: l = !1,
+  italic: o = !1,
+  underline: h = !1,
+  lineHeight: u = "normal",
   as: N,
-  className: f,
-  children: h,
+  className: m,
+  children: f,
   ...b
 }) => {
   const p = N || dr(t), C = t === "caption", g = t === "label", x = t === "code", _ = d(
@@ -2357,13 +2360,13 @@ const ar = {
     or[s],
     cr[a],
     // Line height only overrides the body variant
-    t === "body" && ir[m],
-    l && "italic",
-    u && "underline",
-    o && "truncate",
-    f
+    t === "body" && ir[u],
+    o && "italic",
+    h && "underline",
+    l && "truncate",
+    m
   );
-  return /* @__PURE__ */ e(p, { className: _, ...b, children: h });
+  return /* @__PURE__ */ e(p, { className: _, ...b, children: f });
 };
 function dr(t) {
   return {
@@ -2379,15 +2382,15 @@ const ur = ({
   label: n,
   placeholder: s = "Select or upload a file",
   error: a,
-  disabled: o,
-  accept: l,
-  onListFiles: u,
-  onListMounts: m,
+  disabled: l,
+  accept: o,
+  onListFiles: h,
+  onListMounts: u,
   onUploadFile: N,
-  onDownloadFile: f,
-  onRegisterFile: h
+  onDownloadFile: m,
+  onRegisterFile: f
 }) => {
-  const [b, p] = R(!1), [C, g] = R([]), [x, _] = R(null), [E, W] = R("/"), [D, X] = R([]), [U, I] = R(!1), [q, K] = R(""), [re, P] = R(
+  const [b, p] = R(!1), [C, g] = R([]), [x, _] = R(null), [E, W] = R("/"), [D, X] = R([]), [U, I] = R(!1), [q, K] = R(""), [re, j] = R(
     typeof t == "object" ? t : null
   ), [ce, k] = R(!1), [i, S] = R(""), y = se(null);
   Q(() => {
@@ -2398,7 +2401,7 @@ const ur = ({
   const A = async () => {
     I(!0);
     try {
-      const $ = await m?.();
+      const $ = await u?.();
       $?.data && g($.data);
     } catch ($) {
       console.error("Failed to load mounts", $);
@@ -2409,7 +2412,7 @@ const ur = ({
     if (x) {
       I(!0);
       try {
-        const $ = await u?.({ mountId: x.id, name: q, path: E });
+        const $ = await h?.({ mountId: x.id, name: q, path: E });
         $?.data && X($.data);
       } catch ($) {
         console.error("Failed to load files", $);
@@ -2433,7 +2436,7 @@ const ur = ({
           providerKey: L.name,
           ownerId: "me"
         };
-        P(V), r(V, v), p(!1);
+        j(V), r(V, v), p(!1);
       } catch (te) {
         console.error("Local file selection failed", te);
       } finally {
@@ -2454,7 +2457,7 @@ const ur = ({
         });
         if (v?.data) {
           const V = v.data;
-          P(V), r(V, new Uint8Array(te)), p(!1);
+          j(V), r(V, new Uint8Array(te)), p(!1);
         }
       } catch (te) {
         console.error("Upload failed", te);
@@ -2467,7 +2470,7 @@ const ur = ({
       I(!0);
       try {
         const $ = `${E}${i}/`;
-        h && (await h({
+        f && (await f({
           name: i,
           type: "folder",
           path: E,
@@ -2486,15 +2489,15 @@ const ur = ({
   }, G = async ($) => {
     I(!0);
     try {
-      const L = await f?.($.id);
-      P($), r($, L), p(!1);
+      const L = await m?.($.id);
+      j($), r($, L), p(!1);
     } catch (L) {
       console.error("Failed to download file", L);
     } finally {
       I(!1);
     }
-  }, j = ($) => {
-    $.stopPropagation(), P(null), r(null);
+  }, P = ($) => {
+    $.stopPropagation(), j(null), r(null);
   }, M = he(() => {
     const $ = /* @__PURE__ */ new Set(), L = [];
     return D.forEach((te) => {
@@ -2593,20 +2596,20 @@ const ur = ({
     /* @__PURE__ */ c(
       "div",
       {
-        onClick: () => !o && p(!0),
+        onClick: () => !l && p(!0),
         className: d(
           "flex items-center gap-3 px-3 py-2 border rounded-lg cursor-pointer transition-colors",
           "hover:border-border-strong bg-surface",
           a ? "border-danger-border" : "border-border",
-          o && "opacity-50 cursor-not-allowed bg-surface-sunk"
+          l && "opacity-50 cursor-not-allowed bg-surface-sunk"
         ),
         children: [
           /* @__PURE__ */ e("div", { className: "flex-shrink-0", children: /* @__PURE__ */ e(Y, { icon: re ? Ee : _e, color: re ? "primary" : "secondary" }) }),
           /* @__PURE__ */ e("div", { className: "flex-grow truncate", children: re ? /* @__PURE__ */ e("span", { className: "text-sm text-text font-medium", children: re.name }) : /* @__PURE__ */ e("span", { className: "text-sm text-text-muted", children: s }) }),
-          re && !o && /* @__PURE__ */ e(
+          re && !l && /* @__PURE__ */ e(
             "button",
             {
-              onClick: j,
+              onClick: P,
               className: "p-1 hover:bg-surface-hover rounded",
               children: /* @__PURE__ */ e(Y, { icon: we, size: "xs" })
             }
@@ -2687,7 +2690,7 @@ const ur = ({
                           className: "hidden",
                           ref: y,
                           onChange: ae,
-                          accept: l
+                          accept: o
                         }
                       )
                     ] })
@@ -2708,7 +2711,7 @@ const ur = ({
                     /* @__PURE__ */ e(ne, { size: "sm", variant: "ghost", onClick: () => k(!1), children: "Cancel" })
                   ] }),
                   /* @__PURE__ */ e("div", { className: "max-h-100 overflow-auto rounded-lg border border-border", children: /* @__PURE__ */ e(
-                    je,
+                    Pe,
                     {
                       data: B,
                       columns: F,
@@ -2718,7 +2721,7 @@ const ur = ({
                     }
                   ) })
                 ] }) : /* @__PURE__ */ e("div", { className: "max-h-100 overflow-auto rounded-lg border border-border", children: /* @__PURE__ */ e(
-                  je,
+                  Pe,
                   {
                     data: C,
                     columns: H,
@@ -2747,7 +2750,7 @@ const ur = ({
                         type: "file",
                         className: "hidden",
                         onChange: ee,
-                        accept: l,
+                        accept: o,
                         disabled: U
                       }
                     )
@@ -2772,16 +2775,16 @@ const ur = ({
     error: n,
     size: s = "md",
     fullWidth: a = !1,
-    loading: o = !1,
-    containerClassName: l,
-    labelClassName: u,
-    className: m,
+    loading: l = !1,
+    containerClassName: o,
+    labelClassName: h,
+    className: u,
     id: N,
-    rows: f = 4,
-    ...h
+    rows: m = 4,
+    ...f
   }, b) => {
     const p = oe.useId(), C = N || `textarea-${p}`, g = !!n, x = n || r ? `${C}-description` : void 0;
-    return /* @__PURE__ */ c("div", { className: d("flex flex-col", a && "w-full", l), children: [
+    return /* @__PURE__ */ c("div", { className: d("flex flex-col", a && "w-full", o), children: [
       t && /* @__PURE__ */ e(
         "label",
         {
@@ -2789,7 +2792,7 @@ const ur = ({
           className: d(
             Be,
             g ? "text-danger-fg" : "text-text-subtle",
-            u
+            h
           ),
           children: t
         }
@@ -2800,7 +2803,7 @@ const ur = ({
           {
             ref: b,
             id: C,
-            rows: f,
+            rows: m,
             "aria-invalid": g || void 0,
             "aria-describedby": x,
             className: d(
@@ -2811,12 +2814,12 @@ const ur = ({
               "disabled:cursor-not-allowed disabled:bg-surface-hover disabled:text-text-disabled",
               mr[s],
               g ? "border-danger-border bg-danger-soft" : "border-border hover:border-border-strong",
-              m
+              u
             ),
-            ...h
+            ...f
           }
         ),
-        o && /* @__PURE__ */ e(
+        l && /* @__PURE__ */ e(
           "span",
           {
             "aria-hidden": !0,
@@ -2836,7 +2839,7 @@ const ur = ({
   }
 );
 De.displayName = "TextArea";
-function Pe(t, r) {
+function je(t, r) {
   return r.split(".").reduce(
     (n, s) => n && typeof n == "object" && s in n ? n[s] : void 0,
     t
@@ -2844,20 +2847,20 @@ function Pe(t, r) {
 }
 function fr(t, r, n) {
   const s = r.split("."), a = Array.isArray(t) ? [...t] : { ...t };
-  let o = a;
-  for (let l = 0; l < s.length - 1; l++) {
-    const u = s[l], m = o[u];
-    o[u] = m && typeof m == "object" ? Array.isArray(m) ? [...m] : { ...m } : {}, o = o[u];
+  let l = a;
+  for (let o = 0; o < s.length - 1; o++) {
+    const h = s[o], u = l[h];
+    l[h] = u && typeof u == "object" ? Array.isArray(u) ? [...u] : { ...u } : {}, l = l[h];
   }
-  return o[s[s.length - 1]] = n, a;
+  return l[s[s.length - 1]] = n, a;
 }
 function hr(t, r) {
   const n = r.split("."), s = Array.isArray(t) ? [...t] : { ...t };
   let a = s;
-  for (let o = 0; o < n.length - 1; o++) {
-    const l = n[o];
-    if (!a[l] || typeof a[l] != "object") return s;
-    a[l] = Array.isArray(a[l]) ? [...a[l]] : { ...a[l] }, a = a[l];
+  for (let l = 0; l < n.length - 1; l++) {
+    const o = n[l];
+    if (!a[o] || typeof a[o] != "object") return s;
+    a[o] = Array.isArray(a[o]) ? [...a[o]] : { ...a[o] }, a = a[o];
   }
   return delete a[n[n.length - 1]], s;
 }
@@ -2867,13 +2870,13 @@ const hn = ({
   onSubmit: n,
   onCancel: s,
   onChange: a,
-  transform: o,
-  validate: l,
-  submitButton: u = { label: "Submit", variant: "primary" },
-  cancelButton: m = { label: "Cancel", variant: "outline" },
+  transform: l,
+  validate: o,
+  submitButton: h = { label: "Submit", variant: "primary" },
+  cancelButton: u = { label: "Cancel", variant: "outline" },
   showButtons: N = !0,
-  layout: f = "vertical",
-  size: h = "md",
+  layout: m = "vertical",
+  size: f = "md",
   loading: b = !1,
   className: p,
   ref: C,
@@ -2900,11 +2903,11 @@ const hn = ({
           if (i.forEach((ee, ae) => {
             const le = {};
             for (const G of y.arrayFields) {
-              const j = ee?.[G.name];
-              if (G.required && (j == null || j === ""))
+              const P = ee?.[G.name];
+              if (G.required && (P == null || P === ""))
                 le[G.name] = `${G.label} is required`, w = !0;
               else if (G.validator) {
-                const M = G.validator(j, ee);
+                const M = G.validator(P, ee);
                 M && (le[G.name] = M, w = !0);
               }
             }
@@ -2940,24 +2943,24 @@ const hn = ({
           continue;
         const w = U(
           A.name,
-          Pe(x, A.name),
+          je(x, A.name),
           x
         );
         w && (i[A.name] = w);
       }
-      if (l) {
-        const A = l(x);
+      if (o) {
+        const A = o(x);
         A && Object.assign(i, A);
       }
       if (W(i), Object.keys(i).some((A) => i[A]))
         return;
-      const y = o ? o(x) : x;
+      const y = l ? l(x) : x;
       await n?.(x, y);
     },
-    [x, t, U, l, o, n, b]
+    [x, t, U, o, l, n, b]
   ), K = ue(
     (k) => {
-      const i = Pe(x, k.name), S = D[k.name] ? E[k.name] : void 0, y = k.disabled || b, A = {
+      const i = je(x, k.name), S = D[k.name] ? E[k.name] : void 0, y = k.disabled || b, A = {
         value: i || "",
         disabled: y,
         required: k.required,
@@ -2979,7 +2982,7 @@ const hn = ({
               type: k.textType || k.type,
               autoComplete: k.autocomplete,
               error: S,
-              size: h
+              size: f
             }
           );
         case "textarea":
@@ -2990,7 +2993,7 @@ const hn = ({
               onChange: (w) => I(k.name, w.target.value),
               rows: 4,
               error: S,
-              size: h
+              size: f
             }
           );
         case "select":
@@ -3007,7 +3010,7 @@ const hn = ({
               multiple: k.multiple,
               allowCreate: k.allowCreate,
               error: S,
-              size: h
+              size: f
             }
           );
         case "checkbox":
@@ -3018,7 +3021,7 @@ const hn = ({
               label: k.label,
               checked: !!i,
               onChange: (w) => I(k.name, w.target.checked),
-              size: h
+              size: f
             }
           );
         case "radio":
@@ -3051,7 +3054,7 @@ const hn = ({
               ...A,
               value: i ? new Date(i) : null,
               onChange: (w) => I(k.name, w),
-              size: h
+              size: f
             }
           );
         case "file":
@@ -3098,7 +3101,7 @@ const hn = ({
                 action: "storage.mount"
               }),
               disabled: y,
-              size: h,
+              size: f,
               placeholder: k.placeholder
             }
           );
@@ -3119,20 +3122,20 @@ const hn = ({
             }
           const ae = () => {
             I(k.name, [...w, {}]);
-          }, le = (j) => {
+          }, le = (P) => {
             I(
               k.name,
-              w.filter((M, T) => T !== j)
+              w.filter((M, T) => T !== P)
             );
-          }, G = (j, M, T) => {
+          }, G = (P, M, T) => {
             const z = [...w];
-            z[j] = {
-              ...z[j],
+            z[P] = {
+              ...z[P],
               [M]: T
             }, I(k.name, z);
           };
           return /* @__PURE__ */ c("div", { className: "flex flex-col gap-2", children: [
-            w.map((j, M) => /* @__PURE__ */ c("div", { className: "flex items-start gap-2", children: [
+            w.map((P, M) => /* @__PURE__ */ c("div", { className: "flex items-start gap-2", children: [
               /* @__PURE__ */ e("div", { className: "grid flex-1 gap-2 sm:grid-cols-2", children: k.arrayFields?.map((T) => {
                 const z = ee?.[M]?.[T.name];
                 return /* @__PURE__ */ c(
@@ -3146,7 +3149,7 @@ const hn = ({
                       ] }),
                       (() => {
                         const B = {
-                          value: j?.[T.name] || "",
+                          value: P?.[T.name] || "",
                           disabled: y,
                           required: T.required,
                           placeholder: T.placeholder,
@@ -3171,7 +3174,7 @@ const hn = ({
                                 type: T.textType || T.type,
                                 autoComplete: T.autocomplete,
                                 error: z,
-                                size: h
+                                size: f
                               }
                             );
                           case "textarea":
@@ -3186,7 +3189,7 @@ const hn = ({
                                 ),
                                 rows: 4,
                                 error: z,
-                                size: h
+                                size: f
                               }
                             );
                           case "select":
@@ -3209,7 +3212,7 @@ const hn = ({
                                 multiple: T.multiple,
                                 allowCreate: T.allowCreate,
                                 error: z,
-                                size: h
+                                size: f
                               }
                             );
                           case "checkbox":
@@ -3217,13 +3220,13 @@ const hn = ({
                               pe,
                               {
                                 ...B,
-                                checked: !!j?.[T.name],
+                                checked: !!P?.[T.name],
                                 onChange: (F) => G(
                                   M,
                                   T.name,
                                   F.target.checked
                                 ),
-                                size: h
+                                size: f
                               }
                             );
                           case "radio":
@@ -3238,7 +3241,7 @@ const hn = ({
                                       type: "radio",
                                       name: `${k.name}.${M}.${T.name}`,
                                       value: F.value,
-                                      checked: j?.[T.name] === F.value,
+                                      checked: P?.[T.name] === F.value,
                                       onChange: () => G(
                                         M,
                                         T.name,
@@ -3254,7 +3257,7 @@ const hn = ({
                               F.value
                             )) });
                           case "date": {
-                            const F = j?.[T.name];
+                            const F = P?.[T.name];
                             return /* @__PURE__ */ e(
                               $e,
                               {
@@ -3265,13 +3268,13 @@ const hn = ({
                                   T.name,
                                   H
                                 ),
-                                size: h
+                                size: f
                               }
                             );
                           }
                           case "custom":
                             return T.customComponent?.({
-                              value: j?.[T.name],
+                              value: P?.[T.name],
                               onChange: (F) => G(
                                 M,
                                 T.name,
@@ -3331,7 +3334,7 @@ const hn = ({
           return null;
       }
     },
-    [x, D, E, b, h, I]
+    [x, D, E, b, f, I]
   ), re = ue(
     (k) => {
       if (k.conditional && !k.conditional(x))
@@ -3388,17 +3391,17 @@ const hn = ({
       );
     },
     [x, D, E, K]
-  ), P = d(
+  ), j = d(
     "overflow-hidden rounded-lg border border-border bg-surface",
     {
-      "max-w-md": h === "sm",
-      "max-w-2xl": h === "md",
-      "max-w-4xl": h === "lg",
-      "max-w-full": h === "full"
+      "max-w-md": f === "sm",
+      "max-w-2xl": f === "md",
+      "max-w-4xl": f === "lg",
+      "max-w-full": f === "full"
     },
     p
-  ), ce = h === "full" ? "md" : h;
-  return /* @__PURE__ */ c("form", { ref: C, onSubmit: q, className: P, children: [
+  ), ce = f === "full" ? "md" : f;
+  return /* @__PURE__ */ c("form", { ref: C, onSubmit: q, className: j, children: [
     !N && /* @__PURE__ */ e("button", { type: "submit", className: "hidden", tabIndex: -1, "aria-hidden": !0 }),
     /* @__PURE__ */ e("div", { className: "flex flex-col", children: t.map(re) }),
     /* @__PURE__ */ e("div", { className: "flex items-center gap-2 border-t border-border-subtle bg-surface-sunk px-5 py-3", children: N && /* @__PURE__ */ c(xe, { children: [
@@ -3407,24 +3410,24 @@ const hn = ({
         ne,
         {
           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(
         ne,
         {
           type: "submit",
-          variant: u.variant,
-          size: u.size || ce,
-          disabled: u.disabled || b,
+          variant: h.variant,
+          size: h.size || ce,
+          disabled: h.disabled || b,
           loading: b,
-          className: u.className,
-          children: u.label
+          className: h.className,
+          children: h.label
         }
       )
     ] }) })
@@ -3436,26 +3439,26 @@ function xn({
   description: n,
   confirmLabel: s = "Bevestigen",
   cancelLabel: a = "Annuleren",
-  tone: o = "default",
-  loading: l = !1,
-  onConfirm: u,
-  onCancel: m
+  tone: l = "default",
+  loading: o = !1,
+  onConfirm: h,
+  onCancel: u
 }) {
   return /* @__PURE__ */ e(
     Ve,
     {
       open: t,
-      onClose: m,
+      onClose: u,
       title: r,
       size: "sm",
       footer: /* @__PURE__ */ c("div", { className: "flex w-full items-center justify-end gap-2", children: [
-        /* @__PURE__ */ e(ne, { variant: "ghost", onClick: m, disabled: l, children: a }),
+        /* @__PURE__ */ e(ne, { variant: "ghost", onClick: u, disabled: o, children: a }),
         /* @__PURE__ */ e(
           ne,
           {
-            variant: o === "danger" ? "destructive" : "primary",
-            onClick: u,
-            loading: l,
+            variant: l === "danger" ? "destructive" : "primary",
+            onClick: h,
+            loading: o,
             children: s
           }
         )
@@ -3494,10 +3497,10 @@ function bn({
   dot: n = !1,
   icon: s,
   dismissible: a = !1,
-  onDismiss: o,
-  className: l,
-  children: u,
-  ...m
+  onDismiss: l,
+  className: o,
+  children: h,
+  ...u
 }) {
   return /* @__PURE__ */ c(
     "span",
@@ -3509,9 +3512,9 @@ function bn({
         xr[t],
         // Size styles
         br[r],
-        l
+        o
       ),
-      ...m,
+      ...u,
       children: [
         n && /* @__PURE__ */ e(
           "span",
@@ -3522,12 +3525,12 @@ function bn({
             )
           }
         ),
-        s && /* @__PURE__ */ e("span", { className: d("flex-shrink-0", u && "mr-1"), children: s }),
-        u,
-        a && o && /* @__PURE__ */ e(
+        s && /* @__PURE__ */ e("span", { className: d("flex-shrink-0", h && "mr-1"), children: s }),
+        h,
+        a && l && /* @__PURE__ */ e(
           "button",
           {
-            onClick: o,
+            onClick: l,
             className: "ml-1.5 flex-shrink-0 hover:opacity-70 transition-opacity",
             "aria-label": "Remove badge",
             children: /* @__PURE__ */ e(Y, { icon: we, size: "xs", color: "current" })
@@ -3547,19 +3550,19 @@ function pn({
   title: n,
   description: s,
   actions: a,
-  card: o = !1,
-  className: l,
-  ...u
+  card: l = !1,
+  className: o,
+  ...h
 }) {
   return /* @__PURE__ */ c(
     "div",
     {
       className: d(
         "flex flex-col items-center gap-2.5 text-center",
-        o && "rounded-lg border border-border bg-surface px-11 py-9 shadow-overlay",
-        l
+        l && "rounded-lg border border-border bg-surface px-11 py-9 shadow-overlay",
+        o
       ),
-      ...u,
+      ...h,
       children: [
         t != null && /* @__PURE__ */ e("span", { className: d("flex size-disc items-center justify-center rounded-full text-2xl", gr[r]), children: t }),
         /* @__PURE__ */ e("div", { className: "text-lg font-semibold text-text", children: n }),
@@ -3590,12 +3593,12 @@ const vr = {
   success: "bg-success"
 };
 function vn({ value: t, variant: r = "accent", size: n = "md", className: s, ...a }) {
-  const o = Math.max(0, Math.min(100, t));
+  const l = Math.max(0, Math.min(100, t));
   return /* @__PURE__ */ e(
     "div",
     {
       role: "progressbar",
-      "aria-valuenow": Math.round(o),
+      "aria-valuenow": Math.round(l),
       "aria-valuemin": 0,
       "aria-valuemax": 100,
       className: d("w-full overflow-hidden rounded-full bg-surface-hover", vr[n], s),
@@ -3604,7 +3607,7 @@ function vn({ value: t, variant: r = "accent", size: n = "md", className: s, ...
         "div",
         {
           className: d("h-full rounded-full transition-[width] duration-300 ease-out", yr[r]),
-          style: { width: `${o}%` }
+          style: { width: `${l}%` }
         }
       )
     }
@@ -3634,7 +3637,7 @@ function yn({
   label: n = "Loading...",
   showLabel: s = !1,
   className: a,
-  ...o
+  ...l
 }) {
   return /* @__PURE__ */ c(
     "div",
@@ -3644,7 +3647,7 @@ function yn({
         s ? "flex-col space-y-2" : "",
         a
       ),
-      ...o,
+      ...l,
       children: [
         /* @__PURE__ */ c(
           "svg",
@@ -3740,36 +3743,36 @@ function wn({
   label: s,
   className: a
 }) {
-  const o = t.indexOf(r), l = { role: s ? "group" : void 0, "aria-label": s, "aria-hidden": s ? void 0 : !0 };
-  return n === "dots" ? /* @__PURE__ */ e("div", { ...l, className: d("flex items-center gap-1.5", a), children: t.map((u, m) => /* @__PURE__ */ e(
+  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((h, u) => /* @__PURE__ */ e(
     "span",
     {
       className: d(
         "h-step-bar rounded-full transition-all duration-fast ease-out",
-        m === o ? "w-5 bg-accent" : "w-3.5",
-        m < o && "bg-border-strong",
-        m > o && "bg-border"
+        u === l ? "w-5 bg-accent" : "w-3.5",
+        u < l && "bg-border-strong",
+        u > l && "bg-border"
       )
     },
-    u
-  )) }) : /* @__PURE__ */ e("div", { ...l, className: d("flex items-center gap-2", a), children: t.map((u, m) => /* @__PURE__ */ c("div", { className: "flex items-center gap-2", children: [
+    h
+  )) }) : /* @__PURE__ */ e("div", { ...o, className: d("flex items-center gap-2", a), children: t.map((h, u) => /* @__PURE__ */ c("div", { className: "flex items-center gap-2", children: [
     /* @__PURE__ */ e(
       "span",
       {
-        "aria-current": m === o ? "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 === o && "bg-accent text-accent-fg",
-          m < o && "bg-accent-soft text-accent",
-          m > o && "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" })
+  ] }, h)) });
 }
-function kn({ title: t, icon: r = /* @__PURE__ */ e(it, { className: "size-icon-md", "aria-hidden": !0 }), action: n, children: s, className: a, ...o }) {
+function kn({ title: t, icon: r = /* @__PURE__ */ e(it, { className: "size-icon-md", "aria-hidden": !0 }), action: n, children: s, className: a, ...l }) {
   return /* @__PURE__ */ c(
     "div",
     {
@@ -3778,7 +3781,7 @@ function kn({ title: t, icon: r = /* @__PURE__ */ e(it, { className: "size-icon-
         "border-assistant-border bg-assistant-soft",
         a
       ),
-      ...o,
+      ...l,
       children: [
         /* @__PURE__ */ c("div", { className: "flex items-center gap-2 text-assistant", children: [
           /* @__PURE__ */ e("span", { "aria-hidden": !0, children: r }),
@@ -3802,41 +3805,41 @@ function zr(t) {
   return r.length >= 2 ? (r[0][0] + r[1][0]).toUpperCase() : r.length === 1 ? r[0].slice(0, 2).toUpperCase() : "?";
 }
 const Er = ({ name: t, src: r, size: n = "sm", className: s, title: a }) => {
-  const [o, l] = oe.useState(!1), u = d(
+  const [l, o] = oe.useState(!1), h = d(
     "inline-flex items-center justify-center rounded-full overflow-hidden shrink-0 font-semibold select-none bg-surface-hover text-text",
     Sr[n],
     s
   );
-  return r && !o ? /* @__PURE__ */ e(
+  return r && !l ? /* @__PURE__ */ e(
     "img",
     {
       src: r,
       alt: t ?? "",
       title: a ?? t,
-      className: d(u, "object-cover"),
-      onError: () => l(!0)
+      className: d(h, "object-cover"),
+      onError: () => o(!0)
     }
-  ) : /* @__PURE__ */ e("span", { className: u, title: a ?? t, "aria-label": t, children: zr(t) });
+  ) : /* @__PURE__ */ e("span", { className: h, title: a ?? t, "aria-label": t, children: zr(t) });
 }, Oe = "ring-surface", Mr = "ring-surface-accent", Cn = ({ people: t, max: r = 4, size: n = "sm", className: s }) => {
   if (t.length === 0) return null;
-  const a = t.slice(0, r), o = t.length - a.length;
+  const a = t.slice(0, r), l = t.length - a.length;
   return /* @__PURE__ */ c("span", { className: d("inline-flex items-center", s), children: [
-    a.map((l, u) => /* @__PURE__ */ e(
+    a.map((o, h) => /* @__PURE__ */ e(
       Er,
       {
-        name: l.name,
-        src: l.src,
+        name: o.name,
+        src: o.src,
         size: n,
-        title: l.name ? l.seen === !1 ? `${l.name} — nog niet gelezen` : l.name : void 0,
+        title: o.name ? o.seen === !1 ? `${o.name} — nog niet gelezen` : o.name : void 0,
         className: d(
-          u > 0 && "-ml-2",
-          l.owner ? Mr : Oe,
-          l.seen === !1 && "opacity-40"
+          h > 0 && "-ml-2",
+          o.owner ? Mr : Oe,
+          o.seen === !1 && "opacity-40"
         )
       },
-      l.id ?? `${l.name}-${u}`
+      o.id ?? `${o.name}-${h}`
     )),
-    o > 0 && /* @__PURE__ */ c(
+    l > 0 && /* @__PURE__ */ c(
       "span",
       {
         className: d(
@@ -3846,7 +3849,7 @@ const Er = ({ name: t, src: r, size: n = "sm", className: s, title: a }) => {
         ),
         children: [
           "+",
-          o
+          l
         ]
       }
     )
@@ -3863,7 +3866,7 @@ const Er = ({ name: t, src: r, size: n = "sm", className: s, title: a }) => {
   lg: "size-avatar-lg rounded-md text-base"
 };
 function Sn({ channel: t, children: r, size: n = "md", className: s, title: a }) {
-  const o = Fe[t in Fe ? t : "note"];
+  const l = Fe[t in Fe ? t : "note"];
   return /* @__PURE__ */ e(
     "span",
     {
@@ -3871,8 +3874,8 @@ function Sn({ channel: t, children: r, size: n = "md", className: s, title: a })
       className: d(
         "inline-flex shrink-0 items-center justify-center font-bold",
         $r[n],
-        o.fg,
-        o.bg,
+        l.fg,
+        l.bg,
         s
       ),
       children: r
@@ -3885,24 +3888,24 @@ const zn = ({
   size: n = "md",
   aspectRatio: s = "auto",
   radius: a = "md",
-  showLoading: o = !0,
-  showError: l = !0,
-  fallback: u,
-  loadingContent: m,
+  showLoading: l = !0,
+  showError: o = !0,
+  fallback: h,
+  loadingContent: u,
   errorContent: N,
-  className: f,
-  onLoad: h,
+  className: m,
+  onLoad: f,
   onError: b,
   ...p
 }) => {
-  const [C, g] = R(!0), [x, _] = R(!1), [E, W] = R(t), D = (P) => {
-    g(!1), _(!1), h?.(P);
-  }, X = (P) => {
-    if (g(!1), _(!0), u && E !== u) {
-      W(u), _(!1), g(!0);
+  const [C, g] = R(!0), [x, _] = R(!1), [E, W] = R(t), D = (j) => {
+    g(!1), _(!1), f?.(j);
+  }, X = (j) => {
+    if (g(!1), _(!0), h && E !== h) {
+      W(h), _(!1), g(!0);
       return;
     }
-    b?.(P);
+    b?.(j);
   }, U = d(
     "relative overflow-hidden bg-surface-hover",
     // Size variants
@@ -3930,7 +3933,7 @@ const zn = ({
       "rounded-xl": a === "xl",
       "rounded-full": a === "full"
     },
-    f
+    m
   ), I = d(
     "w-full h-full object-cover transition-opacity duration-fast",
     {
@@ -3956,8 +3959,8 @@ const zn = ({
         onError: X
       }
     ),
-    C && o && /* @__PURE__ */ e("div", { className: q, children: m || K }),
-    x && l && /* @__PURE__ */ e("div", { className: q, children: N || re })
+    C && l && /* @__PURE__ */ e("div", { className: q, children: u || K }),
+    x && o && /* @__PURE__ */ e("div", { className: q, children: N || re })
   ] });
 };
 function En({
@@ -3966,13 +3969,13 @@ function En({
   variant: n = "divided",
   leading: s,
   renderItem: a,
-  trailing: o,
-  onSelect: l,
-  onActiveIndexChange: u,
-  isActive: m,
+  trailing: l,
+  onSelect: o,
+  onActiveIndexChange: h,
+  isActive: u,
   unread: N,
-  dimmed: f,
-  groupBy: h,
+  dimmed: m,
+  groupBy: f,
   groups: b,
   renderGroupHeader: p,
   stickyGroupHeaders: C = !1,
@@ -3988,7 +3991,7 @@ function En({
   emptyContent: q,
   loading: K = !1,
   loadingRows: re = 4,
-  className: P,
+  className: j,
   "aria-label": ce
 }) {
   const [k, i] = oe.useState(
@@ -4011,7 +4014,7 @@ function En({
   }, ae = (z) => W?.(z ? [...t] : []), le = d(
     "flex flex-col",
     I && "overflow-hidden rounded-lg border border-border-subtle",
-    P
+    j
   );
   if (K)
     return /* @__PURE__ */ e("div", { className: le, children: Array.from({ length: re }).map((z, B) => /* @__PURE__ */ c(
@@ -4032,28 +4035,28 @@ function En({
     )) });
   if (t.length === 0 && q)
     return /* @__PURE__ */ e("div", { className: le, children: q });
-  const G = t.length > 0 && E.length === t.length, j = E.length > 0 && !G, M = (z, B, F) => {
-    const H = m?.(z, B) ?? !1, $ = N?.(z, B) ?? !1, L = f?.(z, B) ?? !1, te = _ && w(z);
+  const G = t.length > 0 && E.length === t.length, P = E.length > 0 && !G, M = (z, B, F) => {
+    const H = u?.(z, B) ?? !1, $ = N?.(z, B) ?? !1, L = m?.(z, B) ?? !1, te = _ && w(z);
     return /* @__PURE__ */ c(
       "li",
       {
-        ...l ? {
+        ...o ? {
           role: "button",
           tabIndex: 0,
           "data-list-row": "",
           "aria-current": H || void 0,
-          onClick: () => l(z, B),
-          onFocus: () => u?.(B),
+          onClick: () => o(z, B),
+          onFocus: () => h?.(B),
           onKeyDown: (v) => {
-            v.key !== "Enter" && v.key !== " " || (v.preventDefault(), l(z, B));
+            v.key !== "Enter" && v.key !== " " || (v.preventDefault(), o(z, B));
           }
         } : {},
         className: d(
           "flex items-center gap-3 px-4 py-2 text-base",
           "transition-colors duration-fast ease-out",
           n === "divided" && !F && "border-t border-border-subtle",
-          l && "cursor-pointer focus-visible:outline-none focus-visible:focus-ring",
-          H || te ? "bg-accent-soft text-text" : l && "hover:bg-surface-hover",
+          o && "cursor-pointer focus-visible:outline-none focus-visible:focus-ring",
+          H || te ? "bg-accent-soft text-text" : o && "hover:bg-surface-hover",
           $ && "font-bold",
           L && "opacity-55"
         ),
@@ -4075,17 +4078,17 @@ function En({
           ),
           s && /* @__PURE__ */ e("span", { className: "shrink-0", children: s(z, B) }),
           /* @__PURE__ */ e("div", { className: "flex min-w-0 flex-1 items-center gap-2", children: a ? a(z, B) : String(z) }),
-          o && /* @__PURE__ */ e("span", { className: "shrink-0 text-xs text-text-subtle", children: o(z, B) })
+          l && /* @__PURE__ */ e("span", { className: "shrink-0 text-xs text-text-subtle", children: l(z, B) })
         ]
       },
       A(z, B)
     );
   }, T = (() => {
-    if (!h)
+    if (!f)
       return t.map((H, $) => M(H, $, $ === 0));
     const z = /* @__PURE__ */ new Map();
     t.forEach((H, $) => {
-      const L = h(H, $);
+      const L = f(H, $);
       z.has(L) || z.set(L, []), z.get(L).push({ item: H, index: $ });
     });
     const B = b ?? [];
@@ -4133,13 +4136,13 @@ function En({
       ];
     });
   })();
-  return /* @__PURE__ */ c("div", { ref: S, className: le, onKeyDown: l ? y : void 0, children: [
+  return /* @__PURE__ */ c("div", { ref: S, className: le, onKeyDown: o ? y : void 0, children: [
     _ && E.length > 0 && /* @__PURE__ */ c("div", { className: "flex items-center gap-3 border-b border-border-subtle bg-surface-sunk px-4 py-2", children: [
       /* @__PURE__ */ e(
         pe,
         {
           checked: G,
-          indeterminate: j,
+          indeterminate: P,
           onChange: (z) => ae(z.target.checked),
           "aria-label": "Alles selecteren"
         }
@@ -4200,7 +4203,7 @@ const Dr = {
   success: "text-success-fg"
 };
 function $n({ value: t, label: r, tone: n = "default", className: s, ...a }) {
-  return /* @__PURE__ */ c("div", { className: d("rounded-xl shadow-sm bg-surface px-4 py-3.5", s), ...a, children: [
+  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", Dr[n]), children: t }),
     /* @__PURE__ */ e("div", { className: "pt-0.5 text-xs text-text-muted", children: r })
   ] });
@@ -4211,13 +4214,13 @@ const Dn = ({
   subtitle: n,
   meta: s,
   actions: a = [],
-  children: o,
-  className: l,
-  backLabel: u = "Back",
-  backClassName: m,
+  children: l,
+  className: o,
+  backLabel: h = "Back",
+  backClassName: u,
   onBack: N,
-  editable: f = !1,
-  onTitleChange: h
+  editable: m = !1,
+  onTitleChange: f
 }) => {
   const [b, p] = R(!1), [C, g] = R(r), x = se(null);
   Q(() => {
@@ -4226,9 +4229,9 @@ const Dn = ({
     b && x.current && (x.current.focus(), x.current.select());
   }, [b]);
   const _ = () => {
-    f && p(!0);
+    m && p(!0);
   }, E = () => {
-    p(!1), C.trim() !== "" && C !== r && h ? h(C.trim()) : g(r);
+    p(!1), C.trim() !== "" && C !== r && f ? f(C.trim()) : g(r);
   }, W = (D) => {
     D.key === "Enter" ? x.current?.blur() : D.key === "Escape" && (g(r), p(!1));
   };
@@ -4236,10 +4239,13 @@ const Dn = ({
     "div",
     {
       className: d(
-        "p-5 pb-3",
-        // App-bar treatment: own background, full-bleed, closed with a rule.
-        t && "bg-surface border-b border-border",
-        l
+        "px-5 pt-4 pb-2.5",
+        // Inside the content card the header shares the card's surface; the
+        // rule is the only thing that still closes it off. `surface` therefore
+        // only draws the rule — the background it used to paint is now the
+        // card itself.
+        t && "border-b border-border",
+        o
       ),
       children: [
         /* @__PURE__ */ c("div", { className: "flex flex-row sm:items-start sm:justify-between items-center gap-4", children: [
@@ -4263,15 +4269,15 @@ const Dn = ({
                   {
                     onClick: _,
                     className: d(
-                      "text-xl font-semibold truncate",
-                      f && "cursor-pointer"
+                      "text-lg font-semibold tracking-title truncate",
+                      m && "cursor-pointer"
                     ),
-                    title: f ? "Click to edit" : void 0,
+                    title: m ? "Click to edit" : void 0,
                     children: r
                   }
                 ),
                 n && /* @__PURE__ */ e("span", { className: "shrink-0 text-base text-text-muted truncate", children: n }),
-                f && /* @__PURE__ */ e(
+                m && /* @__PURE__ */ e(
                   ut,
                   {
                     size: 15,
@@ -4280,7 +4286,7 @@ const Dn = ({
                   }
                 )
               ] }),
-              s && /* @__PURE__ */ e("div", { className: "mt-0.5 truncate text-xs text-text-muted", children: s })
+              s && /* @__PURE__ */ e("div", { className: "mt-0.5 truncate text-sm text-text-subtle", children: s })
             ] })
           ] }) }),
           a.length > 0 && /* @__PURE__ */ e("div", { className: "flex flex-wrap sm:flex-nowrap gap-2 sm:gap-3", children: a.map(
@@ -4310,7 +4316,7 @@ const Dn = ({
             )
           ) })
         ] }),
-        o && /* @__PURE__ */ e("div", { className: "mt-4", children: o })
+        l && /* @__PURE__ */ e("div", { className: "mt-4", children: l })
       ]
     }
   );
@@ -4325,35 +4331,35 @@ const Dn = ({
   backLabel: n = "Back",
   className: s,
   padding: a = "md",
-  children: o
+  children: l
 }) => /* @__PURE__ */ c("div", { className: d("flex items-center gap-2 mb-3", Tr[a], s), children: [
   r && /* @__PURE__ */ e(ne, { variant: "secondary", onClick: r, leftIcon: /* @__PURE__ */ e(Y, { icon: ke, size: "sm" }), iconOnly: !0 }),
-  o && /* @__PURE__ */ e("div", { className: "flex-1 min-w-0", children: o }),
-  t.length > 0 && /* @__PURE__ */ e("div", { className: d("flex flex-wrap gap-4", !o && "ml-auto"), children: t.map(
-    (l) => l.splitOptions && l.splitOptions.length > 0 ? /* @__PURE__ */ e(
+  l && /* @__PURE__ */ e("div", { className: "flex-1 min-w-0", children: l }),
+  t.length > 0 && /* @__PURE__ */ e("div", { className: d("flex flex-wrap gap-4", !l && "ml-auto"), children: t.map(
+    (o) => o.splitOptions && o.splitOptions.length > 0 ? /* @__PURE__ */ e(
       Re,
       {
-        label: l.label,
-        onClick: l.onClick,
-        icon: l.icon,
-        variant: l.variant === "primary" ? "primary" : "secondary",
-        options: l.splitOptions,
-        disabled: l.disabled
+        label: o.label,
+        onClick: o.onClick,
+        icon: o.icon,
+        variant: o.variant === "primary" ? "primary" : "secondary",
+        options: o.splitOptions,
+        disabled: o.disabled
       },
-      l.id
+      o.id
     ) : /* @__PURE__ */ e(
       ne,
       {
-        variant: l.variant ?? "secondary",
+        variant: o.variant ?? "secondary",
         size: "sm",
-        onClick: (u) => {
-          u.stopPropagation(), u.target.blur(), l.onClick();
+        onClick: (h) => {
+          h.stopPropagation(), h.target.blur(), o.onClick();
         },
-        disabled: l.disabled,
-        leftIcon: l.icon,
-        children: l.label
+        disabled: o.disabled,
+        leftIcon: o.icon,
+        children: o.label
       },
-      l.id
+      o.id
     )
   ) })
 ] }), _r = /<[a-z][\s\S]*>/i, Ar = [
@@ -4419,7 +4425,7 @@ function Ln({
   control: n,
   bordered: s = !1,
   disabled: a = !1,
-  className: o
+  className: l
 }) {
   return /* @__PURE__ */ c(
     "div",
@@ -4428,7 +4434,7 @@ function Ln({
         "flex items-center justify-between gap-4 py-2",
         s && "rounded-lg border border-border px-3",
         a && "opacity-50",
-        o
+        l
       ),
       children: [
         /* @__PURE__ */ c("div", { className: "min-w-0", children: [
@@ -4446,9 +4452,9 @@ function In({
   description: n,
   actions: s,
   children: a,
-  className: o
+  className: l
 }) {
-  return /* @__PURE__ */ c("section", { className: d("flex flex-col gap-2", o), 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(Y, { icon: t, size: "md", color: "secondary", className: "mt-0.5" }),
       /* @__PURE__ */ c("div", { className: "min-w-0 flex-1", children: [
@@ -4460,7 +4466,7 @@ function In({
     /* @__PURE__ */ e("div", { className: d("flex flex-col", t && "pl-6"), children: a })
   ] });
 }
-function jn({ label: t, dotColor: r, onClick: n, className: s }) {
+function Pn({ label: t, dotColor: r, onClick: n, className: s }) {
   return /* @__PURE__ */ c(
     "button",
     {
@@ -4484,32 +4490,32 @@ function Ir(t, r) {
     t
   );
 }
-const Pn = ({
+const jn = ({
   groups: t,
   data: r,
   size: n = "md",
   className: s
 }) => {
-  const a = (f) => {
-    if (!f) return "-";
+  const a = (m) => {
+    if (!m) return "-";
     try {
-      return new Date(f).toLocaleDateString("nl-NL", {
+      return new Date(m).toLocaleDateString("nl-NL", {
         year: "numeric",
         month: "long",
         day: "numeric"
       });
     } catch {
-      return String(f);
+      return String(m);
     }
-  }, o = (f) => f ? "Ja" : "Nee", l = (f, h) => {
-    if (!h) return String(f || "-");
-    const b = h.find((p) => p.value === f);
-    return b ? b.label : String(f || "-");
-  }, u = ue(
-    (f) => {
-      const h = Ir(r, f.name);
-      if (f.type === "array") {
-        const p = h;
+  }, l = (m) => m ? "Ja" : "Nee", o = (m, f) => {
+    if (!f) return String(m || "-");
+    const b = f.find((p) => p.value === m);
+    return b ? b.label : String(m || "-");
+  }, h = ue(
+    (m) => {
+      const f = Ir(r, m.name);
+      if (m.type === "array") {
+        const p = f;
         return !p || p.length === 0 ? /* @__PURE__ */ e(
           de,
           {
@@ -4531,13 +4537,13 @@ const Pn = ({
                   weight: "medium",
                   className: "text-text-muted",
                   children: [
-                    f.label,
+                    m.label,
                     " ",
                     g + 1
                   ]
                 }
               ) }),
-              /* @__PURE__ */ e("div", { className: "grid grid-cols-1 sm:grid-cols-2 gap-3", children: f.arrayFields?.map((x) => {
+              /* @__PURE__ */ e("div", { className: "grid grid-cols-1 sm:grid-cols-2 gap-3", children: m.arrayFields?.map((x) => {
                 const _ = C?.[x.name];
                 let E = "-";
                 switch (x.type) {
@@ -4551,13 +4557,13 @@ const Pn = ({
                     break;
                   case "select":
                   case "radio":
-                    E = l(
+                    E = o(
                       _,
                       x.options
                     );
                     break;
                   case "checkbox":
-                    E = o(_);
+                    E = l(_);
                     break;
                   case "date":
                     E = a(_);
@@ -4596,10 +4602,10 @@ const Pn = ({
           g
         )) });
       }
-      if (f.type === "custom" && f.customComponent)
-        return f.customComponent({ value: h });
-      if (f.format) {
-        const p = f.format(h, r);
+      if (m.type === "custom" && m.customComponent)
+        return m.customComponent({ value: f });
+      if (m.format) {
+        const p = m.format(f, r);
         return /* @__PURE__ */ e(
           de,
           {
@@ -4611,30 +4617,30 @@ const Pn = ({
         );
       }
       let b = "-";
-      switch (f.type) {
+      switch (m.type) {
         case "text":
         case "email":
         case "password":
         case "number":
         case "tel":
         case "url":
-          b = h ? String(h) : "-";
+          b = f ? String(f) : "-";
           break;
         case "textarea":
-          b = h ? /* @__PURE__ */ e("div", { className: "whitespace-pre-wrap", children: String(h || "-") }) : "-";
+          b = f ? /* @__PURE__ */ e("div", { className: "whitespace-pre-wrap", children: String(f || "-") }) : "-";
           break;
         case "select":
         case "radio":
-          b = l(h, f.options);
+          b = o(f, m.options);
           break;
         case "checkbox":
-          b = o(h);
+          b = l(f);
           break;
         case "date":
-          b = a(h);
+          b = a(f);
           break;
         default:
-          b = h ? String(h) : "-";
+          b = f ? String(f) : "-";
       }
       return /* @__PURE__ */ e(
         de,
@@ -4647,25 +4653,25 @@ const Pn = ({
       );
     },
     [r]
-  ), m = ue(
-    (f) => {
-      if (f.conditional && !f.conditional(r))
+  ), u = ue(
+    (m) => {
+      if (m.conditional && !m.conditional(r))
         return null;
-      const h = f.items.filter((p) => !(p.hidden || p.conditional && !p.conditional(r)));
-      if (h.length === 0) return null;
+      const f = m.items.filter((p) => !(p.hidden || p.conditional && !p.conditional(r)));
+      if (f.length === 0) return null;
       const b = d(
         "space-y-4",
         {
-          "grid gap-4": f.layout === "grid",
-          "flex flex-wrap gap-4": f.layout === "flex"
+          "grid gap-4": m.layout === "grid",
+          "flex flex-wrap gap-4": m.layout === "flex"
         },
-        f.layout === "grid" && {
-          "grid-cols-1": !f.columns || f.columns === 1,
-          "grid-cols-2": f.columns === 2,
-          "grid-cols-3": f.columns === 3,
-          "grid-cols-4": f.columns === 4
+        m.layout === "grid" && {
+          "grid-cols-1": !m.columns || m.columns === 1,
+          "grid-cols-2": m.columns === 2,
+          "grid-cols-3": m.columns === 3,
+          "grid-cols-4": m.columns === 4
         },
-        f.className
+        m.className
       );
       return /* @__PURE__ */ c(
         "div",
@@ -4680,20 +4686,20 @@ const Pn = ({
                   size: "lg",
                   weight: "semibold",
                   className: "text-text",
-                  children: f.title
+                  children: m.title
                 }
               ),
-              f.description && /* @__PURE__ */ e(
+              m.description && /* @__PURE__ */ e(
                 de,
                 {
                   variant: "body",
                   size: "sm",
                   className: "text-text-muted mt-1",
-                  children: f.description
+                  children: m.description
                 }
               )
             ] }),
-            /* @__PURE__ */ e("div", { className: "md:col-span-2", children: /* @__PURE__ */ e("div", { className: b, children: h.map((p) => /* @__PURE__ */ c(
+            /* @__PURE__ */ e("div", { className: "md:col-span-2", children: /* @__PURE__ */ e("div", { className: b, children: f.map((p) => /* @__PURE__ */ c(
               "div",
               {
                 className: "space-y-1",
@@ -4711,17 +4717,17 @@ const Pn = ({
                       children: p.label
                     }
                   ),
-                  u(p)
+                  h(p)
                 ]
               },
               p.name
             )) }) })
           ]
         },
-        f.id
+        m.id
       );
     },
-    [r, u]
+    [r, h]
   ), N = d(
     "space-y-6",
     {
@@ -4732,16 +4738,16 @@ const Pn = ({
     },
     s
   );
-  return /* @__PURE__ */ e("div", { className: N, children: /* @__PURE__ */ e("div", { className: "space-y-8", children: t.map(m) }) });
+  return /* @__PURE__ */ e("div", { className: N, children: /* @__PURE__ */ e("div", { className: "space-y-8", children: t.map(u) }) });
 }, qe = ({ item: t, isSelectedHandler: r, onClick: n, depth: s = 0 }) => {
-  const a = !!(t.children && t.children.length > 0), o = r ? r(t.path) : !1;
+  const a = !!(t.children && t.children.length > 0), l = r ? r(t.path) : !1;
   if (a)
     return /* @__PURE__ */ c("li", { children: [
       /* @__PURE__ */ c(
         "div",
         {
           className: d(
-            "flex items-center gap-2 px-2 pt-4 pb-1 text-xs font-semibold uppercase tracking-label text-text-subtle"
+            "flex items-center gap-2 px-2.5 pt-5 pb-2 text-2xs font-semibold uppercase tracking-label text-text-disabled"
           ),
           children: [
             /* @__PURE__ */ e("span", { className: "min-w-0 flex-1 truncate", children: t.label }),
@@ -4749,10 +4755,10 @@ const Pn = ({
           ]
         }
       ),
-      /* @__PURE__ */ e("ul", { className: "flex flex-col gap-0.5", children: t.children?.map((m, N) => /* @__PURE__ */ e(
+      /* @__PURE__ */ e("ul", { className: "flex flex-col gap-px", children: t.children?.map((u, N) => /* @__PURE__ */ e(
         qe,
         {
-          item: m,
+          item: u,
           isSelectedHandler: r,
           onClick: n,
           depth: s + 1
@@ -4760,95 +4766,90 @@ const Pn = ({
         N
       )) })
     ] });
-  const l = t.action, u = l?.visibility !== "always";
+  const o = t.action, h = 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(
-        "group/item flex cursor-pointer items-center gap-2 rounded-md px-2 py-1.5 text-base no-underline",
+        // De kolom ligt op de backdrop, niet op een paneel: het actieve item
+        // is daarom een opliggende witte plaat, en de hover is de backdrop-
+        // hover (donkerder) in plaats van de surface-hover (lichter).
+        "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",
-        o ? "bg-accent-soft font-semibold text-accent" : "text-text-muted hover:bg-surface-hover hover:text-text"
+        l ? "bg-surface font-medium text-text shadow-sm" : "text-text-muted hover:bg-page-hover hover:text-text"
       ),
       children: [
-        t.icon && /* @__PURE__ */ e("span", { className: "flex w-5 shrink-0 items-center justify-center", children: t.icon }),
+        t.icon && /* @__PURE__ */ e(
+          "span",
+          {
+            className: d(
+              "flex w-5 shrink-0 items-center justify-center",
+              l ? "text-text-muted" : "text-text-subtle"
+            ),
+            children: t.icon
+          }
+        ),
         /* @__PURE__ */ e("span", { className: "min-w-0 flex-1 truncate", children: t.label }),
         t.count !== void 0 && t.count > 0 && /* @__PURE__ */ e(
           "span",
           {
             className: d(
               "shrink-0 text-xs tabular-nums",
-              o ? "rounded-full bg-accent px-2 font-semibold text-accent-fg" : "text-text-subtle",
-              l && u && "group-hover/item:hidden group-focus-within/item:hidden"
+              l ? "rounded-full bg-accent px-1.5 font-semibold text-accent-fg" : "text-text-subtle",
+              o && h && "group-hover/item:hidden group-focus-within/item:hidden"
             ),
             children: t.count
           }
         ),
-        l && /* @__PURE__ */ e(
+        o && /* @__PURE__ */ e(
           "button",
           {
             type: "button",
-            "aria-label": l.label,
-            title: l.label,
-            onClick: (m) => {
-              m.stopPropagation(), l.onClick();
+            "aria-label": o.label,
+            title: o.label,
+            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",
+              "flex size-5 shrink-0 items-center justify-center rounded-sm",
               "text-text-subtle transition-colors duration-fast ease-out",
-              "hover:bg-surface-hover hover:text-text",
+              "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"
+              h && "opacity-0 group-hover/item:opacity-100 focus-visible:opacity-100"
             ),
-            children: l.icon
+            children: o.icon
           }
         )
       ]
     }
   ) });
 }, On = ({
-  title: t,
-  actionIcons: r,
-  items: n,
-  isSelectedHandler: s,
-  onClick: a,
-  preMenuItemsComponent: o
-}) => /* @__PURE__ */ c("nav", { className: "flex h-full shrink-0 flex-col p-3 pt-4", children: [
-  /* @__PURE__ */ c("div", { className: "flex items-center gap-2 px-2 pb-3", children: [
-    /* @__PURE__ */ e("span", { className: "min-w-0 flex-1 truncate text-lg font-semibold text-text", children: t }),
-    r && r.length > 0 && /* @__PURE__ */ e("div", { className: "flex shrink-0 items-center gap-1", children: r.map((l, u) => /* @__PURE__ */ e(
-      "span",
-      {
-        className: d(
-          "flex h-control-sm w-7 cursor-pointer items-center justify-center rounded-md text-text-strong",
-          "transition-colors duration-fast ease-out hover:bg-surface-hover hover:text-text-strong",
-          "focus-visible:outline-none focus-visible:focus-ring"
-        ),
-        children: l
-      },
-      u
-    )) })
-  ] }),
-  o && /* @__PURE__ */ e("div", { className: "px-1 pb-3", children: o }),
-  /* @__PURE__ */ e("ul", { className: "flex min-h-0 flex-1 flex-col gap-0.5 overflow-y-auto", children: n.map(
-    (l, u) => !l.path && !l.label && !l.children ? /* @__PURE__ */ e("li", { "aria-hidden": !0, className: "h-4" }, u) : /* @__PURE__ */ e(
+  items: t,
+  isSelectedHandler: r,
+  onClick: n,
+  preMenuItemsComponent: s
+}) => /* @__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(
       qe,
       {
-        item: l,
-        isSelectedHandler: s,
-        onClick: a
+        item: a,
+        isSelectedHandler: r,
+        onClick: n
       },
-      u
+      l
     )
   ) })
-] }), jr = {
+] }), Pr = {
   xs: "text-xs",
   sm: "text-sm",
   md: "text-base",
@@ -4857,7 +4858,7 @@ const Pn = ({
   "2xl": "text-2xl",
   "3xl": "text-3xl",
   "4xl": "text-3xl"
-}, Pr = {
+}, jr = {
   light: "font-normal",
   normal: "font-normal",
   medium: "font-medium",
@@ -4883,21 +4884,21 @@ const Pn = ({
   weight: n = "semibold",
   color: s = "current",
   align: a = "left",
-  truncate: o = !1,
-  className: l,
-  children: u,
-  ...m
+  truncate: l = !1,
+  className: o,
+  children: h,
+  ...u
 }) => {
-  const N = `h${t}`, f = d(
+  const N = `h${t}`, m = d(
     "font-sans text-pretty",
-    jr[r || Rr(t)],
-    Pr[n],
+    Pr[r || Rr(t)],
+    jr[n],
     Or[s],
     Fr[a],
-    o && "truncate",
-    l
+    l && "truncate",
+    o
   );
-  return /* @__PURE__ */ e(N, { className: f, ...m, children: u });
+  return /* @__PURE__ */ e(N, { className: m, ...u, children: h });
 };
 function Rr(t) {
   return {
@@ -4915,42 +4916,42 @@ const Rn = ({
   onClose: n,
   labels: s,
   initialCommandPath: a,
-  initialActiveIndex: o
+  initialActiveIndex: l
 }) => {
-  const [l, u] = R(""), [m, N] = R(a || []), [f, h] = R(o || 0), b = se(null), p = se(null), g = (m.length ? t.find((x) => x.id === m[0])?.subCommands || [] : t).filter(
-    (x) => x.label.toLowerCase().includes(l.toLowerCase())
+  const [o, h] = R(""), [u, N] = R(a || []), [m, f] = R(l || 0), b = se(null), p = se(null), g = (u.length ? t.find((x) => x.id === u[0])?.subCommands || [] : t).filter(
+    (x) => x.label.toLowerCase().includes(o.toLowerCase())
   );
   return Q(() => {
-    r || (u(""), N(a || []), h(o || 0));
+    r || (h(""), N(a || []), f(l || 0));
   }, [r]), Q(() => {
     const x = (_) => {
       if (r) {
         if (_.key === "Escape")
           n();
         else if (_.key === "ArrowUp")
-          h(
+          f(
             (E) => E > 0 ? E - 1 : g.length - 1
           );
         else if (_.key === "ArrowDown")
-          h(
+          f(
             (E) => E < g.length - 1 ? E + 1 : 0
           );
         else if (_.key === "Enter") {
-          const E = g[f];
-          E && (E.subCommands ? (N([...m, E.id]), h(0)) : E.action && (E.action(), n()));
+          const E = g[m];
+          E && (E.subCommands ? (N([...u, E.id]), f(0)) : E.action && (E.action(), n()));
         }
       }
     };
     return document.addEventListener("keydown", x), () => document.removeEventListener("keydown", x);
-  }, [r, n, g, f, m]), Q(() => {
+  }, [r, n, g, m, u]), Q(() => {
     const x = (_) => {
       b.current && !b.current.contains(_.target) && n();
     };
     return r && document.addEventListener("mousedown", x), () => document.removeEventListener("mousedown", x);
   }, [r, n]), Q(() => {
     if (!r) return;
-    p.current?.querySelector(`[data-index="${f}"]`)?.scrollIntoView({ block: "nearest" });
-  }, [f, r]), r ? /* @__PURE__ */ e("div", { className: "fixed inset-0 z-modal flex items-center justify-center bg-scrim", children: /* @__PURE__ */ c(
+    p.current?.querySelector(`[data-index="${m}"]`)?.scrollIntoView({ block: "nearest" });
+  }, [m, 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",
@@ -4964,8 +4965,8 @@ const Rn = ({
               type: "text",
               autoFocus: !0,
               placeholder: s?.searchPlaceholder || "Search commands...",
-              value: l,
-              onChange: (x) => u(x.target.value),
+              value: o,
+              onChange: (x) => h(x.target.value),
               className: "w-full border-0 bg-transparent py-2 text-text focus:outline-none"
             }
           )
@@ -4981,11 +4982,11 @@ const Rn = ({
                 "div",
                 {
                   "data-index": _,
-                  className: `flex items-center p-2 cursor-pointer rounded-md ${_ === f ? "bg-accent-soft text-accent" : "text-text"}`,
+                  className: `flex items-center p-2 cursor-pointer rounded-md ${_ === m ? "bg-accent-soft text-accent" : "text-text"}`,
                   onClick: () => {
-                    x.subCommands ? (N([...m, x.id]), h(0)) : x.action && (x.action(), n());
+                    x.subCommands ? (N([...u, x.id]), f(0)) : x.action && (x.action(), n());
                   },
-                  onMouseEnter: () => h(_),
+                  onMouseEnter: () => f(_),
                   children: [
                     x.icon && /* @__PURE__ */ e("span", { className: "mr-3", children: x.icon }),
                     /* @__PURE__ */ e("span", { className: "flex-grow", children: x.label }),
@@ -5082,27 +5083,27 @@ const Rn = ({
     background: n,
     radius: s,
     shadow: a,
-    border: o,
-    borderColor: l,
-    className: u,
-    children: m,
+    border: l,
+    borderColor: o,
+    className: h,
+    children: u,
     ...N
-  }, f) => /* @__PURE__ */ e(
+  }, m) => /* @__PURE__ */ e(
     "div",
     {
-      ref: f,
+      ref: m,
       className: d(
         t && Br[t],
         r && Hr[r],
         n && Vr[n],
         s && qr[s],
         a && Ur[a],
-        o && Wr[o],
-        l && Kr[l],
-        u
+        l && Wr[l],
+        o && Kr[o],
+        h
       ),
       ...N,
-      children: m
+      children: u
     }
   )
 );
@@ -5128,23 +5129,23 @@ function Hn({
   framework: n = "react",
   fallback: s,
   errorFallback: a,
-  componentProps: o,
-  className: l
+  componentProps: l,
+  className: o
 }) {
-  const u = se(null), [m, N] = R(!0), [f, h] = R(!1), [b, p] = R(null), C = se(null);
+  const h = se(null), [u, N] = R(!0), [m, f] = R(!1), [b, p] = R(null), C = se(null);
   se(null);
   const g = se(r);
   return g.current = r, Q(() => {
     let x = !0;
     return (async () => {
-      N(!0), h(!1), p(null);
+      N(!0), f(!1), p(null);
       try {
         const E = await g.current();
         if (!x) return;
         const W = E.component || E.default || E;
         p(n === "react" ? () => W : () => E);
       } catch (E) {
-        console.error(`[FederatedResource] Load failed: ${t}`, E), x && h(!0);
+        console.error(`[FederatedResource] Load failed: ${t}`, E), x && f(!0);
       } finally {
         x && N(!1);
       }
@@ -5152,26 +5153,26 @@ function Hn({
       x = !1;
     };
   }, [t, n]), Q(() => {
-    if (m || !b || n === "react") return;
-    const x = u.current;
+    if (u || !b || n === "react") return;
+    const x = h.current;
     if (x) {
       if (n === "svelte") {
-        const _ = b.default || b, E = new _({ target: x, props: o || {} });
+        const _ = b.default || b, E = new _({ target: x, props: l || {} });
         return C.current = E, () => E.$destroy();
       }
       if (b.mount) {
-        const _ = b.mount({ container: x, props: o || {} });
+        const _ = b.mount({ container: x, props: l || {} });
         return () => {
           typeof _ == "function" ? _() : b.unmount?.(x);
         };
       }
     }
-  }, [b, n, m]), Q(() => {
-    n === "svelte" && C.current && C.current.$set?.(o);
-  }, [o, n]), /* @__PURE__ */ c("div", { ref: u, className: l, style: { display: "contents" }, children: [
-    m && s,
-    !m && f && a,
-    n === "react" && !f && b && /* @__PURE__ */ e(b, { ...o })
+  }, [b, n, u]), Q(() => {
+    n === "svelte" && C.current && C.current.$set?.(l);
+  }, [l, n]), /* @__PURE__ */ c("div", { ref: h, className: o, style: { display: "contents" }, children: [
+    u && s,
+    !u && m && a,
+    n === "react" && !m && b && /* @__PURE__ */ e(b, { ...l })
   ] });
 }
 class Vn extends xt {
@@ -5247,7 +5248,7 @@ export {
   Ln as SettingsRow,
   In as SettingsSection,
   On as SidebarMenu,
-  jn as SourceChip,
+  Pn as SourceChip,
   yn as Spinner,
   Re as SplitButton,
   Nn as StatusDot,
@@ -5255,13 +5256,13 @@ export {
   ur as StorageInput,
   Ut as Switch,
   fn as TabBar,
-  je as Table,
+  Pe as Table,
   nr as Tabs,
   de as Text,
   De as TextArea,
   be as TextField,
   an as VideoSurface,
-  Pn as View,
+  jn as View,
   d as cn,
   rn as createSizes,
   tn as createVariants,