@apliteni/apliteni-ui 0.43.1 → 0.45.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@apliteni/apliteni-ui",
-  "version": "0.43.1",
+  "version": "0.45.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`, `Drawer`, `CommandPalette`, `Dropdown`, `BackLink`, `Snippet`, `Button`, `Badge`, `Card`, `Icon`.
+Components: `DataTable`, `Pagination`, `StatBand`, `Modal`, `Confirm`, `Drawer`, `CommandPalette`, `Dropdown`, `BackLink`, `Snippet`, `Tabs`, `Button`, `Badge`, `Card`, `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,
@@ -332,3 +332,35 @@ import '@apliteni/apliteni-ui/react/css';
   ]} />
 </DrawerSection>
 ```
+
+## Tabs
+
+Tabs is controlled through `value` and `onChange`. Pass items with unique values, labels, optional counts, and React panel content. Provide a label for the tablist and a value that matches one item. Inactive panel content is unmounted.
+
+Arrow keys move between tabs and wrap from the last tab to the first. They also activate the selected tab. Home and End select the first and last tabs. Tab moves to the selected panel. New panels use the kit’s fade animation, which is shortened when reduced motion is enabled.
+
+## Confirm
+
+Use `Confirm` before an action that has a cost. Put the object name in `title`. In
+`body`, explain what will change and whether the change can be reversed. Give both
+buttons clear, specific labels. For an undoable action, use a toast with Undo instead.
+
+```tsx
+<Confirm open={open} title="Revoke demo token?"
+  body="This token will stop working immediately. You cannot restore it."
+  confirmLabel="Revoke token" cancelLabel="Keep the token" danger busy={saving}
+  onConfirm={revokeToken} onCancel={() => setOpen(false)} />
+```
+
+The consumer controls `open` and `busy`. `Confirm` does not wait for `onConfirm` or
+close itself. Set `busy` while saving. This keeps focus, prevents repeated presses, and
+announces progress. Without `danger`, the committing button uses the primary tone.
+
+Escape, the scrim, the close button, and the safe action call `onCancel`, even while
+busy. Closing the dialog does not cancel a write that has already started.
+
+`Confirm` uses Modal's focus trap, focus return, and reduced-motion transitions. When it
+opens, focus goes to the safe action. It renders an `alertdialog`, named by its title
+and described by its body. Modal also accepts
+`initialFocusRef` for a mounted, focusable element inside its panel. Without it, Modal
+uses its normal opening focus.

package/react/dist/index.d.ts

@@ -1,5 +1,5 @@
 import * as react from 'react';
