@apliteni/apliteni-ui 0.129.0 → 0.131.0

package/react/dist/index.js

@@ -94,7 +94,7 @@ var cx = (...a) => a.filter(Boolean).join(" ");
 var Button = forwardRef3(function Button2({
   variant = "secondary",
   size = "md",
-  icon: icon7,
+  icon: icon8,
   leading,
   iconRight,
   iconOnly,
@@ -158,7 +158,7 @@ var Button = forwardRef3(function Button2({
     className
   );
   const labelled = rest["aria-label"] != null || rest["aria-labelledby"] != null;
-  const fallback = typeof children === "string" && children.trim() ? children.trim() : icon7;
+  const fallback = typeof children === "string" && children.trim() ? children.trim() : icon8;
   const named = iconOnly && !labelled && fallback ? { "aria-label": fallback, title: rest.title ?? fallback } : {};
   const Root = href === void 0 ? "button" : "a";
   return /* @__PURE__ */ jsxs3(
@@ -203,7 +203,7 @@ var Button = forwardRef3(function Button2({
         if (!blockKey(event)) onKeyUp?.(event);
       },
       children: [
-        leading != null ? /* @__PURE__ */ jsx4("span", { "aria-hidden": "true", style: { display: "inline-flex" }, children: leading }) : icon7 && /* @__PURE__ */ jsx4(Icon, { name: icon7 }),
+        leading != null ? /* @__PURE__ */ jsx4("span", { "aria-hidden": "true", style: { display: "inline-flex" }, children: leading }) : icon8 && /* @__PURE__ */ jsx4(Icon, { name: icon8 }),
         !iconOnly && renderedChildren != null && /* @__PURE__ */ jsx4("span", { className: "ui-btn__label-slot", children: /* @__PURE__ */ jsx4("span", { className: "ui-btn__label", ref: labelRef, children: renderedChildren }) }),
         iconRight && /* @__PURE__ */ jsx4(Icon, { name: iconRight }),
         busy && /* @__PURE__ */ jsxs3("span", { className: "ui-btn__dots", "aria-hidden": "true", children: [
@@ -223,21 +223,46 @@ function Badge({ variant = "neutral", children }) {
   return /* @__PURE__ */ jsx5("span", { className: cls, children });
 }
 
+// src/primitives/Avatar.tsx
+import { useCallback, useState } from "react";
+import { icon as icon2, avatarHue, avatarInitials } from "@apliteni/apliteni-ui";
+import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
+function Avatar({ personKey, name, src, size = 24, empty = false }) {
+  const [failedSrc, setFailedSrc] = useState(null);
+  const [loadedSrc, setLoadedSrc] = useState(null);
+  const inspectPhoto = useCallback((img) => {
+    if (!img || !src || !img.complete) return;
+    if (img.naturalWidth > 0) setLoadedSrc(src);
+    else setFailedSrc(src);
+  }, [src]);
+  const base = ["ui-avatar", size === 32 && "ui-avatar--32"];
+  const cls = (...more) => [...base, ...more].filter(Boolean).join(" ");
+  if (empty) return /* @__PURE__ */ jsx6("span", { className: cls("ui-avatar--empty"), "aria-hidden": "true" });
+  const letters = avatarInitials(name);
+  if (!letters) {
+    return /* @__PURE__ */ jsx6("span", { className: cls("ui-avatar--anon"), "aria-hidden": "true", dangerouslySetInnerHTML: { __html: icon2("user") } });
+  }
+  return /* @__PURE__ */ jsxs4("span", { className: cls(`ui-avatar--h${avatarHue(personKey ?? name)}`), "data-initials": letters.length, "aria-hidden": "true", children: [
+    letters,
+    src && src !== failedSrc && /* @__PURE__ */ jsx6("img", { ref: inspectPhoto, src, alt: "", loading: "lazy", className: loadedSrc === src ? "is-loaded" : void 0, onLoad: () => setLoadedSrc(src), onError: () => setFailedSrc(src) })
+  ] });
+}
+
 // src/primitives/Pill.tsx
 import { forwardRef as forwardRef4 } from "react";
-import { jsx as jsx6 } from "react/jsx-runtime";
+import { jsx as jsx7 } from "react/jsx-runtime";
 var Pill = forwardRef4(function Pill2({
   variant,
   className,
   ...rest
 }, ref) {
   const classes = ["ui-pill", variant && `ui-pill--${variant}`, className].filter(Boolean).join(" ");
-  return /* @__PURE__ */ jsx6("span", { ...rest, ref, className: classes });
+  return /* @__PURE__ */ jsx7("span", { ...rest, ref, className: classes });
 });
 
 // src/primitives/StatusDot.tsx
 import { forwardRef as forwardRef5 } from "react";
-import { jsx as jsx7 } from "react/jsx-runtime";
+import { jsx as jsx8 } from "react/jsx-runtime";
 var StatusDot = forwardRef5(function StatusDot2({
   live = false,
   className,
@@ -245,7 +270,7 @@ var StatusDot = forwardRef5(function StatusDot2({
 }, ref) {
   const labelled = Boolean(rest["aria-label"]?.trim() || rest["aria-labelledby"]?.trim());
   const classes = ["ui-dot", live && "is-live", className].filter(Boolean).join(" ");
-  return /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsx8(
     "span",
     {
       role: labelled ? "img" : void 0,
@@ -258,27 +283,27 @@ var StatusDot = forwardRef5(function StatusDot2({
 });
 
 // src/primitives/Card.tsx
-import { jsx as jsx8, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx9, jsxs as jsxs5 } from "react/jsx-runtime";
 function Card({ title, sub, level = 2, className, children }) {
   const n = Number(level);
   const Heading = `h${[2, 3, 4, 5, 6].includes(n) ? n : 2}`;
   const titled = title != null && title !== false && title !== "";
-  return /* @__PURE__ */ jsxs4("div", { className: ["ui-card", className].filter(Boolean).join(" "), children: [
-    titled && /* @__PURE__ */ jsx8(Heading, { className: "ui-card__title", children: title }),
-    sub != null && /* @__PURE__ */ jsx8("div", { className: "ui-card__sub", children: sub }),
+  return /* @__PURE__ */ jsxs5("div", { className: ["ui-card", className].filter(Boolean).join(" "), children: [
+    titled && /* @__PURE__ */ jsx9(Heading, { className: "ui-card__title", children: title }),
+    sub != null && /* @__PURE__ */ jsx9("div", { className: "ui-card__sub", children: sub }),
     children
   ] });
 }
 
 // src/primitives/Callout.tsx
 import { calloutIcons, icon as kitIcon } from "@apliteni/apliteni-ui";
-import { jsx as jsx9, jsxs as jsxs5 } from "react/jsx-runtime";
-function Callout({ variant, icon: icon7 = calloutIcons[variant ?? "neutral"], children, actions }) {
-  return /* @__PURE__ */ jsxs5("div", { className: `ui-callout${variant && variant !== "neutral" ? ` ui-callout--${variant}` : ""}`, role: variant === "danger" ? "alert" : void 0, children: [
-    /* @__PURE__ */ jsx9("span", { className: "ui-callout__icon", dangerouslySetInnerHTML: { __html: kitIcon(icon7) } }),
-    /* @__PURE__ */ jsxs5("div", { className: "ui-callout__body", children: [
+import { jsx as jsx10, jsxs as jsxs6 } from "react/jsx-runtime";
+function Callout({ variant, icon: icon8 = calloutIcons[variant ?? "neutral"], children, actions }) {
+  return /* @__PURE__ */ jsxs6("div", { className: `ui-callout${variant && variant !== "neutral" ? ` ui-callout--${variant}` : ""}`, role: variant === "danger" ? "alert" : void 0, children: [
+    /* @__PURE__ */ jsx10("span", { className: "ui-callout__icon", dangerouslySetInnerHTML: { __html: kitIcon(icon8) } }),
+    /* @__PURE__ */ jsxs6("div", { className: "ui-callout__body", children: [
       children,
-      actions != null && /* @__PURE__ */ jsx9("div", { className: "ui-toolbar ui-callout__actions", children: actions })
+      actions != null && /* @__PURE__ */ jsx10("div", { className: "ui-toolbar ui-callout__actions", children: actions })
     ] })
   ] });
 }
@@ -326,8 +351,8 @@ function placeTip(host, mark, tip, bound, placement = "top") {
 }
 
 // src/Tooltip.tsx
-import { useEffect, useId as useId2, useLayoutEffect as useLayoutEffect2, useRef as useRef2, useState } from "react";
-import { Fragment, jsx as jsx10, jsxs as jsxs6 } from "react/jsx-runtime";
+import { useEffect, useId as useId2, useLayoutEffect as useLayoutEffect2, useRef as useRef2, useState as useState2 } from "react";
+import { Fragment, jsx as jsx11, jsxs as jsxs7 } from "react/jsx-runtime";
 var DOC_EVENTS = ["pointerdown", "pointercancel", "click", "keydown", "touchend"];
 var CAPTURED = /* @__PURE__ */ new Set(["pointerdown", "pointercancel"]);
 var wirings = /* @__PURE__ */ new WeakMap();
@@ -354,10 +379,10 @@ function wireDocument(doc, handlers) {
     wirings.delete(doc);
   };
 }
-var Text = ({ label = "", value = "", detail: detail2 = "" }) => /* @__PURE__ */ jsxs6(Fragment, { children: [
-  /* @__PURE__ */ jsx10("span", { className: "ui-tip__label", hidden: !label, children: label }),
-  /* @__PURE__ */ jsx10("span", { className: "ui-tip__value", hidden: !value, children: value }),
-  /* @__PURE__ */ jsx10("span", { className: "ui-tip__detail", hidden: !detail2, children: detail2 })
+var Text = ({ label = "", value = "", detail: detail2 = "" }) => /* @__PURE__ */ jsxs7(Fragment, { children: [
+  /* @__PURE__ */ jsx11("span", { className: "ui-tip__label", hidden: !label, children: label }),
+  /* @__PURE__ */ jsx11("span", { className: "ui-tip__value", hidden: !value, children: value }),
+  /* @__PURE__ */ jsx11("span", { className: "ui-tip__detail", hidden: !detail2, children: detail2 })
 ] });
 function Tooltip({ text: text2, label = text2, value, detail: detail2, placement = "top", children }) {
   const id = useId2();
@@ -369,7 +394,7 @@ function Tooltip({ text: text2, label = text2, value, detail: detail2, placement
   const pointerKind = useRef2("");
   const pendingClick = useRef2(null);
   const dismissed = useRef2(null);
-  const [mark, setMark] = useState(null);
+  const [mark, setMark] = useState2(null);
   const active = useRef2(null);
   active.current = mark;
   const open = mark !== null;
@@ -435,7 +460,7 @@ function Tooltip({ text: text2, label = text2, value, detail: detail2, placement
       view.removeEventListener("resize", reposition);
     };
   }, [open, placement]);
-  return /* @__PURE__ */ jsxs6(
+  return /* @__PURE__ */ jsxs7(
     "span",
     {
       ref: host,
@@ -507,15 +532,15 @@ function Tooltip({ text: text2, label = text2, value, detail: detail2, placement
         }
       },
       children: [
-        /* @__PURE__ */ jsx10("span", { ref: trigger, className: "ui-focusable", tabIndex: 0, "aria-describedby": id, children }),
-        /* @__PURE__ */ jsx10("span", { ref: tip, id, "data-tip": "", role: "tooltip", className: `ui-tip${open ? " is-open" : ""}`, children: /* @__PURE__ */ jsx10(Text, { label, value, detail: detail2 }) })
+        /* @__PURE__ */ jsx11("span", { ref: trigger, className: "ui-focusable", tabIndex: 0, "aria-describedby": id, children }),
+        /* @__PURE__ */ jsx11("span", { ref: tip, id, "data-tip": "", role: "tooltip", className: `ui-tip${open ? " is-open" : ""}`, children: /* @__PURE__ */ jsx11(Text, { label, value, detail: detail2 }) })
       ]
     }
   );
 }
 
 // src/primitives/StatBand.tsx
-import { Fragment as Fragment2, jsx as jsx11, jsxs as jsxs7 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx12, jsxs as jsxs8 } from "react/jsx-runtime";
 var GLYPH = { up: "arrowUp", down: "arrowDown", flat: "minus" };
 var directionOf = (text2) => {
   const t = text2.trim();
@@ -523,20 +548,20 @@ var directionOf = (text2) => {
 };
 var hasChange = (d) => !!d && d.value != null && d.value !== "";
 function ContextRow({ caption, delta, basisId }) {
-  if (!hasChange(delta)) return caption ? /* @__PURE__ */ jsx11("dd", { className: "ui-stat__caption", children: caption }) : null;
-  const lead = caption ? /* @__PURE__ */ jsxs7(Fragment2, { children: [
-    /* @__PURE__ */ jsx11("span", { className: "ui-stat__caption", children: caption }),
+  if (!hasChange(delta)) return caption ? /* @__PURE__ */ jsx12("dd", { className: "ui-stat__caption", children: caption }) : null;
+  const lead = caption ? /* @__PURE__ */ jsxs8(Fragment2, { children: [
+    /* @__PURE__ */ jsx12("span", { className: "ui-stat__caption", children: caption }),
     " "
   ] }) : null;
   const dir = delta.direction && GLYPH[delta.direction] ? delta.direction : directionOf(delta.value);
   const own = delta.basis || "";
-  return /* @__PURE__ */ jsxs7("dd", { className: "ui-stat__delta", "aria-describedby": !own && basisId ? basisId : void 0, children: [
+  return /* @__PURE__ */ jsxs8("dd", { className: "ui-stat__delta", "aria-describedby": !own && basisId ? basisId : void 0, children: [
     lead,
-    /* @__PURE__ */ jsx11(Icon, { name: GLYPH[dir] }),
-    delta.tooltip ? /* @__PURE__ */ jsx11(Tooltip, { text: delta.tooltip, children: /* @__PURE__ */ jsx11("span", { className: "ui-stat__change", children: delta.value }) }) : /* @__PURE__ */ jsx11("span", { className: "ui-stat__change", children: delta.value }),
-    own ? /* @__PURE__ */ jsxs7(Fragment2, { children: [
+    /* @__PURE__ */ jsx12(Icon, { name: GLYPH[dir] }),
+    delta.tooltip ? /* @__PURE__ */ jsx12(Tooltip, { text: delta.tooltip, children: /* @__PURE__ */ jsx12("span", { className: "ui-stat__change", children: delta.value }) }) : /* @__PURE__ */ jsx12("span", { className: "ui-stat__change", children: delta.value }),
+    own ? /* @__PURE__ */ jsxs8(Fragment2, { children: [
       " ",
-      /* @__PURE__ */ jsx11("span", { className: "ui-stat__basis", children: own })
+      /* @__PURE__ */ jsx12("span", { className: "ui-stat__basis", children: own })
     ] }) : null
   ] });
 }
@@ -545,16 +570,16 @@ function StatBand({ stats, variant = "tiles", basis, basisId: sharedBasisId, lab
   const v = ["band", "tiles", "open"].includes(variant) ? variant : "tiles";
   const basisId = basis ? `${id || auto}-basis` : sharedBasisId;
   const root = ["ui-stats", `ui-stats--${v}`, v === "band" && "ui-card"].filter(Boolean).join(" ");
-  return /* @__PURE__ */ jsxs7("div", { className: root, role: label ? "group" : void 0, "aria-label": label || void 0, children: [
-    basis ? /* @__PURE__ */ jsx11("p", { className: "ui-stats__basis", id: basisId, children: basis }) : null,
-    /* @__PURE__ */ jsx11("dl", { className: "ui-stats__list", children: stats.map((s, i) => {
+  return /* @__PURE__ */ jsxs8("div", { className: root, role: label ? "group" : void 0, "aria-label": label || void 0, children: [
+    basis ? /* @__PURE__ */ jsx12("p", { className: "ui-stats__basis", id: basisId, children: basis }) : null,
+    /* @__PURE__ */ jsx12("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__ */ jsxs7("div", { className: cls, children: [
-        /* @__PURE__ */ jsx11("dt", { className: "ui-stat__label", children: s.label }),
-        /* @__PURE__ */ jsx11("dd", { className: "ui-stat__value", children: s.value }),
-        /* @__PURE__ */ jsx11(ContextRow, { caption: s.caption, delta: s.delta, basisId }),
-        s.trend ? /* @__PURE__ */ jsx11("dd", { className: "ui-stat__trend", children: s.trend }) : null
+      return /* @__PURE__ */ jsxs8("div", { className: cls, children: [
+        /* @__PURE__ */ jsx12("dt", { className: "ui-stat__label", children: s.label }),
+        /* @__PURE__ */ jsx12("dd", { className: "ui-stat__value", children: s.value }),
+        /* @__PURE__ */ jsx12(ContextRow, { caption: s.caption, delta: s.delta, basisId }),
+        s.trend ? /* @__PURE__ */ jsx12("dd", { className: "ui-stat__trend", children: s.trend }) : null
       ] }, `${s.label}-${i}`);
     }) })
   ] });
@@ -574,7 +599,7 @@ import {
   useEffect as useEffect2,
   useLayoutEffect as useLayoutEffect3,
   useRef as useRef3,
-  useState as useState2
+  useState as useState3
 } from "react";
 import { transitionMs } from "@apliteni/apliteni-ui";
 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';
@@ -694,8 +719,8 @@ function exit(entry) {
 }
 var EXIT_SLACK_MS = 50;
 function usePresence(open, root, panel) {
-  const [present, setPresent] = useState2(open);
-  const [entered, setEntered] = useState2(false);
+  const [present, setPresent] = useState3(open);
+  const [entered, setEntered] = useState3(false);
   if (open && !present) setPresent(true);
   const shown = open && entered;
   useIsoLayoutEffect(() => {
@@ -744,7 +769,7 @@ function usePresence(open, root, panel) {
 }
 function useDialog(active, { root, panel, body, initialFocus }, onClose) {
   const parent = useContext(DialogScope);
-  const [scope] = useState2(() => ({ parent }));
+  const [scope] = useState3(() => ({ parent }));
   const close = useRef3(onClose);
   useIsoLayoutEffect(() => {
     close.current = onClose;
@@ -768,7 +793,7 @@ function useDialog(active, { root, panel, body, initialFocus }, onClose) {
 }
 
 // src/Modal.tsx
-import { jsx as jsx12, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx13, jsxs as jsxs9 } from "react/jsx-runtime";
 function Modal({ open, title, onClose, footer, children, initialFocusRef, role = "dialog" }) {
   const id = useId4();
   const titleId = `${id}-title`;
@@ -780,7 +805,7 @@ function Modal({ open, title, onClose, footer, children, initialFocusRef, role =
   const scope = useDialog(shown, { root, panel, body, initialFocus: initialFocusRef }, onClose);
   if (!mounted) return null;
   return createPortal(
-    /* @__PURE__ */ jsx12(DialogScope.Provider, { value: scope, children: /* @__PURE__ */ jsx12("div", { className: shown ? "rx-scrim is-open" : "rx-scrim", ref: root, onMouseDown: dismissOnScrim(onClose), children: /* @__PURE__ */ jsxs8(
+    /* @__PURE__ */ jsx13(DialogScope.Provider, { value: scope, children: /* @__PURE__ */ jsx13("div", { className: shown ? "rx-scrim is-open" : "rx-scrim", ref: root, onMouseDown: dismissOnScrim(onClose), children: /* @__PURE__ */ jsxs9(
       "div",
       {
         className: "rx-modal",
@@ -791,12 +816,12 @@ function Modal({ open, title, onClose, footer, children, initialFocusRef, role =
         tabIndex: -1,
         ref: panel,
         children: [
-          /* @__PURE__ */ jsxs8("div", { className: "rx-modal__head", children: [
-            /* @__PURE__ */ jsx12("h2", { className: "rx-modal__title", id: titleId, children: title }),
-            /* @__PURE__ */ jsx12(Button, { variant: "ghost", size: "sm", iconOnly: true, icon: "x", "aria-label": "Close", onClick: onClose })
+          /* @__PURE__ */ jsxs9("div", { className: "rx-modal__head", children: [
+            /* @__PURE__ */ jsx13("h2", { className: "rx-modal__title", id: titleId, children: title }),
+            /* @__PURE__ */ jsx13(Button, { variant: "ghost", size: "sm", iconOnly: true, icon: "x", "aria-label": "Close", onClick: onClose })
           ] }),
-          /* @__PURE__ */ jsx12("div", { className: "rx-modal__body", id: bodyId, ref: body, children }),
-          footer && /* @__PURE__ */ jsx12("div", { className: "rx-modal__foot", children: footer })
+          /* @__PURE__ */ jsx13("div", { className: "rx-modal__body", id: bodyId, ref: body, children }),
+          footer && /* @__PURE__ */ jsx13("div", { className: "rx-modal__foot", children: footer })
         ]
       }
     ) }) }),
@@ -805,7 +830,7 @@ function Modal({ open, title, onClose, footer, children, initialFocusRef, role =
 }
 
 // src/Confirm.tsx
-import { Fragment as Fragment3, jsx as jsx13, jsxs as jsxs9 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx14, jsxs as jsxs10 } from "react/jsx-runtime";
 function Confirm({
   open,
   title,
@@ -818,7 +843,7 @@ function Confirm({
   onCancel
 }) {
   const safeAction = useRef5(null);
-  return /* @__PURE__ */ jsx13(
+  return /* @__PURE__ */ jsx14(
     Modal,
     {
       open,
@@ -826,9 +851,9 @@ function Confirm({
       onClose: onCancel,
       role: "alertdialog",
       initialFocusRef: safeAction,
-      footer: /* @__PURE__ */ jsxs9(Fragment3, { children: [
-        /* @__PURE__ */ jsx13(Button, { ref: safeAction, variant: "ghost", onClick: onCancel, children: cancelLabel }),
-        /* @__PURE__ */ jsx13(Button, { variant: danger ? "danger" : "primary", busy, onClick: onConfirm, children: confirmLabel })
+      footer: /* @__PURE__ */ jsxs10(Fragment3, { children: [
+        /* @__PURE__ */ jsx14(Button, { ref: safeAction, variant: "ghost", onClick: onCancel, children: cancelLabel }),
+        /* @__PURE__ */ jsx14(Button, { variant: danger ? "danger" : "primary", busy, onClick: onConfirm, children: confirmLabel })
       ] }),
       children: body
     }
@@ -838,7 +863,7 @@ function Confirm({
 // src/Drawer.tsx
 import { useId as useId5, useRef as useRef6 } from "react";
 import { createPortal as createPortal2 } from "react-dom";
-import { jsx as jsx14, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx15, jsxs as jsxs11 } from "react/jsx-runtime";
 function Drawer({
   open,
   title,
@@ -858,9 +883,9 @@ function Drawer({
   if (!mounted) return null;
   const cls = ["ui-drawer", `ui-drawer--${side}`, `ui-drawer--${size}`, shown && "is-open"].filter(Boolean).join(" ");
   return createPortal2(
-    /* @__PURE__ */ jsx14(DialogScope.Provider, { value: scope, children: /* @__PURE__ */ jsxs10("div", { className: cls, ref: root, children: [
-      /* @__PURE__ */ jsx14("div", { className: "ui-drawer__scrim", onMouseDown: dismissOnScrim(onClose) }),
-      /* @__PURE__ */ jsxs10(
+    /* @__PURE__ */ jsx15(DialogScope.Provider, { value: scope, children: /* @__PURE__ */ jsxs11("div", { className: cls, ref: root, children: [
+      /* @__PURE__ */ jsx15("div", { className: "ui-drawer__scrim", onMouseDown: dismissOnScrim(onClose) }),
+      /* @__PURE__ */ jsxs11(
         "aside",
         {
           className: "ui-drawer__panel",
@@ -870,12 +895,12 @@ function Drawer({
           tabIndex: -1,
           ref: panel,
           children: [
-            /* @__PURE__ */ jsxs10("header", { className: "ui-drawer__header", children: [
-              /* @__PURE__ */ jsx14("h2", { className: "ui-drawer__title", id: titleId, children: title }),
-              /* @__PURE__ */ jsx14("button", { type: "button", className: "ui-drawer__close", "aria-label": closeLabel, onClick: onClose, children: /* @__PURE__ */ jsx14(Icon, { name: "x" }) })
+            /* @__PURE__ */ jsxs11("header", { className: "ui-drawer__header", children: [
+              /* @__PURE__ */ jsx15("h2", { className: "ui-drawer__title", id: titleId, children: title }),
+              /* @__PURE__ */ jsx15("button", { type: "button", className: "ui-drawer__close", "aria-label": closeLabel, onClick: onClose, children: /* @__PURE__ */ jsx15(Icon, { name: "x" }) })
             ] }),
-            /* @__PURE__ */ jsx14("div", { className: "ui-drawer__body", ref: body, children }),
-            footer && /* @__PURE__ */ jsx14("footer", { className: "ui-drawer__footer", children: footer })
+            /* @__PURE__ */ jsx15("div", { className: "ui-drawer__body", ref: body, children }),
+            footer && /* @__PURE__ */ jsx15("footer", { className: "ui-drawer__footer", children: footer })
           ]
         }
       )
@@ -885,12 +910,12 @@ function Drawer({
 }
 
 // src/CommandPalette.tsx
-import { useCallback, useEffect as useEffect3, useId as useId6, useMemo, useRef as useRef7, useState as useState3 } from "react";
+import { useCallback as useCallback2, useEffect as useEffect3, useId as useId6, useMemo, useRef as useRef7, useState as useState4 } from "react";
 import { createPortal as createPortal3 } from "react-dom";
-import { rankGroups, icon as icon2 } from "@apliteni/apliteni-ui";
-import { jsx as jsx15, jsxs as jsxs11 } from "react/jsx-runtime";
+import { rankGroups, icon as icon3 } from "@apliteni/apliteni-ui";
+import { jsx as jsx16, jsxs as jsxs12 } from "react/jsx-runtime";
 var cx2 = (...a) => a.filter(Boolean).join(" ");
-var Glyph = ({ name, className }) => /* @__PURE__ */ jsx15("span", { className, "aria-hidden": "true", dangerouslySetInnerHTML: { __html: icon2(name) } });
+var Glyph = ({ name, className }) => /* @__PURE__ */ jsx16("span", { className, "aria-hidden": "true", dangerouslySetInnerHTML: { __html: icon3(name) } });
 var keysOf = (shortcut) => shortcut == null ? [] : Array.isArray(shortcut) ? shortcut : [shortcut];
 function CommandPalette({
   open,
@@ -909,8 +934,8 @@ function CommandPalette({
   const root = useRef7(null);
   const panel = useRef7(null);
   const search = useRef7(null);
-  const [query, setQuery] = useState3("");
-  const [at, setAt] = useState3(0);
+  const [query, setQuery] = useState4("");
+  const [at, setAt] = useState4(0);
   useEffect3(() => {
     if (open) {
       setQuery("");
@@ -927,7 +952,7 @@ function CommandPalette({
     setAt(0);
   }, [query]);
   const scope = useDialog(open, { root, panel, body: search }, onClose);
-  const run = useCallback((item, newTab) => {
+  const run = useCallback2((item, newTab) => {
     if (isDisabled(item)) return;
     onSelect?.(item, { newTab });
     if (item.danger && item.onConfirm) {
@@ -955,9 +980,9 @@ function CommandPalette({
   const listId = `${uid}-list`;
   let n = 0;
   return createPortal3(
-    /* @__PURE__ */ jsx15(DialogScope.Provider, { value: scope, children: /* @__PURE__ */ jsxs11("div", { className: cx2("ui-cmdk", density === "roomy" && "ui-cmdk--roomy", "is-open"), ref: root, children: [
-      /* @__PURE__ */ jsx15("div", { className: "ui-cmdk__scrim", onMouseDown: dismissOnScrim(onClose) }),
-      /* @__PURE__ */ jsxs11(
+    /* @__PURE__ */ jsx16(DialogScope.Provider, { value: scope, children: /* @__PURE__ */ jsxs12("div", { className: cx2("ui-cmdk", density === "roomy" && "ui-cmdk--roomy", "is-open"), ref: root, children: [
+      /* @__PURE__ */ jsx16("div", { className: "ui-cmdk__scrim", onMouseDown: dismissOnScrim(onClose) }),
+      /* @__PURE__ */ jsxs12(
         "div",
         {
           className: "ui-cmdk__panel",
@@ -968,9 +993,9 @@ function CommandPalette({
           ref: panel,
           onKeyDown,
           children: [
-            /* @__PURE__ */ jsxs11("div", { className: "ui-cmdk__search", ref: search, children: [
-              /* @__PURE__ */ jsx15(Glyph, { name: "search", className: "ui-cmdk__search-ic" }),
-              /* @__PURE__ */ jsx15(
+            /* @__PURE__ */ jsxs12("div", { className: "ui-cmdk__search", ref: search, children: [
+              /* @__PURE__ */ jsx16(Glyph, { name: "search", className: "ui-cmdk__search-ic" }),
+              /* @__PURE__ */ jsx16(
                 "input",
                 {
                   className: "ui-cmdk__input",
@@ -992,19 +1017,19 @@ function CommandPalette({
                 }
               )
             ] }),
-            /* @__PURE__ */ jsx15("div", { className: "ui-cmdk__list", id: listId, role: "listbox", "aria-label": `${label} results`, children: shown.map((group, gi) => /* @__PURE__ */ jsxs11(
+            /* @__PURE__ */ jsx16("div", { className: "ui-cmdk__list", id: listId, role: "listbox", "aria-label": `${label} results`, children: shown.map((group, gi) => /* @__PURE__ */ jsxs12(
               "div",
               {
                 className: "ui-cmdk__group",
                 role: "group",
                 "aria-labelledby": group.label ? `${uid}-g${gi}` : void 0,
                 children: [
-                  group.label && /* @__PURE__ */ jsx15("div", { className: "ui-cmdk__group-head", id: `${uid}-g${gi}`, children: group.label }),
+                  group.label && /* @__PURE__ */ jsx16("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__ */ jsxs11(
+                    return /* @__PURE__ */ jsxs12(
                       "div",
                       {
                         id,
@@ -1024,13 +1049,13 @@ function CommandPalette({
                         },
                         onClick: (e) => run(item, e.metaKey || e.ctrlKey),
                         children: [
-                          item.icon && /* @__PURE__ */ jsx15(Glyph, { name: item.icon, className: "ui-cmdk__ic" }),
-                          /* @__PURE__ */ jsxs11("span", { className: "ui-cmdk__main", children: [
-                            /* @__PURE__ */ jsx15("span", { className: "ui-cmdk__label", children: item.label }),
-                            item.description && /* @__PURE__ */ jsx15("span", { className: "ui-cmdk__desc", children: item.description })
+                          item.icon && /* @__PURE__ */ jsx16(Glyph, { name: item.icon, className: "ui-cmdk__ic" }),
+                          /* @__PURE__ */ jsxs12("span", { className: "ui-cmdk__main", children: [
+                            /* @__PURE__ */ jsx16("span", { className: "ui-cmdk__label", children: item.label }),
+                            item.description && /* @__PURE__ */ jsx16("span", { className: "ui-cmdk__desc", children: item.description })
                           ] }),
-                          item.badge && /* @__PURE__ */ jsx15("span", { className: "ui-cmdk__badge", children: item.badge }),
-                          keysOf(item.shortcut).length > 0 && /* @__PURE__ */ jsx15("span", { className: "ui-cmdk__keys", "aria-hidden": "true", children: keysOf(item.shortcut).map((k) => /* @__PURE__ */ jsx15("kbd", { className: "ui-cmdk__key", children: k }, k)) })
+                          item.badge && /* @__PURE__ */ jsx16("span", { className: "ui-cmdk__badge", children: item.badge }),
+                          keysOf(item.shortcut).length > 0 && /* @__PURE__ */ jsx16("span", { className: "ui-cmdk__keys", "aria-hidden": "true", children: keysOf(item.shortcut).map((k) => /* @__PURE__ */ jsx16("kbd", { className: "ui-cmdk__key", children: k }, k)) })
                         ]
                       },
                       item.id
@@ -1040,20 +1065,20 @@ function CommandPalette({
               },
               group.label ?? `g${gi}`
             )) }),
-            /* @__PURE__ */ jsx15("p", { className: "ui-cmdk__empty", hidden: countOf(shown) > 0, children: empty }),
-            /* @__PURE__ */ jsx15("p", { className: "ui-sr", role: "status", "aria-live": "polite", children: countOf(shown) === 0 ? "No results" : `${countOf(shown)} result${countOf(shown) === 1 ? "" : "s"}` }),
-            hint && /* @__PURE__ */ jsxs11("div", { className: "ui-cmdk__foot", "aria-hidden": "true", children: [
-              /* @__PURE__ */ jsxs11("span", { children: [
-                /* @__PURE__ */ jsx15("kbd", { className: "ui-cmdk__key", children: "\u2191" }),
-                /* @__PURE__ */ jsx15("kbd", { className: "ui-cmdk__key", children: "\u2193" }),
+            /* @__PURE__ */ jsx16("p", { className: "ui-cmdk__empty", hidden: countOf(shown) > 0, children: empty }),
+            /* @__PURE__ */ jsx16("p", { className: "ui-sr", role: "status", "aria-live": "polite", children: countOf(shown) === 0 ? "No results" : `${countOf(shown)} result${countOf(shown) === 1 ? "" : "s"}` }),
+            hint && /* @__PURE__ */ jsxs12("div", { className: "ui-cmdk__foot", "aria-hidden": "true", children: [
+              /* @__PURE__ */ jsxs12("span", { children: [
+                /* @__PURE__ */ jsx16("kbd", { className: "ui-cmdk__key", children: "\u2191" }),
+                /* @__PURE__ */ jsx16("kbd", { className: "ui-cmdk__key", children: "\u2193" }),
                 " move"
               ] }),
-              /* @__PURE__ */ jsxs11("span", { children: [
-                /* @__PURE__ */ jsx15("kbd", { className: "ui-cmdk__key", children: "\u21B5" }),
+              /* @__PURE__ */ jsxs12("span", { children: [
+                /* @__PURE__ */ jsx16("kbd", { className: "ui-cmdk__key", children: "\u21B5" }),
                 " run"
               ] }),
-              /* @__PURE__ */ jsxs11("span", { children: [
-                /* @__PURE__ */ jsx15("kbd", { className: "ui-cmdk__key", children: "esc" }),
+              /* @__PURE__ */ jsxs12("span", { children: [
+                /* @__PURE__ */ jsx16("kbd", { className: "ui-cmdk__key", children: "esc" }),
                 " close"
               ] })
             ] })
@@ -1078,13 +1103,13 @@ function rowId(uid, groups, item) {
 }
 
 // src/DataTable.tsx
-import { useCallback as useCallback2, useEffect as useEffect5, useMemo as useMemo2, useRef as useRef9, useState as useState5 } from "react";
+import { useCallback as useCallback3, useEffect as useEffect5, useMemo as useMemo2, useRef as useRef9, useState as useState6 } from "react";
 import { DEFAULT_PAGE_SIZE as DEFAULT_PAGE_SIZE2 } from "@apliteni/apliteni-ui";
 
 // src/Pagination.tsx
-import { useEffect as useEffect4, useId as useId7, useRef as useRef8, useState as useState4 } from "react";
+import { useEffect as useEffect4, useId as useId7, useRef as useRef8, useState as useState5 } from "react";
 import { DEFAULT_PAGE_SIZE } from "@apliteni/apliteni-ui";
-import { jsx as jsx16, jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsx as jsx17, jsxs as jsxs13 } 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(" ");
@@ -1127,8 +1152,8 @@ function Pagination({
   onPageSizeChange
 }) {
   const auto = useId7();
-  const [draft, setDraft] = useState4("");
-  const [drafting, setDrafting] = useState4(false);
+  const [draft, setDraft] = useState5("");
+  const [drafting, setDrafting] = useState5(false);
   const nav = useRef8(null);
   const pressed = useRef8(null);
   const uid = id ?? auto;
@@ -1139,7 +1164,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] = useState4(at);
+  const [draftFor, setDraftFor] = useState5(at);
   if (draftFor !== at) {
     setDraftFor(at);
     setDraft("");
@@ -1176,7 +1201,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__ */ jsx16(
+    /* @__PURE__ */ jsx17(
       "button",
       {
         type: "button",
@@ -1215,14 +1240,14 @@ function Pagination({
   if (single) {
     steps = null;
   } else if (!counted) {
-    steps = /* @__PURE__ */ jsxs12("div", { className: "ui-pager__steps", children: [
+    steps = /* @__PURE__ */ jsxs13("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__ */ jsx16("span", { className: "ui-pager__gap", "aria-hidden": "true", children: "\u2026" }, `gap${i}`) : /* @__PURE__ */ jsx16(
+      middle = slotsFor(at, last).map((n, i) => n == null ? /* @__PURE__ */ jsx17("span", { className: "ui-pager__gap", "aria-hidden": "true", children: "\u2026" }, `gap${i}`) : /* @__PURE__ */ jsx17(
         "button",
         {
           type: "button",
@@ -1237,9 +1262,9 @@ function Pagination({
         n
       ));
     } else if (kind === "jump") {
-      middle = /* @__PURE__ */ jsxs12("span", { className: "ui-pager__jump", children: [
-        /* @__PURE__ */ jsx16("label", { htmlFor: `${uid}-jump`, children: "Page" }),
-        /* @__PURE__ */ jsx16(
+      middle = /* @__PURE__ */ jsxs13("span", { className: "ui-pager__jump", children: [
+        /* @__PURE__ */ jsx17("label", { htmlFor: `${uid}-jump`, children: "Page" }),
+        /* @__PURE__ */ jsx17(
           "input",
           {
             className: "ui-input ui-pager__jump-input",
@@ -1262,13 +1287,13 @@ function Pagination({
             }
           }
         ),
-        /* @__PURE__ */ jsxs12("span", { className: "ui-pager__jump-of", children: [
+        /* @__PURE__ */ jsxs13("span", { className: "ui-pager__jump-of", children: [
           "of ",
           fmt(last)
         ] })
       ] });
     }
-    steps = /* @__PURE__ */ jsxs12("div", { className: "ui-pager__steps", children: [
+    steps = /* @__PURE__ */ jsxs13("div", { className: "ui-pager__steps", children: [
       ends ? step("First", 1, atStart) : null,
       step("Prev", Math.max(1, at - 1), atStart),
       middle,
@@ -1276,7 +1301,7 @@ function Pagination({
       ends ? step("Last", last, atEnd) : null
     ] });
   }
-  return /* @__PURE__ */ jsxs12(
+  return /* @__PURE__ */ jsxs13(
     "nav",
     {
       ref: nav,
@@ -1284,10 +1309,10 @@ function Pagination({
       "aria-label": label,
       "aria-busy": loading ? true : void 0,
       children: [
-        /* @__PURE__ */ jsx16("p", { className: "ui-pager__status", "aria-live": "polite", "aria-atomic": "true", children: status }),
-        sizes.length ? /* @__PURE__ */ jsxs12("div", { className: "ui-pager__size", children: [
-          /* @__PURE__ */ jsx16("label", { className: "ui-pager__size-label", htmlFor: `${uid}-size`, children: "Rows" }),
-          /* @__PURE__ */ jsx16(
+        /* @__PURE__ */ jsx17("p", { className: "ui-pager__status", "aria-live": "polite", "aria-atomic": "true", children: status }),
+        sizes.length ? /* @__PURE__ */ jsxs13("div", { className: "ui-pager__size", children: [
+          /* @__PURE__ */ jsx17("label", { className: "ui-pager__size-label", htmlFor: `${uid}-size`, children: "Rows" }),
+          /* @__PURE__ */ jsx17(
             "select",
             {
               className: "ui-select ui-pager__size-select",
@@ -1295,7 +1320,7 @@ function Pagination({
               disabled: loading,
               value: size,
               onChange: (e) => onPageSizeChange?.(Number(e.target.value)),
-              children: sizes.map((s) => /* @__PURE__ */ jsx16("option", { value: s, children: fmt(s) }, s))
+              children: sizes.map((s) => /* @__PURE__ */ jsx17("option", { value: s, children: fmt(s) }, s))
             }
           )
         ] }) : null,
@@ -1306,7 +1331,7 @@ function Pagination({
 }
 
 // src/DataTable.tsx
-import { Fragment as Fragment4, jsx as jsx17, jsxs as jsxs13 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx18, jsxs as jsxs14 } from "react/jsx-runtime";
 var NO_SORT = { key: void 0, dir: -1 };
 function sortTableRows(rows, sort) {
   if (sort.key === void 0) return [...rows];
@@ -1343,12 +1368,12 @@ function DataTable({
 }) {
   const scrollable = stickyHeader || pinnedIdentity;
   const table = useRef9(null);
-  const [pagerHost, setPagerHost] = useState5(null);
-  const holdPagerBox = useCallback2(
+  const [pagerHost, setPagerHost] = useState6(null);
+  const holdPagerBox = useCallback3(
     (box) => setPagerHost(box?.parentElement ?? null),
     []
   );
-  const [strip2, setStrip] = useState5();
+  const [strip2, setStrip] = useState6();
   useEffect5(() => {
     const el = table.current;
     const host = pagerHost;
@@ -1369,16 +1394,16 @@ function DataTable({
     measure();
     return () => observer.disconnect();
   }, [pagerHost, columns, rows]);
-  const [localSort, setLocalSort] = useState5(
+  const [localSort, setLocalSort] = useState6(
     { 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] = useState5(1);
-  const [localSize, setLocalSize] = useState5(DEFAULT_PAGE_SIZE2);
+  const [localPage, setLocalPage] = useState6(1);
+  const [localSize, setLocalSize] = useState6(DEFAULT_PAGE_SIZE2);
   const size = sizeOf(pageSize, owned ? localSize : rows.length || DEFAULT_PAGE_SIZE2);
-  const [pagedSort, setPagedSort] = useState5(sort);
+  const [pagedSort, setPagedSort] = useState6(sort);
   if (pagedSort.key !== sort.key || pagedSort.dir !== sort.dir) {
     setPagedSort(sort);
     setLocalPage(1);
@@ -1401,7 +1426,7 @@ function DataTable({
     onSortChange?.(next);
     toFirstPage();
   };
-  const caret = (k) => /* @__PURE__ */ jsx17(
+  const caret = (k) => /* @__PURE__ */ jsx18(
     "svg",
     {
       className: "rx-caret",
@@ -1413,31 +1438,31 @@ function DataTable({
       strokeLinejoin: "round",
       "aria-hidden": "true",
       focusable: "false",
-      children: sort.key === k ? /* @__PURE__ */ jsx17("path", { d: "m8 10 4 4 4-4" }) : /* @__PURE__ */ jsxs13(Fragment4, { children: [
-        /* @__PURE__ */ jsx17("path", { d: "m8 9 4-4 4 4" }),
-        /* @__PURE__ */ jsx17("path", { d: "m8 15 4 4 4-4" })
+      children: sort.key === k ? /* @__PURE__ */ jsx18("path", { d: "m8 10 4 4 4-4" }) : /* @__PURE__ */ jsxs14(Fragment4, { children: [
+        /* @__PURE__ */ jsx18("path", { d: "m8 9 4-4 4 4" }),
+        /* @__PURE__ */ jsx18("path", { d: "m8 15 4 4 4-4" })
       ] })
     }
   );
   const pageAllOn = selectable && slice.length > 0 && slice.every((r) => selected.has(r.name));
   const pageSomeOn = selectable && !pageAllOn && slice.some((r) => selected.has(r.name));
-  return /* @__PURE__ */ jsxs13(Fragment4, { children: [
-    /* @__PURE__ */ jsx17(
+  return /* @__PURE__ */ jsxs14(Fragment4, { children: [
+    /* @__PURE__ */ jsx18(
       "div",
       {
         className: scrollable ? "ui-table-scroll" : void 0,
         role: scrollable ? "region" : void 0,
         "aria-label": scrollable ? scrollLabel : void 0,
         tabIndex: scrollable ? 0 : void 0,
-        children: /* @__PURE__ */ jsxs13(
+        children: /* @__PURE__ */ jsxs14(
           "table",
           {
             ref: 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__ */ jsx17("thead", { children: /* @__PURE__ */ jsxs13("tr", { children: [
-                selectable ? /* @__PURE__ */ jsx17("th", { scope: "col", className: "ui-table__selection", children: /* @__PURE__ */ jsx17(
+              /* @__PURE__ */ jsx18("thead", { children: /* @__PURE__ */ jsxs14("tr", { children: [
+                selectable ? /* @__PURE__ */ jsx18("th", { scope: "col", className: "ui-table__selection", children: /* @__PURE__ */ jsx18(
                   "input",
                   {
                     type: "checkbox",
@@ -1453,7 +1478,7 @@ 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__ */ jsx17(
+                  /* @__PURE__ */ jsx18(
                     "th",
                     {
                       scope: "col",
@@ -1463,8 +1488,8 @@ function DataTable({
                         // The label is its own box so it can truncate: in a pinned
                         // identity column on a phone the header is capped, and a bare
                         // text node would push the caret out of the cell instead.
-                        /* @__PURE__ */ jsxs13("button", { type: "button", className: "rx-sort", onClick: () => onSort(c.key), children: [
-                          /* @__PURE__ */ jsx17("span", { className: "rx-sort__label", children: c.label }),
+                        /* @__PURE__ */ jsxs14("button", { type: "button", className: "rx-sort", onClick: () => onSort(c.key), children: [
+                          /* @__PURE__ */ jsx18("span", { className: "rx-sort__label", children: c.label }),
                           caret(c.key)
                         ] })
                       ) : c.label
@@ -1473,10 +1498,10 @@ function DataTable({
                   )
                 ))
               ] }) }),
-              /* @__PURE__ */ jsxs13("tbody", { children: [
-                !slice.length && /* @__PURE__ */ jsx17("tr", { children: /* @__PURE__ */ jsx17("td", { colSpan: columns.length + (selectable ? 1 : 0), children: loading ? "Loading rows\u2026" : empty }) }),
-                slice.map((r) => /* @__PURE__ */ jsxs13("tr", { children: [
-                  selectable ? /* @__PURE__ */ jsx17("td", { className: "ui-table__selection", children: /* @__PURE__ */ jsx17(
+              /* @__PURE__ */ jsxs14("tbody", { children: [
+                !slice.length && /* @__PURE__ */ jsx18("tr", { children: /* @__PURE__ */ jsx18("td", { colSpan: columns.length + (selectable ? 1 : 0), children: loading ? "Loading rows\u2026" : empty }) }),
+                slice.map((r) => /* @__PURE__ */ jsxs14("tr", { children: [
+                  selectable ? /* @__PURE__ */ jsx18("td", { className: "ui-table__selection", children: /* @__PURE__ */ jsx18(
                     "input",
                     {
                       type: "checkbox",
@@ -1485,7 +1510,7 @@ function DataTable({
                       onChange: () => onToggle(r.name)
                     }
                   ) }) : null,
-                  columns.map((c, columnIndex) => /* @__PURE__ */ jsx17("td", { className: [c.num && "ui-table__num", pinnedIdentity && columnIndex === 0 && "ui-table__identity", c.linked && "ui-table__linked"].filter(Boolean).join(" "), children: c.render ? c.render(r) : String(r[c.key]) }, c.key))
+                  columns.map((c, columnIndex) => /* @__PURE__ */ jsx18("td", { className: [c.num && "ui-table__num", pinnedIdentity && columnIndex === 0 && "ui-table__identity", c.linked && "ui-table__linked"].filter(Boolean).join(" "), children: c.render ? c.render(r) : String(r[c.key]) }, c.key))
                 ] }, r.name))
               ] })
             ]
@@ -1498,13 +1523,13 @@ function DataTable({
       // The two are siblings, and no selector sizes one to the other, so the width is
       // measured: a cap rather than a width, so a pager wider than the table wraps
       // inside it and a table wider than the room still leaves the strip in the room.
-      /* @__PURE__ */ jsx17(
+      /* @__PURE__ */ jsx18(
         "div",
         {
           className: "rx-table-pager",
           ref: holdPagerBox,
           style: strip2 ? { maxWidth: strip2.width, marginInlineStart: strip2.inset || void 0 } : void 0,
-          children: /* @__PURE__ */ jsx17(
+          children: /* @__PURE__ */ jsx18(
             Pagination,
             {
               page,
@@ -1532,7 +1557,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 jsx18, jsxs as jsxs14 } from "react/jsx-runtime";
+import { jsx as jsx19, jsxs as jsxs15 } 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;
@@ -1542,19 +1567,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__ */ jsx18("div", { className: cx4("ui-skel", className), "aria-hidden": "true", children: Array.from({ length: n }, (_, i) => /* @__PURE__ */ jsx18("span", { className: "ui-skel__bar m-skeleton", style: styleFor(i) }, i)) });
+  return /* @__PURE__ */ jsx19("div", { className: cx4("ui-skel", className), "aria-hidden": "true", children: Array.from({ length: n }, (_, i) => /* @__PURE__ */ jsx19("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__ */ jsx18("span", { className: "ui-skel__bar m-skeleton" }, i));
-  return /* @__PURE__ */ jsxs14(
+  const cells = Array.from({ length: Math.max(1, cols) }, (_, i) => /* @__PURE__ */ jsx19("span", { className: "ui-skel__bar m-skeleton" }, i));
+  return /* @__PURE__ */ jsxs15(
     "div",
     {
       className: "ui-skel ui-skel--table",
       style: { "--skel-cols": Math.max(1, cols) },
       "aria-hidden": "true",
       children: [
-        head && /* @__PURE__ */ jsx18("div", { className: "ui-skel__row ui-skel__row--head", children: cells }),
-        Array.from({ length: Math.max(1, rows) }, (_, i) => /* @__PURE__ */ jsx18("div", { className: "ui-skel__row", children: cells }, i))
+        head && /* @__PURE__ */ jsx19("div", { className: "ui-skel__row ui-skel__row--head", children: cells }),
+        Array.from({ length: Math.max(1, rows) }, (_, i) => /* @__PURE__ */ jsx19("div", { className: "ui-skel__row", children: cells }, i))
       ]
     }
   );
@@ -1567,7 +1592,7 @@ function BusyRegion({
   className,
   children
 }) {
-  return /* @__PURE__ */ jsxs14(
+  return /* @__PURE__ */ jsxs15(
     "div",
     {
       className: cx4("ui-busy", className),
@@ -1575,8 +1600,8 @@ function BusyRegion({
       "aria-live": "polite",
       "aria-busy": busy,
       children: [
-        /* @__PURE__ */ jsx18("span", { className: "ui-sr", children: busy ? label : message }),
-        /* @__PURE__ */ jsx18("div", { className: "ui-busy__body", children: busy ? placeholder ?? /* @__PURE__ */ jsx18(Skeleton, { lines: 3 }) : children })
+        /* @__PURE__ */ jsx19("span", { className: "ui-sr", children: busy ? label : message }),
+        /* @__PURE__ */ jsx19("div", { className: "ui-busy__body", children: busy ? placeholder ?? /* @__PURE__ */ jsx19(Skeleton, { lines: 3 }) : children })
       ]
     }
   );
@@ -1585,31 +1610,31 @@ function Denied({
   title = "You don\u2019t have access",
   sub,
   need,
-  icon: icon7 = "lock",
+  icon: icon8 = "lock",
   className,
   children
 }) {
-  return /* @__PURE__ */ jsxs14("div", { className: cx4("ui-denied", className), children: [
-    /* @__PURE__ */ jsx18("div", { className: "ui-denied__seal", children: /* @__PURE__ */ jsx18(Icon, { name: icon7 }) }),
-    /* @__PURE__ */ jsx18("div", { className: "ui-denied__title", children: title }),
-    sub && /* @__PURE__ */ jsx18("div", { className: "ui-denied__sub", children: sub }),
-    need && /* @__PURE__ */ jsxs14("div", { className: "ui-denied__need", children: [
+  return /* @__PURE__ */ jsxs15("div", { className: cx4("ui-denied", className), children: [
+    /* @__PURE__ */ jsx19("div", { className: "ui-denied__seal", children: /* @__PURE__ */ jsx19(Icon, { name: icon8 }) }),
+    /* @__PURE__ */ jsx19("div", { className: "ui-denied__title", children: title }),
+    sub && /* @__PURE__ */ jsx19("div", { className: "ui-denied__sub", children: sub }),
+    need && /* @__PURE__ */ jsxs15("div", { className: "ui-denied__need", children: [
       "Needs ",
-      /* @__PURE__ */ jsx18("code", { className: "ui-code", children: need })
+      /* @__PURE__ */ jsx19("code", { className: "ui-code", children: need })
     ] }),
-    children && /* @__PURE__ */ jsx18("div", { className: "ui-denied__actions", children })
+    children && /* @__PURE__ */ jsx19("div", { className: "ui-denied__actions", children })
   ] });
 }
 
 // src/DatePicker.tsx
 import {
-  useCallback as useCallback3,
+  useCallback as useCallback4,
   useEffect as useEffect6,
   useMemo as useMemo3,
   useRef as useRef10,
-  useState as useState6
+  useState as useState7
 } from "react";
-import { jsx as jsx19, jsxs as jsxs15 } from "react/jsx-runtime";
+import { jsx as jsx20, jsxs as jsxs16 } from "react/jsx-runtime";
 var cx5 = (...a) => a.filter(Boolean).join(" ");
 var pad = (n) => String(n).padStart(2, "0");
 var DAY_MS = 864e5;
@@ -1618,7 +1643,7 @@ var MONTH_RE = /^(\d{4})-(\d{2})$/;
 var DAY_RE = /^(\d{4})-(\d{2})-(\d{2})$/;
 var PHONE_MAX = 560;
 function usePhone() {
-  const [phone, setPhone] = useState6(false);
+  const [phone, setPhone] = useState7(false);
   useEffect6(() => {
     const query = typeof window === "undefined" ? null : window.matchMedia?.(`(max-width: ${PHONE_MAX}px)`);
     if (!query) return;
@@ -1717,11 +1742,11 @@ function DatePicker({
   const root = useRef10(null);
   const trigger = useRef10(null);
   const grid = useRef10(null);
-  const [selfOpen, setSelfOpen] = useState6(defaultOpen);
+  const [selfOpen, setSelfOpen] = useState7(defaultOpen);
   const open = openProp ?? selfOpen;
-  const [selfValue, setSelfValue] = useState6(defaultValue);
+  const [selfValue, setSelfValue] = useState7(defaultValue);
   const picked = value !== void 0 ? value : selfValue;
-  const [selfRange, setSelfRange] = useState6(defaultRange ?? { start: null, end: null });
+  const [selfRange, setSelfRange] = useState7(defaultRange ?? { start: null, end: null });
   const span = range !== void 0 ? range : selfRange;
   const names = useMemo3(() => ({
     month: new Intl.DateTimeFormat(locale, { month: "long", timeZone: "UTC" }),
@@ -1734,7 +1759,7 @@ function DatePicker({
     weekdayShort: new Intl.DateTimeFormat(locale, { weekday: "short", timeZone: "UTC" })
   }), [locale]);
   const monthLabels = useMemo3(() => evenMonthLabels(names.monthShort), [names]);
-  const at = useCallback3((index) => new Date(
+  const at = useCallback4((index) => new Date(
     grain === "month" ? Date.UTC(Math.floor(index / 12), index % 12, 1) : index * DAY_MS
   ), [grain]);
   const lo = toIndex(min, grain, "start");
@@ -1752,9 +1777,9 @@ function DatePicker({
     return grain === "month" ? monthOf(now) : now;
   }, [today, grain]);
   const anchor = toIndex(picked, grain) ?? toIndex(picksRange ? span.start ?? span.end : null, grain) ?? todayIndex;
-  const [cursor, setCursor] = useState6(() => clamp(anchor, lo, hi));
+  const [cursor, setCursor] = useState7(() => clamp(anchor, lo, hi));
   const land = useRef10(false);
-  const setOpen = useCallback3((next) => {
+  const setOpen = useCallback4((next) => {
     if (openProp === void 0) setSelfOpen(next);
     onOpenChange?.(next);
   }, [openProp, onOpenChange]);
@@ -1791,7 +1816,7 @@ function DatePicker({
   const columns = grain === "month" ? 3 : 7;
   const page = grain === "month" ? Math.floor(cursor / 12) : monthOf(cursor);
   const caption = grain === "month" ? String(page) : names.monthYear.format(at(firstDayOf(page)));
-  const periodName = useCallback3((index) => grain === "month" ? names.monthYear.format(at(index)) : `${names.weekday.format(at(index))} ${names.day.format(at(index))}`, [grain, names, at]);
+  const periodName = useCallback4((index) => grain === "month" ? names.monthYear.format(at(index)) : `${names.weekday.format(at(index))} ${names.day.format(at(index))}`, [grain, names, at]);
   const count = grain === "month" ? 12 : daysInMonth(page);
   const first = grain === "month" ? page * 12 : firstDayOf(page);
   const last = first + count - 1;
@@ -1927,10 +1952,10 @@ function DatePicker({
   }
   const noneBefore = lo != null && first <= lo;
   const noneAfter = hi != null && last >= hi;
-  const calendar = /* @__PURE__ */ jsxs15("div", { className: cx5("ui-datepicker__body", asSheet && "is-sheet"), children: [
-    picksRange && presets?.length ? /* @__PURE__ */ jsx19("div", { className: "ui-datepicker__presets", role: "group", "aria-label": "Period shortcuts", children: presets.map((preset) => {
+  const calendar = /* @__PURE__ */ jsxs16("div", { className: cx5("ui-datepicker__body", asSheet && "is-sheet"), children: [
+    picksRange && presets?.length ? /* @__PURE__ */ jsx20("div", { className: "ui-datepicker__presets", role: "group", "aria-label": "Period shortcuts", children: presets.map((preset) => {
       const within = allowed(preset);
-      return /* @__PURE__ */ jsx19(
+      return /* @__PURE__ */ jsx20(
         "button",
         {
           type: "button",
@@ -1942,9 +1967,9 @@ function DatePicker({
         preset.label
       );
     }) }) : null,
-    /* @__PURE__ */ jsxs15("div", { className: "ui-datepicker__calendar", children: [
-      /* @__PURE__ */ jsxs15("div", { className: "ui-datepicker__head", children: [
-        /* @__PURE__ */ jsx19(
+    /* @__PURE__ */ jsxs16("div", { className: "ui-datepicker__calendar", children: [
+      /* @__PURE__ */ jsxs16("div", { className: "ui-datepicker__head", children: [
+        /* @__PURE__ */ jsx20(
           "button",
           {
             type: "button",
@@ -1952,11 +1977,11 @@ function DatePicker({
             "aria-label": stepBack,
             disabled: noneBefore,
             onClick: () => stepPage(-1),
-            children: /* @__PURE__ */ jsx19(Icon, { name: "chevronLeft" })
+            children: /* @__PURE__ */ jsx20(Icon, { name: "chevronLeft" })
           }
         ),
-        /* @__PURE__ */ jsx19("span", { className: "ui-datepicker__caption", "aria-live": "polite", children: caption }),
-        /* @__PURE__ */ jsx19(
+        /* @__PURE__ */ jsx20("span", { className: "ui-datepicker__caption", "aria-live": "polite", children: caption }),
+        /* @__PURE__ */ jsx20(
           "button",
           {
             type: "button",
@@ -1964,11 +1989,11 @@ function DatePicker({
             "aria-label": stepOn,
             disabled: noneAfter,
             onClick: () => stepPage(1),
-            children: /* @__PURE__ */ jsx19(Icon, { name: "chevronRight" })
+            children: /* @__PURE__ */ jsx20(Icon, { name: "chevronRight" })
           }
         )
       ] }),
-      /* @__PURE__ */ jsxs15(
+      /* @__PURE__ */ jsxs16(
         "div",
         {
           className: cx5("ui-datepicker__grid", grain === "day" && "is-days"),
@@ -1977,7 +2002,7 @@ function DatePicker({
           ref: grid,
           onKeyDown: onGridKeyDown,
           children: [
-            weekdays.length > 0 && /* @__PURE__ */ jsx19("div", { className: "ui-datepicker__row", role: "row", children: weekdays.map((weekday) => /* @__PURE__ */ jsx19(
+            weekdays.length > 0 && /* @__PURE__ */ jsx20("div", { className: "ui-datepicker__row", role: "row", children: weekdays.map((weekday) => /* @__PURE__ */ jsx20(
               "span",
               {
                 className: "ui-datepicker__weekday",
@@ -1987,13 +2012,13 @@ function DatePicker({
               },
               weekday.long
             )) }),
-            rows.map((cellsInRow, r) => /* @__PURE__ */ jsx19("div", { className: "ui-datepicker__row", role: "row", children: cellsInRow.map((cell, c) => cell ? /* @__PURE__ */ jsx19(
+            rows.map((cellsInRow, r) => /* @__PURE__ */ jsx20("div", { className: "ui-datepicker__row", role: "row", children: cellsInRow.map((cell, c) => cell ? /* @__PURE__ */ jsx20(
               "span",
               {
                 className: "ui-datepicker__cell",
                 role: "gridcell",
                 "aria-selected": isPicked(cell.index),
-                children: /* @__PURE__ */ jsx19(
+                children: /* @__PURE__ */ jsx20(
                   "button",
                   {
                     type: "button",
@@ -2012,12 +2037,12 @@ function DatePicker({
                     "aria-label": state(cell),
                     onClick: () => pick(cell),
                     onFocus: () => setCursor(cell.index),
-                    children: /* @__PURE__ */ jsx19("span", { className: "ui-datepicker__num", children: cell.label })
+                    children: /* @__PURE__ */ jsx20("span", { className: "ui-datepicker__num", children: cell.label })
                   }
                 )
               },
               cell.period
-            ) : /* @__PURE__ */ jsx19("span", { className: "ui-datepicker__cell is-empty", role: "gridcell" }, `e${r}-${c}`)) }, `r${r}`))
+            ) : /* @__PURE__ */ jsx20("span", { className: "ui-datepicker__cell is-empty", role: "gridcell" }, `e${r}-${c}`)) }, `r${r}`))
           ]
         }
       )
@@ -2027,8 +2052,8 @@ function DatePicker({
     // `open` on the root whichever form the panel takes, so the trigger's
     // chevron flips for the sheet as it does for the popover. The panel rules
     // it also switches on have no panel to find while the sheet is up.
-    /* @__PURE__ */ jsxs15("div", { className: cx5("ui-dropdown", "ui-datepicker", open && "open"), ref: root, children: [
-      /* @__PURE__ */ jsxs15(
+    /* @__PURE__ */ jsxs16("div", { className: cx5("ui-dropdown", "ui-datepicker", open && "open"), ref: root, children: [
+      /* @__PURE__ */ jsxs16(
         "button",
         {
           type: "button",
@@ -2044,8 +2069,8 @@ function DatePicker({
             setOpen(!open);
           },
           children: [
-            /* @__PURE__ */ jsx19("span", { className: "ui-dropdown__value", children: shown ?? empty }),
-            /* @__PURE__ */ jsx19("span", { className: "ui-dropdown__chevron", "aria-hidden": "true" })
+            /* @__PURE__ */ jsx20("span", { className: "ui-dropdown__value", children: shown ?? empty }),
+            /* @__PURE__ */ jsx20("span", { className: "ui-dropdown__chevron", "aria-hidden": "true" })
           ]
         }
       ),
@@ -2056,8 +2081,8 @@ function DatePicker({
         // without taking the sheet's affordances left a phone reader with no
         // visible way out and a Tab that walked into the live page behind it.
         // why: guidelines/drawer.md
-        /* @__PURE__ */ jsx19(Drawer, { open, side: "bottom", size: "md", title: name, onClose: () => setOpen(false), children: calendar })
-      ) : /* @__PURE__ */ jsx19(
+        /* @__PURE__ */ jsx20(Drawer, { open, side: "bottom", size: "md", title: name, onClose: () => setOpen(false), children: calendar })
+      ) : /* @__PURE__ */ jsx20(
         "div",
         {
           className: cx5("ui-dropdown__panel", "ui-datepicker__panel", align === "end" && "is-end"),
@@ -2075,15 +2100,15 @@ function DatePicker({
 // src/Dropdown.tsx
 import {
   Fragment as Fragment5,
-  useCallback as useCallback4,
+  useCallback as useCallback5,
   useContext as useContext2,
   useEffect as useEffect7,
   useId as useId8,
   useRef as useRef11,
-  useState as useState7
+  useState as useState8
 } from "react";
 import {
-  icon as icon3,
+  icon as icon4,
   dropdownMatch,
   dropdownFiltering,
   filterPanelFit,
@@ -2098,7 +2123,7 @@ import { createContext as createContext2 } from "react";
 var FieldContext = createContext2(null);
 
 // src/Dropdown.tsx
-import { Fragment as Fragment6, jsx as jsx20, jsxs as jsxs16 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx21, jsxs as jsxs17 } from "react/jsx-runtime";
 var EXIT_SLACK_MS2 = 50;
 var SETTLE_MS = 450;
 var inPanel = (node) => {
@@ -2107,12 +2132,12 @@ var inPanel = (node) => {
 };
 var cx6 = (...a) => a.filter(Boolean).join(" ");
 var isRow = (it) => Boolean(it) && it !== "---" && !it.separator;
-var Glyph2 = ({ name, className, hidden }) => /* @__PURE__ */ jsx20(
+var Glyph2 = ({ name, className, hidden }) => /* @__PURE__ */ jsx21(
   "span",
   {
     className,
     "aria-hidden": hidden ? "true" : void 0,
-    dangerouslySetInnerHTML: { __html: icon3(name) }
+    dangerouslySetInnerHTML: { __html: icon4(name) }
   }
 );
 function RowBadge({ badge }) {
@@ -2120,12 +2145,17 @@ 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__ */ jsx20("span", { className: `ui-dropdown__badge is-${tone}`, children: text2 });
+  return /* @__PURE__ */ jsx21("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);
 var openNow = /* @__PURE__ */ new Set();
 var composing = (e) => e.isComposing || e.keyCode === 229;
+var countOf2 = (count, rows) => {
+  if (count == null) return null;
+  const n = count === true ? rows.filter((it) => !it.avatar?.empty).length : Number(count);
+  return Number.isFinite(n) && n >= 0 ? n : null;
+};
 var SEARCH_DEFAULTS = {
   placeholder: "Search",
   empty: "No match for \u201C{q}\u201D",
@@ -2159,11 +2189,11 @@ function Dropdown({
   onSelect,
   row
 }) {
-  const [selfOpen, setSelfOpen] = useState7(defaultOpen);
+  const [selfOpen, setSelfOpen] = useState8(defaultOpen);
   const open = openProp ?? selfOpen;
-  const [pick, setPick] = useState7(null);
-  const [query, setQuery] = useState7(() => search && search !== true ? search.query || "" : "");
-  const [activeKey, setActiveKey] = useState7(null);
+  const [pick, setPick] = useState8(null);
+  const [query, setQuery] = useState8(() => search && search !== true ? search.query || "" : "");
+  const [activeKey, setActiveKey] = useState8(null);
   const root = useRef11(null);
   const panel = useRef11(null);
   const trigger = useRef11(null);
@@ -2174,7 +2204,7 @@ function Dropdown({
   const uid = id ?? auto;
   const inField = useContext2(FieldContext);
   const fieldName = inField && id === inField.id && !(ariaLabel && triggerContent != null) ? { id: `${uid}-trigger`, labelId: inField.labelId, labelledBy: `${inField.labelId} ${uid}-trigger` } : null;
-  const setOpen = useCallback4((next) => {
+  const setOpen = useCallback5((next) => {
     if (openProp === void 0) setSelfOpen(next);
     onOpenChange?.(next);
   }, [openProp, onOpenChange]);
@@ -2260,9 +2290,17 @@ function Dropdown({
       el.classList.remove("is-closing");
     };
   }, [open]);
-  const sx = search ? { ...SEARCH_DEFAULTS, ...strip(search === true ? {} : search) } : null;
   const entries = sections?.length ? sections.flatMap((s) => s.items || []) : items || [];
   const rows = entries.filter(isRow);
+  const given_ = search ? strip(search === true ? {} : search) : null;
+  const n = given_ ? countOf2(given_.count, rows) : null;
+  const counted = n == null ? void 0 : `Search ${n} ${given_?.noun || "people"}`;
+  const sx = given_ ? {
+    ...SEARCH_DEFAULTS,
+    ...given_,
+    placeholder: given_.placeholder || counted || SEARCH_DEFAULTS.placeholder,
+    label: given_.label || counted
+  } : null;
   const isSelect = variant === "select" || variant == null && rows.some((it) => it.selected || it.value != null);
   const listRole = isSelect ? "listbox" : "menu";
   const asOption = isSelect || Boolean(sx);
@@ -2275,6 +2313,8 @@ function Dropdown({
   }, [givenKey, pick]);
   const picked = pickedKey != null ? rows.find((it) => keyOf(it) === pickedKey) : void 0;
   const shown = value != null ? value : isSelect ? picked?.label ?? given?.label : null;
+  const marked2 = isSelect && rows.some((it) => it.avatar);
+  const chosen = marked2 ? value != null ? rows.find((it) => it.label === value) : picked ?? given : void 0;
   const selectedOf = (it) => pickedKey != null ? it.disabled ? !!it.selected : keyOf(it) === pickedKey : !!it.selected;
   const hiddenBy = (it) => Boolean(sx) && !dropdownMatch(it.label, query);
   const filtering = Boolean(sx) && dropdownFiltering(query);
@@ -2506,7 +2546,7 @@ function Dropdown({
   };
   function renderRow(entry, key) {
     if (!isRow(entry)) {
-      return /* @__PURE__ */ jsx20("div", { className: "ui-dropdown__sep", role: "separator", hidden: filtering || void 0 }, key);
+      return /* @__PURE__ */ jsx21("div", { className: "ui-dropdown__sep", role: "separator", hidden: filtering || void 0 }, key);
     }
     const disabled2 = !!entry.disabled;
     const selected = selectedOf(entry);
@@ -2528,23 +2568,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__ */ jsxs16(Fragment6, { children: [
-        entry.icon && /* @__PURE__ */ jsx20(Glyph2, { name: entry.icon, className: "ui-dropdown__ic" }),
-        /* @__PURE__ */ jsxs16("span", { className: "ui-dropdown__main", children: [
-          /* @__PURE__ */ jsx20("span", { className: "ui-dropdown__label", children: entry.label }),
-          entry.description && /* @__PURE__ */ jsx20("span", { className: "ui-dropdown__desc", children: entry.description })
+      children: /* @__PURE__ */ jsxs17(Fragment6, { children: [
+        entry.avatar ? /* @__PURE__ */ jsx21(Avatar, { personKey: entry.avatar.key, name: entry.avatar.name, src: entry.avatar.src, empty: entry.avatar.empty }) : entry.icon && /* @__PURE__ */ jsx21(Glyph2, { name: entry.icon, className: "ui-dropdown__ic" }),
+        /* @__PURE__ */ jsxs17("span", { className: "ui-dropdown__main", children: [
+          /* @__PURE__ */ jsx21("span", { className: "ui-dropdown__label", children: entry.label }),
+          entry.description && /* @__PURE__ */ jsx21("span", { className: "ui-dropdown__desc", children: entry.description })
         ] }),
-        entry.badge ? /* @__PURE__ */ jsx20(RowBadge, { badge: entry.badge }) : null,
-        asOption && /* @__PURE__ */ jsx20(Glyph2, { name: "check", className: "ui-dropdown__tick", hidden: true })
+        entry.badge ? /* @__PURE__ */ jsx21(RowBadge, { badge: entry.badge }) : null,
+        asOption && /* @__PURE__ */ jsx21(Glyph2, { name: "check", className: "ui-dropdown__tick", hidden: true })
       ] })
     };
-    if (row) return /* @__PURE__ */ jsx20(Fragment5, { children: row(entry, props) }, key);
+    if (row) return /* @__PURE__ */ jsx21(Fragment5, { children: row(entry, props) }, key);
     const Tag = asLink ? "a" : "div";
-    return /* @__PURE__ */ jsx20(Tag, { ...props }, key);
+    return /* @__PURE__ */ jsx21(Tag, { ...props }, key);
   }
   const body = sections?.length ? sections.map((section, si) => {
     const gone = filtering && !(section.items || []).some((it) => isRow(it) && !hiddenBy(it));
-    return /* @__PURE__ */ jsxs16(
+    return /* @__PURE__ */ jsxs17(
       "div",
       {
         className: "ui-dropdown__section",
@@ -2552,7 +2592,7 @@ function Dropdown({
         "aria-label": section.label || void 0,
         hidden: gone || void 0,
         children: [
-          section.label && /* @__PURE__ */ jsx20("div", { className: "ui-dropdown__group", role: "presentation", children: section.label }),
+          section.label && /* @__PURE__ */ jsx21("div", { className: "ui-dropdown__group", role: "presentation", children: section.label }),
           (section.items || []).map((entry, i) => renderRow(entry, `s${si}-${i}`))
         ]
       },
@@ -2560,12 +2600,12 @@ function Dropdown({
     );
   }) : (items || []).map((entry, i) => renderRow(entry, `i${i}`));
   const cap = scroll && scroll !== true ? { "--ui-dropdown-cap": typeof scroll === "number" ? `${scroll}px` : scroll } : void 0;
-  const none = sx && filtering && !visible.length ? /* @__PURE__ */ jsxs16(Fragment6, { children: [
-    /* @__PURE__ */ jsx20("span", { className: "ui-dropdown__none-title", children: sx.empty.replace("{q}", () => query.trim()) }),
-    /* @__PURE__ */ jsx20("span", { className: "ui-dropdown__none-hint", children: sx.hint })
+  const none = sx && filtering && !visible.length ? /* @__PURE__ */ jsxs17(Fragment6, { children: [
+    /* @__PURE__ */ jsx21("span", { className: "ui-dropdown__none-title", children: sx.empty.replace("{q}", () => query.trim()) }),
+    /* @__PURE__ */ jsx21("span", { className: "ui-dropdown__none-hint", children: sx.hint })
   ] }) : null;
-  return /* @__PURE__ */ jsxs16("div", { className: cx6("ui-dropdown", open && "open"), id, ref: root, onKeyDown, children: [
-    /* @__PURE__ */ jsxs16(
+  return /* @__PURE__ */ jsxs17("div", { className: cx6("ui-dropdown", open && "open"), id, ref: root, onKeyDown, children: [
+    /* @__PURE__ */ jsxs17(
       "button",
       {
         type: "button",
@@ -2585,15 +2625,16 @@ function Dropdown({
           setOpen(!open);
         },
         children: [
-          triggerContent != null ? triggerContent : /* @__PURE__ */ jsxs16(Fragment6, { children: [
-            label && /* @__PURE__ */ jsx20("span", { className: "ui-dropdown__pre", children: label }),
-            /* @__PURE__ */ jsx20("span", { className: "ui-dropdown__value", children: shown != null ? shown : placeholder })
+          triggerContent != null ? triggerContent : /* @__PURE__ */ jsxs17(Fragment6, { children: [
+            marked2 && (chosen?.avatar ? /* @__PURE__ */ jsx21(Avatar, { personKey: chosen.avatar.key, name: chosen.avatar.name, src: chosen.avatar.src, empty: chosen.avatar.empty }) : /* @__PURE__ */ jsx21(Avatar, { empty: true })),
+            label && /* @__PURE__ */ jsx21("span", { className: "ui-dropdown__pre", children: label }),
+            /* @__PURE__ */ jsx21("span", { className: cx6("ui-dropdown__value", marked2 && !chosen && "is-placeholder"), children: shown != null ? shown : placeholder })
           ] }),
-          chevron && /* @__PURE__ */ jsx20("span", { className: "ui-dropdown__chevron", "aria-hidden": "true" })
+          chevron && /* @__PURE__ */ jsx21("span", { className: "ui-dropdown__chevron", "aria-hidden": "true" })
         ]
       }
     ),
-    /* @__PURE__ */ jsxs16(
+    /* @__PURE__ */ jsxs17(
       "div",
       {
         className: cx6(
@@ -2614,10 +2655,10 @@ function Dropdown({
         onMouseMove,
         children: [
           header,
-          sx ? /* @__PURE__ */ jsxs16(Fragment6, { children: [
-            /* @__PURE__ */ jsxs16("div", { className: "ui-dropdown__search", children: [
-              /* @__PURE__ */ jsx20(Glyph2, { name: "search", className: "ui-dropdown__search-ic", hidden: true }),
-              /* @__PURE__ */ jsx20(
+          sx ? /* @__PURE__ */ jsxs17(Fragment6, { children: [
+            /* @__PURE__ */ jsxs17("div", { className: "ui-dropdown__search", children: [
+              /* @__PURE__ */ jsx21(Glyph2, { name: "search", className: "ui-dropdown__search-ic", hidden: true }),
+              /* @__PURE__ */ jsx21(
                 "input",
                 {
                   className: "ui-dropdown__search-input",
@@ -2641,8 +2682,8 @@ function Dropdown({
                 }
               )
             ] }),
-            /* @__PURE__ */ jsx20("div", { className: "ui-dropdown__list", role: "listbox", id: listId, "aria-label": name, style: cap, children: body }),
-            /* @__PURE__ */ jsx20(
+            /* @__PURE__ */ jsx21("div", { className: "ui-dropdown__list", role: "listbox", id: listId, "aria-label": name, style: cap, children: body }),
+            /* @__PURE__ */ jsx21(
               "div",
               {
                 className: "ui-dropdown__none",
@@ -2667,7 +2708,7 @@ function strip(o) {
 }
 
 // src/BackLink.tsx
-import { jsx as jsx21, jsxs as jsxs17 } from "react/jsx-runtime";
+import { jsx as jsx22, jsxs as jsxs18 } from "react/jsx-runtime";
 var BARE = "Back";
 var SCRIPTED = /^javascript:/i;
 var LEADING = /^[\u0000-\u0020]+/;
@@ -2686,7 +2727,7 @@ function BackLink({
   const name = text(label).replace(SAID, "");
   const bare = !name || name.toLowerCase() === BARE.toLowerCase();
   const Tag = as ?? "a";
-  return /* @__PURE__ */ jsxs17(
+  return /* @__PURE__ */ jsxs18(
     Tag,
     {
       className: ["ui-back", className].filter(Boolean).join(" "),
@@ -2694,8 +2735,8 @@ function BackLink({
       "aria-label": bare ? void 0 : `${BARE} to ${name}`,
       ...rest,
       children: [
-        /* @__PURE__ */ jsx21(Icon, { name: "chevronLeft" }),
-        /* @__PURE__ */ jsx21("span", { className: "ui-back__label", children: bare ? BARE : name })
+        /* @__PURE__ */ jsx22(Icon, { name: "chevronLeft" }),
+        /* @__PURE__ */ jsx22("span", { className: "ui-back__label", children: bare ? BARE : name })
       ]
     }
   );
@@ -2703,41 +2744,41 @@ function BackLink({
 
 // src/TableValues.tsx
 import { formatNumericValue, formatDeltaValue } from "@apliteni/apliteni-ui";
-import { jsx as jsx22, jsxs as jsxs18 } from "react/jsx-runtime";
+import { jsx as jsx23, jsxs as jsxs19 } from "react/jsx-runtime";
 function NumericValue(props) {
   const value = formatNumericValue(props);
-  return /* @__PURE__ */ jsx22("span", { children: /* @__PURE__ */ jsxs18("span", { className: "ui-value", "aria-label": value.missing, children: [
+  return /* @__PURE__ */ jsx23("span", { children: /* @__PURE__ */ jsxs19("span", { className: "ui-value", "aria-label": value.missing, children: [
     value.text,
-    value.unit && /* @__PURE__ */ jsx22("span", { className: "ui-value__unit", children: value.unit })
+    value.unit && /* @__PURE__ */ jsx23("span", { className: "ui-value__unit", children: value.unit })
   ] }) });
 }
 function DeltaValue(props) {
   const value = formatDeltaValue(props);
-  return /* @__PURE__ */ jsx22("span", { children: /* @__PURE__ */ jsx22("span", { className: value.className, "aria-describedby": value.basisId || void 0, children: value.text }) });
+  return /* @__PURE__ */ jsx23("span", { children: /* @__PURE__ */ jsx23("span", { className: value.className, "aria-describedby": value.basisId || void 0, children: value.text }) });
 }
 function RowIdentity({ symbol, name, logo, href }) {
   const Tag = href ? "a" : "span";
-  return /* @__PURE__ */ jsxs18(Tag, { className: "ui-identity", href, children: [
-    /* @__PURE__ */ jsxs18("span", { className: "ui-identity__logo", "aria-hidden": "true", children: [
-      /* @__PURE__ */ jsx22("span", { children: symbol.slice(0, 1) }),
-      logo && /* @__PURE__ */ jsx22("img", { src: logo, alt: "", onLoad: (e) => {
+  return /* @__PURE__ */ jsxs19(Tag, { className: "ui-identity", href, children: [
+    /* @__PURE__ */ jsxs19("span", { className: "ui-identity__logo", "aria-hidden": "true", children: [
+      /* @__PURE__ */ jsx23("span", { children: symbol.slice(0, 1) }),
+      logo && /* @__PURE__ */ jsx23("img", { src: logo, alt: "", onLoad: (e) => {
         e.currentTarget.hidden = false;
       }, onError: (e) => {
         e.currentTarget.hidden = true;
       } })
     ] }),
-    /* @__PURE__ */ jsx22("span", { className: "ui-identity__symbol", children: symbol }),
-    /* @__PURE__ */ jsx22("span", { className: "ui-identity__name", children: name })
+    /* @__PURE__ */ jsx23("span", { className: "ui-identity__symbol", children: symbol }),
+    /* @__PURE__ */ jsx23("span", { className: "ui-identity__name", children: name })
   ] });
 }
 
 // src/Segmented.tsx
 import { segmentedNextIndex } from "@apliteni/apliteni-ui";
-import { jsx as jsx23 } from "react/jsx-runtime";
+import { jsx as jsx24 } from "react/jsx-runtime";
 function Segmented({ options, value, onChange, label, appearance = "pill", size, block = false, disabled = false }) {
   const enabled = options.filter((o) => !o.disabled);
   const tabValue = enabled.some((o) => o.value === value) ? value : enabled[0]?.value;
-  return /* @__PURE__ */ jsx23("div", { className: `ui-seg${size === "sm" ? " ui-seg--sm" : ""}${block ? " ui-seg--block" : ""}${appearance === "underline" ? " ui-seg--underline" : ""}`, role: "toolbar", "aria-label": label, children: options.map((option) => /* @__PURE__ */ jsx23(
+  return /* @__PURE__ */ jsx24("div", { className: `ui-seg${size === "sm" ? " ui-seg--sm" : ""}${block ? " ui-seg--block" : ""}${appearance === "underline" ? " ui-seg--underline" : ""}`, role: "toolbar", "aria-label": label, children: options.map((option) => /* @__PURE__ */ jsx24(
     "button",
     {
       type: "button",
@@ -2763,17 +2804,17 @@ function Segmented({ options, value, onChange, label, appearance = "pill", size,
 }
 
 // src/FilterBar.tsx
-import { useRef as useRef12, useState as useState8 } from "react";
+import { useRef as useRef12, useState as useState9 } from "react";
 import { filterChipText, filterChipName, filterChipUnset, filterChipItems, focusNextStop } from "@apliteni/apliteni-ui";
-import { Fragment as Fragment7, jsx as jsx24, jsxs as jsxs19 } from "react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx25, jsxs as jsxs20 } from "react/jsx-runtime";
 var SEARCH_AT = 10;
 var isRow2 = (entry) => entry !== "---" && !entry.separator;
 function FilterBar({ filters, label = "Filters", clearLabel = "Clear all", clearVariant = "ghost", add, addLabel = "Filter", disabled = false, busy = false, onRemove, onClear, onChange, onAdd }) {
   const bar = useRef12(null);
   const focused = useRef12(null);
   const landing = useRef12(null);
-  const [opened, setOpened] = useState8({});
-  const [adding, setAdding] = useState8(false);
+  const [opened, setOpened] = useState9({});
+  const [adding, setAdding] = useState9(false);
   const blocked = disabled || busy;
   const offer = (add || []).filter((entry) => !filters.some((filter) => filter.id === entry.id));
   const source = /* @__PURE__ */ new Map();
@@ -2808,7 +2849,7 @@ function FilterBar({ filters, label = "Filters", clearLabel = "Clear all", clear
     if (target) target.focus();
     else focusNextStop(bar.current);
   });
-  return /* @__PURE__ */ jsx24("div", { children: /* @__PURE__ */ jsxs19(
+  return /* @__PURE__ */ jsx25("div", { children: /* @__PURE__ */ jsxs20(
     "fieldset",
     {
       ref: bar,
@@ -2821,8 +2862,8 @@ function FilterBar({ filters, label = "Filters", clearLabel = "Clear all", clear
         if (event.relatedTarget && !event.currentTarget.contains(event.relatedTarget)) focused.current = null;
       },
       children: [
-        /* @__PURE__ */ jsx24("legend", { className: "ui-filter-bar__legend", children: label }),
-        filters.map((filter, index) => /* @__PURE__ */ jsxs19(
+        /* @__PURE__ */ jsx25("legend", { className: "ui-filter-bar__legend", children: label }),
+        filters.map((filter, index) => /* @__PURE__ */ jsxs20(
           "fieldset",
           {
             className: "ui-filter-bar__chip",
@@ -2832,14 +2873,14 @@ function FilterBar({ filters, label = "Filters", clearLabel = "Clear all", clear
               focused.current = { id: filter.id, index };
             },
             children: [
-              /* @__PURE__ */ jsx24("legend", { className: "ui-filter-bar__legend", children: filter.label }),
-              /* @__PURE__ */ jsx24(
+              /* @__PURE__ */ jsx25("legend", { className: "ui-filter-bar__legend", children: filter.label }),
+              /* @__PURE__ */ jsx25(
                 Dropdown,
                 {
                   items: filterChipItems(filter),
                   variant: "select",
                   ariaLabel: filterChipName(filter),
-                  triggerContent: /* @__PURE__ */ jsx24("span", { className: filterChipUnset(filter) ? "ui-dropdown__value is-placeholder" : "ui-dropdown__value", children: filterChipText(filter) }),
+                  triggerContent: /* @__PURE__ */ jsx25("span", { className: filterChipUnset(filter) ? "ui-dropdown__value is-placeholder" : "ui-dropdown__value", children: filterChipText(filter) }),
                   open: !blocked && !filter.disabled && (opened[filter.id] && opened[filter.id].against === filter.open ? opened[filter.id].open : !!filter.open),
                   onOpenChange: (open) => setOpened((previous) => ({ ...previous, [filter.id]: { open, against: filter.open } })),
                   onSelect: (value) => {
@@ -2847,7 +2888,7 @@ function FilterBar({ filters, label = "Filters", clearLabel = "Clear all", clear
                   }
                 }
               ),
-              /* @__PURE__ */ jsx24(
+              /* @__PURE__ */ jsx25(
                 "button",
                 {
                   type: "button",
@@ -2864,16 +2905,16 @@ function FilterBar({ filters, label = "Filters", clearLabel = "Clear all", clear
           },
           filter.id
         )),
-        offering && /* @__PURE__ */ jsx24("div", { "data-filter-add": "", onFocus: () => {
+        offering && /* @__PURE__ */ jsx25("div", { "data-filter-add": "", onFocus: () => {
           focused.current = null;
-        }, children: /* @__PURE__ */ jsx24(
+        }, children: /* @__PURE__ */ jsx25(
           Dropdown,
           {
             variant: "menu",
             sections,
             ariaLabel: addLabel,
-            triggerContent: /* @__PURE__ */ jsxs19(Fragment7, { children: [
-              /* @__PURE__ */ jsx24(Icon, { name: "plus" }),
+            triggerContent: /* @__PURE__ */ jsxs20(Fragment7, { children: [
+              /* @__PURE__ */ jsx25(Icon, { name: "plus" }),
               addLabel
             ] }),
             search: options >= SEARCH_AT && { label: `Search ${label.toLowerCase()}` },
@@ -2887,9 +2928,9 @@ function FilterBar({ filters, label = "Filters", clearLabel = "Clear all", clear
             }
           }
         ) }),
-        filters.length > 0 && /* @__PURE__ */ jsx24("span", { "data-filter-clear": "", onFocus: () => {
+        filters.length > 0 && /* @__PURE__ */ jsx25("span", { "data-filter-clear": "", onFocus: () => {
           focused.current = { id: null, index: 0 };
-        }, children: /* @__PURE__ */ jsx24(Button, { size: "sm", variant: clearVariant, onClick: () => {
+        }, children: /* @__PURE__ */ jsx25(Button, { size: "sm", variant: clearVariant, onClick: () => {
           if (!blocked) onClear();
         }, children: clearLabel }) })
       ]
@@ -2898,34 +2939,34 @@ function FilterBar({ filters, label = "Filters", clearLabel = "Clear all", clear
 }
 
 // src/KeyValueList.tsx
-import { jsx as jsx25, jsxs as jsxs20 } from "react/jsx-runtime";
+import { jsx as jsx26, jsxs as jsxs21 } from "react/jsx-runtime";
 function detail({ value, redacted }) {
-  if (redacted) return /* @__PURE__ */ jsxs20("span", { className: "ui-kv__hidden", children: [
-    /* @__PURE__ */ jsx25(Icon, { name: "eyeOff" }),
+  if (redacted) return /* @__PURE__ */ jsxs21("span", { className: "ui-kv__hidden", children: [
+    /* @__PURE__ */ jsx26(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__ */ jsx25("dl", { ...rest, className: ["ui-kv", columns === 2 && "ui-kv--two-columns", className].filter(Boolean).join(" "), children: rows.map((row, index) => /* @__PURE__ */ jsxs20("div", { className: "ui-drawer__row", children: [
-    /* @__PURE__ */ jsx25("dt", { children: row.label }),
-    /* @__PURE__ */ jsx25("dd", { children: detail(row) })
+  return /* @__PURE__ */ jsx26("dl", { ...rest, className: ["ui-kv", columns === 2 && "ui-kv--two-columns", className].filter(Boolean).join(" "), children: rows.map((row, index) => /* @__PURE__ */ jsxs21("div", { className: "ui-drawer__row", children: [
+    /* @__PURE__ */ jsx26("dt", { children: row.label }),
+    /* @__PURE__ */ jsx26("dd", { children: detail(row) })
   ] }, index)) });
 }
 function DrawerSection({ title, headingLevel = 3, className, children, ...rest }) {
   const Heading = `h${headingLevel}`;
-  return /* @__PURE__ */ jsxs20("section", { ...rest, className: ["ui-drawer__section", className].filter(Boolean).join(" "), children: [
-    title != null && /* @__PURE__ */ jsx25(Heading, { className: "ui-drawer__section-title", children: title }),
+  return /* @__PURE__ */ jsxs21("section", { ...rest, className: ["ui-drawer__section", className].filter(Boolean).join(" "), children: [
+    title != null && /* @__PURE__ */ jsx26(Heading, { className: "ui-drawer__section-title", children: title }),
     children
   ] });
 }
 
 // src/Snippet.tsx
-import { useEffect as useEffect8, useRef as useRef13, useState as useState9 } from "react";
-import { Fragment as Fragment8, jsx as jsx26, jsxs as jsxs21 } from "react/jsx-runtime";
+import { useEffect as useEffect8, useRef as useRef13, useState as useState10 } from "react";
+import { Fragment as Fragment8, jsx as jsx27, jsxs as jsxs22 } from "react/jsx-runtime";
 function Snippet({ label = "shell", code = "", children, copy = true, reveal = false, copyLabel = "Copy code" }) {
-  const [status, setStatus] = useState9("idle");
+  const [status, setStatus] = useState10("idle");
   const request = useRef13(0);
   const timer = useRef13(void 0);
   useEffect8(() => {
@@ -2948,11 +2989,11 @@ function Snippet({ label = "shell", code = "", children, copy = true, reveal = f
       if (current === request.current) setStatus("failed");
     }
   }
-  return /* @__PURE__ */ jsxs21("div", { className: reveal ? "ui-snippet ui-snippet--reveal" : "ui-snippet", children: [
-    /* @__PURE__ */ jsxs21("div", { className: "ui-snippet__bar", children: [
-      /* @__PURE__ */ jsx26("span", { children: label }),
-      copy && /* @__PURE__ */ jsxs21(Fragment8, { children: [
-        /* @__PURE__ */ jsx26(
+  return /* @__PURE__ */ jsxs22("div", { className: reveal ? "ui-snippet ui-snippet--reveal" : "ui-snippet", children: [
+    /* @__PURE__ */ jsxs22("div", { className: "ui-snippet__bar", children: [
+      /* @__PURE__ */ jsx27("span", { children: label }),
+      copy && /* @__PURE__ */ jsxs22(Fragment8, { children: [
+        /* @__PURE__ */ jsx27(
           "button",
           {
             type: "button",
@@ -2960,20 +3001,20 @@ function Snippet({ label = "shell", code = "", children, copy = true, reveal = f
             "aria-label": copyLabel,
             title: copyLabel,
             onClick: handleCopy,
-            children: /* @__PURE__ */ jsx26(Icon, { name: status === "idle" ? "copy" : "check" })
+            children: /* @__PURE__ */ jsx27(Icon, { name: status === "idle" ? "copy" : "check" })
           }
         ),
-        /* @__PURE__ */ jsx26("span", { className: "ui-sr ui-snippet__status", role: "status", "aria-live": "polite", children: status === "copied" ? "Copied" : status === "failed" ? "Copy failed" : "" })
+        /* @__PURE__ */ jsx27("span", { className: "ui-sr ui-snippet__status", role: "status", "aria-live": "polite", children: status === "copied" ? "Copied" : status === "failed" ? "Copy failed" : "" })
       ] })
     ] }),
-    /* @__PURE__ */ jsx26("pre", { children: children ?? code })
+    /* @__PURE__ */ jsx27("pre", { children: children ?? code })
   ] });
 }
 
 // src/Tabs.tsx
 import { useEffect as useEffect9, useId as useId9, useRef as useRef14 } from "react";
 import { playEntrance } from "@apliteni/apliteni-ui/motion";
-import { Fragment as Fragment9, jsx as jsx27, jsxs as jsxs22 } from "react/jsx-runtime";
+import { Fragment as Fragment9, jsx as jsx28, jsxs as jsxs23 } from "react/jsx-runtime";
 function Tabs({ items, value, onChange, label }) {
   const id = useId9();
   const previous = useRef14(value);
@@ -2983,8 +3024,8 @@ function Tabs({ items, value, onChange, label }) {
     if (previous.current !== value) playEntrance(activePanel.current);
     previous.current = value;
   }, [value]);
-  return /* @__PURE__ */ jsxs22("div", { className: "ui-tabs", children: [
-    /* @__PURE__ */ jsx27("div", { className: "ui-tabs__list", role: "tablist", "aria-label": label, children: items.map((item, i) => /* @__PURE__ */ jsxs22(
+  return /* @__PURE__ */ jsxs23("div", { className: "ui-tabs", children: [
+    /* @__PURE__ */ jsx28("div", { className: "ui-tabs__list", role: "tablist", "aria-label": label, children: items.map((item, i) => /* @__PURE__ */ jsxs23(
       "button",
       {
         type: "button",
@@ -3022,7 +3063,7 @@ function Tabs({ items, value, onChange, label }) {
         },
         children: [
           item.label,
-          item.count != null && /* @__PURE__ */ jsxs22(Fragment9, { children: [
+          item.count != null && /* @__PURE__ */ jsxs23(Fragment9, { children: [
             " ",
             item.count
           ] })
@@ -3030,7 +3071,7 @@ function Tabs({ items, value, onChange, label }) {
       },
       item.value
     )) }),
-    /* @__PURE__ */ jsx27("div", { className: "ui-tabs__panels", children: items.map((item, i) => /* @__PURE__ */ jsx27(
+    /* @__PURE__ */ jsx28("div", { className: "ui-tabs__panels", children: items.map((item, i) => /* @__PURE__ */ jsx28(
       "div",
       {
         className: "ui-tabs__panel",
@@ -3050,7 +3091,7 @@ function Tabs({ items, value, onChange, label }) {
 // src/Timeline.tsx
 import { useEffect as useEffect10, useRef as useRef15 } from "react";
 import { playEntrance as playEntrance2, prefersReducedMotion } from "@apliteni/apliteni-ui/motion";
-import { jsx as jsx28, jsxs as jsxs23 } from "react/jsx-runtime";
+import { jsx as jsx29, jsxs as jsxs24 } from "react/jsx-runtime";
 var kindIcons = { person: "user", rule: "bolt", reversal: "refresh" };
 function Timeline({ events, className, ...rest }) {
   const previousIds = useRef15(new Set(events.map((event) => event.id)));
@@ -3067,7 +3108,7 @@ function Timeline({ events, className, ...rest }) {
     }
     previousIds.current = new Set(events.map((event) => event.id));
   }, [events]);
-  return /* @__PURE__ */ jsx28("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__ */ jsxs23(
+  return /* @__PURE__ */ jsx29("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__ */ jsxs24(
     "li",
     {
       className: "ui-timeline__event",
@@ -3076,20 +3117,20 @@ function Timeline({ events, className, ...rest }) {
         else rows.current.delete(event.id);
       },
       children: [
-        /* @__PURE__ */ jsx28("span", { "aria-hidden": "true", className: [
+        /* @__PURE__ */ jsx29("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__ */ jsx28(Icon, { name: kindIcons[event.kind] }) }),
-        /* @__PURE__ */ jsxs23("div", { className: "ui-timeline__head", children: [
-          /* @__PURE__ */ jsx28("span", { className: "ui-timeline__actor", children: event.actor }),
-          /* @__PURE__ */ jsx28("time", { dateTime: event.dateTime, children: event.timestamp }),
-          index === events.length - 1 && event.relativeTimestamp && /* @__PURE__ */ jsx28("span", { className: "ui-timeline__relative", children: event.relativeTimestamp })
+        ].filter(Boolean).join(" "), children: event.kind && /* @__PURE__ */ jsx29(Icon, { name: kindIcons[event.kind] }) }),
+        /* @__PURE__ */ jsxs24("div", { className: "ui-timeline__head", children: [
+          /* @__PURE__ */ jsx29("span", { className: "ui-timeline__actor", children: event.actor }),
+          /* @__PURE__ */ jsx29("time", { dateTime: event.dateTime, children: event.timestamp }),
+          index === events.length - 1 && event.relativeTimestamp && /* @__PURE__ */ jsx29("span", { className: "ui-timeline__relative", children: event.relativeTimestamp })
         ] }),
-        /* @__PURE__ */ jsx28("p", { className: "ui-timeline__description", children: event.description }),
-        (event.meta != null || event.undo) && /* @__PURE__ */ jsxs23("div", { className: "ui-timeline__meta", children: [
-          event.meta != null && /* @__PURE__ */ jsx28("span", { children: event.meta }),
-          event.undo && /* @__PURE__ */ jsx28(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__ */ jsx29("p", { className: "ui-timeline__description", children: event.description }),
+        (event.meta != null || event.undo) && /* @__PURE__ */ jsxs24("div", { className: "ui-timeline__meta", children: [
+          event.meta != null && /* @__PURE__ */ jsx29("span", { children: event.meta }),
+          event.undo && /* @__PURE__ */ jsx29(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" })
         ] })
       ]
     },
@@ -3098,29 +3139,29 @@ function Timeline({ events, className, ...rest }) {
 }
 
 // src/Field.tsx
-import { forwardRef as forwardRef6, useEffect as useEffect11, useId as useId10, useRef as useRef16, useState as useState10 } from "react";
-import { esc, icon as icon4 } from "@apliteni/apliteni-ui";
-import { jsx as jsx29, jsxs as jsxs24 } from "react/jsx-runtime";
+import { forwardRef as forwardRef6, useEffect as useEffect11, useId as useId10, useRef as useRef16, useState as useState11 } from "react";
+import { esc, icon as icon5 } from "@apliteni/apliteni-ui";
+import { jsx as jsx30, jsxs as jsxs25 } from "react/jsx-runtime";
 function messages(id, hint, error) {
   return [error && `${id}-error`, hint && `${id}-hint`].filter(Boolean).join(" ") || void 0;
 }
 function Frame({ id, labelId, label, hint, error, required, children }) {
-  return /* @__PURE__ */ jsxs24("div", { className: "ui-field", children: [
-    /* @__PURE__ */ jsxs24("label", { className: "ui-field__label", id: labelId, htmlFor: id, children: [
+  return /* @__PURE__ */ jsxs25("div", { className: "ui-field", children: [
+    /* @__PURE__ */ jsxs25("label", { className: "ui-field__label", id: labelId, htmlFor: id, children: [
       label,
-      required && /* @__PURE__ */ jsx29("span", { className: "ui-field__req", "aria-hidden": "true", children: "*" })
+      required && /* @__PURE__ */ jsx30("span", { className: "ui-field__req", "aria-hidden": "true", children: "*" })
     ] }),
     children,
-    error && /* @__PURE__ */ jsx29(
+    error && /* @__PURE__ */ jsx30(
       "div",
       {
         id: `${id}-error`,
         className: "ui-field__error",
         role: "alert",
-        dangerouslySetInnerHTML: { __html: icon4("alert") + esc(error) }
+        dangerouslySetInnerHTML: { __html: icon5("alert") + esc(error) }
       }
     ),
-    hint && /* @__PURE__ */ jsx29("div", { id: `${id}-hint`, className: "ui-field__hint", children: hint })
+    hint && /* @__PURE__ */ jsx30("div", { id: `${id}-hint`, className: "ui-field__hint", children: hint })
   ] });
 }
 function wiring(id, hint, error) {
@@ -3130,13 +3171,13 @@ function Field({ id: suppliedId, label, hint, error, required, children }) {
   const generatedId = useId10();
   const id = suppliedId ?? generatedId;
   const labelId = `${id}-label`;
-  return /* @__PURE__ */ jsx29(Frame, { ...{ id, labelId, label, hint, error, required }, children: /* @__PURE__ */ jsx29(FieldContext.Provider, { value: { id, labelId }, children: children({ ...wiring(id, hint, error), required }) }) });
+  return /* @__PURE__ */ jsx30(Frame, { ...{ id, labelId, label, hint, error, required }, children: /* @__PURE__ */ jsx30(FieldContext.Provider, { value: { id, labelId }, children: children({ ...wiring(id, hint, error), required }) }) });
 }
 var TextField = forwardRef6(function TextField2({ label, hint, error, required, type = "text", unit, icon: glyph, className = "", ...props }, ref) {
   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__ */ jsx29(
+  const control = /* @__PURE__ */ jsx30(
     "input",
     {
       ref,
@@ -3149,19 +3190,19 @@ var TextField = forwardRef6(function TextField2({ label, hint, error, required,
       className: `ui-input${error ? " is-invalid" : ""} ${className}`
     }
   );
-  const unitSpan = hasUnit ? /* @__PURE__ */ jsx29("span", { id: `${id}-unit`, className: "ui-field-number__unit", children: unit }) : null;
-  return /* @__PURE__ */ jsx29(Frame, { ...{ id, label, hint, error, required }, children: glyph ? /* @__PURE__ */ jsxs24("div", { className: `ui-input-group${hasUnit ? " ui-field-number" : ""}`, children: [
-    /* @__PURE__ */ jsx29("span", { className: "ui-input-group__icon", dangerouslySetInnerHTML: { __html: icon4(glyph) } }),
+  const unitSpan = hasUnit ? /* @__PURE__ */ jsx30("span", { id: `${id}-unit`, className: "ui-field-number__unit", children: unit }) : null;
+  return /* @__PURE__ */ jsx30(Frame, { ...{ id, label, hint, error, required }, children: glyph ? /* @__PURE__ */ jsxs25("div", { className: `ui-input-group${hasUnit ? " ui-field-number" : ""}`, children: [
+    /* @__PURE__ */ jsx30("span", { className: "ui-input-group__icon", dangerouslySetInnerHTML: { __html: icon5(glyph) } }),
     control,
     unitSpan
-  ] }) : hasUnit ? /* @__PURE__ */ jsxs24("div", { className: "ui-field-number", children: [
+  ] }) : hasUnit ? /* @__PURE__ */ jsxs25("div", { className: "ui-field-number", children: [
     control,
     unitSpan
   ] }) : control });
 });
 function TextArea({ label, hint, error, required, className = "", ...props }) {
   const id = useId10();
-  return /* @__PURE__ */ jsx29(Frame, { ...{ id, label, hint, error, required }, children: /* @__PURE__ */ jsx29(
+  return /* @__PURE__ */ jsx30(Frame, { ...{ id, label, hint, error, required }, children: /* @__PURE__ */ jsx30(
     "textarea",
     {
       rows: 4,
@@ -3174,7 +3215,7 @@ function TextArea({ label, hint, error, required, className = "", ...props }) {
 }
 function SelectField({ label, hint, error, required, className = "", children, ...props }) {
   const id = useId10();
-  return /* @__PURE__ */ jsx29(Frame, { ...{ id, label, hint, error, required }, children: /* @__PURE__ */ jsx29(
+  return /* @__PURE__ */ jsx30(Frame, { ...{ id, label, hint, error, required }, children: /* @__PURE__ */ jsx30(
     "select",
     {
       ...props,
@@ -3188,8 +3229,8 @@ function SelectField({ label, hint, error, required, className = "", children, .
 function FileField({ label, hint, error, required, disabled, onFileChange, className = "", ...props }) {
   const id = useId10();
   const input = useRef16(null);
-  const [file, setFile] = useState10(null);
-  const [dragging, setDragging] = useState10(false);
+  const [file, setFile] = useState11(null);
+  const [dragging, setDragging] = useState11(false);
   useEffect11(() => {
     const form = input.current?.form;
     const reset = () => {
@@ -3203,7 +3244,7 @@ function FileField({ label, hint, error, required, disabled, onFileChange, class
     setFile(next);
     onFileChange?.(next);
   };
-  return /* @__PURE__ */ jsx29(Frame, { ...{ id, label, hint, error, required }, children: /* @__PURE__ */ jsxs24(
+  return /* @__PURE__ */ jsx30(Frame, { ...{ id, label, hint, error, required }, children: /* @__PURE__ */ jsxs25(
     "div",
     {
       className: `ui-file${dragging && !disabled ? " is-dragging" : ""}${file ? " has-file" : ""}${error ? " is-invalid" : ""}${disabled ? " is-disabled" : ""}`,
@@ -3224,12 +3265,12 @@ function FileField({ label, hint, error, required, disabled, onFileChange, class
         update(transfer.files[0]);
       },
       children: [
-        /* @__PURE__ */ jsx29("span", { className: "ui-file__glyph", children: /* @__PURE__ */ jsx29(Icon, { name: "upload" }) }),
-        /* @__PURE__ */ jsx29("div", { "aria-live": "polite", children: file ? file.name : "Drop a file here" }),
-        /* @__PURE__ */ jsx29("div", { children: "or choose one from your device" }),
-        /* @__PURE__ */ jsxs24("span", { className: "ui-file__choose", children: [
-          /* @__PURE__ */ jsx29("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__ */ jsx29(
+        /* @__PURE__ */ jsx30("span", { className: "ui-file__glyph", children: /* @__PURE__ */ jsx30(Icon, { name: "upload" }) }),
+        /* @__PURE__ */ jsx30("div", { "aria-live": "polite", children: file ? file.name : "Drop a file here" }),
+        /* @__PURE__ */ jsx30("div", { children: "or choose one from your device" }),
+        /* @__PURE__ */ jsxs25("span", { className: "ui-file__choose", children: [
+          /* @__PURE__ */ jsx30("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__ */ jsx30(
             "input",
             {
               ...props,
@@ -3249,8 +3290,8 @@ function FileField({ label, hint, error, required, disabled, onFileChange, class
 }
 
 // src/FileDrop.tsx
-import { useRef as useRef17, useState as useState11 } from "react";
-import { Fragment as Fragment10, jsx as jsx30, jsxs as jsxs25 } from "react/jsx-runtime";
+import { useRef as useRef17, useState as useState12 } from "react";
+import { Fragment as Fragment10, jsx as jsx31, jsxs as jsxs26 } from "react/jsx-runtime";
 var MARKS = {
   uploading: "clock",
   done: "circleCheck",
@@ -3284,7 +3325,7 @@ function FileDrop({
   className
 }) {
   const input = useRef17(null);
-  const [over, setOver] = useState11(false);
+  const [over, setOver] = useState12(false);
   const status = file?.status ?? "uploading";
   const word = status === "error" ? file?.error ?? WORDS.error : file?.state ?? WORDS[status];
   const [stem, ext] = splitName(file?.name ?? "");
@@ -3295,7 +3336,7 @@ function FileDrop({
   const take = (chosen) => {
     if (chosen && !disabled) onFile?.(chosen);
   };
-  return /* @__PURE__ */ jsxs25(
+  return /* @__PURE__ */ jsxs26(
     "div",
     {
       className: cx7("ui-drop", disabled && "is-disabled", className),
@@ -3315,16 +3356,16 @@ function FileDrop({
       },
       children: [
         children,
-        /* @__PURE__ */ jsxs25("div", { className: "ui-drop__row", children: [
-          file ? /* @__PURE__ */ jsxs25("div", { className: cx7("ui-drop__file", status === "error" && "ui-drop__file--failed"), children: [
-            /* @__PURE__ */ jsxs25("div", { className: "ui-drop__line", children: [
-              /* @__PURE__ */ jsxs25("span", { className: "ui-drop__name", title: file.name, children: [
-                /* @__PURE__ */ jsx30("span", { className: "ui-drop__stem", children: stem }),
-                /* @__PURE__ */ jsx30("span", { className: "ui-drop__ext", children: ext })
+        /* @__PURE__ */ jsxs26("div", { className: "ui-drop__row", children: [
+          file ? /* @__PURE__ */ jsxs26("div", { className: cx7("ui-drop__file", status === "error" && "ui-drop__file--failed"), children: [
+            /* @__PURE__ */ jsxs26("div", { className: "ui-drop__line", children: [
+              /* @__PURE__ */ jsxs26("span", { className: "ui-drop__name", title: file.name, children: [
+                /* @__PURE__ */ jsx31("span", { className: "ui-drop__stem", children: stem }),
+                /* @__PURE__ */ jsx31("span", { className: "ui-drop__ext", children: ext })
               ] }),
-              (onRemove || status === "error" && onRetry) && /* @__PURE__ */ jsxs25("span", { className: "ui-drop__actions", children: [
-                status === "error" && onRetry && /* @__PURE__ */ jsx30(Button, { size: "sm", icon: "refresh", onClick: onRetry, disabled, children: retryLabel }),
-                onRemove && /* @__PURE__ */ jsx30(
+              (onRemove || status === "error" && onRetry) && /* @__PURE__ */ jsxs26("span", { className: "ui-drop__actions", children: [
+                status === "error" && onRetry && /* @__PURE__ */ jsx31(Button, { size: "sm", icon: "refresh", onClick: onRetry, disabled, children: retryLabel }),
+                onRemove && /* @__PURE__ */ jsx31(
                   Button,
                   {
                     variant: "ghost",
@@ -3336,21 +3377,21 @@ function FileDrop({
                 )
               ] })
             ] }),
-            (showSize || showWord) && /* @__PURE__ */ jsxs25(
+            (showSize || showWord) && /* @__PURE__ */ jsxs26(
               "div",
               {
                 className: cx7("ui-drop__facts", status === "error" && "ui-drop__error"),
                 role: status === "error" ? "alert" : void 0,
                 children: [
-                  showSize && /* @__PURE__ */ jsx30("span", { className: "ui-drop__size", children: file.size }),
-                  showWord && /* @__PURE__ */ jsxs25("span", { className: "ui-drop__state", children: [
-                    /* @__PURE__ */ jsx30(Icon, { name: MARKS[status] }),
-                    /* @__PURE__ */ jsx30("span", { className: "ui-drop__word", title: word, children: word })
+                  showSize && /* @__PURE__ */ jsx31("span", { className: "ui-drop__size", children: file.size }),
+                  showWord && /* @__PURE__ */ jsxs26("span", { className: "ui-drop__state", children: [
+                    /* @__PURE__ */ jsx31(Icon, { name: MARKS[status] }),
+                    /* @__PURE__ */ jsx31("span", { className: "ui-drop__word", title: word, children: word })
                   ] })
                 ]
               }
             ),
-            hasBar && /* @__PURE__ */ jsx30(
+            hasBar && /* @__PURE__ */ jsx31(
               "span",
               {
                 className: "ui-drop__bar",
@@ -3359,11 +3400,11 @@ function FileDrop({
                 "aria-valuenow": file.progress,
                 "aria-valuemin": 0,
                 "aria-valuemax": 100,
-                children: /* @__PURE__ */ jsx30("span", { style: { width: `${file.progress}%` } })
+                children: /* @__PURE__ */ jsx31("span", { style: { width: `${file.progress}%` } })
               }
             )
-          ] }) : /* @__PURE__ */ jsxs25(Fragment10, { children: [
-            /* @__PURE__ */ jsx30(
+          ] }) : /* @__PURE__ */ jsxs26(Fragment10, { children: [
+            /* @__PURE__ */ jsx31(
               Button,
               {
                 size: "sm",
@@ -3373,9 +3414,9 @@ function FileDrop({
                 children: label
               }
             ),
-            note && /* @__PURE__ */ jsx30("p", { className: "ui-drop__note", children: note })
+            note && /* @__PURE__ */ jsx31("p", { className: "ui-drop__note", children: note })
           ] }),
-          /* @__PURE__ */ jsx30(
+          /* @__PURE__ */ jsx31(
             "input",
             {
               ref: input,
@@ -3391,7 +3432,7 @@ function FileDrop({
             }
           )
         ] }),
-        showTarget && /* @__PURE__ */ jsx30("div", { className: "ui-drop__target", "aria-hidden": "true", children: dropLabel })
+        showTarget && /* @__PURE__ */ jsx31("div", { className: "ui-drop__target", "aria-hidden": "true", children: dropLabel })
       ]
     }
   );
@@ -3399,12 +3440,12 @@ function FileDrop({
 
 // src/SearchField.tsx
 import { forwardRef as forwardRef7 } from "react";
-import { icon as icon5 } from "@apliteni/apliteni-ui";
-import { jsx as jsx31, jsxs as jsxs26 } from "react/jsx-runtime";
+import { icon as icon6 } from "@apliteni/apliteni-ui";
+import { jsx as jsx32, jsxs as jsxs27 } from "react/jsx-runtime";
 var SearchField = forwardRef7(function SearchField2({ ariaLabel, className, ...props }, ref) {
-  return /* @__PURE__ */ jsxs26("div", { className: "ui-input-group", children: [
-    /* @__PURE__ */ jsx31("span", { className: "ui-input-group__icon", dangerouslySetInnerHTML: { __html: icon5("search") } }),
-    /* @__PURE__ */ jsx31(
+  return /* @__PURE__ */ jsxs27("div", { className: "ui-input-group", children: [
+    /* @__PURE__ */ jsx32("span", { className: "ui-input-group__icon", dangerouslySetInnerHTML: { __html: icon6("search") } }),
+    /* @__PURE__ */ jsx32(
       "input",
       {
         ref,
@@ -3418,9 +3459,9 @@ var SearchField = forwardRef7(function SearchField2({ ariaLabel, className, ...p
 });
 
 // src/Toast.tsx
-import { createContext as createContext3, useCallback as useCallback5, useContext as useContext3, useEffect as useEffect12, useLayoutEffect as useLayoutEffect4, useRef as useRef18, useState as useState12 } from "react";
+import { createContext as createContext3, useCallback as useCallback6, useContext as useContext3, useEffect as useEffect12, useLayoutEffect as useLayoutEffect4, useRef as useRef18, useState as useState13 } from "react";
 import { createPortal as createPortal4 } from "react-dom";
-import { jsx as jsx32, jsxs as jsxs27 } from "react/jsx-runtime";
+import { jsx as jsx33, jsxs as jsxs28 } from "react/jsx-runtime";
 var Context = createContext3(null);
 var glyphs = { success: "circleCheck", danger: "circleX", warn: "circleAlert", info: "info", neutral: "bolt" };
 function useToast() {
@@ -3430,14 +3471,16 @@ function useToast() {
 }
 function Notice({ notice, remove }) {
   const root = useRef18(null);
-  const [leaving2, setLeaving] = useState12(false);
+  const [leaving2, setLeaving] = useState13(false);
   const dismissed = useRef18(false);
-  const remaining = useRef18(5e3);
-  const [hovered, setHovered] = useState12(false);
-  const [focused, setFocused] = useState12(false);
+  const [hovered, setHovered] = useState13(false);
+  const [focused, setFocused] = useState13(false);
   const paused = hovered || focused;
   const tone = notice.tone ?? "success";
-  const dismiss = useCallback5(() => {
+  const timed = !notice.action && notice.timer !== false && notice.timer !== 0;
+  const duration = typeof notice.timer === "number" ? notice.timer * 1e3 : 5e3;
+  const remaining = useRef18(duration);
+  const dismiss = useCallback6(() => {
     if (dismissed.current) return;
     dismissed.current = true;
     if (typeof matchMedia === "function" && matchMedia("(prefers-reduced-motion: reduce)").matches) remove();
@@ -3458,19 +3501,19 @@ function Notice({ notice, remove }) {
     }
   }, [leaving2, remove]);
   useEffect12(() => {
-    if (leaving2 || notice.action || paused) return;
+    if (leaving2 || !timed || paused) return;
     const started = Date.now();
     const timer = setTimeout(dismiss, remaining.current);
     return () => {
       clearTimeout(timer);
       remaining.current = Math.max(0, remaining.current - (Date.now() - started));
     };
-  }, [dismiss, leaving2, notice.action, paused]);
-  return /* @__PURE__ */ jsxs27(
+  }, [dismiss, leaving2, paused, timed]);
+  return /* @__PURE__ */ jsxs28(
     "div",
     {
       ref: root,
-      className: `ui-toast ui-toast--${tone} ui-toast--soft${leaving2 ? " is-leaving" : ""}`,
+      className: `ui-toast ui-toast--${tone} ui-toast--soft${notice.compact ? " ui-toast--compact" : ""}${leaving2 ? " is-leaving" : ""}`,
       role: tone === "danger" ? "alert" : "status",
       "aria-live": tone === "danger" ? "assertive" : "polite",
       onMouseEnter: () => setHovered(true),
@@ -3480,12 +3523,12 @@ function Notice({ notice, remove }) {
         if (!event.currentTarget.contains(event.relatedTarget)) setFocused(false);
       },
       children: [
-        /* @__PURE__ */ jsx32("span", { className: "ui-toast__icon", children: /* @__PURE__ */ jsx32(Icon, { name: glyphs[tone] }) }),
-        /* @__PURE__ */ jsxs27("div", { className: "ui-toast__body", children: [
-          /* @__PURE__ */ jsx32("div", { className: "ui-toast__title", children: notice.title }),
-          notice.text && /* @__PURE__ */ jsx32("div", { className: "ui-toast__text", children: notice.text })
+        /* @__PURE__ */ jsx33("span", { className: "ui-toast__icon", children: /* @__PURE__ */ jsx33(Icon, { name: glyphs[tone] }) }),
+        /* @__PURE__ */ jsxs28("div", { className: "ui-toast__body", children: [
+          /* @__PURE__ */ jsx33("div", { className: "ui-toast__title", children: notice.title }),
+          !notice.compact && notice.text && /* @__PURE__ */ jsx33("div", { className: "ui-toast__text", children: notice.text })
         ] }),
-        notice.action && /* @__PURE__ */ jsx32(
+        notice.action && /* @__PURE__ */ jsx33(
           "button",
           {
             type: "button",
@@ -3500,13 +3543,13 @@ function Notice({ notice, remove }) {
             children: notice.action.label
           }
         ),
-        /* @__PURE__ */ jsx32("button", { type: "button", className: "ui-toast__close", "aria-label": "Dismiss", disabled: leaving2, onClick: dismiss, children: /* @__PURE__ */ jsx32(Icon, { name: "x" }) }),
-        !notice.action && /* @__PURE__ */ jsx32(
+        notice.dismissible !== false && /* @__PURE__ */ jsx33("button", { type: "button", className: "ui-toast__close", "aria-label": "Dismiss", disabled: leaving2, onClick: dismiss, children: /* @__PURE__ */ jsx33(Icon, { name: "x" }) }),
+        timed && /* @__PURE__ */ jsx33(
           "span",
           {
             className: "ui-toast__timer is-running",
             "aria-hidden": "true",
-            style: { animationPlayState: paused ? "paused" : "running" }
+            style: { animationDuration: `${duration}ms`, animationPlayState: paused ? "paused" : "running" }
           }
         )
       ]
@@ -3534,40 +3577,40 @@ function usePublishedReach(stack2, count) {
   }, [stack2, count]);
 }
 function Toast({ children }) {
-  const [entries, setEntries] = useState12([]);
+  const [entries, setEntries] = useState13([]);
   const nextId = useRef18(0);
   const stack2 = useRef18(null);
-  const push = useCallback5((notice) => {
+  const push = useCallback6((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__ */ jsxs27(Context.Provider, { value: push, children: [
+  return /* @__PURE__ */ jsxs28(Context.Provider, { value: push, children: [
     children,
     typeof document !== "undefined" && createPortal4(
-      /* @__PURE__ */ jsx32("div", { className: "ui-toast-stack rx-toast-stack", ref: stack2, children: entries.map((entry) => /* @__PURE__ */ jsx32(Notice, { notice: entry.notice, remove: entry.remove }, entry.id)) }),
+      /* @__PURE__ */ jsx33("div", { className: "ui-toast-stack rx-toast-stack", ref: stack2, children: entries.map((entry) => /* @__PURE__ */ jsx33(Notice, { notice: entry.notice, remove: entry.remove }, entry.id)) }),
       document.body
     )
   ] });
 }
 
 // src/AppShell.tsx
-import { useEffect as useEffect14, useId as useId12, useRef as useRef19, useState as useState14 } from "react";
+import { useEffect as useEffect14, useId as useId12, useRef as useRef19, useState as useState15 } from "react";
 import { paletteHotkey, prism, railCollapsed } from "@apliteni/apliteni-ui";
 
 // src/SidebarNav.tsx
-import { forwardRef as forwardRef8, useEffect as useEffect13, useId as useId11, useState as useState13 } from "react";
+import { forwardRef as forwardRef8, useEffect as useEffect13, useId as useId11, useState as useState14 } from "react";
 import { ENTRANCE_FALLBACK_MS } from "@apliteni/apliteni-ui/motion";
-import { Fragment as Fragment11, jsx as jsx33, jsxs as jsxs28 } from "react/jsx-runtime";
+import { Fragment as Fragment11, jsx as jsx34, jsxs as jsxs29 } from "react/jsx-runtime";
 var badgeText = (badge) => typeof badge === "object" ? badge.text : badge;
 function Row({ item, active, activeIs, collapsed, renderLink, sub }) {
   const uid = useId11();
   const group = !sub && !!item.items?.length;
   const childActive = group && item.items.some((child) => child.id === active);
-  const [expanded, setExpanded] = useState13();
+  const [expanded, setExpanded] = useState14();
   const open = expanded ?? item.defaultOpen ?? childActive;
-  const [entering, setEntering] = useState13(false);
+  const [entering, setEntering] = useState14(false);
   useEffect13(() => {
     if (!entering) return;
     const timer = setTimeout(() => setEntering(false), ENTRANCE_FALLBACK_MS);
@@ -3585,15 +3628,15 @@ function Row({ item, active, activeIs, collapsed, renderLink, sub }) {
     item.disabled && "is-disabled",
     item.danger && "is-danger"
   ].filter(Boolean).join(" ");
-  const children = /* @__PURE__ */ jsxs28(Fragment11, { children: [
-    (item.leading ?? item.icon) && /* @__PURE__ */ jsx33("span", { className: "ui-nav__ic", children: item.leading ?? /* @__PURE__ */ jsx33(Icon, { name: item.icon }) }),
-    /* @__PURE__ */ jsx33("span", { className: "ui-nav__label", children: item.label }),
-    count != null && count !== "" && /* @__PURE__ */ jsx33("span", { className: `ui-nav__badge is-${typeof item.badge === "object" ? item.badge.tone ?? "neutral" : "neutral"}`, children: count }),
-    group && /* @__PURE__ */ jsx33("span", { className: "ui-nav__caret", "aria-hidden": "true" })
+  const children = /* @__PURE__ */ jsxs29(Fragment11, { children: [
+    (item.leading ?? item.icon) && /* @__PURE__ */ jsx34("span", { className: "ui-nav__ic", children: item.leading ?? /* @__PURE__ */ jsx34(Icon, { name: item.icon }) }),
+    /* @__PURE__ */ jsx34("span", { className: "ui-nav__label", children: item.label }),
+    count != null && count !== "" && /* @__PURE__ */ jsx34("span", { className: `ui-nav__badge is-${typeof item.badge === "object" ? item.badge.tone ?? "neutral" : "neutral"}`, children: count }),
+    group && /* @__PURE__ */ jsx34("span", { className: "ui-nav__caret", "aria-hidden": "true" })
   ] });
   const common = { className, "aria-label": name, title: collapsed ? name : void 0, children };
-  if (group) return /* @__PURE__ */ jsxs28("li", { className: `ui-nav__group${open ? " is-open" : ""}`, children: [
-    /* @__PURE__ */ jsx33(
+  if (group) return /* @__PURE__ */ jsxs29("li", { className: `ui-nav__group${open ? " is-open" : ""}`, children: [
+    /* @__PURE__ */ jsx34(
       "button",
       {
         ...common,
@@ -3607,22 +3650,22 @@ function Row({ item, active, activeIs, collapsed, renderLink, sub }) {
         }
       }
     ),
-    /* @__PURE__ */ jsx33("ul", { id: uid, className: `ui-nav__sub${entering ? " is-entering" : ""}`, hidden: !open, onAnimationEnd: () => setEntering(false), children: item.items.map((child) => /* @__PURE__ */ jsx33(Row, { item: child, active, activeIs, collapsed, renderLink, sub: true }, child.id)) })
+    /* @__PURE__ */ jsx34("ul", { id: uid, className: `ui-nav__sub${entering ? " is-entering" : ""}`, hidden: !open, onAnimationEnd: () => setEntering(false), children: item.items.map((child) => /* @__PURE__ */ jsx34(Row, { item: child, active, activeIs, collapsed, renderLink, sub: true }, child.id)) })
   ] });
-  if (item.disabled) return /* @__PURE__ */ jsx33("li", { children: /* @__PURE__ */ jsx33("span", { ...common, role: "link", "aria-disabled": "true" }) });
+  if (item.disabled) return /* @__PURE__ */ jsx34("li", { children: /* @__PURE__ */ jsx34("span", { ...common, role: "link", "aria-disabled": "true" }) });
   const props = {
     ...common,
     href: item.href ?? `#${item.id}`,
     target: item.target,
     "aria-current": isActive ? activeIs === "section" ? "true" : "page" : void 0
   };
-  return /* @__PURE__ */ jsx33("li", { children: renderLink ? renderLink(item, props) : /* @__PURE__ */ jsx33("a", { ...props }) });
+  return /* @__PURE__ */ jsx34("li", { children: renderLink ? renderLink(item, props) : /* @__PURE__ */ jsx34("a", { ...props }) });
 }
 function Section({ section, ...props }) {
   const uid = useId11();
-  return /* @__PURE__ */ jsxs28("div", { className: "ui-nav__section", children: [
-    section.label && /* @__PURE__ */ jsx33("div", { className: "ui-nav__cap", id: uid, "aria-hidden": props.collapsed || void 0, children: section.label }),
-    /* @__PURE__ */ jsx33("ul", { className: "ui-nav__list", "aria-labelledby": section.label ? uid : void 0, children: section.items.map((item) => /* @__PURE__ */ jsx33(Row, { item, ...props }, item.id)) })
+  return /* @__PURE__ */ jsxs29("div", { className: "ui-nav__section", children: [
+    section.label && /* @__PURE__ */ jsx34("div", { className: "ui-nav__cap", id: uid, "aria-hidden": props.collapsed || void 0, children: section.label }),
+    /* @__PURE__ */ jsx34("ul", { className: "ui-nav__list", "aria-labelledby": section.label ? uid : void 0, children: section.items.map((item) => /* @__PURE__ */ jsx34(Row, { item, ...props }, item.id)) })
   ] });
 }
 var SidebarNav = forwardRef8(function SidebarNav2({
@@ -3637,8 +3680,8 @@ var SidebarNav = forwardRef8(function SidebarNav2({
   "aria-label": label = "Sidebar",
   ...rest
 }, ref) {
-  return /* @__PURE__ */ jsxs28("nav", { ...rest, ref, "aria-label": label, className: ["ui-nav", "ui-nav--side", collapsed && "is-collapsed", className].filter(Boolean).join(" "), children: [
-    (sections?.length ? sections : [{ items }]).map((section, index) => /* @__PURE__ */ jsx33(
+  return /* @__PURE__ */ jsxs29("nav", { ...rest, ref, "aria-label": label, className: ["ui-nav", "ui-nav--side", collapsed && "is-collapsed", className].filter(Boolean).join(" "), children: [
+    (sections?.length ? sections : [{ items }]).map((section, index) => /* @__PURE__ */ jsx34(
       Section,
       {
         section,
@@ -3649,14 +3692,14 @@ var SidebarNav = forwardRef8(function SidebarNav2({
       },
       index
     )),
-    footer && /* @__PURE__ */ jsx33("div", { className: "ui-nav__foot", children: footer })
+    footer && /* @__PURE__ */ jsx34("div", { className: "ui-nav__foot", children: footer })
   ] });
 });
 
 // src/ThemeToggle.tsx
 import { useSyncExternalStore } from "react";
 import { themeIcon } from "@apliteni/apliteni-ui";
-import { jsx as jsx34, jsxs as jsxs29 } from "react/jsx-runtime";
+import { jsx as jsx35, jsxs as jsxs30 } 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')})()`;
@@ -3714,10 +3757,10 @@ function ThemeToggle({ labelled = false }) {
     }
     window.dispatchEvent(new Event(CHOICE_EVENT));
   };
-  const button = /* @__PURE__ */ jsx34("button", { type: "button", className: "toggle", "aria-label": name, title: name, onClick: toggle, children: /* @__PURE__ */ jsx34("span", { className: "ic", "aria-hidden": "true", dangerouslySetInnerHTML: { __html: themeIcon(theme) } }) });
-  return labelled ? /* @__PURE__ */ jsxs29("span", { className: "ui-theme-toggle", children: [
+  const button = /* @__PURE__ */ jsx35("button", { type: "button", className: "toggle", "aria-label": name, title: name, onClick: toggle, children: /* @__PURE__ */ jsx35("span", { className: "ic", "aria-hidden": "true", dangerouslySetInnerHTML: { __html: themeIcon(theme) } }) });
+  return labelled ? /* @__PURE__ */ jsxs30("span", { className: "ui-theme-toggle", children: [
     button,
-    /* @__PURE__ */ jsxs29("span", { children: [
+    /* @__PURE__ */ jsxs30("span", { children: [
       label,
       " theme"
     ] })
@@ -3725,7 +3768,7 @@ function ThemeToggle({ labelled = false }) {
 }
 
 // src/AppShell.tsx
-import { Fragment as Fragment12, jsx as jsx35, jsxs as jsxs30 } from "react/jsx-runtime";
+import { Fragment as Fragment12, jsx as jsx36, jsxs as jsxs31 } from "react/jsx-runtime";
 var path = (value) => value.split(/[?#]/)[0].replace(/\/+$/, "") || "/";
 function AppShell({
   sections,
@@ -3749,9 +3792,9 @@ function AppShell({
   renderLink
 }) {
   const uid = useId12();
-  const [collapsed, setCollapsed] = useState14(defaultCollapsed);
-  const [search, setSearch] = useState14(false);
-  const [menu, setMenu] = useState14(false);
+  const [collapsed, setCollapsed] = useState15(defaultCollapsed);
+  const [search, setSearch] = useState15(false);
+  const [menu, setMenu] = useState15(false);
   const menuButton = useRef19(null);
   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];
@@ -3790,7 +3833,7 @@ function AppShell({
     } catch {
     }
   };
-  const sidebar = (label) => /* @__PURE__ */ jsx35(
+  const sidebar = (label) => /* @__PURE__ */ jsx36(
     SidebarNav,
     {
       "aria-label": label,
@@ -3802,34 +3845,33 @@ function AppShell({
         const linkProps = { ...props, onClick: (event) => {
           if (!event.metaKey && !event.ctrlKey && !event.shiftKey && !event.altKey) setMenu(false);
         } };
-        return renderLink ? renderLink(section, linkProps) : /* @__PURE__ */ jsx35("a", { ...linkProps });
+        return renderLink ? renderLink(section, linkProps) : /* @__PURE__ */ jsx36("a", { ...linkProps });
       }
     }
   );
   const foldLabel = collapsed ? "Expand sidebar" : "Collapse sidebar";
   const navigable = sections.length > 1 || Boolean(back);
-  const initials = account.name.trim().split(/\s+/).map((part) => part[0]).slice(0, 2).join("");
-  const lockup = /* @__PURE__ */ jsxs30("a", { className: "ui-app__brand", href: brandHref, "aria-label": word, children: [
-    brand ?? /* @__PURE__ */ jsx35("i", { "aria-hidden": "true", className: "ui-react-app__mark", dangerouslySetInnerHTML: { __html: prism(uid, 24) } }),
-    /* @__PURE__ */ jsx35("span", { children: word })
+  const lockup = /* @__PURE__ */ jsxs31("a", { className: "ui-app__brand", href: brandHref, "aria-label": word, children: [
+    brand ?? /* @__PURE__ */ jsx36("i", { "aria-hidden": "true", className: "ui-react-app__mark", dangerouslySetInnerHTML: { __html: prism(uid, 24) } }),
+    /* @__PURE__ */ jsx36("span", { children: word })
   ] });
-  return /* @__PURE__ */ jsxs30("div", { className: `ui-app ui-app--topbar ui-react-app${collapsed ? " is-collapsed" : ""}`, children: [
-    navigable && /* @__PURE__ */ jsxs30("div", { className: "ui-app__rail", role: "region", "aria-label": "Sidebar", children: [
-      /* @__PURE__ */ jsx35("div", { className: "ui-app__head", children: lockup }),
+  return /* @__PURE__ */ jsxs31("div", { className: `ui-app ui-app--topbar ui-react-app${collapsed ? " is-collapsed" : ""}`, children: [
+    navigable && /* @__PURE__ */ jsxs31("div", { className: "ui-app__rail", role: "region", "aria-label": "Sidebar", children: [
+      /* @__PURE__ */ jsx36("div", { className: "ui-app__head", children: lockup }),
       sidebar("Sections"),
-      /* @__PURE__ */ jsx35("div", { className: "ui-app__foot", children: /* @__PURE__ */ jsx35("div", { className: "ui-app__fold-row", children: /* @__PURE__ */ jsxs30("button", { type: "button", className: "ui-nav__item ui-app__fold", "aria-expanded": !collapsed, "aria-label": foldLabel, onClick: fold, children: [
-        /* @__PURE__ */ jsx35("span", { className: "ui-nav__ic", children: /* @__PURE__ */ jsxs30("svg", { className: "ui-icon", viewBox: "0 0 24 24", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [
-          /* @__PURE__ */ jsx35("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2" }),
-          /* @__PURE__ */ jsx35("path", { className: "ui-app__fold-seam", d: "M9 3v18" }),
-          /* @__PURE__ */ jsx35("path", { className: "ui-app__fold-arrow", d: "m16 15-3-3 3-3" })
+      /* @__PURE__ */ jsx36("div", { className: "ui-app__foot", children: /* @__PURE__ */ jsx36("div", { className: "ui-app__fold-row", children: /* @__PURE__ */ jsxs31("button", { type: "button", className: "ui-nav__item ui-app__fold", "aria-expanded": !collapsed, "aria-label": foldLabel, onClick: fold, children: [
+        /* @__PURE__ */ jsx36("span", { className: "ui-nav__ic", children: /* @__PURE__ */ jsxs31("svg", { className: "ui-icon", viewBox: "0 0 24 24", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [
+          /* @__PURE__ */ jsx36("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2" }),
+          /* @__PURE__ */ jsx36("path", { className: "ui-app__fold-seam", d: "M9 3v18" }),
+          /* @__PURE__ */ jsx36("path", { className: "ui-app__fold-arrow", d: "m16 15-3-3 3-3" })
         ] }) }),
-        /* @__PURE__ */ jsx35("span", { className: "ui-nav__label", children: foldLabel })
+        /* @__PURE__ */ jsx36("span", { className: "ui-nav__label", children: foldLabel })
       ] }) }) })
     ] }),
-    /* @__PURE__ */ jsxs30("div", { className: "ui-app__well", children: [
-      /* @__PURE__ */ jsxs30("header", { className: "ui-app__bar", children: [
-        navigable && /* @__PURE__ */ jsxs30(Fragment12, { children: [
-          /* @__PURE__ */ jsx35(
+    /* @__PURE__ */ jsxs31("div", { className: "ui-app__well", children: [
+      /* @__PURE__ */ jsxs31("header", { className: "ui-app__bar", children: [
+        navigable && /* @__PURE__ */ jsxs31(Fragment12, { children: [
+          /* @__PURE__ */ jsx36(
             Button,
             {
               ref: menuButton,
@@ -3843,19 +3885,19 @@ function AppShell({
               onClick: () => setMenu(true)
             }
           ),
-          /* @__PURE__ */ jsx35("a", { className: "ui-app__brand ui-app__brand--band", href: brandHref, "aria-label": word, children: brand ?? /* @__PURE__ */ jsx35("i", { "aria-hidden": "true", className: "ui-react-app__mark", dangerouslySetInnerHTML: { __html: prism(`${uid}-band`, 24) } }) })
+          /* @__PURE__ */ jsx36("a", { className: "ui-app__brand ui-app__brand--band", href: brandHref, "aria-label": word, children: brand ?? /* @__PURE__ */ jsx36("i", { "aria-hidden": "true", className: "ui-react-app__mark", dangerouslySetInnerHTML: { __html: prism(`${uid}-band`, 24) } }) })
         ] }),
         !navigable && lockup,
-        /* @__PURE__ */ jsxs30("button", { type: "button", className: "ui-app__search", "aria-haspopup": "dialog", onClick: () => setSearch(true), children: [
-          /* @__PURE__ */ jsx35("span", { className: "ui-app__search-ic", children: /* @__PURE__ */ jsx35(Icon, { name: "search" }) }),
-          /* @__PURE__ */ jsx35("span", { className: "ui-app__search-txt", children: searchLabel }),
-          /* @__PURE__ */ jsx35("span", { className: "ui-app__search-short", "aria-hidden": "true", children: searchShortLabel }),
-          /* @__PURE__ */ jsx35("kbd", { className: "ui-cmdk__key", children: paletteHotkey() })
+        /* @__PURE__ */ jsxs31("button", { type: "button", className: "ui-app__search", "aria-haspopup": "dialog", onClick: () => setSearch(true), children: [
+          /* @__PURE__ */ jsx36("span", { className: "ui-app__search-ic", children: /* @__PURE__ */ jsx36(Icon, { name: "search" }) }),
+          /* @__PURE__ */ jsx36("span", { className: "ui-app__search-txt", children: searchLabel }),
+          /* @__PURE__ */ jsx36("span", { className: "ui-app__search-short", "aria-hidden": "true", children: searchShortLabel }),
+          /* @__PURE__ */ jsx36("kbd", { className: "ui-cmdk__key", children: paletteHotkey() })
         ] }),
-        /* @__PURE__ */ jsx35("span", { className: "ui-app__bar-gap" }),
-        bandControl && /* @__PURE__ */ jsx35("span", { className: "ui-react-app__band-control", children: bandControl }),
-        /* @__PURE__ */ jsx35(ThemeToggle, {}),
-        /* @__PURE__ */ jsx35("div", { className: "ui-app__user ui-app__user--bar", children: /* @__PURE__ */ jsx35(
+        /* @__PURE__ */ jsx36("span", { className: "ui-app__bar-gap" }),
+        bandControl && /* @__PURE__ */ jsx36("span", { className: "ui-react-app__band-control", children: bandControl }),
+        /* @__PURE__ */ jsx36(ThemeToggle, {}),
+        /* @__PURE__ */ jsx36("div", { className: "ui-app__user ui-app__user--bar", children: /* @__PURE__ */ jsx36(
           Dropdown,
           {
             variant: "menu",
@@ -3864,57 +3906,57 @@ function AppShell({
             ariaLabel: `Signed in as ${account.name}, ${account.email}`,
             triggerClass: "ui-app__user-trigger",
             panelClass: "ui-app__user-panel",
-            triggerContent: /* @__PURE__ */ jsx35("span", { className: "ui-app__av", "aria-hidden": "true", children: initials }),
-            header: /* @__PURE__ */ jsxs30("div", { className: "ui-dropdown__head", children: [
-              /* @__PURE__ */ jsx35("b", { children: account.name }),
-              /* @__PURE__ */ jsx35("span", { children: account.email })
+            triggerContent: /* @__PURE__ */ jsx36("span", { className: "ui-app__av", "aria-hidden": "true", children: /* @__PURE__ */ jsx36(Avatar, { personKey: account.email || account.name, name: account.name, size: 32 }) }),
+            header: /* @__PURE__ */ jsxs31("div", { className: "ui-dropdown__head", children: [
+              /* @__PURE__ */ jsx36("b", { children: account.name }),
+              /* @__PURE__ */ jsx36("span", { children: account.email })
             ] }),
             items: [{ label: "Sign out", icon: "logout", danger: true }],
             onSelect: onSignOut
           }
         ) })
       ] }),
-      /* @__PURE__ */ jsxs30("main", { className: `ui-app__main${width === "wide" ? " ui-app__main--wide" : ""}`, children: [
-        back && /* @__PURE__ */ jsx35(BackLink, { ...back }),
-        /* @__PURE__ */ jsx35("h1", { children: title }),
-        lede && /* @__PURE__ */ jsx35("p", { className: "ui-app__sub", children: lede }),
-        actions && /* @__PURE__ */ jsx35("div", { className: "ui-react-app__actions", children: actions }),
-        /* @__PURE__ */ jsx35("div", { className: "ui-app__body", children })
+      /* @__PURE__ */ jsxs31("main", { className: `ui-app__main${width === "wide" ? " ui-app__main--wide" : ""}`, children: [
+        back && /* @__PURE__ */ jsx36(BackLink, { ...back }),
+        /* @__PURE__ */ jsx36("h1", { children: title }),
+        lede && /* @__PURE__ */ jsx36("p", { className: "ui-app__sub", children: lede }),
+        actions && /* @__PURE__ */ jsx36("div", { className: "ui-react-app__actions", children: actions }),
+        /* @__PURE__ */ jsx36("div", { className: "ui-app__body", children })
       ] })
     ] }),
-    navigable && /* @__PURE__ */ jsx35(Drawer, { open: menu, onClose: () => setMenu(false), title: word, side: "left", size: "sm", children: /* @__PURE__ */ jsx35("div", { className: "ui-react-app__menu", children: sidebar("Menu sections") }) }),
-    /* @__PURE__ */ jsx35(CommandPalette, { ...palette ?? { groups: [{ items: sections.map((section) => ({ id: section.href, ...section })) }] }, open: search, onClose: () => setSearch(false) })
+    navigable && /* @__PURE__ */ jsx36(Drawer, { open: menu, onClose: () => setMenu(false), title: word, side: "left", size: "sm", children: /* @__PURE__ */ jsx36("div", { className: "ui-react-app__menu", children: sidebar("Menu sections") }) }),
+    /* @__PURE__ */ jsx36(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 jsx36, jsxs as jsxs31 } from "react/jsx-runtime";
+import { jsx as jsx37, jsxs as jsxs32 } 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" },
   "not-found": { title: "We can't find that page", sub: "Check the address or return to the home page.", icon: "folder" },
   "not-yet-built": { title: "This ships later", sub: "This screen is not available yet. Check back later.", icon: "clock" }
 };
-function EmptyState({ variant = "first-run", title, sub, icon: icon7, art, actions }) {
+function EmptyState({ variant = "first-run", title, sub, icon: icon8, art, actions }) {
   const preset = cases[variant];
   const heading = title ?? preset.title;
   const guidance = sub ?? preset.sub;
-  const glyph = icon7 ?? preset.icon;
-  return /* @__PURE__ */ jsxs31("div", { className: "ui-empty", children: [
-    art ? typeof art === "string" ? /* @__PURE__ */ jsx36("div", { className: "ui-empty__art", dangerouslySetInnerHTML: { __html: /<svg/.test(art) ? art : illo(art) } }) : /* @__PURE__ */ jsx36("div", { className: "ui-empty__art", "aria-hidden": "true", children: art }) : glyph ? /* @__PURE__ */ jsx36("div", { className: "ui-empty__icon", dangerouslySetInnerHTML: { __html: kitIcon2(glyph) } }) : null,
-    heading && /* @__PURE__ */ jsx36("div", { className: "ui-empty__title", children: heading }),
-    guidance && /* @__PURE__ */ jsx36("div", { className: "ui-empty__sub", children: guidance }),
-    actions && /* @__PURE__ */ jsx36("div", { className: "ui-empty__actions", children: actions })
+  const glyph = icon8 ?? preset.icon;
+  return /* @__PURE__ */ jsxs32("div", { className: "ui-empty", children: [
+    art ? typeof art === "string" ? /* @__PURE__ */ jsx37("div", { className: "ui-empty__art", dangerouslySetInnerHTML: { __html: /<svg/.test(art) ? art : illo(art) } }) : /* @__PURE__ */ jsx37("div", { className: "ui-empty__art", "aria-hidden": "true", children: art }) : glyph ? /* @__PURE__ */ jsx37("div", { className: "ui-empty__icon", dangerouslySetInnerHTML: { __html: kitIcon2(glyph) } }) : null,
+    heading && /* @__PURE__ */ jsx37("div", { className: "ui-empty__title", children: heading }),
+    guidance && /* @__PURE__ */ jsx37("div", { className: "ui-empty__sub", children: guidance }),
+    actions && /* @__PURE__ */ jsx37("div", { className: "ui-empty__actions", children: actions })
   ] });
 }
 
 // src/Success.tsx
-import { forwardRef as forwardRef9, useEffect as useEffect15, useRef as useRef20, useState as useState15 } from "react";
-import { jsx as jsx37, jsxs as jsxs32 } from "react/jsx-runtime";
+import { forwardRef as forwardRef9, useEffect as useEffect15, useRef as useRef20, useState as useState16 } from "react";
+import { jsx as jsx38, jsxs as jsxs33 } from "react/jsx-runtime";
 var SuccessCheck = forwardRef9(function SuccessCheck2({ variant = "line", className, ...rest }, ref) {
   const circled = variant === "circled";
-  return /* @__PURE__ */ jsxs32(
+  return /* @__PURE__ */ jsxs33(
     "svg",
     {
       ...rest,
@@ -3926,18 +3968,18 @@ var SuccessCheck = forwardRef9(function SuccessCheck2({ variant = "line", classN
       "aria-hidden": "true",
       focusable: "false",
       children: [
-        circled && /* @__PURE__ */ jsx37("path", { className: "ui-sx__circle", d: "M22 11.08V12a10 10 0 1 1-5.93-9.14" }),
-        /* @__PURE__ */ jsx37("path", { className: "ui-sx__tick", d: circled ? "M22 4L12 14.01l-3-3" : "M20 6L9 17l-5-5" })
+        circled && /* @__PURE__ */ jsx38("path", { className: "ui-sx__circle", d: "M22 11.08V12a10 10 0 1 1-5.93-9.14" }),
+        /* @__PURE__ */ jsx38("path", { className: "ui-sx__tick", d: circled ? "M22 4L12 14.01l-3-3" : "M20 6L9 17l-5-5" })
       ]
     }
   );
 });
 var SuccessPanel = forwardRef9(function SuccessPanel2({ title = "Done", sub, check = "line", className, ...rest }, ref) {
   const circled = check === "circled";
-  return /* @__PURE__ */ jsxs32("div", { ...rest, ref, className: ["ui-success", className].filter(Boolean).join(" "), children: [
-    /* @__PURE__ */ jsx37("div", { className: ["ui-success__check", circled && "ui-success__check--circled"].filter(Boolean).join(" "), children: /* @__PURE__ */ jsx37(SuccessCheck, { variant: circled ? "circled" : "line" }) }),
-    /* @__PURE__ */ jsx37("div", { className: "ui-success__title", children: title }),
-    sub && /* @__PURE__ */ jsx37("div", { className: "ui-success__sub", children: sub })
+  return /* @__PURE__ */ jsxs33("div", { ...rest, ref, className: ["ui-success", className].filter(Boolean).join(" "), children: [
+    /* @__PURE__ */ jsx38("div", { className: ["ui-success__check", circled && "ui-success__check--circled"].filter(Boolean).join(" "), children: /* @__PURE__ */ jsx38(SuccessCheck, { variant: circled ? "circled" : "line" }) }),
+    /* @__PURE__ */ jsx38("div", { className: "ui-success__title", children: title }),
+    sub && /* @__PURE__ */ jsx38("div", { className: "ui-success__sub", children: sub })
   ] });
 });
 var pieces = [
@@ -3957,7 +3999,7 @@ var pieces = [
   [80, 0.36, -20, "c", 1.05]
 ];
 function Countdown({ seconds, label = "Redirecting", onDone }) {
-  const [remaining, setRemaining] = useState15(seconds);
+  const [remaining, setRemaining] = useState16(seconds);
   const callback = useRef20(onDone);
   useEffect15(() => {
     callback.current = onDone;
@@ -3974,12 +4016,12 @@ function Countdown({ seconds, label = "Redirecting", onDone }) {
     }, 1e3);
     return () => clearInterval(timer);
   }, [seconds]);
-  return /* @__PURE__ */ jsxs32("div", { className: "ui-sx__count", "data-sx-count": "", style: { "--sx-secs": `${seconds}s` }, children: [
-    /* @__PURE__ */ jsx37("span", { className: "ui-sx__count-ring", "aria-hidden": "true" }),
-    /* @__PURE__ */ jsxs32("span", { className: "ui-sx__count-text", children: [
+  return /* @__PURE__ */ jsxs33("div", { className: "ui-sx__count", "data-sx-count": "", style: { "--sx-secs": `${seconds}s` }, children: [
+    /* @__PURE__ */ jsx38("span", { className: "ui-sx__count-ring", "aria-hidden": "true" }),
+    /* @__PURE__ */ jsxs33("span", { className: "ui-sx__count-text", children: [
       label,
       " in ",
-      /* @__PURE__ */ jsx37("b", { "data-sx-num": "", children: remaining }),
+      /* @__PURE__ */ jsx38("b", { "data-sx-num": "", children: remaining }),
       "s"
     ] })
   ] });
@@ -4006,7 +4048,7 @@ var Success = forwardRef9(function Success2({
   const seconds = countdown?.seconds;
   const duration = seconds != null && Number.isFinite(seconds) && seconds >= 1 ? Math.floor(seconds) : 5;
   const mark = check === "circled" ? "circled" : "line";
-  return /* @__PURE__ */ jsxs32(
+  return /* @__PURE__ */ jsxs33(
     "div",
     {
       role: "status",
@@ -4015,16 +4057,16 @@ var Success = forwardRef9(function Success2({
       ref,
       className: ["ui-sx", `ui-sx--${layout}`, `ui-sx--check-${mark}`, confetti && "ui-sx--confetti", className].filter(Boolean).join(" "),
       children: [
-        confetti && /* @__PURE__ */ jsx37("div", { className: "ui-sx__confetti", "aria-hidden": "true", children: pieces.map(
-          ([x, d, r, t, s], index) => /* @__PURE__ */ jsx37("i", { className: `ui-sx__piece ui-sx__piece--${t}`, style: { left: `${x}%`, "--sx-d": `${d}s`, "--sx-r": `${r}deg`, "--sx-s": s } }, index)
+        confetti && /* @__PURE__ */ jsx38("div", { className: "ui-sx__confetti", "aria-hidden": "true", children: pieces.map(
+          ([x, d, r, t, s], index) => /* @__PURE__ */ jsx38("i", { className: `ui-sx__piece ui-sx__piece--${t}`, style: { left: `${x}%`, "--sx-d": `${d}s`, "--sx-r": `${r}deg`, "--sx-s": s } }, index)
         ) }),
-        /* @__PURE__ */ jsxs32("div", { className: "ui-sx__inner", children: [
-          /* @__PURE__ */ jsx37("div", { className: "ui-sx__visual", children: /* @__PURE__ */ jsx37(SuccessCheck, { variant: mark }) }),
-          /* @__PURE__ */ jsxs32("div", { className: "ui-sx__content", children: [
-            /* @__PURE__ */ jsx37(Heading, { className: "ui-sx__title", children: title }),
-            body && /* @__PURE__ */ jsx37("p", { className: "ui-sx__body", children: body }),
-            hasActions && /* @__PURE__ */ jsx37("div", { className: "ui-sx__actions", children: actions }),
-            countdown && /* @__PURE__ */ jsx37(Countdown, { seconds: duration, label: countdown.label, onDone: onCountdownEnd }, duration)
+        /* @__PURE__ */ jsxs33("div", { className: "ui-sx__inner", children: [
+          /* @__PURE__ */ jsx38("div", { className: "ui-sx__visual", children: /* @__PURE__ */ jsx38(SuccessCheck, { variant: mark }) }),
+          /* @__PURE__ */ jsxs33("div", { className: "ui-sx__content", children: [
+            /* @__PURE__ */ jsx38(Heading, { className: "ui-sx__title", children: title }),
+            body && /* @__PURE__ */ jsx38("p", { className: "ui-sx__body", children: body }),
+            hasActions && /* @__PURE__ */ jsx38("div", { className: "ui-sx__actions", children: actions }),
+            countdown && /* @__PURE__ */ jsx38(Countdown, { seconds: duration, label: countdown.label, onDone: onCountdownEnd }, duration)
           ] })
         ] })
       ]
@@ -4034,16 +4076,16 @@ var Success = forwardRef9(function Success2({
 
 // src/Chart.tsx
 import {
-  useCallback as useCallback6,
+  useCallback as useCallback7,
   useEffect as useEffect16,
   useId as useId13,
   useLayoutEffect as useLayoutEffect5,
   useMemo as useMemo4,
   useRef as useRef21,
-  useState as useState16
+  useState as useState17
 } from "react";
 import { CHART_FLOOR, bridgeWalk, chartScale, pointTarget } from "@apliteni/apliteni-ui";
-import { Fragment as Fragment13, jsx as jsx38, jsxs as jsxs33 } from "react/jsx-runtime";
+import { Fragment as Fragment13, jsx as jsx39, jsxs as jsxs34 } from "react/jsx-runtime";
 var HEIGHT = { months: 216, bridge: 216, spark: 32 };
 var PAD = 2;
 var ZERO_INSET = 1.5;
@@ -4081,7 +4123,7 @@ function barPath(m) {
   return `M${px(x)} ${px(roundBottom ? bottom - r : bottom)}V${px(roundTop ? top + r : top)}` + (roundTop ? `${arc(r, -r, 1)}h${px(w - r * 2)}${arc(r, r, 1)}` : `h${px(w)}`) + `V${px(roundBottom ? bottom - r : bottom)}` + (roundBottom ? `${arc(-r, r, 1)}h${px(-(w - r * 2))}${arc(-r, -r, 1)}` : `h${px(-w)}`) + "z";
 }
 function useTapFloor() {
-  const [floor, setFloor] = useState16(TARGET);
+  const [floor, setFloor] = useState17(TARGET);
   useEffect16(() => {
     const query = typeof window === "undefined" ? null : window.matchMedia?.(`(max-width: ${PHONE_MAX2}px) and (pointer: coarse)`);
     if (!query) return;
@@ -4216,11 +4258,11 @@ function Chart(props) {
   const opening = useRef21(false);
   const pointerFocus = useRef21(false);
   const floor = useTapFloor();
-  const [width, setWidth] = useState16(0);
-  const [openId, setOpenId] = useState16(null);
-  const [rawCursor, setCursor] = useState16(0);
-  const [said, setSaid] = useState16("");
-  const [ownPick, setOwnPick] = useState16(null);
+  const [width, setWidth] = useState17(0);
+  const [openId, setOpenId] = useState17(null);
+  const [rawCursor, setCursor] = useState17(0);
+  const [said, setSaid] = useState17("");
+  const [ownPick, setOwnPick] = useState17(null);
   const pick = selected === void 0 ? ownPick : selected;
   const steps = props.variant === "bridge" ? props.steps : void 0;
   const bridgeTones = props.variant === "bridge" ? props.tones : void 0;
@@ -4235,7 +4277,7 @@ function Chart(props) {
   const boxHeight = Math.max(plotHeight, floor);
   const boxTop = -(boxHeight - plotHeight) / 2;
   const span = scale.max - scale.min || 1;
-  const y = useCallback6(
+  const y = useCallback7(
     (value) => PAD + (scale.max - value) / span * (plotHeight - PAD * 2),
     [scale.max, span, plotHeight]
   );
@@ -4248,7 +4290,7 @@ function Chart(props) {
     cap * lanes + LANE_GAP * (lanes - 1)
   ));
   const barWidth = (groupWidth - LANE_GAP * (lanes - 1)) / lanes;
-  const centre = useCallback6((column) => column * colWidth + colWidth / 2, [colWidth]);
+  const centre = useCallback7((column) => column * colWidth + colWidth / 2, [colWidth]);
   const marks = useMemo4(() => {
     const out = frame.bars.map((bar) => {
       let top = Math.min(y(bar.from), y(bar.to));
@@ -4322,7 +4364,7 @@ function Chart(props) {
     return [...out, ...dots];
   }, [frame, lines, keys, columns, centre, barWidth, groupWidth, y, floor, colWidth, plotWidth, boxTop, boxHeight]);
   const byId = useMemo4(() => new Map(marks.map((m) => [m.id, m])), [marks]);
-  const lead = useCallback6((column) => marks.find((m) => m.column === column), [marks]);
+  const lead = useCallback7((column) => marks.find((m) => m.column === column), [marks]);
   const open = openId ? byId.get(openId) : void 0;
   useEffect16(() => {
     const el = plot.current;
@@ -4334,7 +4376,7 @@ function Chart(props) {
     observer.observe(el);
     return () => observer.disconnect();
   }, []);
-  const syncEdges = useCallback6(() => {
+  const syncEdges = useCallback7(() => {
     const el = scroller.current;
     if (!el) return;
     const last = el.scrollWidth - el.clientWidth;
@@ -4375,7 +4417,7 @@ function Chart(props) {
     setOpenId(id);
   };
   const markAt = (target) => target.closest?.("[data-mark]")?.getAttribute("data-mark") ?? null;
-  const announce = useCallback6((column, picked = pick) => {
+  const announce = useCallback7((column, picked = pick) => {
     const where = columns[column];
     if (!where) return;
     const values = marks.filter((m) => m.column === column).map((m) => `${m.name} ${format(m.value)}`).join(". ") || "No value";
@@ -4419,7 +4461,7 @@ function Chart(props) {
   const estimated = columns.filter((c) => c.estimated);
   const estimatedTone = marks.find((m) => m.estimated && m.kind === "bar")?.tone ?? keys[0]?.tone ?? "neutral";
   const hitBand = (band) => band === "up" ? { y: PAD, h: Math.max(zero - PAD, TARGET) } : band === "down" ? { y: zero, h: Math.max(plotHeight - PAD - zero, TARGET) } : { y: PAD, h: Math.max(plotHeight - PAD * 2, TARGET) };
-  return /* @__PURE__ */ jsxs33(
+  return /* @__PURE__ */ jsxs34(
     "div",
     {
       className: cx8("ui-chart", `ui-chart--${variant}`, selectable && "ui-chart--pick", className),
@@ -4430,9 +4472,9 @@ function Chart(props) {
         "--ui-chart-pad": `${PAD}px`
       },
       children: [
-        !spark && keys.length > 0 && /* @__PURE__ */ jsxs33("ul", { className: "ui-chart__legend", children: [
-          keys.map((key) => /* @__PURE__ */ jsxs33("li", { className: cx8("ui-chart__key", `ui-chart__tone--${key.tone}`), children: [
-            key.shape === "line" ? /* @__PURE__ */ jsx38("svg", { className: "ui-chart__key-mark", width: "18", height: "12", viewBox: "0 0 18 12", "aria-hidden": "true", children: /* @__PURE__ */ jsx38("path", { className: "ui-chart__key-line", d: "M1 9 L6 5 L12 7 L17 3" }) }) : /* @__PURE__ */ jsx38("svg", { className: "ui-chart__key-mark", width: "12", height: "12", viewBox: "0 0 12 12", "aria-hidden": "true", children: /* @__PURE__ */ jsx38(
+        !spark && keys.length > 0 && /* @__PURE__ */ jsxs34("ul", { className: "ui-chart__legend", children: [
+          keys.map((key) => /* @__PURE__ */ jsxs34("li", { className: cx8("ui-chart__key", `ui-chart__tone--${key.tone}`), children: [
+            key.shape === "line" ? /* @__PURE__ */ jsx39("svg", { className: "ui-chart__key-mark", width: "18", height: "12", viewBox: "0 0 18 12", "aria-hidden": "true", children: /* @__PURE__ */ jsx39("path", { className: "ui-chart__key-line", d: "M1 9 L6 5 L12 7 L17 3" }) }) : /* @__PURE__ */ jsx39("svg", { className: "ui-chart__key-mark", width: "12", height: "12", viewBox: "0 0 12 12", "aria-hidden": "true", children: /* @__PURE__ */ jsx39(
               "rect",
               {
                 className: "ui-chart__key-swatch",
@@ -4445,12 +4487,12 @@ function Chart(props) {
             ) }),
             key.name
           ] }, key.id)),
-          estimated.length > 0 && /* @__PURE__ */ jsxs33("li", { className: cx8("ui-chart__key", `ui-chart__tone--${estimatedTone}`), children: [
-            /* @__PURE__ */ jsx38("svg", { className: "ui-chart__key-mark", width: "12", height: "12", viewBox: "0 0 12 12", "aria-hidden": "true", children: /* @__PURE__ */ jsx38("rect", { className: "ui-chart__key-estimated", x: "1.5", y: "1.5", width: "9", height: "9", rx: "1" }) }),
+          estimated.length > 0 && /* @__PURE__ */ jsxs34("li", { className: cx8("ui-chart__key", `ui-chart__tone--${estimatedTone}`), children: [
+            /* @__PURE__ */ jsx39("svg", { className: "ui-chart__key-mark", width: "12", height: "12", viewBox: "0 0 12 12", "aria-hidden": "true", children: /* @__PURE__ */ jsx39("rect", { className: "ui-chart__key-estimated", x: "1.5", y: "1.5", width: "9", height: "9", rx: "1" }) }),
             "Estimated"
           ] })
         ] }),
-        /* @__PURE__ */ jsxs33(
+        /* @__PURE__ */ jsxs34(
           "div",
           {
             ref: frameEl,
@@ -4474,8 +4516,8 @@ function Chart(props) {
               setSaid("");
             },
             children: [
-              !spark && scale.ticks.length > 0 && /* @__PURE__ */ jsx38("div", { className: "ui-chart__axis", "aria-hidden": "true", children: [...scale.ticks].reverse().map((tick) => /* @__PURE__ */ jsx38("span", { className: "ui-chart__tick", children: formatAxis(tick) }, tick)) }),
-              /* @__PURE__ */ jsx38("div", { ref: scroller, className: "ui-chart__scroll", tabIndex: -1, onScroll: () => {
+              !spark && scale.ticks.length > 0 && /* @__PURE__ */ jsx39("div", { className: "ui-chart__axis", "aria-hidden": "true", children: [...scale.ticks].reverse().map((tick) => /* @__PURE__ */ jsx39("span", { className: "ui-chart__tick", children: formatAxis(tick) }, tick)) }),
+              /* @__PURE__ */ jsx39("div", { ref: scroller, className: "ui-chart__scroll", tabIndex: -1, onScroll: () => {
                 syncEdges();
                 const anchor = [...svgEl.current?.querySelectorAll("[data-anchor]") ?? []].find((el) => el.getAttribute("data-anchor") === openId);
                 if (!anchor || !scroller.current || !frameEl.current || !tipEl.current) return;
@@ -4483,8 +4525,8 @@ function Chart(props) {
                 const view = scroller.current.getBoundingClientRect();
                 if (mark.right <= view.left || mark.left >= view.right) setOpenId(null);
                 else placeTip(frameEl.current, anchor, tipEl.current, frameEl.current);
-              }, children: /* @__PURE__ */ jsxs33("div", { ref: plot, className: "ui-chart__plot", children: [
-                /* @__PURE__ */ jsxs33(
+              }, children: /* @__PURE__ */ jsxs34("div", { ref: plot, className: "ui-chart__plot", children: [
+                /* @__PURE__ */ jsxs34(
                   "svg",
                   {
                     ref: svgEl,
@@ -4544,7 +4586,7 @@ function Chart(props) {
                       announce(mark.column, selectable ? mark.column : pick);
                     },
                     children: [
-                      !spark && pick !== null && pick >= 0 && pick < count && /* @__PURE__ */ jsx38(
+                      !spark && pick !== null && pick >= 0 && pick < count && /* @__PURE__ */ jsx39(
                         "rect",
                         {
                           className: "ui-chart__band",
@@ -4557,7 +4599,7 @@ function Chart(props) {
                       frame.links && frame.bars.slice(0, -1).map((bar, i) => {
                         const from = byId.get(bar.id);
                         const to = byId.get(frame.bars[i + 1].id);
-                        return from && to ? /* @__PURE__ */ jsx38(
+                        return from && to ? /* @__PURE__ */ jsx39(
                           "line",
                           {
                             className: "ui-chart__carry",
@@ -4569,7 +4611,7 @@ function Chart(props) {
                           `carry-${bar.id}`
                         ) : null;
                       }),
-                      !spark && scale.ticks.filter((tick) => tick !== 0).map((tick) => /* @__PURE__ */ jsx38(
+                      !spark && scale.ticks.filter((tick) => tick !== 0).map((tick) => /* @__PURE__ */ jsx39(
                         "line",
                         {
                           className: "ui-chart__grid",
@@ -4580,7 +4622,7 @@ function Chart(props) {
                         },
                         `grid-${tick}`
                       )),
-                      !spark && scale.ticks.includes(0) && /* @__PURE__ */ jsx38(
+                      !spark && scale.ticks.includes(0) && /* @__PURE__ */ jsx39(
                         "line",
                         {
                           className: "ui-chart__zero",
@@ -4590,7 +4632,7 @@ function Chart(props) {
                           y2: px(y(0))
                         }
                       ),
-                      marks.filter((m) => m.kind === "bar").map((mark) => /* @__PURE__ */ jsx38(
+                      marks.filter((m) => m.kind === "bar").map((mark) => /* @__PURE__ */ jsx39(
                         "path",
                         {
                           className: cx8(
@@ -4603,7 +4645,7 @@ function Chart(props) {
                         `bar-${mark.id}`
                       )),
                       ["casing", "stroke"].map((layer) => lines.flatMap(
-                        (line) => line.values.slice(1).map((value, i) => Number.isFinite(value) && Number.isFinite(line.values[i]) ? /* @__PURE__ */ jsx38(
+                        (line) => line.values.slice(1).map((value, i) => Number.isFinite(value) && Number.isFinite(line.values[i]) ? /* @__PURE__ */ jsx39(
                           "line",
                           {
                             className: layer === "casing" ? "ui-chart__line-casing" : cx8(
@@ -4619,7 +4661,7 @@ function Chart(props) {
                           `${line.id}-${layer}-${i}`
                         ) : null)
                       )),
-                      lines.flatMap((line) => line.values.map((value, i) => Number.isFinite(value) && !Number.isFinite(line.values[i - 1]) && !Number.isFinite(line.values[i + 1]) ? /* @__PURE__ */ jsx38(
+                      lines.flatMap((line) => line.values.map((value, i) => Number.isFinite(value) && !Number.isFinite(line.values[i - 1]) && !Number.isFinite(line.values[i + 1]) ? /* @__PURE__ */ jsx39(
                         "circle",
                         {
                           className: cx8("ui-chart__isolated", `ui-chart__tone--${line.tone}`),
@@ -4629,8 +4671,8 @@ function Chart(props) {
                         },
                         `isolated-${line.id}-${i}`
                       ) : null)),
-                      marks.map((mark) => /* @__PURE__ */ jsxs33("g", { "data-mark": mark.id, children: [
-                        mark.kind === "bar" ? /* @__PURE__ */ jsx38(
+                      marks.map((mark) => /* @__PURE__ */ jsxs34("g", { "data-mark": mark.id, children: [
+                        mark.kind === "bar" ? /* @__PURE__ */ jsx39(
                           "rect",
                           {
                             className: "ui-chart__hit",
@@ -4639,7 +4681,7 @@ function Chart(props) {
                             y: px(hitBand(mark.band).y),
                             height: px(hitBand(mark.band).h)
                           }
-                        ) : /* @__PURE__ */ jsx38(
+                        ) : /* @__PURE__ */ jsx39(
                           "rect",
                           {
                             className: "ui-chart__hit",
@@ -4649,7 +4691,7 @@ function Chart(props) {
                             height: px(mark.hit?.h ?? TARGET)
                           }
                         ),
-                        /* @__PURE__ */ jsx38(
+                        /* @__PURE__ */ jsx39(
                           "rect",
                           {
                             "data-anchor": mark.id,
@@ -4664,7 +4706,7 @@ function Chart(props) {
                     ]
                   }
                 ),
-                !spark && /* @__PURE__ */ jsx38("div", { className: "ui-chart__periods", "aria-hidden": "true", children: columns.map((column, i) => /* @__PURE__ */ jsx38(
+                !spark && /* @__PURE__ */ jsx39("div", { className: "ui-chart__periods", "aria-hidden": "true", children: columns.map((column, i) => /* @__PURE__ */ jsx39(
                   "span",
                   {
                     className: cx8("ui-chart__period", pick === i && "is-selected"),
@@ -4673,35 +4715,35 @@ function Chart(props) {
                   `${column.label}-${i}`
                 )) })
               ] }) }),
-              /* @__PURE__ */ jsx38("span", { ref: tipEl, className: cx8("ui-tip", openId && "is-open"), role: open ? "tooltip" : void 0, children: open && /* @__PURE__ */ jsxs33(Fragment13, { children: [
-                /* @__PURE__ */ jsx38("span", { className: "ui-tip__label", children: spark ? columns[open.column]?.label : `${open.name}, ${columns[open.column]?.label}` }),
-                /* @__PURE__ */ jsx38("span", { className: "ui-tip__value", children: format(open.value) }),
-                (stateOf(columns[open.column]) || open.detail) && /* @__PURE__ */ jsx38("span", { className: "ui-tip__detail", children: stateOf(columns[open.column]) || open.detail })
+              /* @__PURE__ */ jsx39("span", { ref: tipEl, className: cx8("ui-tip", openId && "is-open"), role: open ? "tooltip" : void 0, children: open && /* @__PURE__ */ jsxs34(Fragment13, { children: [
+                /* @__PURE__ */ jsx39("span", { className: "ui-tip__label", children: spark ? columns[open.column]?.label : `${open.name}, ${columns[open.column]?.label}` }),
+                /* @__PURE__ */ jsx39("span", { className: "ui-tip__value", children: format(open.value) }),
+                (stateOf(columns[open.column]) || open.detail) && /* @__PURE__ */ jsx39("span", { className: "ui-tip__detail", children: stateOf(columns[open.column]) || open.detail })
               ] }) })
             ]
           }
         ),
-        /* @__PURE__ */ jsx38("div", { className: "ui-sr", role: "status", children: said }),
-        showTable && /* @__PURE__ */ jsxs33("details", { className: "ui-chart__data", children: [
-          /* @__PURE__ */ jsx38("summary", { className: "ui-focusable", children: "Values as a table" }),
-          /* @__PURE__ */ jsx38(
+        /* @__PURE__ */ jsx39("div", { className: "ui-sr", role: "status", children: said }),
+        showTable && /* @__PURE__ */ jsxs34("details", { className: "ui-chart__data", children: [
+          /* @__PURE__ */ jsx39("summary", { className: "ui-focusable", children: "Values as a table" }),
+          /* @__PURE__ */ jsx39(
             "div",
             {
               className: "ui-table-scroll",
               role: "region",
               tabIndex: 0,
               "aria-label": `${title}, as a table. Scroll for more columns.`,
-              children: /* @__PURE__ */ jsxs33("table", { className: "ui-table", "aria-label": title, children: [
-                /* @__PURE__ */ jsx38("thead", { children: /* @__PURE__ */ jsx38("tr", { children: tableHead.map((head, i) => /* @__PURE__ */ jsx38("th", { scope: "col", className: cx8(i > 0 && "ui-table__num"), children: head }, head)) }) }),
-                /* @__PURE__ */ jsx38("tbody", { children: tableRows.map((row, i) => /* @__PURE__ */ jsxs33("tr", { "aria-current": pick === i ? true : void 0, children: [
-                  /* @__PURE__ */ jsxs33("th", { scope: "row", children: [
+              children: /* @__PURE__ */ jsxs34("table", { className: "ui-table", "aria-label": title, children: [
+                /* @__PURE__ */ jsx39("thead", { children: /* @__PURE__ */ jsx39("tr", { children: tableHead.map((head, i) => /* @__PURE__ */ jsx39("th", { scope: "col", className: cx8(i > 0 && "ui-table__num"), children: head }, head)) }) }),
+                /* @__PURE__ */ jsx39("tbody", { children: tableRows.map((row, i) => /* @__PURE__ */ jsxs34("tr", { "aria-current": pick === i ? true : void 0, children: [
+                  /* @__PURE__ */ jsxs34("th", { scope: "row", children: [
                     row.column.label,
-                    row.column.estimated && /* @__PURE__ */ jsxs33(Fragment13, { children: [
+                    row.column.estimated && /* @__PURE__ */ jsxs34(Fragment13, { children: [
                       " ",
-                      /* @__PURE__ */ jsx38("span", { className: "ui-chart__state", children: stateOf(row.column) })
+                      /* @__PURE__ */ jsx39("span", { className: "ui-chart__state", children: stateOf(row.column) })
                     ] })
                   ] }),
-                  row.cells.map((cell, j) => /* @__PURE__ */ jsx38("td", { className: "ui-table__num", children: cell }, tableHead[j + 1]))
+                  row.cells.map((cell, j) => /* @__PURE__ */ jsx39("td", { className: "ui-table__num", children: cell }, tableHead[j + 1]))
                 ] }, `${row.column.label}-${i}`)) })
               ] })
             }
@@ -4715,7 +4757,7 @@ function Chart(props) {
 // src/AccentPicker.tsx
 import { forwardRef as forwardRef10 } from "react";
 import { ACCENTS, accentSwatchStyle } from "@apliteni/apliteni-ui";
-import { jsx as jsx39 } from "react/jsx-runtime";
+import { jsx as jsx40 } from "react/jsx-runtime";
 var AccentPicker = forwardRef10(function AccentPicker2({
   value,
   onChange,
@@ -4724,7 +4766,7 @@ var AccentPicker = forwardRef10(function AccentPicker2({
   "aria-label": label = "Accent",
   ...rest
 }, ref) {
-  return /* @__PURE__ */ jsx39(
+  return /* @__PURE__ */ jsx40(
     "div",
     {
       ...rest,
@@ -4735,7 +4777,7 @@ var AccentPicker = forwardRef10(function AccentPicker2({
       "aria-label": label,
       children: options.map((accent) => {
         const title = accent.charAt(0).toUpperCase() + accent.slice(1);
-        return /* @__PURE__ */ jsx39(
+        return /* @__PURE__ */ jsx40(
           "button",
           {
             type: "button",
@@ -4756,7 +4798,7 @@ var AccentPicker = forwardRef10(function AccentPicker2({
 // src/NavTabs.tsx
 import { Fragment as Fragment14, forwardRef as forwardRef11, useEffect as useEffect17, useRef as useRef22, useImperativeHandle as useImperativeHandle2 } from "react";
 import { safeUrl, observeNavFit, revealCurrentNav, revealFocusedNav } from "@apliteni/apliteni-ui";
-import { Fragment as Fragment15, jsx as jsx40, jsxs as jsxs34 } from "react/jsx-runtime";
+import { Fragment as Fragment15, jsx as jsx41, jsxs as jsxs35 } from "react/jsx-runtime";
 var NavTabs = forwardRef11(function NavTabs2({
   items,
   active,
@@ -4774,7 +4816,7 @@ var NavTabs = forwardRef11(function NavTabs2({
   useEffect17(() => {
     if (navRef.current) revealCurrentNav(navRef.current);
   }, [active, signature]);
-  return /* @__PURE__ */ jsx40(
+  return /* @__PURE__ */ jsx41(
     "nav",
     {
       ...rest,
@@ -4787,11 +4829,11 @@ var NavTabs = forwardRef11(function NavTabs2({
       },
       children: items.map((item) => {
         const badge = item.badge != null && typeof item.badge === "object" ? item.badge : { text: item.badge, tone: void 0 };
-        const inner = /* @__PURE__ */ jsxs34(Fragment15, { children: [
-          /* @__PURE__ */ jsx40("span", { className: "ui-nav__tab-label", children: item.label }),
-          badge.text != null && badge.text !== "" && /* @__PURE__ */ jsx40("span", { className: `ui-nav__badge is-${badge.tone || "neutral"}`, children: badge.text })
+        const inner = /* @__PURE__ */ jsxs35(Fragment15, { children: [
+          /* @__PURE__ */ jsx41("span", { className: "ui-nav__tab-label", children: item.label }),
+          badge.text != null && badge.text !== "" && /* @__PURE__ */ jsx41("span", { className: `ui-nav__badge is-${badge.tone || "neutral"}`, children: badge.text })
         ] });
-        if (item.disabled) return /* @__PURE__ */ jsx40("span", { className: "ui-nav__tab is-disabled", "aria-disabled": "true", children: inner }, item.id);
+        if (item.disabled) return /* @__PURE__ */ jsx41("span", { className: "ui-nav__tab is-disabled", "aria-disabled": "true", children: inner }, item.id);
         const current = item.id === active;
         const linkProps = {
           className: ["ui-nav__tab", current && "is-active"].filter(Boolean).join(" "),
@@ -4800,7 +4842,7 @@ var NavTabs = forwardRef11(function NavTabs2({
           "aria-current": current ? "page" : void 0,
           children: inner
         };
-        return /* @__PURE__ */ jsx40(Fragment14, { children: renderLink ? renderLink(item, linkProps) : /* @__PURE__ */ jsx40("a", { ...linkProps }) }, item.id);
+        return /* @__PURE__ */ jsx41(Fragment14, { children: renderLink ? renderLink(item, linkProps) : /* @__PURE__ */ jsx41("a", { ...linkProps }) }, item.id);
       })
     }
   );
@@ -4808,8 +4850,8 @@ var NavTabs = forwardRef11(function NavTabs2({
 
 // src/Breadcrumbs.tsx
 import { forwardRef as forwardRef12 } from "react";
-import { icon as icon6, safeUrl as safeUrl2 } from "@apliteni/apliteni-ui";
-import { Fragment as Fragment16, jsx as jsx41, jsxs as jsxs35 } from "react/jsx-runtime";
+import { icon as icon7, safeUrl as safeUrl2 } from "@apliteni/apliteni-ui";
+import { Fragment as Fragment16, jsx as jsx42, jsxs as jsxs36 } from "react/jsx-runtime";
 var Breadcrumbs = forwardRef12(function Breadcrumbs2({
   items,
   renderLink,
@@ -4817,21 +4859,21 @@ var Breadcrumbs = forwardRef12(function Breadcrumbs2({
   "aria-label": ariaLabel = "Breadcrumb",
   ...rest
 }, ref) {
-  return /* @__PURE__ */ jsx41(
+  return /* @__PURE__ */ jsx42(
     "nav",
     {
       ...rest,
       ref,
       className: ["ui-nav", "ui-nav--crumbs", className].filter(Boolean).join(" "),
       "aria-label": ariaLabel,
-      children: /* @__PURE__ */ jsx41("ol", { className: "ui-nav__crumbs", children: items.map((item, index) => {
+      children: /* @__PURE__ */ jsx42("ol", { className: "ui-nav__crumbs", children: items.map((item, index) => {
         const current = index === items.length - 1;
-        const inner = /* @__PURE__ */ jsxs35(Fragment16, { children: [
-          item.icon && /* @__PURE__ */ jsx41("span", { className: "ui-nav__ic", dangerouslySetInnerHTML: { __html: icon6(item.icon) } }),
-          /* @__PURE__ */ jsx41("span", { className: "ui-nav__crumb-label", children: item.label })
+        const inner = /* @__PURE__ */ jsxs36(Fragment16, { children: [
+          item.icon && /* @__PURE__ */ jsx42("span", { className: "ui-nav__ic", dangerouslySetInnerHTML: { __html: icon7(item.icon) } }),
+          /* @__PURE__ */ jsx42("span", { className: "ui-nav__crumb-label", children: item.label })
         ] });
         const linkProps = !current && item.href ? { className: "ui-nav__crumb", href: safeUrl2(item.href), target: item.target, children: inner } : null;
-        return /* @__PURE__ */ jsx41("li", { className: "ui-nav__crumb-item", children: linkProps ? renderLink ? renderLink(item, linkProps) : /* @__PURE__ */ jsx41("a", { ...linkProps }) : /* @__PURE__ */ jsx41(
+        return /* @__PURE__ */ jsx42("li", { className: "ui-nav__crumb-item", children: linkProps ? renderLink ? renderLink(item, linkProps) : /* @__PURE__ */ jsx42("a", { ...linkProps }) : /* @__PURE__ */ jsx42(
           "span",
           {
             className: ["ui-nav__crumb", current && "is-current"].filter(Boolean).join(" "),
@@ -4850,6 +4892,7 @@ var DEFAULT_PAGE_SIZE3 = KIT_DEFAULT_PAGE_SIZE;
 export {
   AccentPicker,
   AppShell,
+  Avatar,
   BackLink,
   Badge,
   Breadcrumbs,