@x-tech-laboratories/x-libs 0.2.0 → 0.4.0

package/dist/web/format.js

@@ -1,26 +1,36 @@
 // Writes times, durations, sizes and counts short enough for a table cell.
+import pretty_bytes from "pretty-bytes";
 // ── Times ────────────────────────────────────────────────────────────────────
 export function now_seconds() {
     return Date.now() / 1000;
 }
+const relative = new Intl.RelativeTimeFormat("en", { style: "narrow", numeric: "always" });
+const plurals = new Intl.PluralRules("en");
+// A whole number of the largest unit that reads well, such as -3 hours, for "3h ago" or "in 3h".
+function relative_time(seconds) {
+    const magnitude = Math.abs(seconds);
+    const sign = seconds < 0 ? -1 : 1;
+    if (magnitude < 90)
+        return relative.format(sign * Math.round(magnitude), "second");
+    if (magnitude < 5400)
+        return relative.format(sign * Math.round(magnitude / 60), "minute");
+    if (magnitude < 129600)
+        return relative.format(sign * Math.round(magnitude / 3600), "hour");
+    return relative.format(sign * Math.round(magnitude / 86400), "day");
+}
 export function age(epoch) {
     if (!epoch)
         return "never";
-    const seconds = Math.max(0, now_seconds() - epoch);
-    if (seconds < 90)
-        return `${Math.round(seconds)}s ago`;
-    if (seconds < 5400)
-        return `${Math.round(seconds / 60)}m ago`;
-    if (seconds < 129600)
-        return `${Math.round(seconds / 3600)}h ago`;
-    return `${Math.round(seconds / 86400)}d ago`;
+    return relative_time(-Math.max(0, now_seconds() - epoch));
 }
