@apliteni/apliteni-ui 0.116.0 → 0.117.0

package/guidelines/dense-tables.md

@@ -60,6 +60,20 @@
 
 **Don't:** Hide units in muted text or make readers guess what an abbreviation means.
 
+## Size the table to its content
+
+<!-- rule: content-width -->
+
+**Why:** Large gaps separate labels from values.
+
+**Rule:** Limit each column to its longest cell plus the cell inset.
+
+**Do:** Keep amounts beside their references in a two-column table.
+
+**Don't:** Stretch short tables across the page.
+
+**Except:** A text column intended to grow, such as a name or title, takes the remaining width.
+
 ## Scroll instead of squeezing
 
 <!-- rule: overflow -->

package/package.json

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

package/react/dist/index.css

@@ -317,6 +317,12 @@
     transition: none;
   }
 }
+.rx-table-pager:has(.ui-pager) {
+  margin-top: var(--space-4);
+}
+.rx-table-pager:not(:has(.ui-pager)) {
+  display: none;
+}
 
 /* src/DatePicker.css */
 .ui-datepicker__panel {

package/react/dist/index.d.ts

@@ -23,7 +23,7 @@ declare const Switch: react.ForwardRefExoticComponent<Omit<InputHTMLAttributes<H
 } & react.RefAttributes<HTMLInputElement>>;
 
 type ButtonOptions = {
-    variant?: 'primary' | 'secondary' | 'ghost' | 'danger';
+    variant?: 'primary' | 'secondary' | 'ghost' | 'danger' | 'link';
     size?: 'xs' | 'sm' | 'md' | 'lg';
     icon?: string;
     /** Decorative caller artwork, before the label; takes precedence over icon. */
@@ -581,6 +581,7 @@ type FilterBarProps = {
     filters: Filter[];
     label?: string;
     clearLabel?: string;
+    clearVariant?: 'ghost' | 'secondary' | 'link';
     disabled?: boolean;
     busy?: boolean;
     add?: AddFilter[];
@@ -590,7 +591,7 @@ type FilterBarProps = {
     onChange: (id: string, value: string | undefined) => void;
     onAdd?: (id: string, value: string | undefined) => void;
 };
-declare function FilterBar({ filters, label, clearLabel, add, addLabel, disabled, busy, onRemove, onClear, onChange, onAdd }: FilterBarProps): react.JSX.Element;
+declare function FilterBar({ filters, label, clearLabel, clearVariant, add, addLabel, disabled, busy, onRemove, onClear, onChange, onAdd }: FilterBarProps): react.JSX.Element;
 
 type KeyValueRow = {
     label: string;

package/react/dist/index.js

@@ -945,7 +945,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
@@ -1209,6 +1209,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 }
   );
@@ -1271,6 +1298,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 +1356,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 +1466,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 +1482,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 +1577,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 +1597,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 +1616,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 +1654,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;
@@ -1895,10 +1937,10 @@ function DatePicker({
 // src/Dropdown.tsx
 import {
   Fragment as Fragment4,
-  useCallback as useCallback3,
-  useEffect as useEffect6,
+  useCallback as useCallback4,
+  useEffect as useEffect7,
   useId as useId7,
-  useRef as useRef10,
+  useRef as useRef11,
   useState as useState7
 } from "react";
 import {
@@ -1975,19 +2017,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 +2082,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 +2121,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 +2135,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 +2144,7 @@ function Dropdown({
       openNow.delete(mine);
     };
   }, [open]);
-  useEffect6(() => {
+  useEffect7(() => {
     if (!open) return;
     const doc = root.current?.ownerDocument ?? document;
     const onClick = (e) => {
@@ -2567,15 +2609,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";
 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;
@@ -2693,7 +2735,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 +2768,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 { 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";
 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++;
@@ -2775,15 +2817,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";
 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]);
@@ -2852,14 +2894,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 +2944,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 +3032,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,7 +3094,7 @@ function FileField({ label, hint, error, required, disabled, onFileChange, class
 }
 
 // src/FileDrop.tsx
-import { useRef as useRef16, useState as useState11 } from "react";
+import { useRef as useRef17, useState as useState11 } from "react";
 import { Fragment as Fragment9, jsx as jsx30, jsxs as jsxs25 } from "react/jsx-runtime";
 var MARKS = {
   uploading: "clock",
@@ -3086,7 +3128,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];
@@ -3221,7 +3263,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 +3274,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 +3302,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 +3380,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,11 +3398,11 @@ 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";
 var badgeText = (badge) => typeof badge === "object" ? badge.text : badge;
@@ -3371,7 +3413,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);
@@ -3487,14 +3529,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 +3544,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;
@@ -3733,7 +3775,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 +3823,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,12 +3899,12 @@ 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";
@@ -3905,7 +3947,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 +4070,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 +4100,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 +4113,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 +4187,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 +4199,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 +4240,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";

package/src/components/filter-bar.js

@@ -2,7 +2,7 @@ import { button, esc } from './index.js';
 import { dropdown, wireDropdown } from './dropdown.js';
 import { filterChipText, filterChipName, filterChipUnset, filterChipItems, focusNextStop } from '../logic/filter-bar.js';
 
-export function filterBar({ filters = [], label = 'Filters', clearLabel = 'Clear all', disabled = false, busy = false } = {}) {
+export function filterBar({ filters = [], label = 'Filters', clearLabel = 'Clear all', clearVariant = 'ghost', disabled = false, busy = false } = {}) {
   return `<fieldset class="ui-filter-bar" data-filter-bar${disabled || busy ? ' disabled' : ''}${busy ? ' aria-busy="true"' : ''}>`
     + `<legend class="ui-filter-bar__legend">${esc(label)}</legend>`
     + filters.map(filter => `<fieldset class="ui-filter-bar__chip" data-filter-id="${esc(filter.id)}"${filter.disabled ? ' disabled' : ''}>`
@@ -17,11 +17,10 @@ export function filterBar({ filters = [], label = 'Filters', clearLabel = 'Clear
     // row is the only thing in it, and it reads as a bar that has been turned
     // off rather than one with no filters on it. It is the kit's own `one-page`
     // rule — a control with no action to offer is not shown. It returns with
-    // the first chip, in the bordered skin rather than the ghost one, because a
-    // live action beside two chips has to read as live.
+    // the first chip, as a quiet text action.
     // why: docs/components.md#a-filter-row-holds-its-panels
     + (filters.length
-      ? `<span data-filter-clear>${button({ label: clearLabel, size: 'sm', variant: 'ghost' })}</span>`
+      ? `<span data-filter-clear>${button({ label: clearLabel, size: 'sm', variant: clearVariant })}</span>`
       : '')
     + '</fieldset>';
 }

package/src/styles/button.css

@@ -1,5 +1,5 @@
 /* ============================================================================
- * Button — .ui-btn  (variants: primary / secondary / ghost / danger)
+ * Button — .ui-btn  (variants: primary / secondary / ghost / danger / link)
  *                   (sizes: xs / sm / md / lg, [icon], [disabled], [aria-busy])
  * ========================================================================== */
 
@@ -70,6 +70,22 @@
   color: var(--strong);
 }
 
+.ui-btn--link {
+  background: transparent;
+  border-color: transparent;
+  color: var(--accent);
+  padding-inline: 0;
+}
+.ui-btn--link .ui-btn__label-slot { overflow: visible; }
+.ui-btn--link[aria-busy="true"] .ui-btn__label-slot { overflow: hidden; }
+.ui-btn--link .ui-btn__label { text-decoration: underline; text-underline-offset: 0.2em; }
+.ui-btn.ui-btn--link:hover {
+  background: transparent;
+  border-color: transparent;
+  color: var(--strong);
+  text-decoration: underline;
+}
+
 .ui-btn--danger { color: var(--text); }
 .ui-btn--danger:hover, .ui-btn--danger:focus-visible {
   color: var(--pink);
@@ -112,6 +128,12 @@
   border-color: transparent;
   /* muted-ink: state — unavailable control */ color: var(--disabled-ink-bare);
 }
+.ui-btn--link:disabled,
+.ui-btn--link[aria-disabled="true"] {
+  background: transparent;
+  border-color: transparent;
+  /* muted-ink: state — unavailable link action */ color: var(--disabled-ink-bare);
+}
 /* With no box, the ink is read on whatever is behind it, so the ghost takes an ink
    set for the dullest ground: in dark 7.49 / 6.31 / 7.00 / 5.44 on --bg / --surface /
    --surface-2 / --surface-3, in light 5.85 / 6.50 / 5.49 / 5.70. The enabled ghost now uses body
@@ -161,6 +183,13 @@
   border-color: transparent;
   color: var(--text);
 }
+.ui-btn[aria-busy="true"].ui-btn--link,
+.ui-btn[aria-busy="true"].ui-btn--link:hover,
+.ui-btn[aria-busy="true"].ui-btn--link:active {
+  background: transparent; /* code-bg: inherit — busy paint retains the button's containing gap. */
+  border-color: transparent;
+  color: var(--accent);
+}
 .ui-btn[aria-busy="true"].ui-btn--danger,
 .ui-btn[aria-busy="true"].ui-btn--danger:hover,
 .ui-btn[aria-busy="true"].ui-btn--danger:active {

package/src/styles/card.css

@@ -40,6 +40,11 @@
 .ui-card--pad-sm { padding: var(--space-5) var(--space-6); }
 .ui-card--pad-lg { padding: var(--space-8) var(--space-10); }
 
+/* A card framing one content-width block ends where the block ends — a 359px table sat in
+   a 1232px card (#504) — and is capped, so a wider block still fills the room and scrolls.
+   why: docs/foundations.md#spacing-and-rhythm */
+.ui-card--fit { width: fit-content; max-width: 100%; }
+
 /* An accent-tinted card, e.g. a highlighted plan / success surface. The accent edge is
    the card's own hairline re-coloured: an inset ring over it would draw two. #295
    The strength is --card-tint, per theme: light mixes down from white, so a tint that

package/src/styles/pagination.css

@@ -10,6 +10,7 @@
 .ui-pager {
   display: flex;
   flex-wrap: wrap;
+  justify-content: flex-end;
   align-items: center;
   gap: var(--space-3) var(--space-4);
   font-size: var(--text-sm);
@@ -113,7 +114,8 @@
    `margin-top: 16px` for this, which is --space-4; the number moves to the scale
    with it rather than travelling as a literal.
    why: docs/foundations.md#spacing-and-rhythm */
-.ui-table + .ui-pager { margin-top: var(--space-4); }
+.ui-table + .ui-pager,
+.ui-table-scroll + .ui-pager { margin-top: var(--space-4); }
 
 /* A step given an `href` is an anchor, and a host stylesheet's `a:link` is
    (0,1,1) — which outranks `.ui-btn--ghost` at (0,1,0) and paints the enabled

package/src/styles/table.css

@@ -8,6 +8,11 @@
   border-collapse: collapse;
   font-size: var(--text-base);
 }
+/* Fit cards keep short tables close to their labels. Other cards keep full-width tables. */
+:where(.ui-card--fit) .ui-table {
+  width: auto;
+  max-width: 100%;
+}
 .ui-table th {
   text-align: left;
   /* rank: label */
@@ -280,6 +285,10 @@
   width: calc(100% + 2 * var(--space-3));
   margin-inline: calc(-1 * var(--space-3));
 }
+.ui-card--fit > :where(.ui-table--dense, .ui-table--zebra) {
+  width: auto;
+  max-width: calc(100% + 2 * var(--space-3));
+}
 /* A scroll wrapper owns the bleed for a nested dense table: 4px of focus
    clearance plus the 12px end-cell inset. */
 .ui-card > .ui-table-scroll:has(> .ui-table--dense) {
@@ -391,6 +400,8 @@ a.ui-identity:hover { text-decoration: underline; }
      under it, so whatever the cut lets out is painted over that column. A child's ring
      needs 3px and the cell's padding is 12px, so the room comes from the padding.
      why: docs/components.md#dense-financial-tables, #500, #513 */
+  /* A percentage can stretch an intrinsic table beyond its content. */
+  .ui-card--fit .ui-table--pinned .ui-table__identity { width: 1px; }
   .ui-table--pinned .ui-table__identity {
     width: 1%;
     max-width: var(--ui-table-identity-max);