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

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

@@ -0,0 +1,23 @@
+export interface Shortcut {
+    keys: string;
+    when?: "always" | "outside_fields";
+    over_overlays?: boolean;
+    keep_default?: boolean;
+    run: (event: KeyboardEvent) => void;
+}
+interface KeyCombination {
+    key: string;
+    ctrl: boolean;
+    meta: boolean;
+    alt: boolean;
+    shift: boolean | "any";
+}
+export declare function is_apple_platform(): boolean;
+export declare function parse_keys(keys: string, apple?: boolean): KeyCombination;
+export declare function matches_keys(keys: string, event: KeyboardEvent, apple?: boolean): boolean;
+export declare function describe_keys(keys: string, apple?: boolean): string;
+export declare function is_typing(target: EventTarget | null): boolean;
+export declare function is_overlay_open(document: Document): boolean;
+export declare function is_shortcut_allowed(shortcut: Shortcut, event: KeyboardEvent): boolean;
+export declare function use_shortcuts(shortcuts: Shortcut[]): void;
+export {};

package/dist/web/react/shortcuts.js

@@ -0,0 +1,95 @@
+// Keyboard shortcuts for a page: "mod+z" style bindings that stay quiet while text is typed or a dialog or popover is open.
+import { useEffect, useRef } from "react";
+// ── Parsing ──────────────────────────────────────────────────────────────────
+const KEY_ALIASES = {
+    esc: "escape", return: "enter", space: " ", spacebar: " ", del: "delete",
+    up: "arrowup", down: "arrowdown", left: "arrowleft", right: "arrowright",
+    plus: "+", cmd: "meta", command: "meta", control: "ctrl", option: "alt",
+};
+export function is_apple_platform() {
+    return typeof navigator !== "undefined" && /Mac|iPhone|iPad|iPod/.test(navigator.platform);
+}
+// A punctuation key such as "?" needs Shift on some layouts and not others, so Shift is ignored unless named.
+export function parse_keys(keys, apple = is_apple_platform()) {
+    const parts = keys.toLowerCase().split(/\+(?!$)/).map((part) => KEY_ALIASES[part] ?? part);
+    const key = parts.at(-1) ?? "";
+    const modifiers = new Set(parts.slice(0, -1).map((part) => part === "mod" ? (apple ? "meta" : "ctrl") : part));
+    const is_letter_or_named = /^[a-z0-9]$/.test(key) || key.length > 1;
+    return {
+        key,
+        ctrl: modifiers.has("ctrl"),
+        meta: modifiers.has("meta"),
+        alt: modifiers.has("alt"),
+        shift: modifiers.has("shift") || (is_letter_or_named ? false : "any"),
+    };
+}
+// Letters and digits also match by their physical key, so Alt+A still matches on a Mac where it types "å".
+export function matches_keys(keys, event, apple = is_apple_platform()) {
+    const combination = parse_keys(keys, apple);
+    if (event.ctrlKey !== combination.ctrl || event.metaKey !== combination.meta || event.altKey !== combination.alt)
+        return false;
+    if (combination.shift !== "any" && event.shiftKey !== combination.shift)
+        return false;
+    if (event.key.toLowerCase() === combination.key)
+        return true;
+    return /^[a-z]$/.test(combination.key) ? event.code === `Key${combination.key.toUpperCase()}` : /^[0-9]$/.test(combination.key) && event.code === `Digit${combination.key}`;
+}
+// ── Help text ────────────────────────────────────────────────────────────────
+const KEY_NAMES = {
+    " ": "Space", escape: "Esc", arrowup: "↑", arrowdown: "↓", arrowleft: "←", arrowright: "→",
+    enter: "Enter", delete: "Delete", backspace: "Backspace", tab: "Tab", home: "Home", end: "End",
+    pageup: "Page Up", pagedown: "Page Down",
+};
+// The keys as a person reads them: "Ctrl+Shift+Z" elsewhere, "⌘⇧Z" on Apple devices.
+export function describe_keys(keys, apple = is_apple_platform()) {
+    const combination = parse_keys(keys, apple);
+    const key = KEY_NAMES[combination.key] ?? (combination.key.length === 1 ? combination.key.toUpperCase() : capitalised(combination.key));
+    const shift = combination.shift === true;
+    if (apple)
+        return [combination.ctrl && "⌃", combination.alt && "⌥", shift && "⇧", combination.meta && "⌘", key].filter(Boolean).join("");
+    return [combination.ctrl && "Ctrl", combination.alt && "Alt", shift && "Shift", combination.meta && "Meta", key].filter(Boolean).join("+");
+}
+function capitalised(text) {
+    return text.charAt(0).toUpperCase() + text.slice(1);
+}
+// ── Guards ───────────────────────────────────────────────────────────────────
+// Text fields, selects and editable regions keep their keys for typing.
+export function is_typing(target) {
+    if (!(target instanceof Element))
+        return false;
+    if (target instanceof HTMLElement && target.isContentEditable)
+        return true;
+    return target.closest("input, textarea, select, [contenteditable]:not([contenteditable='false'])") !== null;
+}
+// An open dialog or popover takes the keyboard, so page shortcuts wait until it closes.
+export function is_overlay_open(document) {
+    return document.querySelector("dialog[open], [popover]:popover-open") !== null;
+}
+// Whether the shortcut should fire for the event, before its keys are compared.
+export function is_shortcut_allowed(shortcut, event) {
+    if (event.isComposing)
+        return false;
+    if ((shortcut.when ?? "outside_fields") === "outside_fields" && is_typing(event.target))
+        return false;
+    return shortcut.over_overlays === true || !is_overlay_open(document);
+}
+// ── Hook ─────────────────────────────────────────────────────────────────────
+// Listens on the window while the component is shown; the first shortcut that matches runs, and the list may change on every render.
+export function use_shortcuts(shortcuts) {
+    const latest = useRef(shortcuts);
+    latest.current = shortcuts;
+    useEffect(() => {
+        function on_key(event) {
+            if (event.defaultPrevented)
+                return;
+            const shortcut = latest.current.find((each) => matches_keys(each.keys, event) && is_shortcut_allowed(each, event));
+            if (!shortcut)
+                return;
+            if (!shortcut.keep_default)
+                event.preventDefault();
+            shortcut.run(event);
+        }
+        window.addEventListener("keydown", on_key);
+        return () => window.removeEventListener("keydown", on_key);
+    }, []);
+}

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

