@hackcove/ui-react 0.10.3 → 0.10.5

package/dist/SiteSearch.d.ts

@@ -0,0 +1,32 @@
+import { type ReactElement } from "react";
+import type { Passthrough } from "./props.js";
+/** One page the search can find. */
+export type SiteSearchItem = {
+    /** The page's name: the row's label and the first thing matched. */
+    label: string;
+    /** A muted line under the label, matched last. */
+    description?: string | undefined;
+    /** Where the row goes. */
+    href: string;
+    /** Other names the page answers to (the exports it documents), matched like the label but not shown. */
+    keywords?: string[] | undefined;
+};
+/**
+ * The items that match `text`, best first: the label starts with it, then the label contains it,
+ * then a keyword contains it, then the description does. Case is ignored, and items of the same
+ * rank keep their order in `items`. Empty text matches nothing.
+ */
+export declare function rankSiteSearch(items: readonly SiteSearchItem[], text: string): SiteSearchItem[];
+/**
+ * The site's search: a header button that opens a dialog with a search field over a list of links
+ * to the pages that match. Put it in `AppShell`'s `controls` and pass every page as `items`. Ctrl+K
+ * (⌘ K on a Mac) opens it from anywhere on the page, and the button shows that key. Typing filters
+ * by name, then by `keywords`, then by description; Enter opens the first result, the arrow keys
+ * move through them, and Esc closes it and puts focus back where it was. Render it once per page.
+ */
+export declare function SiteSearch({ items, label, ...rest }: {
+    /** Every page to search, in the order ties are listed (the rail's order). */
+    items: readonly SiteSearchItem[];
+    /** The dialog's title and the button's accessible name: "Search components". */
+    label: string;
+} & Passthrough): ReactElement;

package/dist/SiteSearch.js

