@x-tech-laboratories/x-libs 0.14.1 → 0.15.0

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

@@ -0,0 +1,78 @@
+import { type CSSProperties, type DragEvent, type KeyboardEvent, type MouseEvent, type ReactNode } from "react";
+import { type Sorting } from "../tables.ts";
+import { type DropPlacement } from "../tree.ts";
+export type { Sorting } from "../tables.ts";
+export type { DropPlacement } from "../tree.ts";
+export interface TableColumn<Row> {
+    label: string;
+    header?: ReactNode;
+    id?: string;
+    cell: (row: Row) => ReactNode;
+    sort?: (row: Row) => string | number | null;
+    sortable?: boolean;
+    class?: string;
+    width?: number;
+    min_width?: number;
+    max_width?: number;
+    hideable?: boolean;
+    movable?: boolean;
+    filter?: ReactNode | ((close: () => void) => ReactNode);
+    filter_active?: boolean;
+}
+export interface RowGroup<Row> {
+    key: string;
+    label: ReactNode;
+    rows: Row[];
+    class_name?: string;
+}
+export interface TableVirtual {
+    row_height: number;
+    overscan?: number;
+    card_height?: number;
+}
+interface DataTableProps<Row> {
+    columns: TableColumn<Row>[];
+    rows: Row[];
+    groups?: RowGroup<Row>[];
+    row_key?: (row: Row) => string | number;
+    caption?: string;
+    virtual?: TableVirtual;
+    fill_last_column?: boolean;
+    wrap_class?: string;
+    sorting?: Sorting | Sorting[];
+    manual_sorting?: boolean;
+    on_sort?: (sorting: Sorting) => void;
+    on_sorting_change?: (sorting: Sorting[]) => void;
+    column_order?: string[];
+    on_column_order_change?: (order: string[]) => void;
+    column_widths?: Record<string, number>;
+    on_column_widths_change?: (widths: Record<string, number>, done: boolean) => void;
+    hidden_columns?: string[];
+    on_hidden_columns_change?: (hidden: string[]) => void;
+    row_passes?: (row: Row) => boolean;
+    on_clear_filters?: () => void;
+    get_children?: (row: Row) => Row[] | undefined;
+    expanded?: string[] | true;
+    on_expanded_change?: (expanded: string[]) => void;
+    on_row_click?: (row: Row, event: MouseEvent<HTMLTableRowElement>) => void;
+    on_row_context_menu?: (row: Row, event: MouseEvent<HTMLTableRowElement>) => void;
+    on_row_double_click?: (row: Row, event: MouseEvent<HTMLTableRowElement>) => void;
+    on_row_key_down?: (row: Row, event: KeyboardEvent<HTMLTableRowElement>) => void;
+    active_row?: string | number;
+    row_selected?: (row: Row) => boolean;
+    row_class?: (row: Row) => string | undefined;
+    row_title?: (row: Row) => string | undefined;
+    row_style?: (row: Row) => CSSProperties | undefined;
+    render_after_row?: (row: Row) => ReactNode;
+    on_row_drag_start?: (row: Row, event: DragEvent<HTMLTableRowElement>) => void;
+    on_row_drag_end?: () => void;
+    can_drop_on_row?: (row: Row, placement: DropPlacement) => boolean;
+    allow_inside_drop?: boolean;
+    on_row_drop?: (row: Row, placement: DropPlacement, event: DragEvent<HTMLTableRowElement>) => void;
+}
+export declare function DataTable<Row>(props: DataTableProps<Row>): import("react").JSX.Element;
+export declare function Pager({ page, has_more, go }: {
+    page: number;
+    has_more: boolean;
+    go: (page: number) => void;
+}): import("react").JSX.Element | null;

package/dist/web/react/table.js

