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

package/dist/web/react/shell.js

@@ -0,0 +1,81 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// The frame around every view: the top bar, the sidebar that slides in on phones and resizes on wide screens, the theme button, and the toasts, dialogs and menus.
+import { useEffect, useRef, useState } from "react";
+import { current_route } from "../router.js";
+import { store_sizes, stored_sizes } from "../split.js";
+import { next_theme } from "../theme.js";
+import { Dialogs } from "./dialog.js";
+import { ContextMenus } from "./menus.js";
+import { ResizeHandle } from "./split.js";
+import { Toasts } from "./toasts.js";
+// ── Route ────────────────────────────────────────────────────────────────────
+// The hash route, read again whenever it changes.
+export function use_route() {
+    const [route, set_route] = useState(current_route);
+    useEffect(() => {
+        const changed = () => set_route(current_route());
+        window.addEventListener("hashchange", changed);
+        return () => window.removeEventListener("hashchange", changed);
+    }, []);
+    return route;
+}
+// ── Theme ────────────────────────────────────────────────────────────────────
+const theme_labels = { system: ["◐", "Theme: system"], light: ["☀", "Theme: light"], dark: ["☾", "Theme: dark"] };
+// Steps through system, light and dark, its glyph and label showing the current one.
+export function ThemeButton({ choice }) {
+    const [theme, set_theme] = useState(choice.get);
+    useEffect(() => choice.on_change(set_theme), []);
+    const [icon, text] = theme_labels[theme];
+    return (_jsx("button", { id: "theme", className: "icon", title: `${text} (click to change)`, "aria-label": `${text}, click to change`, onClick: () => choice.set(next_theme(choice.get())), children: icon }));
+}
+// The sidebar's width: the app's own, else the one kept in this browser, else the default.
+function use_sidebar_width(spec) {
+    const [kept, set_kept] = useState(() => spec?.storage_key ? stored_sizes(spec.storage_key, 1)?.[0] : undefined);
+    const width = spec ? Math.min(spec.max, Math.max(spec.min, spec.width ?? kept ?? spec.default_width)) : undefined;
+    const change = (next, done) => {
+        if (spec?.width === undefined)
+            set_kept(next);
+        if (done && spec?.storage_key)
+            store_sizes(spec.storage_key, [next]);
+        spec?.on_change?.(next, done);
+    };
+    return [width, change];
+}
+export function Shell({ brand, sections = [], active, sidebar: sidebar_content, sidebar_width, theme, user, user_href, on_logout, tools, sidebar_foot, view_key, children }) {
+    const [menu_open, set_menu_open] = useState(false);
+    const main = useRef(null);
+    const menu_button = useRef(null);
+    const sidebar = useRef(null);
+    const first_view = useRef(true);
+    const logged_out = user === null;
+    const [width, change_width] = use_sidebar_width(sidebar_width);
+    // The login page has no theme button, so the saved theme is set here.
+    useEffect(() => theme.apply(), []);
+    useEffect(() => {
+        document.body.classList.toggle("logged-out", logged_out);
+        document.body.classList.toggle("menu-open", menu_open);
+    }, [logged_out, menu_open]);
+    useEffect(() => {
+        if (menu_open)
+            sidebar.current?.querySelector("a[href], button:not(:disabled), input, select, textarea, [tabindex='0']")?.focus();
+        if (!menu_open)
+            return;
+        const escape = (event) => {
+            if (event.key !== "Escape")
+                return;
+            set_menu_open(false);
+            menu_button.current?.focus();
+        };
+        document.addEventListener("keydown", escape);
+        return () => document.removeEventListener("keydown", escape);
+    }, [menu_open]);
+    // A new view closes the menu and takes focus, which tells a screen reader the page changed, but not on the first load.
+    useEffect(() => {
+        set_menu_open(false);
+        if (!first_view.current)
+            main.current?.focus({ preventScroll: true });
+        first_view.current = false;
+        window.scrollTo(0, 0);
+    }, [view_key]);
+    return (_jsxs(_Fragment, { children: [_jsx("a", { className: "skip", href: "#main", children: "Skip to content" }), _jsxs("header", { className: "topbar", children: [_jsx("button", { ref: menu_button, className: "icon menu-button", "aria-label": "Open the menu", "aria-expanded": menu_open, "aria-controls": "sidebar", onClick: () => set_menu_open(!menu_open), children: "\u2630" }), _jsx("a", { href: "#/", className: "brand", children: brand }), !logged_out && tools, !logged_out && _jsx(ThemeButton, { choice: theme }), !logged_out && (user_href ? _jsx("a", { className: "account-link", href: user_href, children: user }) : _jsx("span", { className: "user-name", children: user })), !logged_out && on_logout && _jsx("button", { onClick: on_logout, children: "Log out" })] }), _jsxs("div", { className: "layout", style: width === undefined ? undefined : { "--sidebar-width": `${width}px` }, children: [_jsxs("nav", { ref: sidebar, id: "sidebar", className: "sidebar", "aria-label": "Main", children: [sidebar_content ?? sections.map((section) => (_jsx("a", { href: section.href, "data-section": section.id, className: section.id === active ? "active" : undefined, "aria-current": section.id === active ? "page" : undefined, children: section.label }, section.id))), sidebar_foot, sidebar_width && width !== undefined && (_jsx(ResizeHandle, { side: "left", size: width, min: sidebar_width.min, max: sidebar_width.max, default_size: sidebar_width.default_width, on_resize: (next) => change_width(next, false), on_resize_end: (next) => change_width(next, true), label: "Resize the sidebar", class_name: "sidebar-resize" }))] }), _jsx("div", { className: "scrim", hidden: !menu_open, onClick: () => set_menu_open(false) }), _jsx("main", { ref: main, id: "main", tabIndex: -1, children: children })] }), _jsx(Toasts, {}), _jsx(Dialogs, {}), _jsx(ContextMenus, {})] }));
+}

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/react/states.d.ts