@@ -0,0 +1,150 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useLayoutEffect, useRef, useState, useSyncExternalStore, } from "react";
+import { Button } from "./Button.js";
+import { Dialog } from "./Dialog.js";
+import { Icon } from "./Icon.js";
+import { IconButton } from "./IconButton.js";
+import { Input } from "./Input.js";
+import { Kbd } from "./Kbd.js";
+import { ListRow } from "./ListRow.js";
+import { Text } from "./typography.js";
+/**
+ * The items that match `text`, best first: the label starts with it, then the label contains it,
+ * then a keyword contains it, then the description does. Case is ignored, and items of the same
+ * rank keep their order in `items`. Empty text matches nothing.
+ */
+export function rankSiteSearch(items, text) {
+    const query = text.trim().toLowerCase();
+    if (query === "")
+        return [];
+    const rankOf = (item) => {
+        const label = item.label.toLowerCase();
+        if (label.startsWith(query))
+            return 0;
+        if (label.includes(query))
+            return 1;
+        if (item.keywords?.some((keyword) => keyword.toLowerCase().includes(query)))
+            return 2;
+        if (item.description?.toLowerCase().includes(query))
+            return 3;
+        return -1;
+    };
+    return items
+        .map((item, index) => ({ item, index, rank: rankOf(item) }))
+        .filter((entry) => entry.rank >= 0)
+        .toSorted((a, b) => a.rank - b.rank || a.index - b.index)
+        .map((entry) => entry.item);
+}
+/** What the live region says for a result count. */
+function countText(query, count) {
+    if (query.trim() === "")
+        return "";
+    if (count === 0)
+        return "No results";
+    return count === 1 ? "1 result" : `${count} results`;
+}
+// The shortcut's key reads ⌘ K on Apple platforms. The server cannot know, so it renders Ctrl K and
+// the client swaps after hydration.
+const noSubscribe = () => () => { };
+const isApple = () => /mac|iphone|ipad|ipod/i.test(typeof navigator === "undefined" ? "" : navigator.userAgent);
+/** Ctrl+K or Cmd+K with no other modifier, the one shortcut that opens the search. */
+function isShortcut(event) {
+    return ((event.ctrlKey || event.metaKey) &&
+        !event.altKey &&
+        !event.shiftKey &&
+        event.key.toLowerCase() === "k");
+}
+// A link that stays on the page (a hash, an app's router) still closes the search; one opened in a
+// new tab or window leaves it open.
+function onListClick(event) {
+    if (event.ctrlKey || event.metaKey || event.shiftKey)
+        return;
+    if (event.target instanceof Element && event.target.closest("a[href]")) {
+        event.currentTarget.closest("dialog")?.close();
+    }
+}
+/** The result links in the list, in order. */
+function linksIn(list) {
+    return list ? [...list.querySelectorAll("a[href]")] : [];
+}
+function SearchBody({ items, label }) {
+    const [query, setQuery] = useState("");
+    const box = useRef(null);
+    const list = useRef(null);
+    const results = rankSiteSearch(items, query);
+    const typed = query.trim() !== "";
+    const onFieldKey = (event) => {
+        if (event.key === "Escape") {
+            // Close here, so no engine spends the first Esc clearing the search field.
+            event.preventDefault();
+            event.currentTarget.closest("dialog")?.close();
+        }
+        else if (event.key === "Enter") {
+            event.preventDefault();
+            linksIn(list.current)[0]?.click();
+        }
+        else if (event.key === "ArrowDown") {
+            const first = linksIn(list.current)[0];
+            if (first) {
+                event.preventDefault();
+                first.focus();
+            }
+        }
+    };
+    const onListKey = (event) => {
+        if (event.key !== "ArrowDown" && event.key !== "ArrowUp")
+            return;
+        const links = linksIn(list.current);
+        const at = links.findIndex((link) => link === document.activeElement);
+        if (at < 0)
+            return;
+        event.preventDefault();
+        const next = at + (event.key === "ArrowDown" ? 1 : -1);
+        if (next < 0)
+            box.current?.querySelector("input")?.focus();
+        else
+            links[Math.min(next, links.length - 1)]?.focus();
+    };
+    return (_jsxs("div", { ref: box, className: "flex flex-col gap-3", children: [_jsx(Input, { type: "search", icon: _jsx(Icon, { name: "search" }), "aria-label": label, placeholder: "Search", autoComplete: "off", spellCheck: false, value: query, onChange: (event) => setQuery(event.target.value), onKeyDown: onFieldKey }), _jsx("div", { role: "status", "aria-live": "polite", className: "sr-only", children: countText(query, results.length) }), !typed && (_jsx(Text, { as: "p", tone: "muted", children: "Type a name" })), typed && results.length === 0 && (_jsxs(Text, { as: "p", tone: "muted", children: ["No results for ", query.trim()] })), results.length > 0 && (_jsx("ul", { ref: list, "aria-label": "Results", onKeyDown: onListKey, onClick: onListClick, children: results.map((item, index) => (_jsx("li", { children: _jsx(ListRow, { href: item.href, size: "sm", divided: index > 0, secondary: item.description, children: item.label }) }, item.href))) }))] }));
+}
+/**
+ * The site's search: a header button that opens a dialog with a search field over a list of links
+ * to the pages that match. Put it in `AppShell`'s `controls` and pass every page as `items`. Ctrl+K
+ * (⌘ K on a Mac) opens it from anywhere on the page, and the button shows that key. Typing filters
+ * by name, then by `keywords`, then by description; Enter opens the first result, the arrow keys
+ * move through them, and Esc closes it and puts focus back where it was. Render it once per page.
+ */
+export function SiteSearch({ items, label, ...rest }) {
+    const [open, setOpen] = useState(false);
+    const opener = useRef(null);
+    const apple = useSyncExternalStore(noSubscribe, isApple, () => false);
+    const keys = apple ? "⌘ K" : "Ctrl K";
+    // Before paint, so a client-rendered trigger that is on screen already answers the shortcut.
+    useLayoutEffect(() => {
+        const onKey = (event) => {
+            if (event.defaultPrevented || event.repeat || !isShortcut(event))
+                return;
+            event.preventDefault();
+            // Only the press that opens it records the opener; `close` clears it.
+            if (!opener.current && document.activeElement instanceof HTMLElement) {
+                opener.current = document.activeElement;
+            }
+            setOpen(true);
+        };
+        window.addEventListener("keydown", onKey);
+        return () => window.removeEventListener("keydown", onKey);
+    }, []);
+    // A pointer click does not focus a button in every engine, so the trigger is remembered by hand.
+    const openFrom = (event) => {
+        opener.current = event.currentTarget;
+        setOpen(true);
+    };
+    const close = () => {
+        setOpen(false);
+        const back = opener.current;
+        opener.current = null;
+        if (back?.isConnected && back !== document.body)
+            back.focus();
+    };
+    return (_jsxs("span", { ...rest, className: "inline-flex", children: [_jsx("span", { className: "hidden sm:inline-flex", children: _jsxs(Button, { variant: "outline", size: "sm", "aria-label": label, "aria-haspopup": "dialog", "aria-keyshortcuts": "Control+K Meta+K", onClick: openFrom, children: [_jsx(Icon, { name: "search", size: "sm" }), "Search", _jsx(Kbd, { children: keys })] }) }), _jsx("span", { className: "inline-flex sm:hidden", children: _jsx(IconButton, { label: label, size: "sm", "aria-haspopup": "dialog", "aria-keyshortcuts": "Control+K Meta+K", onClick: openFrom, children: _jsx(Icon, { name: "search", size: "sm" }) }) }), open && (_jsx(Dialog, { title: label, size: "md", onClose: close, children: _jsx(SearchBody, { items: items, label: label }) }))] }));
+}

package/dist/Stack.d.ts

