@apliteni/apliteni-ui 0.117.0 → 0.119.0

package/package.json

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

package/react/README.md

@@ -636,7 +636,7 @@ AppShell includes the kit’s rail and top band. Pass the current router pathnam
 
 ## Tooltip
 
-Tooltip accepts text and inline children, without nested controls. Hovering or focusing opens it; pressing Escape, moving focus away, or moving the mouse away closes it. On touch devices, tapping toggles it. It uses the kit’s tooltip styles and moves below the trigger when there is not enough space above. Keep the same information elsewhere on the page.
+Tooltip accepts `text` (a label shorthand), or `label`, `value`, and `detail`, with inline children without nested controls. Hovering or focusing opens it; pressing Escape, moving focus away, or moving the mouse away closes it. On touch devices, tapping toggles it. It uses the kit’s tooltip styles and moves below the trigger when there is not enough space above. Keep the same information elsewhere on the page.
 
 ```tsx
 <Tooltip text="Updated daily">Balance</Tooltip>

package/react/dist/index.d.ts

@@ -837,11 +837,15 @@ type ThemeToggleProps = {
 declare function ThemeToggle({ labelled }: ThemeToggleProps): react.JSX.Element;
 
 type TooltipProps = {
-    text: string;
+    text?: string;
+    label?: string;
+    value?: string;
+    detail?: string;
+    placement?: 'top' | 'bottom';
     /** Inline content without nested controls. */
     children: ReactNode;
 };
-declare function Tooltip({ text, children }: TooltipProps): react.JSX.Element;
+declare function Tooltip({ text, label, value, detail, placement, children }: TooltipProps): react.JSX.Element;
 
 type SuccessMark = 'line' | 'circled';
 type SuccessCheckProps = Omit<SVGAttributes<SVGSVGElement>, 'children'> & {

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 })
       ] }),
@@ -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];
@@ -1280,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",
       {
@@ -1890,15 +2008,16 @@ function DatePicker({
     // `open` on the root whichever form the panel takes, so the trigger's
     // chevron flips for the sheet as it does for the popover. The panel rules
     // it also switches on have no panel to find while the sheet is up.
-    /* @__PURE__ */ jsxs15("div", { className: cx5("ui-dropdown", "ui-datepicker", open && "open"), id, ref: root, children: [
+    /* @__PURE__ */ jsxs15("div", { className: cx5("ui-dropdown", "ui-datepicker", open && "open"), ref: root, children: [
       /* @__PURE__ */ jsxs15(
         "button",
         {
           type: "button",
           className: "ui-dropdown__trigger ui-datepicker__trigger",
+          id,
           "aria-haspopup": "dialog",
           "aria-expanded": open,
-          "aria-label": ariaLabel || (shown ? void 0 : name),
+          "aria-label": ariaLabel || void 0,
           disabled,
           ref: trigger,
           onClick: (e) => {
@@ -1936,7 +2055,7 @@ function DatePicker({
 
 // src/Dropdown.tsx
 import {
-  Fragment as Fragment4,
+  Fragment as Fragment5,
   useCallback as useCallback4,
   useEffect as useEffect7,
   useId as useId7,
@@ -1953,7 +2072,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) => {
@@ -2379,7 +2498,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 }),
@@ -2389,7 +2508,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);
   }
@@ -2411,7 +2530,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;
@@ -2432,7 +2551,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 })
           ] }),
@@ -2460,7 +2579,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(
@@ -2611,7 +2730,7 @@ function Segmented({ options, value, onChange, label, appearance = "pill", size,
 // src/FilterBar.tsx
 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", clearVariant = "ghost", add, addLabel = "Filter", disabled = false, busy = false, onRemove, onClear, onChange, onAdd }) {
@@ -2718,7 +2837,7 @@ function FilterBar({ filters, label = "Filters", clearLabel = "Clear all", clear
             variant: "menu",
             sections,
             ariaLabel: addLabel,
-            triggerContent: /* @__PURE__ */ jsxs19(Fragment6, { children: [
+            triggerContent: /* @__PURE__ */ jsxs19(Fragment7, { children: [
               /* @__PURE__ */ jsx24(Icon, { name: "plus" }),
               addLabel
             ] }),
@@ -2769,7 +2888,7 @@ function DrawerSection({ title, headingLevel = 3, className, children, ...rest }
 
 // src/Snippet.tsx
 import { useEffect as useEffect8, useRef as useRef13, useState as useState9 } from "react";
-import { Fragment as Fragment7, jsx as jsx26, jsxs as jsxs21 } from "react/jsx-runtime";
+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 = useRef13(0);
@@ -2797,7 +2916,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",
           {
@@ -2819,7 +2938,7 @@ function Snippet({ label = "shell", code = "", children, copy = true, reveal = f
 // src/Tabs.tsx
 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 = useRef14(value);
@@ -2868,7 +2987,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
           ] })
@@ -3095,7 +3214,7 @@ function FileField({ label, hint, error, required, disabled, onFileChange, class
 
 // src/FileDrop.tsx
 import { useRef as useRef17, useState as useState11 } from "react";
-import { Fragment as Fragment9, jsx as jsx30, jsxs as jsxs25 } from "react/jsx-runtime";
+import { Fragment as Fragment10, jsx as jsx30, jsxs as jsxs25 } from "react/jsx-runtime";
 var MARKS = {
   uploading: "clock",
   done: "circleCheck",
@@ -3207,7 +3326,7 @@ function FileDrop({
                 children: /* @__PURE__ */ jsx30("span", { style: { width: `${file.progress}%` } })
               }
             )
-          ] }) : /* @__PURE__ */ jsxs25(Fragment9, { children: [
+          ] }) : /* @__PURE__ */ jsxs25(Fragment10, { children: [
             /* @__PURE__ */ jsx30(
               Button,
               {
@@ -3404,7 +3523,7 @@ import { applyTheme, paletteHotkey, prism, railCollapsed, themeIcon, themeName }
 // src/SidebarNav.tsx
 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();
@@ -3430,7 +3549,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 }),
@@ -3499,7 +3618,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,
@@ -3574,7 +3693,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 })
@@ -3908,7 +4027,7 @@ import {
   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;
@@ -4538,7 +4657,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 })
@@ -4561,7 +4680,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) })
                     ] })