@@ -1,4 +1,4 @@
-import { type ComponentChildren } from "preact";
+import { type ReactNode } from "react";
 import { type Axis, type PaneSpec } from "../split.ts";
 export type { PaneSpec } from "../split.ts";
 interface ResizeHandleProps {
@@ -12,12 +12,12 @@ interface ResizeHandleProps {
     label: string;
     class_name?: string;
 }
-export declare function ResizeHandle({ side, size, min, max, default_size, on_resize, on_resize_end, label, class_name }: ResizeHandleProps): import("preact").JSX.Element;
+export declare function ResizeHandle({ side, size, min, max, default_size, on_resize, on_resize_end, label, class_name }: ResizeHandleProps): import("react").JSX.Element;
 interface SplitProps {
     storage_key: string;
     axis?: Axis;
     specs: PaneSpec[];
     preferred?: (number | undefined)[];
-    panes: ComponentChildren[];
+    panes: ReactNode[];
 }
-export declare function Split({ storage_key, axis, specs, preferred, panes }: SplitProps): import("preact").JSX.Element;
+export declare function Split({ storage_key, axis, specs, preferred, panes }: SplitProps): import("react").JSX.Element;

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

@@ -1,7 +1,6 @@
-import { jsx as _jsx, jsxs as _jsxs } from "preact/jsx-runtime";
-// Preact resize handles: one on a panel's edge, and a split whose panes share a container and remember their sizes.
-import { Fragment } from "preact";
-import { useEffect, useRef, useState } from "preact/hooks";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// React resize handles: one on a panel's edge, and a split whose panes share a container and remember their sizes.
+import { Fragment, useEffect, useRef, useState } from "react";
 import { distribute, fit, follow_drag, key_step, resize_at, store_sizes, stored_sizes } from "../split.js";
 // A thin bar on a panel's inner edge: drag it or press the arrow keys to resize, double-click it to reset.
 export function ResizeHandle({ side, size, min, max, default_size, on_resize, on_resize_end, label, class_name }) {
@@ -11,19 +10,19 @@ export function ResizeHandle({ side, size, min, max, default_size, on_resize, on
     function start_drag(event) {
         const start_size = size;
         let latest = size;
-        follow_drag(event.currentTarget, event, axis, (moved) => {
+        follow_drag(event.currentTarget, event.nativeEvent, axis, (moved) => {
             latest = clamp(start_size + direction * moved);
             on_resize(latest);
         }, () => on_resize_end(latest));
     }
     function nudge(event) {
-        const step = key_step(event, axis);
+        const step = key_step(event.nativeEvent, axis);
         if (step === null)
             return;
         event.preventDefault();
         on_resize_end(clamp(size + direction * step));
     }
-    return (_jsx("div", { class: ["resize-handle", axis === "vertical" && "vertical", class_name].filter(Boolean).join(" "), role: "separator", "aria-orientation": axis === "horizontal" ? "vertical" : "horizontal", "aria-label": label, "aria-valuenow": size, "aria-valuemin": min, "aria-valuemax": max, tabIndex: 0, onPointerDown: start_drag, onDblClick: () => on_resize_end(default_size), onKeyDown: nudge }));
+    return (_jsx("div", { className: ["resize-handle", axis === "vertical" && "vertical", class_name].filter(Boolean).join(" "), role: "separator", "aria-orientation": axis === "horizontal" ? "vertical" : "horizontal", "aria-label": label, "aria-valuenow": size, "aria-valuemin": min, "aria-valuemax": max, tabIndex: 0, onPointerDown: start_drag, onDoubleClick: () => on_resize_end(default_size), onKeyDown: nudge }));
 }
 // Panes side by side or stacked, with a handle between each two; double-clicking a handle restores the first sizes.
 export function Split({ storage_key, axis = "horizontal", specs, preferred, panes }) {
@@ -76,13 +75,13 @@ export function Split({ storage_key, axis = "horizontal", specs, preferred, pane
     function start_drag(index, event) {
         const before = [...latest.current];
         let moved_to = before;
-        follow_drag(event.currentTarget, event, axis, (moved) => {
+        follow_drag(event.currentTarget, event.nativeEvent, axis, (moved) => {
             moved_to = resize_at(before, index, moved, specs);
             change(moved_to, false);
         }, () => store_sizes(storage_key, moved_to));
     }
     function nudge(index, event) {
-        const step = key_step(event, axis);
+        const step = key_step(event.nativeEvent, axis);
         if (step === null)
             return;
         event.preventDefault();
@@ -91,5 +90,5 @@ export function Split({ storage_key, axis = "horizontal", specs, preferred, pane
     const template = sizes.length === specs.length
         ? sizes.flatMap((size, index) => index === 0 ? [`${size}px`] : ["auto", `${size}px`]).join(" ")
         : specs.map(() => "1fr").join(" auto ");
-    return (_jsx("div", { ref: container, class: `split ${axis}`, style: axis === "horizontal" ? { gridTemplateColumns: template } : { gridTemplateRows: template }, children: panes.map((pane, index) => (_jsxs(Fragment, { children: [index > 0 && (_jsx("div", { class: axis === "horizontal" ? "resize-handle" : "resize-handle vertical", role: "separator", tabIndex: 0, "aria-orientation": axis === "horizontal" ? "vertical" : "horizontal", "aria-label": "Resize panes", "aria-valuenow": sizes[index - 1] ?? 0, onPointerDown: (event) => start_drag(index - 1, event), onKeyDown: (event) => nudge(index - 1, event), onDblClick: () => change(distribute(extent(), specs, preferred), true) })), _jsx("div", { class: "split-pane", children: pane })] }, index))) }));
+    return (_jsx("div", { ref: container, className: `split ${axis}`, style: axis === "horizontal" ? { gridTemplateColumns: template } : { gridTemplateRows: template }, children: panes.map((pane, index) => (_jsxs(Fragment, { children: [index > 0 && (_jsx("div", { className: axis === "horizontal" ? "resize-handle" : "resize-handle vertical", role: "separator", tabIndex: 0, "aria-orientation": axis === "horizontal" ? "vertical" : "horizontal", "aria-label": "Resize panes", "aria-valuenow": sizes[index - 1] ?? 0, onPointerDown: (event) => start_drag(index - 1, event), onKeyDown: (event) => nudge(index - 1, event), onDoubleClick: () => change(distribute(extent(), specs, preferred), true) })), _jsx("div", { className: "split-pane", children: pane })] }, index))) }));
 }

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

@@ -1,15 +1,15 @@
-import type { ComponentChildren } from "preact";
+import { type ReactNode } from "react";
 export declare function Skeleton({ lines }: {
     lines?: number;
-}): import("preact").JSX.Element;
+}): import("react").JSX.Element;
 export declare function Empty({ title, hint }: {
     title: string;
-    hint?: ComponentChildren;
-}): import("preact").JSX.Element;
+    hint?: ReactNode;
+}): import("react").JSX.Element;
 export declare function Failure({ error, retry }: {
     error: unknown;
     retry: () => void;
-}): import("preact").JSX.Element;
+}): import("react").JSX.Element;
 export interface Resource<Data> {
     data: Data | null;
     error: unknown;
@@ -23,5 +23,5 @@ export declare function use_resource<Data>(work: () => Promise<Data>, dependenci
 export declare function Loaded<Data>({ resource, lines, children }: {
     resource: Resource<Data>;
     lines?: number;
-    children: (data: Data) => ComponentChildren;
-}): import("preact").JSX.Element;
+    children: (data: Data) => ReactNode;
+}): import("react").JSX.Element;

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

@@ -1,15 +1,16 @@
-import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "preact/jsx-runtime";
-import { useCallback, useEffect, useRef, useState } from "preact/hooks";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// What a part of the page shows while it loads, when it has nothing, and when loading failed, and the hook that loads it.
+import { useCallback, useEffect, useRef, useState } from "react";
 import { pass_login_needed } from "../states.js";
 // ── 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)) }));
+    return (_jsx("div", { className: "skeleton", "aria-busy": "true", "aria-label": "Loading", children: Array.from({ length: lines }, (_, index) => _jsx("div", { className: "skeleton-line", style: { width: `${90 - index * 15}%` } }, 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 })] }));
+    return (_jsxs("div", { className: "empty", children: [_jsx("p", { className: "empty-title", children: title }), hint && _jsx("p", { className: "muted", children: hint })] }));
 }
 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" })] }));
+    return (_jsxs("div", { className: "failure", role: "alert", children: [_jsxs("p", { children: ["Could not load this: ", error instanceof Error ? error.message : String(error)] }), _jsx("button", { onClick: retry, children: "Retry" })] }));
 }
 // Loads what the work fetches whenever the dependencies change, passing a lapsed login on to the page.
 export function use_resource(work, dependencies, options = {}) {

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

@@ -0,0 +1,46 @@
+import { type MouseEvent, type ReactNode } from "react";
+import { type Sorting } from "../tables.ts";
+export type { Sorting } from "../tables.ts";
+export interface TableColumn<Row> {
+    label: string;
+    id?: string;
+    cell: (row: Row) => ReactNode;
+    sort?: (row: Row) => string | number | null;
+    class?: string;
+    width?: number;
+    min_width?: number;
+    max_width?: number;
+    hideable?: boolean;
+    movable?: boolean;
+    filter?: ReactNode | ((close: () => void) => ReactNode);
+    filter_active?: boolean;
+}
+interface DataTableProps<Row> {
+    columns: TableColumn<Row>[];
+    rows: Row[];
+    row_key?: (row: Row) => string | number;
+    caption?: string;
+    sorting?: Sorting | Sorting[];
+    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;
+    row_class?: (row: Row) => string | undefined;
+}
+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,210 @@
+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, and cards on phones.
+import { useLayoutEffect, useMemo, useRef, useState } from "react";
+import { getCoreRowModel, getExpandedRowModel, getSortedRowModel, useReactTable } from "@tanstack/react-table";
+import { clamp_width, column_id, compare_values, move_column, ordered_columns, sort_after_click, sorting_list } from "../tables.js";
+import { ContextMenu, Popover } from "./menus.js";
+import { ResizeHandle } from "./split.js";
+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;
+    });
+}
+// ── Table ────────────────────────────────────────────────────────────────────
+export function DataTable(props) {
+    const { columns, rows, row_key, caption, get_children, row_passes } = props;
+    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 by_id = useMemo(() => new Map(columns.map((column) => [column_id(column), column])), [columns]);
+    const all_ids = columns.map(column_id);
+    const sorting = sorting_list(props.sorting).filter((key) => by_id.get(key.key)?.sort);
+    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.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,
+    });
+    const shown = table.getVisibleLeafColumns().map((column) => by_id.get(column.id));
+    function toggle_row(row) {
+        const open = expanded === true
+            ? table.getCoreRowModel().flatRows.filter((each) => each.subRows.length > 0).map((each) => each.id)
+            : expanded;
+        const next = row.getIsExpanded() ? open.filter((id) => id !== row.id) : [...open, row.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.map(column_id).join("\n"), 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)) };
+    });
+    // ── Drawing ──
+    function header(column) {
+        const id = column_id(column);
+        const index = sorting.findIndex((key) => key.key === id);
+        const key = sorting[index];
+        const sortable = Boolean(column.sort) && Boolean(props.on_sort || props.on_sorting_change);
+        const width = 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 ? undefined : { width, minWidth: width, maxWidth: width }, "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: [column.label, marker] })) : movable ? (_jsx("span", { tabIndex: 0, onKeyDown: (event) => move_by_key(column, event), children: column.label })) : column.label, 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 && (_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) {
+        const original = row.original;
+        const extra = props.row_class?.(original);
+        return (_jsx("tr", { className: extra, onClick: props.on_row_click && ((event) => props.on_row_click(original, event)), onContextMenu: props.on_row_context_menu && ((event) => props.on_row_context_menu(original, event)), children: shown.map((column, index) => {
+                const label = column.label;
+                if (!tree || index > 0)
+                    return _jsx("td", { className: column.class, "data-label": label, children: column.cell(original) }, column_id(column));
+                const open = row.getIsExpanded();
+                const count = row.subRows.length;
+                return (_jsxs("td", { className: [column.class, "tree-cell"].filter(Boolean).join(" "), "data-label": label, style: { "--tree-depth": row.depth }, children: [count > 0 ? (_jsx("button", { type: "button", className: "icon tree-toggle", "aria-expanded": open, "aria-label": open ? "Collapse" : "Expand", onClick: (event) => { event.stopPropagation(); toggle_row(row); }, children: open ? "▾" : "▸" })) : _jsx("span", { className: "tree-spacer" }), column.cell(original), count > 0 && !open && _jsx("span", { className: "tree-count", title: `${count} inside`, children: count })] }, column_id(column)));
+            }) }, row.id));
+    }
+    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: [tools && (_jsxs("div", { className: "table-tools", children: [props.on_clear_filters && any_filter && _jsx("button", { type: "button", onClick: props.on_clear_filters, children: "Clear filters" }), props.on_hidden_columns_change && _jsx("button", { type: "button", "aria-haspopup": "menu", onClick: open_columns_menu, children: "Columns" })] })), _jsx("div", { className: "table-wrap", children: _jsxs("table", { className: "responsive", children: [caption && _jsx("caption", { className: "visually-hidden", children: caption }), _jsx("thead", { onContextMenu: props.on_hidden_columns_change && open_columns_menu, children: _jsx("tr", { children: shown.map(header) }) }), _jsx("tbody", { children: table.getRowModel().rows.map(body_row) })] }) }), 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/{preact → react}/time.d.ts

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

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

@@ -1,4 +1,4 @@
-import { Fragment as _Fragment, jsx as _jsx } from "preact/jsx-runtime";
+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.
 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.

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

@@ -10,6 +10,8 @@ export interface ToastOptions {
     };
     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 declare function Toasts(): import("preact").JSX.Element;
+export declare function Toasts(): import("react").JSX.Element;

package/dist/web/react/toasts.js

@@ -0,0 +1,41 @@
+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");
+}
+// ── 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", "aria-label": "Dismiss", onClick: close, children: "\u00D7" })] }, item.id));
+        }) }));
+}

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