@@ -66,7 +66,12 @@ type StackProps = StackBase & (({
  * title row, `actions` included, as `SectionHeading`'s `rule` does for a bare heading. A line
  * between two sections is a `Divider` in the `Stack` that holds them.
  */
-export declare function Section({ title, actions, rule, gap, width, children, ...rest }: {
+export declare function Section({ id, title, actions, rule, gap, width, children, ...rest }: {
+    /**
+     * Makes the section a link target: `#<id>` scrolls to its heading, which stops below the sticky
+     * AppShell header. Needs a `title`: with no title the heading that carries it is not rendered.
+     */
+    id?: string | undefined;
     /** A `SectionHeading` at the top, which names the section. */
     title?: ReactNode;
     /** Buttons or links at the end of the title row. */

package/dist/Stack.js

@@ -47,13 +47,18 @@ export function Stack({ gap = "md", width = "default", rowFrom, as = "div", chil
 function Box({ tag: Tag, ...props }) {
     return _jsx(Tag, { ...props });
 }
+/** The id a `Section`'s heading takes: the caller's, or one of React's. */
+function useHeadingId(id) {
+    const generated = useId();
+    return id ?? generated;
+}
 /**
  * A `<section>` Stack with an optional `SectionHeading` title (which names it) and `actions` beside
  * it. Its blocks are `gap` apart, `md` by default as in a `Stack`. `rule` draws a hairline under the
  * title row, `actions` included, as `SectionHeading`'s `rule` does for a bare heading. A line
  * between two sections is a `Divider` in the `Stack` that holds them.
  */
-export function Section({ title, actions, rule = false, gap = "md", width = "default", children, ...rest }) {
-    const titleId = useId();
+export function Section({ id, title, actions, rule = false, gap = "md", width = "default", children, ...rest }) {
+    const titleId = useHeadingId(id);
     return (_jsxs(Stack, { as: "section", ...rest, gap: gap, width: width, "aria-labelledby": title ? titleId : rest["aria-labelledby"], children: [(title || actions) && (_jsxs("div", { className: cx("flex items-center justify-between gap-4", rule && "border-b border-slate-200/70 pb-2"), children: [title && _jsx(SectionHeading, { id: titleId, children: title }), actions && _jsx("div", { className: "ml-auto flex items-center gap-2", children: actions })] })), children] }));
 }

package/dist/StackedBar.d.ts

@@ -9,6 +9,8 @@ import { type TextTone } from "./typography.js";
  * five `TextTone` names; a chart with more than five parts is why these two live here.
  */
 export type VizTone = TextTone | "neutral" | "violet";
+/** Tone → text utility, painted as a fill. The five `TextTone` colours are shared; the two extra ones are remapped by every theme. */
+export declare const VIZ_TONE: Record<VizTone, string>;
 /** One part of a `StackedBar`: its `label`, its `value` (its share is `value` over the sum) and its colour. */
 export type StackedSegment = {
     label: string;

package/dist/StackedBar.js

@@ -3,7 +3,7 @@ import { cx } from "./cx.js";
 import { announcedPercent, BAR_TRACK, sharePercent } from "./ProgressBar.js";
 import { TEXT_TONE } from "./typography.js";
 /** Tone → text utility, painted as a fill. The five `TextTone` colours are shared; the two extra ones are remapped by every theme. */
-const VIZ_TONE = {
+export const VIZ_TONE = {
     ...TEXT_TONE,
     neutral: "text-neutral-500",
     violet: "text-purple-700",

package/dist/StatTile.d.ts

@@ -5,9 +5,10 @@ export type StatTileTone = "neutral" | "positive" | "warn" | "negative";
 /**
  * One headline figure: an uppercase caption over a large tabular-nums value, with an optional
  * hint line beneath. `tone` colours the value; `accent` adds a bar across the top edge in the same
- * tone. Pass the value already formatted.
+ * tone. `trend` draws a small line under the value in the same colour. Pass the value already
+ * formatted.
  */
-export declare function StatTile({ label, value, hint, tone, accent, ...rest }: {
+export declare function StatTile({ label, value, hint, tone, accent, trend, ...rest }: {
     /** The small uppercase caption over the value. */
     label: ReactNode;
     /** The figure, already formatted, large and in tabular figures. */
@@ -18,4 +19,9 @@ export declare function StatTile({ label, value, hint, tone, accent, ...rest }:
     tone?: StatTileTone;
     /** A bar across the top edge in the tone's colour. */
     accent?: boolean;
+    /**
+     * The figure over time, oldest first: a sparkline under the value, in its colour, on a scale
+     * from 0. It is decoration, so say the trend in `hint` as well.
+     */
+    trend?: readonly number[];
 } & Unstyled<Omit<HTMLAttributes<HTMLDivElement>, "children">>): ReactElement;

package/dist/StatTile.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cx } from "./cx.js";
 import { BAR_FILL } from "./ProgressBar.js";
+import { drawn, largest, plotY, runs, scaleMax } from "./trend.js";
 import { Overline } from "./typography.js";
 const VALUE = {
     neutral: "text-slate-900",
@@ -17,8 +18,18 @@ const BAR = {
 /**
  * One headline figure: an uppercase caption over a large tabular-nums value, with an optional
  * hint line beneath. `tone` colours the value; `accent` adds a bar across the top edge in the same
- * tone. Pass the value already formatted.
+ * tone. `trend` draws a small line under the value in the same colour. Pass the value already
+ * formatted.
  */
-export function StatTile({ label, value, hint, tone = "neutral", accent = false, ...rest }) {
-    return (_jsxs("div", { ...rest, className: "relative overflow-hidden rounded-xl border border-slate-200/70 bg-white p-5 shadow-sm", children: [accent && (_jsx("span", { "aria-hidden": "true", className: cx("absolute inset-x-0 top-0 h-1", BAR[tone]) })), _jsx(Overline, { as: "p", children: label }), _jsx("p", { className: cx("mt-2 text-3xl font-bold tabular-nums", VALUE[tone]), children: value }), hint != null && _jsx("p", { className: "mt-1 text-xs text-slate-500", children: hint })] }));
+export function StatTile({ label, value, hint, tone = "neutral", accent = false, trend, ...rest }) {
+    return (_jsxs("div", { ...rest, className: "relative overflow-hidden rounded-xl border border-slate-200/70 bg-white p-5 shadow-sm", children: [accent && (_jsx("span", { "aria-hidden": "true", className: cx("absolute inset-x-0 top-0 h-1", BAR[tone]) })), _jsx(Overline, { as: "p", children: label }), _jsx("p", { className: cx("mt-2 text-3xl font-bold tabular-nums", VALUE[tone]), children: value }), trend !== undefined && trend.length > 0 && _jsx(Sparkline, { values: trend, tone: tone }), hint != null && _jsx("p", { className: "mt-1 text-xs text-slate-500", children: hint })] }));
+}
+/** The tile's trend line: edge to edge, `h-8`, in the value's colour. Hidden from assistive tech. */
+function Sparkline({ values, tone, }) {
+    const max = scaleMax(largest([values]));
+    const step = values.length > 1 ? 100 / (values.length - 1) : 0;
+    return (_jsx("svg", { "aria-hidden": "true", viewBox: "0 0 100 100", preserveAspectRatio: "none", className: cx("mt-3 block h-8 w-full overflow-visible", VALUE[tone]), children: runs(values.map((value, i) => {
+            const y = drawn(value);
+            return y === null ? null : { x: values.length > 1 ? step * i : 50, y: plotY(y, max) };
+        })).map((points) => (_jsx("polyline", { points: points, fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", vectorEffect: "non-scaling-stroke" }, points))) }));
 }

package/dist/TrendChart.d.ts

@@ -0,0 +1,34 @@
+import type { ReactElement } from "react";
+import type { Passthrough } from "./props.js";
+import { type VizTone } from "./StackedBar.js";
+/**
+ * One series of a `TrendChart`: its `label` (the table's column, the Legend's entry), its colour,
+ * and one value per bucket in the buckets' order. A `null`, or a list shorter than the buckets, is
+ * a missing value.
+ */
+export type TrendSeries = {
+    label: string;
+    tone: VizTone;
+    values: readonly (number | null)[];
+};
+/**
+ * A chart of one or two series over ordered buckets (weeks, months), as bars or a line, on a
+ * y-axis from 0. The y-axis is labelled 0, half and a rounded maximum; the x-axis names the
+ * buckets. A screen reader gets the same figures as a table.
+ */
+export declare function TrendChart({ label, buckets, series, kind, ...rest }: {
+    /** What the chart shows: its accessible name and the caption of its table. */
+    label: string;
+    /** The x-axis labels, in order (`"W12"`, `"Mar"`). */
+    buckets: readonly string[];
+    /**
+     * One or two series, each `{ label, tone, values }`. A `null` value, or a `values` list shorter
+     * than `buckets`, is missing. Two series draw a Legend under the chart.
+     */
+    series: readonly [TrendSeries] | readonly [TrendSeries, TrendSeries];
+    /**
+     * `bar` for a count in each bucket, `line` for a level over time.
+     * @default bar
+     */
+    kind?: "bar" | "line";
+} & Passthrough): ReactElement;

package/dist/TrendChart.js

@@ -0,0 +1,51 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Legend, VIZ_TONE } from "./StackedBar.js";
+import { drawn, largest, plotY, round, runs, scaleMax } from "./trend.js";
+/** The most x labels drawn; past it, every k-th label is, starting with the first. */
+const MAX_X_LABELS = 8;
+/** Share of a bucket's width the bars of one bucket take, centred; the rest is the gap between buckets. */
+const BAR_SPAN = 0.7;
+const FORMAT = new Intl.NumberFormat("en-US");
+/** A value as the table says it: as given, or blank when missing. */
+const spoken = (value) => value == null || !Number.isFinite(value) ? null : FORMAT.format(value);
+/**
+ * A chart of one or two series over ordered buckets (weeks, months), as bars or a line, on a
+ * y-axis from 0. The y-axis is labelled 0, half and a rounded maximum; the x-axis names the
+ * buckets. A screen reader gets the same figures as a table.
+ */
+export function TrendChart({ label, buckets, series, kind = "bar", ...rest }) {
+    const values = series.map((s) => buckets.map((_, i) => drawn(s.values[i])));
+    const max = scaleMax(largest(values));
+    const ticks = [max, max / 2, 0];
+    return (_jsxs("figure", { ...rest, "aria-label": label, className: "flex flex-col gap-3", children: [_jsxs("div", { "aria-hidden": "true", className: "flex gap-2 pt-2 text-xs tabular-nums text-slate-500", children: [_jsx(YAxis, { ticks: ticks, max: max }), _jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-1.5", children: [_jsxs("div", { className: "relative h-48", children: [ticks.map((tick) => (_jsx("span", { className: "absolute inset-x-0 border-t border-slate-200", style: { top: `${plotY(tick, max)}%` } }, tick))), _jsx("svg", { viewBox: "0 0 100 100", preserveAspectRatio: "none", className: "absolute inset-0 size-full overflow-visible", children: kind === "bar" ? (_jsx(Bars, { series: series, values: values, max: max })) : (_jsx(Lines, { series: series, values: values, max: max })) })] }), _jsx(XAxis, { buckets: buckets })] })] }), series.length === 2 && (_jsx(Legend, { items: series.map((s) => ({ label: s.label, tone: s.tone })) })), _jsx(FigureTable, { label: label, buckets: buckets, series: series })] }));
+}
+/** The y labels, each centred on its gridline; the widest (the top) sets the column's width. */
+function YAxis({ ticks, max }) {
+    return (_jsxs("div", { className: "relative h-48 shrink-0 text-right", children: [_jsx("span", { className: "invisible block", children: FORMAT.format(max) }), ticks.map((tick) => (_jsx("span", { className: "absolute right-0 -translate-y-1/2", style: { top: `${plotY(tick, max)}%` }, children: FORMAT.format(tick) }, tick)))] }));
+}
+/** One equal column per bucket; past 8 buckets, every k-th label from the first. */
+function XAxis({ buckets }) {
+    const every = Math.max(1, Math.ceil(buckets.length / MAX_X_LABELS));
+    return (_jsx("div", { className: "grid text-center", style: { gridTemplateColumns: `repeat(${buckets.length}, minmax(0, 1fr))` }, children: buckets.map((bucket, i) => (_jsx("span", { className: "whitespace-nowrap", children: i % every === 0 ? bucket : null }, `${bucket}-${i}`))) }));
+}
+/** A rect per present value, the series side by side in each bucket. */
+function Bars({ series, values, max }) {
+    const width = 100 / Math.max(1, values[0]?.length ?? 1);
+    const bar = (width * BAR_SPAN) / series.length;
+    const inset = (width * (1 - BAR_SPAN)) / 2;
+    return (_jsx(_Fragment, { children: series.map((s, si) => values[si]?.map((value, i) => {
+            if (value === null)
+                return null;
+            const y = plotY(value, max);
+            return (_jsx("rect", { "data-bucket": i, className: VIZ_TONE[s.tone], fill: "currentColor", x: round(width * i + inset + bar * si), y: round(y), width: round(bar), height: round(100 - y) }, `${si}-${i}`));
+        })) }));
+}
+/** A polyline per run of present values, through the middle of each bucket. */
+function Lines({ series, values, max }) {
+    const width = 100 / Math.max(1, values[0]?.length ?? 1);
+    return (_jsx(_Fragment, { children: series.map((s, si) => runs((values[si] ?? []).map((value, i) => value === null ? null : { x: width * (i + 0.5), y: plotY(value, max) })).map((points) => (_jsx("polyline", { className: VIZ_TONE[s.tone], points: points, fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", vectorEffect: "non-scaling-stroke" }, `${si}-${points}`)))) }));
+}
+/** The chart's figures for a screen reader: a row per bucket, a column per series. */
+function FigureTable({ label, buckets, series, }) {
+    return (_jsxs("table", { className: "sr-only", children: [_jsx("caption", { children: label }), _jsx("thead", { children: _jsxs("tr", { children: [_jsx("td", {}), series.map((s, si) => (_jsx("th", { scope: "col", children: s.label }, si)))] }) }), _jsx("tbody", { children: buckets.map((bucket, i) => (_jsxs("tr", { children: [_jsx("th", { scope: "row", children: bucket }), series.map((s, si) => (_jsx("td", { children: spoken(s.values[i]) }, si)))] }, `${bucket}-${i}`))) })] }));
+}

package/dist/copyScript.d.ts

@@ -0,0 +1,13 @@
+/**
+ * JavaScript to inline once on a page that is rendered to static HTML and never hydrated, so every
+ * `CopyButton` (and the `CopyLine`, `CodeBlock` and `CodeExample` copy buttons) works there too.
+ * One click listener on `document` reads what to copy from the button's data attributes, writes the
+ * clipboard, then does what `CopyButton` does: sets `data-copied` again after a reflow, so the CSS
+ * that shows the copied label for two seconds starts over, and puts a new node holding the copied
+ * label in the status region beside the button, so a screen reader hears each copy. No timer: the
+ * label goes back when the animation ends, and its end clears `data-copied` (a second listener), so a
+ * button hidden and shown again does not replay it. A refused or missing clipboard leaves it alone.
+ * Whichever of the script and a hydrated button's own handler hears a click first copies and flags
+ * the event (`copyHandled`), and the other skips it: one copy per click.
+ */
+export declare const copyScript: string;

package/dist/copyScript.js

@@ -0,0 +1,13 @@
+/**
+ * JavaScript to inline once on a page that is rendered to static HTML and never hydrated, so every
+ * `CopyButton` (and the `CopyLine`, `CodeBlock` and `CodeExample` copy buttons) works there too.
+ * One click listener on `document` reads what to copy from the button's data attributes, writes the
+ * clipboard, then does what `CopyButton` does: sets `data-copied` again after a reflow, so the CSS
+ * that shows the copied label for two seconds starts over, and puts a new node holding the copied
+ * label in the status region beside the button, so a screen reader hears each copy. No timer: the
+ * label goes back when the animation ends, and its end clears `data-copied` (a second listener), so a
+ * button hidden and shown again does not replay it. A refused or missing clipboard leaves it alone.
+ * Whichever of the script and a hydrated button's own handler hears a click first copies and flags
+ * the event (`copyHandled`), and the other skips it: one copy per click.
+ */
+export const copyScript = `document.addEventListener("click",function(e){var b=e.target.closest&&e.target.closest("[data-copy-text]"),c=navigator.clipboard;if(!b||!c||e.copyHandled||b.disabled)return;e.copyHandled=1;c.writeText(b.dataset.copyText).then(function(){var r=b.nextElementSibling;b.removeAttribute("data-copied");void b.offsetWidth;b.setAttribute("data-copied","");if(r&&r.matches("[data-copy-status]"))r.replaceChildren(b.dataset.copyCopied)},function(){})});document.addEventListener("animationend",function(e){var b=e.target.closest&&e.target.closest("[data-copied]");if(b)b.removeAttribute("data-copied")})`;

package/dist/icons.d.ts

@@ -6,8 +6,8 @@ import type { ReactElement } from "react";
  * icon's own shapes carry no `fill`, `stroke` or `stroke-width` (`Icon.test.tsx` holds them to
  * that). A name is the idea or action the icon stands for, not a product.
  */
-declare const NAMES: readonly ["diff", "baseline", "review", "ci", "self-host", "privacy", "capture", "branch", "theme", "speed", "search", "chevron-right", "chevron-down", "close", "external-link", "settings", "bell", "check", "plus"];
-/** The names of the icon set: feature ideas, then UI glyphs. */
+declare const NAMES: readonly ["diff", "baseline", "review", "ci", "self-host", "privacy", "capture", "branch", "theme", "speed", "search", "chevron-right", "chevron-down", "close", "external-link", "settings", "bell", "check", "plus", "grid", "window", "type", "card", "pointer", "field", "table", "compass", "page", "briefcase"];
+/** The names of the icon set: feature ideas, then UI glyphs, then the ideas the docs sections stand for. */
 export type IconName = (typeof NAMES)[number];
 /** The icon `name` as an `<svg>`: the set's one grid, stroke, caps and joins, drawn in `currentColor`. */
 export declare function iconGlyph(name: IconName): ReactElement;

package/dist/icons.js

@@ -26,6 +26,16 @@ const NAMES = [
     "bell",
     "check",
     "plus",
+    "grid",
+    "window",
+    "type",
+    "card",
+    "pointer",
+    "field",
+    "table",
+    "compass",
+    "page",
+    "briefcase",
 ];
 const GLYPHS = {
     /** Before and after, side by side: a minus on the left, a plus on the right. */
@@ -66,6 +76,26 @@ const GLYPHS = {
     check: _jsx("path", { d: "m4.5 12.5 5 5L19.5 7" }),
     /** Add or create: two strokes crossing, upright. */
     plus: _jsx("path", { d: "M12 5v14M5 12h14" }),
+    /** Things laid out in a grid: four tiles. */
+    grid: (_jsxs(_Fragment, { children: [_jsx("rect", { x: "3.5", y: "3.5", width: "7", height: "7", rx: "1.5" }), _jsx("rect", { x: "13.5", y: "3.5", width: "7", height: "7", rx: "1.5" }), _jsx("rect", { x: "3.5", y: "13.5", width: "7", height: "7", rx: "1.5" }), _jsx("rect", { x: "13.5", y: "13.5", width: "7", height: "7", rx: "1.5" })] })),
+    /** A whole page's frame: a window with a title bar and a panel down the side. */
+    window: (_jsxs(_Fragment, { children: [_jsx("rect", { x: "3", y: "4.5", width: "18", height: "15", rx: "2.5" }), _jsx("path", { d: "M3 9h18M9.5 9v10.5M6.5 6.75h.01M9 6.75h.01" })] })),
+    /** Text and its styles: a capital T. */
+    type: _jsx("path", { d: "M5.5 7V5h13v2M12 5v14M9 19h6" }),
+    /** A unit of content: a card with a title line and lines of body. */
+    card: (_jsxs(_Fragment, { children: [_jsx("rect", { x: "3", y: "4.5", width: "18", height: "15", rx: "2.5" }), _jsx("path", { d: "M7 9h5M7 12.5h10M7 15.75h7" })] })),
+    /** Something to press: a pointer arrow. */
+    pointer: _jsx("path", { d: "M7 4.5v13.2l3.3-3.1 2.4 5 2.2-1-2.3-4.9h4.6Z" }),
+    /** Something to type in: a text field with its text and caret. */
+    field: (_jsxs(_Fragment, { children: [_jsx("rect", { x: "3", y: "7.5", width: "18", height: "9", rx: "2.5" }), _jsx("path", { d: "M7 12h4M13.5 9.5v5" })] })),
+    /** Rows and columns of data: a table with a header row and a first column. */
+    table: (_jsxs(_Fragment, { children: [_jsx("rect", { x: "3", y: "4.5", width: "18", height: "15", rx: "2.5" }), _jsx("path", { d: "M3 9.5h18M3 14.5h18M9.5 9.5v10" })] })),
+    /** Finding your way around: a compass with its needle. */
+    compass: (_jsxs(_Fragment, { children: [_jsx("circle", { cx: "12", cy: "12", r: "9" }), _jsx("path", { d: "m15.5 8.5-2 5-5 2 2-5Z" })] })),
+    /** A whole page of its own: a sheet with a folded corner and lines of text. */
+    page: (_jsxs(_Fragment, { children: [_jsx("path", { d: "M7.5 3H14l5 5v10.5a2.5 2.5 0 0 1-2.5 2.5h-9A2.5 2.5 0 0 1 5 18.5v-13A2.5 2.5 0 0 1 7.5 3Z" }), _jsx("path", { d: "M14 3v3.5A1.5 1.5 0 0 0 15.5 8H19M9 13h6M9 16.5h6" })] })),
+    /** Work for hire: a briefcase with its handle and clasp. */
+    briefcase: (_jsxs(_Fragment, { children: [_jsx("rect", { x: "3", y: "7.5", width: "18", height: "12", rx: "2.5" }), _jsx("path", { d: "M8.5 7.5V6a2 2 0 0 1 2-2h3a2 2 0 0 1 2 2v1.5M3 13h18M12 12v2.5" })] })),
 };
 /** The icon `name` as an `<svg>`: the set's one grid, stroke, caps and joins, drawn in `currentColor`. */
 export function iconGlyph(name) {

package/dist/index.d.ts

@@ -6,10 +6,12 @@ export { StatTile, type StatTileTone } from "./StatTile.js";
 export { ProgressBar, type BarSize, type BarTone } from "./ProgressBar.js";
 export { SplitBar } from "./SplitBar.js";
 export { Legend, StackedBar, type LegendItem, type StackedSegment, type VizTone, } from "./StackedBar.js";
+export { TrendChart, type TrendSeries } from "./TrendChart.js";
 export { Markdown } from "./Markdown.js";
 export { AppShell, AppShellBrand, type AppShellBreakpoint, AppShellHideBelow, appShellRootClassFor, } from "./AppShell.js";
 export { Container } from "./Container.js";
 export { PageHeader, type PageHeaderProps } from "./PageHeader.js";
+export { Hero, type HeroProps } from "./Hero.js";
 export { CardGrid, CenteredLayout, DetailLayout, FormLayout, FullBleedLayout, ListLayout, ProseLayout, } from "./PageLayouts.js";
 export { SidebarLayout } from "./SidebarLayout.js";
 export { SideColumn, type SideColumnWidth } from "./SideColumn.js";
@@ -43,7 +45,9 @@ export { CodeExample } from "./CodeExample.js";
 export { Disclosure } from "./Disclosure.js";
 export { Divider } from "./Divider.js";
 export { PageFade, startPageTransition } from "./PageFade.js";
+export { NavigationProgress } from "./NavigationProgress.js";
 export { Dialog, type DialogProps } from "./Dialog.js";
+export { SiteSearch, type SiteSearchItem } from "./SiteSearch.js";
 export { Drawer, type DrawerProps } from "./Drawer.js";
 export { Lightbox, type LightboxProps } from "./Lightbox.js";
 export { Icon } from "./Icon.js";
@@ -59,6 +63,7 @@ export { Switch } from "./Switch.js";
 export { Radio, RadioGroup } from "./RadioGroup.js";
 export { FileDrop } from "./FileDrop.js";
 export { CopyButton } from "./CopyButton.js";
+export { copyScript } from "./copyScript.js";
 export { CopyLine } from "./CopyLine.js";
 export { Field } from "./Field.js";
 export { FormGrid, FormRow, FormRowField, type FormRowSpan } from "./FormRow.js";

package/dist/index.js

@@ -6,10 +6,12 @@ export { StatTile } from "./StatTile.js";
 export { ProgressBar } from "./ProgressBar.js";
 export { SplitBar } from "./SplitBar.js";
 export { Legend, StackedBar, } from "./StackedBar.js";
+export { TrendChart } from "./TrendChart.js";
 export { Markdown } from "./Markdown.js";
 export { AppShell, AppShellBrand, AppShellHideBelow, appShellRootClassFor, } from "./AppShell.js";
 export { Container } from "./Container.js";
 export { PageHeader } from "./PageHeader.js";
+export { Hero } from "./Hero.js";
 export { CardGrid, CenteredLayout, DetailLayout, FormLayout, FullBleedLayout, ListLayout, ProseLayout, } from "./PageLayouts.js";
 export { SidebarLayout } from "./SidebarLayout.js";
 export { SideColumn } from "./SideColumn.js";
@@ -42,7 +44,9 @@ export { CodeExample } from "./CodeExample.js";
 export { Disclosure } from "./Disclosure.js";
 export { Divider } from "./Divider.js";
 export { PageFade, startPageTransition } from "./PageFade.js";
+export { NavigationProgress } from "./NavigationProgress.js";
 export { Dialog } from "./Dialog.js";
+export { SiteSearch } from "./SiteSearch.js";
 export { Drawer } from "./Drawer.js";
 export { Lightbox } from "./Lightbox.js";
 export { Icon } from "./Icon.js";
@@ -57,6 +61,7 @@ export { Switch } from "./Switch.js";
 export { Radio, RadioGroup } from "./RadioGroup.js";
 export { FileDrop } from "./FileDrop.js";
 export { CopyButton } from "./CopyButton.js";
+export { copyScript } from "./copyScript.js";
 export { CopyLine } from "./CopyLine.js";
 export { Field } from "./Field.js";
 export { FormGrid, FormRow, FormRowField } from "./FormRow.js";

package/dist/stickyColumn.d.ts

@@ -13,6 +13,14 @@
  */
 export declare const STICKY_ASIDE_MD = "md:sticky md:top-[var(--app-header,0px)] md:self-start";
 export declare const STICKY_SCROLL_MD = "md:-m-1 md:max-h-[calc(100dvh-var(--app-header,0px)-2rem)] md:overflow-y-auto md:p-1";
+/**
+ * The thin themed scrollbar (`themedScrollbar` in `cx.ts`) on a rail's scroller from `md`, where it
+ * scrolls, instead of the heavy native one with arrow buttons. Its thumb is the scroller's own text
+ * colour, so the rail's real ink goes back on an inner box (`STICKY_INK_MD`), the colour the shell
+ * gives every page.
+ */
+export declare const STICKY_BAR_MD = "md:text-slate-400 md:[scrollbar-width:thin] md:[scrollbar-color:currentColor_transparent]";
+export declare const STICKY_INK_MD = "md:text-slate-900";
 export declare const STICKY_ASIDE_LG = "lg:sticky lg:top-[var(--app-header,0px)] lg:self-start";
 export declare const STICKY_SCROLL_LG = "lg:-m-1 lg:max-h-[calc(100dvh-var(--app-header,0px)-2rem)] lg:overflow-y-auto lg:p-1";
 /**

package/dist/stickyColumn.js

@@ -13,6 +13,14 @@
  */
 export const STICKY_ASIDE_MD = "md:sticky md:top-[var(--app-header,0px)] md:self-start";
 export const STICKY_SCROLL_MD = "md:-m-1 md:max-h-[calc(100dvh-var(--app-header,0px)-2rem)] md:overflow-y-auto md:p-1";
+/**
+ * The thin themed scrollbar (`themedScrollbar` in `cx.ts`) on a rail's scroller from `md`, where it
+ * scrolls, instead of the heavy native one with arrow buttons. Its thumb is the scroller's own text
+ * colour, so the rail's real ink goes back on an inner box (`STICKY_INK_MD`), the colour the shell
+ * gives every page.
+ */
+export const STICKY_BAR_MD = "md:text-slate-400 md:[scrollbar-width:thin] md:[scrollbar-color:currentColor_transparent]";
+export const STICKY_INK_MD = "md:text-slate-900";
 export const STICKY_ASIDE_LG = "lg:sticky lg:top-[var(--app-header,0px)] lg:self-start";
 export const STICKY_SCROLL_LG = "lg:-m-1 lg:max-h-[calc(100dvh-var(--app-header,0px)-2rem)] lg:overflow-y-auto lg:p-1";
 /**

package/dist/trend.d.ts

@@ -0,0 +1,26 @@
+/**
+ * The scale shared by `TrendChart` and the `StatTile` sparkline. Internal: not exported from
+ * `index.ts`.
+ */
+/**
+ * The top of a y-axis that starts at 0: the smallest of 2, 4 or 10 times a whole power of ten
+ * (1, 10, 100, …) that is at least `top`. Its half is then a whole number: 1 gives 2, 3 gives
+ * 4, 5 gives 10, 13 gives 20. Nothing above 0 gives 2.
+ */
+export declare function scaleMax(top: number): number;
+/** A value as drawn: a negative one is 0, and a missing or non-finite one is `null`. */
+export declare function drawn(value: number | null | undefined): number | null;
+/** The largest drawn value of every list, or 0. */
+export declare function largest(lists: readonly (readonly (number | null)[])[]): number;
+/** `value` as a height on a 0 to 100 plot, measured down from the top (SVG's y). */
+export declare function plotY(value: number, max: number): number;
+/**
+ * The polylines of a line through `points`, broken at every missing one: one `points` string per
+ * run of present values. A run of one point repeats it, so a round cap draws it as a dot.
+ */
+export declare function runs(points: readonly ({
+    x: number;
+    y: number;
+} | null)[]): string[];
+/** Four decimals, so the markup stays short and stable. */
+export declare function round(n: number): number;