@opencxh/ui-kit 3.137.2 → 3.137.4

package/dist/index.js

@@ -1,7 +1,7 @@
 import { clsx as et } from "clsx";
 import { jsxs as i, jsx as e, Fragment as ve } from "react/jsx-runtime";
-import { VideoOff as tt, User as rt, MicOff as nt, Mic as st, X as we, ChevronDown as Se, ExternalLink as at, Calendar as lt, ChevronLeft as Ee, ChevronRight as ze, ChevronDownIcon as ot, Loader2 as ct, Search as Me, Check as Ie, ChevronUp as it, Ellipsis as dt, FileText as Te, HardDrive as Pe, ArrowLeft as ut, FolderPlus as mt, Upload as ft, Folder as je, Trash2 as ht, Plus as xt, Sparkles as bt, ImageOff as gt, Pencil as pt, ArrowUpRight as vt } from "lucide-react";
-import oe, { useRef as se, useEffect as X, forwardRef as xe, useState as O, useLayoutEffect as yt, useMemo as pe, useCallback as he, createContext as Nt, Component as wt } from "react";
+import { VideoOff as tt, User as rt, MicOff as nt, Mic as st, X as we, ChevronDown as Se, ExternalLink as at, Calendar as lt, ChevronLeft as Ee, ChevronRight as ze, ChevronDownIcon as ot, Loader2 as ct, Search as Me, Check as Ie, ChevronUp as it, Ellipsis as dt, FileText as Te, HardDrive as Pe, ArrowLeft as ut, FolderPlus as mt, Upload as ft, Folder as je, Trash2 as ht, Plus as xt, Sparkles as bt, ImageOff as pt, Pencil as gt, ArrowUpRight as vt } from "lucide-react";
+import oe, { useRef as se, useEffect as X, forwardRef as xe, useState as O, useLayoutEffect as yt, useMemo as ge, useCallback as he, createContext as Nt, Component as wt } from "react";
 import kt from "dompurify";
 import Ct from "react-markdown";
 import St from "remark-gfm";