@@ -0,0 +1,23 @@
+import { type MouseEvent, type ReactNode } from "react";
+import { type DropPlacement, type TreeItem, type TreeMove } from "../tree.ts";
+export type { DropPlacement, TreeItem, TreeMove } from "../tree.ts";
+interface TreeProps<Item extends TreeItem> {
+    items: Item[];
+    label: string;
+    render_item: (item: Item) => ReactNode;
+    render_extra?: (item: Item) => ReactNode;
+    name_of?: (item: Item) => string;
+    collapsed: ReadonlySet<string>;
+    on_collapsed_change: (collapsed: Set<string>) => void;
+    selected_id?: string | null;
+    on_select?: (item: Item) => void;
+    on_move?: (item: Item, move: TreeMove) => void;
+    can_drop?: (dragged: Item, target: Item, placement: DropPlacement) => boolean;
+    allow_inside?: boolean;
+    new_item?: {
+        parent_id: string | null;
+        form: ReactNode;
+    } | null;
+    on_context_menu?: (event: MouseEvent<HTMLElement>, item: Item) => void;
+}
+export declare function Tree<Item extends TreeItem>({ items, label, render_item, render_extra, name_of, collapsed, on_collapsed_change, selected_id, on_select, on_move, can_drop, allow_inside, new_item, on_context_menu, }: TreeProps<Item>): import("react").JSX.Element;