-import { ReactNode, ButtonHTMLAttributes, MouseEvent, ElementType, ComponentPropsWithoutRef } from 'react';
+import { ReactNode, ButtonHTMLAttributes, RefObject, MouseEvent, ElementType, ComponentPropsWithoutRef } from 'react';
 
 declare function Icon({ name }: {
     name: string;
@@ -16,7 +16,17 @@ type ButtonProps = {
     busy?: boolean;
     children?: ReactNode;
 } & ButtonHTMLAttributes<HTMLButtonElement>;
-declare function Button({ variant, size, icon, iconRight, iconOnly, block, busy, children, type, disabled, onClick, onClickCapture, onKeyDown, onKeyDownCapture, onKeyUp, onKeyUpCapture, ...rest }: ButtonProps): react.JSX.Element;
+declare const Button: react.ForwardRefExoticComponent<{
+    variant?: "primary" | "secondary" | "ghost" | "danger";
+    size?: "xs" | "sm" | "md" | "lg";
+    icon?: string;
+    iconRight?: string;
+    iconOnly?: boolean;
+    block?: boolean;
+    /** In flight: keeps focus, blocks activation, announces progress, and shows dots. */
+    busy?: boolean;
+    children?: ReactNode;
+} & ButtonHTMLAttributes<HTMLButtonElement> & react.RefAttributes<HTMLButtonElement>>;
 
 declare function Badge({ variant, children }: {
     variant?: string;
@@ -55,14 +65,29 @@ interface StatBandProps {
 }
 declare function StatBand({ stats, variant, basis, label, id }: StatBandProps): react.JSX.Element;
 
+type ConfirmProps = {
+    open: boolean;
+    title: string;
+    body: ReactNode;
+    confirmLabel: string;
+    cancelLabel: string;
+    danger?: boolean;
+    busy?: boolean;
+    onConfirm: () => void;
+    onCancel: () => void;
+};
+declare function Confirm({ open, title, body, confirmLabel, cancelLabel, danger, busy, onConfirm, onCancel, }: ConfirmProps): react.JSX.Element;
+
 type ModalProps = {
     open: boolean;
     title: string;
     onClose: () => void;
     footer?: ReactNode;
     children?: ReactNode;
+    role?: 'dialog' | 'alertdialog';
+    initialFocusRef?: RefObject<HTMLElement | null>;
 };
-declare function Modal({ open, title, onClose, footer, children }: ModalProps): react.ReactPortal | null;
+declare function Modal({ open, title, onClose, footer, children, initialFocusRef, role }: ModalProps): react.ReactPortal | null;
 
 type DrawerProps = {
     open: boolean;
@@ -450,7 +475,21 @@ type SnippetProps = {
 };
 declare function Snippet({ label, code, reveal, copyLabel }: SnippetProps): react.JSX.Element;
 
+type TabItem = {
+    value: string;
+    label: string;
+    count?: number;
+    panel: ReactNode;
+};
+type TabsProps = {
+    items: TabItem[];
+    value: string;
+    onChange: (value: string) => void;
+    label: string;
+};
+declare function Tabs({ items, value, onChange, label }: TabsProps): 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, 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, 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, Skeleton, type SkeletonProps, SkeletonTable, type SkeletonTableProps, Snippet, type SnippetProps, StatBand, type StatBandProps, type StatDelta, type StatFigure, type StatTone, type StatVariant, type TableSort, sortTableRows };
+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, 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, 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, sortTableRows };

package/react/dist/index.js

@@ -15,7 +15,7 @@ function Icon({ name }) {
 }
 
 // src/primitives/Button.tsx
-import { useLayoutEffect, useRef } from "react";
+import { forwardRef, useImperativeHandle, useLayoutEffect, useRef } from "react";
 import { jsx as jsx2, jsxs } from "react/jsx-runtime";
 var announcers = /* @__PURE__ */ new WeakMap();
 function acquireAnnouncer(doc) {
@@ -48,7 +48,7 @@ function acquireAnnouncer(doc) {
   };
 }
 var cx = (...a) => a.filter(Boolean).join(" ");
-function Button({
+var Button = forwardRef(function Button2({
   variant = "secondary",
   size = "md",
   icon: icon4,
@@ -66,8 +66,9 @@ function Button({
   onKeyUp,
   onKeyUpCapture,
   ...rest
-}) {
+}, forwardedRef) {
   const buttonRef = useRef(null);
+  useImperativeHandle(forwardedRef, () => buttonRef.current, []);
   const labelRef = useRef(null);
   const announcer = useRef(null);
   const hasBeenBusy = useRef(false);
@@ -151,7 +152,7 @@ function Button({
       ]
     }
   );
-}
+});
 
 // src/primitives/Badge.tsx
 import { jsx as jsx3 } from "react/jsx-runtime";
@@ -216,8 +217,11 @@ function StatBand({ stats, variant = "tiles", basis, label, id }) {
   ] });
 }
 
+// src/Confirm.tsx
+import { useRef as useRef4 } from "react";
+
 // src/Modal.tsx
-import { useRef as useRef3 } from "react";
+import { useId as useId2, useRef as useRef3 } from "react";
 import { createPortal } from "react-dom";
 
 // src/dialog.ts
@@ -265,7 +269,7 @@ var stack = [];
 var leaving = /* @__PURE__ */ new Set();
 var marked = [];
 var listening = false;
-var firstIn = (entry) => (entry.body ? tabbablesIn(entry.body) : [])[0] || entry.panel;
+var firstIn = (entry) => (entry.initialFocus && entry.panel.contains(entry.initialFocus) ? entry.initialFocus : null) || (entry.body ? tabbablesIn(entry.body) : [])[0] || entry.panel;
 function trapTab(panel, e) {
   const items = tabbablesIn(panel);
   if (items.length === 0) {
@@ -301,7 +305,7 @@ function sync() {
   const top = stack[stack.length - 1];
   for (let node = top?.root; node?.parentElement && node !== document.body; node = node.parentElement) {
     for (const sib of Array.from(node.parentElement.children)) {
-      if (sib === node || leaving.has(sib)) continue;
+      if (sib === node || leaving.has(sib) || sib.matches('.ui-btn__status[role="status"]')) continue;
       marked.push([sib, sib.hasAttribute("inert")]);
       sib.setAttribute("inert", "");
     }
@@ -405,7 +409,7 @@ function usePresence(open, root, panel) {
   }, [open, present]);
   return { mounted: present, shown };
 }
-function useDialog(active, { root, panel, body }, onClose) {
+function useDialog(active, { root, panel, body, initialFocus }, onClose) {
   const parent = useContext(DialogScope);
   const [scope] = useState(() => ({ parent }));
   const close = useRef2(onClose);
@@ -419,6 +423,7 @@ function useDialog(active, { root, panel, body }, onClose) {
       root: root.current,
       panel: panel.current,
       body: body.current,
+      initialFocus: initialFocus?.current ?? null,
       close: () => close.current(),
       opener: document.activeElement,
       resume: null
@@ -431,30 +436,76 @@ function useDialog(active, { root, panel, body }, onClose) {
 
 // src/Modal.tsx
 import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
-function Modal({ open, title, onClose, footer, children }) {
+function Modal({ open, title, onClose, footer, children, initialFocusRef, role = "dialog" }) {
+  const id = useId2();
+  const titleId = `${id}-title`;
+  const bodyId = `${id}-body`;
   const root = useRef3(null);
   const panel = useRef3(null);
   const body = useRef3(null);
   const { mounted, shown } = usePresence(open, root, panel);
-  const scope = useDialog(shown, { root, panel, body }, onClose);
+  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("div", { className: "rx-modal", role: "dialog", "aria-modal": "true", "aria-label": title, tabIndex: -1, ref: panel, children: [
-      /* @__PURE__ */ jsxs4("div", { className: "rx-modal__head", children: [
-        /* @__PURE__ */ jsx6("div", { className: "rx-modal__title", children: title }),
-        /* @__PURE__ */ jsx6(Button, { variant: "ghost", size: "sm", iconOnly: true, icon: "x", "aria-label": "Close", onClick: onClose })
-      ] }),
-      /* @__PURE__ */ jsx6("div", { className: "rx-modal__body", ref: body, children }),
-      footer && /* @__PURE__ */ jsx6("div", { className: "rx-modal__foot", children: footer })
-    ] }) }) }),
+    /* @__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(
+      "div",
+      {
+        className: "rx-modal",
+        role,
+        "aria-modal": "true",
+        "aria-labelledby": titleId,
+        "aria-describedby": role === "alertdialog" ? bodyId : void 0,
+        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__ */ jsx6("div", { className: "rx-modal__body", id: bodyId, ref: body, children }),
+          footer && /* @__PURE__ */ jsx6("div", { className: "rx-modal__foot", children: footer })
+        ]
+      }
+    ) }) }),
     document.body
   );
 }
 
+// src/Confirm.tsx
+import { Fragment as Fragment2, jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
+function Confirm({
+  open,
+  title,
+  body,
+  confirmLabel,
+  cancelLabel,
+  danger = false,
+  busy = false,
+  onConfirm,
+  onCancel
+}) {
+  const safeAction = useRef4(null);
+  return /* @__PURE__ */ jsx7(
+    Modal,
+    {
+      open,
+      title,
+      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 })
+      ] }),
+      children: body
+    }
+  );
+}
+
 // src/Drawer.tsx
-import { useId as useId2, useRef as useRef4 } from "react";
+import { useId as useId3, useRef as useRef5 } from "react";
 import { createPortal as createPortal2 } from "react-dom";