@@ -0,0 +1,404 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// A React table drawn like the page's own on TanStack Table: sorting by one column or several, columns the user moves, resizes,
+// hides and filters, rows nested under rows, rows in groups under headings, rows dragged by the app's rules, long lists drawn
+// only where they show, and cards on phones.
+import { memo, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { getCoreRowModel, getExpandedRowModel, getSortedRowModel, useReactTable } from "@tanstack/react-table";
+import { cx } from "../dom.js";
+import { clamp_width, column_id, compare_values, move_column, ordered_columns, sort_after_click, sorting_list } from "../tables.js";
+import { placement_at } from "../tree.js";
+import { virtual_window } from "../virtual.js";
+import { ContextMenu, Popover } from "./menus.js";
+import { ResizeHandle } from "./split.js";
+// A column's heading: its header with the label kept for screen readers and hover, or the label alone.
+function heading(column) {
+    if (column.header === undefined)
+        return column.label;
+    return (_jsxs("span", { className: "column-header", title: column.label, children: [_jsx("span", { "aria-hidden": "true", children: column.header }), _jsx("span", { className: "visually-hidden", children: column.label })] }));
+}
+const is_empty = (value) => value === null || value === undefined || value === "";
+// The rows that pass and, in a tree, those above a row that passes, with each row's passing children.
+function filtered_tree(rows, passes, get_children, kept_children) {
+    return rows.filter((row) => {
+        const children = get_children ? filtered_tree(get_children(row) ?? [], passes, get_children, kept_children) : [];
+        kept_children.set(row, children);
+        return passes(row) || children.length > 0;
+    });
+}
+function TableRowView(props) {
+    const { original, id, columns, events } = props;
+    const after = props.after;
+    return (_jsxs(_Fragment, { children: [_jsx("tr", { className: props.class_name, title: props.title, style: props.style, "data-row-key": props.keyed ? props.row_key : undefined, tabIndex: props.tab_index, "aria-selected": props.selected, draggable: props.draggable || undefined, onDragStart: props.draggable ? (event) => events.current.drag_start(original, id, event) : undefined, onDragEnd: props.draggable ? () => events.current.drag_end() : undefined, onDragOver: (event) => events.current.drag_over(original, id, event), onDragLeave: () => events.current.drag_leave(id), onDrop: (event) => events.current.drop(original, id, event), onClick: (event) => events.current.click(original, event), onDoubleClick: (event) => events.current.double_click(original, event), onKeyDown: (event) => events.current.key_down(original, event), onContextMenu: (event) => events.current.context_menu(original, event), children: columns.map((column, index) => {
+                    const label = column.label;
+                    if (!props.tree || index > 0)
+                        return _jsx("td", { className: column.class, "data-label": label, children: column.cell(original) }, column_id(column));
+                    const count = props.child_count;
+                    return (_jsxs("td", { className: [column.class, "tree-cell"].filter(Boolean).join(" "), "data-label": label, style: { "--tree-depth": props.depth }, children: [count > 0 ? (_jsx("button", { type: "button", className: "icon tree-toggle", "aria-expanded": props.open, "aria-label": props.open ? "Collapse" : "Expand", onClick: (event) => { event.stopPropagation(); events.current.toggle(id, props.open); }, children: props.open ? "▾" : "▸" })) : _jsx("span", { className: "tree-spacer" }), column.cell(original), count > 0 && !props.open && _jsx("span", { className: "tree-count", title: `${count} inside`, children: count })] }, column_id(column)));
+                }) }), after !== undefined && after !== null && typeof after !== "boolean" && _jsx("tr", { className: "row-extra", children: _jsx("td", { colSpan: columns.length, children: after }) })] }));
+}
+function same_style(first, second) {
+    if (first === second)
+        return true;
+    if (!first || !second)
+        return false;
+    const keys = Object.keys(first);
+    return keys.length === Object.keys(second).length && keys.every((key) => first[key] === second[key]);
+}
+function same_row(before, after) {
+    return Object.keys(after).every((key) => key === "style" ? same_style(before.style, after.style) : before[key] === after[key]);
+}
+// A row draws again only when something it shows changes, so picking one row leaves the others alone.
+const TableRow = memo(TableRowView, same_row);
+// Whether the page is phone-sized, where the rows are cards.
+function use_phone() {
+    const query = "(max-width: 640px)";
+    const [phone, set_phone] = useState(() => typeof window.matchMedia === "function" && window.matchMedia(query).matches);
+    useEffect(() => {
+        if (typeof window.matchMedia !== "function")
+            return;
+        const list = window.matchMedia(query);
+        const changed = () => set_phone(list.matches);
+        list.addEventListener("change", changed);
+        return () => list.removeEventListener("change", changed);
+    }, []);
+    return phone;
+}
+// ── Table ────────────────────────────────────────────────────────────────────
+export function DataTable(props) {
+    const { columns, row_key, caption, get_children, row_passes, groups, allow_inside_drop = true, fill_last_column: fill_last = false } = props;
+    const rows = useMemo(() => groups ? groups.flatMap((group) => group.rows) : props.rows, [groups, props.rows]);
+    const [own_expanded, set_own_expanded] = useState(true);
+    const [open_filter, set_open_filter] = useState(null);
+    const filter_closed = useRef({ id: "", at: 0 });
+    const [columns_menu, set_columns_menu] = useState(null);
+    const [dragged, set_dragged] = useState(null);
+    const [drop_target, set_drop_target] = useState(null);
+    const resizing = useRef(false);
+    const header_cells = useRef(new Map());
+    const [measured, set_measured] = useState({});
+    const [row_dragging, set_row_dragging] = useState(false);
+    const [row_drop, set_row_drop] = useState(null);
+    const by_id = useMemo(() => new Map(columns.map((column) => [column_id(column), column])), [columns]);
+    const all_ids = columns.map(column_id);
+    const manual = props.manual_sorting === true;
+    const is_sortable = (column) => Boolean(column) && (manual ? column.sortable !== false : Boolean(column.sort));
+    // Rows that come sorted keep every key, even one naming no column, so a click never drops it.
+    const sorting = manual ? sorting_list(props.sorting) : sorting_list(props.sorting).filter((key) => is_sortable(by_id.get(key.key)));
+    const hidden = props.hidden_columns ?? [];
+    const widths = props.column_widths ?? {};
+    const expanded = props.expanded ?? own_expanded;
+    const tree = get_children !== undefined;
+    // ── Rows ──
+    const { data, children_of } = useMemo(() => {
+        if (!row_passes)
+            return { data: rows, children_of: get_children };
+        const kept_children = new Map();
+        const kept = filtered_tree(rows, row_passes, get_children, kept_children);
+        return { data: kept, children_of: get_children && ((row) => kept_children.get(row) ?? []) };
+    }, [rows, row_passes, get_children]);
+    // TanStack flips a descending column's order, so an empty value is flipped first to stay last.
+    const descending = useRef(new Set());
+    descending.current = new Set(sorting.filter((key) => key.descending).map((key) => key.key));
+    const definitions = useMemo(() => columns.map((column) => ({
+        id: column_id(column),
+        accessorFn: column.sort,
+        enableSorting: Boolean(column.sort),
+        sortingFn: (left, right, id) => {
+            const [first, second] = [left.getValue(id), right.getValue(id)];
+            const order = compare_values(first, second);
+            return (is_empty(first) || is_empty(second)) && descending.current.has(id) ? -order : order;
+        },
+    })), [columns]);
+    const table = useReactTable({
+        data,
+        columns: definitions,
+        getRowId: row_key ? (row) => String(row_key(row)) : undefined,
+        getSubRows: children_of ? (row) => children_of(row) ?? [] : undefined,
+        state: {
+            sorting: sorting.filter((key) => by_id.has(key.key)).map((key) => ({ id: key.key, desc: key.descending })),
+            columnOrder: ordered_columns(props.column_order ?? all_ids, all_ids),
+            columnVisibility: Object.fromEntries(hidden.map((id) => [id, false])),
+            expanded: expanded === true ? true : Object.fromEntries(expanded.map((id) => [id, true])),
+        },
+        getCoreRowModel: getCoreRowModel(),
+        getSortedRowModel: getSortedRowModel(),
+        getExpandedRowModel: getExpandedRowModel(),
+        getRowCanExpand: (row) => row.subRows.length > 0,
+        manualSorting: manual,
+        // The table never pages, and the state above is rebuilt each render, so TanStack's reset would draw the table again forever.
+        autoResetPageIndex: false,
+    });
+    const shown_ids = table.getVisibleLeafColumns().map((column) => column.id).join("\n");
+    const shown = useMemo(() => shown_ids.split("\n").filter(Boolean).map((id) => by_id.get(id)), [shown_ids, by_id]);
+    function toggle_row(id, is_open) {
+        const open = expanded === true
+            ? table.getCoreRowModel().flatRows.filter((each) => each.subRows.length > 0).map((each) => each.id)
+            : expanded;
+        const next = is_open ? open.filter((each) => each !== id) : [...open, id];
+        if (props.expanded === undefined)
+            set_own_expanded(next);
+        props.on_expanded_change?.(next);
+    }
+    // ── Sorting ──
+    function sort_by(id, adding) {
+        if (props.on_sorting_change)
+            return props.on_sorting_change(sort_after_click(sorting, id, adding));
+        const current = sorting.find((key) => key.key === id);
+        props.on_sort?.({ key: id, descending: current ? !current.descending : false });
+    }
+    // ── Widths ──
+    const width_of = (column) => widths[column_id(column)] ?? column.width;
+    // A column never sized is measured, so the first drag of its edge starts from where it is.
+    useLayoutEffect(() => {
+        if (!props.on_column_widths_change)
+            return;
+        const sizes = Object.fromEntries([...header_cells.current].map(([id, cell]) => [id, cell.offsetWidth]));
+        set_measured((before) => JSON.stringify(before) === JSON.stringify(sizes) ? before : sizes);
+    }, [shown_ids, props.on_column_widths_change]);
+    function resize(column, width, done) {
+        props.on_column_widths_change?.({ ...widths, [column_id(column)]: width }, done);
+    }
+    // ── Moving ──
+    const can_move = (column) => Boolean(props.on_column_order_change) && column.movable !== false;
+    const order = () => table.getState().columnOrder;
+    function move(id, target, after) {
+        if (id !== target)
+            props.on_column_order_change?.(move_column(order(), id, target, after));
+    }
+    // A column dropped on the left half of another goes before it, and on the right half after it.
+    function drag_over(column, event) {
+        if (!dragged || !can_move(column))
+            return;
+        event.preventDefault();
+        const cell = event.currentTarget.getBoundingClientRect();
+        set_drop_target({ id: column_id(column), after: event.clientX > cell.left + cell.width / 2 });
+    }
+    function drop(event) {
+        event.preventDefault();
+        if (dragged && drop_target)
+            move(dragged, drop_target.id, drop_target.after);
+        set_dragged(null);
+        set_drop_target(null);
+    }
+    // Alt with an arrow moves the column one place along, past any hidden ones.
+    function move_by_key(column, event) {
+        if (!event.altKey || !can_move(column) || (event.key !== "ArrowLeft" && event.key !== "ArrowRight"))
+            return;
+        event.preventDefault();
+        const ids = shown.map(column_id);
+        const index = ids.indexOf(column_id(column));
+        const target = ids[index + (event.key === "ArrowLeft" ? -1 : 1)];
+        if (target && by_id.get(target)?.movable !== false)
+            move(column_id(column), target, event.key === "ArrowRight");
+    }
+    // ── Filters ──
+    function toggle_filter(id, anchor) {
+        // The click that closed the popover by landing outside it is the same one that reaches its button.
+        const just_closed = filter_closed.current.id === id && Date.now() - filter_closed.current.at < 300;
+        set_open_filter(open_filter?.id === id || just_closed ? null : { id, anchor });
+    }
+    function close_filter() {
+        if (open_filter)
+            filter_closed.current = { id: open_filter.id, at: Date.now() };
+        set_open_filter(null);
+    }
+    const any_filter = columns.some((column) => column.filter_active);
+    // ── Hiding ──
+    function open_columns_menu(event) {
+        if (!props.on_hidden_columns_change)
+            return;
+        event.preventDefault();
+        if (event.type === "contextmenu")
+            return set_columns_menu({ x: event.clientX, y: event.clientY });
+        const button = event.currentTarget.getBoundingClientRect();
+        set_columns_menu({ x: button.left, y: button.bottom + 4 });
+    }
+    const column_choices = columns.map((column) => {
+        const id = column_id(column);
+        const visible = !hidden.includes(id);
+        // The last column on show stays, so the table never empties.
+        const fixed = column.hideable === false || (visible && shown.length === 1);
+        return { label: column.label, checked: visible, disabled: fixed, keep_open: true, run: () => props.on_hidden_columns_change(visible ? [...hidden, id] : hidden.filter((each) => each !== id)) };
+    });
+    // ── Dragging rows ──
+    // A drag started in this table lands anywhere, and any drag lands where the app's rule allows it.
+    function row_placement(row, event) {
+        if (!props.on_row_drop)
+            return null;
+        const box = event.currentTarget.getBoundingClientRect();
+        const placement = placement_at(box.height > 0 ? (event.clientY - box.top) / box.height : 0.5, allow_inside_drop);
+        const allowed = props.can_drop_on_row ? props.can_drop_on_row(row, placement) : row_dragging;
+        return allowed ? placement : null;
+    }
+    function row_drag_start(row, id, event) {
+        set_row_dragging(true);
+        props.on_row_drag_start(row, event);
+        // Some browsers start a drag only once it carries data.
+        if (event.dataTransfer && event.dataTransfer.types.length === 0)
+            event.dataTransfer.setData("text/plain", id);
+    }
+    function row_drag_over(row, id, event) {
+        const placement = row_placement(row, event);
+        if (!placement) {
+            if (row_drop?.id === id)
+                set_row_drop(null);
+            return;
+        }
+        event.preventDefault();
+        if (row_drop?.id !== id || row_drop.placement !== placement)
+            set_row_drop({ id, placement });
+    }
+    function row_drag_drop(row, event) {
+        const placement = row_placement(row, event);
+        set_row_drop(null);
+        if (!placement)
+            return;
+        event.preventDefault();
+        props.on_row_drop(row, placement, event);
+    }
+    function row_drag_end() {
+        set_row_dragging(false);
+        set_row_drop(null);
+        props.on_row_drag_end?.();
+    }
+    // The rows read these through a ref, so a new handler from the app never draws every row again.
+    const events = useRef(null);
+    events.current = {
+        click: (row, event) => props.on_row_click?.(row, event),
+        double_click: (row, event) => props.on_row_double_click?.(row, event),
+        context_menu: (row, event) => props.on_row_context_menu?.(row, event),
+        key_down: (row, event) => props.on_row_key_down?.(row, event),
+        toggle: toggle_row,
+        drag_start: row_drag_start,
+        drag_end: row_drag_end,
+        drag_over: (row, id, event) => { if (props.on_row_drop)
+            row_drag_over(row, id, event); },
+        drag_leave: (id) => { if (props.on_row_drop && row_drop?.id === id)
+            set_row_drop(null); },
+        drop: (row, _id, event) => { if (props.on_row_drop)
+            row_drag_drop(row, event); },
+    };
+    // ── Drawing ──
+    function header(column) {
+        const id = column_id(column);
+        const index = sorting.findIndex((key) => key.key === id);
+        const key = sorting[index];
+        const sortable = is_sortable(column) && Boolean(props.on_sort || props.on_sorting_change);
+        const filling = fill_last && column === shown[shown.length - 1];
+        const width = filling ? undefined : width_of(column);
+        const movable = can_move(column);
+        const class_name = [
+            column.class, column.filter_active && "filtered", dragged === id && "dragged", drop_target?.id === id && (drop_target.after ? "drop-after" : "drop-before"),
+        ].filter(Boolean).join(" ") || undefined;
+        const marker = key && (_jsxs("span", { className: "sort-marker", "aria-hidden": "true", children: [key.descending ? " ▼" : " ▲", sorting.length > 1 && _jsx("sup", { className: "sort-rank", children: index + 1 })] }));
+        return (_jsxs("th", { ref: (cell) => { if (cell)
+                header_cells.current.set(id, cell);
+            else
+                header_cells.current.delete(id); }, className: class_name, scope: "col", style: width !== undefined ? { width, minWidth: width, maxWidth: width } : filling && column.min_width !== undefined ? { minWidth: column.min_width } : undefined, "aria-sort": sortable ? (key ? (key.descending ? "descending" : "ascending") : "none") : undefined, draggable: movable || undefined, title: movable ? "Drag to move this column" : undefined, onPointerDownCapture: (event) => { resizing.current = event.target.classList.contains("resize-handle"); }, onDragStart: (event) => {
+                if (resizing.current)
+                    return event.preventDefault();
+                event.dataTransfer.setData("text/plain", id);
+                set_dragged(id);
+            }, onDragEnd: () => { set_dragged(null); set_drop_target(null); }, onDragOver: (event) => drag_over(column, event), onDragLeave: () => set_drop_target(null), onDrop: drop, children: [sortable ? (_jsxs("button", { type: "button", className: "sort", title: props.on_sorting_change ? "Click to sort by this column, Shift+click to add it to the sort" : undefined, onClick: (event) => sort_by(id, event.shiftKey), onKeyDown: (event) => move_by_key(column, event), children: [heading(column), marker] })) : movable ? (_jsx("span", { tabIndex: 0, onKeyDown: (event) => move_by_key(column, event), children: heading(column) })) : heading(column), column.filter !== undefined && (_jsx("button", { type: "button", className: column.filter_active ? "icon filter-button active" : "icon filter-button", "aria-label": `Filter by ${column.label}`, "aria-expanded": open_filter?.id === id, title: column.filter_active ? `Filtered by ${column.label}` : `Filter by ${column.label}`, onClick: (event) => toggle_filter(id, event.currentTarget), children: _jsx("svg", { viewBox: "0 0 16 16", width: "12", height: "12", "aria-hidden": "true", children: _jsx("path", { d: "M2 3h12l-4.5 5.5V13l-3 1.5v-6z", fill: "currentColor" }) }) })), props.on_column_widths_change && !filling && (_jsx(ResizeHandle, { side: "left", size: width ?? measured[id] ?? column.min_width ?? 48, min: column.min_width ?? 48, max: column.max_width ?? 960, default_size: clamp_width(column.width ?? measured[id] ?? 120, column.min_width, column.max_width), on_resize: (size) => resize(column, size, false), on_resize_end: (size) => resize(column, size, true), label: `Resize the ${column.label} column`, class_name: "column-resize" }))] }, id));
+    }
+    function body_row(row, key) {
+        const original = row.original;
+        const keyed = props.on_row_key_down !== undefined;
+        return (_jsx(TableRow, { original: original, id: row.id, row_key: key, depth: row.depth, open: row.getIsExpanded(), child_count: row.subRows.length, columns: shown, tree: tree, class_name: [props.row_class?.(original), row_drop?.id === row.id && `drop-${row_drop.placement}`].filter(Boolean).join(" ") || undefined, title: props.row_title?.(original), style: props.row_style?.(original), selected: props.row_selected?.(original), tab_index: keyed ? (props.active_row !== undefined && String(props.active_row) === key ? 0 : -1) : undefined, keyed: keyed, draggable: Boolean(props.on_row_drag_start), after: props.render_after_row?.(original), events: events }, row.id));
+    }
+    const row_line = (row) => ({ kind: "row", row, key: row_key ? String(row_key(row.original)) : row.id });
+    // Each group's heading and then its rows, which keep the order of the sorted whole, so each group is sorted on its own.
+    function grouped_lines(groups) {
+        const group_of = new Map();
+        groups.forEach((group, index) => group.rows.forEach((row) => { if (!group_of.has(row))
+            group_of.set(row, index); }));
+        const rows_by_group = groups.map(() => []);
+        let current = 0;
+        for (const row of table.getRowModel().rows) {
+            if (row.depth === 0)
+                current = group_of.get(row.original) ?? current;
+            rows_by_group[current].push(row);
+        }
+        // A group the filter emptied loses its heading, while one that was empty all along keeps it.
+        return groups.flatMap((group, index) => rows_by_group[index].length === 0 && group.rows.length > 0
+            ? []
+            : [{ kind: "group", group }, ...rows_by_group[index].map(row_line)]);
+    }
+    const lines = groups ? grouped_lines(groups) : table.getRowModel().rows.map(row_line);
+    // ── Virtual rows ──
+    const phone = use_phone();
+    const line_height = props.virtual ? (phone ? props.virtual.card_height : props.virtual.row_height) : undefined;
+    const wrap = useRef(null);
+    const head = useRef(null);
+    const [view, set_view] = useState({ top: 0, height: 0 });
+    const rows_focused = useRef(false);
+    const measure = () => {
+        const element = wrap.current;
+        if (element)
+            set_view({ top: element.scrollTop, height: element.clientHeight });
+    };
+    useEffect(() => {
+        if (line_height === undefined || typeof ResizeObserver === "undefined")
+            return;
+        const observer = new ResizeObserver(measure);
+        observer.observe(wrap.current);
+        return () => observer.disconnect();
+    }, [line_height === undefined]);
+    const head_height = head.current?.offsetHeight ?? 0;
+    const viewport = view.height || window.innerHeight;
+    const windowed = line_height === undefined ? undefined : virtual_window(lines.length, line_height, view.top - head_height, Math.max(line_height, viewport - head_height), props.virtual.overscan);
+    const active_index = props.active_row === undefined ? -1 : lines.findIndex((line) => line.kind === "row" && line.key === String(props.active_row));
+    // A row that moves the active row by key hands focus on to it once it is drawn.
+    const focus_pending = useRef(false);
+    useLayoutEffect(() => { focus_pending.current = line_height !== undefined && rows_focused.current; }, [props.active_row]);
+    // The active row scrolls into view as the keys move it.
+    useLayoutEffect(() => {
+        if (line_height === undefined || active_index < 0)
+            return;
+        const element = wrap.current;
+        const row_top = head_height + active_index * line_height;
+        const top = view.top;
+        const next = row_top < top + head_height ? row_top - head_height : row_top + line_height > top + viewport ? row_top + line_height - viewport : top;
+        if (next !== top) {
+            element.scrollTop = next;
+            set_view({ top: next, height: view.height });
+        }
+    }, [props.active_row, active_index, line_height]);
+    useLayoutEffect(() => {
+        if (!focus_pending.current || props.active_row === undefined)
+            return;
+        const active = String(props.active_row);
+        const row = [...wrap.current.querySelectorAll("tr[data-row-key]")].find((each) => each.dataset.rowKey === active);
+        if (!row)
+            return;
+        focus_pending.current = false;
+        const focused = document.activeElement;
+        if (focused !== row && (focused === null || focused === document.body || wrap.current.contains(focused)))
+            row.focus({ preventScroll: true });
+    });
+    function spacer(height, key) {
+        if (height <= 0)
+            return null;
+        return _jsx("tr", { className: "virtual-spacer", "aria-hidden": "true", style: { height }, children: _jsx("td", { colSpan: shown.length, style: { padding: 0, border: "none" } }) }, key);
+    }
+    function draw_line(line) {
+        if (line.kind === "row")
+            return body_row(line.row, line.key);
+        const group = line.group;
+        return (_jsx("tr", { className: group.class_name ? `group-row ${group.class_name}` : "group-row", children: _jsx("th", { scope: "colgroup", colSpan: shown.length, children: group.label }) }, `group ${group.key}`));
+    }
+    const drawn = windowed ? lines.slice(windowed.start, windowed.end) : lines;
+    const fills_by_fixed = fill_last && shown.slice(0, -1).every((column) => width_of(column) !== undefined);
+    const filtered_column = open_filter ? by_id.get(open_filter.id) : undefined;
+    const filter_body = filtered_column?.filter;
+    const tools = (props.on_clear_filters && any_filter) || props.on_hidden_columns_change;
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { ref: wrap, className: cx("table-wrap", props.virtual && "virtual", props.wrap_class), style: props.virtual ? { overflowY: "auto" } : undefined, onScroll: line_height === undefined ? undefined : measure, children: [tools && (_jsx("div", { className: "table-tools", children: _jsxs("span", { className: "table-tools-inner", children: [props.on_clear_filters && any_filter && _jsx("button", { type: "button", "aria-label": "Clear filters", title: "Clear filters", onClick: props.on_clear_filters, children: "Clear" }), props.on_hidden_columns_change && (_jsx("button", { type: "button", className: "icon columns-button", "aria-label": "Show or hide columns", title: "Show or hide columns", "aria-haspopup": "menu", onClick: open_columns_menu, children: _jsx("svg", { viewBox: "0 0 16 16", width: "12", height: "12", "aria-hidden": "true", children: _jsx("path", { d: "M2 2h3v12H2zm4.5 0h3v12h-3zM11 2h3v12h-3z" }) }) }))] }) })), _jsxs("table", { className: fill_last ? "responsive fill-last-column" : "responsive", style: fills_by_fixed ? { tableLayout: "fixed" } : undefined, children: [caption && _jsx("caption", { className: "visually-hidden", children: caption }), _jsx("thead", { ref: head, onContextMenu: props.on_hidden_columns_change && open_columns_menu, children: _jsx("tr", { children: shown.map(header) }) }), _jsxs("tbody", { onFocus: () => { rows_focused.current = true; }, onBlur: (event) => { if (event.relatedTarget && !event.currentTarget.contains(event.relatedTarget))
+                                    rows_focused.current = false; }, children: [windowed && spacer(windowed.offset_px, "spacer before"), drawn.map(draw_line), windowed && spacer(windowed.total_px - windowed.end * line_height, "spacer after")] })] })] }), open_filter && filtered_column && filter_body !== undefined && (_jsx(Popover, { anchor: open_filter.anchor, label: `Filter by ${filtered_column.label}`, on_close: close_filter, children: typeof filter_body === "function" ? filter_body(close_filter) : filter_body })), columns_menu && _jsx(ContextMenu, { x: columns_menu.x, y: columns_menu.y, label: "Columns", items: column_choices, on_close: () => set_columns_menu(null) })] }));
+}
+// ── Pages ────────────────────────────────────────────────────────────────────
+// Newer and older buttons around the page number, or nothing when everything fits on one page.
+export function Pager({ page, has_more, go }) {
+    if (page === 1 && !has_more)
+        return null;
+    return (_jsxs("nav", { className: "pager", "aria-label": "Pages", children: [_jsx("button", { disabled: page <= 1, onClick: () => go(page - 1), children: "\u2190 Newer" }), _jsxs("span", { className: "muted", children: ["Page ", page] }), _jsx("button", { disabled: !has_more, onClick: () => go(page + 1), children: "Older \u2192" })] }));
+}

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

