@apliteni/apliteni-ui 0.48.0 → 0.49.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@apliteni/apliteni-ui",
-  "version": "0.48.0",
+  "version": "0.49.0",
   "workspaces": [
     "react"
   ],

package/react/README.md

@@ -28,7 +28,7 @@ import '@apliteni/apliteni-ui/react/css';  // React components' shell styles (mo
 import { DataTable, Modal, Button } from '@apliteni/apliteni-ui/react';
 ```
 
-Components: `DataTable`, `Pagination`, `StatBand`, `Modal`, `Confirm`, `Drawer`, `CommandPalette`, `Dropdown`, `BackLink`, `Snippet`, `Tabs`, `Button`, `Badge`, `Card`, `Icon`.
+Components: `DataTable`, `Pagination`, `StatBand`, `Modal`, `Confirm`, `Drawer`, `CommandPalette`, `Dropdown`, `BackLink`, `Snippet`, `Tabs`, `Button`, `Badge`, `Card`, `Callout`, `Icon`.
 
 `Snippet` accepts `label`, `code`, `reveal`, and `copyLabel` props. It treats `code`
 as plain text and copies it exactly as provided. After a successful clipboard write,
@@ -42,6 +42,15 @@ can try again or select the text manually.
 Before a reveal snippet, explain that the secret is stored hashed and will not be
 shown again, and ask the reader to copy it now. The page decides when to remove it.
 
+`Callout` accepts `children`, optional `actions`, and an `icon` override. `neutral` is the default.
+The other variants are `info`, `success`, `warn`, and `danger`. Only `danger` uses `role="alert"`.
+
+```tsx
+<Callout variant="warn" actions={<Button size="sm">Review period</Button>}>
+  <b>Incomplete.</b> This period is still open.
+</Callout>
+```
+
 `Button` accepts `size="xs" | "sm" | "md" | "lg"` (default `md`). Use `xs`
 for a small inline control: `<Button size="xs" variant="ghost" icon="copy" iconOnly>Copy</Button>`.
 Its glyph is 13px and its icon-only target is 24×24px; labelled xs buttons use

package/react/dist/index.d.ts

@@ -41,6 +41,15 @@ declare function Card({ title, sub, level, children }: {
     children?: ReactNode;
 }): react.JSX.Element;
 
+type CalloutVariant = 'neutral' | 'info' | 'success' | 'warn' | 'danger';
+interface CalloutProps {
+    variant?: CalloutVariant;
+    icon?: string;
+    children: ReactNode;
+    actions?: ReactNode;
+}
+declare function Callout({ variant, icon, children, actions }: CalloutProps): react.JSX.Element;
+
 type StatTone = 'good' | 'bad' | 'neutral';
 type StatVariant = 'band' | 'tiles' | 'open';
 interface StatDelta {
@@ -544,4 +553,4 @@ declare function Toast({ children }: ToastProps): react.JSX.Element;
 declare const PAGE_SIZES: readonly number[];
 declare const DEFAULT_PAGE_SIZE: number;
 
-export { BackLink, type BackLinkOwnProps, type BackLinkProps, Badge, BusyRegion, type BusyRegionProps, Button, type ButtonProps, Card, type Column, type CommandGroup, type CommandItem, CommandPalette, type CommandPaletteProps, Confirm, type ConfirmProps, DEFAULT_PAGE_SIZE, DataTable, type DataTableProps, DeltaValue, type DeltaValueProps, Denied, type DeniedProps, Drawer, type DrawerProps, DrawerSection, type DrawerSectionProps, Dropdown, type DropdownBadge, type DropdownEntry, type DropdownItem, type DropdownProps, type DropdownRowProps, type DropdownSearch, type DropdownSection, type DropdownSeparator, FileField, type FileFieldProps, type Filter, FilterBar, type FilterBarProps, Icon, KeyValueList, type KeyValueListProps, type KeyValueRow, Modal, type ModalProps, NumericValue, type NumericValueProps, PAGE_SIZES, Pagination, type PaginationProps, RowIdentity, type RowIdentityProps, type SegmentOption, Segmented, type SegmentedProps, SelectField, type SelectFieldProps, Skeleton, type SkeletonProps, SkeletonTable, type SkeletonTableProps, Snippet, type SnippetProps, StatBand, type StatBandProps, type StatDelta, type StatFigure, type StatTone, type StatVariant, type TabItem, type TableSort, Tabs, type TabsProps, TextArea, type TextAreaProps, TextField, type TextFieldProps, Timeline, type TimelineEvent, type TimelineProps, Toast, type ToastNotice, type ToastProps, sortTableRows, useToast };
+export { BackLink, type BackLinkOwnProps, type BackLinkProps, Badge, BusyRegion, type BusyRegionProps, Button, type ButtonProps, Callout, type CalloutProps, type CalloutVariant, Card, type Column, type CommandGroup, type CommandItem, CommandPalette, type CommandPaletteProps, Confirm, type ConfirmProps, DEFAULT_PAGE_SIZE, DataTable, type DataTableProps, DeltaValue, type DeltaValueProps, Denied, type DeniedProps, Drawer, type DrawerProps, DrawerSection, type DrawerSectionProps, Dropdown, type DropdownBadge, type DropdownEntry, type DropdownItem, type DropdownProps, type DropdownRowProps, type DropdownSearch, type DropdownSection, type DropdownSeparator, FileField, type FileFieldProps, type Filter, FilterBar, type FilterBarProps, Icon, KeyValueList, type KeyValueListProps, type KeyValueRow, Modal, type ModalProps, NumericValue, type NumericValueProps, PAGE_SIZES, Pagination, type PaginationProps, RowIdentity, type RowIdentityProps, type SegmentOption, Segmented, type SegmentedProps, SelectField, type SelectFieldProps, Skeleton, type SkeletonProps, SkeletonTable, type SkeletonTableProps, Snippet, type SnippetProps, StatBand, type StatBandProps, type StatDelta, type StatFigure, type StatTone, type StatVariant, type TabItem, type TableSort, Tabs, type TabsProps, TextArea, type TextAreaProps, TextField, type TextFieldProps, Timeline, type TimelineEvent, type TimelineProps, Toast, type ToastNotice, type ToastProps, sortTableRows, useToast };

package/react/dist/index.js

@@ -174,9 +174,22 @@ function Card({ title, sub, level = 2, children }) {
   ] });
 }
 
+// src/primitives/Callout.tsx
+import { calloutIcons, icon as kitIcon } from "@apliteni/apliteni-ui";
+import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
+function Callout({ variant, icon: icon5 = calloutIcons[variant ?? "neutral"], children, actions }) {
+  return /* @__PURE__ */ jsxs3("div", { className: `ui-callout${variant && variant !== "neutral" ? ` ui-callout--${variant}` : ""}`, role: variant === "danger" ? "alert" : void 0, children: [
+    /* @__PURE__ */ jsx5("span", { className: "ui-callout__icon", dangerouslySetInnerHTML: { __html: kitIcon(icon5) } }),
+    /* @__PURE__ */ jsxs3("div", { className: "ui-callout__body", children: [
+      children,
+      actions != null && /* @__PURE__ */ jsx5("div", { className: "ui-toolbar ui-callout__actions", children: actions })
+    ] })
+  ] });
+}
+
 // src/primitives/StatBand.tsx
 import { useId } from "react";
-import { Fragment, jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
 var GLYPH = { up: "arrowUp", down: "arrowDown", flat: "minus" };
 var directionOf = (text2) => {
   const t = text2.trim();
@@ -185,15 +198,15 @@ var directionOf = (text2) => {
 var hasChange = (d) => !!d && d.value != null && d.value !== "";
 function Delta({ delta, basisId }) {
   if (!hasChange(delta)) {
-    return /* @__PURE__ */ jsx5("dd", { className: "ui-stat__delta ui-stat__delta--none", children: delta.none || "No earlier figure" });
+    return /* @__PURE__ */ jsx6("dd", { className: "ui-stat__delta ui-stat__delta--none", children: delta.none || "No earlier figure" });
   }
   const dir = delta.direction && GLYPH[delta.direction] ? delta.direction : directionOf(delta.value);
-  return /* @__PURE__ */ jsxs3("dd", { className: "ui-stat__delta", "aria-describedby": !delta.basis && basisId ? basisId : void 0, children: [
-    /* @__PURE__ */ jsx5(Icon, { name: GLYPH[dir] }),
-    /* @__PURE__ */ jsx5("span", { className: "ui-stat__change", children: delta.value }),
-    delta.basis ? /* @__PURE__ */ jsxs3(Fragment, { children: [
+  return /* @__PURE__ */ jsxs4("dd", { className: "ui-stat__delta", "aria-describedby": !delta.basis && basisId ? basisId : void 0, children: [
+    /* @__PURE__ */ jsx6(Icon, { name: GLYPH[dir] }),
+    /* @__PURE__ */ jsx6("span", { className: "ui-stat__change", children: delta.value }),
+    delta.basis ? /* @__PURE__ */ jsxs4(Fragment, { children: [
       " ",
-      /* @__PURE__ */ jsx5("span", { className: "ui-stat__basis", children: delta.basis })
+      /* @__PURE__ */ jsx6("span", { className: "ui-stat__basis", children: delta.basis })
     ] }) : null
   ] });
 }
@@ -202,16 +215,16 @@ function StatBand({ stats, variant = "tiles", basis, label, id }) {
   const v = ["band", "tiles", "open"].includes(variant) ? variant : "tiles";
   const basisId = basis ? `${id || auto}-basis` : void 0;
   const root = ["ui-stats", `ui-stats--${v}`, v === "band" && "ui-card"].filter(Boolean).join(" ");
-  return /* @__PURE__ */ jsxs3("div", { className: root, role: label ? "group" : void 0, "aria-label": label || void 0, children: [
-    basis ? /* @__PURE__ */ jsx5("p", { className: "ui-stats__basis", id: basisId, children: basis }) : null,
-    /* @__PURE__ */ jsx5("dl", { className: "ui-stats__list", children: stats.map((s, i) => {
+  return /* @__PURE__ */ jsxs4("div", { className: root, role: label ? "group" : void 0, "aria-label": label || void 0, children: [
+    basis ? /* @__PURE__ */ jsx6("p", { className: "ui-stats__basis", id: basisId, children: basis }) : null,
+    /* @__PURE__ */ jsx6("dl", { className: "ui-stats__list", children: stats.map((s, i) => {
       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__ */ jsxs3("div", { className: cls, children: [
-        /* @__PURE__ */ jsx5("dt", { className: "ui-stat__label", children: s.label }),
-        /* @__PURE__ */ jsx5("dd", { className: "ui-stat__value", children: s.value }),
-        s.delta ? /* @__PURE__ */ jsx5(Delta, { delta: s.delta, basisId }) : null,
-        s.trend ? /* @__PURE__ */ jsx5("dd", { className: "ui-stat__trend", children: s.trend }) : null
+      return /* @__PURE__ */ jsxs4("div", { className: cls, children: [
+        /* @__PURE__ */ jsx6("dt", { className: "ui-stat__label", children: s.label }),
+        /* @__PURE__ */ jsx6("dd", { className: "ui-stat__value", children: s.value }),
+        s.delta ? /* @__PURE__ */ jsx6(Delta, { delta: s.delta, basisId }) : null,
+        s.trend ? /* @__PURE__ */ jsx6("dd", { className: "ui-stat__trend", children: s.trend }) : null
       ] }, `${s.label}-${i}`);
     }) })
   ] });
@@ -435,7 +448,7 @@ function useDialog(active, { root, panel, body, initialFocus }, onClose) {
 }
 
 // src/Modal.tsx
-import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
 function Modal({ open, title, onClose, footer, children, initialFocusRef, role = "dialog" }) {
   const id = useId2();
   const titleId = `${id}-title`;
@@ -447,7 +460,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__ */ jsx6(DialogScope.Provider, { value: scope, children: /* @__PURE__ */ jsx6("div", { className: shown ? "rx-scrim is-open" : "rx-scrim", ref: root, onMouseDown: dismissOnScrim(onClose), children: /* @__PURE__ */ jsxs4(
+    /* @__PURE__ */ jsx7(DialogScope.Provider, { value: scope, children: /* @__PURE__ */ jsx7("div", { className: shown ? "rx-scrim is-open" : "rx-scrim", ref: root, onMouseDown: dismissOnScrim(onClose), children: /* @__PURE__ */ jsxs5(
       "div",
       {
         className: "rx-modal",
@@ -458,12 +471,12 @@ function Modal({ open, title, onClose, footer, children, initialFocusRef, role =
         tabIndex: -1,
         ref: panel,
         children: [
-          /* @__PURE__ */ jsxs4("div", { className: "rx-modal__head", children: [
-            /* @__PURE__ */ jsx6("div", { className: "rx-modal__title", id: titleId, children: title }),
-            /* @__PURE__ */ jsx6(Button, { variant: "ghost", size: "sm", iconOnly: true, icon: "x", "aria-label": "Close", onClick: onClose })
+          /* @__PURE__ */ jsxs5("div", { className: "rx-modal__head", children: [
+            /* @__PURE__ */ jsx7("div", { className: "rx-modal__title", id: titleId, children: title }),
+            /* @__PURE__ */ jsx7(Button, { variant: "ghost", size: "sm", iconOnly: true, icon: "x", "aria-label": "Close", onClick: onClose })
           ] }),
-          /* @__PURE__ */ jsx6("div", { className: "rx-modal__body", id: bodyId, ref: body, children }),
-          footer && /* @__PURE__ */ jsx6("div", { className: "rx-modal__foot", children: footer })
+          /* @__PURE__ */ jsx7("div", { className: "rx-modal__body", id: bodyId, ref: body, children }),
+          footer && /* @__PURE__ */ jsx7("div", { className: "rx-modal__foot", children: footer })
         ]
       }
     ) }) }),
@@ -472,7 +485,7 @@ function Modal({ open, title, onClose, footer, children, initialFocusRef, role =
 }
 
 // src/Confirm.tsx
-import { Fragment as Fragment2, jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
 function Confirm({
   open,
   title,
@@ -485,7 +498,7 @@ function Confirm({
   onCancel
 }) {
   const safeAction = useRef4(null);
-  return /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsx8(
     Modal,
     {
       open,
@@ -493,9 +506,9 @@ function Confirm({
       onClose: onCancel,
       role: "alertdialog",
       initialFocusRef: safeAction,
-      footer: /* @__PURE__ */ jsxs5(Fragment2, { children: [
-        /* @__PURE__ */ jsx7(Button, { ref: safeAction, variant: "ghost", onClick: onCancel, children: cancelLabel }),
-        /* @__PURE__ */ jsx7(Button, { variant: danger ? "danger" : "primary", busy, onClick: onConfirm, children: confirmLabel })
+      footer: /* @__PURE__ */ jsxs6(Fragment2, { children: [
+        /* @__PURE__ */ jsx8(Button, { ref: safeAction, variant: "ghost", onClick: onCancel, children: cancelLabel }),
+        /* @__PURE__ */ jsx8(Button, { variant: danger ? "danger" : "primary", busy, onClick: onConfirm, children: confirmLabel })
       ] }),
       children: body
     }
@@ -505,7 +518,7 @@ function Confirm({
 // src/Drawer.tsx
 import { useId as useId3, useRef as useRef5 } from "react";
 import { createPortal as createPortal2 } from "react-dom";
-import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
 function Drawer({
   open,
   title,
@@ -525,9 +538,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__ */ jsx8(DialogScope.Provider, { value: scope, children: /* @__PURE__ */ jsxs6("div", { className: cls, ref: root, children: [
-      /* @__PURE__ */ jsx8("div", { className: "ui-drawer__scrim", onMouseDown: dismissOnScrim(onClose) }),
-      /* @__PURE__ */ jsxs6(
+    /* @__PURE__ */ jsx9(DialogScope.Provider, { value: scope, children: /* @__PURE__ */ jsxs7("div", { className: cls, ref: root, children: [
+      /* @__PURE__ */ jsx9("div", { className: "ui-drawer__scrim", onMouseDown: dismissOnScrim(onClose) }),
+      /* @__PURE__ */ jsxs7(
         "aside",
         {
           className: "ui-drawer__panel",
@@ -537,12 +550,12 @@ function Drawer({
           tabIndex: -1,
           ref: panel,
           children: [
-            /* @__PURE__ */ jsxs6("header", { className: "ui-drawer__header", children: [
-              /* @__PURE__ */ jsx8("h2", { className: "ui-drawer__title", id: titleId, children: title }),
-              /* @__PURE__ */ jsx8("button", { type: "button", className: "ui-drawer__close", "aria-label": closeLabel, onClick: onClose, children: /* @__PURE__ */ jsx8(Icon, { name: "x" }) })
+            /* @__PURE__ */ jsxs7("header", { className: "ui-drawer__header", children: [
+              /* @__PURE__ */ jsx9("h2", { className: "ui-drawer__title", id: titleId, children: title }),
+              /* @__PURE__ */ jsx9("button", { type: "button", className: "ui-drawer__close", "aria-label": closeLabel, onClick: onClose, children: /* @__PURE__ */ jsx9(Icon, { name: "x" }) })
             ] }),
-            /* @__PURE__ */ jsx8("div", { className: "ui-drawer__body", ref: body, children }),
-            footer && /* @__PURE__ */ jsx8("footer", { className: "ui-drawer__footer", children: footer })
+            /* @__PURE__ */ jsx9("div", { className: "ui-drawer__body", ref: body, children }),
+            footer && /* @__PURE__ */ jsx9("footer", { className: "ui-drawer__footer", children: footer })
           ]
         }
       )
@@ -555,9 +568,9 @@ function Drawer({
 import { useCallback, useEffect as useEffect2, useId as useId4, useMemo, useRef as useRef6, useState as useState2 } from "react";
 import { createPortal as createPortal3 } from "react-dom";
 import { rankGroups, icon as icon2 } from "@apliteni/apliteni-ui";
-import { jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx10, jsxs as jsxs8 } from "react/jsx-runtime";
 var cx2 = (...a) => a.filter(Boolean).join(" ");
-var Glyph = ({ name, className }) => /* @__PURE__ */ jsx9("span", { className, "aria-hidden": "true", dangerouslySetInnerHTML: { __html: icon2(name) } });
+var Glyph = ({ name, className }) => /* @__PURE__ */ jsx10("span", { className, "aria-hidden": "true", dangerouslySetInnerHTML: { __html: icon2(name) } });
 var keysOf = (shortcut) => shortcut == null ? [] : Array.isArray(shortcut) ? shortcut : [shortcut];
 function CommandPalette({
   open,
@@ -622,9 +635,9 @@ function CommandPalette({
   const listId = `${uid}-list`;
   let n = 0;
   return createPortal3(
-    /* @__PURE__ */ jsx9(DialogScope.Provider, { value: scope, children: /* @__PURE__ */ jsxs7("div", { className: cx2("ui-cmdk", density === "roomy" && "ui-cmdk--roomy", "is-open"), ref: root, children: [
-      /* @__PURE__ */ jsx9("div", { className: "ui-cmdk__scrim", onMouseDown: dismissOnScrim(onClose) }),
-      /* @__PURE__ */ jsxs7(
+    /* @__PURE__ */ jsx10(DialogScope.Provider, { value: scope, children: /* @__PURE__ */ jsxs8("div", { className: cx2("ui-cmdk", density === "roomy" && "ui-cmdk--roomy", "is-open"), ref: root, children: [
+      /* @__PURE__ */ jsx10("div", { className: "ui-cmdk__scrim", onMouseDown: dismissOnScrim(onClose) }),
+      /* @__PURE__ */ jsxs8(
         "div",
         {
           className: "ui-cmdk__panel",
@@ -635,9 +648,9 @@ function CommandPalette({
           ref: panel,
           onKeyDown,
           children: [
-            /* @__PURE__ */ jsxs7("div", { className: "ui-cmdk__search", ref: search, children: [
-              /* @__PURE__ */ jsx9(Glyph, { name: "search", className: "ui-cmdk__search-ic" }),
-              /* @__PURE__ */ jsx9(
+            /* @__PURE__ */ jsxs8("div", { className: "ui-cmdk__search", ref: search, children: [
+              /* @__PURE__ */ jsx10(Glyph, { name: "search", className: "ui-cmdk__search-ic" }),
+              /* @__PURE__ */ jsx10(
                 "input",
                 {
                   className: "ui-cmdk__input",
@@ -659,19 +672,19 @@ function CommandPalette({
                 }
               )
             ] }),
-            /* @__PURE__ */ jsx9("div", { className: "ui-cmdk__list", id: listId, role: "listbox", "aria-label": `${label} results`, children: shown.map((group, gi) => /* @__PURE__ */ jsxs7(
+            /* @__PURE__ */ jsx10("div", { className: "ui-cmdk__list", id: listId, role: "listbox", "aria-label": `${label} results`, children: shown.map((group, gi) => /* @__PURE__ */ jsxs8(
               "div",
               {
                 className: "ui-cmdk__group",
                 role: "group",
                 "aria-labelledby": group.label ? `${uid}-g${gi}` : void 0,
                 children: [
-                  group.label && /* @__PURE__ */ jsx9("div", { className: "ui-cmdk__group-head", id: `${uid}-g${gi}`, children: group.label }),
+                  group.label && /* @__PURE__ */ jsx10("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__ */ jsxs7(
+                    return /* @__PURE__ */ jsxs8(
                       "div",
                       {
                         id,
@@ -691,13 +704,13 @@ function CommandPalette({
                         },
                         onClick: (e) => run(item, e.metaKey || e.ctrlKey),
                         children: [
-                          item.icon && /* @__PURE__ */ jsx9(Glyph, { name: item.icon, className: "ui-cmdk__ic" }),
-                          /* @__PURE__ */ jsxs7("span", { className: "ui-cmdk__main", children: [
-                            /* @__PURE__ */ jsx9("span", { className: "ui-cmdk__label", children: item.label }),
-                            item.description && /* @__PURE__ */ jsx9("span", { className: "ui-cmdk__desc", children: item.description })
+                          item.icon && /* @__PURE__ */ jsx10(Glyph, { name: item.icon, className: "ui-cmdk__ic" }),
+                          /* @__PURE__ */ jsxs8("span", { className: "ui-cmdk__main", children: [
+                            /* @__PURE__ */ jsx10("span", { className: "ui-cmdk__label", children: item.label }),
+                            item.description && /* @__PURE__ */ jsx10("span", { className: "ui-cmdk__desc", children: item.description })
                           ] }),
-                          item.badge && /* @__PURE__ */ jsx9("span", { className: "ui-cmdk__badge", children: item.badge }),
-                          keysOf(item.shortcut).length > 0 && /* @__PURE__ */ jsx9("span", { className: "ui-cmdk__keys", "aria-hidden": "true", children: keysOf(item.shortcut).map((k) => /* @__PURE__ */ jsx9("kbd", { className: "ui-cmdk__key", children: k }, k)) })
+                          item.badge && /* @__PURE__ */ jsx10("span", { className: "ui-cmdk__badge", children: item.badge }),
+                          keysOf(item.shortcut).length > 0 && /* @__PURE__ */ jsx10("span", { className: "ui-cmdk__keys", "aria-hidden": "true", children: keysOf(item.shortcut).map((k) => /* @__PURE__ */ jsx10("kbd", { className: "ui-cmdk__key", children: k }, k)) })
                         ]
                       },
                       item.id
@@ -707,20 +720,20 @@ function CommandPalette({
               },
               group.label ?? `g${gi}`
             )) }),
-            /* @__PURE__ */ jsx9("p", { className: "ui-cmdk__empty", hidden: countOf(shown) > 0, children: empty }),
-            /* @__PURE__ */ jsx9("p", { className: "ui-sr", role: "status", "aria-live": "polite", children: countOf(shown) === 0 ? "No results" : `${countOf(shown)} result${countOf(shown) === 1 ? "" : "s"}` }),
-            hint && /* @__PURE__ */ jsxs7("div", { className: "ui-cmdk__foot", "aria-hidden": "true", children: [
-              /* @__PURE__ */ jsxs7("span", { children: [
-                /* @__PURE__ */ jsx9("kbd", { className: "ui-cmdk__key", children: "\u2191" }),
-                /* @__PURE__ */ jsx9("kbd", { className: "ui-cmdk__key", children: "\u2193" }),
+            /* @__PURE__ */ jsx10("p", { className: "ui-cmdk__empty", hidden: countOf(shown) > 0, children: empty }),
+            /* @__PURE__ */ jsx10("p", { className: "ui-sr", role: "status", "aria-live": "polite", children: countOf(shown) === 0 ? "No results" : `${countOf(shown)} result${countOf(shown) === 1 ? "" : "s"}` }),
+            hint && /* @__PURE__ */ jsxs8("div", { className: "ui-cmdk__foot", "aria-hidden": "true", children: [
+              /* @__PURE__ */ jsxs8("span", { children: [
+                /* @__PURE__ */ jsx10("kbd", { className: "ui-cmdk__key", children: "\u2191" }),
+                /* @__PURE__ */ jsx10("kbd", { className: "ui-cmdk__key", children: "\u2193" }),
                 " move"
               ] }),
-              /* @__PURE__ */ jsxs7("span", { children: [
-                /* @__PURE__ */ jsx9("kbd", { className: "ui-cmdk__key", children: "\u21B5" }),
+              /* @__PURE__ */ jsxs8("span", { children: [
+                /* @__PURE__ */ jsx10("kbd", { className: "ui-cmdk__key", children: "\u21B5" }),
                 " run"
               ] }),
-              /* @__PURE__ */ jsxs7("span", { children: [
-                /* @__PURE__ */ jsx9("kbd", { className: "ui-cmdk__key", children: "esc" }),
+              /* @__PURE__ */ jsxs8("span", { children: [
+                /* @__PURE__ */ jsx10("kbd", { className: "ui-cmdk__key", children: "esc" }),
                 " close"
               ] })
             ] })
@@ -751,7 +764,7 @@ import { DEFAULT_PAGE_SIZE as DEFAULT_PAGE_SIZE2 } from "@apliteni/apliteni-ui";
 // src/Pagination.tsx
 import { useEffect as useEffect3, useId as useId5, useRef as useRef7, useState as useState3 } from "react";
 import { DEFAULT_PAGE_SIZE } from "@apliteni/apliteni-ui";
-import { jsx as jsx10, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx11, jsxs as jsxs9 } from "react/jsx-runtime";
 var GHOST_SM = "ui-btn ui-btn--ghost ui-btn--sm";
 var VARIANTS = ["steps", "numbered", "jump"];
 var cx3 = (...a) => a.filter(Boolean).join(" ");
@@ -843,7 +856,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__ */ jsx10(
+    /* @__PURE__ */ jsx11(
       "button",
       {
         type: "button",
@@ -882,14 +895,14 @@ function Pagination({
   if (single) {
     steps = null;
   } else if (!counted) {
-    steps = /* @__PURE__ */ jsxs8("div", { className: "ui-pager__steps", children: [
+    steps = /* @__PURE__ */ jsxs9("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__ */ jsx10("span", { className: "ui-pager__gap", "aria-hidden": "true", children: "\u2026" }, `gap${i}`) : /* @__PURE__ */ jsx10(
+      middle = slotsFor(at, last).map((n, i) => n == null ? /* @__PURE__ */ jsx11("span", { className: "ui-pager__gap", "aria-hidden": "true", children: "\u2026" }, `gap${i}`) : /* @__PURE__ */ jsx11(
         "button",
         {
           type: "button",
@@ -904,9 +917,9 @@ function Pagination({
         n
       ));
     } else if (kind === "jump") {
-      middle = /* @__PURE__ */ jsxs8("span", { className: "ui-pager__jump", children: [
-        /* @__PURE__ */ jsx10("label", { htmlFor: `${uid}-jump`, children: "Page" }),
-        /* @__PURE__ */ jsx10(
+      middle = /* @__PURE__ */ jsxs9("span", { className: "ui-pager__jump", children: [
+        /* @__PURE__ */ jsx11("label", { htmlFor: `${uid}-jump`, children: "Page" }),
+        /* @__PURE__ */ jsx11(
           "input",
           {
             className: "ui-input ui-pager__jump-input",
@@ -929,13 +942,13 @@ function Pagination({
             }
           }
         ),
-        /* @__PURE__ */ jsxs8("span", { className: "ui-pager__jump-of", children: [
+        /* @__PURE__ */ jsxs9("span", { className: "ui-pager__jump-of", children: [
           "of ",
           fmt(last)
         ] })
       ] });
     }
-    steps = /* @__PURE__ */ jsxs8("div", { className: "ui-pager__steps", children: [
+    steps = /* @__PURE__ */ jsxs9("div", { className: "ui-pager__steps", children: [
       ends ? step("First", 1, atStart) : null,
       step("Prev", Math.max(1, at - 1), atStart),
       middle,
@@ -943,7 +956,7 @@ function Pagination({
       ends ? step("Last", last, atEnd) : null
     ] });
   }
-  return /* @__PURE__ */ jsxs8(
+  return /* @__PURE__ */ jsxs9(
     "nav",
     {
       ref: nav,
@@ -951,10 +964,10 @@ function Pagination({
       "aria-label": label,
       "aria-busy": loading ? true : void 0,
       children: [
-        /* @__PURE__ */ jsx10("p", { className: "ui-pager__status", "aria-live": "polite", "aria-atomic": "true", children: status }),
-        sizes.length ? /* @__PURE__ */ jsxs8("div", { className: "ui-pager__size", children: [
-          /* @__PURE__ */ jsx10("label", { className: "ui-pager__size-label", htmlFor: `${uid}-size`, children: "Rows" }),
-          /* @__PURE__ */ jsx10(
+        /* @__PURE__ */ jsx11("p", { className: "ui-pager__status", "aria-live": "polite", "aria-atomic": "true", children: status }),
+        sizes.length ? /* @__PURE__ */ jsxs9("div", { className: "ui-pager__size", children: [
+          /* @__PURE__ */ jsx11("label", { className: "ui-pager__size-label", htmlFor: `${uid}-size`, children: "Rows" }),
+          /* @__PURE__ */ jsx11(
             "select",
             {
               className: "ui-select ui-pager__size-select",
@@ -962,7 +975,7 @@ function Pagination({
               disabled: loading,
               value: size,
               onChange: (e) => onPageSizeChange?.(Number(e.target.value)),
-              children: sizes.map((s) => /* @__PURE__ */ jsx10("option", { value: s, children: fmt(s) }, s))
+              children: sizes.map((s) => /* @__PURE__ */ jsx11("option", { value: s, children: fmt(s) }, s))
             }
           )
         ] }) : null,
@@ -973,7 +986,7 @@ function Pagination({
 }
 
 // src/DataTable.tsx
-import { Fragment as Fragment3, jsx as jsx11, jsxs as jsxs9 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx12, jsxs as jsxs10 } from "react/jsx-runtime";
 var NO_SORT = { key: void 0, dir: -1 };
 function sortTableRows(rows, sort) {
   if (sort.key === void 0) return [...rows];
@@ -1040,7 +1053,7 @@ function DataTable({
     onSortChange?.(next);
     toFirstPage();
   };
-  const caret = (k) => /* @__PURE__ */ jsx11(
+  const caret = (k) => /* @__PURE__ */ jsx12(
     "svg",
     {
       className: "rx-caret",
@@ -1052,29 +1065,29 @@ function DataTable({
       strokeLinejoin: "round",
       "aria-hidden": "true",
       focusable: "false",
-      children: sort.key === k ? /* @__PURE__ */ jsx11("path", { d: "m8 10 4 4 4-4" }) : /* @__PURE__ */ jsxs9(Fragment3, { children: [
-        /* @__PURE__ */ jsx11("path", { d: "m8 9 4-4 4 4" }),
-        /* @__PURE__ */ jsx11("path", { d: "m8 15 4 4 4-4" })
+      children: sort.key === k ? /* @__PURE__ */ jsx12("path", { d: "m8 10 4 4 4-4" }) : /* @__PURE__ */ jsxs10(Fragment3, { children: [
+        /* @__PURE__ */ jsx12("path", { d: "m8 9 4-4 4 4" }),
+        /* @__PURE__ */ jsx12("path", { d: "m8 15 4 4 4-4" })
       ] })
     }
   );
   const pageAllOn = selectable && slice.length > 0 && slice.every((r) => selected.has(r.name));
-  return /* @__PURE__ */ jsxs9(Fragment3, { children: [
-    /* @__PURE__ */ jsx11(
+  return /* @__PURE__ */ jsxs10(Fragment3, { children: [
+    /* @__PURE__ */ jsx12(
       "div",
       {
         className: stickyHeader || pinnedIdentity ? "ui-table-scroll" : void 0,
         role: stickyHeader || pinnedIdentity ? "region" : void 0,
         "aria-label": stickyHeader || pinnedIdentity ? scrollLabel : void 0,
         tabIndex: stickyHeader || pinnedIdentity ? 0 : void 0,
-        children: /* @__PURE__ */ jsxs9(
+        children: /* @__PURE__ */ jsxs10(
           "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__ */ jsx11("thead", { children: /* @__PURE__ */ jsxs9("tr", { children: [
-                selectable ? /* @__PURE__ */ jsx11("th", { scope: "col", className: "ui-table__selection", children: /* @__PURE__ */ jsx11(
+              /* @__PURE__ */ jsx12("thead", { children: /* @__PURE__ */ jsxs10("tr", { children: [
+                selectable ? /* @__PURE__ */ jsx12("th", { scope: "col", className: "ui-table__selection", children: /* @__PURE__ */ jsx12(
                   "input",
                   {
                     type: "checkbox",
@@ -1087,13 +1100,13 @@ function DataTable({
                   // The sort control is a real <button> inside the header cell. It used to be
                   // role="button" ON the <th>, which threw away the columnheader role and put
                   // aria-sort on a role that forbids it.
-                  /* @__PURE__ */ jsx11(
+                  /* @__PURE__ */ jsx12(
                     "th",
                     {
                       scope: "col",
                       className: [pinnedIdentity && columnIndex === 0 && "ui-table__identity", c.num && "ui-table__num", c.sortable && "rx-sortable"].filter(Boolean).join(" "),
                       "aria-sort": sort.key === c.key ? sort.dir === 1 ? "ascending" : "descending" : c.sortable && sortIsKnown ? "none" : void 0,
-                      children: c.sortable ? /* @__PURE__ */ jsxs9("button", { type: "button", className: "rx-sort", onClick: () => onSort(c.key), children: [
+                      children: c.sortable ? /* @__PURE__ */ jsxs10("button", { type: "button", className: "rx-sort", onClick: () => onSort(c.key), children: [
                         c.label,
                         caret(c.key)
                       ] }) : c.label
@@ -1102,10 +1115,10 @@ function DataTable({
                   )
                 ))
               ] }) }),
-              /* @__PURE__ */ jsxs9("tbody", { children: [
-                !slice.length && /* @__PURE__ */ jsx11("tr", { children: /* @__PURE__ */ jsx11("td", { colSpan: columns.length + (selectable ? 1 : 0), children: loading ? "Loading rows\u2026" : empty }) }),
-                slice.map((r) => /* @__PURE__ */ jsxs9("tr", { children: [
-                  selectable ? /* @__PURE__ */ jsx11("td", { className: "ui-table__selection", children: /* @__PURE__ */ jsx11(
+              /* @__PURE__ */ jsxs10("tbody", { children: [
+                !slice.length && /* @__PURE__ */ jsx12("tr", { children: /* @__PURE__ */ jsx12("td", { colSpan: columns.length + (selectable ? 1 : 0), children: loading ? "Loading rows\u2026" : empty }) }),
+                slice.map((r) => /* @__PURE__ */ jsxs10("tr", { children: [
+                  selectable ? /* @__PURE__ */ jsx12("td", { className: "ui-table__selection", children: /* @__PURE__ */ jsx12(
                     "input",
                     {
                       type: "checkbox",
@@ -1114,7 +1127,7 @@ function DataTable({
                       onChange: () => onToggle(r.name)
                     }
                   ) }) : null,
-                  columns.map((c, columnIndex) => /* @__PURE__ */ jsx11("td", { className: [c.num && "ui-table__num", pinnedIdentity && columnIndex === 0 && "ui-table__identity"].filter(Boolean).join(" "), children: c.render ? c.render(r) : String(r[c.key]) }, c.key))
+                  columns.map((c, columnIndex) => /* @__PURE__ */ jsx12("td", { className: [c.num && "ui-table__num", pinnedIdentity && columnIndex === 0 && "ui-table__identity"].filter(Boolean).join(" "), children: c.render ? c.render(r) : String(r[c.key]) }, c.key))
                 ] }, r.name))
               ] })
             ]
@@ -1122,7 +1135,7 @@ function DataTable({
         )
       }
     ),
-    pager ? /* @__PURE__ */ jsx11(
+    pager ? /* @__PURE__ */ jsx12(
       Pagination,
       {
         page,
@@ -1147,7 +1160,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 jsx12, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx13, jsxs as jsxs11 } 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;
@@ -1157,19 +1170,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__ */ jsx12("div", { className: cx4("ui-skel", className), "aria-hidden": "true", children: Array.from({ length: n }, (_, i) => /* @__PURE__ */ jsx12("span", { className: "ui-skel__bar m-skeleton", style: styleFor(i) }, i)) });
+  return /* @__PURE__ */ jsx13("div", { className: cx4("ui-skel", className), "aria-hidden": "true", children: Array.from({ length: n }, (_, i) => /* @__PURE__ */ jsx13("span", { className: "ui-skel__bar m-skeleton", style: styleFor(i) }, i)) });
 }
 function SkeletonTable({ rows = 5, cols = 4, head = true }) {
-  const cells = Array.from({ length: Math.max(1, cols) }, (_, i) => /* @__PURE__ */ jsx12("span", { className: "ui-skel__bar m-skeleton" }, i));
-  return /* @__PURE__ */ jsxs10(
+  const cells = Array.from({ length: Math.max(1, cols) }, (_, i) => /* @__PURE__ */ jsx13("span", { className: "ui-skel__bar m-skeleton" }, i));
+  return /* @__PURE__ */ jsxs11(
     "div",
     {
       className: "ui-skel ui-skel--table",
       style: { "--skel-cols": Math.max(1, cols) },
       "aria-hidden": "true",
       children: [
-        head && /* @__PURE__ */ jsx12("div", { className: "ui-skel__row ui-skel__row--head", children: cells }),
-        Array.from({ length: Math.max(1, rows) }, (_, i) => /* @__PURE__ */ jsx12("div", { className: "ui-skel__row", children: cells }, i))
+        head && /* @__PURE__ */ jsx13("div", { className: "ui-skel__row ui-skel__row--head", children: cells }),
+        Array.from({ length: Math.max(1, rows) }, (_, i) => /* @__PURE__ */ jsx13("div", { className: "ui-skel__row", children: cells }, i))
       ]
     }
   );
@@ -1182,7 +1195,7 @@ function BusyRegion({
   className,
   children
 }) {
-  return /* @__PURE__ */ jsxs10(
+  return /* @__PURE__ */ jsxs11(
     "div",
     {
       className: cx4("ui-busy", className),
@@ -1190,8 +1203,8 @@ function BusyRegion({
       "aria-live": "polite",
       "aria-busy": busy,
       children: [
-        /* @__PURE__ */ jsx12("span", { className: "ui-sr", children: busy ? label : message }),
-        /* @__PURE__ */ jsx12("div", { className: "ui-busy__body", children: busy ? placeholder ?? /* @__PURE__ */ jsx12(Skeleton, { lines: 3 }) : children })
+        /* @__PURE__ */ jsx13("span", { className: "ui-sr", children: busy ? label : message }),
+        /* @__PURE__ */ jsx13("div", { className: "ui-busy__body", children: busy ? placeholder ?? /* @__PURE__ */ jsx13(Skeleton, { lines: 3 }) : children })
       ]
     }
   );
@@ -1204,15 +1217,15 @@ function Denied({
   className,
   children
 }) {
-  return /* @__PURE__ */ jsxs10("div", { className: cx4("ui-denied", className), children: [
-    /* @__PURE__ */ jsx12("div", { className: "ui-denied__seal", children: /* @__PURE__ */ jsx12(Icon, { name: icon5 }) }),
-    /* @__PURE__ */ jsx12("div", { className: "ui-denied__title", children: title }),
-    sub && /* @__PURE__ */ jsx12("div", { className: "ui-denied__sub", children: sub }),
-    need && /* @__PURE__ */ jsxs10("div", { className: "ui-denied__need", children: [
+  return /* @__PURE__ */ jsxs11("div", { className: cx4("ui-denied", className), children: [
+    /* @__PURE__ */ jsx13("div", { className: "ui-denied__seal", children: /* @__PURE__ */ jsx13(Icon, { name: icon5 }) }),
+    /* @__PURE__ */ jsx13("div", { className: "ui-denied__title", children: title }),
+    sub && /* @__PURE__ */ jsx13("div", { className: "ui-denied__sub", children: sub }),
+    need && /* @__PURE__ */ jsxs11("div", { className: "ui-denied__need", children: [
       "Needs ",
-      /* @__PURE__ */ jsx12("code", { className: "ui-code", children: need })
+      /* @__PURE__ */ jsx13("code", { className: "ui-code", children: need })
     ] }),
-    children && /* @__PURE__ */ jsx12("div", { className: "ui-denied__actions", children })
+    children && /* @__PURE__ */ jsx13("div", { className: "ui-denied__actions", children })
   ] });
 }
 
@@ -1226,10 +1239,10 @@ import {
   useState as useState5
 } from "react";
 import { icon as icon3, dropdownMatch, dropdownFiltering } from "@apliteni/apliteni-ui";
-import { Fragment as Fragment5, jsx as jsx13, jsxs as jsxs11 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx14, jsxs as jsxs12 } from "react/jsx-runtime";
 var cx5 = (...a) => a.filter(Boolean).join(" ");
 var isRow = (it) => Boolean(it) && it !== "---" && !it.separator;
-var Glyph2 = ({ name, className, hidden }) => /* @__PURE__ */ jsx13(
+var Glyph2 = ({ name, className, hidden }) => /* @__PURE__ */ jsx14(
   "span",
   {
     className,
@@ -1242,7 +1255,7 @@ function RowBadge({ badge }) {
   const given = typeof badge === "string" ? "" : badge.tone || "";
   let tone = given || (/^live$/i.test(String(text2)) ? "live" : "neutral");
   if (!given && tone === "neutral" && /^(?:off|unset|disabled|archive|archived)$/i.test(text2)) tone = "state";
-  return /* @__PURE__ */ jsx13("span", { className: `ui-dropdown__badge is-${tone}`, children: text2 });
+  return /* @__PURE__ */ jsx14("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);
@@ -1457,7 +1470,7 @@ function Dropdown({
   };
   function renderRow(entry, key) {
     if (!isRow(entry)) {
-      return /* @__PURE__ */ jsx13("div", { className: "ui-dropdown__sep", role: "separator", hidden: filtering || void 0 }, key);
+      return /* @__PURE__ */ jsx14("div", { className: "ui-dropdown__sep", role: "separator", hidden: filtering || void 0 }, key);
     }
     const disabled = !!entry.disabled;
     const selected = selectedOf(entry);
@@ -1479,23 +1492,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__ */ jsxs11(Fragment5, { children: [
-        entry.icon && /* @__PURE__ */ jsx13(Glyph2, { name: entry.icon, className: "ui-dropdown__ic" }),
-        /* @__PURE__ */ jsxs11("span", { className: "ui-dropdown__main", children: [
-          /* @__PURE__ */ jsx13("span", { className: "ui-dropdown__label", children: entry.label }),
-          entry.description && /* @__PURE__ */ jsx13("span", { className: "ui-dropdown__desc", children: entry.description })
+      children: /* @__PURE__ */ jsxs12(Fragment5, { children: [
+        entry.icon && /* @__PURE__ */ jsx14(Glyph2, { name: entry.icon, className: "ui-dropdown__ic" }),
+        /* @__PURE__ */ jsxs12("span", { className: "ui-dropdown__main", children: [
+          /* @__PURE__ */ jsx14("span", { className: "ui-dropdown__label", children: entry.label }),
+          entry.description && /* @__PURE__ */ jsx14("span", { className: "ui-dropdown__desc", children: entry.description })
         ] }),
-        entry.badge ? /* @__PURE__ */ jsx13(RowBadge, { badge: entry.badge }) : null,
-        asOption && /* @__PURE__ */ jsx13(Glyph2, { name: "check", className: "ui-dropdown__tick", hidden: true })
+        entry.badge ? /* @__PURE__ */ jsx14(RowBadge, { badge: entry.badge }) : null,
+        asOption && /* @__PURE__ */ jsx14(Glyph2, { name: "check", className: "ui-dropdown__tick", hidden: true })
       ] })
     };
-    if (row) return /* @__PURE__ */ jsx13(Fragment4, { children: row(entry, props) }, key);
+    if (row) return /* @__PURE__ */ jsx14(Fragment4, { children: row(entry, props) }, key);
     const Tag = asLink ? "a" : "div";
-    return /* @__PURE__ */ jsx13(Tag, { ...props }, key);
+    return /* @__PURE__ */ jsx14(Tag, { ...props }, key);
   }
   const body = sections?.length ? sections.map((section, si) => {
     const gone = filtering && !(section.items || []).some((it) => isRow(it) && !hiddenBy(it));
-    return /* @__PURE__ */ jsxs11(
+    return /* @__PURE__ */ jsxs12(
       "div",
       {
         className: "ui-dropdown__section",
@@ -1503,7 +1516,7 @@ function Dropdown({
         "aria-label": section.label || void 0,
         hidden: gone || void 0,
         children: [
-          section.label && /* @__PURE__ */ jsx13("div", { className: "ui-dropdown__group", role: "presentation", children: section.label }),
+          section.label && /* @__PURE__ */ jsx14("div", { className: "ui-dropdown__group", role: "presentation", children: section.label }),
           (section.items || []).map((entry, i) => renderRow(entry, `s${si}-${i}`))
         ]
       },
@@ -1511,12 +1524,12 @@ function Dropdown({
     );
   }) : (items || []).map((entry, i) => renderRow(entry, `i${i}`));
   const cap = scroll && scroll !== true ? { maxHeight: typeof scroll === "number" ? `${scroll}px` : scroll } : void 0;
-  const none = sx && filtering && !visible.length ? /* @__PURE__ */ jsxs11(Fragment5, { children: [
-    /* @__PURE__ */ jsx13("span", { className: "ui-dropdown__none-title", children: sx.empty.replace("{q}", () => query.trim()) }),
-    /* @__PURE__ */ jsx13("span", { className: "ui-dropdown__none-hint", children: sx.hint })
+  const none = sx && filtering && !visible.length ? /* @__PURE__ */ jsxs12(Fragment5, { children: [
+    /* @__PURE__ */ jsx14("span", { className: "ui-dropdown__none-title", children: sx.empty.replace("{q}", () => query.trim()) }),
+    /* @__PURE__ */ jsx14("span", { className: "ui-dropdown__none-hint", children: sx.hint })
   ] }) : null;
-  return /* @__PURE__ */ jsxs11("div", { className: cx5("ui-dropdown", open && "open"), id, ref: root, onKeyDown, children: [
-    /* @__PURE__ */ jsxs11(
+  return /* @__PURE__ */ jsxs12("div", { className: cx5("ui-dropdown", open && "open"), id, ref: root, onKeyDown, children: [
+    /* @__PURE__ */ jsxs12(
       "button",
       {
         type: "button",
@@ -1531,15 +1544,15 @@ function Dropdown({
           setOpen(!open);
         },
         children: [
-          triggerContent != null ? triggerContent : /* @__PURE__ */ jsxs11(Fragment5, { children: [
-            label && /* @__PURE__ */ jsx13("span", { className: "ui-dropdown__pre", children: label }),
-            /* @__PURE__ */ jsx13("span", { className: "ui-dropdown__value", children: shown != null ? shown : placeholder })
+          triggerContent != null ? triggerContent : /* @__PURE__ */ jsxs12(Fragment5, { children: [
+            label && /* @__PURE__ */ jsx14("span", { className: "ui-dropdown__pre", children: label }),
+            /* @__PURE__ */ jsx14("span", { className: "ui-dropdown__value", children: shown != null ? shown : placeholder })
           ] }),
-          chevron && /* @__PURE__ */ jsx13("span", { className: "ui-dropdown__chevron", "aria-hidden": "true" })
+          chevron && /* @__PURE__ */ jsx14("span", { className: "ui-dropdown__chevron", "aria-hidden": "true" })
         ]
       }
     ),
-    /* @__PURE__ */ jsxs11(
+    /* @__PURE__ */ jsxs12(
       "div",
       {
         className: cx5(
@@ -1559,10 +1572,10 @@ function Dropdown({
         onMouseMove,
         children: [
           header,
-          sx ? /* @__PURE__ */ jsxs11(Fragment5, { children: [
-            /* @__PURE__ */ jsxs11("div", { className: "ui-dropdown__search", children: [
-              /* @__PURE__ */ jsx13(Glyph2, { name: "search", className: "ui-dropdown__search-ic", hidden: true }),
-              /* @__PURE__ */ jsx13(
+          sx ? /* @__PURE__ */ jsxs12(Fragment5, { children: [
+            /* @__PURE__ */ jsxs12("div", { className: "ui-dropdown__search", children: [
+              /* @__PURE__ */ jsx14(Glyph2, { name: "search", className: "ui-dropdown__search-ic", hidden: true }),
+              /* @__PURE__ */ jsx14(
                 "input",
                 {
                   className: "ui-dropdown__search-input",
@@ -1586,8 +1599,8 @@ function Dropdown({
                 }
               )
             ] }),
-            /* @__PURE__ */ jsx13("div", { className: "ui-dropdown__list", role: "listbox", id: listId, "aria-label": name, style: cap, children: body }),
-            /* @__PURE__ */ jsx13(
+            /* @__PURE__ */ jsx14("div", { className: "ui-dropdown__list", role: "listbox", id: listId, "aria-label": name, style: cap, children: body }),
+            /* @__PURE__ */ jsx14(
               "div",
               {
                 className: "ui-dropdown__none",
@@ -1612,7 +1625,7 @@ function strip(o) {
 }
 
 // src/BackLink.tsx
-import { jsx as jsx14, jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsx as jsx15, jsxs as jsxs13 } from "react/jsx-runtime";
 var BARE = "Back";
 var SCRIPTED = /^javascript:/i;
 var LEADING = /^[\u0000-\u0020]+/;
@@ -1631,7 +1644,7 @@ function BackLink({
   const name = text(label).replace(SAID, "");
   const bare = !name || name.toLowerCase() === BARE.toLowerCase();
   const Tag = as ?? "a";
-  return /* @__PURE__ */ jsxs12(
+  return /* @__PURE__ */ jsxs13(
     Tag,
     {
       className: ["ui-back", className].filter(Boolean).join(" "),
@@ -1639,8 +1652,8 @@ function BackLink({
       "aria-label": bare ? void 0 : `${BARE} to ${name}`,
       ...rest,
       children: [
-        /* @__PURE__ */ jsx14(Icon, { name: "chevronLeft" }),
-        /* @__PURE__ */ jsx14("span", { className: "ui-back__label", children: bare ? BARE : name })
+        /* @__PURE__ */ jsx15(Icon, { name: "chevronLeft" }),
+        /* @__PURE__ */ jsx15("span", { className: "ui-back__label", children: bare ? BARE : name })
       ]
     }
   );
@@ -1648,36 +1661,36 @@ function BackLink({
 
 // src/TableValues.tsx
 import { numericValue, deltaValue } from "@apliteni/apliteni-ui";
-import { jsx as jsx15, jsxs as jsxs13 } from "react/jsx-runtime";
+import { jsx as jsx16, jsxs as jsxs14 } from "react/jsx-runtime";
 function NumericValue(props) {
-  return /* @__PURE__ */ jsx15("span", { dangerouslySetInnerHTML: { __html: numericValue(props) } });
+  return /* @__PURE__ */ jsx16("span", { dangerouslySetInnerHTML: { __html: numericValue(props) } });
 }
 function DeltaValue(props) {
-  return /* @__PURE__ */ jsx15("span", { dangerouslySetInnerHTML: { __html: deltaValue(props) } });
+  return /* @__PURE__ */ jsx16("span", { dangerouslySetInnerHTML: { __html: deltaValue(props) } });
 }
 function RowIdentity({ symbol, name, logo, href }) {
   const Tag = href ? "a" : "span";
-  return /* @__PURE__ */ jsxs13(Tag, { className: "ui-identity", href, children: [
-    /* @__PURE__ */ jsxs13("span", { className: "ui-identity__logo", "aria-hidden": "true", children: [
-      /* @__PURE__ */ jsx15("span", { children: symbol.slice(0, 1) }),
-      logo && /* @__PURE__ */ jsx15("img", { src: logo, alt: "", onLoad: (e) => {
+  return /* @__PURE__ */ jsxs14(Tag, { className: "ui-identity", href, children: [
+    /* @__PURE__ */ jsxs14("span", { className: "ui-identity__logo", "aria-hidden": "true", children: [
+      /* @__PURE__ */ jsx16("span", { children: symbol.slice(0, 1) }),
+      logo && /* @__PURE__ */ jsx16("img", { src: logo, alt: "", onLoad: (e) => {
         e.currentTarget.hidden = false;
       }, onError: (e) => {
         e.currentTarget.hidden = true;
       } })
     ] }),
-    /* @__PURE__ */ jsx15("span", { className: "ui-identity__symbol", children: symbol }),
-    /* @__PURE__ */ jsx15("span", { className: "ui-identity__name", children: name })
+    /* @__PURE__ */ jsx16("span", { className: "ui-identity__symbol", children: symbol }),
+    /* @__PURE__ */ jsx16("span", { className: "ui-identity__name", children: name })
   ] });
 }
 
 // src/Segmented.tsx
 import { segmentedNextIndex } from "@apliteni/apliteni-ui";
-import { jsx as jsx16 } from "react/jsx-runtime";
+import { jsx as jsx17 } from "react/jsx-runtime";
 function Segmented({ options, value, onChange, label, appearance = "pill", disabled = false }) {
   const enabled = options.filter((o) => !o.disabled);
   const tabValue = enabled.some((o) => o.value === value) ? value : enabled[0]?.value;
-  return /* @__PURE__ */ jsx16("div", { className: `ui-seg${appearance === "underline" ? " ui-seg--underline" : ""}`, role: "toolbar", "aria-label": label, children: options.map((option) => /* @__PURE__ */ jsx16(
+  return /* @__PURE__ */ jsx17("div", { className: `ui-seg${appearance === "underline" ? " ui-seg--underline" : ""}`, role: "toolbar", "aria-label": label, children: options.map((option) => /* @__PURE__ */ jsx17(
     "button",
     {
       type: "button",
@@ -1704,7 +1717,7 @@ function Segmented({ options, value, onChange, label, appearance = "pill", disab
 // src/FilterBar.tsx
 import { useLayoutEffect as useLayoutEffect3, useRef as useRef9 } from "react";
 import { filterBar, initFilterBar } from "@apliteni/apliteni-ui";
-import { jsx as jsx17 } from "react/jsx-runtime";
+import { jsx as jsx18 } from "react/jsx-runtime";
 function FilterBar(props) {
   const host = useRef9(null);
   const latest = useRef9(props);
@@ -1733,36 +1746,36 @@ function FilterBar(props) {
   useLayoutEffect3(() => {
     controller.current?.update(props);
   }, [props.filters, props.label, props.clearLabel, props.disabled, props.busy]);
-  return /* @__PURE__ */ jsx17("div", { ref: host, dangerouslySetInnerHTML: initial.current });
+  return /* @__PURE__ */ jsx18("div", { ref: host, dangerouslySetInnerHTML: initial.current });
 }
 
 // src/KeyValueList.tsx
-import { jsx as jsx18, jsxs as jsxs14 } from "react/jsx-runtime";
+import { jsx as jsx19, jsxs as jsxs15 } from "react/jsx-runtime";
 function detail({ value, redacted }) {
-  if (redacted) return /* @__PURE__ */ jsxs14("span", { className: "ui-kv__hidden", children: [
-    /* @__PURE__ */ jsx18(Icon, { name: "eyeOff" }),
+  if (redacted) return /* @__PURE__ */ jsxs15("span", { className: "ui-kv__hidden", children: [
+    /* @__PURE__ */ jsx19(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__ */ jsx18("dl", { ...rest, className: ["ui-drawer__rows", "ui-kv", columns === 2 && "ui-kv--two-columns", className].filter(Boolean).join(" "), children: rows.map((row, index) => /* @__PURE__ */ jsxs14("div", { className: "ui-drawer__row", children: [
-    /* @__PURE__ */ jsx18("dt", { children: row.label }),
-    /* @__PURE__ */ jsx18("dd", { children: detail(row) })
+  return /* @__PURE__ */ jsx19("dl", { ...rest, className: ["ui-drawer__rows", "ui-kv", columns === 2 && "ui-kv--two-columns", className].filter(Boolean).join(" "), children: rows.map((row, index) => /* @__PURE__ */ jsxs15("div", { className: "ui-drawer__row", children: [
+    /* @__PURE__ */ jsx19("dt", { children: row.label }),
+    /* @__PURE__ */ jsx19("dd", { children: detail(row) })
   ] }, index)) });
 }
 function DrawerSection({ title, headingLevel = 3, className, children, ...rest }) {
   const Heading = `h${headingLevel}`;
-  return /* @__PURE__ */ jsxs14("section", { ...rest, className: ["ui-drawer__section", className].filter(Boolean).join(" "), children: [
-    title != null && /* @__PURE__ */ jsx18(Heading, { className: "ui-drawer__section-title", children: title }),
+  return /* @__PURE__ */ jsxs15("section", { ...rest, className: ["ui-drawer__section", className].filter(Boolean).join(" "), children: [
+    title != null && /* @__PURE__ */ jsx19(Heading, { className: "ui-drawer__section-title", children: title }),
     children
   ] });
 }
 
 // src/Snippet.tsx
 import { useEffect as useEffect5, useRef as useRef10, useState as useState6 } from "react";
-import { jsx as jsx19, jsxs as jsxs15 } from "react/jsx-runtime";
+import { jsx as jsx20, jsxs as jsxs16 } from "react/jsx-runtime";
 function Snippet({ label = "shell", code = "", reveal = false, copyLabel = "Copy" }) {
   const [status, setStatus] = useState6("idle");
   const request = useRef10(0);
@@ -1787,22 +1800,22 @@ function Snippet({ label = "shell", code = "", reveal = false, copyLabel = "Copy
       if (current === request.current) setStatus("failed");
     }
   }
-  return /* @__PURE__ */ jsxs15("div", { className: reveal ? "ui-snippet ui-snippet--reveal" : "ui-snippet", children: [
-    /* @__PURE__ */ jsxs15("div", { className: "ui-snippet__bar", children: [
-      /* @__PURE__ */ jsx19("span", { children: label }),
-      /* @__PURE__ */ jsxs15("button", { type: "button", className: "ui-snippet__copy", "aria-live": "polite", "aria-atomic": "true", onClick: copy, children: [
-        /* @__PURE__ */ jsx19(Icon, { name: status === "copied" ? "check" : "copy" }),
+  return /* @__PURE__ */ jsxs16("div", { className: reveal ? "ui-snippet ui-snippet--reveal" : "ui-snippet", children: [
+    /* @__PURE__ */ jsxs16("div", { className: "ui-snippet__bar", children: [
+      /* @__PURE__ */ jsx20("span", { children: label }),
+      /* @__PURE__ */ jsxs16("button", { type: "button", className: "ui-snippet__copy", "aria-live": "polite", "aria-atomic": "true", onClick: copy, children: [
+        /* @__PURE__ */ jsx20(Icon, { name: status === "copied" ? "check" : "copy" }),
         status === "copied" ? "Copied" : status === "failed" ? "Copy failed" : copyLabel
       ] })
     ] }),
-    /* @__PURE__ */ jsx19("pre", { children: code })
+    /* @__PURE__ */ jsx20("pre", { children: code })
   ] });
 }
 
 // src/Tabs.tsx
 import { useEffect as useEffect6, useId as useId7, useRef as useRef11 } from "react";
 import { playEntrance } from "@apliteni/apliteni-ui/motion";
-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";
 function Tabs({ items, value, onChange, label }) {
   const id = useId7();
   const previous = useRef11(value);
@@ -1812,8 +1825,8 @@ function Tabs({ items, value, onChange, label }) {
     if (previous.current !== value) playEntrance(activePanel.current);
     previous.current = value;
   }, [value]);
-  return /* @__PURE__ */ jsxs16("div", { className: "ui-tabs", children: [
-    /* @__PURE__ */ jsx20("div", { className: "ui-tabs__list", role: "tablist", "aria-label": label, children: items.map((item, i) => /* @__PURE__ */ jsxs16(
+  return /* @__PURE__ */ jsxs17("div", { className: "ui-tabs", children: [
+    /* @__PURE__ */ jsx21("div", { className: "ui-tabs__list", role: "tablist", "aria-label": label, children: items.map((item, i) => /* @__PURE__ */ jsxs17(
       "button",
       {
         type: "button",
@@ -1851,7 +1864,7 @@ function Tabs({ items, value, onChange, label }) {
         },
         children: [
           item.label,
-          item.count != null && /* @__PURE__ */ jsxs16(Fragment6, { children: [
+          item.count != null && /* @__PURE__ */ jsxs17(Fragment6, { children: [
             " ",
             item.count
           ] })
@@ -1859,7 +1872,7 @@ function Tabs({ items, value, onChange, label }) {
       },
       item.value
     )) }),
-    /* @__PURE__ */ jsx20("div", { className: "ui-tabs__panels", children: items.map((item, i) => /* @__PURE__ */ jsx20(
+    /* @__PURE__ */ jsx21("div", { className: "ui-tabs__panels", children: items.map((item, i) => /* @__PURE__ */ jsx21(
       "div",
       {
         className: "ui-tabs__panel",
@@ -1877,17 +1890,17 @@ function Tabs({ items, value, onChange, label }) {
 }
 
 // src/Timeline.tsx
-import { jsx as jsx21, jsxs as jsxs17 } from "react/jsx-runtime";
+import { jsx as jsx22, jsxs as jsxs18 } from "react/jsx-runtime";
 function Timeline({ events, className, ...rest }) {
-  return /* @__PURE__ */ jsx21("ol", { ...rest, role: "list", className: ["ui-timeline", className].filter(Boolean).join(" "), children: events.map((event) => /* @__PURE__ */ jsxs17("li", { className: "ui-timeline__event", children: [
-    /* @__PURE__ */ jsxs17("div", { className: "ui-timeline__head", children: [
-      /* @__PURE__ */ jsx21("span", { className: "ui-timeline__actor", children: event.actor }),
-      /* @__PURE__ */ jsx21("time", { dateTime: event.dateTime, children: event.timestamp })
+  return /* @__PURE__ */ jsx22("ol", { ...rest, role: "list", className: ["ui-timeline", className].filter(Boolean).join(" "), children: events.map((event) => /* @__PURE__ */ jsxs18("li", { className: "ui-timeline__event", children: [
+    /* @__PURE__ */ jsxs18("div", { className: "ui-timeline__head", children: [
+      /* @__PURE__ */ jsx22("span", { className: "ui-timeline__actor", children: event.actor }),
+      /* @__PURE__ */ jsx22("time", { dateTime: event.dateTime, children: event.timestamp })
     ] }),
-    /* @__PURE__ */ jsx21("p", { className: "ui-timeline__description", children: event.description }),
-    (event.meta != null || event.undo) && /* @__PURE__ */ jsxs17("div", { className: "ui-timeline__meta", children: [
-      event.meta != null && /* @__PURE__ */ jsx21("span", { children: event.meta }),
-      event.undo && /* @__PURE__ */ jsx21(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__ */ jsx22("p", { className: "ui-timeline__description", children: event.description }),
+    (event.meta != null || event.undo) && /* @__PURE__ */ jsxs18("div", { className: "ui-timeline__meta", children: [
+      event.meta != null && /* @__PURE__ */ jsx22("span", { children: event.meta }),
+      event.undo && /* @__PURE__ */ jsx22(Button, { variant: "ghost", size: "xs", className: "ui-btn ui-btn--ghost ui-btn--xs ui-timeline__undo", "aria-label": event.undo.label, onClick: event.undo.onUndo, children: "Undo" })
     ] })
   ] }, event.id)) });
 }
@@ -1895,15 +1908,15 @@ function Timeline({ events, className, ...rest }) {
 // src/Field.tsx
 import { useEffect as useEffect7, useId as useId8, useRef as useRef12, useState as useState7 } from "react";
 import { esc, icon as icon4 } 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 Frame({ id, label, hint, error, required, children }) {
-  return /* @__PURE__ */ jsxs18("div", { className: "ui-field", children: [
-    /* @__PURE__ */ jsxs18("label", { className: "ui-field__label", htmlFor: id, children: [
+  return /* @__PURE__ */ jsxs19("div", { className: "ui-field", children: [
+    /* @__PURE__ */ jsxs19("label", { className: "ui-field__label", htmlFor: id, children: [
       label,
-      required && /* @__PURE__ */ jsx22("span", { className: "ui-field__req", "aria-hidden": "true", children: "*" })
+      required && /* @__PURE__ */ jsx23("span", { className: "ui-field__req", "aria-hidden": "true", children: "*" })
     ] }),
     children,
-    (error || hint) && /* @__PURE__ */ jsx22(
+    (error || hint) && /* @__PURE__ */ jsx23(
       "div",
       {
         id: `${id}-message`,
@@ -1920,7 +1933,7 @@ function TextField({ label, hint, error, required, type = "text", unit, classNam
   const id = useId8();
   const hasUnit = type === "number" && !!unit;
   const describedBy = [error || hint ? `${id}-message` : "", hasUnit ? `${id}-unit` : ""].filter(Boolean).join(" ") || void 0;
-  const control = /* @__PURE__ */ jsx22(
+  const control = /* @__PURE__ */ jsx23(
     "input",
     {
       ...props,
@@ -1932,14 +1945,14 @@ function TextField({ label, hint, error, required, type = "text", unit, classNam
       className: `ui-input${error ? " is-invalid" : ""} ${className}`
     }
   );
-  return /* @__PURE__ */ jsx22(Frame, { ...{ id, label, hint, error, required }, children: hasUnit ? /* @__PURE__ */ jsxs18("div", { className: "ui-field-number", children: [
+  return /* @__PURE__ */ jsx23(Frame, { ...{ id, label, hint, error, required }, children: hasUnit ? /* @__PURE__ */ jsxs19("div", { className: "ui-field-number", children: [
     control,
-    /* @__PURE__ */ jsx22("span", { id: `${id}-unit`, className: "ui-field-number__unit", children: unit })
+    /* @__PURE__ */ jsx23("span", { id: `${id}-unit`, className: "ui-field-number__unit", children: unit })
   ] }) : control });
 }
 function TextArea({ label, hint, error, required, className = "", ...props }) {
   const id = useId8();
-  return /* @__PURE__ */ jsx22(Frame, { ...{ id, label, hint, error, required }, children: /* @__PURE__ */ jsx22(
+  return /* @__PURE__ */ jsx23(Frame, { ...{ id, label, hint, error, required }, children: /* @__PURE__ */ jsx23(
     "textarea",
     {
       rows: 4,
@@ -1952,7 +1965,7 @@ function TextArea({ label, hint, error, required, className = "", ...props }) {
 }
 function SelectField({ label, hint, error, required, className = "", children, ...props }) {
   const id = useId8();
-  return /* @__PURE__ */ jsx22(Frame, { ...{ id, label, hint, error, required }, children: /* @__PURE__ */ jsx22(
+  return /* @__PURE__ */ jsx23(Frame, { ...{ id, label, hint, error, required }, children: /* @__PURE__ */ jsx23(
     "select",
     {
       ...props,
@@ -1981,7 +1994,7 @@ function FileField({ label, hint, error, required, disabled, onFileChange, class
     setFile(next);
     onFileChange?.(next);
   };
-  return /* @__PURE__ */ jsx22(Frame, { ...{ id, label, hint, error, required }, children: /* @__PURE__ */ jsxs18(
+  return /* @__PURE__ */ jsx23(Frame, { ...{ id, label, hint, error, required }, children: /* @__PURE__ */ jsxs19(
     "div",
     {
       className: `ui-file${dragging && !disabled ? " is-dragging" : ""}${file ? " has-file" : ""}${error ? " is-invalid" : ""}${disabled ? " is-disabled" : ""}`,
@@ -2002,12 +2015,12 @@ function FileField({ label, hint, error, required, disabled, onFileChange, class
         update(transfer.files[0]);
       },
       children: [
-        /* @__PURE__ */ jsx22("span", { className: "ui-file__glyph", children: /* @__PURE__ */ jsx22(Icon, { name: "upload" }) }),
-        /* @__PURE__ */ jsx22("div", { "aria-live": "polite", children: file ? file.name : "Drop a file here" }),
-        /* @__PURE__ */ jsx22("div", { children: "or choose one from your device" }),
-        /* @__PURE__ */ jsxs18("span", { className: "ui-file__choose", children: [
-          /* @__PURE__ */ jsx22("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__ */ jsx22(
+        /* @__PURE__ */ jsx23("span", { className: "ui-file__glyph", children: /* @__PURE__ */ jsx23(Icon, { name: "upload" }) }),
+        /* @__PURE__ */ jsx23("div", { "aria-live": "polite", children: file ? file.name : "Drop a file here" }),
+        /* @__PURE__ */ jsx23("div", { children: "or choose one from your device" }),
+        /* @__PURE__ */ jsxs19("span", { className: "ui-file__choose", children: [
+          /* @__PURE__ */ jsx23("span", { className: "ui-btn ui-btn--secondary ui-btn--sm", "aria-hidden": "true", "aria-disabled": disabled || void 0, children: file ? "Replace file" : "Choose file" }),
+          /* @__PURE__ */ jsx23(
             "input",
             {
               ...props,
@@ -2029,7 +2042,7 @@ function FileField({ label, hint, error, required, disabled, onFileChange, class
 // src/Toast.tsx
 import { createContext as createContext2, useCallback as useCallback3, useContext as useContext2, useEffect as useEffect8, useRef as useRef13, useState as useState8 } from "react";
 import { createPortal as createPortal4 } from "react-dom";
-import { jsx as jsx23, jsxs as jsxs19 } from "react/jsx-runtime";
+import { jsx as jsx24, jsxs as jsxs20 } from "react/jsx-runtime";
 var Context = createContext2(null);
 var glyphs = { success: "circleCheck", danger: "circleX", warn: "circleAlert", info: "info", neutral: "bolt" };
 function useToast() {
@@ -2075,7 +2088,7 @@ function Notice({ notice, remove }) {
       remaining.current = Math.max(0, remaining.current - (Date.now() - started));
     };
   }, [dismiss, leaving2, notice.action, paused]);
-  return /* @__PURE__ */ jsxs19(
+  return /* @__PURE__ */ jsxs20(
     "div",
     {
       ref: root,
@@ -2089,12 +2102,12 @@ function Notice({ notice, remove }) {
         if (!event.currentTarget.contains(event.relatedTarget)) setFocused(false);
       },
       children: [
-        /* @__PURE__ */ jsx23("span", { className: "ui-toast__icon", children: /* @__PURE__ */ jsx23(Icon, { name: glyphs[tone] }) }),
-        /* @__PURE__ */ jsxs19("div", { className: "ui-toast__body", children: [
-          /* @__PURE__ */ jsx23("div", { className: "ui-toast__title", children: notice.title }),
-          notice.text && /* @__PURE__ */ jsx23("div", { className: "ui-toast__text", children: notice.text })
+        /* @__PURE__ */ jsx24("span", { className: "ui-toast__icon", children: /* @__PURE__ */ jsx24(Icon, { name: glyphs[tone] }) }),
+        /* @__PURE__ */ jsxs20("div", { className: "ui-toast__body", children: [
+          /* @__PURE__ */ jsx24("div", { className: "ui-toast__title", children: notice.title }),
+          notice.text && /* @__PURE__ */ jsx24("div", { className: "ui-toast__text", children: notice.text })
         ] }),
-        notice.action && /* @__PURE__ */ jsx23(
+        notice.action && /* @__PURE__ */ jsx24(
           "button",
           {
             type: "button",
@@ -2109,8 +2122,8 @@ function Notice({ notice, remove }) {
             children: notice.action.label
           }
         ),
-        /* @__PURE__ */ jsx23("button", { type: "button", className: "ui-toast__close", "aria-label": "Dismiss", disabled: leaving2, onClick: dismiss, children: /* @__PURE__ */ jsx23(Icon, { name: "x" }) }),
-        !notice.action && /* @__PURE__ */ jsx23(
+        /* @__PURE__ */ jsx24("button", { type: "button", className: "ui-toast__close", "aria-label": "Dismiss", disabled: leaving2, onClick: dismiss, children: /* @__PURE__ */ jsx24(Icon, { name: "x" }) }),
+        !notice.action && /* @__PURE__ */ jsx24(
           "span",
           {
             className: "ui-toast__timer is-running",
@@ -2130,10 +2143,10 @@ function Toast({ children }) {
     const remove = () => setEntries((current) => current.filter((entry) => entry.id !== id));
     setEntries((current) => [...current, { id, notice, remove }]);
   }, []);
-  return /* @__PURE__ */ jsxs19(Context.Provider, { value: push, children: [
+  return /* @__PURE__ */ jsxs20(Context.Provider, { value: push, children: [
     children,
     typeof document !== "undefined" && createPortal4(
-      /* @__PURE__ */ jsx23("div", { className: "ui-toast-stack rx-toast-stack", children: entries.map((entry) => /* @__PURE__ */ jsx23(Notice, { notice: entry.notice, remove: entry.remove }, entry.id)) }),
+      /* @__PURE__ */ jsx24("div", { className: "ui-toast-stack rx-toast-stack", children: entries.map((entry) => /* @__PURE__ */ jsx24(Notice, { notice: entry.notice, remove: entry.remove }, entry.id)) }),
       document.body
     )
   ] });
@@ -2147,6 +2160,7 @@ export {
   Badge,
   BusyRegion,
   Button,
+  Callout,
   Card,
   CommandPalette,
   Confirm,

package/src/components/index.js

@@ -218,8 +218,10 @@ export function switchToggle({ checked = false, disabled = false, name, label =
 }
 
 // ---- Callout / toast / success ------------------------------------------
-export function callout({ variant, icon: ic = 'info', body } = {}) {
-  return `<div class="${esc(cx('ui-callout', variant && `ui-callout--${variant}`))}"><span class="ui-callout__icon">${icon(ic)}</span><div>${body}</div></div>`;
+export const calloutIcons = { info: 'info', success: 'check', warn: 'alert', danger: 'alert', neutral: 'info' };
+
+export function callout({ variant, icon: ic = calloutIcons[variant] || 'info', body, actions } = {}) {
+  return `<div class="${esc(cx('ui-callout', variant && variant !== 'neutral' && `ui-callout--${variant}`))}"><span class="ui-callout__icon">${icon(ic)}</span><div class="ui-callout__body">${body}${actions != null ? `<div class="ui-toolbar ui-callout__actions">${actions}</div>` : ''}</div></div>`;
 }
 // Default icon per status — overridable with `icon`. The circle family is not
 // decoration: a circled glyph is a STATE the system reports, a bare one is an

package/src/styles/callout.css

@@ -12,6 +12,8 @@
   line-height: 1.55;
   color: var(--text);
 }
+.ui-callout__body { min-width: 0; overflow-wrap: break-word; }
+.ui-callout__actions { margin-top: 15px; }
 .ui-callout__icon { width: 18px; height: 18px; flex: none; margin-top: 1px; /* muted-ink: glyph — nonverbal callout icon */ color: var(--muted); }
 .ui-callout__icon svg { width: 100%; height: 100%; stroke: currentColor; fill: none; stroke-width: 2.1; } /* 2.1 of a 24 box drawn at 18px = 1.58 CSS px, which is what buys the 3:1 graphic bar rather than the 4.5:1 text one. docs/specification.md#icons-and-glyphs */
 .ui-callout b { color: var(--text); font-weight: var(--weight-semibold); }
@@ -21,6 +23,7 @@
 .ui-callout--info .ui-callout__icon { color: var(--chip-info-ink); } /* the chip inks, not the raw signals: in light the raw signal cleared the graphic bar by a tenth on its own wash and read as a smudge, and a stroke is read the way text is. The two are the same value in dark by construction, so only light moves. #206 */
 .ui-callout--success { --ring-gap: inherit; background: var(--glow-green); /* ring-gap: inherit — translucent wash retains the opaque containing gap. */ }
 .ui-callout--success .ui-callout__icon { color: var(--chip-success-ink); }
+.ui-callout--success a { /* muted-ink: state — opaque accent/text blend keeps links above 4.5:1 on the success wash. */ color: color-mix(in srgb, var(--accent) 95%, var(--text)); }
 .ui-callout--warn { --ring-gap: inherit; background: color-mix(in srgb, var(--amber) 13%, transparent); /* ring-gap: inherit — translucent wash retains the opaque containing gap. */ }
 .ui-callout--warn .ui-callout__icon { color: var(--chip-warn-ink); }
 .ui-callout--danger { --ring-gap: inherit; background: var(--glow-pink); /* ring-gap: inherit — translucent wash retains the opaque containing gap. */ }