@apliteni/apliteni-ui 0.44.0 → 0.46.0

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,33 +1787,33 @@ 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 useId6, useRef as useRef10 } from "react";
+import { useEffect as useEffect6, useId as useId7, useRef as useRef11 } from "react";
 import { playEntrance } from "@apliteni/apliteni-ui/motion";
-import { Fragment as Fragment5, jsx as jsx19, jsxs as jsxs15 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx20, jsxs as jsxs16 } from "react/jsx-runtime";
 function Tabs({ items, value, onChange, label }) {
-  const id = useId6();
-  const previous = useRef10(value);
-  const activePanel = useRef10(null);
-  const buttons = useRef10([]);
+  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__ */ jsxs15("div", { className: "ui-tabs", children: [
-    /* @__PURE__ */ jsx19("div", { className: "ui-tabs__list", role: "tablist", "aria-label": label, children: items.map((item, i) => /* @__PURE__ */ jsxs15(
+  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",
@@ -1800,7 +1851,7 @@ function Tabs({ items, value, onChange, label }) {
         },
         children: [
           item.label,
-          item.count != null && /* @__PURE__ */ jsxs15(Fragment5, { children: [
+          item.count != null && /* @__PURE__ */ jsxs16(Fragment6, { children: [
             " ",
             item.count
           ] })
@@ -1808,7 +1859,7 @@ function Tabs({ items, value, onChange, label }) {
       },
       item.value
     )) }),
-    /* @__PURE__ */ jsx19("div", { className: "ui-tabs__panels", children: items.map((item, i) => /* @__PURE__ */ jsx19(
+    /* @__PURE__ */ jsx20("div", { className: "ui-tabs__panels", children: items.map((item, i) => /* @__PURE__ */ jsx20(
       "div",
       {
         className: "ui-tabs__panel",
@@ -1825,6 +1876,22 @@ function Tabs({ items, value, onChange, label }) {
   ] });
 }
 
+// src/Timeline.tsx
+import { jsx as jsx21, jsxs as jsxs17 } 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 })
+    ] }),
+    /* @__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" })
+    ] })
+  ] }, event.id)) });
+}
+
 // src/index.ts
 var PAGE_SIZES = KIT_PAGE_SIZES;
 var DEFAULT_PAGE_SIZE3 = KIT_DEFAULT_PAGE_SIZE;
@@ -1835,6 +1902,7 @@ export {
   Button,
   Card,
   CommandPalette,
+  Confirm,
   DEFAULT_PAGE_SIZE3 as DEFAULT_PAGE_SIZE,
   DataTable,
   DeltaValue,
@@ -1856,5 +1924,6 @@ export {
   Snippet,
   StatBand,
   Tabs,
+  Timeline,
   sortTableRows
 };