@@ -0,0 +1 @@
+export {};

package/dist/web/react/test_stubs.js

@@ -0,0 +1,31 @@
+// Stands in for the native popover and modal dialog, which jsdom does not draw; a test imports it for its side effects.
+// A shared setup file may load in a node environment too, where there is no window to stand in for.
+if (typeof window !== "undefined") {
+    HTMLElement.prototype.showPopover = function () {
+        this.setAttribute("data-shown", "");
+    };
+    HTMLElement.prototype.hidePopover = function () {
+        this.removeAttribute("data-shown");
+        this.dispatchEvent(Object.assign(new Event("toggle"), { newState: "closed" }));
+    };
+    HTMLDialogElement.prototype.showModal = function () {
+        this.setAttribute("open", "");
+    };
+    HTMLDialogElement.prototype.close = function () {
+        this.removeAttribute("open");
+    };
+    // jsdom hides every popover, since none ever matches :popover-open, so a shown one is drawn again here over any app rule.
+    const shown_popovers = document.createElement("style");
+    shown_popovers.textContent = "[popover][data-shown] { display: block !important; }";
+    document.head.append(shown_popovers);
+    // Media queries all say no and scrolling does nothing, since jsdom lays nothing out.
+    window.matchMedia ??= (query) => ({ matches: false, media: query, onchange: null, addEventListener: () => { }, removeEventListener: () => { }, addListener: () => { }, removeListener: () => { }, dispatchEvent: () => false });
+    window.scrollTo = () => { };
+    // Nothing is ever resized either, so an observer never reports.
+    window.ResizeObserver ??= class {
+        observe() { }
+        unobserve() { }
+        disconnect() { }
+    };
+}
+export {};

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