-import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
 function Drawer({
   open,
   title,
@@ -465,18 +516,18 @@ function Drawer({
   children,
   closeLabel = "Close"
 }) {
-  const root = useRef4(null);
-  const panel = useRef4(null);
-  const body = useRef4(null);
-  const titleId = useId2();
+  const root = useRef5(null);
+  const panel = useRef5(null);
+  const body = useRef5(null);
+  const titleId = useId3();
   const { mounted, shown } = usePresence(open, root, panel);
   const scope = useDialog(shown, { root, panel, body }, onClose);
   if (!mounted) return null;
   const cls = ["ui-drawer", `ui-drawer--${side}`, `ui-drawer--${size}`, shown && "is-open"].filter(Boolean).join(" ");
   return createPortal2(
-    /* @__PURE__ */ jsx7(DialogScope.Provider, { value: scope, children: /* @__PURE__ */ jsxs5("div", { className: cls, ref: root, children: [
-      /* @__PURE__ */ jsx7("div", { className: "ui-drawer__scrim", onMouseDown: dismissOnScrim(onClose) }),
-      /* @__PURE__ */ jsxs5(
+    /* @__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(
         "aside",
         {
           className: "ui-drawer__panel",
@@ -486,12 +537,12 @@ function Drawer({
           tabIndex: -1,
           ref: panel,
           children: [
-            /* @__PURE__ */ jsxs5("header", { className: "ui-drawer__header", children: [
-              /* @__PURE__ */ jsx7("h2", { className: "ui-drawer__title", id: titleId, children: title }),
-              /* @__PURE__ */ jsx7("button", { type: "button", className: "ui-drawer__close", "aria-label": closeLabel, onClick: onClose, children: /* @__PURE__ */ jsx7(Icon, { name: "x" }) })
+            /* @__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__ */ jsx7("div", { className: "ui-drawer__body", ref: body, children }),
-            footer && /* @__PURE__ */ jsx7("footer", { className: "ui-drawer__footer", children: footer })
+            /* @__PURE__ */ jsx8("div", { className: "ui-drawer__body", ref: body, children }),
+            footer && /* @__PURE__ */ jsx8("footer", { className: "ui-drawer__footer", children: footer })
           ]
         }
       )
@@ -501,12 +552,12 @@ function Drawer({
 }
 
 // src/CommandPalette.tsx
-import { useCallback, useEffect as useEffect2, useId as useId3, useMemo, useRef as useRef5, useState as useState2 } from "react";
+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 jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
 var cx2 = (...a) => a.filter(Boolean).join(" ");
-var Glyph = ({ name, className }) => /* @__PURE__ */ jsx8("span", { className, "aria-hidden": "true", dangerouslySetInnerHTML: { __html: icon2(name) } });
+var Glyph = ({ name, className }) => /* @__PURE__ */ jsx9("span", { className, "aria-hidden": "true", dangerouslySetInnerHTML: { __html: icon2(name) } });
 var keysOf = (shortcut) => shortcut == null ? [] : Array.isArray(shortcut) ? shortcut : [shortcut];
 function CommandPalette({
   open,
@@ -521,10 +572,10 @@ function CommandPalette({
   rank = true,
   onQueryChange
 }) {
-  const uid = useId3().replace(/:/g, "");
-  const root = useRef5(null);
-  const panel = useRef5(null);
-  const search = useRef5(null);
+  const uid = useId4().replace(/:/g, "");
+  const root = useRef6(null);
+  const panel = useRef6(null);
+  const search = useRef6(null);
   const [query, setQuery] = useState2("");
   const [at, setAt] = useState2(0);
   useEffect2(() => {
@@ -571,9 +622,9 @@ function CommandPalette({
   const listId = `${uid}-list`;
   let n = 0;
   return createPortal3(
-    /* @__PURE__ */ jsx8(DialogScope.Provider, { value: scope, children: /* @__PURE__ */ jsxs6("div", { className: cx2("ui-cmdk", density === "roomy" && "ui-cmdk--roomy", "is-open"), ref: root, children: [
-      /* @__PURE__ */ jsx8("div", { className: "ui-cmdk__scrim", onMouseDown: dismissOnScrim(onClose) }),
-      /* @__PURE__ */ jsxs6(
+    /* @__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(
         "div",
         {
           className: "ui-cmdk__panel",
@@ -584,9 +635,9 @@ function CommandPalette({
           ref: panel,
           onKeyDown,
           children: [
-            /* @__PURE__ */ jsxs6("div", { className: "ui-cmdk__search", ref: search, children: [
-              /* @__PURE__ */ jsx8(Glyph, { name: "search", className: "ui-cmdk__search-ic" }),
-              /* @__PURE__ */ jsx8(
+            /* @__PURE__ */ jsxs7("div", { className: "ui-cmdk__search", ref: search, children: [
+              /* @__PURE__ */ jsx9(Glyph, { name: "search", className: "ui-cmdk__search-ic" }),
+              /* @__PURE__ */ jsx9(
                 "input",
                 {
                   className: "ui-cmdk__input",
@@ -608,19 +659,19 @@ function CommandPalette({
                 }
               )
             ] }),
-            /* @__PURE__ */ jsx8("div", { className: "ui-cmdk__list", id: listId, role: "listbox", "aria-label": `${label} results`, children: shown.map((group, gi) => /* @__PURE__ */ jsxs6(
+            /* @__PURE__ */ jsx9("div", { className: "ui-cmdk__list", id: listId, role: "listbox", "aria-label": `${label} results`, children: shown.map((group, gi) => /* @__PURE__ */ jsxs7(
               "div",
               {
                 className: "ui-cmdk__group",
                 role: "group",
                 "aria-labelledby": group.label ? `${uid}-g${gi}` : void 0,
                 children: [
-                  group.label && /* @__PURE__ */ jsx8("div", { className: "ui-cmdk__group-head", id: `${uid}-g${gi}`, children: group.label }),
+                  group.label && /* @__PURE__ */ jsx9("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__ */ jsxs6(
+                    return /* @__PURE__ */ jsxs7(
                       "div",
                       {
                         id,
@@ -640,13 +691,13 @@ function CommandPalette({
                         },
                         onClick: (e) => run(item, e.metaKey || e.ctrlKey),
                         children: [
-                          item.icon && /* @__PURE__ */ jsx8(Glyph, { name: item.icon, className: "ui-cmdk__ic" }),
-                          /* @__PURE__ */ jsxs6("span", { className: "ui-cmdk__main", children: [
-                            /* @__PURE__ */ jsx8("span", { className: "ui-cmdk__label", children: item.label }),
-                            item.description && /* @__PURE__ */ jsx8("span", { className: "ui-cmdk__desc", children: item.description })
+                          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.badge && /* @__PURE__ */ jsx8("span", { className: "ui-cmdk__badge", children: item.badge }),
-                          keysOf(item.shortcut).length > 0 && /* @__PURE__ */ jsx8("span", { className: "ui-cmdk__keys", "aria-hidden": "true", children: keysOf(item.shortcut).map((k) => /* @__PURE__ */ jsx8("kbd", { className: "ui-cmdk__key", children: k }, k)) })
+                          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.id
@@ -656,20 +707,20 @@ function CommandPalette({
               },
               group.label ?? `g${gi}`
             )) }),
-            /* @__PURE__ */ jsx8("p", { className: "ui-cmdk__empty", hidden: countOf(shown) > 0, children: empty }),
-            /* @__PURE__ */ jsx8("p", { className: "ui-sr", role: "status", "aria-live": "polite", children: countOf(shown) === 0 ? "No results" : `${countOf(shown)} result${countOf(shown) === 1 ? "" : "s"}` }),
-            hint && /* @__PURE__ */ jsxs6("div", { className: "ui-cmdk__foot", "aria-hidden": "true", children: [
-              /* @__PURE__ */ jsxs6("span", { children: [
-                /* @__PURE__ */ jsx8("kbd", { className: "ui-cmdk__key", children: "\u2191" }),
-                /* @__PURE__ */ jsx8("kbd", { className: "ui-cmdk__key", children: "\u2193" }),
+            /* @__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" }),
                 " move"
               ] }),
-              /* @__PURE__ */ jsxs6("span", { children: [
-                /* @__PURE__ */ jsx8("kbd", { className: "ui-cmdk__key", children: "\u21B5" }),
+              /* @__PURE__ */ jsxs7("span", { children: [
+                /* @__PURE__ */ jsx9("kbd", { className: "ui-cmdk__key", children: "\u21B5" }),
                 " run"
               ] }),
-              /* @__PURE__ */ jsxs6("span", { children: [
-                /* @__PURE__ */ jsx8("kbd", { className: "ui-cmdk__key", children: "esc" }),
+              /* @__PURE__ */ jsxs7("span", { children: [
+                /* @__PURE__ */ jsx9("kbd", { className: "ui-cmdk__key", children: "esc" }),
                 " close"
               ] })
             ] })
@@ -698,9 +749,9 @@ import { useMemo as useMemo2, useState as useState4 } from "react";
 import { DEFAULT_PAGE_SIZE as DEFAULT_PAGE_SIZE2 } from "@apliteni/apliteni-ui";
 
 // src/Pagination.tsx
-import { useEffect as useEffect3, useId as useId4, useRef as useRef6, useState as useState3 } from "react";
+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 jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx10, jsxs as jsxs8 } 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(" ");
@@ -742,11 +793,11 @@ function Pagination({
   onPageChange,
   onPageSizeChange
 }) {
-  const auto = useId4();
+  const auto = useId5();
   const [draft, setDraft] = useState3("");
   const [drafting, setDrafting] = useState3(false);
-  const nav = useRef6(null);
-  const pressed = useRef6(null);
+  const nav = useRef7(null);
+  const pressed = useRef7(null);
   const uid = id ?? auto;
   const kind = VARIANTS.includes(variant) ? variant : "steps";
   const size = sizeOf(pageSize, DEFAULT_PAGE_SIZE);
@@ -792,7 +843,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__ */ jsx9(
+    /* @__PURE__ */ jsx10(
       "button",
       {
         type: "button",
@@ -831,14 +882,14 @@ function Pagination({
   if (single) {
     steps = null;
   } else if (!counted) {
-    steps = /* @__PURE__ */ jsxs7("div", { className: "ui-pager__steps", children: [
+    steps = /* @__PURE__ */ jsxs8("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__ */ jsx9("span", { className: "ui-pager__gap", "aria-hidden": "true", children: "\u2026" }, `gap${i}`) : /* @__PURE__ */ jsx9(
+      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(
         "button",
         {
           type: "button",
@@ -853,9 +904,9 @@ function Pagination({
         n
       ));
     } else if (kind === "jump") {
-      middle = /* @__PURE__ */ jsxs7("span", { className: "ui-pager__jump", children: [
-        /* @__PURE__ */ jsx9("label", { htmlFor: `${uid}-jump`, children: "Page" }),
-        /* @__PURE__ */ jsx9(
+      middle = /* @__PURE__ */ jsxs8("span", { className: "ui-pager__jump", children: [
+        /* @__PURE__ */ jsx10("label", { htmlFor: `${uid}-jump`, children: "Page" }),
+        /* @__PURE__ */ jsx10(
           "input",
           {
             className: "ui-input ui-pager__jump-input",
@@ -878,13 +929,13 @@ function Pagination({
             }
           }
         ),
-        /* @__PURE__ */ jsxs7("span", { className: "ui-pager__jump-of", children: [
+        /* @__PURE__ */ jsxs8("span", { className: "ui-pager__jump-of", children: [
           "of ",
           fmt(last)
         ] })
       ] });
     }
-    steps = /* @__PURE__ */ jsxs7("div", { className: "ui-pager__steps", children: [
+    steps = /* @__PURE__ */ jsxs8("div", { className: "ui-pager__steps", children: [
       ends ? step("First", 1, atStart) : null,
       step("Prev", Math.max(1, at - 1), atStart),
       middle,
@@ -892,7 +943,7 @@ function Pagination({
       ends ? step("Last", last, atEnd) : null
     ] });
   }
-  return /* @__PURE__ */ jsxs7(
+  return /* @__PURE__ */ jsxs8(
     "nav",
     {
       ref: nav,
@@ -900,10 +951,10 @@ function Pagination({
       "aria-label": label,
       "aria-busy": loading ? true : void 0,
       children: [
-        /* @__PURE__ */ jsx9("p", { className: "ui-pager__status", "aria-live": "polite", "aria-atomic": "true", children: status }),
-        sizes.length ? /* @__PURE__ */ jsxs7("div", { className: "ui-pager__size", children: [
-          /* @__PURE__ */ jsx9("label", { className: "ui-pager__size-label", htmlFor: `${uid}-size`, children: "Rows" }),
-          /* @__PURE__ */ jsx9(
+        /* @__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(
             "select",
             {
               className: "ui-select ui-pager__size-select",
@@ -911,7 +962,7 @@ function Pagination({
               disabled: loading,
               value: size,
               onChange: (e) => onPageSizeChange?.(Number(e.target.value)),
-              children: sizes.map((s) => /* @__PURE__ */ jsx9("option", { value: s, children: fmt(s) }, s))
+              children: sizes.map((s) => /* @__PURE__ */ jsx10("option", { value: s, children: fmt(s) }, s))
             }
           )
         ] }) : null,
@@ -922,7 +973,7 @@ function Pagination({
 }
 
 // src/DataTable.tsx
-import { Fragment as Fragment2, jsx as jsx10, jsxs as jsxs8 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx11, jsxs as jsxs9 } from "react/jsx-runtime";
 var NO_SORT = { key: void 0, dir: -1 };
 function sortTableRows(rows, sort) {
   if (sort.key === void 0) return [...rows];
@@ -989,7 +1040,7 @@ function DataTable({
     onSortChange?.(next);
     toFirstPage();
   };
-  const caret = (k) => /* @__PURE__ */ jsx10(
+  const caret = (k) => /* @__PURE__ */ jsx11(
     "svg",
     {
       className: "rx-caret",
@@ -1001,29 +1052,29 @@ function DataTable({
       strokeLinejoin: "round",
       "aria-hidden": "true",
       focusable: "false",
-      children: sort.key === k ? /* @__PURE__ */ jsx10("path", { d: "m8 10 4 4 4-4" }) : /* @__PURE__ */ jsxs8(Fragment2, { children: [
-        /* @__PURE__ */ jsx10("path", { d: "m8 9 4-4 4 4" }),
-        /* @__PURE__ */ jsx10("path", { d: "m8 15 4 4 4-4" })
+      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" })
       ] })
     }
   );
   const pageAllOn = selectable && slice.length > 0 && slice.every((r) => selected.has(r.name));
-  return /* @__PURE__ */ jsxs8(Fragment2, { children: [
-    /* @__PURE__ */ jsx10(
+  return /* @__PURE__ */ jsxs9(Fragment3, { children: [
+    /* @__PURE__ */ jsx11(
       "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__ */ jsxs8(
+        children: /* @__PURE__ */ jsxs9(
           "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__ */ jsx10("thead", { children: /* @__PURE__ */ jsxs8("tr", { children: [
-                selectable ? /* @__PURE__ */ jsx10("th", { scope: "col", className: "ui-table__selection", children: /* @__PURE__ */ jsx10(
+              /* @__PURE__ */ jsx11("thead", { children: /* @__PURE__ */ jsxs9("tr", { children: [
+                selectable ? /* @__PURE__ */ jsx11("th", { scope: "col", className: "ui-table__selection", children: /* @__PURE__ */ jsx11(
                   "input",
                   {
                     type: "checkbox",
@@ -1036,13 +1087,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__ */ jsx10(
+                  /* @__PURE__ */ jsx11(
                     "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__ */ jsxs8("button", { type: "button", className: "rx-sort", onClick: () => onSort(c.key), children: [
+                      children: c.sortable ? /* @__PURE__ */ jsxs9("button", { type: "button", className: "rx-sort", onClick: () => onSort(c.key), children: [
                         c.label,
                         caret(c.key)
                       ] }) : c.label
@@ -1051,10 +1102,10 @@ function DataTable({
                   )
                 ))
               ] }) }),
-              /* @__PURE__ */ jsxs8("tbody", { children: [
-                !slice.length && /* @__PURE__ */ jsx10("tr", { children: /* @__PURE__ */ jsx10("td", { colSpan: columns.length + (selectable ? 1 : 0), children: loading ? "Loading rows\u2026" : empty }) }),
-                slice.map((r) => /* @__PURE__ */ jsxs8("tr", { children: [
-                  selectable ? /* @__PURE__ */ jsx10("td", { className: "ui-table__selection", children: /* @__PURE__ */ jsx10(
+              /* @__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(
                     "input",
                     {
                       type: "checkbox",
@@ -1063,7 +1114,7 @@ function DataTable({
                       onChange: () => onToggle(r.name)
                     }
                   ) }) : null,
-                  columns.map((c, columnIndex) => /* @__PURE__ */ jsx10("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__ */ 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))
                 ] }, r.name))
               ] })
             ]
@@ -1071,7 +1122,7 @@ function DataTable({
         )
       }
     ),
-    pager ? /* @__PURE__ */ jsx10(
+    pager ? /* @__PURE__ */ jsx11(
       Pagination,
       {
         page,
@@ -1096,7 +1147,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 jsx11, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx12, jsxs as jsxs10 } 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;
@@ -1106,19 +1157,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__ */ jsx11("div", { className: cx4("ui-skel", className), "aria-hidden": "true", children: Array.from({ length: n }, (_, i) => /* @__PURE__ */ jsx11("span", { className: "ui-skel__bar m-skeleton", style: styleFor(i) }, i)) });
+  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)) });
 }
 function SkeletonTable({ rows = 5, cols = 4, head = true }) {
-  const cells = Array.from({ length: Math.max(1, cols) }, (_, i) => /* @__PURE__ */ jsx11("span", { className: "ui-skel__bar m-skeleton" }, i));
-  return /* @__PURE__ */ jsxs9(
+  const cells = Array.from({ length: Math.max(1, cols) }, (_, i) => /* @__PURE__ */ jsx12("span", { className: "ui-skel__bar m-skeleton" }, i));
+  return /* @__PURE__ */ jsxs10(
     "div",
     {
       className: "ui-skel ui-skel--table",
       style: { "--skel-cols": Math.max(1, cols) },
       "aria-hidden": "true",
       children: [
-        head && /* @__PURE__ */ jsx11("div", { className: "ui-skel__row ui-skel__row--head", children: cells }),
-        Array.from({ length: Math.max(1, rows) }, (_, i) => /* @__PURE__ */ jsx11("div", { className: "ui-skel__row", children: cells }, i))
+        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))
       ]
     }
   );
@@ -1131,7 +1182,7 @@ function BusyRegion({
   className,
   children
 }) {
-  return /* @__PURE__ */ jsxs9(
+  return /* @__PURE__ */ jsxs10(
     "div",
     {
       className: cx4("ui-busy", className),
@@ -1139,8 +1190,8 @@ function BusyRegion({
       "aria-live": "polite",
       "aria-busy": busy,
       children: [
-        /* @__PURE__ */ jsx11("span", { className: "ui-sr", children: busy ? label : message }),
-        /* @__PURE__ */ jsx11("div", { className: "ui-busy__body", children: busy ? placeholder ?? /* @__PURE__ */ jsx11(Skeleton, { lines: 3 }) : 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 })
       ]
     }
   );
@@ -1153,32 +1204,32 @@ function Denied({
   className,
   children
 }) {
-  return /* @__PURE__ */ jsxs9("div", { className: cx4("ui-denied", className), children: [
-    /* @__PURE__ */ jsx11("div", { className: "ui-denied__seal", children: /* @__PURE__ */ jsx11(Icon, { name: icon4 }) }),
-    /* @__PURE__ */ jsx11("div", { className: "ui-denied__title", children: title }),
-    sub && /* @__PURE__ */ jsx11("div", { className: "ui-denied__sub", children: sub }),
-    need && /* @__PURE__ */ jsxs9("div", { className: "ui-denied__need", children: [
+  return /* @__PURE__ */ jsxs10("div", { className: cx4("ui-denied", className), children: [
+    /* @__PURE__ */ jsx12("div", { className: "ui-denied__seal", children: /* @__PURE__ */ jsx12(Icon, { name: icon4 }) }),
+    /* @__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: [
       "Needs ",
-      /* @__PURE__ */ jsx11("code", { className: "ui-code", children: need })
+      /* @__PURE__ */ jsx12("code", { className: "ui-code", children: need })
     ] }),
-    children && /* @__PURE__ */ jsx11("div", { className: "ui-denied__actions", children })
+    children && /* @__PURE__ */ jsx12("div", { className: "ui-denied__actions", children })
   ] });
 }
 
 // src/Dropdown.tsx
 import {
-  Fragment as Fragment3,
+  Fragment as Fragment4,
   useCallback as useCallback2,
   useEffect as useEffect4,
-  useId as useId5,
-  useRef as useRef7,
+  useId as useId6,
+  useRef as useRef8,
   useState as useState5
 } from "react";
 import { icon as icon3, dropdownMatch, dropdownFiltering } from "@apliteni/apliteni-ui";
-import { Fragment as Fragment4, jsx as jsx12, jsxs as jsxs10 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx13, jsxs as jsxs11 } 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__ */ jsx12(
+var Glyph2 = ({ name, className, hidden }) => /* @__PURE__ */ jsx13(
   "span",
   {
     className,
@@ -1191,7 +1242,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__ */ jsx12("span", { className: `ui-dropdown__badge is-${tone}`, children: text2 });
+  return /* @__PURE__ */ jsx13("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);
@@ -1232,19 +1283,19 @@ function Dropdown({
   const [pick, setPick] = useState5(null);
   const [query, setQuery] = useState5(() => search && search !== true ? search.query || "" : "");
   const [activeKey, setActiveKey] = useState5(null);
-  const root = useRef7(null);
-  const panel = useRef7(null);
-  const trigger = useRef7(null);
-  const field = useRef7(null);
-  const landOn = useRef7(null);
-  const at = useRef7("");
-  const auto = useId5().replace(/:/g, "");
+  const root = useRef8(null);
+  const panel = useRef8(null);
+  const trigger = useRef8(null);
+  const field = useRef8(null);
+  const landOn = useRef8(null);
+  const at = useRef8("");
+  const auto = useId6().replace(/:/g, "");
   const uid = id ?? auto;
   const setOpen = useCallback2((next) => {
     if (openProp === void 0) setSelfOpen(next);
     onOpenChange?.(next);
   }, [openProp, onOpenChange]);
-  const close = useRef7(setOpen);
+  const close = useRef8(setOpen);
   useIsoLayoutEffect(() => {
     close.current = setOpen;
   });
@@ -1406,7 +1457,7 @@ function Dropdown({
   };
   function renderRow(entry, key) {
     if (!isRow(entry)) {
-      return /* @__PURE__ */ jsx12("div", { className: "ui-dropdown__sep", role: "separator", hidden: filtering || void 0 }, key);
+      return /* @__PURE__ */ jsx13("div", { className: "ui-dropdown__sep", role: "separator", hidden: filtering || void 0 }, key);
     }
     const disabled = !!entry.disabled;
     const selected = selectedOf(entry);
@@ -1428,23 +1479,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__ */ jsxs10(Fragment4, { children: [
-        entry.icon && /* @__PURE__ */ jsx12(Glyph2, { name: entry.icon, className: "ui-dropdown__ic" }),
-        /* @__PURE__ */ jsxs10("span", { className: "ui-dropdown__main", children: [
-          /* @__PURE__ */ jsx12("span", { className: "ui-dropdown__label", children: entry.label }),
-          entry.description && /* @__PURE__ */ jsx12("span", { className: "ui-dropdown__desc", children: entry.description })
+      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 })
         ] }),
-        entry.badge ? /* @__PURE__ */ jsx12(RowBadge, { badge: entry.badge }) : null,
-        asOption && /* @__PURE__ */ jsx12(Glyph2, { name: "check", className: "ui-dropdown__tick", hidden: true })
+        entry.badge ? /* @__PURE__ */ jsx13(RowBadge, { badge: entry.badge }) : null,
+        asOption && /* @__PURE__ */ jsx13(Glyph2, { name: "check", className: "ui-dropdown__tick", hidden: true })
       ] })
     };
-    if (row) return /* @__PURE__ */ jsx12(Fragment3, { children: row(entry, props) }, key);
+    if (row) return /* @__PURE__ */ jsx13(Fragment4, { children: row(entry, props) }, key);
     const Tag = asLink ? "a" : "div";
-    return /* @__PURE__ */ jsx12(Tag, { ...props }, key);
+    return /* @__PURE__ */ jsx13(Tag, { ...props }, key);
   }
   const body = sections?.length ? sections.map((section, si) => {
     const gone = filtering && !(section.items || []).some((it) => isRow(it) && !hiddenBy(it));
-    return /* @__PURE__ */ jsxs10(
+    return /* @__PURE__ */ jsxs11(
       "div",
       {
         className: "ui-dropdown__section",
@@ -1452,7 +1503,7 @@ function Dropdown({
         "aria-label": section.label || void 0,
         hidden: gone || void 0,
         children: [
-          section.label && /* @__PURE__ */ jsx12("div", { className: "ui-dropdown__group", role: "presentation", children: section.label }),
+          section.label && /* @__PURE__ */ jsx13("div", { className: "ui-dropdown__group", role: "presentation", children: section.label }),
           (section.items || []).map((entry, i) => renderRow(entry, `s${si}-${i}`))
         ]
       },
@@ -1460,12 +1511,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__ */ jsxs10(Fragment4, { children: [
-    /* @__PURE__ */ jsx12("span", { className: "ui-dropdown__none-title", children: sx.empty.replace("{q}", () => query.trim()) }),
-    /* @__PURE__ */ jsx12("span", { className: "ui-dropdown__none-hint", children: sx.hint })
+  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 })
   ] }) : null;
-  return /* @__PURE__ */ jsxs10("div", { className: cx5("ui-dropdown", open && "open"), id, ref: root, onKeyDown, children: [
-    /* @__PURE__ */ jsxs10(
+  return /* @__PURE__ */ jsxs11("div", { className: cx5("ui-dropdown", open && "open"), id, ref: root, onKeyDown, children: [
+    /* @__PURE__ */ jsxs11(
       "button",
       {
         type: "button",
@@ -1480,15 +1531,15 @@ function Dropdown({
           setOpen(!open);
         },
         children: [
-          triggerContent != null ? triggerContent : /* @__PURE__ */ jsxs10(Fragment4, { children: [
-            label && /* @__PURE__ */ jsx12("span", { className: "ui-dropdown__pre", children: label }),
-            /* @__PURE__ */ jsx12("span", { className: "ui-dropdown__value", children: shown != null ? shown : placeholder })
+          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 })
           ] }),
-          chevron && /* @__PURE__ */ jsx12("span", { className: "ui-dropdown__chevron", "aria-hidden": "true" })
+          chevron && /* @__PURE__ */ jsx13("span", { className: "ui-dropdown__chevron", "aria-hidden": "true" })
         ]
       }
     ),
-    /* @__PURE__ */ jsxs10(
+    /* @__PURE__ */ jsxs11(
       "div",
       {
         className: cx5(
@@ -1508,10 +1559,10 @@ function Dropdown({
         onMouseMove,
         children: [
           header,
-          sx ? /* @__PURE__ */ jsxs10(Fragment4, { children: [
-            /* @__PURE__ */ jsxs10("div", { className: "ui-dropdown__search", children: [
-              /* @__PURE__ */ jsx12(Glyph2, { name: "search", className: "ui-dropdown__search-ic", hidden: true }),
-              /* @__PURE__ */ jsx12(
+          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(
                 "input",
                 {
                   className: "ui-dropdown__search-input",
@@ -1535,8 +1586,8 @@ function Dropdown({
                 }
               )
             ] }),
-            /* @__PURE__ */ jsx12("div", { className: "ui-dropdown__list", role: "listbox", id: listId, "aria-label": name, style: cap, children: body }),
-            /* @__PURE__ */ jsx12(
+            /* @__PURE__ */ jsx13("div", { className: "ui-dropdown__list", role: "listbox", id: listId, "aria-label": name, style: cap, children: body }),
+            /* @__PURE__ */ jsx13(
               "div",
               {
                 className: "ui-dropdown__none",
@@ -1561,7 +1612,7 @@ function strip(o) {
 }
 
 // src/BackLink.tsx
-import { jsx as jsx13, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx14, jsxs as jsxs12 } from "react/jsx-runtime";
 var BARE = "Back";
 var SCRIPTED = /^javascript:/i;
 var LEADING = /^[\u0000-\u0020]+/;
@@ -1580,7 +1631,7 @@ function BackLink({
   const name = text(label).replace(SAID, "");
   const bare = !name || name.toLowerCase() === BARE.toLowerCase();
   const Tag = as ?? "a";
-  return /* @__PURE__ */ jsxs11(
+  return /* @__PURE__ */ jsxs12(
     Tag,
     {
       className: ["ui-back", className].filter(Boolean).join(" "),
@@ -1588,8 +1639,8 @@ function BackLink({
       "aria-label": bare ? void 0 : `${BARE} to ${name}`,
       ...rest,
       children: [
-        /* @__PURE__ */ jsx13(Icon, { name: "chevronLeft" }),
-        /* @__PURE__ */ jsx13("span", { className: "ui-back__label", children: bare ? BARE : name })
+        /* @__PURE__ */ jsx14(Icon, { name: "chevronLeft" }),
+        /* @__PURE__ */ jsx14("span", { className: "ui-back__label", children: bare ? BARE : name })
       ]
     }
   );
@@ -1597,36 +1648,36 @@ function BackLink({
 
 // src/TableValues.tsx
 import { numericValue, deltaValue } from "@apliteni/apliteni-ui";
-import { jsx as jsx14, jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsx as jsx15, jsxs as jsxs13 } from "react/jsx-runtime";
 function NumericValue(props) {
-  return /* @__PURE__ */ jsx14("span", { dangerouslySetInnerHTML: { __html: numericValue(props) } });
+  return /* @__PURE__ */ jsx15("span", { dangerouslySetInnerHTML: { __html: numericValue(props) } });
 }
 function DeltaValue(props) {
-  return /* @__PURE__ */ jsx14("span", { dangerouslySetInnerHTML: { __html: deltaValue(props) } });
+  return /* @__PURE__ */ jsx15("span", { dangerouslySetInnerHTML: { __html: deltaValue(props) } });
 }
 function RowIdentity({ symbol, name, logo, href }) {
   const Tag = href ? "a" : "span";
-  return /* @__PURE__ */ jsxs12(Tag, { className: "ui-identity", href, children: [
-    /* @__PURE__ */ jsxs12("span", { className: "ui-identity__logo", "aria-hidden": "true", children: [
-      /* @__PURE__ */ jsx14("span", { children: symbol.slice(0, 1) }),
-      logo && /* @__PURE__ */ jsx14("img", { src: logo, alt: "", onLoad: (e) => {
+  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) => {
         e.currentTarget.hidden = false;
       }, onError: (e) => {
         e.currentTarget.hidden = true;
       } })
     ] }),
-    /* @__PURE__ */ jsx14("span", { className: "ui-identity__symbol", children: symbol }),
-    /* @__PURE__ */ jsx14("span", { className: "ui-identity__name", children: name })
+    /* @__PURE__ */ jsx15("span", { className: "ui-identity__symbol", children: symbol }),
+    /* @__PURE__ */ jsx15("span", { className: "ui-identity__name", children: name })
   ] });
 }
 
 // src/Segmented.tsx
 import { segmentedNextIndex } from "@apliteni/apliteni-ui";
-import { jsx as jsx15 } from "react/jsx-runtime";
+import { jsx as jsx16 } 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__ */ jsx15("div", { className: `ui-seg${appearance === "underline" ? " ui-seg--underline" : ""}`, role: "toolbar", "aria-label": label, children: options.map((option) => /* @__PURE__ */ jsx15(
+  return /* @__PURE__ */ jsx16("div", { className: `ui-seg${appearance === "underline" ? " ui-seg--underline" : ""}`, role: "toolbar", "aria-label": label, children: options.map((option) => /* @__PURE__ */ jsx16(
     "button",
     {
       type: "button",
@@ -1651,15 +1702,15 @@ function Segmented({ options, value, onChange, label, appearance = "pill", disab
 }
 
 // src/FilterBar.tsx
-import { useLayoutEffect as useLayoutEffect3, useRef as useRef8 } from "react";
+import { useLayoutEffect as useLayoutEffect3, useRef as useRef9 } from "react";
 import { filterBar, initFilterBar } from "@apliteni/apliteni-ui";
-import { jsx as jsx16 } from "react/jsx-runtime";
+import { jsx as jsx17 } from "react/jsx-runtime";
 function FilterBar(props) {
-  const host = useRef8(null);
-  const latest = useRef8(props);
+  const host = useRef9(null);
+  const latest = useRef9(props);
   latest.current = props;
-  const controller = useRef8(null);
-  const initial = useRef8({ __html: filterBar(props) });
+  const controller = useRef9(null);
+  const initial = useRef9({ __html: filterBar(props) });
   useLayoutEffect3(() => {
     const el = host.current;
     controller.current = initFilterBar(el, latest.current);
@@ -1682,40 +1733,40 @@ function FilterBar(props) {
   useLayoutEffect3(() => {
     controller.current?.update(props);
   }, [props.filters, props.label, props.clearLabel, props.disabled, props.busy]);
-  return /* @__PURE__ */ jsx16("div", { ref: host, dangerouslySetInnerHTML: initial.current });
+  return /* @__PURE__ */ jsx17("div", { ref: host, dangerouslySetInnerHTML: initial.current });
 }
 
 // src/KeyValueList.tsx
-import { jsx as jsx17, jsxs as jsxs13 } from "react/jsx-runtime";
+import { jsx as jsx18, jsxs as jsxs14 } from "react/jsx-runtime";
 function detail({ value, redacted }) {
-  if (redacted) return /* @__PURE__ */ jsxs13("span", { className: "ui-kv__hidden", children: [
-    /* @__PURE__ */ jsx17(Icon, { name: "eyeOff" }),
+  if (redacted) return /* @__PURE__ */ jsxs14("span", { className: "ui-kv__hidden", children: [
+    /* @__PURE__ */ jsx18(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__ */ jsx17("dl", { ...rest, className: ["ui-drawer__rows", "ui-kv", columns === 2 && "ui-kv--two-columns", className].filter(Boolean).join(" "), children: rows.map((row, index) => /* @__PURE__ */ jsxs13("div", { className: "ui-drawer__row", children: [
-    /* @__PURE__ */ jsx17("dt", { children: row.label }),
-    /* @__PURE__ */ jsx17("dd", { children: detail(row) })
+  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) })
   ] }, index)) });
 }
 function DrawerSection({ title, headingLevel = 3, className, children, ...rest }) {
   const Heading = `h${headingLevel}`;
-  return /* @__PURE__ */ jsxs13("section", { ...rest, className: ["ui-drawer__section", className].filter(Boolean).join(" "), children: [
-    title != null && /* @__PURE__ */ jsx17(Heading, { className: "ui-drawer__section-title", children: title }),
+  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 }),
     children
   ] });
 }
 
 // src/Snippet.tsx
-import { useEffect as useEffect5, useRef as useRef9, useState as useState6 } from "react";
-import { jsx as jsx18, jsxs as jsxs14 } from "react/jsx-runtime";
+import { useEffect as useEffect5, useRef as useRef10, useState as useState6 } from "react";
+import { jsx as jsx19, jsxs as jsxs15 } from "react/jsx-runtime";
 function Snippet({ label = "shell", code = "", reveal = false, copyLabel = "Copy" }) {
   const [status, setStatus] = useState6("idle");
-  const request = useRef9(0);
-  const timer = useRef9(void 0);
+  const request = useRef10(0);
+  const timer = useRef10(void 0);
   useEffect5(() => {
     setStatus("idle");
     return () => {
@@ -1736,15 +1787,92 @@ function Snippet({ label = "shell", code = "", reveal = false, copyLabel = "Copy
       if (current === request.current) setStatus("failed");
     }
   }
-  return /* @__PURE__ */ jsxs14("div", { className: reveal ? "ui-snippet ui-snippet--reveal" : "ui-snippet", children: [
-    /* @__PURE__ */ jsxs14("div", { className: "ui-snippet__bar", children: [
-      /* @__PURE__ */ jsx18("span", { children: label }),
-      /* @__PURE__ */ jsxs14("button", { type: "button", className: "ui-snippet__copy", "aria-live": "polite", "aria-atomic": "true", onClick: copy, children: [
-        /* @__PURE__ */ jsx18(Icon, { name: status === "copied" ? "check" : "copy" }),
+  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" }),
         status === "copied" ? "Copied" : status === "failed" ? "Copy failed" : copyLabel
       ] })
     ] }),
-    /* @__PURE__ */ jsx18("pre", { children: code })
+    /* @__PURE__ */ jsx19("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";
+function Tabs({ items, value, onChange, label }) {
+  const id = useId7();
+  const previous = useRef11(value);
+  const activePanel = useRef11(null);
+  const buttons = useRef11([]);
+  useEffect6(() => {
+    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(
+      "button",
+      {
+        type: "button",
+        role: "tab",
+        ref: (el) => {
+          buttons.current[i] = el;
+        },
+        className: `ui-tabs__tab${item.value === value ? " is-active" : ""}`,
+        id: `${id}-tab-${i}`,
+        "aria-controls": `${id}-panel-${i}`,
+        "aria-selected": item.value === value,
+        tabIndex: item.value === value ? 0 : -1,
+        onClick: () => onChange(item.value),
+        onKeyDown: (event) => {
+          let next;
+          switch (event.key) {
+            case "ArrowRight":
+              next = (i + 1) % items.length;
+              break;
+            case "ArrowLeft":
+              next = (i - 1 + items.length) % items.length;
+              break;
+            case "Home":
+              next = 0;
+              break;
+            case "End":
+              next = items.length - 1;
+              break;
+            default:
+              return;
+          }
+          event.preventDefault();
+          buttons.current[next]?.focus();
+          onChange(items[next].value);
+        },
+        children: [
+          item.label,
+          item.count != null && /* @__PURE__ */ jsxs16(Fragment6, { children: [
+            " ",
+            item.count
+          ] })
+        ]
+      },
+      item.value
+    )) }),
+    /* @__PURE__ */ jsx20("div", { className: "ui-tabs__panels", children: items.map((item, i) => /* @__PURE__ */ jsx20(
+      "div",
+      {
+        className: "ui-tabs__panel",
+        role: "tabpanel",
+        ref: item.value === value ? activePanel : void 0,
+        id: `${id}-panel-${i}`,
+        "aria-labelledby": `${id}-tab-${i}`,
+        tabIndex: 0,
+        hidden: item.value !== value,
+        children: item.value === value ? item.panel : null
+      },
+      item.value
+    )) })
   ] });
 }
 
@@ -1758,6 +1886,7 @@ export {
   Button,
   Card,
   CommandPalette,
+  Confirm,
   DEFAULT_PAGE_SIZE3 as DEFAULT_PAGE_SIZE,
   DataTable,
   DeltaValue,
@@ -1778,5 +1907,6 @@ export {
   SkeletonTable,
   Snippet,
   StatBand,
+  Tabs,
   sortTableRows
 };

package/src/styles/button.css

@@ -65,7 +65,7 @@
 }
 
 .ui-btn--danger { color: var(--text); }
-.ui-btn--danger:hover {
+.ui-btn--danger:hover, .ui-btn--danger:focus-visible {
   color: var(--pink);
   border-color: var(--pink);
   background: color-mix(in srgb, var(--pink) 10%, transparent); /* ring-gap: inherit — control paint; its focus indicator uses the containing surface. */