@@ -0,0 +1,27 @@
+import { type ReactNode } from "react";
+export declare function Skeleton({ lines }: {
+    lines?: number;
+}): import("react").JSX.Element;
+export declare function Empty({ title, hint }: {
+    title: string;
+    hint?: ReactNode;
+}): import("react").JSX.Element;
+export declare function Failure({ error, retry }: {
+    error: unknown;
+    retry: () => void;
+}): import("react").JSX.Element;
+export interface Resource<Data> {
+    data: Data | null;
+    error: unknown;
+    loading: boolean;
+    reload: (quiet?: boolean) => Promise<void>;
+}
+export interface ResourceOptions {
+    refresh_in_milliseconds?: number;
+}
+export declare function use_resource<Data>(work: () => Promise<Data>, dependencies: unknown[], options?: ResourceOptions): Resource<Data>;
+export declare function Loaded<Data>({ resource, lines, children }: {
+    resource: Resource<Data>;
+    lines?: number;
+    children: (data: Data) => ReactNode;
+}): import("react").JSX.Element;

package/dist/web/react/states.js

@@ -0,0 +1,49 @@
+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", { 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", { 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", { 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 = {}) {
+    const [state, set_state] = useState({ data: null, error: null, loading: true });
+    const latest_work = useRef(work);
+    latest_work.current = work;
+    const generation = useRef(0);
+    const reload = useCallback((quiet = false) => {
+        const mine = ++generation.current;
+        if (!quiet)
+            set_state({ data: null, error: null, loading: true });
+        return latest_work.current().then((data) => { if (mine === generation.current)
+            set_state({ data, error: null, loading: false }); }, (error) => {
+            if (pass_login_needed(error) || mine !== generation.current)
+                return;
+            set_state((before) => quiet && before.data !== null ? { ...before, loading: false } : { data: null, error, loading: false });
+        });
+    }, []);
+    useEffect(() => void reload(), dependencies);
+    useEffect(() => {
+        if (!options.refresh_in_milliseconds)
+            return;
+        const timer = setInterval(() => { if (document.visibilityState === "visible")
+            void reload(true); }, options.refresh_in_milliseconds);
+        return () => clearInterval(timer);
+    }, [options.refresh_in_milliseconds]);
+    return { ...state, reload };
+}
+// Shows a skeleton while the resource first loads, an error with Retry if that fails, and what children build from it after.
+export function Loaded({ resource, lines, children }) {
+    if (resource.data !== null)
+        return _jsx(_Fragment, { children: children(resource.data) });
+    if (resource.error !== null)
+        return _jsx(Failure, { error: resource.error, retry: () => void resource.reload() });
+    return _jsx(Skeleton, { lines: lines });
+}

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/react/time.d.ts

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