@@ -255,8 +255,8 @@ function $e(t, r, { gap: n = 6, matchWidth: s = !1, placement: a = "bottom-start
     const u = () => {
       const m = r.current;
       if (!m) return;
-      const y = m.getBoundingClientRect(), x = window.innerHeight - y.bottom, h = y.top, b = a.startsWith("top"), v = b ? h < 200 && x > h : x < 200 && h > x, k = b !== v, g = { position: "fixed" };
-      k ? (g.bottom = window.innerHeight - y.top + n, g.maxHeight = Math.max(120, h - n * 2)) : (g.top = y.bottom + n, g.maxHeight = Math.max(120, x - n * 2)), a.endsWith("end") ? g.right = window.innerWidth - y.right : g.left = y.left, s && (g.width = y.width), o(g);
+      const y = m.getBoundingClientRect(), x = window.innerHeight - y.bottom, h = y.top, b = a.startsWith("top"), v = b ? h < 200 && x > h : x < 200 && h > x, k = b !== v, p = { position: "fixed" };
+      k ? (p.bottom = window.innerHeight - y.top + n, p.maxHeight = Math.max(120, h - n * 2)) : (p.top = y.bottom + n, p.maxHeight = Math.max(120, x - n * 2)), a.endsWith("end") ? p.right = window.innerWidth - y.right : p.left = y.left, s && (p.width = y.width), o(p);
     };
     return u(), window.addEventListener("scroll", u, !0), window.addEventListener("resize", u), () => {
       window.removeEventListener("scroll", u, !0), window.removeEventListener("resize", u);
@@ -276,17 +276,17 @@ const Ve = ({
   const [m, y] = O(!1), x = se(null), h = se(null), b = $e(m, h, { placement: n });
   X(() => {
     if (!m) return;
-    const g = ($) => {
+    const p = ($) => {
       x.current && !x.current.contains($.target) && y(!1);
     }, f = ($) => {
       $.key === "Escape" && y(!1);
     };
-    return document.addEventListener("mousedown", g), document.addEventListener("keydown", f), () => {
-      document.removeEventListener("mousedown", g), document.removeEventListener("keydown", f);
+    return document.addEventListener("mousedown", p), document.addEventListener("keydown", f), () => {
+      document.removeEventListener("mousedown", p), document.removeEventListener("keydown", f);
     };
   }, [m]);
-  const v = (g) => {
-    g.stopPropagation(), !o && y((f) => !f);
+  const v = (p) => {
+    p.stopPropagation(), !o && y((f) => !f);
   }, k = () => y(!1);
   return /* @__PURE__ */ i("div", { ref: x, className: d("relative inline-flex", a), children: [
     /* @__PURE__ */ e(
@@ -358,7 +358,7 @@ function Lt({
   title: b,
   className: v
 }) {
-  const k = l && !!y, g = s === "pill" ? "rounded-full" : "rounded-md", f = _t({ active: l, tone: n, shape: s, size: a, className: v }), $ = /* @__PURE__ */ i(ve, { children: [
+  const k = l && !!y, p = s === "pill" ? "rounded-full" : "rounded-md", f = _t({ active: l, tone: n, shape: s, size: a, className: v }), $ = /* @__PURE__ */ i(ve, { children: [
     r,
     t,
     o && /* @__PURE__ */ e(Q, { icon: Se, size: "xs" })
@@ -368,7 +368,7 @@ function Lt({
       type: "button",
       "aria-label": x,
       onClick: y,
-      className: d("inline-flex h-full items-center pr-3 focus-visible:outline-none focus-visible:focus-ring", g),
+      className: d("inline-flex h-full items-center pr-3 focus-visible:outline-none focus-visible:focus-ring", p),
       children: /* @__PURE__ */ e(Q, { icon: we, size: "xs" })
     }
   );
@@ -609,7 +609,7 @@ const Ht = {
     id: m,
     ...y
   }, x) => {
-    const h = oe.useId(), b = m || `checkbox-${h}`, v = !!n, k = oe.useRef(null), g = oe.useCallback(
+    const h = oe.useId(), b = m || `checkbox-${h}`, v = !!n, k = oe.useRef(null), p = oe.useCallback(
       (f) => {
         k.current = f, typeof x == "function" ? x(f) : x && typeof x == "object" && (x.current = f);
       },
@@ -622,7 +622,7 @@ const Ht = {
         /* @__PURE__ */ e(
           "input",
           {
-            ref: g,
+            ref: p,
             id: b,
             type: "checkbox",
             "aria-invalid": v || void 0,
@@ -677,7 +677,7 @@ const Ut = () => /* @__PURE__ */ e(Q, { icon: lt, size: "md", color: "current" }
   format: y = "MM/dd/yyyy",
   withTime: x = !1
 }, h) => {
-  const [b, v] = O(!1), [k, g] = O(() => t || /* @__PURE__ */ new Date()), f = se(null), $ = se(null), C = $e(b, $);
+  const [b, v] = O(!1), [k, p] = O(() => t || /* @__PURE__ */ new Date()), f = se(null), $ = se(null), C = $e(b, $);
   X(() => {
     const c = (S) => {
       f.current && !f.current.contains(S.target) && v(!1);
@@ -688,16 +688,16 @@ const Ut = () => /* @__PURE__ */ e(Q, { icon: lt, size: "md", color: "current" }
   }, [b]);
   const q = (c) => {
     if (!c) return "";
-    const S = c.getDate().toString().padStart(2, "0"), p = (c.getMonth() + 1).toString().padStart(2, "0"), _ = c.getFullYear(), N = y === "dd/MM/yyyy" ? `${S}/${p}/${_}` : y === "yyyy-MM-dd" ? `${_}-${p}-${S}` : `${p}/${S}/${_}`;
+    const S = c.getDate().toString().padStart(2, "0"), g = (c.getMonth() + 1).toString().padStart(2, "0"), _ = c.getFullYear(), N = y === "dd/MM/yyyy" ? `${S}/${g}/${_}` : y === "yyyy-MM-dd" ? `${_}-${g}-${S}` : `${g}/${S}/${_}`;
     return x ? `${N} ${T(c)}` : N;
   }, T = (c) => `${c.getHours().toString().padStart(2, "0")}:${c.getMinutes().toString().padStart(2, "0")}`, G = (c) => {
-    const [S, p] = c.split(":").map(Number);
-    if (Number.isNaN(S) || Number.isNaN(p)) return;
+    const [S, g] = c.split(":").map(Number);
+    if (Number.isNaN(S) || Number.isNaN(g)) return;
     const _ = t ? new Date(t) : /* @__PURE__ */ new Date();
-    _.setHours(S, p, 0, 0), r?.(_);
+    _.setHours(S, g, 0, 0), r?.(_);
   }, V = () => {
-    const c = k.getFullYear(), S = k.getMonth(), p = new Date(c, S, 1), _ = new Date(p);
-    _.setDate(_.getDate() - p.getDay());
+    const c = k.getFullYear(), S = k.getMonth(), g = new Date(c, S, 1), _ = new Date(g);
+    _.setDate(_.getDate() - g.getDay());
     const N = [], U = new Date(_);
     for (let re = 0; re < 42; re++)
       N.push(new Date(U)), U.setDate(U.getDate() + 1);
@@ -705,16 +705,16 @@ const Ut = () => /* @__PURE__ */ e(Q, { icon: lt, size: "md", color: "current" }
   }, I = (c) => {
     if (c.getMonth() === k.getMonth() && !(u && c < u) && !(m && c > m)) {
       if (x) {
-        const p = new Date(c);
-        p.setHours(t?.getHours() ?? 0, t?.getMinutes() ?? 0, 0, 0), r?.(p);
+        const g = new Date(c);
+        g.setHours(t?.getHours() ?? 0, t?.getMinutes() ?? 0, 0, 0), r?.(g);
         return;
       }
       r?.(c), v(!1);
     }
   }, H = () => {
-    g(new Date(k.getFullYear(), k.getMonth() - 1, 1));
+    p(new Date(k.getFullYear(), k.getMonth() - 1, 1));
   }, te = () => {
-    g(new Date(k.getFullYear(), k.getMonth() + 1, 1));
+    p(new Date(k.getFullYear(), k.getMonth() + 1, 1));
   }, J = () => {
     r?.(null), v(!1);
   }, K = d(
@@ -797,7 +797,7 @@ const Ut = () => /* @__PURE__ */ e(Q, { icon: lt, size: "md", color: "current" }
       ] }),
       /* @__PURE__ */ e("div", { className: "grid grid-cols-7 gap-1 mb-2", children: ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"].map((c) => /* @__PURE__ */ e("div", { className: "text-xs font-medium text-text-muted text-center py-1", children: c }, c)) }),
       /* @__PURE__ */ e("div", { className: "grid grid-cols-7 gap-1", children: ce.map((c, S) => {
-        const p = c.getMonth() === k.getMonth(), _ = t && c.toDateString() === t.toDateString(), N = c.toDateString() === (/* @__PURE__ */ new Date()).toDateString(), U = !p || u && c < u || m && c > m;
+        const g = c.getMonth() === k.getMonth(), _ = t && c.toDateString() === t.toDateString(), N = c.toDateString() === (/* @__PURE__ */ new Date()).toDateString(), U = !g || u && c < u || m && c > m;
         return /* @__PURE__ */ e(
           "button",
           {
@@ -806,7 +806,7 @@ const Ut = () => /* @__PURE__ */ e(Q, { icon: lt, size: "md", color: "current" }
             className: d(
               "w-8 h-8 text-sm rounded transition-colors duration-fast",
               {
-                "text-text hover:bg-surface-hover": p && !_ && !U,
+                "text-text hover:bg-surface-hover": g && !_ && !U,
                 "bg-accent text-accent-fg": _,
                 "bg-surface-hover text-text": N && !_,
                 "text-text-muted cursor-not-allowed": U
@@ -872,7 +872,7 @@ const Ut = () => /* @__PURE__ */ e(Q, { icon: lt, size: "md", color: "current" }
     searchable: b,
     multiple: v,
     value: k,
-    onChange: g,
+    onChange: p,
     allowCreate: f,
     onCreateOption: $,
     ...C
@@ -889,7 +889,7 @@ const Ut = () => /* @__PURE__ */ e(Q, { icon: lt, size: "md", color: "current" }
         (z) => ke(z.value) === ke(A) || ke(z.label) === ke(A)
       ),
       []
-    ), p = oe.useCallback(
+    ), g = oe.useCallback(
       (D, A) => {
         const z = [...D], F = (j) => {
           const B = (j ?? "").trim();
@@ -904,15 +904,15 @@ const Ut = () => /* @__PURE__ */ e(Q, { icon: lt, size: "md", color: "current" }
         const A = [...o];
         return D.forEach((z) => {
           !S(A, z.value) && !S(A, z.label) && A.push(z);
-        }), p(A, k);
+        }), g(A, k);
       });
-    }, [o, k, p, S]);
+    }, [o, k, g, S]);
     const _ = (D) => {
       if (v) {
         const A = Array.isArray(k) ? k : [], z = A.includes(D) ? A.filter((F) => F !== D) : [...A, D];
-        g?.(z);
+        p?.(z);
       } else
-        g?.(D), I(!1), te("");
+        p?.(D), I(!1), te("");
     }, N = v ? null : w.find((D) => D.value === k), U = v ? w.filter(
       (D) => Array.isArray(k) && k.includes(D.value)
     ) : [], re = b && H ? w.filter(
@@ -1025,7 +1025,7 @@ const Ut = () => /* @__PURE__ */ e(Q, { icon: lt, size: "md", color: "current" }
                   {
                     className: "cursor-pointer px-3 py-1.5 text-sm text-text-muted hover:bg-surface-hover",
                     onClick: () => {
-                      g?.(""), I(!1);
+                      p?.(""), I(!1);
                     },
                     children: u
                   }
@@ -1098,12 +1098,12 @@ const Jt = {
     id: h,
     ...b
   }, v) => {
-    const k = oe.useId(), g = h || `textfield-${k}`, f = !!n, $ = n || r ? `${g}-description` : void 0;
+    const k = oe.useId(), p = h || `textfield-${k}`, f = !!n, $ = n || r ? `${p}-description` : void 0;
     return /* @__PURE__ */ i("div", { className: d("flex flex-col", a && "w-full", m), children: [
       t && /* @__PURE__ */ e(
         "label",
         {
-          htmlFor: g,
+          htmlFor: p,
           className: d(
             Ue,
             f ? "text-danger-fg" : "text-text-muted",
@@ -1118,7 +1118,7 @@ const Jt = {
           "input",
           {
             ref: v,
-            id: g,
+            id: p,
             "aria-invalid": f || void 0,
             "aria-describedby": $,
             className: d(
@@ -1197,7 +1197,7 @@ function Yt({
     )
   ] });
 }
-const ge = (...t) => t.filter(Boolean).join(" "), Xt = (t) => /* @__PURE__ */ e(Me, { ...t, strokeWidth: 1.5, "aria-hidden": !0 }), Zt = (t) => /* @__PURE__ */ e(Se, { ...t, strokeWidth: 1.5, "aria-hidden": !0 }), Qt = {
+const pe = (...t) => t.filter(Boolean).join(" "), Xt = (t) => /* @__PURE__ */ e(Me, { ...t, strokeWidth: 1.5, "aria-hidden": !0 }), Zt = (t) => /* @__PURE__ */ e(Se, { ...t, strokeWidth: 1.5, "aria-hidden": !0 }), Qt = {
   sm: "h-control-sm px-3 text-sm",
   md: "h-control-md px-3 text-base",
   lg: "h-control-lg px-3 text-base",
@@ -1224,7 +1224,7 @@ const ge = (...t) => t.filter(Boolean).join(" "), Xt = (t) => /* @__PURE__ */ e(
     onRemoteSearch: b,
     onSelect: v,
     debounceTime: k = 500,
-    showAllOnOpen: g = !1,
+    showAllOnOpen: p = !1,
     value: f,
     onChange: $,
     ...C
@@ -1233,13 +1233,13 @@ const ge = (...t) => t.filter(Boolean).join(" "), Xt = (t) => /* @__PURE__ */ e(
     X(() => {
       f !== void 0 && te(f);
     }, [f]);
-    const p = pe(() => {
-      if (g && !c || !H) return h;
+    const g = ge(() => {
+      if (p && !c || !H) return h;
       const P = String(H).toLowerCase();
       return h.filter(
         (D) => String(D.label).toLowerCase().includes(P)
       );
-    }, [H, h, g, c]);
+    }, [H, h, p, c]);
     X(() => {
       if (!b || !H) {
         w(!1);
@@ -1271,11 +1271,11 @@ const ge = (...t) => t.filter(Boolean).join(" "), Xt = (t) => /* @__PURE__ */ e(
       te(P.label), K(!1), S(!1), v && v(P.value);
     }, U = () => {
       (h.length > 0 || b) && (K(!0), S(!1));
-    }, re = o || ce, ee = J && (p.length > 0 || re), Y = pe(() => q || I, [q]);
+    }, re = o || ce, ee = J && (g.length > 0 || re), Y = ge(() => q || I, [q]);
     return /* @__PURE__ */ i(
       "div",
       {
-        className: ge(
+        className: pe(
           "flex flex-col",
           a ? "w-full" : "",
           u || "",
@@ -1287,7 +1287,7 @@ const ge = (...t) => t.filter(Boolean).join(" "), Xt = (t) => /* @__PURE__ */ e(
             "label",
             {
               htmlFor: T,
-              className: ge(
+              className: pe(
                 "block text-sm font-medium mb-1",
                 G ? "text-danger-fg" : "text-text",
                 m || ""
@@ -1296,7 +1296,7 @@ const ge = (...t) => t.filter(Boolean).join(" "), Xt = (t) => /* @__PURE__ */ e(
             }
           ),
           /* @__PURE__ */ i("div", { className: "relative", children: [
-            l && /* @__PURE__ */ e("div", { className: "absolute left-0 pl-3 flex items-center pointer-events-none h-full", children: /* @__PURE__ */ e("span", { className: ge("text-text-muted", _e[s]), children: l }) }),
+            l && /* @__PURE__ */ e("div", { className: "absolute left-0 pl-3 flex items-center pointer-events-none h-full", children: /* @__PURE__ */ e("span", { className: pe("text-text-muted", _e[s]), children: l }) }),
             /* @__PURE__ */ e(
               "input",
               {
@@ -1305,7 +1305,7 @@ const ge = (...t) => t.filter(Boolean).join(" "), Xt = (t) => /* @__PURE__ */ e(
                 value: H,
                 onChange: _,
                 onFocus: U,
-                className: ge(
+                className: pe(
                   // Base styles
                   "block w-full rounded-tile border bg-surface-input transition-colors duration-fast ease-out",
                   "placeholder:text-text-subtle focus-visible:outline-none focus-visible:focus-ring",
@@ -1328,7 +1328,7 @@ const ge = (...t) => t.filter(Boolean).join(" "), Xt = (t) => /* @__PURE__ */ e(
               /* @__PURE__ */ e(
                 ct,
                 {
-                  className: ge("animate-spin text-info-fg", _e[s]),
+                  className: pe("animate-spin text-info-fg", _e[s]),
                   "aria-hidden": !0
                 }
               )
@@ -1337,7 +1337,7 @@ const ge = (...t) => t.filter(Boolean).join(" "), Xt = (t) => /* @__PURE__ */ e(
               /* @__PURE__ */ e(
                 Zt,
                 {
-                  className: ge(
+                  className: pe(
                     "text-text-muted cursor-pointer transition-transform",
                     _e[s],
                     J ? "rotate-180" : "rotate-0"
@@ -1354,7 +1354,7 @@ const ge = (...t) => t.filter(Boolean).join(" "), Xt = (t) => /* @__PURE__ */ e(
             {
               className: "absolute z-10 mt-1 w-full bg-surface border border-border rounded-lg shadow-lg max-h-60 overflow-auto top-full",
               role: "listbox",
-              children: p.length > 0 ? p.map((P) => /* @__PURE__ */ e(
+              children: g.length > 0 ? g.map((P) => /* @__PURE__ */ e(
                 "li",
                 {
                   className: "px-4 py-2 cursor-pointer text-text hover:bg-accent-soft hover:text-accent transition-colors",
@@ -1370,7 +1370,7 @@ const ge = (...t) => t.filter(Boolean).join(" "), Xt = (t) => /* @__PURE__ */ e(
           (n || r) && /* @__PURE__ */ e(
             "p",
             {
-              className: ge(
+              className: pe(
                 "mt-1 text-xs",
                 G ? "text-danger-fg" : "text-text-muted"
               ),
@@ -1566,7 +1566,7 @@ const nr = ({
   showCheck: u = !0,
   header: m
 }) => {
-  const [y, x] = O(!1), [h, b] = O(null), [v, k] = O({ top: 0, left: 0 }), g = se(null), f = se(null), $ = se(null), C = se(null), q = $e(y, f, { placement: a }), T = se(null), G = () => Array.from(
+  const [y, x] = O(!1), [h, b] = O(null), [v, k] = O({ top: 0, left: 0 }), p = se(null), f = se(null), $ = se(null), C = se(null), q = $e(y, f, { placement: a }), T = se(null), G = () => Array.from(
     C.current?.querySelectorAll("button[data-option-value]:not(:disabled)") ?? []
   );
   X(() => {
@@ -1574,15 +1574,15 @@ const nr = ({
   }, [y]);
   const V = (c) => {
     if (!["ArrowDown", "ArrowUp", "Home", "End"].includes(c.key)) return;
-    const p = G();
-    if (p.length === 0) return;
+    const g = G();
+    if (g.length === 0) return;
     c.preventDefault();
-    const _ = p.indexOf(document.activeElement), N = c.key === "Home" ? 0 : c.key === "End" ? p.length - 1 : c.key === "ArrowDown" ? (_ + 1) % p.length : (_ - 1 + p.length) % p.length;
-    p[N]?.focus();
+    const _ = g.indexOf(document.activeElement), N = c.key === "Home" ? 0 : c.key === "End" ? g.length - 1 : c.key === "ArrowDown" ? (_ + 1) % g.length : (_ - 1 + g.length) % g.length;
+    g[N]?.focus();
   };
   X(() => {
     const c = (S) => {
-      g.current && (!g.current.contains(S.target) || $.current && !$.current.contains(S.target)) && (x(!1), b(null), T.current && (clearTimeout(T.current), T.current = null));
+      p.current && (!p.current.contains(S.target) || $.current && !$.current.contains(S.target)) && (x(!1), b(null), T.current && (clearTimeout(T.current), T.current = null));
     };
     return y && document.addEventListener("mousedown", c), () => {
       document.removeEventListener("mousedown", c);
@@ -1595,8 +1595,8 @@ const nr = ({
       document.removeEventListener("keydown", c);
     };
   }, [y]), X(() => {
-    if (h && g.current) {
-      const c = g.current.querySelector(
+    if (h && p.current) {
+      const c = p.current.querySelector(
         `[data-option-value="${h}"]`
       );
       if (c) {
@@ -1612,16 +1612,16 @@ const nr = ({
   }, []);
   const I = (c) => {
     c.stopPropagation(), !l && (x(!y), b(null), T.current && (clearTimeout(T.current), T.current = null));
-  }, H = (c, S, p) => {
-    c.stopPropagation(), !S.disabled && !S.divider && (!S.children || S.children.length === 0) && (s?.(S.value, p), x(!1), b(null));
+  }, H = (c, S, g) => {
+    c.stopPropagation(), !S.disabled && !S.divider && (!S.children || S.children.length === 0) && (s?.(S.value, g), x(!1), b(null));
   }, te = (c) => {
     T.current && (clearTimeout(T.current), T.current = null), c.children && c.children.length > 0 ? b(c.value) : b(null);
   }, J = (c) => {
     c.children && c.children.length > 0 ? T.current = setTimeout(() => {
       b(null);
     }, 150) : b(null);
-  }, K = (c, S, p) => {
-    c.stopPropagation(), !S.disabled && !S.divider && (s?.(S.value, p), x(!1), b(null));
+  }, K = (c, S, g) => {
+    c.stopPropagation(), !S.disabled && !S.divider && (s?.(S.value, g), x(!1), b(null));
   }, ce = d(
     "fixed z-overlay min-w-menu bg-surface rounded-lg shadow-overlay border border-border",
     "max-h-60 overflow-auto"
@@ -1632,7 +1632,7 @@ const nr = ({
   return /* @__PURE__ */ i(
     "div",
     {
-      ref: g,
+      ref: p,
       className: d(
         "relative flex flex-row items-center justify-center rounded-lg hover:bg-surface-hover",
         o
@@ -1663,14 +1663,14 @@ const nr = ({
                 },
                 `divider-${S}`
               );
-            const p = c.children && c.children.length > 0, _ = h === c.value;
+            const g = c.children && c.children.length > 0, _ = h === c.value;
             return /* @__PURE__ */ i("div", { className: "relative group", children: [
               /* @__PURE__ */ i(
                 "button",
                 {
                   "data-option-value": c.value,
                   role: "menuitem",
-                  "aria-haspopup": p ? "menu" : void 0,
+                  "aria-haspopup": g ? "menu" : void 0,
                   onClick: (N) => H(N, c),
                   onMouseEnter: () => te(c),
                   onMouseLeave: () => J(c),
@@ -1679,7 +1679,7 @@ const nr = ({
                     "flex w-full items-center justify-between rounded-md px-3 py-1.5 text-sm text-text transition-colors duration-fast ease-out hover:bg-surface-hover focus-visible:outline-none focus-visible:focus-ring",
                     {
                       "opacity-50 cursor-not-allowed": c.disabled,
-                      "bg-surface-hover": _ && p
+                      "bg-surface-hover": _ && g
                     }
                   ),
                   children: [
@@ -1692,12 +1692,12 @@ const nr = ({
                     ] }),
                     /* @__PURE__ */ i("div", { className: "flex items-center space-x-2", children: [
                       u && n === c.value && /* @__PURE__ */ e(Ie, { className: "size-icon-md shrink-0 text-success-fg", "aria-hidden": !0 }),
-                      p && /* @__PURE__ */ e("span", { className: "text-text-muted text-xs", children: "▶" })
+                      g && /* @__PURE__ */ e("span", { className: "text-text-muted text-xs", children: "▶" })
                     ] })
                   ]
                 }
               ),
-              p && _ && /* @__PURE__ */ e(
+              g && _ && /* @__PURE__ */ e(
                 "div",
                 {
                   ref: $,
@@ -1760,9 +1760,9 @@ const nr = ({
             ] }, c.value);
           }),
           (() => {
-            const c = r.reduce((S, p) => {
-              if (p.divider) return S;
-              const _ = p.children ? p.children.filter((N) => !N.divider).length : 0;
+            const c = r.reduce((S, g) => {
+              if (g.divider) return S;
+              const _ = g.children ? g.children.filter((N) => !N.divider).length : 0;
               return S + 1 + _;
             }, 0);
             return c > 1 && /* @__PURE__ */ e("div", { className: "border-t border-border mt-2 pt-2", children: /* @__PURE__ */ i("div", { className: "text-xs text-text-muted px-3 py-1", children: [
@@ -1808,7 +1808,7 @@ const nr = ({
   sm: "p-2",
   md: "px-5 py-4",
   lg: "p-6"
-}, gn = ({
+}, pn = ({
   actions: t = [],
   onBack: r,
   backLabel: n = "Back",
@@ -1828,7 +1828,7 @@ const nr = ({
   ),
   l && /* @__PURE__ */ e("div", { className: "min-w-0 flex-1", children: l }),
   /* @__PURE__ */ e(Je, { actions: t, className: d(!l && "ml-auto") })
-] }), pn = (t) => (r) => t(r instanceof Date ? r : null), vn = (t) => (r) => t(typeof r == "string" ? r : ""), ar = {
+] }), gn = (t) => (r) => t(r instanceof Date ? r : null), vn = (t) => (r) => t(typeof r == "string" ? r : ""), ar = {
   none: "px-0",
   sm: "px-2",
   md: "px-3.5",
@@ -1913,7 +1913,7 @@ const cr = (t) => {
   onRowClick: b,
   selectable: v = !1,
   selectedRows: k = [],
-  onSelectionChange: g,
+  onSelectionChange: p,
   getRowKey: f = (te, J) => J,
   emptyContent: $,
   footerSummary: C,
@@ -1927,10 +1927,10 @@ const cr = (t) => {
   const [te, J] = O(""), K = l !== void 0, ce = K ? l : te, w = o ?? J, [c, S] = O({
     column: null,
     direction: null
-  }), [p, _] = O({
+  }), [g, _] = O({
     page: 0,
     pageSize: x
-  }), N = se(null), U = pe(() => {
+  }), N = se(null), U = ge(() => {
     let E = t;
     if (s && !K && ce.trim()) {
       const W = r.filter(
@@ -1949,7 +1949,7 @@ const cr = (t) => {
         return String(R || "") === W.value;
       }));
     }), E;
-  }, [t, ce, K, r, s, u]), re = pe(() => {
+  }, [t, ce, K, r, s, u]), re = ge(() => {
     if (!c.column || !c.direction) return U;
     const E = r.find((W) => W.id === c.column);
     return E ? [...U].sort((W, le) => {
@@ -1957,11 +1957,11 @@ const cr = (t) => {
       let ue = 0;
       return ie < R ? ue = -1 : ie > R && (ue = 1), c.direction === "desc" ? -ue : ue;
     }) : U;
-  }, [U, c, r]), ee = pe(() => {
+  }, [U, c, r]), ee = ge(() => {
     if (!y) return re;
-    const E = p.page * p.pageSize, W = E + p.pageSize;
+    const E = g.page * g.pageSize, W = E + g.pageSize;
     return re.slice(E, W);
-  }, [re, p, y]), Y = he(
+  }, [re, g, y]), Y = he(
     (E) => {
       r.find((le) => le.id === E)?.sortable && S((le) => le.column !== E ? { column: E, direction: "asc" } : le.direction === "asc" ? { column: E, direction: "desc" } : { column: null, direction: null });
     },
@@ -1970,25 +1970,25 @@ const cr = (t) => {
     _((W) => ({ ...W, page: E }));
   }, []), D = he(
     (E, W) => {
-      if (!g) return;
+      if (!p) return;
       const le = f(E, 0);
-      g(W ? [...k, E] : k.filter(
+      p(W ? [...k, E] : k.filter(
         (ie, R) => f(k[R], R) !== le
       ));
     },
-    [k, g, f]
+    [k, p, f]
   ), A = he(
     (E) => {
-      g && g(E ? [...ee] : []);
+      p && p(E ? [...ee] : []);
     },
-    [ee, g]
+    [ee, p]
   );
   X(() => {
     _((E) => ({ ...E, page: 0 }));
   }, [ce, c]), X(() => {
     _((E) => ({ ...E, page: 0 }));
   }, [u.map((E) => E.value).join(",")]);
-  const z = re.length, F = Math.ceil(z / p.pageSize), j = p.page * p.pageSize + 1, B = Math.min(j + p.pageSize - 1, z), M = ee.length > 0 && ee.every((E) => {
+  const z = re.length, F = Math.ceil(z / g.pageSize), j = g.page * g.pageSize + 1, B = Math.min(j + g.pageSize - 1, z), M = ee.length > 0 && ee.every((E) => {
     const W = f(E, 0);
     return k.some(
       (le, ie) => f(le, ie) === W
@@ -2168,23 +2168,23 @@ const cr = (t) => {
             variant: "ghost",
             iconOnly: !0,
             "aria-label": "Previous page",
-            onClick: () => P(p.page - 1),
-            disabled: p.page === 0,
+            onClick: () => P(g.page - 1),
+            disabled: g.page === 0,
             children: /* @__PURE__ */ e(Q, { icon: Ee, size: "md", color: "current" })
           }
         ),
-        or(p.page, F).map(
+        or(g.page, F).map(
           (E, W) => E === "gap" ? /* @__PURE__ */ e("span", { className: "px-1 text-text-subtle", children: "…" }, `gap-${W}`) : /* @__PURE__ */ e(
             "button",
             {
               type: "button",
-              "aria-current": E === p.page ? "page" : void 0,
+              "aria-current": E === g.page ? "page" : void 0,
               onClick: () => P(E),
               className: d(
                 "h-control-xs min-w-6 cursor-pointer rounded-sm px-1.5 tabular-nums",
                 "transition-colors duration-fast ease-out",
                 "focus-visible:outline-none focus-visible:focus-ring",
-                E === p.page ? "bg-surface-sunk font-semibold text-text" : "text-text-muted hover:bg-surface-hover hover:text-text"
+                E === g.page ? "bg-surface-sunk font-semibold text-text" : "text-text-muted hover:bg-surface-hover hover:text-text"
               ),
               children: E + 1
             },
@@ -2198,8 +2198,8 @@ const cr = (t) => {
             variant: "ghost",
             iconOnly: !0,
             "aria-label": "Next page",
-            onClick: () => P(p.page + 1),
-            disabled: p.page >= F - 1,
+            onClick: () => P(g.page + 1),
+            disabled: g.page >= F - 1,
             children: /* @__PURE__ */ e(Q, { icon: ze, size: "md", color: "current" })
           }
         )
@@ -2249,12 +2249,12 @@ const cr = (t) => {
 }) => {
   const [u, m] = O(
     r || n || t[0]?.id || ""
-  ), y = n || u, x = (g) => {
-    s ? s(g) : m(g);
+  ), y = n || u, x = (p) => {
+    s ? s(p) : m(p);
   }, h = {
     activeTab: y,
     setActiveTab: x
-  }, b = t.find((g) => g.id === y), v = d(
+  }, b = t.find((p) => p.id === y), v = d(
     "flex",
     {
       "border-b border-border px-2": a === "default" || a === "underline",
@@ -2263,7 +2263,7 @@ const cr = (t) => {
       "space-x-8": a === "default" || a === "underline"
     },
     o
-  ), k = (g, f) => {
+  ), k = (p, f) => {
     const $ = "transition-colors duration-fast font-medium", C = {
       "text-xs px-2 py-1": l === "sm",
       "text-sm px-3 py-2": l === "md",
@@ -2276,12 +2276,12 @@ const cr = (t) => {
       // Underline variant
       "border-b-2 pb-2": a === "underline"
     }, T = {
-      "opacity-50 cursor-not-allowed": g.disabled,
-      "cursor-pointer": !g.disabled
+      "opacity-50 cursor-not-allowed": p.disabled,
+      "cursor-pointer": !p.disabled
     }, G = f ? {
       "border-accent-border text-text": a === "default" || a === "underline",
       "bg-surface text-text shadow-none": a === "pills"
-    } : {}, V = !f && !g.disabled ? {
+    } : {}, V = !f && !p.disabled ? {
       "border-transparent text-text-muted hover:text-text": a === "default",
       "text-text-muted hover:text-text": a === "pills",
       "border-transparent text-text-muted hover:text-text hover:border-border": a === "underline"
@@ -2289,22 +2289,22 @@ const cr = (t) => {
     return d($, C, q, T, G, V);
   };
   return /* @__PURE__ */ e(ir.Provider, { value: h, children: /* @__PURE__ */ i("div", { children: [
-    /* @__PURE__ */ e("div", { className: v, role: "tablist", children: t.map((g) => /* @__PURE__ */ e(
+    /* @__PURE__ */ e("div", { className: v, role: "tablist", children: t.map((p) => /* @__PURE__ */ e(
       "button",
       {
         type: "button",
         role: "tab",
-        "aria-selected": y === g.id,
-        "aria-controls": `tabpanel-${g.id}`,
-        disabled: g.disabled,
-        onClick: () => !g.disabled && x(g.id),
-        className: k(g, y === g.id),
+        "aria-selected": y === p.id,
+        "aria-controls": `tabpanel-${p.id}`,
+        disabled: p.disabled,
+        onClick: () => !p.disabled && x(p.id),
+        className: k(p, y === p.id),
         children: /* @__PURE__ */ i("span", { className: "flex items-center gap-2", children: [
-          g.label,
-          g.badge && /* @__PURE__ */ e("span", { className: "inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-surface-hover text-text-muted", children: g.badge })
+          p.label,
+          p.badge && /* @__PURE__ */ e("span", { className: "inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-surface-hover text-text-muted", children: p.badge })
         ] })
       },
-      g.id
+      p.id
     )) }),
     b?.content && /* @__PURE__ */ e(
       "div",
@@ -2340,8 +2340,8 @@ function Ye({
   const h = se(null), b = se(null);
   X(() => {
     if (!t || !l) return;
-    const k = (g) => {
-      g.key === "Escape" && r();
+    const k = (p) => {
+      p.key === "Escape" && r();
     };
     return document.addEventListener("keydown", k), () => document.removeEventListener("keydown", k);
   }, [t, l, r]), X(() => (t ? (b.current = document.activeElement, h.current && h.current.focus(), document.body.style.overflow = "hidden") : (b.current && b.current.focus(), document.body.style.overflow = ""), () => {
@@ -2450,16 +2450,16 @@ const mr = {
   children: h,
   ...b
 }) => {
-  const v = y || gr(t), k = t === "caption", g = t === "label", f = t === "code", $ = d(
+  const v = y || pr(t), k = t === "caption", p = t === "label", f = t === "code", $ = d(
     "font-sans",
     // Variant — caption and label pin their own size/weight
     k && "text-xs text-text-subtle",
-    g && "text-xs font-semibold uppercase tracking-label text-text-subtle",
+    p && "text-xs font-semibold uppercase tracking-label text-text-subtle",
     f && "font-mono text-sm rounded-sm bg-surface-hover px-1 py-0.5",
     // Size — only where the variant does not pin it
-    !k && !g && !f && mr[r],
+    !k && !p && !f && mr[r],
     // Weight — label owns its weight
-    !g && fr[n],
+    !p && fr[n],
     hr[s],
     xr[a],
     // Line height only overrides the body variant
@@ -2471,7 +2471,7 @@ const mr = {
   );
   return /* @__PURE__ */ e(v, { className: $, ...b, children: h });
 };
-function gr(t) {
+function pr(t) {
   return {
     body: "p",
     caption: "span",
@@ -2479,7 +2479,7 @@ function gr(t) {
     code: "code"
   }[t] || "p";
 }
-const pr = ({
+const gr = ({
   value: t,
   onChange: r,
   label: n,
@@ -2493,9 +2493,9 @@ const pr = ({
   onDownloadFile: x,
   onRegisterFile: h
 }) => {
-  const [b, v] = O(!1), [k, g] = O([]), [f, $] = O(null), [C, q] = O("/"), [T, G] = O([]), [V, I] = O(!1), [H, te] = O(""), [J, K] = O(
+  const [b, v] = O(!1), [k, p] = O([]), [f, $] = O(null), [C, q] = O("/"), [T, G] = O([]), [V, I] = O(!1), [H, te] = O(""), [J, K] = O(
     typeof t == "object" ? t : null
-  ), [ce, w] = O(!1), [c, S] = O(""), p = se(null);
+  ), [ce, w] = O(!1), [c, S] = O(""), g = se(null);
   X(() => {
     b && _();
   }, [b]), X(() => {
@@ -2505,7 +2505,7 @@ const pr = ({
     I(!0);
     try {
       const M = await m?.();
-      M?.data && g(M.data);
+      M?.data && p(M.data);
     } catch (M) {
       console.error("Failed to load mounts", M);
     } finally {
@@ -2601,7 +2601,7 @@ const pr = ({
     }
   }, P = (M) => {
     M.stopPropagation(), K(null), r(null);
-  }, D = pe(() => {
+  }, D = ge(() => {
     const M = /* @__PURE__ */ new Set(), L = [];
     return T.forEach((Z) => {
       if (Z.type === "folder") {
@@ -2619,7 +2619,7 @@ const pr = ({
   }, z = () => {
     const M = C.split("/").filter((L) => L !== "");
     M.pop(), M.length === 0 ? q("/") : q(`${M.join("/")}/`);
-  }, F = pe(() => {
+  }, F = ge(() => {
     const M = D.folders.map((L) => ({
       id: `folder-${L}`,
       name: L,
@@ -2775,7 +2775,7 @@ const pr = ({
                         ae,
                         {
                           variant: "primary",
-                          onClick: () => p.current?.click(),
+                          onClick: () => g.current?.click(),
                           leftIcon: /* @__PURE__ */ e(Q, { icon: ft, size: "xs" }),
                           loading: V,
                           children: "Upload"
@@ -2786,7 +2786,7 @@ const pr = ({
                         {
                           type: "file",
                           className: "hidden",
-                          ref: p,
+                          ref: g,
                           onChange: re,
                           accept: o
                         }
@@ -2880,7 +2880,7 @@ const pr = ({
     rows: x = 4,
     ...h
   }, b) => {
-    const v = oe.useId(), k = y || `textarea-${v}`, g = !!n, f = n || r ? `${k}-description` : void 0;
+    const v = oe.useId(), k = y || `textarea-${v}`, p = !!n, f = n || r ? `${k}-description` : void 0;
     return /* @__PURE__ */ i("div", { className: d("flex flex-col", a && "w-full", o), children: [
       t && /* @__PURE__ */ e(
         "label",
@@ -2888,7 +2888,7 @@ const pr = ({
           htmlFor: k,
           className: d(
             Ue,
-            g ? "text-danger-fg" : "text-text-muted",
+            p ? "text-danger-fg" : "text-text-muted",
             u
           ),
           children: t
@@ -2901,13 +2901,13 @@ const pr = ({
             ref: b,
             id: k,
             rows: x,
-            "aria-invalid": g || void 0,
+            "aria-invalid": p || void 0,
             "aria-describedby": f,
             className: d(
               We,
               "resize-y leading-relaxed",
               vr[s],
-              Ke(g),
+              Ke(p),
               m
             ),
             ...h
@@ -2925,7 +2925,7 @@ const pr = ({
         "p",
         {
           id: f,
-          className: d("mt-1 text-xs", g ? "text-danger-fg" : "text-text-subtle"),
+          className: d("mt-1 text-xs", p ? "text-danger-fg" : "text-text-subtle"),
           children: n || r
         }
       )
@@ -2988,7 +2988,7 @@ const Nn = ({
   loading: b = !1,
   className: v,
   ref: k,
-  sdk: g
+  sdk: p
 }) => {
   const [f, $] = O(r || {}), [C, q] = O({}), [T, G] = O({});
   X(() => {
@@ -2996,21 +2996,21 @@ const Nn = ({
   }, [r]);
   const V = he(
     (w, c, S) => {
-      const p = t.flatMap((_) => _.items).find((_) => _.name === w);
-      if (!p) return null;
-      if (p.required && (c == null || c === ""))
-        return `${p.label} is required`;
-      if (p.type === "array") {
-        if (p.required && (!c || c.length === 0))
-          return `${p.label} cannot be empty.`;
+      const g = t.flatMap((_) => _.items).find((_) => _.name === w);
+      if (!g) return null;
+      if (g.required && (c == null || c === ""))
+        return `${g.label} is required`;
+      if (g.type === "array") {
+        if (g.required && (!c || c.length === 0))
+          return `${g.label} cannot be empty.`;
         if (c && !Array.isArray(c))
-          return `${p.label} must be an array.`;
-        if (Array.isArray(c) && p.arrayFields) {
+          return `${g.label} must be an array.`;
+        if (Array.isArray(c) && g.arrayFields) {
           const _ = [];
           let N = !1;
           if (c.forEach((U, re) => {
             const ee = {};
-            for (const Y of p.arrayFields) {
+            for (const Y of g.arrayFields) {
               const P = U?.[Y.name];
               if (Y.required && (P == null || P === ""))
                 ee[Y.name] = `${Y.label} is required`, N = !0;
@@ -3024,7 +3024,7 @@ const Nn = ({
             return JSON.stringify(_);
         }
       }
-      return p.validator ? p.validator(c, S) : null;
+      return g.validator ? g.validator(c, S) : null;
     },
     [t]
   ), I = he(
@@ -3062,15 +3062,15 @@ const Nn = ({
       }
       if (q(c), Object.keys(c).some((_) => c[_]))
         return;
-      const p = l ? l(f) : f;
-      await n?.(f, p);
+      const g = l ? l(f) : f;
+      await n?.(f, g);
     },
     [f, t, V, o, l, n, b]
   ), te = he(
     (w) => {
-      const c = Be(f, w.name), S = T[w.name] ? C[w.name] : void 0, p = w.disabled || b, _ = {
+      const c = Be(f, w.name), S = T[w.name] ? C[w.name] : void 0, g = w.disabled || b, _ = {
         value: c || "",
-        disabled: p,
+        disabled: g,
         required: w.required,
         placeholder: w.placeholder,
         ...w.fieldProps
@@ -3164,7 +3164,7 @@ const Nn = ({
                     value: N.value,
                     checked: c === N.value,
                     onChange: () => I(w.name, N.value),
-                    disabled: p || N.disabled,
+                    disabled: g || N.disabled,
                     className: "size-checkbox shrink-0 rounded-xs border border-border-strong bg-surface-input accent-accent focus-visible:outline-none focus-visible:focus-ring"
                   }
                 ),
@@ -3185,31 +3185,31 @@ const Nn = ({
           );
         case "file":
           return /* @__PURE__ */ e(
-            pr,
+            gr,
             {
               ..._,
               value: c,
               onChange: (N) => I(w.name, N),
               error: S,
-              onListFiles: (N) => g?.http.invoke({
+              onListFiles: (N) => p?.http.invoke({
                 method: "POST",
                 action: "storage.file.list",
                 body: N
               }),
-              onListMounts: () => g?.http.invoke({
+              onListMounts: () => p?.http.invoke({
                 method: "GET",
                 action: "storage.mount"
               }),
-              onUploadFile: (N) => g?.http.invoke({
+              onUploadFile: (N) => p?.http.invoke({
                 method: "POST",
                 action: "storage.file.upload",
                 body: N
               }),
-              onDownloadFile: (N) => g?.http.invoke({
+              onDownloadFile: (N) => p?.http.invoke({
                 method: "GET",
                 action: `storage.file.${N}.download`
               }),
-              onRegisterFile: (N) => g?.http.invoke({
+              onRegisterFile: (N) => p?.http.invoke({
                 method: "POST",
                 action: "storage.file.folder",
                 body: N
@@ -3222,11 +3222,11 @@ const Nn = ({
             {
               value: c || {},
               onChange: (N) => I(w.name, N),
-              onListFolders: () => g?.http.invoke({
+              onListFolders: () => p?.http.invoke({
                 method: "GET",
                 action: "storage.mount"
               }),
-              disabled: p,
+              disabled: g,
               size: h,
               placeholder: w.placeholder
             }
@@ -3236,7 +3236,7 @@ const Nn = ({
             value: c,
             onChange: (N) => I(w.name, N),
             error: S,
-            disabled: p
+            disabled: g
           });
         case "array": {
           const N = c || [];
@@ -3276,7 +3276,7 @@ const Nn = ({
                       (() => {
                         const F = {
                           value: P?.[A.name] || "",
-                          disabled: p,
+                          disabled: g,
                           required: A.required,
                           placeholder: A.placeholder,
                           ...A.fieldProps
@@ -3373,7 +3373,7 @@ const Nn = ({
                                         A.name,
                                         j.value
                                       ),
-                                      disabled: p || j.disabled,
+                                      disabled: g || j.disabled,
                                       className: "size-checkbox shrink-0 rounded-xs border border-border-strong bg-surface-input accent-accent focus-visible:outline-none focus-visible:focus-ring"
                                     }
                                   ),
@@ -3407,7 +3407,7 @@ const Nn = ({
                                 j
                               ),
                               error: z,
-                              disabled: p
+                              disabled: g
                             });
                           // Add other field types here as needed
                           default:
@@ -3433,7 +3433,7 @@ const Nn = ({
                   size: "md",
                   "aria-label": `${w.label} verwijderen`,
                   onClick: () => ee(D),
-                  disabled: p,
+                  disabled: g,
                   className: d("shrink-0", D === 0 && "mt-5"),
                   children: /* @__PURE__ */ e(ht, { className: "size-icon-md" })
                 }
@@ -3446,7 +3446,7 @@ const Nn = ({
                 variant: "secondary",
                 leftIcon: /* @__PURE__ */ e(xt, { className: "size-icon-sm" }),
                 onClick: re,
-                disabled: p,
+                disabled: g,
                 children: [
                   w.label,
                   " toevoegen"
@@ -3464,7 +3464,7 @@ const Nn = ({
     (w) => {
       if (w.conditional && !w.conditional(f))
         return null;
-      const c = w.items.filter((p) => !(p.hidden || p.conditional && !p.conditional(f)));
+      const c = w.items.filter((g) => !(g.hidden || g.conditional && !g.conditional(f)));
       if (c.length === 0) return null;
       const S = d(
         w.layout === "flex" ? "flex flex-wrap gap-3.5" : "grid gap-3.5",
@@ -3486,29 +3486,29 @@ const Nn = ({
             title: w.title,
             description: w.description,
             className: "not-last:border-b not-last:border-border-subtle",
-            children: /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e("div", { className: S, children: c.map((p) => {
-              const _ = T[p.name] ? C[p.name] : void 0;
+            children: /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e("div", { className: S, children: c.map((g) => {
+              const _ = T[g.name] ? C[g.name] : void 0;
               return /* @__PURE__ */ i(
                 "div",
                 {
                   className: d(
                     "flex min-w-0 flex-col gap-1.5",
-                    p.type === "checkbox" && "justify-center"
+                    g.type === "checkbox" && "justify-center"
                   ),
                   style: {
-                    width: typeof p.width == "string" ? p.width : void 0,
-                    gridColumn: typeof p.width == "number" ? `span ${p.width} / span ${p.width}` : void 0
+                    width: typeof g.width == "string" ? g.width : void 0,
+                    gridColumn: typeof g.width == "number" ? `span ${g.width} / span ${g.width}` : void 0
                   },
                   children: [
-                    p.type !== "custom" && p.type !== "checkbox" && /* @__PURE__ */ i("label", { className: "block text-sm font-medium text-text-muted", children: [
-                      p.label,
-                      p.required && /* @__PURE__ */ e("span", { className: "ml-1 text-danger-fg", children: "*" })
+                    g.type !== "custom" && g.type !== "checkbox" && /* @__PURE__ */ i("label", { className: "block text-sm font-medium text-text-muted", children: [
+                      g.label,
+                      g.required && /* @__PURE__ */ e("span", { className: "ml-1 text-danger-fg", children: "*" })
                     ] }),
-                    te(p),
-                    p.help && !_ && /* @__PURE__ */ e("p", { className: "text-xs leading-4 text-text-subtle", children: p.help })
+                    te(g),
+                    g.help && !_ && /* @__PURE__ */ e("p", { className: "text-xs leading-4 text-text-subtle", children: g.help })
                   ]
                 },
-                p.name
+                g.name
               );
             }) }) })
           },
@@ -3931,7 +3931,11 @@ function Lr(t) {
 }
 const Ir = ({ name: t, src: r, size: n = "sm", className: s, title: a }) => {
   const [l, o] = oe.useState(!1), u = d(
-    "inline-flex items-center justify-center rounded-full overflow-hidden shrink-0 font-semibold select-none bg-surface-hover text-text",
+    // `avatar`, not `surface-hover`: at 0.972 the plate was within a few percent
+    // of every surface it sits on, so the monogram floated instead of sitting in
+    // a disc. It needs its own token because it is a fill that must stay a step
+    // away from its background in *both* themes.
+    "inline-flex items-center justify-center rounded-full overflow-hidden shrink-0 font-semibold select-none bg-avatar text-avatar-fg",
     Ar[n],
     s
   );
@@ -3968,7 +3972,9 @@ const Ir = ({ name: t, src: r, size: n = "sm", className: s, title: a }) => {
       "span",
       {
         className: d(
-          "inline-flex items-center justify-center rounded-full shrink-0 -ml-2 font-semibold bg-surface-hover text-text-muted",
+          // Same fill as an Avatar plate, so the "+3" reads as one more disc
+          // in the row rather than a gap at the end of it.
+          "inline-flex items-center justify-center rounded-full shrink-0 -ml-2 font-semibold bg-avatar text-avatar-fg",
           n === "xs" ? "w-5 h-5 text-xs" : n === "md" ? "w-7 h-7 text-xs" : n === "lg" ? "w-9 h-9 text-xs" : "w-6 h-6 text-xs",
           Re
         ),
@@ -4023,11 +4029,11 @@ const An = ({
   onError: b,
   ...v
 }) => {
-  const [k, g] = O(!0), [f, $] = O(!1), [C, q] = O(t), T = (K) => {
-    g(!1), $(!1), h?.(K);
+  const [k, p] = O(!0), [f, $] = O(!1), [C, q] = O(t), T = (K) => {
+    p(!1), $(!1), h?.(K);
   }, G = (K) => {
-    if (g(!1), $(!0), u && C !== u) {
-      q(u), $(!1), g(!0);
+    if (p(!1), $(!0), u && C !== u) {
+      q(u), $(!1), p(!0);
       return;
     }
     b?.(K);
@@ -4069,7 +4075,7 @@ const An = ({
     "absolute inset-0 flex items-center justify-center",
     "text-text-muted"
   ), te = /* @__PURE__ */ e("div", { className: "animate-pulse", children: /* @__PURE__ */ e("div", { className: "w-6 h-6 bg-surface-hover rounded" }) }), J = /* @__PURE__ */ i("div", { className: "text-center", children: [
-    /* @__PURE__ */ e(Q, { icon: gt, size: "lg", className: "mx-auto mb-1" }),
+    /* @__PURE__ */ e(Q, { icon: pt, size: "lg", className: "mx-auto mb-1" }),
     /* @__PURE__ */ e("span", { className: "text-xs", children: "Failed to load" })
   ] });
   return /* @__PURE__ */ i("div", { className: V, children: [
@@ -4127,7 +4133,7 @@ function In({
   groups: b,
   renderGroupHeader: v,
   stickyGroupHeaders: k = !1,
-  collapsibleGroups: g = !1,
+  collapsibleGroups: p = !1,
   hideGroupCount: f = !1,
   selectable: $ = !1,
   selectedItems: C = [],
@@ -4146,7 +4152,7 @@ function In({
     () => Object.fromEntries(
       (b ?? []).filter((z) => z.defaultCollapsed).map((z) => [z.id, !0])
     )
-  ), S = oe.useRef(null), p = (z) => {
+  ), S = oe.useRef(null), g = (z) => {
     if (!["ArrowDown", "ArrowUp", "Home", "End"].includes(z.key)) return;
     const j = Array.from(
       S.current?.querySelectorAll("li[data-list-row]") ?? []
@@ -4250,10 +4256,10 @@ function In({
       ...F.filter((B) => z.has(B.id)),
       ...[...z.keys()].filter((B) => !F.some((M) => M.id === B)).map((B) => ({ id: B }))
     ].flatMap((B, M) => {
-      const L = z.get(B.id) ?? [], Z = g && w[B.id], ne = B.title ?? B.id, de = B.count ?? L.length, be = /* @__PURE__ */ e(
+      const L = z.get(B.id) ?? [], Z = p && w[B.id], ne = B.title ?? B.id, de = B.count ?? L.length, be = /* @__PURE__ */ e(
         "li",
         {
-          onClick: g ? () => c((fe) => ({ ...fe, [B.id]: !fe[B.id] })) : void 0,
+          onClick: p ? () => c((fe) => ({ ...fe, [B.id]: !fe[B.id] })) : void 0,
           className: d(
             // A caption over its rows, not a band across the table: same
             // surface as the rows, no rules, and the count as a quiet pill.
@@ -4262,12 +4268,12 @@ function In({
             M > 0 ? "pt-5" : "pt-3",
             B.tone === "danger" ? "text-danger-fg" : B.tone === "muted" ? "text-text-subtle" : "text-text",
             k && "sticky z-10",
-            g && "cursor-pointer select-none"
+            p && "cursor-pointer select-none"
           ),
-          "aria-expanded": g ? !Z : void 0,
+          "aria-expanded": p ? !Z : void 0,
           style: k ? { top: V ? 28 : 0 } : void 0,
           children: v ? v(B, L.map((fe) => fe.item)) : /* @__PURE__ */ i(ve, { children: [
-            g && /* @__PURE__ */ e(
+            p && /* @__PURE__ */ e(
               ze,
               {
                 "aria-hidden": !0,
@@ -4300,7 +4306,7 @@ function In({
       ];
     });
   })();
-  return /* @__PURE__ */ i("div", { ref: S, className: ee, onKeyDown: o ? p : void 0, children: [
+  return /* @__PURE__ */ i("div", { ref: S, className: ee, onKeyDown: o ? g : void 0, children: [
     G && /* @__PURE__ */ i(
       "div",
       {
@@ -4402,18 +4408,18 @@ const On = ({
   editable: x = !1,
   onTitleChange: h
 }) => {
-  const [b, v] = O(!1), [k, g] = O(r), f = se(null);
+  const [b, v] = O(!1), [k, p] = O(r), f = se(null);
   X(() => {
-    g(r);
+    p(r);
   }, [r]), X(() => {
     b && f.current && (f.current.focus(), f.current.select());
   }, [b]);
   const $ = () => {
     x && v(!0);
   }, C = () => {
-    v(!1), k.trim() !== "" && k !== r && h ? h(k.trim()) : g(r);
+    v(!1), k.trim() !== "" && k !== r && h ? h(k.trim()) : p(r);
   }, q = (T) => {
-    T.key === "Enter" ? f.current?.blur() : T.key === "Escape" && (g(r), v(!1));
+    T.key === "Enter" ? f.current?.blur() : T.key === "Escape" && (p(r), v(!1));
   };
   return /* @__PURE__ */ i(
     "div",
@@ -4438,7 +4444,7 @@ const On = ({
                   ref: f,
                   type: "text",
                   value: k,
-                  onChange: (T) => g(T.target.value),
+                  onChange: (T) => p(T.target.value),
                   onBlur: C,
                   onKeyDown: q,
                   className: "text-1xl font-semibold bg-transparent border-b-1 border-border rounded-lg outline-none focus:border-none px-1 -mx-1 min-w-0 w-full"
@@ -4458,7 +4464,7 @@ const On = ({
                 ),
                 n && /* @__PURE__ */ e("span", { className: "shrink-0 text-base text-text-muted truncate", children: n }),
                 x && /* @__PURE__ */ e(
-                  pt,
+                  gt,
                   {
                     size: 15,
                     onClick: $,
@@ -4466,7 +4472,20 @@ const On = ({
                   }
                 )
               ] }),
-              s && /* @__PURE__ */ e("div", { className: "mt-0.5 truncate text-sm text-text-subtle", children: s })
+              s && // A string meta is one line and ellipsises; a node may be a row
+              // of controls (the interaction header's property line) that has
+              // to be allowed to wrap — `truncate` would clip it to one line
+              // and hide the last properties.
+              /* @__PURE__ */ e(
+                "div",
+                {
+                  className: d(
+                    "mt-1 min-w-0 text-sm text-text-subtle",
+                    typeof s == "string" && "truncate"
+                  ),
+                  children: s
+                }
+              )
             ] })
           ] }) }),
           a.length > 0 && /* @__PURE__ */ e("div", { className: "flex flex-wrap sm:flex-nowrap gap-2 sm:gap-3", children: a.map(
@@ -4548,7 +4567,12 @@ function Fn({ text: t, className: r, as: n }) {
     }
   ) : /* @__PURE__ */ e("div", { className: d("break-words", r), children: /* @__PURE__ */ e(Ct, { remarkPlugins: [St], components: Rr, children: s }) });
 }
-function Bn({ label: t, trailing: r, align: n = "center", className: s }) {
+const Bn = ({ label: t, meta: r, action: n, className: s }) => /* @__PURE__ */ i("div", { className: d("flex items-center gap-2 px-1 pb-2 pt-7 first:pt-0", s), children: [
+  /* @__PURE__ */ e("span", { className: "shrink-0 text-2xs font-semibold uppercase tracking-label text-text-subtle", children: t }),
+  r && /* @__PURE__ */ e("span", { className: "min-w-0 flex-1 truncate text-right text-xs tabular-nums text-text-subtle", children: r }),
+  n && /* @__PURE__ */ e("span", { className: "ml-auto shrink-0", children: n })
+] });
+function Rn({ label: t, trailing: r, align: n = "center", className: s }) {
   const a = /* @__PURE__ */ e("span", { className: "h-px flex-1 bg-border-subtle", "aria-hidden": !0 });
   return !t && !r ? /* @__PURE__ */ e("div", { className: d("flex items-center py-2", s), children: a }) : /* @__PURE__ */ i("div", { className: d("flex items-center gap-3 py-2", s), children: [
     n === "center" && a,
@@ -4557,7 +4581,7 @@ function Bn({ label: t, trailing: r, align: n = "center", className: s }) {
     r && /* @__PURE__ */ e("span", { className: "shrink-0", children: r })
   ] });
 }
-function Rn({
+function Hn({
   label: t,
   description: r,
   control: n,
@@ -4584,7 +4608,7 @@ function Rn({
     }
   );
 }
-function Hn({
+function Vn({
   icon: t,
   title: r,
   description: n,
@@ -4604,7 +4628,7 @@ function Hn({
     /* @__PURE__ */ e("div", { className: d("flex flex-col", t && "pl-6"), children: a })
   ] });
 }
-function Vn({ label: t, dotColor: r, onClick: n, className: s }) {
+function qn({ label: t, dotColor: r, onClick: n, className: s }) {
   return /* @__PURE__ */ i(
     "button",
     {
@@ -4628,7 +4652,7 @@ function Hr(t, r) {
     t
   );
 }
-const qn = ({
+const Un = ({
   groups: t,
   data: r,
   size: n = "md",
@@ -4662,7 +4686,7 @@ const qn = ({
             className: "text-text-muted",
             children: "Geen items"
           }
-        ) : /* @__PURE__ */ e("div", { className: "space-y-3", children: v.map((k, g) => /* @__PURE__ */ i(
+        ) : /* @__PURE__ */ e("div", { className: "space-y-3", children: v.map((k, p) => /* @__PURE__ */ i(
           "div",
           {
             className: "p-4 border border-border rounded-xl space-y-3",
@@ -4677,7 +4701,7 @@ const qn = ({
                   children: [
                     x.label,
                     " ",
-                    g + 1
+                    p + 1
                   ]
                 }
               ) }),
@@ -4737,7 +4761,7 @@ const qn = ({
               }) })
             ]
           },
-          g
+          p
         )) });
       }
       if (x.type === "custom" && x.customComponent)
@@ -4969,7 +4993,7 @@ const qn = ({
       ]
     }
   ) });
-}, Un = ({
+}, Wn = ({
   items: t,
   isSelectedHandler: r,
   onClick: n,
@@ -5016,7 +5040,7 @@ const qn = ({
   left: "text-left",
   center: "text-center",
   right: "text-right"
-}, Wn = ({
+}, Kn = ({
   level: t = 1,
   size: r,
   weight: n = "semibold",
@@ -5048,7 +5072,7 @@ function Kr(t) {
     6: "md"
   }[t] || "md";
 }
-const Kn = ({
+const Gn = ({
   commands: t,
   isOpen: r,
   onClose: n,
@@ -5056,7 +5080,7 @@ const Kn = ({
   initialCommandPath: a,
   initialActiveIndex: l
 }) => {
-  const [o, u] = O(""), [m, y] = O(a || []), [x, h] = O(l || 0), b = se(null), v = se(null), g = (m.length ? t.find((f) => f.id === m[0])?.subCommands || [] : t).filter(
+  const [o, u] = O(""), [m, y] = O(a || []), [x, h] = O(l || 0), b = se(null), v = se(null), p = (m.length ? t.find((f) => f.id === m[0])?.subCommands || [] : t).filter(
     (f) => f.label.toLowerCase().includes(o.toLowerCase())
   );
   return X(() => {
@@ -5068,20 +5092,20 @@ const Kn = ({
           n();
         else if ($.key === "ArrowUp")
           h(
-            (C) => C > 0 ? C - 1 : g.length - 1
+            (C) => C > 0 ? C - 1 : p.length - 1
           );
         else if ($.key === "ArrowDown")
           h(
-            (C) => C < g.length - 1 ? C + 1 : 0
+            (C) => C < p.length - 1 ? C + 1 : 0
           );
         else if ($.key === "Enter") {
-          const C = g[x];
+          const C = p[x];
           C && (C.subCommands ? (y([...m, C.id]), h(0)) : C.action && (C.action(), n()));
         }
       }
     };
     return document.addEventListener("keydown", f), () => document.removeEventListener("keydown", f);
-  }, [r, n, g, x, m]), X(() => {
+  }, [r, n, p, x, m]), X(() => {
     const f = ($) => {
       b.current && !b.current.contains($.target) && n();
     };
@@ -5115,8 +5139,8 @@ const Kn = ({
             ref: v,
             className: "mt-2 pt-2 text-sm border-t border-border max-h-dialog-list overflow-y-auto",
             children: [
-              g.length === 0 && /* @__PURE__ */ e("div", { className: "text-text-muted text-center text-sm", children: s?.noCommandsFound || "No commands found" }),
-              g.map((f, $) => /* @__PURE__ */ i(
+              p.length === 0 && /* @__PURE__ */ e("div", { className: "text-text-muted text-center text-sm", children: s?.noCommandsFound || "No commands found" }),
+              p.map((f, $) => /* @__PURE__ */ i(
                 "div",
                 {
                   "data-index": $,
@@ -5246,7 +5270,7 @@ const Kn = ({
   )
 );
 Ze.displayName = "Box";
-const Gn = ({ children: t, title: r, ...n }) => /* @__PURE__ */ i(
+const Jn = ({ children: t, title: r, ...n }) => /* @__PURE__ */ i(
   Ze,
   {
     background: "module",
@@ -5261,7 +5285,7 @@ const Gn = ({ children: t, title: r, ...n }) => /* @__PURE__ */ i(
     ]
   }
 );
-function Jn({
+function Yn({
   identifier: t,
   resourceLoader: r,
   framework: n = "react",
@@ -5272,13 +5296,13 @@ function Jn({
 }) {
   const u = se(null), [m, y] = O(!0), [x, h] = O(!1), [b, v] = O(null), k = se(null);
   se(null);
-  const g = se(r);
-  return g.current = r, X(() => {
+  const p = se(r);
+  return p.current = r, X(() => {
     let f = !0;
     return (async () => {
       y(!0), h(!1), v(null);
       try {
-        const C = await g.current();
+        const C = await p.current();
         if (!f) return;
         const q = C.component || C.default || C;
         v(n === "react" ? () => q : () => C);
@@ -5313,7 +5337,7 @@ function Jn({
     n === "react" && !x && b && /* @__PURE__ */ e(b, { ...l })
   ] });
 }
-class Yn extends wt {
+class Xn extends wt {
   constructor() {
     super(...arguments), this.state = {
       hasError: !1,
@@ -5349,22 +5373,22 @@ export {
   Ze as Box,
   ae as Button,
   xn as ButtonGroup,
-  Gn as Card,
+  Jn as Card,
   _n as ChannelBadge,
   ye as Checkbox,
-  Kn as CommandPalette,
+  Gn as CommandPalette,
   wn as ConfirmDialog,
   rr as ContentLoading,
   Ae as DatePicker,
   nr as Dropdown,
   Cn as EmptyState,
-  Yn as ErrorBoundary,
-  Jn as FederatedResource,
+  Xn as ErrorBoundary,
+  Yn as FederatedResource,
   Lt as FilterChip,
   Yt as FolderSelect,
   Nn as Form,
   wr as FormSection,
-  Wn as Heading,
+  Kn as Heading,
   Q as Icon,
   An as Image,
   Sn as Kbd,
@@ -5376,7 +5400,7 @@ export {
   Pn as MessageBubble,
   Ye as Modal,
   On as PageHeader,
-  gn as PageToolbar,
+  pn as PageToolbar,
   Je as PageToolbarActions,
   fn as ParticipantTile,
   Ve as Popover,
@@ -5384,18 +5408,19 @@ export {
   Fn as RichText,
   Ge as SearchField,
   er as SearchableTextField,
-  Bn as SectionDivider,
+  Bn as SectionCaption,
+  Rn as SectionDivider,
   Ft as SegmentedToggle,
   Ce as Select,
-  Rn as SettingsRow,
-  Hn as SettingsSection,
-  Un as SidebarMenu,
-  Vn as SourceChip,
+  Hn as SettingsRow,
+  Vn as SettingsSection,
+  Wn as SidebarMenu,
+  qn as SourceChip,
   zn as Spinner,
   qe as SplitButton,
   Mn as StatusDot,
   $n as StepIndicator,
-  pr as StorageInput,
+  gr as StorageInput,
   tr as Switch,
   yn as TabBar,
   Fe as Table,
@@ -5404,12 +5429,12 @@ export {
   Le as TextArea,
   Ne as TextField,
   hn as VideoSurface,
-  qn as View,
+  Un as View,
   un as catTone,
   d as cn,
   dn as createSizes,
   cn as createVariants,
-  pn as dateFilterHandler,
+  gn as dateFilterHandler,
   vn as selectFilterHandler
 };
 //# sourceMappingURL=index.js.map