@apliteni/apliteni-ui 0.116.0 → 0.118.0

package/react/dist/index.js

@@ -271,11 +271,9 @@ function Callout({ variant, icon: icon7 = calloutIcons[variant ?? "neutral"], ch
 // src/primitives/StatBand.tsx
 import { useId as useId2 } from "react";
 
-// src/Tooltip.tsx
-import { useEffect, useId, useLayoutEffect as useLayoutEffect2, useRef as useRef2, useState } from "react";
-
 // src/tip.ts
-function placeTip(host, mark, tip, bound) {
+var TIP_GAP = 8;
+function placeTip(host, mark, tip, bound, placement = "top") {
   const mrect = mark.getBoundingClientRect();
   const rect = host.getBoundingClientRect();
   const view = host.ownerDocument.documentElement;
@@ -296,10 +294,13 @@ function placeTip(host, mark, tip, bound) {
     clip.right = Math.min(clip.right, edge.right);
     clip.bottom = Math.min(clip.bottom, edge.bottom);
   }
-  const gap = parseFloat(getComputedStyle(tip).getPropertyValue("--ui-tip-gap")) || 8;
+  const declared = parseFloat(getComputedStyle(tip).getPropertyValue("--ui-tip-gap"));
+  const gap = Number.isFinite(declared) ? declared : TIP_GAP;
   const above = mrect.top - clip.top;
   const below = clip.bottom - mrect.bottom;
-  const isBelow = above < tip.offsetHeight + gap && below > above;
+  const prefersBelow = placement === "bottom";
+  const flip = prefersBelow ? below < tip.offsetHeight + gap && above > below : above < tip.offsetHeight + gap && below > above;
+  const isBelow = prefersBelow !== flip;
   tip.classList.toggle("is-below", isBelow);
   const centre = mrect.left + mrect.width / 2;
   const ideal = centre - tip.offsetWidth / 2;
@@ -310,79 +311,196 @@ function placeTip(host, mark, tip, bound) {
 }
 
 // src/Tooltip.tsx
-import { jsx as jsx10, jsxs as jsxs6 } from "react/jsx-runtime";
-function Tooltip({ text: text2, children }) {
+import { useEffect, useId, useLayoutEffect as useLayoutEffect2, useRef as useRef2, useState } from "react";
+import { Fragment, jsx as jsx10, jsxs as jsxs6 } from "react/jsx-runtime";
+var DOC_EVENTS = ["pointerdown", "pointercancel", "click", "keydown", "touchend"];
+var CAPTURED = /* @__PURE__ */ new Set(["pointerdown", "pointercancel"]);
+var wirings = /* @__PURE__ */ new WeakMap();
+function wireDocument(doc, handlers) {
+  let wiring2 = wirings.get(doc);
+  if (!wiring2) {
+    const members2 = /* @__PURE__ */ new Set();
+    const offs = DOC_EVENTS.map((type) => {
+      const relay = (event) => {
+        for (const member of [...members2]) member[type](event);
+      };
+      doc.addEventListener(type, relay, CAPTURED.has(type));
+      return () => doc.removeEventListener(type, relay, CAPTURED.has(type));
+    });
+    wiring2 = { members: members2, off: () => offs.forEach((off2) => off2()) };
+    wirings.set(doc, wiring2);
+  }
+  const { members, off } = wiring2;
+  members.add(handlers);
+  return () => {
+    members.delete(handlers);
+    if (members.size) return;
+    off();
+    wirings.delete(doc);
+  };
+}
+var Text = ({ label = "", value = "", detail: detail2 = "" }) => /* @__PURE__ */ jsxs6(Fragment, { children: [
+  /* @__PURE__ */ jsx10("span", { className: "ui-tip__label", hidden: !label, children: label }),
+  /* @__PURE__ */ jsx10("span", { className: "ui-tip__value", hidden: !value, children: value }),
+  /* @__PURE__ */ jsx10("span", { className: "ui-tip__detail", hidden: !detail2, children: detail2 })
+] });
+function Tooltip({ text: text2, label = text2, value, detail: detail2, placement = "top", children }) {
   const id = useId();
   const host = useRef2(null);
   const trigger = useRef2(null);
   const tip = useRef2(null);
   const ignoreMouseUntil = useRef2(0);
   const touchMoved = useRef2(false);
-  const [open, setOpen] = useState(false);
-  const place = () => placeTip(host.current, trigger.current, tip.current);
+  const pointerKind = useRef2("");
+  const pendingClick = useRef2(null);
+  const dismissed = useRef2(null);
+  const [mark, setMark] = useState(null);
+  const active = useRef2(null);
+  active.current = mark;
+  const open = mark !== null;
+  function close(reset = false) {
+    dismissed.current = reset ? null : active.current;
+    setMark(null);
+  }
+  function show(target) {
+    if (target && target !== dismissed.current) {
+      dismissed.current = null;
+      setMark(target);
+    }
+  }
+  function markOf(target) {
+    if (!(target instanceof Element)) return null;
+    return trigger.current?.contains(target) ? trigger.current : null;
+  }
+  function place() {
+    const h = host.current;
+    const t = tip.current;
+    const target = active.current;
+    if (!h || !t || !target) return;
+    const anchor = target.querySelector("[data-tip-anchor]") || target;
+    placeTip(h, anchor, t, void 0, placement);
+  }
   useLayoutEffect2(() => {
-    if (open) place();
-  }, [open, text2]);
+    if (!mark) return;
+    if (!host.current?.contains(mark)) {
+      close(true);
+      return;
+    }
+    place();
+  });
+  const shared = useRef2({});
+  shared.current.keydown = (event) => {
+    ignoreMouseUntil.current = 0;
+    pointerKind.current = "";
+    pendingClick.current = null;
+    if (event.key === "Escape") close();
+  };
+  shared.current.touchend = (event) => {
+    if (!host.current?.contains(event.target)) close(true);
+  };
+  shared.current.pointerdown = (event) => {
+    pointerKind.current = event.pointerType;
+    if (event.pointerType === "touch" || event.pointerType === "pen") ignoreMouseUntil.current = Date.now() + 800;
+  };
+  shared.current.pointercancel = () => {
+    pendingClick.current = null;
+  };
+  shared.current.click = (event) => {
+    if ((pointerKind.current === "touch" || pointerKind.current === "pen") && !host.current?.contains(event.target)) close(true);
+  };
+  useEffect(() => wireDocument(host.current.ownerDocument, shared.current), []);
   useEffect(() => {
     if (!open) return;
-    const doc = host.current.ownerDocument;
-    const view = doc.defaultView;
-    const escape = (event) => {
-      if (event.key === "Escape") setOpen(false);
-    };
-    doc.addEventListener("keydown", escape);
-    view.addEventListener("scroll", place, true);
-    view.addEventListener("resize", place);
+    const view = host.current.ownerDocument.defaultView;
+    const reposition = () => place();
+    view.addEventListener("scroll", reposition, true);
+    view.addEventListener("resize", reposition);
     return () => {
-      doc.removeEventListener("keydown", escape);
-      view.removeEventListener("scroll", place, true);
-      view.removeEventListener("resize", place);
+      view.removeEventListener("scroll", reposition, true);
+      view.removeEventListener("resize", reposition);
     };
-  }, [open]);
-  return /* @__PURE__ */ jsxs6("span", { ref: host, className: "ui-tip-host", style: { display: "inline-block" }, children: [
-    /* @__PURE__ */ jsx10(
-      "span",
-      {
-        ref: trigger,
-        className: "ui-focusable",
-        tabIndex: 0,
-        "aria-describedby": id,
-        onMouseEnter: () => {
-          if (Date.now() > ignoreMouseUntil.current) setOpen(true);
-        },
-        onMouseLeave: () => {
-          if (Date.now() > ignoreMouseUntil.current) setOpen(false);
-        },
-        onFocus: () => {
-          if (Date.now() > ignoreMouseUntil.current) setOpen(true);
-        },
-        onBlur: () => setOpen(false),
-        onKeyDown: (event) => {
-          if (event.key === "Escape") setOpen(false);
-        },
-        onTouchStart: () => {
-          ignoreMouseUntil.current = Date.now() + 800;
-          touchMoved.current = false;
-        },
-        onTouchMove: () => {
-          touchMoved.current = true;
-        },
-        onTouchCancel: () => {
-          touchMoved.current = true;
-        },
-        onTouchEnd: () => {
-          ignoreMouseUntil.current = Date.now() + 800;
-          if (!touchMoved.current) setOpen((value) => !value);
-        },
-        children
-      }
-    ),
-    /* @__PURE__ */ jsx10("span", { ref: tip, id, role: "tooltip", className: `ui-tip${open ? " is-open" : ""}`, children: /* @__PURE__ */ jsx10("span", { className: "ui-tip__label", children: text2 }) })
-  ] });
+  }, [open, placement]);
+  return /* @__PURE__ */ jsxs6(
+    "span",
+    {
+      ref: host,
+      className: "ui-tip-host",
+      style: { display: "inline-block" },
+      onMouseOver: (event) => {
+        if (Date.now() <= ignoreMouseUntil.current) return;
+        const target = markOf(event.target);
+        if (target) show(target);
+        else setMark(null);
+      },
+      onMouseLeave: () => {
+        if (Date.now() > ignoreMouseUntil.current) close(true);
+      },
+      onFocus: (event) => {
+        if (Date.now() > ignoreMouseUntil.current) show(markOf(event.target));
+      },
+      onBlur: (event) => {
+        if (!markOf(event.relatedTarget)) close(true);
+      },
+      onPointerOver: (event) => {
+        if (event.pointerType === "touch" || event.pointerType === "pen") ignoreMouseUntil.current = Date.now() + 800;
+        else if (event.pointerType === "mouse") {
+          ignoreMouseUntil.current = 0;
+          show(markOf(event.target));
+        }
+      },
+      onClickCapture: (event) => {
+        const touched = pendingClick.current;
+        pendingClick.current = null;
+        if (pointerKind.current !== "pen") return;
+        const target = markOf(event.target);
+        const opening = touched ? touched === "open" : !!target && target !== mark;
+        if (!opening) {
+          if (!touched) close();
+          return;
+        }
+        event.preventDefault();
+        event.stopPropagation();
+        const doc = host.current.ownerDocument;
+        pointerKind.current = "";
+        doc.documentElement.dispatchEvent(new MouseEvent("click", { bubbles: true }));
+        pointerKind.current = "touch";
+        dismissed.current = null;
+        show(target);
+      },
+      onTouchStart: () => {
+        ignoreMouseUntil.current = Date.now() + 800;
+        touchMoved.current = false;
+        pendingClick.current = null;
+      },
+      onTouchMove: () => {
+        touchMoved.current = true;
+      },
+      onTouchCancel: () => {
+        touchMoved.current = true;
+      },
+      onTouchEnd: (event) => {
+        ignoreMouseUntil.current = Date.now() + 800;
+        if (touchMoved.current) return;
+        const target = markOf(event.target);
+        if (!target || target === mark) {
+          pendingClick.current = "close";
+          close();
+        } else {
+          pendingClick.current = "open";
+          dismissed.current = null;
+          show(target);
+        }
+      },
+      children: [
+        /* @__PURE__ */ jsx10("span", { ref: trigger, className: "ui-focusable", tabIndex: 0, "aria-describedby": id, children }),
+        /* @__PURE__ */ jsx10("span", { ref: tip, id, "data-tip": "", role: "tooltip", className: `ui-tip${open ? " is-open" : ""}`, children: /* @__PURE__ */ jsx10(Text, { label, value, detail: detail2 }) })
+      ]
+    }
+  );
 }
 
 // src/primitives/StatBand.tsx
-import { Fragment, jsx as jsx11, jsxs as jsxs7 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx11, jsxs as jsxs7 } from "react/jsx-runtime";
 var GLYPH = { up: "arrowUp", down: "arrowDown", flat: "minus" };
 var directionOf = (text2) => {
   const t = text2.trim();
@@ -391,7 +509,7 @@ var directionOf = (text2) => {
 var hasChange = (d) => !!d && d.value != null && d.value !== "";
 function ContextRow({ caption, delta, basisId }) {
   if (!hasChange(delta)) return caption ? /* @__PURE__ */ jsx11("dd", { className: "ui-stat__caption", children: caption }) : null;
-  const lead = caption ? /* @__PURE__ */ jsxs7(Fragment, { children: [
+  const lead = caption ? /* @__PURE__ */ jsxs7(Fragment2, { children: [
     /* @__PURE__ */ jsx11("span", { className: "ui-stat__caption", children: caption }),
     " "
   ] }) : null;
@@ -401,7 +519,7 @@ function ContextRow({ caption, delta, basisId }) {
     lead,
     /* @__PURE__ */ jsx11(Icon, { name: GLYPH[dir] }),
     delta.tooltip ? /* @__PURE__ */ jsx11(Tooltip, { text: delta.tooltip, children: /* @__PURE__ */ jsx11("span", { className: "ui-stat__change", children: delta.value }) }) : /* @__PURE__ */ jsx11("span", { className: "ui-stat__change", children: delta.value }),
-    own ? /* @__PURE__ */ jsxs7(Fragment, { children: [
+    own ? /* @__PURE__ */ jsxs7(Fragment2, { children: [
       " ",
       /* @__PURE__ */ jsx11("span", { className: "ui-stat__basis", children: own })
     ] }) : null
@@ -672,7 +790,7 @@ function Modal({ open, title, onClose, footer, children, initialFocusRef, role =
 }
 
 // src/Confirm.tsx
-import { Fragment as Fragment2, jsx as jsx13, jsxs as jsxs9 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx13, jsxs as jsxs9 } from "react/jsx-runtime";
 function Confirm({
   open,
   title,
@@ -693,7 +811,7 @@ function Confirm({
       onClose: onCancel,
       role: "alertdialog",
       initialFocusRef: safeAction,
-      footer: /* @__PURE__ */ jsxs9(Fragment2, { children: [
+      footer: /* @__PURE__ */ jsxs9(Fragment3, { children: [
         /* @__PURE__ */ jsx13(Button, { ref: safeAction, variant: "ghost", onClick: onCancel, children: cancelLabel }),
         /* @__PURE__ */ jsx13(Button, { variant: danger ? "danger" : "primary", busy, onClick: onConfirm, children: confirmLabel })
       ] }),
@@ -945,7 +1063,7 @@ function rowId(uid, groups, item) {
 }
 
 // src/DataTable.tsx
-import { useMemo as useMemo2, useState as useState5 } from "react";
+import { useCallback as useCallback2, useEffect as useEffect5, useMemo as useMemo2, useRef as useRef9, useState as useState5 } from "react";
 import { DEFAULT_PAGE_SIZE as DEFAULT_PAGE_SIZE2 } from "@apliteni/apliteni-ui";
 
 // src/Pagination.tsx
@@ -1173,7 +1291,7 @@ function Pagination({
 }
 
 // src/DataTable.tsx
-import { Fragment as Fragment3, jsx as jsx17, jsxs as jsxs13 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx17, jsxs as jsxs13 } from "react/jsx-runtime";
 var NO_SORT = { key: void 0, dir: -1 };
 function sortTableRows(rows, sort) {
   if (sort.key === void 0) return [...rows];
@@ -1209,6 +1327,33 @@ function DataTable({
   hasMore = false
 }) {
   const scrollable = stickyHeader || pinnedIdentity;
+  const table = useRef9(null);
+  const [pagerHost, setPagerHost] = useState5(null);
+  const holdPagerBox = useCallback2(
+    (box) => setPagerHost(box?.parentElement ?? null),
+    []
+  );
+  const [strip2, setStrip] = useState5();
+  useEffect5(() => {
+    const el = table.current;
+    const host = pagerHost;
+    if (!el || !host || typeof ResizeObserver === "undefined") {
+      setStrip(void 0);
+      return;
+    }
+    const measure = () => {
+      const rect = el.getBoundingClientRect();
+      const box = host.getBoundingClientRect();
+      const left = box.left + host.clientLeft + (Number.parseFloat(getComputedStyle(host).paddingLeft) || 0);
+      const inset = Math.max(0, rect.left - left);
+      const width = rect.right - left - inset;
+      setStrip(width > 0 ? { width, inset } : void 0);
+    };
+    const observer = new ResizeObserver(measure);
+    observer.observe(el);
+    measure();
+    return () => observer.disconnect();
+  }, [pagerHost, columns, rows]);
   const [localSort, setLocalSort] = useState5(
     { key: columns.find((c) => c.sortable)?.key, dir: -1 }
   );
@@ -1253,14 +1398,14 @@ function DataTable({
       strokeLinejoin: "round",
       "aria-hidden": "true",
       focusable: "false",
-      children: sort.key === k ? /* @__PURE__ */ jsx17("path", { d: "m8 10 4 4 4-4" }) : /* @__PURE__ */ jsxs13(Fragment3, { children: [
+      children: sort.key === k ? /* @__PURE__ */ jsx17("path", { d: "m8 10 4 4 4-4" }) : /* @__PURE__ */ jsxs13(Fragment4, { children: [
         /* @__PURE__ */ jsx17("path", { d: "m8 9 4-4 4 4" }),
         /* @__PURE__ */ jsx17("path", { d: "m8 15 4 4 4-4" })
       ] })
     }
   );
   const pageAllOn = selectable && slice.length > 0 && slice.every((r) => selected.has(r.name));
-  return /* @__PURE__ */ jsxs13(Fragment3, { children: [
+  return /* @__PURE__ */ jsxs13(Fragment4, { children: [
     /* @__PURE__ */ jsx17(
       "div",
       {
@@ -1271,6 +1416,7 @@ function DataTable({
         children: /* @__PURE__ */ jsxs13(
           "table",
           {
+            ref: table,
             className: ["ui-table ui-table--hover", (density === "dense" || !density && dense) && "ui-table--dense", density === "compact" && "ui-table--compact", stickyHeader && "ui-table--sticky", pinnedIdentity && "ui-table--pinned"].filter(Boolean).join(" "),
             "aria-busy": loading || void 0,
             children: [
@@ -1328,23 +1474,37 @@ function DataTable({
         )
       }
     ),
-    pager ? /* @__PURE__ */ jsx17(
-      Pagination,
-      {
-        page,
-        pageSize: size,
-        total: owned ? ordered.length : total ?? null,
-        hasMore,
-        pageSizes,
-        loading,
-        ...pagerLabel === void 0 ? {} : { label: pagerLabel },
-        onPageChange: goTo,
-        onPageSizeChange: (s) => {
-          if (pageSize === void 0) setLocalSize(s);
-          onPageSizeChange?.(s);
-          if (owned) setLocalPage(1);
+    pager ? (
+      // The strip that pages a table may not be wider than the rows it pages (#504).
+      // The two are siblings, and no selector sizes one to the other, so the width is
+      // measured: a cap rather than a width, so a pager wider than the table wraps
+      // inside it and a table wider than the room still leaves the strip in the room.
+      /* @__PURE__ */ jsx17(
+        "div",
+        {
+          className: "rx-table-pager",
+          ref: holdPagerBox,
+          style: strip2 ? { maxWidth: strip2.width, marginInlineStart: strip2.inset || void 0 } : void 0,
+          children: /* @__PURE__ */ jsx17(
+            Pagination,
+            {
+              page,
+              pageSize: size,
+              total: owned ? ordered.length : total ?? null,
+              hasMore,
+              pageSizes,
+              loading,
+              ...pagerLabel === void 0 ? {} : { label: pagerLabel },
+              onPageChange: goTo,
+              onPageSizeChange: (s) => {
+                if (pageSize === void 0) setLocalSize(s);
+                onPageSizeChange?.(s);
+                if (owned) setLocalPage(1);
+              }
+            }
+          )
         }
-      }
+      )
     ) : null
   ] });
 }
@@ -1424,10 +1584,10 @@ function Denied({
 
 // src/DatePicker.tsx
 import {
-  useCallback as useCallback2,
-  useEffect as useEffect5,
+  useCallback as useCallback3,
+  useEffect as useEffect6,
   useMemo as useMemo3,
-  useRef as useRef9,
+  useRef as useRef10,
   useState as useState6
 } from "react";
 import { jsx as jsx19, jsxs as jsxs15 } from "react/jsx-runtime";
@@ -1440,7 +1600,7 @@ var DAY_RE = /^(\d{4})-(\d{2})-(\d{2})$/;
 var PHONE_MAX = 560;
 function usePhone() {
   const [phone, setPhone] = useState6(false);
-  useEffect5(() => {
+  useEffect6(() => {
     const query = typeof window === "undefined" ? null : window.matchMedia?.(`(max-width: ${PHONE_MAX}px)`);
     if (!query) return;
     const read = () => setPhone(query.matches);
@@ -1535,9 +1695,9 @@ function DatePicker({
   const picksRange = mode === "range" || mode === "day-range";
   const phone = usePhone();
   const asSheet = sheet ?? phone;
-  const root = useRef9(null);
-  const trigger = useRef9(null);
-  const grid = useRef9(null);
+  const root = useRef10(null);
+  const trigger = useRef10(null);
+  const grid = useRef10(null);
   const [selfOpen, setSelfOpen] = useState6(defaultOpen);
   const open = openProp ?? selfOpen;
   const [selfValue, setSelfValue] = useState6(defaultValue);
@@ -1555,7 +1715,7 @@ function DatePicker({
     weekdayShort: new Intl.DateTimeFormat(locale, { weekday: "short", timeZone: "UTC" })
   }), [locale]);
   const monthLabels = useMemo3(() => evenMonthLabels(names.monthShort), [names]);
-  const at = useCallback2((index) => new Date(
+  const at = useCallback3((index) => new Date(
     grain === "month" ? Date.UTC(Math.floor(index / 12), index % 12, 1) : index * DAY_MS
   ), [grain]);
   const lo = toIndex(min, grain, "start");
@@ -1574,19 +1734,19 @@ function DatePicker({
   }, [today, grain]);
   const anchor = toIndex(picked, grain) ?? toIndex(picksRange ? span.start ?? span.end : null, grain) ?? todayIndex;
   const [cursor, setCursor] = useState6(() => clamp(anchor, lo, hi));
-  const land = useRef9(false);
-  const setOpen = useCallback2((next) => {
+  const land = useRef10(false);
+  const setOpen = useCallback3((next) => {
     if (openProp === void 0) setSelfOpen(next);
     onOpenChange?.(next);
   }, [openProp, onOpenChange]);
-  const close = useRef9(setOpen);
+  const close = useRef10(setOpen);
   useIsoLayoutEffect(() => {
     close.current = setOpen;
   });
-  useEffect5(() => {
+  useEffect6(() => {
     if (open) setCursor(clamp(anchor, lo, hi));
   }, [open]);
-  useEffect5(() => {
+  useEffect6(() => {
     if (!open || asSheet) return;
     const doc = root.current?.ownerDocument ?? document;
     const onClick = (e) => {
@@ -1612,7 +1772,7 @@ function DatePicker({
   const columns = grain === "month" ? 3 : 7;
   const page = grain === "month" ? Math.floor(cursor / 12) : monthOf(cursor);
   const caption = grain === "month" ? String(page) : names.monthYear.format(at(firstDayOf(page)));
-  const periodName = useCallback2((index) => grain === "month" ? names.monthYear.format(at(index)) : `${names.weekday.format(at(index))} ${names.day.format(at(index))}`, [grain, names, at]);
+  const periodName = useCallback3((index) => grain === "month" ? names.monthYear.format(at(index)) : `${names.weekday.format(at(index))} ${names.day.format(at(index))}`, [grain, names, at]);
   const count = grain === "month" ? 12 : daysInMonth(page);
   const first = grain === "month" ? page * 12 : firstDayOf(page);
   const last = first + count - 1;
@@ -1894,11 +2054,11 @@ function DatePicker({
 
 // src/Dropdown.tsx
 import {
-  Fragment as Fragment4,
-  useCallback as useCallback3,
-  useEffect as useEffect6,
+  Fragment as Fragment5,
+  useCallback as useCallback4,
+  useEffect as useEffect7,
   useId as useId7,
-  useRef as useRef10,
+  useRef as useRef11,
   useState as useState7
 } from "react";
 import {
@@ -1911,7 +2071,7 @@ import {
   dropdownHeightFit,
   filterPanelRow
 } from "@apliteni/apliteni-ui";
-import { Fragment as Fragment5, jsx as jsx20, jsxs as jsxs16 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx20, jsxs as jsxs16 } from "react/jsx-runtime";
 var EXIT_SLACK_MS2 = 50;
 var SETTLE_MS = 450;
 var inPanel = (node) => {
@@ -1975,19 +2135,19 @@ function Dropdown({
   const [pick, setPick] = useState7(null);
   const [query, setQuery] = useState7(() => search && search !== true ? search.query || "" : "");
   const [activeKey, setActiveKey] = useState7(null);
-  const root = useRef10(null);
-  const panel = useRef10(null);
-  const trigger = useRef10(null);
-  const field = useRef10(null);
-  const landOn = useRef10(null);
-  const at = useRef10("");
+  const root = useRef11(null);
+  const panel = useRef11(null);
+  const trigger = useRef11(null);
+  const field = useRef11(null);
+  const landOn = useRef11(null);
+  const at = useRef11("");
   const auto = useId7().replace(/:/g, "");
   const uid = id ?? auto;
-  const setOpen = useCallback3((next) => {
+  const setOpen = useCallback4((next) => {
     if (openProp === void 0) setSelfOpen(next);
     onOpenChange?.(next);
   }, [openProp, onOpenChange]);
-  const close = useRef10(setOpen);
+  const close = useRef11(setOpen);
   useIsoLayoutEffect(() => {
     close.current = setOpen;
   });
@@ -2040,7 +2200,7 @@ function Dropdown({
       stop.forEach((off) => off());
     };
   }, [open]);
-  const opened = useRef10(false);
+  const opened = useRef11(false);
   useIsoLayoutEffect(() => {
     const el = panel.current;
     if (open) {
@@ -2079,7 +2239,7 @@ function Dropdown({
   const given = rows.find((it) => it.selected);
   const givenKey = given ? keyOf(given) : null;
   const pickedKey = pick && pick.against === givenKey ? pick.key : null;
-  useEffect6(() => {
+  useEffect7(() => {
     if (pick && pick.against !== givenKey) setPick(null);
   }, [givenKey, pick]);
   const picked = pickedKey != null ? rows.find((it) => keyOf(it) === pickedKey) : void 0;
@@ -2093,7 +2253,7 @@ function Dropdown({
   const rowIds = /* @__PURE__ */ new Map();
   rows.forEach((it, i) => rowIds.set(it, `${uid}-opt-${i}`));
   const listId = `${uid}-list`;
-  useEffect6(() => {
+  useEffect7(() => {
     if (!open) return;
     const mine = () => close.current(false);
     for (const other of [...openNow]) other();
@@ -2102,7 +2262,7 @@ function Dropdown({
       openNow.delete(mine);
     };
   }, [open]);
-  useEffect6(() => {
+  useEffect7(() => {
     if (!open) return;
     const doc = root.current?.ownerDocument ?? document;
     const onClick = (e) => {
@@ -2337,7 +2497,7 @@ function Dropdown({
       ...asLink ? { href: entry.href, ...entry.target ? { target: entry.target } : null } : null,
       ...sx ? { id: rowIds.get(entry), hidden: hiddenBy(entry) || void 0 } : null,
       onClick: (e) => choose(entry, e),
-      children: /* @__PURE__ */ jsxs16(Fragment5, { children: [
+      children: /* @__PURE__ */ jsxs16(Fragment6, { children: [
         entry.icon && /* @__PURE__ */ jsx20(Glyph2, { name: entry.icon, className: "ui-dropdown__ic" }),
         /* @__PURE__ */ jsxs16("span", { className: "ui-dropdown__main", children: [
           /* @__PURE__ */ jsx20("span", { className: "ui-dropdown__label", children: entry.label }),
@@ -2347,7 +2507,7 @@ function Dropdown({
         asOption && /* @__PURE__ */ jsx20(Glyph2, { name: "check", className: "ui-dropdown__tick", hidden: true })
       ] })
     };
-    if (row) return /* @__PURE__ */ jsx20(Fragment4, { children: row(entry, props) }, key);
+    if (row) return /* @__PURE__ */ jsx20(Fragment5, { children: row(entry, props) }, key);
     const Tag = asLink ? "a" : "div";
     return /* @__PURE__ */ jsx20(Tag, { ...props }, key);
   }
@@ -2369,7 +2529,7 @@ function Dropdown({
     );
   }) : (items || []).map((entry, i) => renderRow(entry, `i${i}`));
   const cap = scroll && scroll !== true ? { "--ui-dropdown-cap": typeof scroll === "number" ? `${scroll}px` : scroll } : void 0;
-  const none = sx && filtering && !visible.length ? /* @__PURE__ */ jsxs16(Fragment5, { children: [
+  const none = sx && filtering && !visible.length ? /* @__PURE__ */ jsxs16(Fragment6, { children: [
     /* @__PURE__ */ jsx20("span", { className: "ui-dropdown__none-title", children: sx.empty.replace("{q}", () => query.trim()) }),
     /* @__PURE__ */ jsx20("span", { className: "ui-dropdown__none-hint", children: sx.hint })
   ] }) : null;
@@ -2390,7 +2550,7 @@ function Dropdown({
           setOpen(!open);
         },
         children: [
-          triggerContent != null ? triggerContent : /* @__PURE__ */ jsxs16(Fragment5, { children: [
+          triggerContent != null ? triggerContent : /* @__PURE__ */ jsxs16(Fragment6, { children: [
             label && /* @__PURE__ */ jsx20("span", { className: "ui-dropdown__pre", children: label }),
             /* @__PURE__ */ jsx20("span", { className: "ui-dropdown__value", children: shown != null ? shown : placeholder })
           ] }),
@@ -2418,7 +2578,7 @@ function Dropdown({
         onMouseMove,
         children: [
           header,
-          sx ? /* @__PURE__ */ jsxs16(Fragment5, { children: [
+          sx ? /* @__PURE__ */ jsxs16(Fragment6, { children: [
             /* @__PURE__ */ jsxs16("div", { className: "ui-dropdown__search", children: [
               /* @__PURE__ */ jsx20(Glyph2, { name: "search", className: "ui-dropdown__search-ic", hidden: true }),
               /* @__PURE__ */ jsx20(
@@ -2567,15 +2727,15 @@ function Segmented({ options, value, onChange, label, appearance = "pill", size,
 }
 
 // src/FilterBar.tsx
-import { useRef as useRef11, useState as useState8 } from "react";
+import { useRef as useRef12, useState as useState8 } from "react";
 import { filterChipText, filterChipName, filterChipUnset, filterChipItems, focusNextStop } from "@apliteni/apliteni-ui";
-import { Fragment as Fragment6, jsx as jsx24, jsxs as jsxs19 } from "react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx24, jsxs as jsxs19 } from "react/jsx-runtime";
 var SEARCH_AT = 10;
 var isRow2 = (entry) => entry !== "---" && !entry.separator;
-function FilterBar({ filters, label = "Filters", clearLabel = "Clear all", add, addLabel = "Filter", disabled = false, busy = false, onRemove, onClear, onChange, onAdd }) {
-  const bar = useRef11(null);
-  const focused = useRef11(null);
-  const landing = useRef11(null);
+function FilterBar({ filters, label = "Filters", clearLabel = "Clear all", clearVariant = "ghost", add, addLabel = "Filter", disabled = false, busy = false, onRemove, onClear, onChange, onAdd }) {
+  const bar = useRef12(null);
+  const focused = useRef12(null);
+  const landing = useRef12(null);
   const [opened, setOpened] = useState8({});
   const [adding, setAdding] = useState8(false);
   const blocked = disabled || busy;
@@ -2676,7 +2836,7 @@ function FilterBar({ filters, label = "Filters", clearLabel = "Clear all", add,
             variant: "menu",
             sections,
             ariaLabel: addLabel,
-            triggerContent: /* @__PURE__ */ jsxs19(Fragment6, { children: [
+            triggerContent: /* @__PURE__ */ jsxs19(Fragment7, { children: [
               /* @__PURE__ */ jsx24(Icon, { name: "plus" }),
               addLabel
             ] }),
@@ -2693,7 +2853,7 @@ function FilterBar({ filters, label = "Filters", clearLabel = "Clear all", add,
         ) }),
         filters.length > 0 && /* @__PURE__ */ jsx24("span", { "data-filter-clear": "", onFocus: () => {
           focused.current = { id: null, index: 0 };
-        }, children: /* @__PURE__ */ jsx24(Button, { size: "sm", variant: "ghost", onClick: () => {
+        }, children: /* @__PURE__ */ jsx24(Button, { size: "sm", variant: clearVariant, onClick: () => {
           if (!blocked) onClear();
         }, children: clearLabel }) })
       ]
@@ -2726,13 +2886,13 @@ function DrawerSection({ title, headingLevel = 3, className, children, ...rest }
 }
 
 // src/Snippet.tsx
-import { useEffect as useEffect7, useRef as useRef12, useState as useState9 } from "react";
-import { Fragment as Fragment7, jsx as jsx26, jsxs as jsxs21 } from "react/jsx-runtime";
+import { useEffect as useEffect8, useRef as useRef13, useState as useState9 } from "react";
+import { Fragment as Fragment8, jsx as jsx26, jsxs as jsxs21 } from "react/jsx-runtime";
 function Snippet({ label = "shell", code = "", children, copy = true, reveal = false, copyLabel = "Copy code" }) {
   const [status, setStatus] = useState9("idle");
-  const request = useRef12(0);
-  const timer = useRef12(void 0);
-  useEffect7(() => {
+  const request = useRef13(0);
+  const timer = useRef13(void 0);
+  useEffect8(() => {
     setStatus("idle");
     return () => {
       request.current++;
@@ -2755,7 +2915,7 @@ function Snippet({ label = "shell", code = "", children, copy = true, reveal = f
   return /* @__PURE__ */ jsxs21("div", { className: reveal ? "ui-snippet ui-snippet--reveal" : "ui-snippet", children: [
     /* @__PURE__ */ jsxs21("div", { className: "ui-snippet__bar", children: [
       /* @__PURE__ */ jsx26("span", { children: label }),
-      copy && /* @__PURE__ */ jsxs21(Fragment7, { children: [
+      copy && /* @__PURE__ */ jsxs21(Fragment8, { children: [
         /* @__PURE__ */ jsx26(
           "button",
           {
@@ -2775,15 +2935,15 @@ function Snippet({ label = "shell", code = "", children, copy = true, reveal = f
 }
 
 // src/Tabs.tsx
-import { useEffect as useEffect8, useId as useId8, useRef as useRef13 } from "react";
+import { useEffect as useEffect9, useId as useId8, useRef as useRef14 } from "react";
 import { playEntrance } from "@apliteni/apliteni-ui/motion";
-import { Fragment as Fragment8, jsx as jsx27, jsxs as jsxs22 } from "react/jsx-runtime";
+import { Fragment as Fragment9, jsx as jsx27, jsxs as jsxs22 } from "react/jsx-runtime";
 function Tabs({ items, value, onChange, label }) {
   const id = useId8();
-  const previous = useRef13(value);
-  const activePanel = useRef13(null);
-  const buttons = useRef13([]);
-  useEffect8(() => {
+  const previous = useRef14(value);
+  const activePanel = useRef14(null);
+  const buttons = useRef14([]);
+  useEffect9(() => {
     if (previous.current !== value) playEntrance(activePanel.current);
     previous.current = value;
   }, [value]);
@@ -2826,7 +2986,7 @@ function Tabs({ items, value, onChange, label }) {
         },
         children: [
           item.label,
-          item.count != null && /* @__PURE__ */ jsxs22(Fragment8, { children: [
+          item.count != null && /* @__PURE__ */ jsxs22(Fragment9, { children: [
             " ",
             item.count
           ] })
@@ -2852,14 +3012,14 @@ function Tabs({ items, value, onChange, label }) {
 }
 
 // src/Timeline.tsx
-import { useEffect as useEffect9, useRef as useRef14 } from "react";
+import { useEffect as useEffect10, useRef as useRef15 } from "react";
 import { playEntrance as playEntrance2, prefersReducedMotion } from "@apliteni/apliteni-ui/motion";
 import { jsx as jsx28, jsxs as jsxs23 } from "react/jsx-runtime";
 var kindIcons = { person: "user", rule: "bolt", reversal: "refresh" };
 function Timeline({ events, className, ...rest }) {
-  const previousIds = useRef14(new Set(events.map((event) => event.id)));
-  const rows = useRef14(/* @__PURE__ */ new Map());
-  useEffect9(() => {
+  const previousIds = useRef15(new Set(events.map((event) => event.id)));
+  const rows = useRef15(/* @__PURE__ */ new Map());
+  useEffect10(() => {
     if (previousIds.current.size > 0 && !prefersReducedMotion()) {
       for (const event of events) {
         if (previousIds.current.has(event.id)) continue;
@@ -2902,7 +3062,7 @@ function Timeline({ events, className, ...rest }) {
 }
 
 // src/Field.tsx
-import { forwardRef as forwardRef6, useEffect as useEffect10, useId as useId9, useRef as useRef15, useState as useState10 } from "react";
+import { forwardRef as forwardRef6, useEffect as useEffect11, useId as useId9, useRef as useRef16, useState as useState10 } from "react";
 import { esc, icon as icon4 } from "@apliteni/apliteni-ui";
 import { jsx as jsx29, jsxs as jsxs24 } from "react/jsx-runtime";
 function messages(id, hint, error) {
@@ -2990,10 +3150,10 @@ function SelectField({ label, hint, error, required, className = "", children, .
 }
 function FileField({ label, hint, error, required, disabled, onFileChange, className = "", ...props }) {
   const id = useId9();
-  const input = useRef15(null);
+  const input = useRef16(null);
   const [file, setFile] = useState10(null);
   const [dragging, setDragging] = useState10(false);
-  useEffect10(() => {
+  useEffect11(() => {
     const form = input.current?.form;
     const reset = () => {
       setFile(null);
@@ -3052,8 +3212,8 @@ function FileField({ label, hint, error, required, disabled, onFileChange, class
 }
 
 // src/FileDrop.tsx
-import { useRef as useRef16, useState as useState11 } from "react";
-import { Fragment as Fragment9, jsx as jsx30, jsxs as jsxs25 } from "react/jsx-runtime";
+import { useRef as useRef17, useState as useState11 } from "react";
+import { Fragment as Fragment10, jsx as jsx30, jsxs as jsxs25 } from "react/jsx-runtime";
 var MARKS = {
   uploading: "clock",
   done: "circleCheck",
@@ -3086,7 +3246,7 @@ function FileDrop({
   children,
   className
 }) {
-  const input = useRef16(null);
+  const input = useRef17(null);
   const [over, setOver] = useState11(false);
   const status = file?.status ?? "uploading";
   const word = status === "error" ? file?.error ?? WORDS.error : file?.state ?? WORDS[status];
@@ -3165,7 +3325,7 @@ function FileDrop({
                 children: /* @__PURE__ */ jsx30("span", { style: { width: `${file.progress}%` } })
               }
             )
-          ] }) : /* @__PURE__ */ jsxs25(Fragment9, { children: [
+          ] }) : /* @__PURE__ */ jsxs25(Fragment10, { children: [
             /* @__PURE__ */ jsx30(
               Button,
               {
@@ -3221,7 +3381,7 @@ var SearchField = forwardRef7(function SearchField2({ ariaLabel, className, ...p
 });
 
 // src/Toast.tsx
-import { createContext as createContext2, useCallback as useCallback4, useContext as useContext2, useEffect as useEffect11, useLayoutEffect as useLayoutEffect4, useRef as useRef17, useState as useState12 } from "react";
+import { createContext as createContext2, useCallback as useCallback5, useContext as useContext2, useEffect as useEffect12, useLayoutEffect as useLayoutEffect4, useRef as useRef18, useState as useState12 } from "react";
 import { createPortal as createPortal4 } from "react-dom";
 import { jsx as jsx32, jsxs as jsxs27 } from "react/jsx-runtime";
 var Context = createContext2(null);
@@ -3232,21 +3392,21 @@ function useToast() {
   return push;
 }
 function Notice({ notice, remove }) {
-  const root = useRef17(null);
+  const root = useRef18(null);
   const [leaving2, setLeaving] = useState12(false);
-  const dismissed = useRef17(false);
-  const remaining = useRef17(5e3);
+  const dismissed = useRef18(false);
+  const remaining = useRef18(5e3);
   const [hovered, setHovered] = useState12(false);
   const [focused, setFocused] = useState12(false);
   const paused = hovered || focused;
   const tone = notice.tone ?? "success";
-  const dismiss = useCallback4(() => {
+  const dismiss = useCallback5(() => {
     if (dismissed.current) return;
     dismissed.current = true;
     if (typeof matchMedia === "function" && matchMedia("(prefers-reduced-motion: reduce)").matches) remove();
     else setLeaving(true);
   }, [remove]);
-  useEffect11(() => {
+  useEffect12(() => {
     if (leaving2) {
       const element = root.current;
       const finish = (event) => {
@@ -3260,7 +3420,7 @@ function Notice({ notice, remove }) {
       };
     }
   }, [leaving2, remove]);
-  useEffect11(() => {
+  useEffect12(() => {
     if (leaving2 || notice.action || paused) return;
     const started = Date.now();
     const timer = setTimeout(dismiss, remaining.current);
@@ -3338,9 +3498,9 @@ function usePublishedReach(stack2, count) {
 }
 function Toast({ children }) {
   const [entries, setEntries] = useState12([]);
-  const nextId = useRef17(0);
-  const stack2 = useRef17(null);
-  const push = useCallback4((notice) => {
+  const nextId = useRef18(0);
+  const stack2 = useRef18(null);
+  const push = useCallback5((notice) => {
     const id = nextId.current++;
     const remove = () => setEntries((current) => current.filter((entry) => entry.id !== id));
     setEntries((current) => [...current, { id, notice, remove }]);
@@ -3356,13 +3516,13 @@ function Toast({ children }) {
 }
 
 // src/AppShell.tsx
-import { useEffect as useEffect13, useId as useId11, useState as useState14 } from "react";
+import { useEffect as useEffect14, useId as useId11, useState as useState14 } from "react";
 import { applyTheme, paletteHotkey, prism, railCollapsed, themeIcon, themeName } from "@apliteni/apliteni-ui";
 
 // src/SidebarNav.tsx
-import { forwardRef as forwardRef8, useEffect as useEffect12, useId as useId10, useState as useState13 } from "react";
+import { forwardRef as forwardRef8, useEffect as useEffect13, useId as useId10, useState as useState13 } from "react";
 import { ENTRANCE_FALLBACK_MS } from "@apliteni/apliteni-ui/motion";
-import { Fragment as Fragment10, jsx as jsx33, jsxs as jsxs28 } from "react/jsx-runtime";
+import { Fragment as Fragment11, jsx as jsx33, jsxs as jsxs28 } from "react/jsx-runtime";
 var badgeText = (badge) => typeof badge === "object" ? badge.text : badge;
 function Row({ item, active, activeIs, collapsed, renderLink, sub }) {
   const uid = useId10();
@@ -3371,7 +3531,7 @@ function Row({ item, active, activeIs, collapsed, renderLink, sub }) {
   const [expanded, setExpanded] = useState13();
   const open = expanded ?? item.defaultOpen ?? childActive;
   const [entering, setEntering] = useState13(false);
-  useEffect12(() => {
+  useEffect13(() => {
     if (!entering) return;
     const timer = setTimeout(() => setEntering(false), ENTRANCE_FALLBACK_MS);
     return () => clearTimeout(timer);
@@ -3388,7 +3548,7 @@ function Row({ item, active, activeIs, collapsed, renderLink, sub }) {
     item.disabled && "is-disabled",
     item.danger && "is-danger"
   ].filter(Boolean).join(" ");
-  const children = /* @__PURE__ */ jsxs28(Fragment10, { children: [
+  const children = /* @__PURE__ */ jsxs28(Fragment11, { children: [
     (item.leading ?? item.icon) && /* @__PURE__ */ jsx33("span", { className: "ui-nav__ic", children: item.leading ?? /* @__PURE__ */ jsx33(Icon, { name: item.icon }) }),
     /* @__PURE__ */ jsx33("span", { className: "ui-nav__label", children: item.label }),
     count != null && count !== "" && /* @__PURE__ */ jsx33("span", { className: `ui-nav__badge is-${typeof item.badge === "object" ? item.badge.tone ?? "neutral" : "neutral"}`, children: count }),
@@ -3457,7 +3617,7 @@ var SidebarNav = forwardRef8(function SidebarNav2({
 });
 
 // src/AppShell.tsx
-import { Fragment as Fragment11, jsx as jsx34, jsxs as jsxs29 } from "react/jsx-runtime";
+import { Fragment as Fragment12, jsx as jsx34, jsxs as jsxs29 } from "react/jsx-runtime";
 var path = (value) => value.split(/[?#]/)[0].replace(/\/+$/, "") || "/";
 function AppShell({
   sections,
@@ -3487,14 +3647,14 @@ function AppShell({
   const [theme, setTheme] = useState14("dark");
   const current = path(pathname);
   const active = sections.filter((section) => current === path(section.href) || path(section.href) !== "/" && current.startsWith(`${path(section.href)}/`)).sort((a, b) => path(b.href).length - path(a.href).length)[0];
-  useEffect13(() => {
+  useEffect14(() => {
     setCollapsed(railCollapsed() ?? defaultCollapsed);
   }, [defaultCollapsed]);
-  useEffect13(() => {
+  useEffect14(() => {
     setMore(false);
     setSearch(false);
   }, [pathname]);
-  useEffect13(() => {
+  useEffect14(() => {
     const root = document.documentElement;
     const sync2 = () => setTheme(root.getAttribute("data-theme") === "light" ? "light" : "dark");
     sync2();
@@ -3502,7 +3662,7 @@ function AppShell({
     observer.observe(root, { attributes: true, attributeFilter: ["data-theme"] });
     return () => observer.disconnect();
   }, []);
-  useEffect13(() => {
+  useEffect14(() => {
     const hotkey = (event) => {
       if (!(event.metaKey || event.ctrlKey) || event.altKey || event.shiftKey || event.key.toLowerCase() !== "k") return;
       const target = event.target;
@@ -3532,7 +3692,7 @@ function AppShell({
       onClick: (event) => {
         if (!event.metaKey && !event.ctrlKey && !event.shiftKey && !event.altKey) setMore(false);
       },
-      children: /* @__PURE__ */ jsxs29(Fragment11, { children: [
+      children: /* @__PURE__ */ jsxs29(Fragment12, { children: [
         /* @__PURE__ */ jsx34("span", { className: "ui-nav__ic", children: /* @__PURE__ */ jsx34(Icon, { name: section.icon }) }),
         /* @__PURE__ */ jsx34("span", { className: "ui-nav__label", children: section.label }),
         section.count != null && /* @__PURE__ */ jsx34("span", { className: "ui-nav__badge is-neutral", children: section.count })
@@ -3733,7 +3893,7 @@ function ThemeToggle({ labelled = false }) {
 }
 
 // src/Success.tsx
-import { forwardRef as forwardRef9, useEffect as useEffect14, useRef as useRef18, useState as useState15 } from "react";
+import { forwardRef as forwardRef9, useEffect as useEffect15, useRef as useRef19, useState as useState15 } from "react";
 import { jsx as jsx37, jsxs as jsxs32 } from "react/jsx-runtime";
 var SuccessCheck = forwardRef9(function SuccessCheck2({ variant = "line", className, ...rest }, ref) {
   const circled = variant === "circled";
@@ -3781,11 +3941,11 @@ var pieces = [
 ];
 function Countdown({ seconds, label = "Redirecting", onDone }) {
   const [remaining, setRemaining] = useState15(seconds);
-  const callback = useRef18(onDone);
-  useEffect14(() => {
+  const callback = useRef19(onDone);
+  useEffect15(() => {
     callback.current = onDone;
   }, [onDone]);
-  useEffect14(() => {
+  useEffect15(() => {
     let count = seconds;
     const timer = setInterval(() => {
       count -= 1;
@@ -3857,16 +4017,16 @@ var Success = forwardRef9(function Success2({
 
 // src/Chart.tsx
 import {
-  useCallback as useCallback5,
-  useEffect as useEffect15,
+  useCallback as useCallback6,
+  useEffect as useEffect16,
   useId as useId12,
   useLayoutEffect as useLayoutEffect5,
   useMemo as useMemo4,
-  useRef as useRef19,
+  useRef as useRef20,
   useState as useState16
 } from "react";
 import { CHART_FLOOR, bridgeWalk, chartScale, pointTarget } from "@apliteni/apliteni-ui";
-import { Fragment as Fragment12, jsx as jsx38, jsxs as jsxs33 } from "react/jsx-runtime";
+import { Fragment as Fragment13, jsx as jsx38, jsxs as jsxs33 } from "react/jsx-runtime";
 var HEIGHT = { months: 216, bridge: 216, spark: 32 };
 var PAD = 2;
 var ZERO_INSET = 1.5;
@@ -3905,7 +4065,7 @@ function barPath(m) {
 }
 function useTapFloor() {
   const [floor, setFloor] = useState16(TARGET);
-  useEffect15(() => {
+  useEffect16(() => {
     const query = typeof window === "undefined" ? null : window.matchMedia?.(`(max-width: ${PHONE_MAX2}px) and (pointer: coarse)`);
     if (!query) return;
     const read = () => setFloor(query.matches ? TAP_FLOOR : TARGET);
@@ -4028,16 +4188,16 @@ function Chart(props) {
   const plotHeight = height ?? HEIGHT[variant];
   const showTable = table ?? !spark;
   const uid = useId12().replace(/[^\w-]/g, "");
-  const frameEl = useRef19(null);
-  const scroller = useRef19(null);
-  const plot = useRef19(null);
-  const tipEl = useRef19(null);
-  const svgEl = useRef19(null);
-  const ignoreMouseUntil = useRef19(0);
-  const touchMoved = useRef19(false);
-  const dismissed = useRef19(null);
-  const opening = useRef19(false);
-  const pointerFocus = useRef19(false);
+  const frameEl = useRef20(null);
+  const scroller = useRef20(null);
+  const plot = useRef20(null);
+  const tipEl = useRef20(null);
+  const svgEl = useRef20(null);
+  const ignoreMouseUntil = useRef20(0);
+  const touchMoved = useRef20(false);
+  const dismissed = useRef20(null);
+  const opening = useRef20(false);
+  const pointerFocus = useRef20(false);
   const floor = useTapFloor();
   const [width, setWidth] = useState16(0);
   const [openId, setOpenId] = useState16(null);
@@ -4058,7 +4218,7 @@ function Chart(props) {
   const boxHeight = Math.max(plotHeight, floor);
   const boxTop = -(boxHeight - plotHeight) / 2;
   const span = scale.max - scale.min || 1;
-  const y = useCallback5(
+  const y = useCallback6(
     (value) => PAD + (scale.max - value) / span * (plotHeight - PAD * 2),
     [scale.max, span, plotHeight]
   );
@@ -4071,7 +4231,7 @@ function Chart(props) {
     cap * lanes + LANE_GAP * (lanes - 1)
   ));
   const barWidth = (groupWidth - LANE_GAP * (lanes - 1)) / lanes;
-  const centre = useCallback5((column) => column * colWidth + colWidth / 2, [colWidth]);
+  const centre = useCallback6((column) => column * colWidth + colWidth / 2, [colWidth]);
   const marks = useMemo4(() => {
     const out = frame.bars.map((bar) => {
       let top = Math.min(y(bar.from), y(bar.to));
@@ -4145,9 +4305,9 @@ function Chart(props) {
     return [...out, ...dots];
   }, [frame, lines, keys, columns, centre, barWidth, groupWidth, y, floor, colWidth, plotWidth, boxTop, boxHeight]);
   const byId = useMemo4(() => new Map(marks.map((m) => [m.id, m])), [marks]);
-  const lead = useCallback5((column) => marks.find((m) => m.column === column), [marks]);
+  const lead = useCallback6((column) => marks.find((m) => m.column === column), [marks]);
   const open = openId ? byId.get(openId) : void 0;
-  useEffect15(() => {
+  useEffect16(() => {
     const el = plot.current;
     if (!el) return;
     const read = () => setWidth(el.clientWidth);
@@ -4157,20 +4317,20 @@ function Chart(props) {
     observer.observe(el);
     return () => observer.disconnect();
   }, []);
-  const syncEdges = useCallback5(() => {
+  const syncEdges = useCallback6(() => {
     const el = scroller.current;
     if (!el) return;
     const last = el.scrollWidth - el.clientWidth;
     el.classList.toggle("is-more-before", el.scrollLeft > 1);
     el.classList.toggle("is-more-after", el.scrollLeft < last - 1);
   }, []);
-  useEffect15(syncEdges, [syncEdges, plotWidth, count]);
+  useEffect16(syncEdges, [syncEdges, plotWidth, count]);
   useLayoutEffect5(() => {
     if (!openId || !frameEl.current || !tipEl.current || !svgEl.current) return;
     const anchor = [...svgEl.current.querySelectorAll("[data-anchor]")].find((el) => el.getAttribute("data-anchor") === openId);
     if (anchor) placeTip(frameEl.current, anchor, tipEl.current, frameEl.current);
   }, [openId, plotWidth, plotHeight]);
-  useEffect15(() => {
+  useEffect16(() => {
     if (!openId) return;
     const doc = frameEl.current?.ownerDocument;
     const view = doc?.defaultView;
@@ -4198,7 +4358,7 @@ function Chart(props) {
     setOpenId(id);
   };
   const markAt = (target) => target.closest?.("[data-mark]")?.getAttribute("data-mark") ?? null;
-  const announce = useCallback5((column, picked = pick) => {
+  const announce = useCallback6((column, picked = pick) => {
     const where = columns[column];
     if (!where) return;
     const values = marks.filter((m) => m.column === column).map((m) => `${m.name} ${format(m.value)}`).join(". ") || "No value";
@@ -4496,7 +4656,7 @@ function Chart(props) {
                   `${column.label}-${i}`
                 )) })
               ] }) }),
-              /* @__PURE__ */ jsx38("span", { ref: tipEl, className: cx8("ui-tip", openId && "is-open"), role: open ? "tooltip" : void 0, children: open && /* @__PURE__ */ jsxs33(Fragment12, { children: [
+              /* @__PURE__ */ jsx38("span", { ref: tipEl, className: cx8("ui-tip", openId && "is-open"), role: open ? "tooltip" : void 0, children: open && /* @__PURE__ */ jsxs33(Fragment13, { children: [
                 /* @__PURE__ */ jsx38("span", { className: "ui-tip__label", children: spark ? columns[open.column]?.label : `${open.name}, ${columns[open.column]?.label}` }),
                 /* @__PURE__ */ jsx38("span", { className: "ui-tip__value", children: format(open.value) }),
                 (stateOf(columns[open.column]) || open.detail) && /* @__PURE__ */ jsx38("span", { className: "ui-tip__detail", children: stateOf(columns[open.column]) || open.detail })
@@ -4519,7 +4679,7 @@ function Chart(props) {
                 /* @__PURE__ */ jsx38("tbody", { children: tableRows.map((row, i) => /* @__PURE__ */ jsxs33("tr", { "aria-current": pick === i ? true : void 0, children: [
                   /* @__PURE__ */ jsxs33("th", { scope: "row", children: [
                     row.column.label,
-                    row.column.estimated && /* @__PURE__ */ jsxs33(Fragment12, { children: [
+                    row.column.estimated && /* @__PURE__ */ jsxs33(Fragment13, { children: [
                       " ",
                       /* @__PURE__ */ jsx38("span", { className: "ui-chart__state", children: stateOf(row.column) })
                     ] })