@apliteni/apliteni-ui 0.56.1 → 0.58.0

package/react/dist/index.js

@@ -189,8 +189,110 @@ function Callout({ variant, icon: icon6 = calloutIcons[variant ?? "neutral"], ch
 }
 
 // src/primitives/StatBand.tsx
-import { useId } from "react";
-import { Fragment, jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
+import { useId as useId2 } from "react";
+
+// src/Tooltip.tsx
+import { useEffect, useId, useLayoutEffect as useLayoutEffect2, useRef as useRef2, useState } from "react";
+import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
+function Tooltip({ text: text2, children }) {
+  const id = useId();
+  const host = useRef2(null);
+  const trigger = useRef2(null);
+  const tip = useRef2(null);
+  const ignoreMouseUntil = useRef2(0);
+  const touchMoved = useRef2(false);
+  const [open, setOpen] = useState(false);
+  function place() {
+    const h = host.current;
+    const t = tip.current;
+    const mark = trigger.current.getBoundingClientRect();
+    const rect = h.getBoundingClientRect();
+    const view = h.ownerDocument.documentElement;
+    const clip = { top: 0, left: 0, right: view.clientWidth, bottom: view.clientHeight };
+    for (let el = h; el && el !== h.ownerDocument.body; el = el.parentElement) {
+      const style = getComputedStyle(el);
+      if (![style.overflow, style.overflowX, style.overflowY].some((v) => v && v !== "visible")) continue;
+      const bounds = el.getBoundingClientRect();
+      clip.top = Math.max(clip.top, bounds.top);
+      clip.left = Math.max(clip.left, bounds.left);
+      clip.right = Math.min(clip.right, bounds.right);
+      clip.bottom = Math.min(clip.bottom, bounds.bottom);
+    }
+    const gap = parseFloat(getComputedStyle(t).getPropertyValue("--ui-tip-gap")) || 8;
+    const above = mark.top - clip.top;
+    const below = clip.bottom - mark.bottom;
+    const isBelow = above < t.offsetHeight + gap && below > above;
+    t.classList.toggle("is-below", isBelow);
+    const centre = mark.left + mark.width / 2;
+    const ideal = centre - t.offsetWidth / 2;
+    const left = Math.max(clip.left, Math.min(ideal, clip.right - t.offsetWidth));
+    t.style.setProperty("--ui-tip-x", `${centre - rect.left - h.clientLeft + h.scrollLeft}px`);
+    t.style.setProperty("--ui-tip-y", `${(isBelow ? mark.bottom : mark.top) - rect.top - h.clientTop + h.scrollTop}px`);
+    t.style.setProperty("--ui-tip-shift", `${left - ideal}px`);
+  }
+  useLayoutEffect2(() => {
+    if (open) place();
+  }, [open, text2]);
+  useEffect(() => {
+    if (!open) return;
+    const doc = host.current.ownerDocument;
+    const view = doc.defaultView;
+    const escape = (event) => {
+      if (event.key === "Escape") setOpen(false);
+    };
+    doc.addEventListener("keydown", escape);
+    view.addEventListener("scroll", place, true);
+    view.addEventListener("resize", place);
+    return () => {
+      doc.removeEventListener("keydown", escape);
+      view.removeEventListener("scroll", place, true);
+      view.removeEventListener("resize", place);
+    };
+  }, [open]);
+  return /* @__PURE__ */ jsxs4("span", { ref: host, className: "ui-tip-host", style: { display: "inline-block" }, children: [
+    /* @__PURE__ */ jsx6(
+      "span",
+      {
+        ref: trigger,
+        className: "ui-focusable",
+        tabIndex: 0,
+        "aria-describedby": id,
+        onMouseEnter: () => {
+          if (Date.now() > ignoreMouseUntil.current) setOpen(true);
+        },
+        onMouseLeave: () => {
+          if (Date.now() > ignoreMouseUntil.current) setOpen(false);
+        },
+        onFocus: () => {
+          if (Date.now() > ignoreMouseUntil.current) setOpen(true);
+        },
+        onBlur: () => setOpen(false),
+        onKeyDown: (event) => {
+          if (event.key === "Escape") setOpen(false);
+        },
+        onTouchStart: () => {
+          ignoreMouseUntil.current = Date.now() + 800;
+          touchMoved.current = false;
+        },
+        onTouchMove: () => {
+          touchMoved.current = true;
+        },
+        onTouchCancel: () => {
+          touchMoved.current = true;
+        },
+        onTouchEnd: () => {
+          ignoreMouseUntil.current = Date.now() + 800;
+          if (!touchMoved.current) setOpen((value) => !value);
+        },
+        children
+      }
+    ),
+    /* @__PURE__ */ jsx6("span", { ref: tip, id, role: "tooltip", className: `ui-tip${open ? " is-open" : ""}`, children: /* @__PURE__ */ jsx6("span", { className: "ui-tip__label", children: text2 }) })
+  ] });
+}
+
+// src/primitives/StatBand.tsx
+import { Fragment, jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
 var GLYPH = { up: "arrowUp", down: "arrowDown", flat: "minus" };
 var directionOf = (text2) => {
   const t = text2.trim();
@@ -199,53 +301,53 @@ var directionOf = (text2) => {
 var hasChange = (d) => !!d && d.value != null && d.value !== "";
 function Delta({ delta, basisId }) {
   if (!hasChange(delta)) {
-    return /* @__PURE__ */ jsx6("dd", { className: "ui-stat__delta ui-stat__delta--none", children: delta.none || "No earlier figure" });
+    return /* @__PURE__ */ jsx7("dd", { className: "ui-stat__delta ui-stat__delta--none", children: delta.none || "No earlier figure" });
   }
   const dir = delta.direction && GLYPH[delta.direction] ? delta.direction : directionOf(delta.value);
-  return /* @__PURE__ */ jsxs4("dd", { className: "ui-stat__delta", "aria-describedby": !delta.basis && basisId ? basisId : void 0, children: [
-    /* @__PURE__ */ jsx6(Icon, { name: GLYPH[dir] }),
-    /* @__PURE__ */ jsx6("span", { className: "ui-stat__change", children: delta.value }),
-    delta.basis ? /* @__PURE__ */ jsxs4(Fragment, { children: [
+  return /* @__PURE__ */ jsxs5("dd", { className: "ui-stat__delta", "aria-describedby": !delta.basis && basisId ? basisId : void 0, children: [
+    /* @__PURE__ */ jsx7(Icon, { name: GLYPH[dir] }),
+    delta.tooltip ? /* @__PURE__ */ jsx7(Tooltip, { text: delta.tooltip, children: /* @__PURE__ */ jsx7("span", { className: "ui-stat__change", children: delta.value }) }) : /* @__PURE__ */ jsx7("span", { className: "ui-stat__change", children: delta.value }),
+    delta.basis ? /* @__PURE__ */ jsxs5(Fragment, { children: [
       " ",
-      /* @__PURE__ */ jsx6("span", { className: "ui-stat__basis", children: delta.basis })
+      /* @__PURE__ */ jsx7("span", { className: "ui-stat__basis", children: delta.basis })
     ] }) : null
   ] });
 }
-function StatBand({ stats, variant = "tiles", basis, label, id }) {
-  const auto = useId();
+function StatBand({ stats, variant = "tiles", basis, basisId: sharedBasisId, label, id }) {
+  const auto = useId2();
   const v = ["band", "tiles", "open"].includes(variant) ? variant : "tiles";
-  const basisId = basis ? `${id || auto}-basis` : void 0;
+  const basisId = basis ? `${id || auto}-basis` : sharedBasisId;
   const root = ["ui-stats", `ui-stats--${v}`, v === "band" && "ui-card"].filter(Boolean).join(" ");
-  return /* @__PURE__ */ jsxs4("div", { className: root, role: label ? "group" : void 0, "aria-label": label || void 0, children: [
-    basis ? /* @__PURE__ */ jsx6("p", { className: "ui-stats__basis", id: basisId, children: basis }) : null,
-    /* @__PURE__ */ jsx6("dl", { className: "ui-stats__list", children: stats.map((s, i) => {
+  return /* @__PURE__ */ jsxs5("div", { className: root, role: label ? "group" : void 0, "aria-label": label || void 0, children: [
+    basis ? /* @__PURE__ */ jsx7("p", { className: "ui-stats__basis", id: basisId, children: basis }) : null,
+    /* @__PURE__ */ jsx7("dl", { className: "ui-stats__list", children: stats.map((s, i) => {
       const tone = hasChange(s.delta) && (s.delta.tone === "good" || s.delta.tone === "bad") ? s.delta.tone : "";
       const cls = ["ui-stat", tone && `ui-stat--${tone}`, v === "tiles" && "ui-card ui-card--pad-sm"].filter(Boolean).join(" ");
-      return /* @__PURE__ */ jsxs4("div", { className: cls, children: [
-        /* @__PURE__ */ jsx6("dt", { className: "ui-stat__label", children: s.label }),
-        /* @__PURE__ */ jsx6("dd", { className: "ui-stat__value", children: s.value }),
-        s.delta ? /* @__PURE__ */ jsx6(Delta, { delta: s.delta, basisId }) : null,
-        s.trend ? /* @__PURE__ */ jsx6("dd", { className: "ui-stat__trend", children: s.trend }) : null
+      return /* @__PURE__ */ jsxs5("div", { className: cls, children: [
+        /* @__PURE__ */ jsx7("dt", { className: "ui-stat__label", children: s.label }),
+        /* @__PURE__ */ jsx7("dd", { className: "ui-stat__value", children: s.value }),
+        s.delta ? /* @__PURE__ */ jsx7(Delta, { delta: s.delta, basisId }) : null,
+        s.trend ? /* @__PURE__ */ jsx7("dd", { className: "ui-stat__trend", children: s.trend }) : null
       ] }, `${s.label}-${i}`);
     }) })
   ] });
 }
 
 // src/Confirm.tsx
-import { useRef as useRef4 } from "react";
+import { useRef as useRef5 } from "react";
 
 // src/Modal.tsx
-import { useId as useId2, useRef as useRef3 } from "react";
+import { useId as useId3, useRef as useRef4 } from "react";
 import { createPortal } from "react-dom";
 
 // src/dialog.ts
 import {
   createContext,
   useContext,
-  useEffect,
-  useLayoutEffect as useLayoutEffect2,
-  useRef as useRef2,
-  useState
+  useEffect as useEffect2,
+  useLayoutEffect as useLayoutEffect3,
+  useRef as useRef3,
+  useState as useState2
 } from "react";
 var FOCUSABLE = 'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"]), details > summary:first-of-type';
 function tabbable(el) {
@@ -266,7 +368,7 @@ var dismissOnScrim = (onClose) => (e) => {
   e.preventDefault();
   onClose();
 };
-var useIsoLayoutEffect = typeof document === "undefined" ? useEffect : useLayoutEffect2;
+var useIsoLayoutEffect = typeof document === "undefined" ? useEffect2 : useLayoutEffect3;
 function transitionMs(el) {
   const cs = getComputedStyle(el);
   const times = (list) => list.split(",").map((t) => {
@@ -375,8 +477,8 @@ function exit(entry) {
 }
 var EXIT_SLACK_MS = 50;
 function usePresence(open, root, panel) {
-  const [present, setPresent] = useState(open);
-  const [entered, setEntered] = useState(false);
+  const [present, setPresent] = useState2(open);
+  const [entered, setEntered] = useState2(false);
   if (open && !present) setPresent(true);
   const shown = open && entered;
   useIsoLayoutEffect(() => {
@@ -425,12 +527,12 @@ function usePresence(open, root, panel) {
 }
 function useDialog(active, { root, panel, body, initialFocus }, onClose) {
   const parent = useContext(DialogScope);
-  const [scope] = useState(() => ({ parent }));
-  const close = useRef2(onClose);
+  const [scope] = useState2(() => ({ parent }));
+  const close = useRef3(onClose);
   useIsoLayoutEffect(() => {
     close.current = onClose;
   });
-  useEffect(() => {
+  useEffect2(() => {
     if (!active || !root.current || !panel.current) return;
     const entry = {
       scope,
@@ -449,19 +551,19 @@ function useDialog(active, { root, panel, body, initialFocus }, onClose) {
 }
 
 // src/Modal.tsx
-import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
 function Modal({ open, title, onClose, footer, children, initialFocusRef, role = "dialog" }) {
-  const id = useId2();
+  const id = useId3();
   const titleId = `${id}-title`;
   const bodyId = `${id}-body`;
-  const root = useRef3(null);
-  const panel = useRef3(null);
-  const body = useRef3(null);
+  const root = useRef4(null);
+  const panel = useRef4(null);
+  const body = useRef4(null);
   const { mounted, shown } = usePresence(open, root, panel);
   const scope = useDialog(shown, { root, panel, body, initialFocus: initialFocusRef }, onClose);
   if (!mounted) return null;
   return createPortal(
-    /* @__PURE__ */ jsx7(DialogScope.Provider, { value: scope, children: /* @__PURE__ */ jsx7("div", { className: shown ? "rx-scrim is-open" : "rx-scrim", ref: root, onMouseDown: dismissOnScrim(onClose), children: /* @__PURE__ */ jsxs5(
+    /* @__PURE__ */ jsx8(DialogScope.Provider, { value: scope, children: /* @__PURE__ */ jsx8("div", { className: shown ? "rx-scrim is-open" : "rx-scrim", ref: root, onMouseDown: dismissOnScrim(onClose), children: /* @__PURE__ */ jsxs6(
       "div",
       {
         className: "rx-modal",
@@ -472,12 +574,12 @@ function Modal({ open, title, onClose, footer, children, initialFocusRef, role =
         tabIndex: -1,
         ref: panel,
         children: [
-          /* @__PURE__ */ jsxs5("div", { className: "rx-modal__head", children: [
-            /* @__PURE__ */ jsx7("h2", { className: "rx-modal__title", id: titleId, children: title }),
-            /* @__PURE__ */ jsx7(Button, { variant: "ghost", size: "sm", iconOnly: true, icon: "x", "aria-label": "Close", onClick: onClose })
+          /* @__PURE__ */ jsxs6("div", { className: "rx-modal__head", children: [
+            /* @__PURE__ */ jsx8("h2", { className: "rx-modal__title", id: titleId, children: title }),
+            /* @__PURE__ */ jsx8(Button, { variant: "ghost", size: "sm", iconOnly: true, icon: "x", "aria-label": "Close", onClick: onClose })
           ] }),
-          /* @__PURE__ */ jsx7("div", { className: "rx-modal__body", id: bodyId, ref: body, children }),
-          footer && /* @__PURE__ */ jsx7("div", { className: "rx-modal__foot", children: footer })
+          /* @__PURE__ */ jsx8("div", { className: "rx-modal__body", id: bodyId, ref: body, children }),
+          footer && /* @__PURE__ */ jsx8("div", { className: "rx-modal__foot", children: footer })
         ]
       }
     ) }) }),
@@ -486,7 +588,7 @@ function Modal({ open, title, onClose, footer, children, initialFocusRef, role =
 }
 
 // src/Confirm.tsx
-import { Fragment as Fragment2, jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
 function Confirm({
   open,
   title,
@@ -498,8 +600,8 @@ function Confirm({
   onConfirm,
   onCancel
 }) {
-  const safeAction = useRef4(null);
-  return /* @__PURE__ */ jsx8(
+  const safeAction = useRef5(null);
+  return /* @__PURE__ */ jsx9(
     Modal,
     {
       open,
@@ -507,9 +609,9 @@ function Confirm({
       onClose: onCancel,
       role: "alertdialog",
       initialFocusRef: safeAction,
-      footer: /* @__PURE__ */ jsxs6(Fragment2, { children: [
-        /* @__PURE__ */ jsx8(Button, { ref: safeAction, variant: "ghost", onClick: onCancel, children: cancelLabel }),
-        /* @__PURE__ */ jsx8(Button, { variant: danger ? "danger" : "primary", busy, onClick: onConfirm, children: confirmLabel })
+      footer: /* @__PURE__ */ jsxs7(Fragment2, { children: [
+        /* @__PURE__ */ jsx9(Button, { ref: safeAction, variant: "ghost", onClick: onCancel, children: cancelLabel }),
+        /* @__PURE__ */ jsx9(Button, { variant: danger ? "danger" : "primary", busy, onClick: onConfirm, children: confirmLabel })
       ] }),
       children: body
     }
@@ -517,9 +619,9 @@ function Confirm({
 }
 
 // src/Drawer.tsx
-import { useId as useId3, useRef as useRef5 } from "react";
+import { useId as useId4, useRef as useRef6 } from "react";
 import { createPortal as createPortal2 } from "react-dom";
-import { jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx10, jsxs as jsxs8 } from "react/jsx-runtime";
 function Drawer({
   open,
   title,
@@ -530,18 +632,18 @@ function Drawer({
   children,
   closeLabel = "Close"
 }) {
-  const root = useRef5(null);
-  const panel = useRef5(null);
-  const body = useRef5(null);
-  const titleId = useId3();
+  const root = useRef6(null);
+  const panel = useRef6(null);
+  const body = useRef6(null);
+  const titleId = useId4();
   const { mounted, shown } = usePresence(open, root, panel);
   const scope = useDialog(shown, { root, panel, body }, onClose);
   if (!mounted) return null;
   const cls = ["ui-drawer", `ui-drawer--${side}`, `ui-drawer--${size}`, shown && "is-open"].filter(Boolean).join(" ");
   return createPortal2(
-    /* @__PURE__ */ jsx9(DialogScope.Provider, { value: scope, children: /* @__PURE__ */ jsxs7("div", { className: cls, ref: root, children: [
-      /* @__PURE__ */ jsx9("div", { className: "ui-drawer__scrim", onMouseDown: dismissOnScrim(onClose) }),
-      /* @__PURE__ */ jsxs7(
+    /* @__PURE__ */ jsx10(DialogScope.Provider, { value: scope, children: /* @__PURE__ */ jsxs8("div", { className: cls, ref: root, children: [
+      /* @__PURE__ */ jsx10("div", { className: "ui-drawer__scrim", onMouseDown: dismissOnScrim(onClose) }),
+      /* @__PURE__ */ jsxs8(
         "aside",
         {
           className: "ui-drawer__panel",
@@ -551,12 +653,12 @@ function Drawer({
           tabIndex: -1,
           ref: panel,
           children: [
-            /* @__PURE__ */ jsxs7("header", { className: "ui-drawer__header", children: [
-              /* @__PURE__ */ jsx9("h2", { className: "ui-drawer__title", id: titleId, children: title }),
-              /* @__PURE__ */ jsx9("button", { type: "button", className: "ui-drawer__close", "aria-label": closeLabel, onClick: onClose, children: /* @__PURE__ */ jsx9(Icon, { name: "x" }) })
+            /* @__PURE__ */ jsxs8("header", { className: "ui-drawer__header", children: [
+              /* @__PURE__ */ jsx10("h2", { className: "ui-drawer__title", id: titleId, children: title }),
+              /* @__PURE__ */ jsx10("button", { type: "button", className: "ui-drawer__close", "aria-label": closeLabel, onClick: onClose, children: /* @__PURE__ */ jsx10(Icon, { name: "x" }) })
             ] }),
-            /* @__PURE__ */ jsx9("div", { className: "ui-drawer__body", ref: body, children }),
-            footer && /* @__PURE__ */ jsx9("footer", { className: "ui-drawer__footer", children: footer })
+            /* @__PURE__ */ jsx10("div", { className: "ui-drawer__body", ref: body, children }),
+            footer && /* @__PURE__ */ jsx10("footer", { className: "ui-drawer__footer", children: footer })
           ]
         }
       )
@@ -566,12 +668,12 @@ function Drawer({
 }
 
 // src/CommandPalette.tsx
-import { useCallback, useEffect as useEffect2, useId as useId4, useMemo, useRef as useRef6, useState as useState2 } from "react";
+import { useCallback, useEffect as useEffect3, useId as useId5, useMemo, useRef as useRef7, useState as useState3 } from "react";
 import { createPortal as createPortal3 } from "react-dom";
 import { rankGroups, icon as icon2 } from "@apliteni/apliteni-ui";
-import { jsx as jsx10, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx11, jsxs as jsxs9 } from "react/jsx-runtime";
 var cx2 = (...a) => a.filter(Boolean).join(" ");
-var Glyph = ({ name, className }) => /* @__PURE__ */ jsx10("span", { className, "aria-hidden": "true", dangerouslySetInnerHTML: { __html: icon2(name) } });
+var Glyph = ({ name, className }) => /* @__PURE__ */ jsx11("span", { className, "aria-hidden": "true", dangerouslySetInnerHTML: { __html: icon2(name) } });
 var keysOf = (shortcut) => shortcut == null ? [] : Array.isArray(shortcut) ? shortcut : [shortcut];
 function CommandPalette({
   open,
@@ -586,13 +688,13 @@ function CommandPalette({
   rank = true,
   onQueryChange
 }) {
-  const uid = useId4().replace(/:/g, "");
-  const root = useRef6(null);
-  const panel = useRef6(null);
-  const search = useRef6(null);
-  const [query, setQuery] = useState2("");
-  const [at, setAt] = useState2(0);
-  useEffect2(() => {
+  const uid = useId5().replace(/:/g, "");
+  const root = useRef7(null);
+  const panel = useRef7(null);
+  const search = useRef7(null);
+  const [query, setQuery] = useState3("");
+  const [at, setAt] = useState3(0);
+  useEffect3(() => {
     if (open) {
       setQuery("");
       setAt(0);
@@ -604,7 +706,7 @@ function CommandPalette({
   );
   const rows = useMemo(() => shown.flatMap((g) => g.items).filter((it) => !isDisabled(it)), [shown]);
   const active = rows[Math.min(at, rows.length - 1)];
-  useEffect2(() => {
+  useEffect3(() => {
     setAt(0);
   }, [query]);
   const scope = useDialog(open, { root, panel, body: search }, onClose);
@@ -636,9 +738,9 @@ function CommandPalette({
   const listId = `${uid}-list`;
   let n = 0;
   return createPortal3(
-    /* @__PURE__ */ jsx10(DialogScope.Provider, { value: scope, children: /* @__PURE__ */ jsxs8("div", { className: cx2("ui-cmdk", density === "roomy" && "ui-cmdk--roomy", "is-open"), ref: root, children: [
-      /* @__PURE__ */ jsx10("div", { className: "ui-cmdk__scrim", onMouseDown: dismissOnScrim(onClose) }),
-      /* @__PURE__ */ jsxs8(
+    /* @__PURE__ */ jsx11(DialogScope.Provider, { value: scope, children: /* @__PURE__ */ jsxs9("div", { className: cx2("ui-cmdk", density === "roomy" && "ui-cmdk--roomy", "is-open"), ref: root, children: [
+      /* @__PURE__ */ jsx11("div", { className: "ui-cmdk__scrim", onMouseDown: dismissOnScrim(onClose) }),
+      /* @__PURE__ */ jsxs9(
         "div",
         {
           className: "ui-cmdk__panel",
@@ -649,9 +751,9 @@ function CommandPalette({
           ref: panel,
           onKeyDown,
           children: [
-            /* @__PURE__ */ jsxs8("div", { className: "ui-cmdk__search", ref: search, children: [
-              /* @__PURE__ */ jsx10(Glyph, { name: "search", className: "ui-cmdk__search-ic" }),
-              /* @__PURE__ */ jsx10(
+            /* @__PURE__ */ jsxs9("div", { className: "ui-cmdk__search", ref: search, children: [
+              /* @__PURE__ */ jsx11(Glyph, { name: "search", className: "ui-cmdk__search-ic" }),
+              /* @__PURE__ */ jsx11(
                 "input",
                 {
                   className: "ui-cmdk__input",
@@ -673,19 +775,19 @@ function CommandPalette({
                 }
               )
             ] }),
-            /* @__PURE__ */ jsx10("div", { className: "ui-cmdk__list", id: listId, role: "listbox", "aria-label": `${label} results`, children: shown.map((group, gi) => /* @__PURE__ */ jsxs8(
+            /* @__PURE__ */ jsx11("div", { className: "ui-cmdk__list", id: listId, role: "listbox", "aria-label": `${label} results`, children: shown.map((group, gi) => /* @__PURE__ */ jsxs9(
               "div",
               {
                 className: "ui-cmdk__group",
                 role: "group",
                 "aria-labelledby": group.label ? `${uid}-g${gi}` : void 0,
                 children: [
-                  group.label && /* @__PURE__ */ jsx10("div", { className: "ui-cmdk__group-head", id: `${uid}-g${gi}`, children: group.label }),
+                  group.label && /* @__PURE__ */ jsx11("div", { className: "ui-cmdk__group-head", id: `${uid}-g${gi}`, children: group.label }),
                   group.items.map((item) => {
                     const disabled = isDisabled(item);
                     const id = `${uid}-o${n++}`;
                     const on = item === active;
-                    return /* @__PURE__ */ jsxs8(
+                    return /* @__PURE__ */ jsxs9(
                       "div",
                       {
                         id,
@@ -705,13 +807,13 @@ function CommandPalette({
                         },
                         onClick: (e) => run(item, e.metaKey || e.ctrlKey),
                         children: [
-                          item.icon && /* @__PURE__ */ jsx10(Glyph, { name: item.icon, className: "ui-cmdk__ic" }),
-                          /* @__PURE__ */ jsxs8("span", { className: "ui-cmdk__main", children: [
-                            /* @__PURE__ */ jsx10("span", { className: "ui-cmdk__label", children: item.label }),
-                            item.description && /* @__PURE__ */ jsx10("span", { className: "ui-cmdk__desc", children: item.description })
+                          item.icon && /* @__PURE__ */ jsx11(Glyph, { name: item.icon, className: "ui-cmdk__ic" }),
+                          /* @__PURE__ */ jsxs9("span", { className: "ui-cmdk__main", children: [
+                            /* @__PURE__ */ jsx11("span", { className: "ui-cmdk__label", children: item.label }),
+                            item.description && /* @__PURE__ */ jsx11("span", { className: "ui-cmdk__desc", children: item.description })
                           ] }),
-                          item.badge && /* @__PURE__ */ jsx10("span", { className: "ui-cmdk__badge", children: item.badge }),
-                          keysOf(item.shortcut).length > 0 && /* @__PURE__ */ jsx10("span", { className: "ui-cmdk__keys", "aria-hidden": "true", children: keysOf(item.shortcut).map((k) => /* @__PURE__ */ jsx10("kbd", { className: "ui-cmdk__key", children: k }, k)) })
+                          item.badge && /* @__PURE__ */ jsx11("span", { className: "ui-cmdk__badge", children: item.badge }),
+                          keysOf(item.shortcut).length > 0 && /* @__PURE__ */ jsx11("span", { className: "ui-cmdk__keys", "aria-hidden": "true", children: keysOf(item.shortcut).map((k) => /* @__PURE__ */ jsx11("kbd", { className: "ui-cmdk__key", children: k }, k)) })
                         ]
                       },
                       item.id
@@ -721,20 +823,20 @@ function CommandPalette({
               },
               group.label ?? `g${gi}`
             )) }),
-            /* @__PURE__ */ jsx10("p", { className: "ui-cmdk__empty", hidden: countOf(shown) > 0, children: empty }),
-            /* @__PURE__ */ jsx10("p", { className: "ui-sr", role: "status", "aria-live": "polite", children: countOf(shown) === 0 ? "No results" : `${countOf(shown)} result${countOf(shown) === 1 ? "" : "s"}` }),
-            hint && /* @__PURE__ */ jsxs8("div", { className: "ui-cmdk__foot", "aria-hidden": "true", children: [
-              /* @__PURE__ */ jsxs8("span", { children: [
-                /* @__PURE__ */ jsx10("kbd", { className: "ui-cmdk__key", children: "\u2191" }),
-                /* @__PURE__ */ jsx10("kbd", { className: "ui-cmdk__key", children: "\u2193" }),
+            /* @__PURE__ */ jsx11("p", { className: "ui-cmdk__empty", hidden: countOf(shown) > 0, children: empty }),
+            /* @__PURE__ */ jsx11("p", { className: "ui-sr", role: "status", "aria-live": "polite", children: countOf(shown) === 0 ? "No results" : `${countOf(shown)} result${countOf(shown) === 1 ? "" : "s"}` }),
+            hint && /* @__PURE__ */ jsxs9("div", { className: "ui-cmdk__foot", "aria-hidden": "true", children: [
+              /* @__PURE__ */ jsxs9("span", { children: [
+                /* @__PURE__ */ jsx11("kbd", { className: "ui-cmdk__key", children: "\u2191" }),
+                /* @__PURE__ */ jsx11("kbd", { className: "ui-cmdk__key", children: "\u2193" }),
                 " move"
               ] }),
-              /* @__PURE__ */ jsxs8("span", { children: [
-                /* @__PURE__ */ jsx10("kbd", { className: "ui-cmdk__key", children: "\u21B5" }),
+              /* @__PURE__ */ jsxs9("span", { children: [
+                /* @__PURE__ */ jsx11("kbd", { className: "ui-cmdk__key", children: "\u21B5" }),
                 " run"
               ] }),
-              /* @__PURE__ */ jsxs8("span", { children: [
-                /* @__PURE__ */ jsx10("kbd", { className: "ui-cmdk__key", children: "esc" }),
+              /* @__PURE__ */ jsxs9("span", { children: [
+                /* @__PURE__ */ jsx11("kbd", { className: "ui-cmdk__key", children: "esc" }),
                 " close"
               ] })
             ] })
@@ -759,13 +861,13 @@ function rowId(uid, groups, item) {
 }
 
 // src/DataTable.tsx
-import { useMemo as useMemo2, useState as useState4 } from "react";
+import { useEffect as useEffect5, useId as useId7, useMemo as useMemo2, useRef as useRef9, useState as useState5 } from "react";
 import { DEFAULT_PAGE_SIZE as DEFAULT_PAGE_SIZE2 } from "@apliteni/apliteni-ui";
 
 // src/Pagination.tsx
-import { useEffect as useEffect3, useId as useId5, useRef as useRef7, useState as useState3 } from "react";
+import { useEffect as useEffect4, useId as useId6, useRef as useRef8, useState as useState4 } from "react";
 import { DEFAULT_PAGE_SIZE } from "@apliteni/apliteni-ui";
-import { jsx as jsx11, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx12, jsxs as jsxs10 } from "react/jsx-runtime";
 var GHOST_SM = "ui-btn ui-btn--ghost ui-btn--sm";
 var VARIANTS = ["steps", "numbered", "jump"];
 var cx3 = (...a) => a.filter(Boolean).join(" ");
@@ -807,11 +909,11 @@ function Pagination({
   onPageChange,
   onPageSizeChange
 }) {
-  const auto = useId5();
-  const [draft, setDraft] = useState3("");
-  const [drafting, setDrafting] = useState3(false);
-  const nav = useRef7(null);
-  const pressed = useRef7(null);
+  const auto = useId6();
+  const [draft, setDraft] = useState4("");
+  const [drafting, setDrafting] = useState4(false);
+  const nav = useRef8(null);
+  const pressed = useRef8(null);
   const uid = id ?? auto;
   const kind = VARIANTS.includes(variant) ? variant : "steps";
   const size = sizeOf(pageSize, DEFAULT_PAGE_SIZE);
@@ -820,7 +922,7 @@ function Pagination({
   const rows = counted ? Math.max(0, asRows) : null;
   const last = counted ? Math.max(1, Math.ceil(rows / size)) : null;
   const at = counted ? Math.min(Math.max(1, int(page, 1)), last) : Math.min(Math.max(1, int(page, 1)), CAP - 1);
-  const [draftFor, setDraftFor] = useState3(at);
+  const [draftFor, setDraftFor] = useState4(at);
   if (draftFor !== at) {
     setDraftFor(at);
     setDraft("");
@@ -828,7 +930,7 @@ function Pagination({
   }
   const offered = (Array.isArray(pageSizes) ? pageSizes : []).slice(0, 12).map((s) => int(s, 0)).filter((s) => s > 0);
   const sizes = offered.length ? [.../* @__PURE__ */ new Set([...offered, size])].sort((a, b) => a - b) : [];
-  useEffect3(() => {
+  useEffect4(() => {
     const was = pressed.current;
     if (!was || loading) return;
     pressed.current = null;
@@ -857,7 +959,7 @@ function Pagination({
   const step = (label_, target, disabled) => (
     // A control at an end is disabled and stays where it is: removing it slides
     // the next control under a pointer already travelling toward it.
-    /* @__PURE__ */ jsx11(
+    /* @__PURE__ */ jsx12(
       "button",
       {
         type: "button",
@@ -896,14 +998,14 @@ function Pagination({
   if (single) {
     steps = null;
   } else if (!counted) {
-    steps = /* @__PURE__ */ jsxs9("div", { className: "ui-pager__steps", children: [
+    steps = /* @__PURE__ */ jsxs10("div", { className: "ui-pager__steps", children: [
       step("Prev", Math.max(1, at - 1), atStart),
       step("Next", at + 1, !hasMore)
     ] });
   } else {
     let middle = null;
     if (kind === "numbered") {
-      middle = slotsFor(at, last).map((n, i) => n == null ? /* @__PURE__ */ jsx11("span", { className: "ui-pager__gap", "aria-hidden": "true", children: "\u2026" }, `gap${i}`) : /* @__PURE__ */ jsx11(
+      middle = slotsFor(at, last).map((n, i) => n == null ? /* @__PURE__ */ jsx12("span", { className: "ui-pager__gap", "aria-hidden": "true", children: "\u2026" }, `gap${i}`) : /* @__PURE__ */ jsx12(
         "button",
         {
           type: "button",
@@ -918,9 +1020,9 @@ function Pagination({
         n
       ));
     } else if (kind === "jump") {
-      middle = /* @__PURE__ */ jsxs9("span", { className: "ui-pager__jump", children: [
-        /* @__PURE__ */ jsx11("label", { htmlFor: `${uid}-jump`, children: "Page" }),
-        /* @__PURE__ */ jsx11(
+      middle = /* @__PURE__ */ jsxs10("span", { className: "ui-pager__jump", children: [
+        /* @__PURE__ */ jsx12("label", { htmlFor: `${uid}-jump`, children: "Page" }),
+        /* @__PURE__ */ jsx12(
           "input",
           {
             className: "ui-input ui-pager__jump-input",
@@ -943,13 +1045,13 @@ function Pagination({
             }
           }
         ),
-        /* @__PURE__ */ jsxs9("span", { className: "ui-pager__jump-of", children: [
+        /* @__PURE__ */ jsxs10("span", { className: "ui-pager__jump-of", children: [
           "of ",
           fmt(last)
         ] })
       ] });
     }
-    steps = /* @__PURE__ */ jsxs9("div", { className: "ui-pager__steps", children: [
+    steps = /* @__PURE__ */ jsxs10("div", { className: "ui-pager__steps", children: [
       ends ? step("First", 1, atStart) : null,
       step("Prev", Math.max(1, at - 1), atStart),
       middle,
@@ -957,7 +1059,7 @@ function Pagination({
       ends ? step("Last", last, atEnd) : null
     ] });
   }
-  return /* @__PURE__ */ jsxs9(
+  return /* @__PURE__ */ jsxs10(
     "nav",
     {
       ref: nav,
@@ -965,10 +1067,10 @@ function Pagination({
       "aria-label": label,
       "aria-busy": loading ? true : void 0,
       children: [
-        /* @__PURE__ */ jsx11("p", { className: "ui-pager__status", "aria-live": "polite", "aria-atomic": "true", children: status }),
-        sizes.length ? /* @__PURE__ */ jsxs9("div", { className: "ui-pager__size", children: [
-          /* @__PURE__ */ jsx11("label", { className: "ui-pager__size-label", htmlFor: `${uid}-size`, children: "Rows" }),
-          /* @__PURE__ */ jsx11(
+        /* @__PURE__ */ jsx12("p", { className: "ui-pager__status", "aria-live": "polite", "aria-atomic": "true", children: status }),
+        sizes.length ? /* @__PURE__ */ jsxs10("div", { className: "ui-pager__size", children: [
+          /* @__PURE__ */ jsx12("label", { className: "ui-pager__size-label", htmlFor: `${uid}-size`, children: "Rows" }),
+          /* @__PURE__ */ jsx12(
             "select",
             {
               className: "ui-select ui-pager__size-select",
@@ -976,7 +1078,7 @@ function Pagination({
               disabled: loading,
               value: size,
               onChange: (e) => onPageSizeChange?.(Number(e.target.value)),
-              children: sizes.map((s) => /* @__PURE__ */ jsx11("option", { value: s, children: fmt(s) }, s))
+              children: sizes.map((s) => /* @__PURE__ */ jsx12("option", { value: s, children: fmt(s) }, s))
             }
           )
         ] }) : null,
@@ -987,7 +1089,7 @@ function Pagination({
 }
 
 // src/DataTable.tsx
-import { Fragment as Fragment3, jsx as jsx12, jsxs as jsxs10 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx13, jsxs as jsxs11 } from "react/jsx-runtime";
 var NO_SORT = { key: void 0, dir: -1 };
 function sortTableRows(rows, sort) {
   if (sort.key === void 0) return [...rows];
@@ -1022,16 +1124,42 @@ function DataTable({
   total,
   hasMore = false
 }) {
-  const [localSort, setLocalSort] = useState4(
+  const scrollable = stickyHeader || pinnedIdentity;
+  const scrollId = useId7();
+  const scrollRegion = useRef9(null);
+  const [columnScroll, setColumnScroll] = useState5({ overflow: false, start: true, end: false });
+  const measureColumns = () => {
+    const region = scrollRegion.current;
+    if (region) setColumnScroll({
+      overflow: region.scrollWidth > region.clientWidth + 1,
+      start: region.scrollLeft <= 1,
+      end: region.scrollLeft + region.clientWidth >= region.scrollWidth - 1
+    });
+  };
+  useEffect5(() => {
+    if (!scrollable) return;
+    const region = scrollRegion.current;
+    if (!region) return;
+    const observer = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(measureColumns);
+    observer?.observe(region);
+    if (region.firstElementChild) observer?.observe(region.firstElementChild);
+    measureColumns();
+    return () => observer?.disconnect();
+  }, [scrollable, columns, rows]);
+  const scrollColumns = (direction) => {
+    const region = scrollRegion.current;
+    if (region) region.scrollBy({ left: direction * region.clientWidth / 2, behavior: "instant" });
+  };
+  const [localSort, setLocalSort] = useState5(
     { key: columns.find((c) => c.sortable)?.key, dir: -1 }
   );
   const owned = controlledPage === void 0;
   const sort = controlledSort ?? (owned ? localSort : NO_SORT);
   const sortIsKnown = owned || controlledSort !== void 0;
-  const [localPage, setLocalPage] = useState4(1);
-  const [localSize, setLocalSize] = useState4(DEFAULT_PAGE_SIZE2);
+  const [localPage, setLocalPage] = useState5(1);
+  const [localSize, setLocalSize] = useState5(DEFAULT_PAGE_SIZE2);
   const size = sizeOf(pageSize, owned ? localSize : rows.length || DEFAULT_PAGE_SIZE2);
-  const [pagedSort, setPagedSort] = useState4(sort);
+  const [pagedSort, setPagedSort] = useState5(sort);
   if (pagedSort.key !== sort.key || pagedSort.dir !== sort.dir) {
     setPagedSort(sort);
     setLocalPage(1);
@@ -1054,7 +1182,7 @@ function DataTable({
     onSortChange?.(next);
     toFirstPage();
   };
-  const caret = (k) => /* @__PURE__ */ jsx12(
+  const caret = (k) => /* @__PURE__ */ jsx13(
     "svg",
     {
       className: "rx-caret",
@@ -1066,29 +1194,36 @@ function DataTable({
       strokeLinejoin: "round",
       "aria-hidden": "true",
       focusable: "false",
-      children: sort.key === k ? /* @__PURE__ */ jsx12("path", { d: "m8 10 4 4 4-4" }) : /* @__PURE__ */ jsxs10(Fragment3, { children: [
-        /* @__PURE__ */ jsx12("path", { d: "m8 9 4-4 4 4" }),
-        /* @__PURE__ */ jsx12("path", { d: "m8 15 4 4 4-4" })
+      children: sort.key === k ? /* @__PURE__ */ jsx13("path", { d: "m8 10 4 4 4-4" }) : /* @__PURE__ */ jsxs11(Fragment3, { children: [
+        /* @__PURE__ */ jsx13("path", { d: "m8 9 4-4 4 4" }),
+        /* @__PURE__ */ jsx13("path", { d: "m8 15 4 4 4-4" })
       ] })
     }
   );
   const pageAllOn = selectable && slice.length > 0 && slice.every((r) => selected.has(r.name));
-  return /* @__PURE__ */ jsxs10(Fragment3, { children: [
-    /* @__PURE__ */ jsx12(
+  return /* @__PURE__ */ jsxs11(Fragment3, { children: [
+    scrollable && columnScroll.overflow && /* @__PURE__ */ jsxs11("div", { className: "ui-card__row", role: "group", "aria-label": `${scrollLabel} columns`, children: [
+      /* @__PURE__ */ jsx13(Button, { size: "sm", icon: "arrowLeft", "aria-controls": scrollId, disabled: columnScroll.start, onClick: () => scrollColumns(-1), children: "Previous columns" }),
+      /* @__PURE__ */ jsx13(Button, { size: "sm", iconRight: "arrowRight", "aria-controls": scrollId, disabled: columnScroll.end, onClick: () => scrollColumns(1), children: "More columns" })
+    ] }),
+    /* @__PURE__ */ jsx13(
       "div",
       {
+        id: scrollId,
+        ref: scrollRegion,
+        onScroll: measureColumns,
         className: stickyHeader || pinnedIdentity ? "ui-table-scroll" : void 0,
         role: stickyHeader || pinnedIdentity ? "region" : void 0,
         "aria-label": stickyHeader || pinnedIdentity ? scrollLabel : void 0,
         tabIndex: stickyHeader || pinnedIdentity ? 0 : void 0,
-        children: /* @__PURE__ */ jsxs10(
+        children: /* @__PURE__ */ jsxs11(
           "table",
           {
             className: ["ui-table ui-table--hover", (density === "dense" || !density && dense) && "ui-table--dense", density === "compact" && "ui-table--compact", stickyHeader && "ui-table--sticky", pinnedIdentity && "ui-table--pinned"].filter(Boolean).join(" "),
             "aria-busy": loading || void 0,
             children: [
-              /* @__PURE__ */ jsx12("thead", { children: /* @__PURE__ */ jsxs10("tr", { children: [
-                selectable ? /* @__PURE__ */ jsx12("th", { scope: "col", className: "ui-table__selection", children: /* @__PURE__ */ jsx12(
+              /* @__PURE__ */ jsx13("thead", { children: /* @__PURE__ */ jsxs11("tr", { children: [
+                selectable ? /* @__PURE__ */ jsx13("th", { scope: "col", className: "ui-table__selection", children: /* @__PURE__ */ jsx13(
                   "input",
                   {
                     type: "checkbox",
@@ -1101,13 +1236,13 @@ function DataTable({
                   // The sort control is a real <button> inside the header cell. It used to be
                   // role="button" ON the <th>, which threw away the columnheader role and put
                   // aria-sort on a role that forbids it.
-                  /* @__PURE__ */ jsx12(
+                  /* @__PURE__ */ jsx13(
                     "th",
                     {
                       scope: "col",
                       className: [pinnedIdentity && columnIndex === 0 && "ui-table__identity", c.num && "ui-table__num", c.sortable && "rx-sortable"].filter(Boolean).join(" "),
                       "aria-sort": sort.key === c.key ? sort.dir === 1 ? "ascending" : "descending" : c.sortable && sortIsKnown ? "none" : void 0,
-                      children: c.sortable ? /* @__PURE__ */ jsxs10("button", { type: "button", className: "rx-sort", onClick: () => onSort(c.key), children: [
+                      children: c.sortable ? /* @__PURE__ */ jsxs11("button", { type: "button", className: "rx-sort", onClick: () => onSort(c.key), children: [
                         c.label,
                         caret(c.key)
                       ] }) : c.label
@@ -1116,10 +1251,10 @@ function DataTable({
                   )
                 ))
               ] }) }),
-              /* @__PURE__ */ jsxs10("tbody", { children: [
-                !slice.length && /* @__PURE__ */ jsx12("tr", { children: /* @__PURE__ */ jsx12("td", { colSpan: columns.length + (selectable ? 1 : 0), children: loading ? "Loading rows\u2026" : empty }) }),
-                slice.map((r) => /* @__PURE__ */ jsxs10("tr", { children: [
-                  selectable ? /* @__PURE__ */ jsx12("td", { className: "ui-table__selection", children: /* @__PURE__ */ jsx12(
+              /* @__PURE__ */ jsxs11("tbody", { children: [
+                !slice.length && /* @__PURE__ */ jsx13("tr", { children: /* @__PURE__ */ jsx13("td", { colSpan: columns.length + (selectable ? 1 : 0), children: loading ? "Loading rows\u2026" : empty }) }),
+                slice.map((r) => /* @__PURE__ */ jsxs11("tr", { children: [
+                  selectable ? /* @__PURE__ */ jsx13("td", { className: "ui-table__selection", children: /* @__PURE__ */ jsx13(
                     "input",
                     {
                       type: "checkbox",
@@ -1128,7 +1263,7 @@ function DataTable({
                       onChange: () => onToggle(r.name)
                     }
                   ) }) : null,
-                  columns.map((c, columnIndex) => /* @__PURE__ */ jsx12("td", { className: [c.num && "ui-table__num", pinnedIdentity && columnIndex === 0 && "ui-table__identity"].filter(Boolean).join(" "), children: c.render ? c.render(r) : String(r[c.key]) }, c.key))
+                  columns.map((c, columnIndex) => /* @__PURE__ */ jsx13("td", { className: [c.num && "ui-table__num", pinnedIdentity && columnIndex === 0 && "ui-table__identity"].filter(Boolean).join(" "), children: c.render ? c.render(r) : String(r[c.key]) }, c.key))
                 ] }, r.name))
               ] })
             ]
@@ -1136,7 +1271,7 @@ function DataTable({
         )
       }
     ),
-    pager ? /* @__PURE__ */ jsx12(
+    pager ? /* @__PURE__ */ jsx13(
       Pagination,
       {
         page,
@@ -1161,7 +1296,7 @@ function DataTable({
 import { PAGE_SIZES as KIT_PAGE_SIZES, DEFAULT_PAGE_SIZE as KIT_DEFAULT_PAGE_SIZE } from "@apliteni/apliteni-ui";
 
 // src/Loading.tsx
-import { jsx as jsx13, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx14, jsxs as jsxs12 } from "react/jsx-runtime";
 var cx4 = (...a) => a.filter(Boolean).join(" ");
 function Skeleton({ lines = 3, width, height, radius, className }) {
   const widths = Array.isArray(lines) ? lines : null;
@@ -1171,19 +1306,19 @@ function Skeleton({ lines = 3, width, height, radius, className }) {
     if (!w && !height && !radius) return void 0;
     return { ...w && { width: w }, ...height && { height }, ...radius && { borderRadius: radius } };
   };
-  return /* @__PURE__ */ jsx13("div", { className: cx4("ui-skel", className), "aria-hidden": "true", children: Array.from({ length: n }, (_, i) => /* @__PURE__ */ jsx13("span", { className: "ui-skel__bar m-skeleton", style: styleFor(i) }, i)) });
+  return /* @__PURE__ */ jsx14("div", { className: cx4("ui-skel", className), "aria-hidden": "true", children: Array.from({ length: n }, (_, i) => /* @__PURE__ */ jsx14("span", { className: "ui-skel__bar m-skeleton", style: styleFor(i) }, i)) });
 }
 function SkeletonTable({ rows = 5, cols = 4, head = true }) {
-  const cells = Array.from({ length: Math.max(1, cols) }, (_, i) => /* @__PURE__ */ jsx13("span", { className: "ui-skel__bar m-skeleton" }, i));
-  return /* @__PURE__ */ jsxs11(
+  const cells = Array.from({ length: Math.max(1, cols) }, (_, i) => /* @__PURE__ */ jsx14("span", { className: "ui-skel__bar m-skeleton" }, i));
+  return /* @__PURE__ */ jsxs12(
     "div",
     {
       className: "ui-skel ui-skel--table",
       style: { "--skel-cols": Math.max(1, cols) },
       "aria-hidden": "true",
       children: [
-        head && /* @__PURE__ */ jsx13("div", { className: "ui-skel__row ui-skel__row--head", children: cells }),
-        Array.from({ length: Math.max(1, rows) }, (_, i) => /* @__PURE__ */ jsx13("div", { className: "ui-skel__row", children: cells }, i))
+        head && /* @__PURE__ */ jsx14("div", { className: "ui-skel__row ui-skel__row--head", children: cells }),
+        Array.from({ length: Math.max(1, rows) }, (_, i) => /* @__PURE__ */ jsx14("div", { className: "ui-skel__row", children: cells }, i))
       ]
     }
   );
@@ -1196,7 +1331,7 @@ function BusyRegion({
   className,
   children
 }) {
-  return /* @__PURE__ */ jsxs11(
+  return /* @__PURE__ */ jsxs12(
     "div",
     {
       className: cx4("ui-busy", className),
@@ -1204,8 +1339,8 @@ function BusyRegion({
       "aria-live": "polite",
       "aria-busy": busy,
       children: [
-        /* @__PURE__ */ jsx13("span", { className: "ui-sr", children: busy ? label : message }),
-        /* @__PURE__ */ jsx13("div", { className: "ui-busy__body", children: busy ? placeholder ?? /* @__PURE__ */ jsx13(Skeleton, { lines: 3 }) : children })
+        /* @__PURE__ */ jsx14("span", { className: "ui-sr", children: busy ? label : message }),
+        /* @__PURE__ */ jsx14("div", { className: "ui-busy__body", children: busy ? placeholder ?? /* @__PURE__ */ jsx14(Skeleton, { lines: 3 }) : children })
       ]
     }
   );
@@ -1218,15 +1353,15 @@ function Denied({
   className,
   children
 }) {
-  return /* @__PURE__ */ jsxs11("div", { className: cx4("ui-denied", className), children: [
-    /* @__PURE__ */ jsx13("div", { className: "ui-denied__seal", children: /* @__PURE__ */ jsx13(Icon, { name: icon6 }) }),
-    /* @__PURE__ */ jsx13("div", { className: "ui-denied__title", children: title }),
-    sub && /* @__PURE__ */ jsx13("div", { className: "ui-denied__sub", children: sub }),
-    need && /* @__PURE__ */ jsxs11("div", { className: "ui-denied__need", children: [
+  return /* @__PURE__ */ jsxs12("div", { className: cx4("ui-denied", className), children: [
+    /* @__PURE__ */ jsx14("div", { className: "ui-denied__seal", children: /* @__PURE__ */ jsx14(Icon, { name: icon6 }) }),
+    /* @__PURE__ */ jsx14("div", { className: "ui-denied__title", children: title }),
+    sub && /* @__PURE__ */ jsx14("div", { className: "ui-denied__sub", children: sub }),
+    need && /* @__PURE__ */ jsxs12("div", { className: "ui-denied__need", children: [
       "Needs ",
-      /* @__PURE__ */ jsx13("code", { className: "ui-code", children: need })
+      /* @__PURE__ */ jsx14("code", { className: "ui-code", children: need })
     ] }),
-    children && /* @__PURE__ */ jsx13("div", { className: "ui-denied__actions", children })
+    children && /* @__PURE__ */ jsx14("div", { className: "ui-denied__actions", children })
   ] });
 }
 
@@ -1234,16 +1369,16 @@ function Denied({
 import {
   Fragment as Fragment4,
   useCallback as useCallback2,
-  useEffect as useEffect4,
-  useId as useId6,
-  useRef as useRef8,
-  useState as useState5
+  useEffect as useEffect6,
+  useId as useId8,
+  useRef as useRef10,
+  useState as useState6
 } from "react";
 import { icon as icon3, dropdownMatch, dropdownFiltering } from "@apliteni/apliteni-ui";
-import { Fragment as Fragment5, jsx as jsx14, jsxs as jsxs12 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx15, jsxs as jsxs13 } from "react/jsx-runtime";
 var cx5 = (...a) => a.filter(Boolean).join(" ");
 var isRow = (it) => Boolean(it) && it !== "---" && !it.separator;
-var Glyph2 = ({ name, className, hidden }) => /* @__PURE__ */ jsx14(
+var Glyph2 = ({ name, className, hidden }) => /* @__PURE__ */ jsx15(
   "span",
   {
     className,
@@ -1256,7 +1391,7 @@ function RowBadge({ badge }) {
   const given = typeof badge === "string" ? "" : badge.tone || "";
   let tone = given || (/^live$/i.test(String(text2)) ? "live" : "neutral");
   if (!given && tone === "neutral" && /^(?:off|unset|disabled|archive|archived)$/i.test(text2)) tone = "state";
-  return /* @__PURE__ */ jsx14("span", { className: `ui-dropdown__badge is-${tone}`, children: text2 });
+  return /* @__PURE__ */ jsx15("span", { className: `ui-dropdown__badge is-${tone}`, children: text2 });
 }
 var keyOf = (it) => it.value != null ? `v:${it.value}` : `l:${it.label}`;
 var itemsIn = (panel) => Array.from(panel?.querySelectorAll("[data-dd-item]") ?? []).filter((el) => el.getAttribute("aria-disabled") !== "true" && !el.hidden);
@@ -1292,24 +1427,24 @@ function Dropdown({
   onSelect,
   row
 }) {
-  const [selfOpen, setSelfOpen] = useState5(defaultOpen);
+  const [selfOpen, setSelfOpen] = useState6(defaultOpen);
   const open = openProp ?? selfOpen;
-  const [pick, setPick] = useState5(null);
-  const [query, setQuery] = useState5(() => search && search !== true ? search.query || "" : "");
-  const [activeKey, setActiveKey] = useState5(null);
-  const root = useRef8(null);
-  const panel = useRef8(null);
-  const trigger = useRef8(null);
-  const field = useRef8(null);
-  const landOn = useRef8(null);
-  const at = useRef8("");
-  const auto = useId6().replace(/:/g, "");
+  const [pick, setPick] = useState6(null);
+  const [query, setQuery] = useState6(() => search && search !== true ? search.query || "" : "");
+  const [activeKey, setActiveKey] = useState6(null);
+  const root = useRef10(null);
+  const panel = useRef10(null);
+  const trigger = useRef10(null);
+  const field = useRef10(null);
+  const landOn = useRef10(null);
+  const at = useRef10("");
+  const auto = useId8().replace(/:/g, "");
   const uid = id ?? auto;
   const setOpen = useCallback2((next) => {
     if (openProp === void 0) setSelfOpen(next);
     onOpenChange?.(next);
   }, [openProp, onOpenChange]);
-  const close = useRef8(setOpen);
+  const close = useRef10(setOpen);
   useIsoLayoutEffect(() => {
     close.current = setOpen;
   });
@@ -1323,7 +1458,7 @@ function Dropdown({
   const given = rows.find((it) => it.selected);
   const givenKey = given ? keyOf(given) : null;
   const pickedKey = pick && pick.against === givenKey ? pick.key : null;
-  useEffect4(() => {
+  useEffect6(() => {
     if (pick && pick.against !== givenKey) setPick(null);
   }, [givenKey, pick]);
   const picked = pickedKey != null ? rows.find((it) => keyOf(it) === pickedKey) : void 0;
@@ -1337,7 +1472,7 @@ function Dropdown({
   const rowIds = /* @__PURE__ */ new Map();
   rows.forEach((it, i) => rowIds.set(it, `${uid}-opt-${i}`));
   const listId = `${uid}-list`;
-  useEffect4(() => {
+  useEffect6(() => {
     if (!open) return;
     const mine = () => close.current(false);
     for (const other of [...openNow]) other();
@@ -1346,7 +1481,7 @@ function Dropdown({
       openNow.delete(mine);
     };
   }, [open]);
-  useEffect4(() => {
+  useEffect6(() => {
     if (!open) return;
     const doc = root.current?.ownerDocument ?? document;
     const onClick = (e) => {
@@ -1471,7 +1606,7 @@ function Dropdown({
   };
   function renderRow(entry, key) {
     if (!isRow(entry)) {
-      return /* @__PURE__ */ jsx14("div", { className: "ui-dropdown__sep", role: "separator", hidden: filtering || void 0 }, key);
+      return /* @__PURE__ */ jsx15("div", { className: "ui-dropdown__sep", role: "separator", hidden: filtering || void 0 }, key);
     }
     const disabled = !!entry.disabled;
     const selected = selectedOf(entry);
@@ -1493,23 +1628,23 @@ function Dropdown({
       ...asLink ? { href: entry.href, ...entry.target ? { target: entry.target } : null } : null,
       ...sx ? { id: rowIds.get(entry), hidden: hiddenBy(entry) || void 0 } : null,
       onClick: (e) => choose(entry, e),
-      children: /* @__PURE__ */ jsxs12(Fragment5, { children: [
-        entry.icon && /* @__PURE__ */ jsx14(Glyph2, { name: entry.icon, className: "ui-dropdown__ic" }),
-        /* @__PURE__ */ jsxs12("span", { className: "ui-dropdown__main", children: [
-          /* @__PURE__ */ jsx14("span", { className: "ui-dropdown__label", children: entry.label }),
-          entry.description && /* @__PURE__ */ jsx14("span", { className: "ui-dropdown__desc", children: entry.description })
+      children: /* @__PURE__ */ jsxs13(Fragment5, { children: [
+        entry.icon && /* @__PURE__ */ jsx15(Glyph2, { name: entry.icon, className: "ui-dropdown__ic" }),
+        /* @__PURE__ */ jsxs13("span", { className: "ui-dropdown__main", children: [
+          /* @__PURE__ */ jsx15("span", { className: "ui-dropdown__label", children: entry.label }),
+          entry.description && /* @__PURE__ */ jsx15("span", { className: "ui-dropdown__desc", children: entry.description })
         ] }),
-        entry.badge ? /* @__PURE__ */ jsx14(RowBadge, { badge: entry.badge }) : null,
-        asOption && /* @__PURE__ */ jsx14(Glyph2, { name: "check", className: "ui-dropdown__tick", hidden: true })
+        entry.badge ? /* @__PURE__ */ jsx15(RowBadge, { badge: entry.badge }) : null,
+        asOption && /* @__PURE__ */ jsx15(Glyph2, { name: "check", className: "ui-dropdown__tick", hidden: true })
       ] })
     };
-    if (row) return /* @__PURE__ */ jsx14(Fragment4, { children: row(entry, props) }, key);
+    if (row) return /* @__PURE__ */ jsx15(Fragment4, { children: row(entry, props) }, key);
     const Tag = asLink ? "a" : "div";
-    return /* @__PURE__ */ jsx14(Tag, { ...props }, key);
+    return /* @__PURE__ */ jsx15(Tag, { ...props }, key);
   }
   const body = sections?.length ? sections.map((section, si) => {
     const gone = filtering && !(section.items || []).some((it) => isRow(it) && !hiddenBy(it));
-    return /* @__PURE__ */ jsxs12(
+    return /* @__PURE__ */ jsxs13(
       "div",
       {
         className: "ui-dropdown__section",
@@ -1517,7 +1652,7 @@ function Dropdown({
         "aria-label": section.label || void 0,
         hidden: gone || void 0,
         children: [
-          section.label && /* @__PURE__ */ jsx14("div", { className: "ui-dropdown__group", role: "presentation", children: section.label }),
+          section.label && /* @__PURE__ */ jsx15("div", { className: "ui-dropdown__group", role: "presentation", children: section.label }),
           (section.items || []).map((entry, i) => renderRow(entry, `s${si}-${i}`))
         ]
       },
@@ -1525,12 +1660,12 @@ function Dropdown({
     );
   }) : (items || []).map((entry, i) => renderRow(entry, `i${i}`));
   const cap = scroll && scroll !== true ? { maxHeight: typeof scroll === "number" ? `${scroll}px` : scroll } : void 0;
-  const none = sx && filtering && !visible.length ? /* @__PURE__ */ jsxs12(Fragment5, { children: [
-    /* @__PURE__ */ jsx14("span", { className: "ui-dropdown__none-title", children: sx.empty.replace("{q}", () => query.trim()) }),
-    /* @__PURE__ */ jsx14("span", { className: "ui-dropdown__none-hint", children: sx.hint })
+  const none = sx && filtering && !visible.length ? /* @__PURE__ */ jsxs13(Fragment5, { children: [
+    /* @__PURE__ */ jsx15("span", { className: "ui-dropdown__none-title", children: sx.empty.replace("{q}", () => query.trim()) }),
+    /* @__PURE__ */ jsx15("span", { className: "ui-dropdown__none-hint", children: sx.hint })
   ] }) : null;
-  return /* @__PURE__ */ jsxs12("div", { className: cx5("ui-dropdown", open && "open"), id, ref: root, onKeyDown, children: [
-    /* @__PURE__ */ jsxs12(
+  return /* @__PURE__ */ jsxs13("div", { className: cx5("ui-dropdown", open && "open"), id, ref: root, onKeyDown, children: [
+    /* @__PURE__ */ jsxs13(
       "button",
       {
         type: "button",
@@ -1545,15 +1680,15 @@ function Dropdown({
           setOpen(!open);
         },
         children: [
-          triggerContent != null ? triggerContent : /* @__PURE__ */ jsxs12(Fragment5, { children: [
-            label && /* @__PURE__ */ jsx14("span", { className: "ui-dropdown__pre", children: label }),
-            /* @__PURE__ */ jsx14("span", { className: "ui-dropdown__value", children: shown != null ? shown : placeholder })
+          triggerContent != null ? triggerContent : /* @__PURE__ */ jsxs13(Fragment5, { children: [
+            label && /* @__PURE__ */ jsx15("span", { className: "ui-dropdown__pre", children: label }),
+            /* @__PURE__ */ jsx15("span", { className: "ui-dropdown__value", children: shown != null ? shown : placeholder })
           ] }),
-          chevron && /* @__PURE__ */ jsx14("span", { className: "ui-dropdown__chevron", "aria-hidden": "true" })
+          chevron && /* @__PURE__ */ jsx15("span", { className: "ui-dropdown__chevron", "aria-hidden": "true" })
         ]
       }
     ),
-    /* @__PURE__ */ jsxs12(
+    /* @__PURE__ */ jsxs13(
       "div",
       {
         className: cx5(
@@ -1573,10 +1708,10 @@ function Dropdown({
         onMouseMove,
         children: [
           header,
-          sx ? /* @__PURE__ */ jsxs12(Fragment5, { children: [
-            /* @__PURE__ */ jsxs12("div", { className: "ui-dropdown__search", children: [
-              /* @__PURE__ */ jsx14(Glyph2, { name: "search", className: "ui-dropdown__search-ic", hidden: true }),
-              /* @__PURE__ */ jsx14(
+          sx ? /* @__PURE__ */ jsxs13(Fragment5, { children: [
+            /* @__PURE__ */ jsxs13("div", { className: "ui-dropdown__search", children: [
+              /* @__PURE__ */ jsx15(Glyph2, { name: "search", className: "ui-dropdown__search-ic", hidden: true }),
+              /* @__PURE__ */ jsx15(
                 "input",
                 {
                   className: "ui-dropdown__search-input",
@@ -1600,8 +1735,8 @@ function Dropdown({
                 }
               )
             ] }),
-            /* @__PURE__ */ jsx14("div", { className: "ui-dropdown__list", role: "listbox", id: listId, "aria-label": name, style: cap, children: body }),
-            /* @__PURE__ */ jsx14(
+            /* @__PURE__ */ jsx15("div", { className: "ui-dropdown__list", role: "listbox", id: listId, "aria-label": name, style: cap, children: body }),
+            /* @__PURE__ */ jsx15(
               "div",
               {
                 className: "ui-dropdown__none",
@@ -1626,7 +1761,7 @@ function strip(o) {
 }
 
 // src/BackLink.tsx
-import { jsx as jsx15, jsxs as jsxs13 } from "react/jsx-runtime";
+import { jsx as jsx16, jsxs as jsxs14 } from "react/jsx-runtime";
 var BARE = "Back";
 var SCRIPTED = /^javascript:/i;
 var LEADING = /^[\u0000-\u0020]+/;
@@ -1645,7 +1780,7 @@ function BackLink({
   const name = text(label).replace(SAID, "");
   const bare = !name || name.toLowerCase() === BARE.toLowerCase();
   const Tag = as ?? "a";
-  return /* @__PURE__ */ jsxs13(
+  return /* @__PURE__ */ jsxs14(
     Tag,
     {
       className: ["ui-back", className].filter(Boolean).join(" "),
@@ -1653,8 +1788,8 @@ function BackLink({
       "aria-label": bare ? void 0 : `${BARE} to ${name}`,
       ...rest,
       children: [
-        /* @__PURE__ */ jsx15(Icon, { name: "chevronLeft" }),
-        /* @__PURE__ */ jsx15("span", { className: "ui-back__label", children: bare ? BARE : name })
+        /* @__PURE__ */ jsx16(Icon, { name: "chevronLeft" }),
+        /* @__PURE__ */ jsx16("span", { className: "ui-back__label", children: bare ? BARE : name })
       ]
     }
   );
@@ -1662,42 +1797,43 @@ function BackLink({
 
 // src/TableValues.tsx
 import { numericValue, deltaValue } from "@apliteni/apliteni-ui";
-import { jsx as jsx16, jsxs as jsxs14 } from "react/jsx-runtime";
+import { jsx as jsx17, jsxs as jsxs15 } from "react/jsx-runtime";
 function NumericValue(props) {
-  return /* @__PURE__ */ jsx16("span", { dangerouslySetInnerHTML: { __html: numericValue(props) } });
+  return /* @__PURE__ */ jsx17("span", { dangerouslySetInnerHTML: { __html: numericValue(props) } });
 }
 function DeltaValue(props) {
-  return /* @__PURE__ */ jsx16("span", { dangerouslySetInnerHTML: { __html: deltaValue(props) } });
+  return /* @__PURE__ */ jsx17("span", { dangerouslySetInnerHTML: { __html: deltaValue(props) } });
 }
 function RowIdentity({ symbol, name, logo, href }) {
   const Tag = href ? "a" : "span";
-  return /* @__PURE__ */ jsxs14(Tag, { className: "ui-identity", href, children: [
-    /* @__PURE__ */ jsxs14("span", { className: "ui-identity__logo", "aria-hidden": "true", children: [
-      /* @__PURE__ */ jsx16("span", { children: symbol.slice(0, 1) }),
-      logo && /* @__PURE__ */ jsx16("img", { src: logo, alt: "", onLoad: (e) => {
+  return /* @__PURE__ */ jsxs15(Tag, { className: "ui-identity", href, children: [
+    /* @__PURE__ */ jsxs15("span", { className: "ui-identity__logo", "aria-hidden": "true", children: [
+      /* @__PURE__ */ jsx17("span", { children: symbol.slice(0, 1) }),
+      logo && /* @__PURE__ */ jsx17("img", { src: logo, alt: "", onLoad: (e) => {
         e.currentTarget.hidden = false;
       }, onError: (e) => {
         e.currentTarget.hidden = true;
       } })
     ] }),
-    /* @__PURE__ */ jsx16("span", { className: "ui-identity__symbol", children: symbol }),
-    /* @__PURE__ */ jsx16("span", { className: "ui-identity__name", children: name })
+    /* @__PURE__ */ jsx17("span", { className: "ui-identity__symbol", children: symbol }),
+    /* @__PURE__ */ jsx17("span", { className: "ui-identity__name", children: name })
   ] });
 }
 
 // src/Segmented.tsx
 import { segmentedNextIndex } from "@apliteni/apliteni-ui";
-import { jsx as jsx17 } from "react/jsx-runtime";
+import { jsx as jsx18 } from "react/jsx-runtime";
 function Segmented({ options, value, onChange, label, appearance = "pill", disabled = false }) {
   const enabled = options.filter((o) => !o.disabled);
   const tabValue = enabled.some((o) => o.value === value) ? value : enabled[0]?.value;
-  return /* @__PURE__ */ jsx17("div", { className: `ui-seg${appearance === "underline" ? " ui-seg--underline" : ""}`, role: "toolbar", "aria-label": label, children: options.map((option) => /* @__PURE__ */ jsx17(
+  return /* @__PURE__ */ jsx18("div", { className: `ui-seg${appearance === "underline" ? " ui-seg--underline" : ""}`, role: "toolbar", "aria-label": label, children: options.map((option) => /* @__PURE__ */ jsx18(
     "button",
     {
       type: "button",
       "data-value": option.value,
       disabled: disabled || option.disabled,
       className: value === option.value ? "is-active" : void 0,
+      "aria-label": option.ariaLabel,
       "aria-pressed": value === option.value,
       tabIndex: option.value === tabValue ? 0 : -1,
       onClick: () => onChange(option.value),
@@ -1716,16 +1852,16 @@ function Segmented({ options, value, onChange, label, appearance = "pill", disab
 }
 
 // src/FilterBar.tsx
-import { useLayoutEffect as useLayoutEffect3, useRef as useRef9 } from "react";
+import { useLayoutEffect as useLayoutEffect4, useRef as useRef11 } from "react";
 import { filterBar, initFilterBar } from "@apliteni/apliteni-ui";
-import { jsx as jsx18 } from "react/jsx-runtime";
+import { jsx as jsx19 } from "react/jsx-runtime";
 function FilterBar(props) {
-  const host = useRef9(null);
-  const latest = useRef9(props);
+  const host = useRef11(null);
+  const latest = useRef11(props);
   latest.current = props;
-  const controller = useRef9(null);
-  const initial = useRef9({ __html: filterBar(props) });
-  useLayoutEffect3(() => {
+  const controller = useRef11(null);
+  const initial = useRef11({ __html: filterBar(props) });
+  useLayoutEffect4(() => {
     const el = host.current;
     controller.current = initFilterBar(el, latest.current);
     const remove = (e) => latest.current.onRemove(e.detail.id);
@@ -1744,44 +1880,44 @@ function FilterBar(props) {
       el.removeEventListener("ui-filter-change", change);
     };
   }, []);
-  useLayoutEffect3(() => {
+  useLayoutEffect4(() => {
     controller.current?.update(props);
   }, [props.filters, props.label, props.clearLabel, props.disabled, props.busy]);
-  return /* @__PURE__ */ jsx18("div", { ref: host, dangerouslySetInnerHTML: initial.current });
+  return /* @__PURE__ */ jsx19("div", { ref: host, dangerouslySetInnerHTML: initial.current });
 }
 
 // src/KeyValueList.tsx
-import { jsx as jsx19, jsxs as jsxs15 } from "react/jsx-runtime";
+import { jsx as jsx20, jsxs as jsxs16 } from "react/jsx-runtime";
 function detail({ value, redacted }) {
-  if (redacted) return /* @__PURE__ */ jsxs15("span", { className: "ui-kv__hidden", children: [
-    /* @__PURE__ */ jsx19(Icon, { name: "eyeOff" }),
+  if (redacted) return /* @__PURE__ */ jsxs16("span", { className: "ui-kv__hidden", children: [
+    /* @__PURE__ */ jsx20(Icon, { name: "eyeOff" }),
     "Hidden"
   ] });
   if (value == null) return "\u2014";
   return typeof value === "boolean" ? String(value) : value;
 }
 function KeyValueList({ rows, columns = 1, className, ...rest }) {
-  return /* @__PURE__ */ jsx19("dl", { ...rest, className: ["ui-drawer__rows", "ui-kv", columns === 2 && "ui-kv--two-columns", className].filter(Boolean).join(" "), children: rows.map((row, index) => /* @__PURE__ */ jsxs15("div", { className: "ui-drawer__row", children: [
-    /* @__PURE__ */ jsx19("dt", { children: row.label }),
-    /* @__PURE__ */ jsx19("dd", { children: detail(row) })
+  return /* @__PURE__ */ jsx20("dl", { ...rest, className: ["ui-drawer__rows", "ui-kv", columns === 2 && "ui-kv--two-columns", className].filter(Boolean).join(" "), children: rows.map((row, index) => /* @__PURE__ */ jsxs16("div", { className: "ui-drawer__row", children: [
+    /* @__PURE__ */ jsx20("dt", { children: row.label }),
+    /* @__PURE__ */ jsx20("dd", { children: detail(row) })
   ] }, index)) });
 }
 function DrawerSection({ title, headingLevel = 3, className, children, ...rest }) {
   const Heading = `h${headingLevel}`;
-  return /* @__PURE__ */ jsxs15("section", { ...rest, className: ["ui-drawer__section", className].filter(Boolean).join(" "), children: [
-    title != null && /* @__PURE__ */ jsx19(Heading, { className: "ui-drawer__section-title", children: title }),
+  return /* @__PURE__ */ jsxs16("section", { ...rest, className: ["ui-drawer__section", className].filter(Boolean).join(" "), children: [
+    title != null && /* @__PURE__ */ jsx20(Heading, { className: "ui-drawer__section-title", children: title }),
     children
   ] });
 }
 
 // src/Snippet.tsx
-import { useEffect as useEffect5, useRef as useRef10, useState as useState6 } from "react";
-import { jsx as jsx20, jsxs as jsxs16 } from "react/jsx-runtime";
+import { useEffect as useEffect7, useRef as useRef12, useState as useState7 } from "react";
+import { jsx as jsx21, jsxs as jsxs17 } from "react/jsx-runtime";
 function Snippet({ label = "shell", code = "", reveal = false, copyLabel = "Copy" }) {
-  const [status, setStatus] = useState6("idle");
-  const request = useRef10(0);
-  const timer = useRef10(void 0);
-  useEffect5(() => {
+  const [status, setStatus] = useState7("idle");
+  const request = useRef12(0);
+  const timer = useRef12(void 0);
+  useEffect7(() => {
     setStatus("idle");
     return () => {
       request.current++;
@@ -1801,33 +1937,33 @@ function Snippet({ label = "shell", code = "", reveal = false, copyLabel = "Copy
       if (current === request.current) setStatus("failed");
     }
   }
-  return /* @__PURE__ */ jsxs16("div", { className: reveal ? "ui-snippet ui-snippet--reveal" : "ui-snippet", children: [
-    /* @__PURE__ */ jsxs16("div", { className: "ui-snippet__bar", children: [
-      /* @__PURE__ */ jsx20("span", { children: label }),
-      /* @__PURE__ */ jsxs16("button", { type: "button", className: "ui-snippet__copy", "aria-live": "polite", "aria-atomic": "true", onClick: copy, children: [
-        /* @__PURE__ */ jsx20(Icon, { name: status === "copied" ? "check" : "copy" }),
+  return /* @__PURE__ */ jsxs17("div", { className: reveal ? "ui-snippet ui-snippet--reveal" : "ui-snippet", children: [
+    /* @__PURE__ */ jsxs17("div", { className: "ui-snippet__bar", children: [
+      /* @__PURE__ */ jsx21("span", { children: label }),
+      /* @__PURE__ */ jsxs17("button", { type: "button", className: "ui-snippet__copy", "aria-live": "polite", "aria-atomic": "true", onClick: copy, children: [
+        /* @__PURE__ */ jsx21(Icon, { name: status === "copied" ? "check" : "copy" }),
         status === "copied" ? "Copied" : status === "failed" ? "Copy failed" : copyLabel
       ] })
     ] }),
-    /* @__PURE__ */ jsx20("pre", { children: code })
+    /* @__PURE__ */ jsx21("pre", { children: code })
   ] });
 }
 
 // src/Tabs.tsx
-import { useEffect as useEffect6, useId as useId7, useRef as useRef11 } from "react";
+import { useEffect as useEffect8, useId as useId9, useRef as useRef13 } from "react";
 import { playEntrance } from "@apliteni/apliteni-ui/motion";
-import { Fragment as Fragment6, jsx as jsx21, jsxs as jsxs17 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx22, jsxs as jsxs18 } from "react/jsx-runtime";
 function Tabs({ items, value, onChange, label }) {
-  const id = useId7();
-  const previous = useRef11(value);
-  const activePanel = useRef11(null);
-  const buttons = useRef11([]);
-  useEffect6(() => {
+  const id = useId9();
+  const previous = useRef13(value);
+  const activePanel = useRef13(null);
+  const buttons = useRef13([]);
+  useEffect8(() => {
     if (previous.current !== value) playEntrance(activePanel.current);
     previous.current = value;
   }, [value]);
-  return /* @__PURE__ */ jsxs17("div", { className: "ui-tabs", children: [
-    /* @__PURE__ */ jsx21("div", { className: "ui-tabs__list", role: "tablist", "aria-label": label, children: items.map((item, i) => /* @__PURE__ */ jsxs17(
+  return /* @__PURE__ */ jsxs18("div", { className: "ui-tabs", children: [
+    /* @__PURE__ */ jsx22("div", { className: "ui-tabs__list", role: "tablist", "aria-label": label, children: items.map((item, i) => /* @__PURE__ */ jsxs18(
       "button",
       {
         type: "button",
@@ -1865,7 +2001,7 @@ function Tabs({ items, value, onChange, label }) {
         },
         children: [
           item.label,
-          item.count != null && /* @__PURE__ */ jsxs17(Fragment6, { children: [
+          item.count != null && /* @__PURE__ */ jsxs18(Fragment6, { children: [
             " ",
             item.count
           ] })
@@ -1873,7 +2009,7 @@ function Tabs({ items, value, onChange, label }) {
       },
       item.value
     )) }),
-    /* @__PURE__ */ jsx21("div", { className: "ui-tabs__panels", children: items.map((item, i) => /* @__PURE__ */ jsx21(
+    /* @__PURE__ */ jsx22("div", { className: "ui-tabs__panels", children: items.map((item, i) => /* @__PURE__ */ jsx22(
       "div",
       {
         className: "ui-tabs__panel",
@@ -1891,14 +2027,14 @@ function Tabs({ items, value, onChange, label }) {
 }
 
 // src/Timeline.tsx
-import { useEffect as useEffect7, useRef as useRef12 } from "react";
+import { useEffect as useEffect9, useRef as useRef14 } from "react";
 import { playEntrance as playEntrance2, prefersReducedMotion } from "@apliteni/apliteni-ui/motion";
-import { jsx as jsx22, jsxs as jsxs18 } from "react/jsx-runtime";
+import { jsx as jsx23, jsxs as jsxs19 } from "react/jsx-runtime";
 var kindIcons = { person: "user", rule: "bolt", reversal: "refresh" };
 function Timeline({ events, className, ...rest }) {
-  const previousIds = useRef12(new Set(events.map((event) => event.id)));
-  const rows = useRef12(/* @__PURE__ */ new Map());
-  useEffect7(() => {
+  const previousIds = useRef14(new Set(events.map((event) => event.id)));
+  const rows = useRef14(/* @__PURE__ */ new Map());
+  useEffect9(() => {
     if (previousIds.current.size > 0 && !prefersReducedMotion()) {
       for (const event of events) {
         if (previousIds.current.has(event.id)) continue;
@@ -1910,7 +2046,7 @@ function Timeline({ events, className, ...rest }) {
     }
     previousIds.current = new Set(events.map((event) => event.id));
   }, [events]);
-  return /* @__PURE__ */ jsx22("ol", { ...rest, role: "list", className: ["ui-timeline", events.some((event) => event.kind) && "ui-timeline--kinds", className].filter(Boolean).join(" "), children: events.map((event, index) => /* @__PURE__ */ jsxs18(
+  return /* @__PURE__ */ jsx23("ol", { ...rest, role: "list", className: ["ui-timeline", events.some((event) => event.kind) && "ui-timeline--kinds", className].filter(Boolean).join(" "), children: events.map((event, index) => /* @__PURE__ */ jsxs19(
     "li",
     {
       className: "ui-timeline__event",
@@ -1919,20 +2055,20 @@ function Timeline({ events, className, ...rest }) {
         else rows.current.delete(event.id);
       },
       children: [
-        /* @__PURE__ */ jsx22("span", { "aria-hidden": "true", className: [
+        /* @__PURE__ */ jsx23("span", { "aria-hidden": "true", className: [
           "ui-timeline__marker",
           event.kind && "ui-timeline__marker--kind",
           event.kind === "reversal" && "ui-timeline__marker--reversal"
-        ].filter(Boolean).join(" "), children: event.kind && /* @__PURE__ */ jsx22(Icon, { name: kindIcons[event.kind] }) }),
-        /* @__PURE__ */ jsxs18("div", { className: "ui-timeline__head", children: [
-          /* @__PURE__ */ jsx22("span", { className: "ui-timeline__actor", children: event.actor }),
-          /* @__PURE__ */ jsx22("time", { dateTime: event.dateTime, children: event.timestamp }),
-          index === events.length - 1 && event.relativeTimestamp && /* @__PURE__ */ jsx22("span", { className: "ui-timeline__relative", children: event.relativeTimestamp })
+        ].filter(Boolean).join(" "), children: event.kind && /* @__PURE__ */ jsx23(Icon, { name: kindIcons[event.kind] }) }),
+        /* @__PURE__ */ jsxs19("div", { className: "ui-timeline__head", children: [
+          /* @__PURE__ */ jsx23("span", { className: "ui-timeline__actor", children: event.actor }),
+          /* @__PURE__ */ jsx23("time", { dateTime: event.dateTime, children: event.timestamp }),
+          index === events.length - 1 && event.relativeTimestamp && /* @__PURE__ */ jsx23("span", { className: "ui-timeline__relative", children: event.relativeTimestamp })
         ] }),
-        /* @__PURE__ */ jsx22("p", { className: "ui-timeline__description", children: event.description }),
-        (event.meta != null || event.undo) && /* @__PURE__ */ jsxs18("div", { className: "ui-timeline__meta", children: [
-          event.meta != null && /* @__PURE__ */ jsx22("span", { children: event.meta }),
-          event.undo && /* @__PURE__ */ jsx22(Button, { variant: "ghost", size: "xs", className: "ui-btn ui-btn--ghost ui-btn--xs ui-timeline__undo", "aria-label": event.undo.label, onClick: event.undo.onUndo, children: "Undo" })
+        /* @__PURE__ */ jsx23("p", { className: "ui-timeline__description", children: event.description }),
+        (event.meta != null || event.undo) && /* @__PURE__ */ jsxs19("div", { className: "ui-timeline__meta", children: [
+          event.meta != null && /* @__PURE__ */ jsx23("span", { children: event.meta }),
+          event.undo && /* @__PURE__ */ jsx23(Button, { variant: "ghost", size: "xs", className: "ui-btn ui-btn--ghost ui-btn--xs ui-timeline__undo", "aria-label": event.undo.label, onClick: event.undo.onUndo, children: "Undo" })
         ] })
       ]
     },
@@ -1941,20 +2077,20 @@ function Timeline({ events, className, ...rest }) {
 }
 
 // src/Field.tsx
-import { useEffect as useEffect8, useId as useId8, useRef as useRef13, useState as useState7 } from "react";
+import { useEffect as useEffect10, useId as useId10, useRef as useRef15, useState as useState8 } from "react";
 import { esc, icon as icon4 } from "@apliteni/apliteni-ui";
-import { jsx as jsx23, jsxs as jsxs19 } from "react/jsx-runtime";
+import { jsx as jsx24, jsxs as jsxs20 } from "react/jsx-runtime";
 function messages(id, hint, error) {
   return [error && `${id}-error`, hint && `${id}-hint`].filter(Boolean).join(" ") || void 0;
 }
 function Frame({ id, label, hint, error, required, children }) {
-  return /* @__PURE__ */ jsxs19("div", { className: "ui-field", children: [
-    /* @__PURE__ */ jsxs19("label", { className: "ui-field__label", htmlFor: id, children: [
+  return /* @__PURE__ */ jsxs20("div", { className: "ui-field", children: [
+    /* @__PURE__ */ jsxs20("label", { className: "ui-field__label", htmlFor: id, children: [
       label,
-      required && /* @__PURE__ */ jsx23("span", { className: "ui-field__req", "aria-hidden": "true", children: "*" })
+      required && /* @__PURE__ */ jsx24("span", { className: "ui-field__req", "aria-hidden": "true", children: "*" })
     ] }),
     children,
-    error && /* @__PURE__ */ jsx23(
+    error && /* @__PURE__ */ jsx24(
       "div",
       {
         id: `${id}-error`,
@@ -1963,17 +2099,17 @@ function Frame({ id, label, hint, error, required, children }) {
         dangerouslySetInnerHTML: { __html: icon4("alert") + esc(error) }
       }
     ),
-    hint && /* @__PURE__ */ jsx23("div", { id: `${id}-hint`, className: "ui-field__hint", children: hint })
+    hint && /* @__PURE__ */ jsx24("div", { id: `${id}-hint`, className: "ui-field__hint", children: hint })
   ] });
 }
 function wiring(id, hint, error) {
   return { id, "aria-describedby": messages(id, hint, error), "aria-invalid": error ? true : void 0 };
 }
 function TextField({ label, hint, error, required, type = "text", unit, className = "", ...props }) {
-  const id = useId8();
+  const id = useId10();
   const hasUnit = type === "number" && !!unit;
   const describedBy = [messages(id, hint, error), hasUnit ? `${id}-unit` : ""].filter(Boolean).join(" ") || void 0;
-  const control = /* @__PURE__ */ jsx23(
+  const control = /* @__PURE__ */ jsx24(
     "input",
     {
       ...props,
@@ -1985,14 +2121,14 @@ function TextField({ label, hint, error, required, type = "text", unit, classNam
       className: `ui-input${error ? " is-invalid" : ""} ${className}`
     }
   );
-  return /* @__PURE__ */ jsx23(Frame, { ...{ id, label, hint, error, required }, children: hasUnit ? /* @__PURE__ */ jsxs19("div", { className: "ui-field-number", children: [
+  return /* @__PURE__ */ jsx24(Frame, { ...{ id, label, hint, error, required }, children: hasUnit ? /* @__PURE__ */ jsxs20("div", { className: "ui-field-number", children: [
     control,
-    /* @__PURE__ */ jsx23("span", { id: `${id}-unit`, className: "ui-field-number__unit", children: unit })
+    /* @__PURE__ */ jsx24("span", { id: `${id}-unit`, className: "ui-field-number__unit", children: unit })
   ] }) : control });
 }
 function TextArea({ label, hint, error, required, className = "", ...props }) {
-  const id = useId8();
-  return /* @__PURE__ */ jsx23(Frame, { ...{ id, label, hint, error, required }, children: /* @__PURE__ */ jsx23(
+  const id = useId10();
+  return /* @__PURE__ */ jsx24(Frame, { ...{ id, label, hint, error, required }, children: /* @__PURE__ */ jsx24(
     "textarea",
     {
       rows: 4,
@@ -2004,8 +2140,8 @@ function TextArea({ label, hint, error, required, className = "", ...props }) {
   ) });
 }
 function SelectField({ label, hint, error, required, className = "", children, ...props }) {
-  const id = useId8();
-  return /* @__PURE__ */ jsx23(Frame, { ...{ id, label, hint, error, required }, children: /* @__PURE__ */ jsx23(
+  const id = useId10();
+  return /* @__PURE__ */ jsx24(Frame, { ...{ id, label, hint, error, required }, children: /* @__PURE__ */ jsx24(
     "select",
     {
       ...props,
@@ -2017,11 +2153,11 @@ function SelectField({ label, hint, error, required, className = "", children, .
   ) });
 }
 function FileField({ label, hint, error, required, disabled, onFileChange, className = "", ...props }) {
-  const id = useId8();
-  const input = useRef13(null);
-  const [file, setFile] = useState7(null);
-  const [dragging, setDragging] = useState7(false);
-  useEffect8(() => {
+  const id = useId10();
+  const input = useRef15(null);
+  const [file, setFile] = useState8(null);
+  const [dragging, setDragging] = useState8(false);
+  useEffect10(() => {
     const form = input.current?.form;
     const reset = () => {
       setFile(null);
@@ -2034,7 +2170,7 @@ function FileField({ label, hint, error, required, disabled, onFileChange, class
     setFile(next);
     onFileChange?.(next);
   };
-  return /* @__PURE__ */ jsx23(Frame, { ...{ id, label, hint, error, required }, children: /* @__PURE__ */ jsxs19(
+  return /* @__PURE__ */ jsx24(Frame, { ...{ id, label, hint, error, required }, children: /* @__PURE__ */ jsxs20(
     "div",
     {
       className: `ui-file${dragging && !disabled ? " is-dragging" : ""}${file ? " has-file" : ""}${error ? " is-invalid" : ""}${disabled ? " is-disabled" : ""}`,
@@ -2055,12 +2191,12 @@ function FileField({ label, hint, error, required, disabled, onFileChange, class
         update(transfer.files[0]);
       },
       children: [
-        /* @__PURE__ */ jsx23("span", { className: "ui-file__glyph", children: /* @__PURE__ */ jsx23(Icon, { name: "upload" }) }),
-        /* @__PURE__ */ jsx23("div", { "aria-live": "polite", children: file ? file.name : "Drop a file here" }),
-        /* @__PURE__ */ jsx23("div", { children: "or choose one from your device" }),
-        /* @__PURE__ */ jsxs19("span", { className: "ui-file__choose", children: [
-          /* @__PURE__ */ jsx23("span", { className: "ui-btn ui-btn--secondary ui-btn--sm", "aria-hidden": "true", "aria-disabled": disabled || void 0, children: file ? "Replace file" : "Choose file" }),
-          /* @__PURE__ */ jsx23(
+        /* @__PURE__ */ jsx24("span", { className: "ui-file__glyph", children: /* @__PURE__ */ jsx24(Icon, { name: "upload" }) }),
+        /* @__PURE__ */ jsx24("div", { "aria-live": "polite", children: file ? file.name : "Drop a file here" }),
+        /* @__PURE__ */ jsx24("div", { children: "or choose one from your device" }),
+        /* @__PURE__ */ jsxs20("span", { className: "ui-file__choose", children: [
+          /* @__PURE__ */ jsx24("span", { className: "ui-btn ui-btn--secondary ui-btn--sm", "aria-hidden": "true", "aria-disabled": disabled || void 0, children: file ? "Replace file" : "Choose file" }),
+          /* @__PURE__ */ jsx24(
             "input",
             {
               ...props,
@@ -2080,9 +2216,9 @@ function FileField({ label, hint, error, required, disabled, onFileChange, class
 }
 
 // src/Toast.tsx
-import { createContext as createContext2, useCallback as useCallback3, useContext as useContext2, useEffect as useEffect9, useLayoutEffect as useLayoutEffect4, useRef as useRef14, useState as useState8 } from "react";
+import { createContext as createContext2, useCallback as useCallback3, useContext as useContext2, useEffect as useEffect11, useLayoutEffect as useLayoutEffect5, useRef as useRef16, useState as useState9 } from "react";
 import { createPortal as createPortal4 } from "react-dom";
-import { jsx as jsx24, jsxs as jsxs20 } from "react/jsx-runtime";
+import { jsx as jsx25, jsxs as jsxs21 } from "react/jsx-runtime";
 var Context = createContext2(null);
 var glyphs = { success: "circleCheck", danger: "circleX", warn: "circleAlert", info: "info", neutral: "bolt" };
 function useToast() {
@@ -2091,12 +2227,12 @@ function useToast() {
   return push;
 }
 function Notice({ notice, remove }) {
-  const root = useRef14(null);
-  const [leaving2, setLeaving] = useState8(false);
-  const dismissed = useRef14(false);
-  const remaining = useRef14(5e3);
-  const [hovered, setHovered] = useState8(false);
-  const [focused, setFocused] = useState8(false);
+  const root = useRef16(null);
+  const [leaving2, setLeaving] = useState9(false);
+  const dismissed = useRef16(false);
+  const remaining = useRef16(5e3);
+  const [hovered, setHovered] = useState9(false);
+  const [focused, setFocused] = useState9(false);
   const paused = hovered || focused;
   const tone = notice.tone ?? "success";
   const dismiss = useCallback3(() => {
@@ -2105,7 +2241,7 @@ function Notice({ notice, remove }) {
     if (typeof matchMedia === "function" && matchMedia("(prefers-reduced-motion: reduce)").matches) remove();
     else setLeaving(true);
   }, [remove]);
-  useEffect9(() => {
+  useEffect11(() => {
     if (leaving2) {
       const element = root.current;
       const finish = (event) => {
@@ -2119,7 +2255,7 @@ function Notice({ notice, remove }) {
       };
     }
   }, [leaving2, remove]);
-  useEffect9(() => {
+  useEffect11(() => {
     if (leaving2 || notice.action || paused) return;
     const started = Date.now();
     const timer = setTimeout(dismiss, remaining.current);
@@ -2128,7 +2264,7 @@ function Notice({ notice, remove }) {
       remaining.current = Math.max(0, remaining.current - (Date.now() - started));
     };
   }, [dismiss, leaving2, notice.action, paused]);
-  return /* @__PURE__ */ jsxs20(
+  return /* @__PURE__ */ jsxs21(
     "div",
     {
       ref: root,
@@ -2142,12 +2278,12 @@ function Notice({ notice, remove }) {
         if (!event.currentTarget.contains(event.relatedTarget)) setFocused(false);
       },
       children: [
-        /* @__PURE__ */ jsx24("span", { className: "ui-toast__icon", children: /* @__PURE__ */ jsx24(Icon, { name: glyphs[tone] }) }),
-        /* @__PURE__ */ jsxs20("div", { className: "ui-toast__body", children: [
-          /* @__PURE__ */ jsx24("div", { className: "ui-toast__title", children: notice.title }),
-          notice.text && /* @__PURE__ */ jsx24("div", { className: "ui-toast__text", children: notice.text })
+        /* @__PURE__ */ jsx25("span", { className: "ui-toast__icon", children: /* @__PURE__ */ jsx25(Icon, { name: glyphs[tone] }) }),
+        /* @__PURE__ */ jsxs21("div", { className: "ui-toast__body", children: [
+          /* @__PURE__ */ jsx25("div", { className: "ui-toast__title", children: notice.title }),
+          notice.text && /* @__PURE__ */ jsx25("div", { className: "ui-toast__text", children: notice.text })
         ] }),
-        notice.action && /* @__PURE__ */ jsx24(
+        notice.action && /* @__PURE__ */ jsx25(
           "button",
           {
             type: "button",
@@ -2162,8 +2298,8 @@ function Notice({ notice, remove }) {
             children: notice.action.label
           }
         ),
-        /* @__PURE__ */ jsx24("button", { type: "button", className: "ui-toast__close", "aria-label": "Dismiss", disabled: leaving2, onClick: dismiss, children: /* @__PURE__ */ jsx24(Icon, { name: "x" }) }),
-        !notice.action && /* @__PURE__ */ jsx24(
+        /* @__PURE__ */ jsx25("button", { type: "button", className: "ui-toast__close", "aria-label": "Dismiss", disabled: leaving2, onClick: dismiss, children: /* @__PURE__ */ jsx25(Icon, { name: "x" }) }),
+        !notice.action && /* @__PURE__ */ jsx25(
           "span",
           {
             className: "ui-toast__timer is-running",
@@ -2177,7 +2313,7 @@ function Notice({ notice, remove }) {
 }
 var REACH = "--rx-toast-stack";
 function usePublishedReach(stack2, count) {
-  useLayoutEffect4(() => {
+  useLayoutEffect5(() => {
     const element = stack2.current;
     const view = element?.ownerDocument.defaultView;
     const root = element?.ownerDocument.documentElement;
@@ -2196,28 +2332,28 @@ function usePublishedReach(stack2, count) {
   }, [stack2, count]);
 }
 function Toast({ children }) {
-  const [entries, setEntries] = useState8([]);
-  const nextId = useRef14(0);
-  const stack2 = useRef14(null);
+  const [entries, setEntries] = useState9([]);
+  const nextId = useRef16(0);
+  const stack2 = useRef16(null);
   const push = useCallback3((notice) => {
     const id = nextId.current++;
     const remove = () => setEntries((current) => current.filter((entry) => entry.id !== id));
     setEntries((current) => [...current, { id, notice, remove }]);
   }, []);
   usePublishedReach(stack2, entries.length);
-  return /* @__PURE__ */ jsxs20(Context.Provider, { value: push, children: [
+  return /* @__PURE__ */ jsxs21(Context.Provider, { value: push, children: [
     children,
     typeof document !== "undefined" && createPortal4(
-      /* @__PURE__ */ jsx24("div", { className: "ui-toast-stack rx-toast-stack", ref: stack2, children: entries.map((entry) => /* @__PURE__ */ jsx24(Notice, { notice: entry.notice, remove: entry.remove }, entry.id)) }),
+      /* @__PURE__ */ jsx25("div", { className: "ui-toast-stack rx-toast-stack", ref: stack2, children: entries.map((entry) => /* @__PURE__ */ jsx25(Notice, { notice: entry.notice, remove: entry.remove }, entry.id)) }),
       document.body
     )
   ] });
 }
 
 // src/AppShell.tsx
-import { useEffect as useEffect10, useId as useId9, useState as useState9 } from "react";
+import { useEffect as useEffect12, useId as useId11, useState as useState10 } from "react";
 import { applyTheme, paletteHotkey, prism, railCollapsed, themeIcon, themeName } from "@apliteni/apliteni-ui";
-import { Fragment as Fragment7, jsx as jsx25, jsxs as jsxs21 } from "react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx26, jsxs as jsxs22 } from "react/jsx-runtime";
 var path = (value) => value.split(/[?#]/)[0].replace(/\/+$/, "") || "/";
 function AppShell({
   sections,
@@ -2238,21 +2374,21 @@ function AppShell({
   palette,
   renderLink
 }) {
-  const uid = useId9();
-  const [collapsed, setCollapsed] = useState9(defaultCollapsed);
-  const [search, setSearch] = useState9(false);
-  const [more, setMore] = useState9(false);
-  const [theme, setTheme] = useState9("dark");
+  const uid = useId11();
+  const [collapsed, setCollapsed] = useState10(defaultCollapsed);
+  const [search, setSearch] = useState10(false);
+  const [more, setMore] = useState10(false);
+  const [theme, setTheme] = useState10("dark");
   const current = path(pathname);
   const active = sections.filter((section) => current === path(section.href) || path(section.href) !== "/" && current.startsWith(`${path(section.href)}/`)).sort((a, b) => path(b.href).length - path(a.href).length)[0];
-  useEffect10(() => {
+  useEffect12(() => {
     setCollapsed(railCollapsed() ?? defaultCollapsed);
   }, [defaultCollapsed]);
-  useEffect10(() => {
+  useEffect12(() => {
     setMore(false);
     setSearch(false);
   }, [pathname]);
-  useEffect10(() => {
+  useEffect12(() => {
     const root = document.documentElement;
     const sync2 = () => setTheme(root.getAttribute("data-theme") === "light" ? "light" : "dark");
     sync2();
@@ -2260,7 +2396,7 @@ function AppShell({
     observer.observe(root, { attributes: true, attributeFilter: ["data-theme"] });
     return () => observer.disconnect();
   }, []);
-  useEffect10(() => {
+  useEffect12(() => {
     const hotkey = (event) => {
       if (!(event.metaKey || event.ctrlKey) || event.altKey || event.shiftKey || event.key.toLowerCase() !== "k") return;
       const target = event.target;
@@ -2288,44 +2424,44 @@ function AppShell({
       onClick: (event) => {
         if (!event.metaKey && !event.ctrlKey && !event.shiftKey && !event.altKey) setMore(false);
       },
-      children: /* @__PURE__ */ jsxs21(Fragment7, { children: [
-        /* @__PURE__ */ jsx25("span", { className: "ui-nav__ic", children: /* @__PURE__ */ jsx25(Icon, { name: section.icon }) }),
-        /* @__PURE__ */ jsx25("span", { className: "ui-nav__label", children: section.label }),
-        section.count != null && /* @__PURE__ */ jsx25("span", { className: "ui-nav__badge", children: section.count })
+      children: /* @__PURE__ */ jsxs22(Fragment7, { children: [
+        /* @__PURE__ */ jsx26("span", { className: "ui-nav__ic", children: /* @__PURE__ */ jsx26(Icon, { name: section.icon }) }),
+        /* @__PURE__ */ jsx26("span", { className: "ui-nav__label", children: section.label }),
+        section.count != null && /* @__PURE__ */ jsx26("span", { className: "ui-nav__badge", children: section.count })
       ] })
     };
-    return /* @__PURE__ */ jsx25("li", { children: renderLink ? renderLink(section, linkProps) : /* @__PURE__ */ jsx25("a", { ...linkProps }) }, section.href);
+    return /* @__PURE__ */ jsx26("li", { children: renderLink ? renderLink(section, linkProps) : /* @__PURE__ */ jsx26("a", { ...linkProps }) }, section.href);
   });
   const foldLabel = collapsed ? "Expand sidebar" : "Collapse sidebar";
   const visible = sections.length > 4 ? sections.slice(0, 3) : sections;
   const remaining = sections.slice(visible.length);
   const initials = account.name.trim().split(/\s+/).map((part) => part[0]).slice(0, 2).join("");
-  return /* @__PURE__ */ jsxs21("div", { className: `ui-app ui-app--topbar ui-react-app${collapsed ? " is-collapsed" : ""}`, children: [
-    /* @__PURE__ */ jsxs21("div", { className: "ui-app__rail", children: [
-      /* @__PURE__ */ jsx25("div", { className: "ui-app__head", children: /* @__PURE__ */ jsxs21("a", { className: "ui-app__brand", href: brandHref, "aria-label": word, children: [
-        brand ?? /* @__PURE__ */ jsx25("i", { "aria-hidden": "true", className: "ui-react-app__mark", dangerouslySetInnerHTML: { __html: prism(uid, 24) } }),
-        /* @__PURE__ */ jsx25("span", { children: word })
+  return /* @__PURE__ */ jsxs22("div", { className: `ui-app ui-app--topbar ui-react-app${collapsed ? " is-collapsed" : ""}`, children: [
+    /* @__PURE__ */ jsxs22("div", { className: "ui-app__rail", children: [
+      /* @__PURE__ */ jsx26("div", { className: "ui-app__head", children: /* @__PURE__ */ jsxs22("a", { className: "ui-app__brand", href: brandHref, "aria-label": word, children: [
+        brand ?? /* @__PURE__ */ jsx26("i", { "aria-hidden": "true", className: "ui-react-app__mark", dangerouslySetInnerHTML: { __html: prism(uid, 24) } }),
+        /* @__PURE__ */ jsx26("span", { children: word })
       ] }) }),
-      /* @__PURE__ */ jsx25("nav", { className: "ui-nav ui-nav--side", "aria-label": "Sections", children: /* @__PURE__ */ jsx25("ul", { className: "ui-nav__list", children: links(sections) }) }),
-      /* @__PURE__ */ jsx25("div", { className: "ui-app__foot", children: /* @__PURE__ */ jsx25("div", { className: "ui-app__fold-row", children: /* @__PURE__ */ jsxs21("button", { type: "button", className: "ui-nav__item ui-app__fold", "aria-expanded": !collapsed, "aria-label": foldLabel, onClick: fold, children: [
-        /* @__PURE__ */ jsx25("span", { className: "ui-nav__ic", children: /* @__PURE__ */ jsxs21("svg", { className: "ui-icon", viewBox: "0 0 24 24", "aria-hidden": "true", children: [
-          /* @__PURE__ */ jsx25("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2" }),
-          /* @__PURE__ */ jsx25("path", { className: "ui-app__fold-seam", d: "M9 3v18" })
+      /* @__PURE__ */ jsx26("nav", { className: "ui-nav ui-nav--side", "aria-label": "Sections", children: /* @__PURE__ */ jsx26("ul", { className: "ui-nav__list", children: links(sections) }) }),
+      /* @__PURE__ */ jsx26("div", { className: "ui-app__foot", children: /* @__PURE__ */ jsx26("div", { className: "ui-app__fold-row", children: /* @__PURE__ */ jsxs22("button", { type: "button", className: "ui-nav__item ui-app__fold", "aria-expanded": !collapsed, "aria-label": foldLabel, onClick: fold, children: [
+        /* @__PURE__ */ jsx26("span", { className: "ui-nav__ic", children: /* @__PURE__ */ jsxs22("svg", { className: "ui-icon", viewBox: "0 0 24 24", "aria-hidden": "true", children: [
+          /* @__PURE__ */ jsx26("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2" }),
+          /* @__PURE__ */ jsx26("path", { className: "ui-app__fold-seam", d: "M9 3v18" })
         ] }) }),
-        /* @__PURE__ */ jsx25("span", { className: "ui-nav__label", children: foldLabel })
+        /* @__PURE__ */ jsx26("span", { className: "ui-nav__label", children: foldLabel })
       ] }) }) })
     ] }),
-    /* @__PURE__ */ jsxs21("div", { className: "ui-app__well", children: [
-      /* @__PURE__ */ jsxs21("header", { className: "ui-app__bar", children: [
-        /* @__PURE__ */ jsxs21("button", { type: "button", className: "ui-app__search", "aria-haspopup": "dialog", onClick: () => setSearch(true), children: [
-          /* @__PURE__ */ jsx25("span", { className: "ui-app__search-ic", children: /* @__PURE__ */ jsx25(Icon, { name: "search" }) }),
-          /* @__PURE__ */ jsx25("span", { className: "ui-app__search-txt", children: "Search or run a command\u2026" }),
-          /* @__PURE__ */ jsx25("kbd", { className: "ui-cmdk__key", children: paletteHotkey() })
+    /* @__PURE__ */ jsxs22("div", { className: "ui-app__well", children: [
+      /* @__PURE__ */ jsxs22("header", { className: "ui-app__bar", children: [
+        /* @__PURE__ */ jsxs22("button", { type: "button", className: "ui-app__search", "aria-haspopup": "dialog", onClick: () => setSearch(true), children: [
+          /* @__PURE__ */ jsx26("span", { className: "ui-app__search-ic", children: /* @__PURE__ */ jsx26(Icon, { name: "search" }) }),
+          /* @__PURE__ */ jsx26("span", { className: "ui-app__search-txt", children: "Search or run a command\u2026" }),
+          /* @__PURE__ */ jsx26("kbd", { className: "ui-cmdk__key", children: paletteHotkey() })
         ] }),
-        /* @__PURE__ */ jsx25("span", { className: "ui-app__bar-gap" }),
+        /* @__PURE__ */ jsx26("span", { className: "ui-app__bar-gap" }),
         bandControl,
-        /* @__PURE__ */ jsx25("button", { type: "button", className: "toggle", "aria-label": themeName(theme), title: themeName(theme), onClick: () => applyTheme(theme === "light" ? "dark" : "light"), children: /* @__PURE__ */ jsx25("span", { className: "ic", "aria-hidden": "true", dangerouslySetInnerHTML: { __html: themeIcon(theme) } }) }),
-        /* @__PURE__ */ jsx25("div", { className: "ui-app__user ui-app__user--bar", children: /* @__PURE__ */ jsx25(
+        /* @__PURE__ */ jsx26("button", { type: "button", className: "toggle", "aria-label": themeName(theme), title: themeName(theme), onClick: () => applyTheme(theme === "light" ? "dark" : "light"), children: /* @__PURE__ */ jsx26("span", { className: "ic", "aria-hidden": "true", dangerouslySetInnerHTML: { __html: themeIcon(theme) } }) }),
+        /* @__PURE__ */ jsx26("div", { className: "ui-app__user ui-app__user--bar", children: /* @__PURE__ */ jsx26(
           Dropdown,
           {
             variant: "menu",
@@ -2334,27 +2470,27 @@ function AppShell({
             ariaLabel: `Signed in as ${account.name}, ${account.email}`,
             triggerClass: "ui-app__user-trigger",
             panelClass: "ui-app__user-panel",
-            triggerContent: /* @__PURE__ */ jsx25("span", { className: "ui-app__av", "aria-hidden": "true", children: initials }),
-            header: /* @__PURE__ */ jsxs21("div", { className: "ui-dropdown__head", children: [
-              /* @__PURE__ */ jsx25("b", { children: account.name }),
-              /* @__PURE__ */ jsx25("span", { children: account.email })
+            triggerContent: /* @__PURE__ */ jsx26("span", { className: "ui-app__av", "aria-hidden": "true", children: initials }),
+            header: /* @__PURE__ */ jsxs22("div", { className: "ui-dropdown__head", children: [
+              /* @__PURE__ */ jsx26("b", { children: account.name }),
+              /* @__PURE__ */ jsx26("span", { children: account.email })
             ] }),
             items: [{ label: "Sign out", icon: "logout", danger: true }],
             onSelect: onSignOut
           }
         ) })
       ] }),
-      /* @__PURE__ */ jsxs21("main", { className: `ui-app__main${width === "wide" ? " ui-app__main--wide" : ""}`, children: [
-        back && /* @__PURE__ */ jsx25(BackLink, { ...back }),
-        /* @__PURE__ */ jsx25("h1", { children: title }),
-        lede && /* @__PURE__ */ jsx25("p", { className: "ui-app__sub", children: lede }),
-        actions && /* @__PURE__ */ jsx25("div", { className: "ui-react-app__actions", children: actions }),
-        /* @__PURE__ */ jsx25("div", { className: "ui-app__body", children })
+      /* @__PURE__ */ jsxs22("main", { className: `ui-app__main${width === "wide" ? " ui-app__main--wide" : ""}`, children: [
+        back && /* @__PURE__ */ jsx26(BackLink, { ...back }),
+        /* @__PURE__ */ jsx26("h1", { children: title }),
+        lede && /* @__PURE__ */ jsx26("p", { className: "ui-app__sub", children: lede }),
+        actions && /* @__PURE__ */ jsx26("div", { className: "ui-react-app__actions", children: actions }),
+        /* @__PURE__ */ jsx26("div", { className: "ui-app__body", children })
       ] })
     ] }),
-    /* @__PURE__ */ jsx25("nav", { className: "ui-nav ui-react-app__bottom", "aria-label": "Sections on mobile", children: /* @__PURE__ */ jsxs21("ul", { className: "ui-nav__list", children: [
+    /* @__PURE__ */ jsx26("nav", { className: "ui-nav ui-react-app__bottom", "aria-label": "Sections on mobile", children: /* @__PURE__ */ jsxs22("ul", { className: "ui-nav__list", children: [
       links(visible),
-      remaining.length > 0 && /* @__PURE__ */ jsx25("li", { children: /* @__PURE__ */ jsxs21(
+      remaining.length > 0 && /* @__PURE__ */ jsx26("li", { children: /* @__PURE__ */ jsxs22(
         "button",
         {
           type: "button",
@@ -2363,20 +2499,20 @@ function AppShell({
           "aria-expanded": more,
           onClick: () => setMore(true),
           children: [
-            /* @__PURE__ */ jsx25("span", { className: "ui-nav__ic", children: /* @__PURE__ */ jsx25(Icon, { name: "moreHorizontal" }) }),
-            /* @__PURE__ */ jsx25("span", { className: "ui-nav__label", children: "More" })
+            /* @__PURE__ */ jsx26("span", { className: "ui-nav__ic", children: /* @__PURE__ */ jsx26(Icon, { name: "moreHorizontal" }) }),
+            /* @__PURE__ */ jsx26("span", { className: "ui-nav__label", children: "More" })
           ]
         }
       ) })
     ] }) }),
-    /* @__PURE__ */ jsx25(Drawer, { open: more, onClose: () => setMore(false), title: "More sections", side: "bottom", children: /* @__PURE__ */ jsx25("nav", { className: "ui-nav ui-nav--side", "aria-label": "More sections", children: /* @__PURE__ */ jsx25("ul", { className: "ui-nav__list", children: links(remaining) }) }) }),
-    /* @__PURE__ */ jsx25(CommandPalette, { ...palette ?? { groups: [{ items: sections.map((section) => ({ id: section.href, ...section })) }] }, open: search, onClose: () => setSearch(false) })
+    /* @__PURE__ */ jsx26(Drawer, { open: more, onClose: () => setMore(false), title: "More sections", side: "bottom", children: /* @__PURE__ */ jsx26("nav", { className: "ui-nav ui-nav--side", "aria-label": "More sections", children: /* @__PURE__ */ jsx26("ul", { className: "ui-nav__list", children: links(remaining) }) }) }),
+    /* @__PURE__ */ jsx26(CommandPalette, { ...palette ?? { groups: [{ items: sections.map((section) => ({ id: section.href, ...section })) }] }, open: search, onClose: () => setSearch(false) })
   ] });
 }
 
 // src/EmptyState.tsx
 import { icon as kitIcon2, illo } from "@apliteni/apliteni-ui";
-import { jsx as jsx26, jsxs as jsxs22 } from "react/jsx-runtime";
+import { jsx as jsx27, jsxs as jsxs23 } from "react/jsx-runtime";
 var cases = {
   "first-run": { title: "Nothing needs you yet", sub: "New items will appear here when they need your attention.", icon: "check" },
   "no-matches": { title: "No results in this view", sub: "Try another search or clear your filters.", icon: "search" },
@@ -2388,18 +2524,18 @@ function EmptyState({ variant = "first-run", title, sub, icon: icon6, art, actio
   const heading = title ?? preset.title;
   const guidance = sub ?? preset.sub;
   const glyph = icon6 ?? preset.icon;
-  return /* @__PURE__ */ jsxs22("div", { className: "ui-empty", children: [
-    art ? typeof art === "string" ? /* @__PURE__ */ jsx26("div", { className: "ui-empty__art", dangerouslySetInnerHTML: { __html: /<svg/.test(art) ? art : illo(art) } }) : /* @__PURE__ */ jsx26("div", { className: "ui-empty__art", "aria-hidden": "true", children: art }) : glyph ? /* @__PURE__ */ jsx26("div", { className: "ui-empty__icon", dangerouslySetInnerHTML: { __html: kitIcon2(glyph) } }) : null,
-    heading && /* @__PURE__ */ jsx26("div", { className: "ui-empty__title", children: heading }),
-    guidance && /* @__PURE__ */ jsx26("div", { className: "ui-empty__sub", children: guidance }),
-    actions && /* @__PURE__ */ jsx26("div", { className: "ui-empty__actions", children: actions })
+  return /* @__PURE__ */ jsxs23("div", { className: "ui-empty", children: [
+    art ? typeof art === "string" ? /* @__PURE__ */ jsx27("div", { className: "ui-empty__art", dangerouslySetInnerHTML: { __html: /<svg/.test(art) ? art : illo(art) } }) : /* @__PURE__ */ jsx27("div", { className: "ui-empty__art", "aria-hidden": "true", children: art }) : glyph ? /* @__PURE__ */ jsx27("div", { className: "ui-empty__icon", dangerouslySetInnerHTML: { __html: kitIcon2(glyph) } }) : null,
+    heading && /* @__PURE__ */ jsx27("div", { className: "ui-empty__title", children: heading }),
+    guidance && /* @__PURE__ */ jsx27("div", { className: "ui-empty__sub", children: guidance }),
+    actions && /* @__PURE__ */ jsx27("div", { className: "ui-empty__actions", children: actions })
   ] });
 }
 
 // src/ThemeToggle.tsx
 import { useSyncExternalStore } from "react";
 import { icon as icon5 } from "@apliteni/apliteni-ui";
-import { jsx as jsx27, jsxs as jsxs23 } from "react/jsx-runtime";
+import { jsx as jsx28, jsxs as jsxs24 } from "react/jsx-runtime";
 var STORAGE_KEY = "apliteni-strategy-theme";
 var CHOICE_EVENT = "apliteni-theme-choice";
 var THEME_INIT_SCRIPT = `(()=>{let t;try{t=localStorage.getItem('apliteni-strategy-theme')}catch{}document.documentElement.setAttribute('data-theme',t==='dark'||t==='light'?t:window.matchMedia?.('(prefers-color-scheme: light)').matches?'light':'dark')})()`;
@@ -2457,10 +2593,10 @@ function ThemeToggle({ labelled = false }) {
     }
     window.dispatchEvent(new Event(CHOICE_EVENT));
   };
-  const button = /* @__PURE__ */ jsx27("button", { type: "button", className: "toggle", "aria-label": name, title: name, onClick: toggle, children: /* @__PURE__ */ jsx27("span", { className: "ic", "aria-hidden": "true", dangerouslySetInnerHTML: { __html: icon5(theme === "auto" ? "monitor" : theme === "light" ? "sun" : "moon") } }) });
-  return labelled ? /* @__PURE__ */ jsxs23("span", { className: "ui-theme-toggle", children: [
+  const button = /* @__PURE__ */ jsx28("button", { type: "button", className: "toggle", "aria-label": name, title: name, onClick: toggle, children: /* @__PURE__ */ jsx28("span", { className: "ic", "aria-hidden": "true", dangerouslySetInnerHTML: { __html: icon5(theme === "auto" ? "monitor" : theme === "light" ? "sun" : "moon") } }) });
+  return labelled ? /* @__PURE__ */ jsxs24("span", { className: "ui-theme-toggle", children: [
     button,
-    /* @__PURE__ */ jsxs23("span", { children: [
+    /* @__PURE__ */ jsxs24("span", { children: [
       label,
       " theme"
     ] })
@@ -2510,6 +2646,7 @@ export {
   ThemeToggle,
   Timeline,
   Toast,
+  Tooltip,
   sortTableRows,
   useToast
 };