@@ -0,0 +1,5 @@
+export declare function Age({ epoch, missing }: {
+    epoch: number | null | undefined;
+    missing?: string;
+}): import("react").JSX.Element;
+export declare function use_now(interval_in_milliseconds?: number): Date;

package/dist/web/react/time.js

@@ -0,0 +1,19 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+// Times as the page shows them: how long ago, with the full date and time on hover, and the current time kept fresh.
+import { useEffect, useState } from "react";
+import { age, stamp } from "../format.js";
+// A time as its age, such as "3h ago", or the missing text, a dash unless told otherwise, when there is none.
+export function Age({ epoch, missing = "—" }) {
+    if (!epoch)
+        return _jsx(_Fragment, { children: missing });
+    return _jsx("span", { title: stamp(epoch), children: age(epoch) });
+}
+// The current time, read again every interval, a minute unless told otherwise, so a page notices the day turning.
+export function use_now(interval_in_milliseconds = 60_000) {
+    const [now, set_now] = useState(() => new Date());
+    useEffect(() => {
+        const timer = setInterval(() => set_now(new Date()), interval_in_milliseconds);
+        return () => clearInterval(timer);
+    }, [interval_in_milliseconds]);
+    return now;
+}

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

@@ -0,0 +1,29 @@
+export interface ToastOptions {
+    tone?: "good" | "bad" | "warn" | "info";
+    link?: {
+        href: string;
+        text: string;
+    } | null;
+    action?: {
+        text: string;
+        run: () => void;
+    };
+    sticky?: boolean;
+    duration_in_milliseconds?: number;
+    on_close?: (reason: ToastCloseReason) => void;
+}
+export type ToastCloseReason = "timeout" | "dismissed" | "action" | "closed";
+export declare function toast(message: string, options?: ToastOptions): () => void;
+export interface UndoableOptions {
+    commit: () => void;
+    undo: () => void;
+    duration_in_milliseconds?: number;
+    undo_label?: string;
+}
+export interface Undoable {
+    finish: () => void;
+    undo: () => void;
+    readonly settled: boolean;
+}
+export declare function undoable(message: string, { commit, undo, duration_in_milliseconds, undo_label }: UndoableOptions): Undoable;
+export declare function Toasts(): import("react").JSX.Element;

