@apliteni/apliteni-ui 0.27.0 → 0.31.0

package/react/dist/index.js

@@ -20,7 +20,7 @@ var cx = (...a) => a.filter(Boolean).join(" ");
 function Button({
   variant = "secondary",
   size = "md",
-  icon: icon2,
+  icon: icon3,
   iconRight,
   iconOnly,
   block,
@@ -38,7 +38,7 @@ function Button({
     iconOnly && "ui-btn--icon"
   );
   const labelled = rest["aria-label"] != null || rest["aria-labelledby"] != null;
-  const fallback = typeof children === "string" && children.trim() ? children.trim() : icon2;
+  const fallback = typeof children === "string" && children.trim() ? children.trim() : icon3;
   const named = iconOnly && !labelled && fallback ? { "aria-label": fallback, title: rest.title ?? fallback } : {};
   return /* @__PURE__ */ jsxs(
     "button",
@@ -51,7 +51,7 @@ function Button({
       ...rest,
       ...named,
       children: [
-        icon2 && /* @__PURE__ */ jsx2(Icon, { name: icon2 }),
+        icon3 && /* @__PURE__ */ jsx2(Icon, { name: icon3 }),
         !iconOnly && children != null && /* @__PURE__ */ jsx2("span", { children }),
         iconRight && /* @__PURE__ */ jsx2(Icon, { name: iconRight }),
         busy && /* @__PURE__ */ jsxs("span", { className: "ui-btn__bars", children: [
@@ -72,18 +72,30 @@ function Badge({ variant = "neutral", children }) {
 
 // src/primitives/Card.tsx
 import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
-function Card({ title, sub, children }) {
+function Card({ title, sub, level = 2, children }) {
+  const n = Number(level);
+  const Heading = `h${[2, 3, 4, 5, 6].includes(n) ? n : 2}`;
+  const titled = title != null && title !== false && title !== "";
   return /* @__PURE__ */ jsxs2("div", { className: "ui-card", children: [
-    title != null && /* @__PURE__ */ jsx4("div", { className: "ui-card__title", children: title }),
+    titled && /* @__PURE__ */ jsx4(Heading, { className: "ui-card__title", children: title }),
     sub != null && /* @__PURE__ */ jsx4("div", { className: "ui-card__sub", children: sub }),
     children
   ] });
 }
 
 // src/Modal.tsx
-import { useEffect, useRef } from "react";
+import { useRef as useRef2 } from "react";
 import { createPortal } from "react-dom";
-import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
+
+// src/dialog.ts
+import {
+  createContext,
+  useContext,
+  useEffect,
+  useLayoutEffect,
+  useRef,
+  useState
+} from "react";
 var FOCUSABLE = 'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"]), details > summary:first-of-type';
 function tabbable(el) {
   const tabindex = el.getAttribute("tabindex");
@@ -103,83 +115,462 @@ var dismissOnScrim = (onClose) => (e) => {
   e.preventDefault();
   onClose();
 };
-function Modal({ open, title, onClose, footer, children }) {
-  const panel = useRef(null);
-  useEffect(() => {
-    if (!open) return;
-    const onKey = (e) => {
-      if (e.key === "Escape") {
-        onClose();
-        return;
-      }
-      if (e.key !== "Tab" || !panel.current) return;
-      const items = tabbablesIn(panel.current);
-      if (items.length === 0) {
-        e.preventDefault();
-        panel.current.focus();
-        return;
-      }
-      const first = items[0];
-      const last = items[items.length - 1];
-      const active = document.activeElement;
-      if (!panel.current.contains(active)) {
-        e.preventDefault();
-        first.focus();
-        return;
-      }
-      if (!e.shiftKey && active === last) {
-        e.preventDefault();
-        first.focus();
-      } else if (e.shiftKey && (active === first || active === panel.current)) {
-        e.preventDefault();
-        last.focus();
-      }
+var useIsoLayoutEffect = typeof document === "undefined" ? useEffect : useLayoutEffect;
+function transitionMs(el) {
+  const cs = getComputedStyle(el);
+  const times = (list) => list.split(",").map((t) => {
+    const n = Number.parseFloat(t);
+    if (!Number.isFinite(n)) return 0;
+    return t.trim().endsWith("ms") ? n : n * 1e3;
+  });
+  const durations = times(cs.transitionDuration);
+  const delays = times(cs.transitionDelay);
+  return Math.max(0, ...durations.map((d, i) => d + delays[i % delays.length]));
+}
+var DialogScope = createContext(null);
+var stack = [];
+var leaving = /* @__PURE__ */ new Set();
+var marked = [];
+var listening = false;
+var firstIn = (entry) => (entry.body ? tabbablesIn(entry.body) : [])[0] || entry.panel;
+function trapTab(panel, e) {
+  const items = tabbablesIn(panel);
+  if (items.length === 0) {
+    e.preventDefault();
+    panel.focus();
+    return;
+  }
+  const first = items[0];
+  const last = items[items.length - 1];
+  const focused = document.activeElement;
+  if (!panel.contains(focused)) {
+    e.preventDefault();
+    first.focus();
+    return;
+  }
+  if (!e.shiftKey && focused === last) {
+    e.preventDefault();
+    first.focus();
+  } else if (e.shiftKey && (focused === first || focused === panel)) {
+    e.preventDefault();
+    last.focus();
+  }
+}
+function onKey(e) {
+  const top = stack[stack.length - 1];
+  if (!top) return;
+  if (e.key === "Escape") top.close();
+  else if (e.key === "Tab") trapTab(top.panel, e);
+}
+function sync() {
+  for (const [el, was] of marked) if (!was) el.removeAttribute("inert");
+  marked = [];
+  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;
+      marked.push([sib, sib.hasAttribute("inert")]);
+      sib.setAttribute("inert", "");
+    }
+  }
+  leaving.forEach((el) => {
+    el.toggleAttribute("inert", true);
+    if (el.getAttribute("aria-hidden") !== "true") el.setAttribute("aria-hidden", "true");
+  });
+  if (Boolean(top) !== listening) {
+    listening = Boolean(top);
+    if (listening) document.addEventListener("keydown", onKey);
+    else document.removeEventListener("keydown", onKey);
+  }
+}
+function returnFocus(opener) {
+  const live = opener && !opener.isConnected && opener.id ? document.getElementById(opener.id) : opener;
+  if (live?.isConnected) live.focus?.();
+  if (document.activeElement !== live) document.activeElement?.blur?.();
+}
+function enter(entry) {
+  const at = stack.findIndex((e) => {
+    for (let s = e.scope.parent; s; s = s.parent) if (s === entry.scope) return true;
+    return false;
+  });
+  if (at !== -1) {
+    entry.opener = stack[at].opener;
+    stack[at].opener = null;
+    stack.splice(at, 0, entry);
+    sync();
+    return;
+  }
+  const covered = stack[stack.length - 1];
+  if (covered?.panel.contains(document.activeElement)) covered.resume = document.activeElement;
+  stack.push(entry);
+  sync();
+  firstIn(entry).focus();
+}
+function exit(entry) {
+  const at = stack.indexOf(entry);
+  if (at === -1) return;
+  stack.splice(at, 1);
+  const above = stack[at];
+  if (above && (!above.opener || entry.root.contains(above.opener))) above.opener = entry.opener;
+  sync();
+  if (above) return;
+  const next = stack[stack.length - 1];
+  if (!next) {
+    returnFocus(entry.opener);
+    return;
+  }
+  const back = [entry.opener, next.resume].find((el) => el?.isConnected && next.panel.contains(el));
+  (back ?? firstIn(next)).focus();
+}
+var EXIT_SLACK_MS = 50;
+function usePresence(open, root, panel) {
+  const [present, setPresent] = useState(open);
+  const [entered, setEntered] = useState(false);
+  if (open && !present) setPresent(true);
+  const shown = open && entered;
+  useIsoLayoutEffect(() => {
+    if (!open || entered || !panel.current) return;
+    panel.current.getBoundingClientRect();
+    setEntered(true);
+  }, [open, entered]);
+  useIsoLayoutEffect(() => {
+    const el = root.current;
+    if (open || !present || !el) return;
+    leaving.add(el);
+    sync();
+    return () => {
+      leaving.delete(el);
+      el.removeAttribute("inert");
+      el.removeAttribute("aria-hidden");
+      sync();
     };
-    document.addEventListener("keydown", onKey);
-    return () => document.removeEventListener("keydown", onKey);
-  }, [open, onClose]);
-  useEffect(() => {
-    if (!open) return;
-    const opener = document.activeElement;
-    const portalRoot = panel.current?.closest(".rx-scrim");
-    const muted = Array.from(document.body.children).filter((el) => el !== portalRoot && !el.hasAttribute("inert"));
-    muted.forEach((el) => el.setAttribute("inert", ""));
+  }, [open, present]);
+  useIsoLayoutEffect(() => {
+    if (open || !present) return;
+    let done = false;
+    const finish = () => {
+      if (done) return;
+      done = true;
+      setPresent(false);
+      setEntered(false);
+    };
+    const el = panel.current;
+    if (!el) {
+      finish();
+      return;
+    }
+    const onEnd = (e) => {
+      if (e.target === el) finish();
+    };
+    el.addEventListener("transitionend", onEnd);
+    const timer = setTimeout(finish, transitionMs(el) + EXIT_SLACK_MS);
     return () => {
-      muted.forEach((el) => el.removeAttribute("inert"));
-      if (opener && document.contains(opener)) opener.focus();
+      done = true;
+      el.removeEventListener("transitionend", onEnd);
+      clearTimeout(timer);
     };
-  }, [open]);
+  }, [open, present]);
+  return { mounted: present, shown };
+}
+function useDialog(active, { root, panel, body }, onClose) {
+  const parent = useContext(DialogScope);
+  const [scope] = useState(() => ({ parent }));
+  const close = useRef(onClose);
+  useIsoLayoutEffect(() => {
+    close.current = onClose;
+  });
   useEffect(() => {
-    if (!open) return;
-    const body = panel.current?.querySelector(".rx-modal__body");
-    const target = (body ? tabbablesIn(body) : [])[0] || panel.current;
-    target?.focus();
-  }, [open]);
-  if (!open) return null;
+    if (!active || !root.current || !panel.current) return;
+    const entry = {
+      scope,
+      root: root.current,
+      panel: panel.current,
+      body: body.current,
+      close: () => close.current(),
+      opener: document.activeElement,
+      resume: null
+    };
+    enter(entry);
+    return () => exit(entry);
+  }, [active]);
+  return scope;
+}
+
+// src/Modal.tsx
+import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
+function Modal({ open, title, onClose, footer, children }) {
+  const root = useRef2(null);
+  const panel = useRef2(null);
+  const body = useRef2(null);
+  const { mounted, shown } = usePresence(open, root, panel);
+  const scope = useDialog(shown, { root, panel, body }, onClose);
+  if (!mounted) return null;
   return createPortal(
-    /* @__PURE__ */ jsx5("div", { className: "rx-scrim", onMouseDown: dismissOnScrim(onClose), children: /* @__PURE__ */ jsxs3("div", { className: "rx-modal", role: "dialog", "aria-modal": "true", "aria-label": title, tabIndex: -1, ref: panel, children: [
+    /* @__PURE__ */ jsx5(DialogScope.Provider, { value: scope, children: /* @__PURE__ */ jsx5("div", { className: shown ? "rx-scrim is-open" : "rx-scrim", ref: root, onMouseDown: dismissOnScrim(onClose), children: /* @__PURE__ */ jsxs3("div", { className: "rx-modal", role: "dialog", "aria-modal": "true", "aria-label": title, tabIndex: -1, ref: panel, children: [
       /* @__PURE__ */ jsxs3("div", { className: "rx-modal__head", children: [
         /* @__PURE__ */ jsx5("div", { className: "rx-modal__title", children: title }),
         /* @__PURE__ */ jsx5(Button, { variant: "ghost", size: "sm", iconOnly: true, icon: "x", "aria-label": "Close", onClick: onClose })
       ] }),
-      /* @__PURE__ */ jsx5("div", { className: "rx-modal__body", children }),
+      /* @__PURE__ */ jsx5("div", { className: "rx-modal__body", ref: body, children }),
       footer && /* @__PURE__ */ jsx5("div", { className: "rx-modal__foot", children: footer })
+    ] }) }) }),
+    document.body
+  );
+}
+
+// src/Drawer.tsx
+import { useId, useRef as useRef3 } from "react";
+import { createPortal as createPortal2 } from "react-dom";
+import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
+function Drawer({
+  open,
+  title,
+  onClose,
+  side = "right",
+  size = "md",
+  footer,
+  children,
+  closeLabel = "Close"
+}) {
+  const root = useRef3(null);
+  const panel = useRef3(null);
+  const body = useRef3(null);
+  const titleId = useId();
+  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__ */ jsx6(DialogScope.Provider, { value: scope, children: /* @__PURE__ */ jsxs4("div", { className: cls, ref: root, children: [
+      /* @__PURE__ */ jsx6("div", { className: "ui-drawer__scrim", onMouseDown: dismissOnScrim(onClose) }),
+      /* @__PURE__ */ jsxs4(
+        "aside",
+        {
+          className: "ui-drawer__panel",
+          role: "dialog",
+          "aria-modal": "true",
+          "aria-labelledby": titleId,
+          tabIndex: -1,
+          ref: panel,
+          children: [
+            /* @__PURE__ */ jsxs4("header", { className: "ui-drawer__header", children: [
+              /* @__PURE__ */ jsx6("h2", { className: "ui-drawer__title", id: titleId, children: title }),
+              /* @__PURE__ */ jsx6("button", { type: "button", className: "ui-drawer__close", "aria-label": closeLabel, onClick: onClose, children: /* @__PURE__ */ jsx6(Icon, { name: "x" }) })
+            ] }),
+            /* @__PURE__ */ jsx6("div", { className: "ui-drawer__body", ref: body, children }),
+            footer && /* @__PURE__ */ jsx6("footer", { className: "ui-drawer__footer", children: footer })
+          ]
+        }
+      )
+    ] }) }),
+    document.body
+  );
+}
+
+// src/CommandPalette.tsx
+import { useCallback, useEffect as useEffect2, useId as useId2, useMemo, useRef as useRef4, useState as useState2 } from "react";
+import { createPortal as createPortal3 } from "react-dom";
+import { rankGroups, icon as icon2 } from "@apliteni/apliteni-ui";
+import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
+var cx2 = (...a) => a.filter(Boolean).join(" ");
+var Glyph = ({ name, className }) => /* @__PURE__ */ jsx7("span", { className, "aria-hidden": "true", dangerouslySetInnerHTML: { __html: icon2(name) } });
+var keysOf = (shortcut) => shortcut == null ? [] : Array.isArray(shortcut) ? shortcut : [shortcut];
+function CommandPalette({
+  open,
+  onClose,
+  groups,
+  onSelect,
+  label = "Command palette",
+  placeholder = "Search or run a command\u2026",
+  empty = "No matches",
+  density = "compact",
+  hint = true,
+  rank = true,
+  onQueryChange
+}) {
+  const uid = useId2().replace(/:/g, "");
+  const root = useRef4(null);
+  const panel = useRef4(null);
+  const search = useRef4(null);
+  const [query, setQuery] = useState2("");
+  const [at, setAt] = useState2(0);
+  useEffect2(() => {
+    if (open) {
+      setQuery("");
+      setAt(0);
+    }
+  }, [open]);
+  const shown = useMemo(
+    () => (rank ? rankGroups(groups, query) : groups).filter((g) => g.items.length),
+    [groups, query, rank]
+  );
+  const rows = useMemo(() => shown.flatMap((g) => g.items).filter((it) => !isDisabled(it)), [shown]);
+  const active = rows[Math.min(at, rows.length - 1)];
+  useEffect2(() => {
+    setAt(0);
+  }, [query]);
+  const scope = useDialog(open, { root, panel, body: search }, onClose);
+  const run = useCallback((item, newTab) => {
+    if (isDisabled(item)) return;
+    onSelect?.(item, { newTab });
+    if (item.danger && item.onConfirm) {
+      item.onConfirm();
+      return;
+    }
+    onClose();
+    if (!item.href) return;
+    if (newTab) window.open(item.href, "_blank", "noopener");
+    else window.location.href = item.href;
+  }, [onClose, onSelect]);
+  const onKeyDown = (e) => {
+    if (e.key === "ArrowDown" || e.key === "ArrowUp") {
+      if (!rows.length) return;
+      e.preventDefault();
+      const step = e.key === "ArrowDown" ? 1 : -1;
+      setAt((was) => (was + step + rows.length) % rows.length);
+    } else if (e.key === "Enter") {
+      if (!active) return;
+      e.preventDefault();
+      run(active, e.metaKey || e.ctrlKey);
+    }
+  };
+  if (!open) return null;
+  const listId = `${uid}-list`;
+  let n = 0;
+  return createPortal3(
+    /* @__PURE__ */ jsx7(DialogScope.Provider, { value: scope, children: /* @__PURE__ */ jsxs5("div", { className: cx2("ui-cmdk", density === "roomy" && "ui-cmdk--roomy", "is-open"), ref: root, children: [
+      /* @__PURE__ */ jsx7("div", { className: "ui-cmdk__scrim", onMouseDown: dismissOnScrim(onClose) }),
+      /* @__PURE__ */ jsxs5(
+        "div",
+        {
+          className: "ui-cmdk__panel",
+          role: "dialog",
+          "aria-modal": "true",
+          "aria-label": label,
+          tabIndex: -1,
+          ref: panel,
+          onKeyDown,
+          children: [
+            /* @__PURE__ */ jsxs5("div", { className: "ui-cmdk__search", ref: search, children: [
+              /* @__PURE__ */ jsx7(Glyph, { name: "search", className: "ui-cmdk__search-ic" }),
+              /* @__PURE__ */ jsx7(
+                "input",
+                {
+                  className: "ui-cmdk__input",
+                  type: "text",
+                  role: "combobox",
+                  "aria-autocomplete": "list",
+                  "aria-expanded": true,
+                  "aria-controls": listId,
+                  "aria-label": label,
+                  "aria-activedescendant": active ? rowId(uid, shown, active) : void 0,
+                  placeholder,
+                  value: query,
+                  autoComplete: "off",
+                  spellCheck: false,
+                  onChange: (e) => {
+                    setQuery(e.target.value);
+                    onQueryChange?.(e.target.value);
+                  }
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsx7("div", { className: "ui-cmdk__list", id: listId, role: "listbox", "aria-label": `${label} results`, children: shown.map((group, gi) => /* @__PURE__ */ jsxs5(
+              "div",
+              {
+                className: "ui-cmdk__group",
+                role: "group",
+                "aria-labelledby": group.label ? `${uid}-g${gi}` : void 0,
+                children: [
+                  group.label && /* @__PURE__ */ jsx7("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__ */ jsxs5(
+                      "div",
+                      {
+                        id,
+                        className: cx2(
+                          "ui-cmdk__item",
+                          item.danger && !disabled && "is-danger",
+                          disabled && "is-disabled",
+                          on && "is-active"
+                        ),
+                        role: "option",
+                        tabIndex: -1,
+                        "aria-selected": on,
+                        "aria-disabled": disabled || void 0,
+                        "aria-haspopup": item.danger && item.onConfirm ? "dialog" : void 0,
+                        onMouseMove: () => {
+                          if (!disabled) setAt(rows.indexOf(item));
+                        },
+                        onClick: (e) => run(item, e.metaKey || e.ctrlKey),
+                        children: [
+                          item.icon && /* @__PURE__ */ jsx7(Glyph, { name: item.icon, className: "ui-cmdk__ic" }),
+                          /* @__PURE__ */ jsxs5("span", { className: "ui-cmdk__main", children: [
+                            /* @__PURE__ */ jsx7("span", { className: "ui-cmdk__label", children: item.label }),
+                            item.description && /* @__PURE__ */ jsx7("span", { className: "ui-cmdk__desc", children: item.description })
+                          ] }),
+                          item.badge && /* @__PURE__ */ jsx7("span", { className: "ui-cmdk__badge", children: item.badge }),
+                          keysOf(item.shortcut).length > 0 && /* @__PURE__ */ jsx7("span", { className: "ui-cmdk__keys", "aria-hidden": "true", children: keysOf(item.shortcut).map((k) => /* @__PURE__ */ jsx7("kbd", { className: "ui-cmdk__key", children: k }, k)) })
+                        ]
+                      },
+                      item.id
+                    );
+                  })
+                ]
+              },
+              group.label ?? `g${gi}`
+            )) }),
+            /* @__PURE__ */ jsx7("p", { className: "ui-cmdk__empty", hidden: countOf(shown) > 0, children: empty }),
+            /* @__PURE__ */ jsx7("p", { className: "ui-sr", role: "status", "aria-live": "polite", children: countOf(shown) === 0 ? "No results" : `${countOf(shown)} result${countOf(shown) === 1 ? "" : "s"}` }),
+            hint && /* @__PURE__ */ jsxs5("div", { className: "ui-cmdk__foot", "aria-hidden": "true", children: [
+              /* @__PURE__ */ jsxs5("span", { children: [
+                /* @__PURE__ */ jsx7("kbd", { className: "ui-cmdk__key", children: "\u2191" }),
+                /* @__PURE__ */ jsx7("kbd", { className: "ui-cmdk__key", children: "\u2193" }),
+                " move"
+              ] }),
+              /* @__PURE__ */ jsxs5("span", { children: [
+                /* @__PURE__ */ jsx7("kbd", { className: "ui-cmdk__key", children: "\u21B5" }),
+                " run"
+              ] }),
+              /* @__PURE__ */ jsxs5("span", { children: [
+                /* @__PURE__ */ jsx7("kbd", { className: "ui-cmdk__key", children: "esc" }),
+                " close"
+              ] })
+            ] })
+          ]
+        }
+      )
     ] }) }),
     document.body
   );
 }
+var isDisabled = (item) => !!item.disabled || !!item.danger && !item.onConfirm;
+var countOf = (groups) => groups.reduce((t, g) => t + g.items.length, 0);
+function rowId(uid, groups, item) {
+  let n = 0;
+  for (const group of groups) {
+    for (const it of group.items) {
+      if (it === item) return `${uid}-o${n}`;
+      n += 1;
+    }
+  }
+  return void 0;
+}
 
 // src/DataTable.tsx
-import { useMemo, useState as useState2 } from "react";
+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 useEffect2, useId, useRef as useRef2, useState } from "react";
+import { useEffect as useEffect3, useId as useId3, useRef as useRef5, useState as useState3 } from "react";
 import { DEFAULT_PAGE_SIZE } from "@apliteni/apliteni-ui";
-import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
 var GHOST_SM = "ui-btn ui-btn--ghost ui-btn--sm";
 var VARIANTS = ["steps", "numbered", "jump"];
-var cx2 = (...a) => a.filter(Boolean).join(" ");
+var cx3 = (...a) => a.filter(Boolean).join(" ");
 var CAP = Number.MAX_SAFE_INTEGER;
 var int = (v, fallback) => {
   const raw = typeof v === "number" ? v : typeof v === "string" && v.trim() !== "" ? Number(v) : NaN;
@@ -218,11 +609,11 @@ function Pagination({
   onPageChange,
   onPageSizeChange
 }) {
-  const auto = useId();
-  const [draft, setDraft] = useState("");
-  const [drafting, setDrafting] = useState(false);
-  const nav = useRef2(null);
-  const pressed = useRef2(null);
+  const auto = useId3();
+  const [draft, setDraft] = useState3("");
+  const [drafting, setDrafting] = useState3(false);
+  const nav = useRef5(null);
+  const pressed = useRef5(null);
   const uid = id ?? auto;
   const kind = VARIANTS.includes(variant) ? variant : "steps";
   const size = sizeOf(pageSize, DEFAULT_PAGE_SIZE);
@@ -231,7 +622,7 @@ function Pagination({
   const rows = counted ? Math.max(0, asRows) : null;
   const last = counted ? Math.max(1, Math.ceil(rows / size)) : null;
   const at = counted ? Math.min(Math.max(1, int(page, 1)), last) : Math.min(Math.max(1, int(page, 1)), CAP - 1);
-  const [draftFor, setDraftFor] = useState(at);
+  const [draftFor, setDraftFor] = useState3(at);
   if (draftFor !== at) {
     setDraftFor(at);
     setDraft("");
@@ -239,7 +630,7 @@ function Pagination({
   }
   const offered = (Array.isArray(pageSizes) ? pageSizes : []).slice(0, 12).map((s) => int(s, 0)).filter((s) => s > 0);
   const sizes = offered.length ? [.../* @__PURE__ */ new Set([...offered, size])].sort((a, b) => a - b) : [];
-  useEffect2(() => {
+  useEffect3(() => {
     const was = pressed.current;
     if (!was || loading) return;
     pressed.current = null;
@@ -268,7 +659,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__ */ jsx6(
+    /* @__PURE__ */ jsx8(
       "button",
       {
         type: "button",
@@ -307,19 +698,19 @@ function Pagination({
   if (single) {
     steps = null;
   } else if (!counted) {
-    steps = /* @__PURE__ */ jsxs4("div", { className: "ui-pager__steps", children: [
+    steps = /* @__PURE__ */ jsxs6("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__ */ jsx6("span", { className: "ui-pager__gap", "aria-hidden": "true", children: "\u2026" }, `gap${i}`) : /* @__PURE__ */ jsx6(
+      middle = slotsFor(at, last).map((n, i) => n == null ? /* @__PURE__ */ jsx8("span", { className: "ui-pager__gap", "aria-hidden": "true", children: "\u2026" }, `gap${i}`) : /* @__PURE__ */ jsx8(
         "button",
         {
           type: "button",
           "data-page": n,
-          className: cx2(`${GHOST_SM} ui-pager__page`, n === at && "is-current"),
+          className: cx3(`${GHOST_SM} ui-pager__page`, n === at && "is-current"),
           "aria-current": n === at ? "page" : void 0,
           disabled: loading,
           "aria-disabled": loading ? true : void 0,
@@ -329,9 +720,9 @@ function Pagination({
         n
       ));
     } else if (kind === "jump") {
-      middle = /* @__PURE__ */ jsxs4("span", { className: "ui-pager__jump", children: [
-        /* @__PURE__ */ jsx6("label", { htmlFor: `${uid}-jump`, children: "Page" }),
-        /* @__PURE__ */ jsx6(
+      middle = /* @__PURE__ */ jsxs6("span", { className: "ui-pager__jump", children: [
+        /* @__PURE__ */ jsx8("label", { htmlFor: `${uid}-jump`, children: "Page" }),
+        /* @__PURE__ */ jsx8(
           "input",
           {
             className: "ui-input ui-pager__jump-input",
@@ -354,13 +745,13 @@ function Pagination({
             }
           }
         ),
-        /* @__PURE__ */ jsxs4("span", { className: "ui-pager__jump-of", children: [
+        /* @__PURE__ */ jsxs6("span", { className: "ui-pager__jump-of", children: [
           "of ",
           fmt(last)
         ] })
       ] });
     }
-    steps = /* @__PURE__ */ jsxs4("div", { className: "ui-pager__steps", children: [
+    steps = /* @__PURE__ */ jsxs6("div", { className: "ui-pager__steps", children: [
       ends ? step("First", 1, atStart) : null,
       step("Prev", Math.max(1, at - 1), atStart),
       middle,
@@ -368,18 +759,18 @@ function Pagination({
       ends ? step("Last", last, atEnd) : null
     ] });
   }
-  return /* @__PURE__ */ jsxs4(
+  return /* @__PURE__ */ jsxs6(
     "nav",
     {
       ref: nav,
-      className: cx2("ui-pager", `ui-pager--${kind}`, !counted && "ui-pager--open", single && "ui-pager--single"),
+      className: cx3("ui-pager", `ui-pager--${kind}`, !counted && "ui-pager--open", single && "ui-pager--single"),
       "aria-label": label,
       "aria-busy": loading ? true : void 0,
       children: [
-        /* @__PURE__ */ jsx6("p", { className: "ui-pager__status", "aria-live": "polite", "aria-atomic": "true", children: status }),
-        sizes.length ? /* @__PURE__ */ jsxs4("div", { className: "ui-pager__size", children: [
-          /* @__PURE__ */ jsx6("label", { className: "ui-pager__size-label", htmlFor: `${uid}-size`, children: "Rows" }),
-          /* @__PURE__ */ jsx6(
+        /* @__PURE__ */ jsx8("p", { className: "ui-pager__status", "aria-live": "polite", "aria-atomic": "true", children: status }),
+        sizes.length ? /* @__PURE__ */ jsxs6("div", { className: "ui-pager__size", children: [
+          /* @__PURE__ */ jsx8("label", { className: "ui-pager__size-label", htmlFor: `${uid}-size`, children: "Rows" }),
+          /* @__PURE__ */ jsx8(
             "select",
             {
               className: "ui-select ui-pager__size-select",
@@ -387,7 +778,7 @@ function Pagination({
               disabled: loading,
               value: size,
               onChange: (e) => onPageSizeChange?.(Number(e.target.value)),
-              children: sizes.map((s) => /* @__PURE__ */ jsx6("option", { value: s, children: fmt(s) }, s))
+              children: sizes.map((s) => /* @__PURE__ */ jsx8("option", { value: s, children: fmt(s) }, s))
             }
           )
         ] }) : null,
@@ -398,7 +789,7 @@ function Pagination({
 }
 
 // src/DataTable.tsx
-import { Fragment, jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
 var NO_SORT = { key: void 0, dir: -1 };
 function sortTableRows(rows, sort) {
   if (sort.key === void 0) return [...rows];
@@ -427,21 +818,21 @@ function DataTable({
   total,
   hasMore = false
 }) {
-  const [localSort, setLocalSort] = useState2(
+  const [localSort, setLocalSort] = useState4(
     { key: columns.find((c) => c.sortable)?.key, dir: -1 }
   );
   const owned = controlledPage === void 0;
   const sort = controlledSort ?? (owned ? localSort : NO_SORT);
   const sortIsKnown = owned || controlledSort !== void 0;
-  const [localPage, setLocalPage] = useState2(1);
-  const [localSize, setLocalSize] = useState2(DEFAULT_PAGE_SIZE2);
+  const [localPage, setLocalPage] = useState4(1);
+  const [localSize, setLocalSize] = useState4(DEFAULT_PAGE_SIZE2);
   const size = sizeOf(pageSize, owned ? localSize : rows.length || DEFAULT_PAGE_SIZE2);
-  const [pagedSort, setPagedSort] = useState2(sort);
+  const [pagedSort, setPagedSort] = useState4(sort);
   if (pagedSort.key !== sort.key || pagedSort.dir !== sort.dir) {
     setPagedSort(sort);
     setLocalPage(1);
   }
-  const ordered = useMemo(
+  const ordered = useMemo2(
     () => owned ? sortTableRows(rows, sort) : rows,
     [owned, rows, sort.key, sort.dir]
   );
@@ -461,15 +852,15 @@ function DataTable({
   };
   const caret = (k) => sort.key === k ? sort.dir === 1 ? " \u25B2" : " \u25BC" : " \u2195";
   const pageAllOn = selectable && slice.length > 0 && slice.every((r) => selected.has(r.name));
-  return /* @__PURE__ */ jsxs5(Fragment, { children: [
-    /* @__PURE__ */ jsxs5(
+  return /* @__PURE__ */ jsxs7(Fragment, { children: [
+    /* @__PURE__ */ jsxs7(
       "table",
       {
         className: "ui-table ui-table--hover ui-table--zebra",
         "aria-busy": loading || void 0,
         children: [
-          /* @__PURE__ */ jsx7("thead", { children: /* @__PURE__ */ jsxs5("tr", { children: [
-            selectable ? /* @__PURE__ */ jsx7("th", { scope: "col", children: /* @__PURE__ */ jsx7(
+          /* @__PURE__ */ jsx9("thead", { children: /* @__PURE__ */ jsxs7("tr", { children: [
+            selectable ? /* @__PURE__ */ jsx9("th", { scope: "col", children: /* @__PURE__ */ jsx9(
               "input",
               {
                 type: "checkbox",
@@ -482,23 +873,23 @@ 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__ */ jsx7(
+              /* @__PURE__ */ jsx9(
                 "th",
                 {
                   scope: "col",
                   className: [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__ */ jsxs5("button", { type: "button", className: "rx-sort", onClick: () => onSort(c.key), children: [
+                  children: c.sortable ? /* @__PURE__ */ jsxs7("button", { type: "button", className: "rx-sort", onClick: () => onSort(c.key), children: [
                     c.label,
-                    /* @__PURE__ */ jsx7("span", { className: "rx-caret", "aria-hidden": "true", children: caret(c.key) })
+                    /* @__PURE__ */ jsx9("span", { className: "rx-caret", "aria-hidden": "true", children: caret(c.key) })
                   ] }) : c.label
                 },
                 c.key
               )
             ))
           ] }) }),
-          /* @__PURE__ */ jsx7("tbody", { children: slice.map((r) => /* @__PURE__ */ jsxs5("tr", { children: [
-            selectable ? /* @__PURE__ */ jsx7("td", { children: /* @__PURE__ */ jsx7(
+          /* @__PURE__ */ jsx9("tbody", { children: slice.map((r) => /* @__PURE__ */ jsxs7("tr", { children: [
+            selectable ? /* @__PURE__ */ jsx9("td", { children: /* @__PURE__ */ jsx9(
               "input",
               {
                 type: "checkbox",
@@ -507,12 +898,12 @@ function DataTable({
                 onChange: () => onToggle(r.name)
               }
             ) }) : null,
-            columns.map((c) => /* @__PURE__ */ jsx7("td", { className: c.num ? "ui-table__num" : void 0, children: c.render ? c.render(r) : String(r[c.key]) }, c.key))
+            columns.map((c) => /* @__PURE__ */ jsx9("td", { className: c.num ? "ui-table__num" : void 0, children: c.render ? c.render(r) : String(r[c.key]) }, c.key))
           ] }, r.name)) })
         ]
       }
     ),
-    pager ? /* @__PURE__ */ jsx7(
+    pager ? /* @__PURE__ */ jsx9(
       Pagination,
       {
         page,
@@ -537,8 +928,8 @@ 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 jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
-var cx3 = (...a) => a.filter(Boolean).join(" ");
+import { jsx as jsx10, jsxs as jsxs8 } 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;
   const n = widths ? widths.length : Math.max(1, lines);
@@ -547,19 +938,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__ */ jsx8("div", { className: cx3("ui-skel", className), "aria-hidden": "true", children: Array.from({ length: n }, (_, i) => /* @__PURE__ */ jsx8("span", { className: "ui-skel__bar m-skeleton", style: styleFor(i) }, i)) });
+  return /* @__PURE__ */ jsx10("div", { className: cx4("ui-skel", className), "aria-hidden": "true", children: Array.from({ length: n }, (_, i) => /* @__PURE__ */ jsx10("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__ */ jsx8("span", { className: "ui-skel__bar m-skeleton" }, i));
-  return /* @__PURE__ */ jsxs6(
+  const cells = Array.from({ length: Math.max(1, cols) }, (_, i) => /* @__PURE__ */ jsx10("span", { className: "ui-skel__bar m-skeleton" }, i));
+  return /* @__PURE__ */ jsxs8(
     "div",
     {
       className: "ui-skel ui-skel--table",
       style: { "--skel-cols": Math.max(1, cols) },
       "aria-hidden": "true",
       children: [
-        head && /* @__PURE__ */ jsx8("div", { className: "ui-skel__row ui-skel__row--head", children: cells }),
-        Array.from({ length: Math.max(1, rows) }, (_, i) => /* @__PURE__ */ jsx8("div", { className: "ui-skel__row", children: cells }, i))
+        head && /* @__PURE__ */ jsx10("div", { className: "ui-skel__row ui-skel__row--head", children: cells }),
+        Array.from({ length: Math.max(1, rows) }, (_, i) => /* @__PURE__ */ jsx10("div", { className: "ui-skel__row", children: cells }, i))
       ]
     }
   );
@@ -572,16 +963,16 @@ function BusyRegion({
   className,
   children
 }) {
-  return /* @__PURE__ */ jsxs6(
+  return /* @__PURE__ */ jsxs8(
     "div",
     {
-      className: cx3("ui-busy", className),
+      className: cx4("ui-busy", className),
       role: "status",
       "aria-live": "polite",
       "aria-busy": busy,
       children: [
-        /* @__PURE__ */ jsx8("span", { className: "ui-sr", children: busy ? label : message }),
-        /* @__PURE__ */ jsx8("div", { className: "ui-busy__body", children: busy ? placeholder ?? /* @__PURE__ */ jsx8(Skeleton, { lines: 3 }) : children })
+        /* @__PURE__ */ jsx10("span", { className: "ui-sr", children: busy ? label : message }),
+        /* @__PURE__ */ jsx10("div", { className: "ui-busy__body", children: busy ? placeholder ?? /* @__PURE__ */ jsx10(Skeleton, { lines: 3 }) : children })
       ]
     }
   );
@@ -590,19 +981,19 @@ function Denied({
   title = "You don\u2019t have access",
   sub,
   need,
-  icon: icon2 = "lock",
+  icon: icon3 = "lock",
   className,
   children
 }) {
-  return /* @__PURE__ */ jsxs6("div", { className: cx3("ui-denied", className), children: [
-    /* @__PURE__ */ jsx8("div", { className: "ui-denied__seal", children: /* @__PURE__ */ jsx8(Icon, { name: icon2 }) }),
-    /* @__PURE__ */ jsx8("div", { className: "ui-denied__title", children: title }),
-    sub && /* @__PURE__ */ jsx8("div", { className: "ui-denied__sub", children: sub }),
-    need && /* @__PURE__ */ jsxs6("div", { className: "ui-denied__need", children: [
+  return /* @__PURE__ */ jsxs8("div", { className: cx4("ui-denied", className), children: [
+    /* @__PURE__ */ jsx10("div", { className: "ui-denied__seal", children: /* @__PURE__ */ jsx10(Icon, { name: icon3 }) }),
+    /* @__PURE__ */ jsx10("div", { className: "ui-denied__title", children: title }),
+    sub && /* @__PURE__ */ jsx10("div", { className: "ui-denied__sub", children: sub }),
+    need && /* @__PURE__ */ jsxs8("div", { className: "ui-denied__need", children: [
       "Needs ",
-      /* @__PURE__ */ jsx8("code", { className: "ui-code", children: need })
+      /* @__PURE__ */ jsx10("code", { className: "ui-code", children: need })
     ] }),
-    children && /* @__PURE__ */ jsx8("div", { className: "ui-denied__actions", children })
+    children && /* @__PURE__ */ jsx10("div", { className: "ui-denied__actions", children })
   ] });
 }
 
@@ -614,9 +1005,11 @@ export {
   BusyRegion,
   Button,
   Card,
+  CommandPalette,
   DEFAULT_PAGE_SIZE3 as DEFAULT_PAGE_SIZE,
   DataTable,
   Denied,
+  Drawer,
   Icon,
   Modal,
   PAGE_SIZES,