-// How long until the epoch, such as "in 3d", or how long ago when it has passed.
+// How long until the epoch, such as "in 3d", "now" when it is less than 90 seconds off, or how long ago once passed.
 export function until(epoch) {
     if (epoch === null)
         return "—";
     const seconds = epoch - now_seconds();
-    return seconds < 0 ? age(epoch) : `in ${duration(seconds)}`;
+    if (seconds < 0)
+        return age(epoch);
+    return seconds < 90 ? "now" : relative_time(seconds);
 }
 export function duration(seconds) {
     if (seconds === null)
@@ -42,33 +52,19 @@ export function stamp(epoch) {
 // ── Sizes ────────────────────────────────────────────────────────────────────
 // Sizes in binary units, such as "44.4 GiB".
 export function bytes(count) {
-    const units = ["B", "KiB", "MiB", "GiB", "TiB", "PiB"];
-    let value = count;
-    let unit = 0;
-    while (value >= 1024 && unit < units.length - 1) {
-        value /= 1024;
-        unit += 1;
-    }
-    return unit === 0 ? `${Math.round(value)} B` : `${value.toFixed(1)} ${units[unit]}`;
+    return pretty_bytes(count, { binary: true, maximumFractionDigits: 1 });
 }
 // Sizes in decimal units, such as "1.2 GB".
 export function size(count) {
     if (count === null || count === undefined)
         return "—";
-    const units = ["B", "kB", "MB", "GB", "TB", "PB"];
-    let value = Math.abs(count);
-    let unit = 0;
-    while (value >= 1000 && unit < units.length - 1) {
-        value /= 1000;
-        unit += 1;
-    }
-    return `${count < 0 ? "−" : ""}${value.toFixed(value < 10 && unit > 0 ? 1 : 0)} ${units[unit]}`;
+    return pretty_bytes(count, { maximumFractionDigits: 1 });
 }
-// A size change with its sign, such as +1.2 GB or −300 MB.
+// A size change with its sign, such as +1.2 GB or -300 MB.
 export function size_change(count) {
     if (count === null || count === undefined)
         return "—";
-    return count > 0 ? `+${size(count)}` : size(count);
+    return count === 0 ? size(0) : pretty_bytes(count, { signed: true, maximumFractionDigits: 1 });
 }
 // ── Counts ───────────────────────────────────────────────────────────────────
 export function count_change(value) {
@@ -77,5 +73,5 @@ export function count_change(value) {
     return value > 0 ? `+${value.toLocaleString()}` : value < 0 ? `−${Math.abs(value).toLocaleString()}` : "0";
 }
 export function plural(count, word) {
-    return `${count.toLocaleString()} ${word}${count === 1 ? "" : "s"}`;
+    return `${count.toLocaleString()} ${word}${plurals.select(count) === "one" ? "" : "s"}`;
 }

package/dist/web/menus.d.ts

@@ -1,4 +1,3 @@
-import { type Child } from "./dom.ts";
 export interface MenuItem {
     label: string;
     run: () => void;
@@ -8,13 +7,7 @@ export interface MenuItem {
     separator_before?: boolean;
     checked?: boolean;
 }
-export declare function menu_item_class(item: MenuItem): string;
-export declare function menu_item_role(item: MenuItem): "menuitem" | "menuitemcheckbox";
 export declare function on_screen_position(x: number, y: number, width: number, height: number, room_width?: number, room_height?: number): {
     left: number;
     top: number;
 };
-export declare function place_on_screen(element: HTMLElement, x: number, y: number): void;
-export declare function dismiss_on_outside(element: HTMLElement, close: () => void): () => void;
-export declare function open_context_menu(x: number, y: number, items: MenuItem[], on_close?: () => void): () => void;
-export declare function open_popover(x: number, y: number, content: Child, label: string, on_close?: () => void): () => void;

package/dist/web/menus.js

@@ -1,14 +1,6 @@
-// Menus and popovers opened at a point: kept on screen, and closed by Escape, a click elsewhere, scrolling or leaving the window.
-import { h } from "./dom.js";
-export function menu_item_class(item) {
-    return item.danger ? "menu-item danger" : "menu-item";
-}
-export function menu_item_role(item) {
-    return item.checked === undefined ? "menuitem" : "menuitemcheckbox";
-}
-// ── Placing ──────────────────────────────────────────────────────────────────
+// What a menu item holds, and where a menu opened at a point goes so it stays on screen.
 const edge_gap = 4;
-// Where an element opened at a point goes so it stays on screen: flipped to the point's other side, or pushed back from the edge.
+// Flipped to the point's other side near an edge, or pushed back from the edge when neither side has room.
 export function on_screen_position(x, y, width, height, room_width = window.innerWidth, room_height = window.innerHeight) {
     const place = (start, size, room) => {
         if (start + size + edge_gap <= room)
@@ -19,80 +11,3 @@ export function on_screen_position(x, y, width, height, room_width = window.inne
     };
     return { left: place(x, width, room_width), top: place(y, height, room_height) };
 }
-export function place_on_screen(element, x, y) {
-    const size = element.getBoundingClientRect();
-    const position = on_screen_position(x, y, size.width, size.height);
-    element.style.left = `${position.left}px`;
-    element.style.top = `${position.top}px`;
-}
-// ── Dismissing ───────────────────────────────────────────────────────────────
-// Calls close on Escape, a press or right-click outside the element, scrolling outside it, or the window losing focus; returns a function that stops listening.
-export function dismiss_on_outside(element, close) {
-    const outside = (event) => {
-        if (!element.contains(event.target))
-            close();
-    };
-    const escape = (event) => {
-        if (event.key !== "Escape")
-            return;
-        event.preventDefault();
-        event.stopPropagation();
-        close();
-    };
-    // Listening at once would catch the very click that opened the element, which would close it straight away.
-    const attach = setTimeout(() => {
-        document.addEventListener("pointerdown", outside);
-        document.addEventListener("contextmenu", outside);
-    }, 0);
-    window.addEventListener("keydown", escape);
-    window.addEventListener("blur", close);
-    window.addEventListener("scroll", outside, true);
-    return () => {
-        clearTimeout(attach);
-        document.removeEventListener("pointerdown", outside);
-        document.removeEventListener("contextmenu", outside);
-        window.removeEventListener("keydown", escape);
-        window.removeEventListener("blur", close);
-        window.removeEventListener("scroll", outside, true);
-    };
-}
-// ── Opening ──────────────────────────────────────────────────────────────────
-// Puts the element on the page at the point and wires its closing; returns the function that closes it.
-function open_at(element, x, y, on_close) {
-    let stop = () => { };
-    const close = () => {
-        stop();
-        element.remove();
-        on_close?.();
-    };
-    document.body.append(element);
-    place_on_screen(element, x, y);
-    stop = dismiss_on_outside(element, close);
-    return close;
-}
-// A right-click menu at the point, such as a mouse event's clientX and clientY.
-export function open_context_menu(x, y, items, on_close) {
-    const menu = h("div", { class: "menu", role: "menu", tabindex: -1 });
-    const close = open_at(menu, x, y, on_close);
-    menu.append(...items.flatMap((item) => [
-        item.separator_before ? h("div", { class: "menu-separator", role: "separator" }) : null,
-        h("button", {
-            type: "button", class: menu_item_class(item), role: menu_item_role(item),
-            "aria-checked": item.checked === undefined ? null : String(item.checked), disabled: item.disabled ?? false,
-            onclick: () => {
-                close();
-                item.run();
-            },
-        }, h("span", { class: "menu-label" }, item.label), item.hint && h("span", { class: "menu-hint" }, item.hint)),
-    ].filter((node) => node !== null)));
-    place_on_screen(menu, x, y);
-    menu.querySelector(".menu-item:not(:disabled)")?.focus();
-    return close;
-}
-// A popover holding any content, such as a column's filter, with its first field ready to type into.
-export function open_popover(x, y, content, label, on_close) {
-    const popover = h("div", { class: "popover", role: "dialog", "aria-label": label }, content);
-    const close = open_at(popover, x, y, on_close);
-    popover.querySelector("input, select, textarea, button")?.focus();
-    return close;
-}

package/dist/web/preact/badges.d.ts

@@ -0,0 +1,26 @@
+import type { ComponentChildren } from "preact";
+export type Tone = "good" | "warn" | "bad" | "info" | "none";
+export declare function Badge({ tone, title, children }: {
+    tone?: Tone;
+    title?: string;
+    children: ComponentChildren;
+}): import("preact").JSX.Element;
+export declare function StateBadge<State extends string>({ labels, state, title }: {
+    labels: Record<State, [text: string, tone: Tone]>;
+    state: State;
+    title?: string;
+}): import("preact").JSX.Element;
+export declare function Chip({ title, on_click, class_name, children }: {
+    title?: string;
+    on_click?: () => void;
+    class_name?: string;
+    children: ComponentChildren;
+}): import("preact").JSX.Element;
+export declare function Chips({ inline, children }: {
+    inline?: boolean;
+    children: ComponentChildren;
+}): import("preact").JSX.Element;
+export declare function Verdict({ ok, label }: {
+    ok: boolean | null | undefined;
+    label: string;
+}): import("preact").JSX.Element;

package/dist/web/preact/badges.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx, jsxs as _jsxs } from "preact/jsx-runtime";
+// ── Badges ───────────────────────────────────────────────────────────────────
+export function Badge({ tone = "none", title, children }) {
+    return _jsx("span", { class: `badge tone-${tone}`, title: title, children: children });
+}
+// A badge for one of a fixed set of states, each named by its text and tone.
+export function StateBadge({ labels, state, title }) {
+    const [text, tone] = labels[state];
+    return _jsx(Badge, { tone: tone, title: title, children: text });
+}
+// ── Chips ────────────────────────────────────────────────────────────────────
+// A chip, or a button chip that picks what it names when it has on_click, such as a tag to filter by.
+export function Chip({ title, on_click, class_name, children }) {
+    const chip_class = class_name ? `chip ${class_name}` : "chip";
+    return on_click
+        ? _jsx("button", { type: "button", class: chip_class, title: title, onClick: on_click, children: children })
+        : _jsx("span", { class: chip_class, title: title, children: children });
+}
+// A row of chips or badges, with less space between them when they sit inside a line of text.
+export function Chips({ inline = false, children }) {
+    return _jsx("span", { class: inline ? "chips inline-chips" : "chips", children: children });
+}
+// ── Verdicts ─────────────────────────────────────────────────────────────────
+// A pass, fail or not-yet verdict, such as "checks: pass".
+export function Verdict({ ok, label }) {
+    const known = ok !== null && ok !== undefined;
+    return _jsxs("span", { class: `verdict tone-${known ? (ok ? "good" : "bad") : "none"}`, children: [label, ": ", known ? (ok ? "pass" : "fail") : "no verdict"] });
+}

package/dist/web/preact/controls.d.ts

@@ -1,3 +1,4 @@
+import type { ComponentChildren } from "preact";
 interface SegmentedProps<Value extends string> {
     label: string;
     choices: {
@@ -6,8 +7,13 @@ interface SegmentedProps<Value extends string> {
     }[];
     value: Value;
     on_change: (value: Value) => void;
+    class_name?: string;
 }
-export declare function Segmented<Value extends string>({ label, choices, value, on_change }: SegmentedProps<Value>): import("preact").JSX.Element;
+export declare function Segmented<Value extends string>({ label, choices, value, on_change, class_name }: SegmentedProps<Value>): import("preact").JSX.Element;
+export declare function ButtonGroup({ label, children }: {
+    label: string;
+    children: ComponentChildren;
+}): import("preact").JSX.Element;
 interface SwitchProps {
     label: string;
     checked: boolean;
@@ -21,4 +27,11 @@ interface SearchBoxProps {
     on_input: (value: string) => void;
 }
 export declare function SearchBox({ label, value, on_input }: SearchBoxProps): import("preact").JSX.Element;
+interface SelectProps<Value extends string> {
+    label: string;
+    options: [value: Value, text: string][];
+    value: Value;
+    on_change: (value: Value) => void;
+}
+export declare function Select<Value extends string>({ label, options, value, on_change }: SelectProps<Value>): import("preact").JSX.Element;
 export {};

package/dist/web/preact/controls.js

@@ -1,9 +1,12 @@
-import { jsx as _jsx } from "preact/jsx-runtime";
-// Preact controls drawn like the page's own: segmented choices, switches and search fields.
-import { useRef, useState } from "preact/hooks";
+import { jsx as _jsx, jsxs as _jsxs } from "preact/jsx-runtime";
+import { useEffect, useRef, useState } from "preact/hooks";
 // One of a few choices side by side; the chosen one takes the accent.
-export function Segmented({ label, choices, value, on_change }) {
-    return (_jsx("div", { class: "segmented", role: "radiogroup", "aria-label": label, children: choices.map((choice) => (_jsx("button", { type: "button", role: "radio", "aria-checked": value === choice.value, onClick: () => on_change(choice.value), children: choice.label }, choice.value))) }));
+export function Segmented({ label, choices, value, on_change, class_name }) {
+    return (_jsx("div", { class: class_name ? `segmented ${class_name}` : "segmented", role: "radiogroup", "aria-label": label, children: choices.map((choice) => (_jsx("button", { type: "button", role: "radio", "aria-checked": value === choice.value, onClick: () => on_change(choice.value), children: choice.label }, choice.value))) }));
+}
+// Buttons joined into one control, such as zoom out, zoom in and fit.
+export function ButtonGroup({ label, children }) {
+    return _jsx("div", { class: "segmented", role: "group", "aria-label": label, children: children });
 }
 export function Switch({ label, checked, on_change, disabled = false }) {
     const [busy, set_busy] = useState(false);
@@ -25,12 +28,16 @@ export function Switch({ label, checked, on_change, disabled = false }) {
     }
     return _jsx("input", { type: "checkbox", role: "switch", "aria-label": label, checked: checked, disabled: disabled || busy, onChange: change });
 }
-// A search field that hands on what was typed once typing pauses.
+// A search field that hands on what was typed once typing pauses; the field keeps its own text, so a redraw never wipes typing.
 export function SearchBox({ label, value, on_input }) {
     const timer = useRef(undefined);
-    return (_jsx("input", { type: "search", class: "filter", placeholder: label, "aria-label": label, value: value, onInput: (event) => {
+    useEffect(() => () => clearTimeout(timer.current), []);
+    return (_jsx("input", { type: "search", class: "filter", placeholder: label, "aria-label": label, defaultValue: value, onInput: (event) => {
             clearTimeout(timer.current);
             const text = event.currentTarget.value;
             timer.current = window.setTimeout(() => on_input(text), 200);
         } }));
 }
+export function Select({ label, options, value, on_change }) {
+    return (_jsxs("label", { class: "field", children: [_jsx("span", { class: "field-label", children: label }), _jsx("select", { value: value, onChange: (event) => on_change(event.currentTarget.value), children: options.map(([option, text]) => _jsx("option", { value: option, children: text }, option)) })] }));
+}

package/dist/web/preact/dialog.d.ts

@@ -1,4 +1,4 @@
-import type { ComponentChildren } from "preact";
+import { type ComponentChildren } from "preact";
 interface DialogProps {
     title: ComponentChildren;
     on_close: () => void;
@@ -8,4 +8,28 @@ interface DialogProps {
     children: ComponentChildren;
 }
 export declare function Dialog({ title, on_close, buttons, wide, class_name, children }: DialogProps): import("preact").JSX.Element;
+export interface ConfirmOptions {
+    title: string;
+    message: ComponentChildren;
+    confirm_label: string;
+    busy_label?: string;
+    danger?: boolean;
+    wide?: boolean;
+    type_to_confirm?: string;
+    run: () => Promise<void>;
+}
+export declare function ConfirmDialog({ options, on_close }: {
+    options: ConfirmOptions;
+    on_close: () => void;
+}): import("preact").JSX.Element;
+export declare function TextDialog({ title, text, on_close }: {
+    title: string;
+    text: string;
+    on_close: () => void;
+}): import("preact").JSX.Element;
+type Builder = (close: () => void) => ComponentChildren;
+export declare function open_dialog(build: Builder): () => void;
+export declare function confirm_dialog(options: ConfirmOptions): void;
+export declare function text_dialog(title: string, text: string): void;
+export declare function Dialogs(): import("preact").JSX.Element;
 export {};

package/dist/web/preact/dialog.js

@@ -1,6 +1,9 @@
-import { jsx as _jsx, jsxs as _jsxs } from "preact/jsx-runtime";
-import { useEffect, useId, useRef } from "preact/hooks";
-// Shown while it is rendered; closing it by Escape or a button calls on_close, which should stop rendering it.
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "preact/jsx-runtime";
+// Modal dialogs on the native one: any body and buttons, one that asks before an action, and one that shows a long text.
+import { Fragment } from "preact";
+import { useEffect, useId, useRef, useState } from "preact/hooks";
+import { toast } from "./toasts.js";
+// Shown while it is rendered: the page behind it is inert, focus stays inside, and Escape calls on_close.
 export function Dialog({ title, on_close, buttons, wide = false, class_name, children }) {
     const dialog = useRef(null);
     const title_id = useId();
@@ -18,3 +21,53 @@ export function Dialog({ title, on_close, buttons, wide = false, class_name, chi
             close.current();
         }, children: [_jsx("h2", { id: title_id, children: title }), _jsx("div", { class: "dialog-body", children: children }), buttons && _jsx("div", { class: "dialog-buttons", children: buttons })] }));
 }
+export function ConfirmDialog({ options, on_close }) {
+    const [typed, set_typed] = useState("");
+    const [busy, set_busy] = useState(false);
+    const ready = options.type_to_confirm === undefined || typed === options.type_to_confirm;
+    async function confirm() {
+        set_busy(true);
+        try {
+            await options.run();
+        }
+        finally {
+            on_close();
+        }
+    }
+    return (_jsxs(Dialog, { title: options.title, on_close: () => { if (!busy)
+            on_close(); }, wide: options.wide, buttons: _jsxs(_Fragment, { children: [_jsx("button", { disabled: busy, onClick: on_close, children: "Cancel" }), _jsx("button", { class: options.danger ? "danger solid" : "accent solid", disabled: !ready || busy, onClick: confirm, autoFocus: options.type_to_confirm === undefined, children: busy ? options.busy_label ?? "Working…" : options.confirm_label })] }), children: [typeof options.message === "string" ? _jsx("p", { children: options.message }) : options.message, options.type_to_confirm !== undefined && (_jsxs("label", { class: "type-confirm", children: [_jsxs("span", { children: ["Type ", _jsx("strong", { children: options.type_to_confirm }), " to confirm:"] }), _jsx("input", { type: "text", class: "filter", autocomplete: "off", autoFocus: true, "aria-label": `Type ${options.type_to_confirm} to confirm`, value: typed, onInput: (event) => set_typed(event.currentTarget.value) })] }))] }));
+}
+// Shows a long text result, such as a preview, with a button to copy it.
+export function TextDialog({ title, text, on_close }) {
+    return (_jsx(Dialog, { title: title, on_close: on_close, wide: true, buttons: _jsxs(_Fragment, { children: [_jsx("button", { onClick: () => void navigator.clipboard?.writeText(text).then(() => toast("Copied.")), children: "Copy" }), _jsx("button", { class: "accent solid", onClick: on_close, children: "Close" })] }), children: _jsx("pre", { class: "output", children: text }) }));
+}
+let open = [];
+let next_id = 1;
+const listeners = new Set();
+function publish(dialogs) {
+    open = dialogs;
+    for (const listener of listeners)
+        listener(open);
+}
+// Opens what the builder makes, such as a Dialog, from an event handler; returns the function that closes it.
+export function open_dialog(build) {
+    const id = next_id++;
+    const close = () => publish(open.filter((dialog) => dialog.id !== id));
+    publish([...open, { id, build }]);
+    return close;
+}
+export function confirm_dialog(options) {
+    open_dialog((close) => _jsx(ConfirmDialog, { options: options, on_close: close }));
+}
+export function text_dialog(title, text) {
+    open_dialog((close) => _jsx(TextDialog, { title: title, text: text, on_close: close }));
+}
+// Where dialogs opened from anywhere are drawn; the Shell holds one.
+export function Dialogs() {
+    const [dialogs, set_dialogs] = useState(open);
+    useEffect(() => {
+        listeners.add(set_dialogs);
+        return () => void listeners.delete(set_dialogs);
+    }, []);
+    return _jsx(_Fragment, { children: dialogs.map((dialog) => _jsx(Fragment, { children: dialog.build(() => publish(open.filter((other) => other.id !== dialog.id))) }, dialog.id)) });
+}

package/dist/web/preact/layout.d.ts

@@ -1,23 +1,28 @@
-import type { ComponentChildren } from "preact";
-import type { Tone } from "../badges.ts";
-export type { Tone } from "../badges.ts";
-interface SectionProps {
+import { type ComponentChildren } from "preact";
+import type { Tone } from "./badges.tsx";
+export declare function Section({ title, tools, children }: {
     title: ComponentChildren;
     tools?: ComponentChildren;
-    children: ComponentChildren;
-}
-export declare function Section({ title, tools, children }: SectionProps): import("preact").JSX.Element;
+    children?: ComponentChildren;
+}): import("preact").JSX.Element;
+export type Fact = [label: string, value: ComponentChildren, class_name?: string];
 export declare function Facts({ rows, layout }: {
-    rows: [label: string, value: ComponentChildren][];
+    rows: (Fact | null | false)[];
     layout?: "grid" | "rows";
 }): import("preact").JSX.Element;
+export declare function Stack({ tight, children }: {
+    tight?: boolean;
+    children: ComponentChildren;
+}): import("preact").JSX.Element;
 interface TileProps {
     label: string;
     value: ComponentChildren;
     tone?: Tone;
+    class_name?: string | null;
     href?: string;
+    value_first?: boolean;
 }
-export declare function Tile({ label, value, tone, href }: TileProps): import("preact").JSX.Element;
+export declare function Tile({ label, value, tone, class_name, href, value_first }: TileProps): import("preact").JSX.Element;
 export declare function Tiles({ children }: {
     children: ComponentChildren;
 }): import("preact").JSX.Element;
@@ -34,47 +39,42 @@ export declare function Card({ title, subtitle, badge, class_name, href, on_clic
 export declare function Cards({ children }: {
     children: ComponentChildren;
 }): import("preact").JSX.Element;
-interface TabsProps<Id extends string> {
-    items: {
-        id: Id;
-        label: string;
-        href?: string;
-    }[];
+export interface TabItem<Id extends string> {
+    id: Id;
+    label: string;
+    href?: string;
+}
+export declare function Tabs<Id extends string>({ items, active, label, on_select }: {
+    items: TabItem<Id>[];
     active: Id;
     label?: string;
     on_select?: (id: Id) => void;
-}
-export declare function Tabs<Id extends string>({ items, active, label, on_select }: TabsProps<Id>): import("preact").JSX.Element;
-export declare function Badge({ tone, title, children }: {
-    tone?: Tone;
-    title?: string;
-    children: ComponentChildren;
 }): import("preact").JSX.Element;
-export declare function Chip({ title, on_click, children }: {
-    title?: string;
-    on_click?: () => void;
-    children: ComponentChildren;
+export declare function Crumbs({ items }: {
+    items: [label: string, href: string | null][];
 }): import("preact").JSX.Element;
-export declare function Skeleton({ lines }: {
-    lines?: number;
-}): import("preact").JSX.Element;
-export declare function Empty({ title, hint }: {
-    title: string;
-    hint?: ComponentChildren;
+export declare function Toolbar({ children }: {
+    children: ComponentChildren;
 }): import("preact").JSX.Element;
-export declare function Failure({ error, retry }: {
-    error: unknown;
-    retry: () => void;
+interface Step {
+    text: string;
+    href: string | null;
+}
+export declare function Stepper({ label, previous, position, next }: {
+    label: string;
+    previous: Step;
+    position: ComponentChildren;
+    next: Step;
 }): import("preact").JSX.Element;
 export declare function SettingsGroup({ heading, hint, children }: {
     heading: string;
     hint?: ComponentChildren;
     children: ComponentChildren;
 }): import("preact").JSX.Element;
-interface SettingRowProps {
+export declare function SettingRow({ label, hint, as_label, children }: {
     label: ComponentChildren;
     hint?: ComponentChildren;
     as_label?: boolean;
     children: ComponentChildren;
-}
-export declare function SettingRow({ label, hint, as_label, children }: SettingRowProps): import("preact").JSX.Element;
+}): import("preact").JSX.Element;
+export {};

package/dist/web/preact/layout.js

@@ -1,15 +1,24 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "preact/jsx-runtime";
+// The pieces a page is laid out with: panels, facts, tiles, cards, tabs, breadcrumbs, toolbars, steppers and settings rows.
+import { Fragment } from "preact";
+// ── Panels ───────────────────────────────────────────────────────────────────
 export function Section({ title, tools, children }) {
     return (_jsxs("section", { class: "panel", children: [_jsxs("div", { class: "panel-head", children: [_jsx("h2", { children: title }), tools && _jsx("div", { class: "panel-tools", children: tools })] }), children] }));
 }
 // Labelled values in a grid of tiles, or as rows of label and value for long values such as paths.
 export function Facts({ rows, layout = "grid" }) {
-    return (_jsx("dl", { class: layout === "rows" ? "facts facts-rows" : "facts", children: rows.map(([label, value]) => (_jsxs("div", { children: [_jsx("dt", { children: label }), _jsx("dd", { children: value ?? "—" })] }, label))) }));
+    return (_jsx("dl", { class: layout === "rows" ? "facts facts-rows" : "facts", children: rows.filter((row) => Boolean(row)).map(([label, value, class_name]) => (_jsxs("div", { children: [_jsx("dt", { children: label }), _jsx("dd", { class: class_name, children: value ?? "—" })] }, label))) }));
 }
-// One headline figure under its label, its edge marked by its tone.
-export function Tile({ label, value, tone, href }) {
-    const tile_class = tone && tone !== "none" ? `tile tile-${tone}` : "tile";
-    const children = _jsxs(_Fragment, { children: [_jsx("div", { class: "tile-label", children: label }), _jsx("div", { class: "tile-value", children: value })] });
+// A stack of panels or blocks spaced by its gap, tighter when tight.
+export function Stack({ tight = false, children }) {
+    return _jsx("div", { class: tight ? "stack tight" : "stack", children: children });
+}
+// One headline figure and its label.
+export function Tile({ label, value, tone, class_name, href, value_first = false }) {
+    const tile_class = ["tile", tone && tone !== "none" && `tile-${tone}`, class_name].filter(Boolean).join(" ");
+    const label_part = _jsx("div", { class: "tile-label", children: label });
+    const value_part = _jsx("div", { class: "tile-value", children: value });
+    const children = value_first ? _jsxs(_Fragment, { children: [value_part, label_part] }) : _jsxs(_Fragment, { children: [label_part, value_part] });
     return href ? _jsx("a", { class: tile_class, href: href, children: children }) : _jsx("div", { class: tile_class, children: children });
 }
 export function Tiles({ children }) {
@@ -37,33 +46,26 @@ export function Tabs({ items, active, label = "Sections", on_select }) {
                 : _jsx("button", { type: "button", class: tab_class, "aria-current": current, onClick: () => on_select?.(item.id), children: item.label }, item.id);
         }) }));
 }
-// ── Badges ───────────────────────────────────────────────────────────────────
-export function Badge({ tone = "none", title, children }) {
-    return _jsx("span", { class: `badge tone-${tone}`, title: title, children: children });
-}
-export function Chip({ title, on_click, children }) {
-    return on_click
-        ? _jsx("button", { type: "button", class: "chip", title: title, onClick: on_click, children: children })
-        : _jsx("span", { class: "chip", title: title, children: children });
-}
-// ── States ───────────────────────────────────────────────────────────────────
-export function Skeleton({ lines = 3 }) {
-    return (_jsx("div", { class: "skeleton", "aria-busy": "true", "aria-label": "Loading", children: Array.from({ length: lines }, (_, index) => _jsx("div", { class: "skeleton-line", style: { width: `${90 - index * 15}%` } }, index)) }));
+export function Crumbs({ items }) {
+    return (_jsx("nav", { class: "crumbs", "aria-label": "Breadcrumb", children: items.map(([label, href], index) => (_jsxs(Fragment, { children: [index > 0 && _jsx("span", { class: "muted", "aria-hidden": "true", children: " / " }), href ? _jsx("a", { href: href, children: label }) : _jsx("span", { "aria-current": "page", children: label })] }, index))) }));
 }
-export function Empty({ title, hint }) {
-    return (_jsxs("div", { class: "empty", children: [_jsx("p", { class: "empty-title", children: title }), hint && _jsx("p", { class: "muted", children: hint })] }));
+// ── Toolbars ─────────────────────────────────────────────────────────────────
+export function Toolbar({ children }) {
+    return _jsx("div", { class: "toolbar", children: children });
 }
-export function Failure({ error, retry }) {
-    return (_jsxs("div", { class: "failure", role: "alert", children: [_jsxs("p", { children: ["Could not load this: ", error instanceof Error ? error.message : String(error)] }), _jsx("button", { onClick: retry, children: "Retry" })] }));
+// Steps to the item before or after this one, each a link or a dead button when there is none, with where this one stands between.
+export function Stepper({ label, previous, position, next }) {
+    const step = (target) => target.href === null
+        ? _jsx("button", { disabled: true, children: target.text })
+        : _jsx("a", { class: "button", href: target.href, children: target.text });
+    return _jsxs("div", { class: "stepper", role: "group", "aria-label": label, children: [step(previous), _jsx("span", { class: "muted", children: position }), step(next)] });
 }
 // ── Settings ─────────────────────────────────────────────────────────────────
 export function SettingsGroup({ heading, hint, children }) {
     return (_jsxs("section", { class: "settings-group", children: [_jsx("h3", { class: "settings-heading", children: heading }), hint && _jsx("p", { class: "setting-hint", children: hint }), children] }));
 }
-// A setting's name and hint on one side and its control on the other.
+// A setting's name and hint on one side and its control on the other; as a label, clicking anywhere works its one control.
 export function SettingRow({ label, hint, as_label = false, children }) {
     const text = (_jsxs("span", { class: "setting-text", children: [_jsx("span", { class: "setting-label", children: label }), hint && _jsx("span", { class: "setting-hint", children: hint })] }));
-    return as_label
-        ? _jsxs("label", { class: "setting-row", children: [text, children] })
-        : _jsxs("div", { class: "setting-row", children: [text, children] });
+    return as_label ? _jsxs("label", { class: "setting-row", children: [text, children] }) : _jsxs("div", { class: "setting-row", children: [text, children] });
 }