package/dist/web/react/toasts.js

@@ -0,0 +1,72 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Short notes in the page's corner after something happened, with an optional link or action such as Undo.
+import { useEffect, useState } from "react";
+let shown = [];
+let next_id = 1;
+const listeners = new Set();
+function publish(toasts) {
+    shown = toasts;
+    for (const listener of listeners)
+        listener(shown);
+}
+// Takes the toast away and tells its owner why, once only.
+function close_toast(id, reason) {
+    const item = shown.find((each) => each.id === id);
+    if (!item)
+        return;
+    publish(shown.filter((each) => each.id !== id));
+    item.on_close?.(reason);
+}
+// Shows the message and returns a function that closes it early.
+export function toast(message, options = {}) {
+    const id = next_id++;
+    publish([...shown, { ...options, id, message }]);
+    if (!(options.sticky ?? options.tone === "bad"))
+        setTimeout(() => close_toast(id, "timeout"), options.duration_in_milliseconds ?? 6000);
+    return () => close_toast(id, "closed");
+}
+// Shows the message with an Undo button, then either undoes or commits the action, exactly once.
+export function undoable(message, { commit, undo, duration_in_milliseconds = 8000, undo_label = "Undo" }) {
+    let settled = false;
+    let undo_wanted = false;
+    const settle = (reason) => {
+        if (settled)
+            return;
+        settled = true;
+        if (reason === "action" || undo_wanted)
+            undo();
+        else
+            commit();
+    };
+    const close = toast(message, {
+        action: { text: undo_label, run: () => { } },
+        duration_in_milliseconds,
+        on_close: settle,
+    });
+    return {
+        finish: () => close(),
+        undo: () => {
+            if (settled)
+                return;
+            undo_wanted = true;
+            close();
+        },
+        get settled() {
+            return settled;
+        },
+    };
+}
+// ── Host ─────────────────────────────────────────────────────────────────────
+// Where toasts stack; the Shell holds one, and a page without the Shell renders its own.
+export function Toasts() {
+    const [toasts, set_toasts] = useState(shown);
+    useEffect(() => {
+        listeners.add(set_toasts);
+        return () => void listeners.delete(set_toasts);
+    }, []);
+    return (_jsx("div", { id: "toasts", className: "toasts", children: toasts.map((item) => {
+            const tone = item.tone ?? "info";
+            const close = () => close_toast(item.id, "dismissed");
+            return (_jsxs("div", { className: `toast tone-${tone}`, role: tone === "bad" ? "alert" : "status", children: [_jsx("span", { children: item.message }), item.link && _jsx("a", { href: item.link.href, onClick: close, children: item.link.text }), item.action && _jsx("button", { className: "toast-action", onClick: () => { close_toast(item.id, "action"); item.action.run(); }, children: item.action.text }), _jsx("button", { className: "icon remove", "aria-label": "Dismiss", onClick: close, children: "\u00D7" })] }, item.id));
+        }) }));
+}