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

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

@@ -0,0 +1,72 @@
+import { type InputHTMLAttributes, type ReactNode } from "react";
+import { type TreeItem } from "../tree.ts";
+interface SegmentedProps<Value extends string> {
+    label: string;
+    choices: {
+        value: Value;
+        label: string;
+    }[];
+    value: Value;
+    on_change: (value: Value) => void;
+    class_name?: string;
+}
+export declare function Segmented<Value extends string>({ label, choices, value, on_change, class_name }: SegmentedProps<Value>): import("react").JSX.Element;
+export declare function ButtonGroup({ label, children }: {
+    label: string;
+    children: ReactNode;
+}): import("react").JSX.Element;
+interface SwitchProps {
+    label: string;
+    checked: boolean;
+    on_change: (on: boolean) => Promise<boolean | void> | boolean | void;
+    disabled?: boolean;
+}
+export declare function Switch({ label, checked, on_change, disabled }: SwitchProps): import("react").JSX.Element;
+interface SearchBoxProps {
+    label: string;
+    value: string;
+    on_input: (value: string) => void;
+    auto_focus?: boolean;
+}
+export declare function SearchBox({ label, value, on_input, auto_focus }: SearchBoxProps): import("react").JSX.Element;
+interface SelectProps<Value extends string | number> {
+    label: string;
+    options: [value: Value, text: string][];
+    value: Value;
+    on_change: (value: Value) => void;
+    bare?: boolean;
+}
+export declare function Select<Value extends string | number>({ label, options, value, on_change, bare }: SelectProps<Value>): import("react").JSX.Element;
+type CommitInputProps = Omit<InputHTMLAttributes<HTMLInputElement>, "value" | "defaultValue" | "onChange"> & {
+    value: string | number;
+    on_commit: (event: {
+        currentTarget: HTMLInputElement;
+    }) => void;
+};
+export declare function CommitInput({ value, on_commit, onBlur, onKeyDown, ...rest }: CommitInputProps): import("react").JSX.Element;
+interface DateTimeFieldProps {
+    label: string;
+    value: string | null;
+    on_change: (value: string | null) => void;
+    allow_time?: boolean;
+}
+export declare function DateTimeField({ label, value, on_change, allow_time }: DateTimeFieldProps): import("react").JSX.Element;
+interface ColorPickerProps {
+    label: string;
+    value: string | null;
+    swatches: string[];
+    on_change: (color: string | null) => void;
+    allow_none?: boolean;
+}
+export declare function ColorPicker({ label, value, swatches, on_change, allow_none }: ColorPickerProps): import("react").JSX.Element;
+interface TreeSelectProps<Item extends TreeItem> {
+    label: string;
+    items: Item[];
+    name_of: (item: Item) => string;
+    value: string;
+    blank_label: string;
+    disabled_ids?: readonly string[];
+    on_change: (id: string) => void;
+}
+export declare function TreeSelect<Item extends TreeItem>({ label, items, name_of, value, blank_label, disabled_ids, on_change }: TreeSelectProps<Item>): import("react").JSX.Element;
+export {};

package/dist/web/react/controls.js

