@opencxh/ui-kit 3.137.3 → 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
               );
             }) }) })
           },
@@ -4029,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);
@@ -4075,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: [
@@ -4133,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 = [],
@@ -4152,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]") ?? []
@@ -4256,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.
@@ -4268,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,
@@ -4306,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",
       {
@@ -4408,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",
@@ -4444,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"
@@ -4464,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: $,
@@ -4472,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(
@@ -4554,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,
@@ -4563,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,
@@ -4590,7 +4608,7 @@ function Rn({
     }
   );
 }
-function Hn({
+function Vn({
   icon: t,
   title: r,
   description: n,
@@ -4610,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",
     {
@@ -4634,7 +4652,7 @@ function Hr(t, r) {
     t
   );
 }
-const qn = ({
+const Un = ({
   groups: t,
   data: r,
   size: n = "md",
@@ -4668,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",
@@ -4683,7 +4701,7 @@ const qn = ({
                   children: [
                     x.label,
                     " ",
-                    g + 1
+                    p + 1
                   ]
                 }
               ) }),
@@ -4743,7 +4761,7 @@ const qn = ({
               }) })
             ]
           },
-          g
+          p
         )) });
       }
       if (x.type === "custom" && x.customComponent)
@@ -4975,7 +4993,7 @@ const qn = ({
       ]
     }
   ) });
-}, Un = ({
+}, Wn = ({
   items: t,
   isSelectedHandler: r,
   onClick: n,
@@ -5022,7 +5040,7 @@ const qn = ({
   left: "text-left",
   center: "text-center",
   right: "text-right"
-}, Wn = ({
+}, Kn = ({
   level: t = 1,
   size: r,
   weight: n = "semibold",
@@ -5054,7 +5072,7 @@ function Kr(t) {
     6: "md"
   }[t] || "md";
 }
-const Kn = ({
+const Gn = ({
   commands: t,
   isOpen: r,
   onClose: n,
@@ -5062,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(() => {
@@ -5074,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();
     };
@@ -5121,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": $,
@@ -5252,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",
@@ -5267,7 +5285,7 @@ const Gn = ({ children: t, title: r, ...n }) => /* @__PURE__ */ i(
     ]
   }
 );
-function Jn({
+function Yn({
   identifier: t,
   resourceLoader: r,
   framework: n = "react",
@@ -5278,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);
@@ -5319,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,
@@ -5355,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,
@@ -5382,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,
@@ -5390,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,
@@ -5410,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