@@ -0,0 +1,88 @@
+import { createElement as _createElement } from "react";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// React controls drawn like the page's own: segmented choices, switches, search fields, selects, and date, colour and tree pickers.
+import { useEffect, useRef, useState } from "react";
+import { in_tree_order, path_names } from "../tree.js";
+// One of a few choices side by side; the chosen one takes the accent.
+export function Segmented({ label, choices, value, on_change, class_name }) {
+    return (_jsx("div", { className: 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", { className: "segmented", role: "group", "aria-label": label, children: children });
+}
+export function Switch({ label, checked, on_change, disabled = false }) {
+    const [busy, set_busy] = useState(false);
+    async function change(event) {
+        const box = event.currentTarget;
+        const on = box.checked;
+        set_busy(true);
+        try {
+            if ((await on_change(on)) === false)
+                box.checked = !on;
+        }
+        catch (error) {
+            box.checked = !on;
+            throw error;
+        }
+        finally {
+            set_busy(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; the field keeps its own text, so a redraw never wipes typing, and shows a value changed from outside, such as one cleared.
+export function SearchBox({ label, value, on_input, auto_focus = false }) {
+    const field = useRef(null);
+    const timer = useRef(undefined);
+    const handed_on = useRef(value);
+    useEffect(() => () => clearTimeout(timer.current), []);
+    useEffect(() => {
+        if (value === handed_on.current || !field.current)
+            return;
+        clearTimeout(timer.current);
+        handed_on.current = value;
+        field.current.value = value;
+    }, [value]);
+    return (_jsx("input", { ref: field, type: "search", className: "filter", placeholder: label, "aria-label": label, defaultValue: value, autoFocus: auto_focus, onChange: (event) => {
+            clearTimeout(timer.current);
+            const text = event.currentTarget.value;
+            timer.current = window.setTimeout(() => {
+                handed_on.current = text;
+                on_input(text);
+            }, 200);
+        } }));
+}
+export function Select({ label, options, value, on_change, bare = false }) {
+    const change = (event) => {
+        const text = event.currentTarget.value;
+        on_change((options.find(([option]) => String(option) === text)?.[0] ?? text));
+    };
+    const select = (_jsx("select", { value: value, "aria-label": bare ? label : undefined, onChange: change, children: options.map(([option, text]) => _jsx("option", { value: option, children: text }, option)) }));
+    if (bare)
+        return select;
+    return (_jsxs("label", { className: "field", children: [_jsx("span", { className: "field-label", children: label }), select] }));
+}
+// A field that saves once it is left or Enter is pressed, as a native change event does, and shows the saved value again whenever that changes.
+export function CommitInput({ value, on_commit, onBlur, onKeyDown, ...rest }) {
+    return (_createElement("input", { ...rest, key: String(value), defaultValue: value, onBlur: (event) => { onBlur?.(event); on_commit(event); }, onKeyDown: (event) => { onKeyDown?.(event); if (event.key === "Enter")
+            event.currentTarget.blur(); } }));
+}
+// A local date with an optional time and a clear button; clearing the date clears the time.
+export function DateTimeField({ label, value, on_change, allow_time = true }) {
+    const [day = "", time = ""] = (value ?? "").split("T");
+    const join = (next_day, next_time) => on_change(next_day ? (next_time && allow_time ? `${next_day}T${next_time}` : next_day) : null);
+    return (_jsxs("div", { className: "field date-time-field", children: [_jsx("span", { className: "field-label", children: label }), _jsxs("div", { className: "date-time-inputs", children: [_jsx("input", { type: "date", "aria-label": `${label} date`, value: day, onChange: (event) => join(event.currentTarget.value, time) }), day && allow_time && _jsx("input", { type: "time", "aria-label": `${label} time`, value: time, onChange: (event) => join(day, event.currentTarget.value) }), day && _jsx("button", { type: "button", className: "icon", "aria-label": `Clear ${label.toLowerCase()} date`, onClick: () => on_change(null), children: "\u00D7" })] })] }));
+}
+// Swatches, a None choice, and the system colour chooser for any other colour.
+export function ColorPicker({ label, value, swatches, on_change, allow_none = true }) {
+    const is_swatch = value !== null && swatches.some((swatch) => swatch.toLowerCase() === value.toLowerCase());
+    const custom = value !== null && !is_swatch;
+    return (_jsxs("div", { className: "color-picker", role: "radiogroup", "aria-label": label, children: [allow_none && _jsx("button", { type: "button", role: "radio", className: "color-swatch none", "aria-checked": value === null, "aria-label": "No colour", onClick: () => on_change(null) }), swatches.map((swatch) => (_jsx("button", { type: "button", role: "radio", className: "color-swatch", style: { "--swatch-color": swatch }, "aria-checked": value !== null && swatch.toLowerCase() === value.toLowerCase(), "aria-label": swatch, title: swatch, onClick: () => on_change(swatch) }, swatch))), _jsx("input", { type: "color", className: custom ? "color-custom chosen" : "color-custom", "aria-label": "Other colour", value: value ?? "#888888", onChange: (event) => on_change(event.currentTarget.value) })] }));
+}
+// A select listing a tree indented, each choice's whole path on hover and in the closed select.
+export function TreeSelect({ label, items, name_of, value, blank_label, disabled_ids = [], on_change }) {
+    const depth_of = (item) => path_names(item, items, name_of).length - 1;
+    const chosen = items.find((item) => item.id === value);
+    return (_jsxs("select", { className: "tree-select", "aria-label": label, value: value, title: chosen ? path_names(chosen, items, name_of).join(" › ") : undefined, onChange: (event) => on_change(event.currentTarget.value), children: [_jsx("option", { value: "", children: blank_label }), in_tree_order(items).map((item) => (_jsx("option", { value: item.id, disabled: disabled_ids.includes(item.id), title: path_names(item, items, name_of).join(" › "), children: `${"\u2003".repeat(depth_of(item))}${name_of(item)}` }, item.id)))] }));
+}

package/dist/web/{preact → react}/dialog.d.ts

@@ -1,16 +1,16 @@
-import { type ComponentChildren } from "preact";
+import { type ReactNode } from "react";
 interface DialogProps {
-    title: ComponentChildren;
+    title: ReactNode;
     on_close: () => void;
-    buttons?: ComponentChildren;
+    buttons?: ReactNode;
     wide?: boolean;
     class_name?: string;
-    children: ComponentChildren;
+    children: ReactNode;
 }
-export declare function Dialog({ title, on_close, buttons, wide, class_name, children }: DialogProps): import("preact").JSX.Element;
+export declare function Dialog({ title, on_close, buttons, wide, class_name, children }: DialogProps): import("react").JSX.Element;
 export interface ConfirmOptions {
     title: string;
-    message: ComponentChildren;
+    message: ReactNode;
     confirm_label: string;
     busy_label?: string;
     danger?: boolean;
@@ -21,15 +21,15 @@ export interface ConfirmOptions {
 export declare function ConfirmDialog({ options, on_close }: {
     options: ConfirmOptions;
     on_close: () => void;
-}): import("preact").JSX.Element;
+}): import("react").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;
+}): import("react").JSX.Element;
+type Builder = (close: () => void) => ReactNode;
 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 declare function Dialogs(): import("react").JSX.Element;
 export {};

package/dist/web/{preact → react}/dialog.js

@@ -1,9 +1,8 @@
-import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "preact/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/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 { Fragment, useEffect, useId, useRef, useState } from "react";
 import { toast } from "./toasts.js";
-// Shown while it is rendered: the page behind it is inert, focus stays inside, and Escape calls on_close.
+// Shown while it is rendered: the page behind it is inert, focus stays inside, Escape calls on_close, and focus goes back to the opener after.
 export function Dialog({ title, on_close, buttons, wide = false, class_name, children }) {
     const dialog = useRef(null);
     const title_id = useId();
@@ -11,15 +10,21 @@ export function Dialog({ title, on_close, buttons, wide = false, class_name, chi
     close.current = on_close;
     useEffect(() => {
         const element = dialog.current;
+        const opener = document.activeElement;
         element.showModal();
-        return () => element.close();
+        return () => {
+            element.close();
+            // The dialog is already gone from the page here, so the browser cannot hand focus back by itself.
+            if (opener?.isConnected && opener !== document.body)
+                opener.focus();
+        };
     }, []);
-    return (_jsxs("dialog", { ref: dialog, class: ["dialog", wide && "wide", class_name].filter(Boolean).join(" "), "aria-labelledby": title_id, onCancel: (event) => {
+    return (_jsxs("dialog", { ref: dialog, className: ["dialog", wide && "wide", class_name].filter(Boolean).join(" "), "aria-labelledby": title_id, onCancel: (event) => {
             // Escape asks the owner to close, so the dialog never closes behind its owner's back.
             event.preventDefault();
             event.stopPropagation();
             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 })] }));
+        }, children: [_jsx("h2", { id: title_id, children: title }), _jsx("div", { className: "dialog-body", children: children }), buttons && _jsx("div", { className: "dialog-buttons", children: buttons })] }));
 }
 export function ConfirmDialog({ options, on_close }) {
     const [typed, set_typed] = useState("");
@@ -35,11 +40,11 @@ export function ConfirmDialog({ options, 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) })] }))] }));
+            on_close(); }, wide: options.wide, buttons: _jsxs(_Fragment, { children: [_jsx("button", { disabled: busy, onClick: on_close, children: "Cancel" }), _jsx("button", { className: 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", { className: "type-confirm", children: [_jsxs("span", { children: ["Type ", _jsx("strong", { children: options.type_to_confirm }), " to confirm:"] }), _jsx("input", { type: "text", className: "filter", autoComplete: "off", autoFocus: true, "aria-label": `Type ${options.type_to_confirm} to confirm`, value: typed, onChange: (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 }) }));
+    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", { className: "accent solid", onClick: on_close, children: "Close" })] }), children: _jsx("pre", { className: "output", children: text }) }));
 }
 let open = [];
 let next_id = 1;

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

@@ -0,0 +1,100 @@
+import { type MouseEvent, type ReactNode } from "react";
+import type { Tone } from "./badges.tsx";
+export { moved } from "../tables.ts";
+interface SectionProps {
+    title: ReactNode;
+    tools?: ReactNode;
+    class_name?: string;
+    on_context_menu?: (event: MouseEvent<HTMLElement>) => void;
+    children?: ReactNode;
+}
+export declare function Section({ title, tools, class_name, on_context_menu, children }: SectionProps): import("react").JSX.Element;
+export type Fact = [label: string, value: ReactNode, class_name?: string];
+export declare function Facts({ rows, layout }: {
+    rows: (Fact | null | false)[];
+    layout?: "grid" | "rows";
+}): import("react").JSX.Element;
+export declare function Stack({ tight, children }: {
+    tight?: boolean;
+    children: ReactNode;
+}): import("react").JSX.Element;
+interface TileProps {
+    label: string;
+    value: ReactNode;
+    tone?: Tone;
+    class_name?: string | null;
+    href?: string;
+    value_first?: boolean;
+}
+export declare function Tile({ label, value, tone, class_name, href, value_first }: TileProps): import("react").JSX.Element;
+export declare function Tiles({ children }: {
+    children: ReactNode;
+}): import("react").JSX.Element;
+interface CardProps {
+    title: ReactNode;
+    subtitle?: ReactNode;
+    badge?: ReactNode;
+    class_name?: string;
+    href?: string;
+    on_click?: () => void;
+    children?: ReactNode;
+}
+export declare function Card({ title, subtitle, badge, class_name, href, on_click, children }: CardProps): import("react").JSX.Element;
+export declare function Cards({ children }: {
+    children: ReactNode;
+}): import("react").JSX.Element;
+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;
+}): import("react").JSX.Element;
+export declare function Crumbs({ items }: {
+    items: [label: string, href: string | null][];
+}): import("react").JSX.Element;
+export declare function Toolbar({ children }: {
+    children: ReactNode;
+}): import("react").JSX.Element;
+interface Step {
+    text: string;
+    href: string | null;
+}
+export declare function Stepper({ label, previous, position, next }: {
+    label: string;
+    previous: Step;
+    position: ReactNode;
+    next: Step;
+}): import("react").JSX.Element;
+export declare function SettingsGroup({ heading, hint, children }: {
+    heading: ReactNode;
+    hint?: ReactNode;
+    children: ReactNode;
+}): import("react").JSX.Element;
+export declare function SettingRow({ label, hint, as_label, class_name, children }: {
+    label: ReactNode;
+    hint?: ReactNode;
+    as_label?: boolean;
+    class_name?: string;
+    children: ReactNode;
+}): import("react").JSX.Element;
+interface RowActionsProps {
+    index: number;
+    count: number;
+    on_move: (from: number, to: number) => void;
+    on_remove?: () => void;
+    remove_label: string;
+}
+export declare function RowActions({ index, count, on_move, on_remove, remove_label }: RowActionsProps): import("react").JSX.Element;
+interface SelectionBarProps {
+    count: number;
+    total: number;
+    on_clear: () => void;
+    on_select_all: () => void;
+    children: ReactNode;
+}
+export declare function SelectionBar({ count, total, on_clear, on_select_all, children }: SelectionBarProps): import("react").JSX.Element;

package/dist/web/react/layout.js

@@ -0,0 +1,80 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// The pieces a page is laid out with: panels, facts, tiles, cards, tabs, breadcrumbs, toolbars, steppers, settings rows and list row buttons.
+import { Fragment } from "react";
+export { moved } from "../tables.js";
+export function Section({ title, tools, class_name, on_context_menu, children }) {
+    return (_jsxs("section", { className: class_name ? `panel ${class_name}` : "panel", onContextMenu: on_context_menu, children: [_jsxs("div", { className: "panel-head", children: [_jsx("h2", { children: title }), tools && _jsx("div", { className: "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", { className: 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", { className: class_name, children: value ?? "—" })] }, label))) }));
+}
+// A stack of panels or blocks spaced by its gap, tighter when tight.
+export function Stack({ tight = false, children }) {
+    return _jsx("div", { className: 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", { className: "tile-label", children: label });
+    const value_part = _jsx("div", { className: "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", { className: tile_class, href: href, children: children }) : _jsx("div", { className: tile_class, children: children });
+}
+export function Tiles({ children }) {
+    return _jsx("div", { className: "tiles", children: children });
+}
+// A titled card for one thing among many, laid out in a grid of Cards.
+export function Card({ title, subtitle, badge, class_name, href, on_click, children }) {
+    const card_class = class_name ? `card ${class_name}` : "card";
+    const body = (_jsxs(_Fragment, { children: [_jsxs("div", { className: "card-head", children: [_jsx("strong", { children: title }), badge] }), subtitle && _jsx("div", { className: "muted card-host", children: subtitle }), children] }));
+    if (href)
+        return _jsx("a", { className: card_class, href: href, children: body });
+    if (on_click)
+        return _jsx("button", { type: "button", className: card_class, onClick: on_click, children: body });
+    return _jsx("div", { className: card_class, children: body });
+}
+export function Cards({ children }) {
+    return _jsx("div", { className: "grid", children: children });
+}
+export function Tabs({ items, active, label = "Sections", on_select }) {
+    return (_jsx("nav", { className: "tabs", "aria-label": label, children: items.map((item) => {
+            const tab_class = item.id === active ? "tab active" : "tab";
+            const current = item.id === active ? "page" : undefined;
+            return item.href
+                ? _jsx("a", { className: tab_class, href: item.href, "aria-current": current, children: item.label }, item.id)
+                : _jsx("button", { type: "button", className: tab_class, "aria-current": current, onClick: () => on_select?.(item.id), children: item.label }, item.id);
+        }) }));
+}
+export function Crumbs({ items }) {
+    return (_jsx("nav", { className: "crumbs", "aria-label": "Breadcrumb", children: items.map(([label, href], index) => (_jsxs(Fragment, { children: [index > 0 && _jsx("span", { className: "muted", "aria-hidden": "true", children: " / " }), href ? _jsx("a", { href: href, children: label }) : _jsx("span", { "aria-current": "page", children: label })] }, index))) }));
+}
+// ── Toolbars ─────────────────────────────────────────────────────────────────
+export function Toolbar({ children }) {
+    return _jsx("div", { className: "toolbar", children: children });
+}
+// 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", { className: "button", href: target.href, children: target.text });
+    return _jsxs("div", { className: "stepper", role: "group", "aria-label": label, children: [step(previous), _jsx("span", { className: "muted", children: position }), step(next)] });
+}
+// ── Settings ─────────────────────────────────────────────────────────────────
+export function SettingsGroup({ heading, hint, children }) {
+    return (_jsxs("section", { className: "settings-group", children: [_jsx("h3", { className: "settings-heading", children: heading }), hint && _jsx("p", { className: "setting-hint", children: hint }), children] }));
+}
+// 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, class_name, children }) {
+    const row_class = class_name ? `setting-row ${class_name}` : "setting-row";
+    const text = (_jsxs("span", { className: "setting-text", children: [_jsx("span", { className: "setting-label", children: label }), hint && _jsx("span", { className: "setting-hint", children: hint })] }));
+    return as_label ? _jsxs("label", { className: row_class, children: [text, children] }) : _jsxs("div", { className: row_class, children: [text, children] });
+}
+// The up, down and remove buttons of a row in an ordered list.
+export function RowActions({ index, count, on_move, on_remove, remove_label }) {
+    return (_jsxs("span", { className: "row-actions", children: [_jsx("button", { type: "button", className: "icon", "aria-label": "Move up", disabled: index === 0, onClick: () => on_move(index, index - 1), children: "\u2191" }), _jsx("button", { type: "button", className: "icon", "aria-label": "Move down", disabled: index === count - 1, onClick: () => on_move(index, index + 1), children: "\u2193" }), on_remove && _jsx("button", { type: "button", className: "icon danger", "aria-label": remove_label, onClick: on_remove, children: "\u00D7" })] }));
+}
+// A bar floating at the foot of the page while rows are picked: how many, Select all, the actions, and a button that lets them go.
+export function SelectionBar({ count, total, on_clear, on_select_all, children }) {
+    return (_jsxs("div", { className: "selection-bar", role: "toolbar", "aria-label": "Selected rows", children: [_jsx("button", { type: "button", className: "icon", "aria-label": "Clear selection", title: "Clear selection (Esc)", onClick: on_clear, children: "\u2715" }), _jsxs("span", { className: "selection-count", children: [count, " selected"] }), count < total && _jsx("button", { type: "button", onClick: on_select_all, children: "Select all" }), _jsx("span", { className: "selection-divider", "aria-hidden": "true" }), children] }));
+}

package/dist/web/react/menus.d.ts

@@ -0,0 +1,31 @@
+import { type ReactNode } from "react";
+import { type MenuItem } from "../menus.ts";
+export type { MenuItem } from "../menus.ts";
+interface MenuListProps {
+    items: MenuItem[];
+    on_close: () => void;
+}
+export declare function MenuList({ items, on_close }: MenuListProps): import("react").JSX.Element;
+interface ContextMenuProps {
+    x: number;
+    y: number;
+    items: MenuItem[];
+    on_close: () => void;
+    label?: string;
+}
+export declare function ContextMenu({ x, y, items, on_close, label }: ContextMenuProps): import("react").JSX.Element;
+export declare function open_context_menu(event: {
+    clientX: number;
+    clientY: number;
+    preventDefault(): void;
+}, items: MenuItem[]): void;
+export declare function ContextMenus(): import("react").JSX.Element | null;
+interface PopoverProps {
+    anchor?: HTMLElement | null;
+    x?: number;
+    y?: number;
+    label: string;
+    on_close: () => void;
+    children: ReactNode;
+}
+export declare function Popover({ anchor, x, y, label, on_close, children }: PopoverProps): import("react").JSX.Element;

package/dist/web/react/menus.js

@@ -0,0 +1,159 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Menus and popovers on the native popover: closed by Escape or a click elsewhere, and here also by scrolling or leaving the window.
+import { Fragment, useEffect, useId, useLayoutEffect, useRef, useState } from "react";
+import { item_after_key, item_starting_with, on_screen_position } from "../menus.js";
+// Shows the element as a popover while it is rendered, calling the latest on_close once it closes for any reason.
+function use_popover(on_close, opener) {
+    const element = useRef(null);
+    const close = useRef(on_close);
+    close.current = on_close;
+    const focused_before = useRef(opener ?? document.activeElement);
+    useEffect(() => {
+        const popover = element.current;
+        const hide = () => { if (popover.matches(":popover-open"))
+            popover.hidePopover(); };
+        const toggled = (event) => { if (event.newState === "closed")
+            close.current(); };
+        const outside_scroll = (event) => { if (!popover.contains(event.target))
+            hide(); };
+        popover.addEventListener("toggle", toggled);
+        window.addEventListener("blur", hide);
+        window.addEventListener("scroll", outside_scroll, true);
+        return () => {
+            popover.removeEventListener("toggle", toggled);
+            window.removeEventListener("blur", hide);
+            window.removeEventListener("scroll", outside_scroll, true);
+        };
+    }, []);
+    const return_focus = () => {
+        const before = focused_before.current;
+        if (before?.isConnected && before !== document.body)
+            before.focus();
+    };
+    const dismiss = () => {
+        const popover = element.current;
+        return_focus();
+        if (popover?.matches(":popover-open"))
+            popover.hidePopover();
+        else
+            close.current();
+    };
+    return { element, dismiss, return_focus };
+}
+// Shows the popover at the point, flipped or pushed back so it stays on screen.
+function show_at(popover, x, y) {
+    if (!popover.matches(":popover-open"))
+        popover.showPopover();
+    const size = popover.getBoundingClientRect();
+    const position = on_screen_position(x, y, size.width, size.height);
+    popover.style.left = `${position.left}px`;
+    popover.style.top = `${position.top}px`;
+}
+// ── Keys ─────────────────────────────────────────────────────────────────────
+const item_selector = '[role^="menuitem"]:not([aria-disabled="true"])';
+const typeahead_pause_in_milliseconds = 600;
+// Arrows, Home and End move between items, typing jumps to one by its first letters, Enter or Space runs it, and Escape closes.
+function use_menu_keys(container, dismiss, whole_menu) {
+    const typed = useRef({ text: "", at: 0 });
+    return (event) => {
+        if (event.key === "Escape") {
+            event.preventDefault();
+            event.stopPropagation();
+            dismiss();
+            return;
+        }
+        if (whole_menu && event.key === "Tab")
+            return dismiss();
+        const items = [...container.current.querySelectorAll(item_selector)];
+        const current = items.indexOf(document.activeElement);
+        // In a popover the keys belong to its fields until focus is on one of its items.
+        if (!whole_menu && current < 0)
+            return;
+        if ((event.key === "Enter" || event.key === " ") && current >= 0) {
+            event.preventDefault();
+            items[current].click();
+            return;
+        }
+        const moved = item_after_key(event.key, current, items.length);
+        if (moved !== null) {
+            event.preventDefault();
+            items[moved].focus();
+            return;
+        }
+        if (event.key.length !== 1 || event.ctrlKey || event.metaKey || event.altKey)
+            return;
+        const now = Date.now();
+        typed.current = { text: now - typed.current.at > typeahead_pause_in_milliseconds ? event.key : typed.current.text + event.key, at: now };
+        const labels = items.map((item) => item.querySelector(".menu-label")?.textContent ?? item.textContent ?? "");
+        const found = item_starting_with(labels, typed.current.text, current);
+        if (found !== null) {
+            event.preventDefault();
+            items[found].focus();
+        }
+    };
+}
+// A menu's buttons, also for use inside a Popover, such as a column filter's choices.
+export function MenuList({ items, on_close }) {
+    return (_jsx(_Fragment, { children: items.map((item) => (_jsxs(Fragment, { children: [item.separator_before && _jsx("div", { className: "menu-separator", role: "separator" }), _jsxs("button", { type: "button", className: item.danger ? "menu-item danger" : "menu-item", role: item.checked === undefined ? "menuitem" : item.radio ? "menuitemradio" : "menuitemcheckbox", "aria-checked": item.checked, "aria-disabled": item.disabled || undefined, tabIndex: -1, onClick: () => {
+                        if (item.disabled)
+                            return;
+                        if (!item.keep_open)
+                            on_close();
+                        item.run();
+                    }, children: [_jsx("span", { className: "menu-label", children: item.label }), item.hint && _jsx("span", { className: "menu-hint", children: item.hint })] })] }, item.label))) }));
+}
+export function ContextMenu({ x, y, items, on_close, label }) {
+    const { element: menu, dismiss, return_focus } = use_popover(on_close);
+    const keys = use_menu_keys(menu, dismiss, true);
+    useLayoutEffect(() => {
+        show_at(menu.current, x, y);
+        menu.current.querySelector(item_selector)?.focus();
+    }, [x, y]);
+    return (_jsx("div", { ref: menu, popover: "auto", className: "menu", role: "menu", "aria-label": label, tabIndex: -1, onKeyDown: keys, children: _jsx(MenuList, { items: items, on_close: () => { return_focus(); on_close(); } }) }));
+}
+let open_menu = null;
+let next_menu_id = 1;
+const menu_listeners = new Set();
+function publish_menu(menu) {
+    open_menu = menu;
+    for (const listener of menu_listeners)
+        listener(open_menu);
+}
+// Opens a menu where the event happened, such as a right-click, replacing any menu already open.
+export function open_context_menu(event, items) {
+    event.preventDefault();
+    publish_menu({ id: next_menu_id++, x: event.clientX, y: event.clientY, items });
+}
+// Where menus opened from anywhere are drawn; the Shell holds one.
+export function ContextMenus() {
+    const [menu, set_menu] = useState(open_menu);
+    useEffect(() => {
+        menu_listeners.add(set_menu);
+        return () => void menu_listeners.delete(set_menu);
+    }, []);
+    if (!menu)
+        return null;
+    return _jsx(ContextMenu, { x: menu.x, y: menu.y, items: menu.items, on_close: () => { if (open_menu?.id === menu.id)
+            publish_menu(null); } }, menu.id);
+}
+// Holds any content, such as a column's filter, with its first field ready to type into and its menu items reachable by arrow keys.
+export function Popover({ anchor, x = 0, y = 0, label, on_close, children }) {
+    const { element: popover, dismiss } = use_popover(on_close, anchor);
+    const keys = use_menu_keys(popover, dismiss, false);
+    const anchor_name = `--popover-${useId().replace(/[^\w-]/g, "")}`;
+    useLayoutEffect(() => {
+        const element = popover.current;
+        if (anchor) {
+            // The anchor's name ties it to this popover, which CSS then hangs below it, flipping where there is no room.
+            anchor.style.setProperty("anchor-name", anchor_name);
+            element.style.setProperty("position-anchor", anchor_name);
+            element.showPopover();
+        }
+        else {
+            show_at(element, x, y);
+        }
+        element.querySelector(`input, select, textarea, ${item_selector}, button`)?.focus();
+        return () => void anchor?.style.removeProperty("anchor-name");
+    }, [anchor, x, y]);
+    return (_jsx("div", { ref: popover, popover: "auto", className: anchor ? "popover anchored" : "popover", role: "dialog", "aria-label": label, onKeyDown: keys, children: children }));
+}

package/dist/web/react/prefs.d.ts

@@ -0,0 +1,2 @@
+import { type StorageLike, type Validator } from "../prefs.ts";
+export declare function use_pref<Value>(key: string, initial: Value, validate?: Validator<Value>, storage?: StorageLike | undefined): [Value, (next: Value) => void];