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

package/dist/web/react/menu_button.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { open_context_menu } from "./menus.js";
+export function MenuButton({ label, items, glyph = "⋮", class_name }) {
+    function open(event) {
+        // The button may sit inside a link, such as a whole card that opens its video.
+        event.preventDefault();
+        event.stopPropagation();
+        const box = event.currentTarget.getBoundingClientRect();
+        open_context_menu({ clientX: box.left, clientY: box.bottom, preventDefault: () => { } }, typeof items === "function" ? items() : items);
+    }
+    return (_jsx("button", { type: "button", className: class_name ? `icon menu-trigger ${class_name}` : "icon menu-trigger", "aria-label": label, title: label, "aria-haspopup": "menu", onClick: open, children: glyph }));
+}

package/dist/web/react/menus.js

@@ -92,13 +92,37 @@ function use_menu_keys(container, dismiss, whole_menu) {
         }
     };
 }
-// A menu's buttons, also for use inside a Popover, such as a column filter's choices.
+// Which radio run each item is in: radio items side by side, broken by a separator or another item.
+function radio_runs(items) {
+    let run = 0;
+    return items.map((item, index) => {
+        const previous = items[index - 1];
+        if (!item.radio || item.separator_before || !previous?.radio)
+            run += 1;
+        return run;
+    });
+}
+// A menu's buttons, also for use inside a Popover, such as a column filter's choices; an item that keeps the menu open ticks at once, until new items arrive.
 export function MenuList({ items, on_close }) {
-    return (_jsx(_Fragment, { children: items.map((item) => (_jsxs(Fragment, { children: [item.separator_before && _jsx("div", { className: "menu-separator", role: "separator" }), _jsxs("button", { type: "button", className: item.danger ? "menu-item danger" : "menu-item", role: item.checked === undefined ? "menuitem" : item.radio ? "menuitemradio" : "menuitemcheckbox", "aria-checked": item.checked, "aria-disabled": item.disabled || undefined, tabIndex: -1, onClick: () => {
+    const [ticks, set_ticks] = useState({ items, checked: {} });
+    const checked_now = ticks.items === items ? ticks.checked : {};
+    const runs = radio_runs(items);
+    const is_checked = (item) => item.checked === undefined ? undefined : checked_now[item.label] ?? item.checked;
+    function tick(item, index) {
+        if (item.checked === undefined)
+            return;
+        const changes = item.radio
+            ? Object.fromEntries(items.filter((other, other_index) => other.radio && runs[other_index] === runs[index]).map((other) => [other.label, other === item]))
+            : { [item.label]: !is_checked(item) };
+        set_ticks({ items, checked: { ...checked_now, ...changes } });
+    }
+    return (_jsx(_Fragment, { children: items.map((item, index) => (_jsxs(Fragment, { children: [item.separator_before && _jsx("div", { className: "menu-separator", role: "separator" }), _jsxs("button", { type: "button", className: item.danger ? "menu-item danger" : "menu-item", role: item.checked === undefined ? "menuitem" : item.radio ? "menuitemradio" : "menuitemcheckbox", "aria-checked": is_checked(item), "aria-disabled": item.disabled || undefined, tabIndex: -1, onClick: () => {
                         if (item.disabled)
                             return;
                         if (!item.keep_open)
                             on_close();
+                        else
+                            tick(item, index);
                         item.run();
                     }, children: [_jsx("span", { className: "menu-label", children: item.label }), item.hint && _jsx("span", { className: "menu-hint", children: item.hint })] })] }, item.label))) }));
 }

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

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

package/dist/web/react/prefs.js

@@ -0,0 +1,11 @@
+// A remembered setting as component state, read once when the component mounts and written on every change.
+import { useState } from "react";
+import { browser_storage, read_pref, write_pref } from "../prefs.js";
+export function use_pref(key, initial, validate, storage = browser_storage()) {
+    const [value, set_value] = useState(() => read_pref(storage, key, initial, validate));
+    const change = (next) => {
+        set_value(next);
+        write_pref(storage, key, next);
+    };
+    return [value, change];
+}

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

@@ -0,0 +1,10 @@
+export interface RevealOptions {
+    root_margin?: string;
+    initial_count?: number;
+}
+export interface Reveal {
+    shown_count: number;
+    more_ref: (element: Element | null) => void;
+    reset: () => void;
+}
+export declare function use_reveal(page_size: number, options?: RevealOptions): Reveal;

package/dist/web/react/reveal.js

@@ -0,0 +1,30 @@
+// A long list shown a page at a time, the next page added as its end scrolls into view.
+import { useCallback, useEffect, useRef, useState } from "react";
+export function use_reveal(page_size, options = {}) {
+    const root_margin = options.root_margin ?? "200px";
+    const [shown_count, set_shown_count] = useState(() => Math.max(page_size, options.initial_count ?? page_size));
+    const observer = useRef(null);
+    const marker = useRef(null);
+    const more_ref = useCallback((element) => {
+        observer.current?.disconnect();
+        observer.current = null;
+        marker.current = element;
+        if (!element)
+            return;
+        observer.current = new IntersectionObserver((entries) => {
+            if (entries.some((entry) => entry.isIntersecting))
+                set_shown_count((count) => count + page_size);
+        }, { rootMargin: root_margin });
+        observer.current.observe(element);
+    }, [page_size, root_margin]);
+    // Watching the marker afresh after each page asks again whether it is still in view, so a short page keeps filling.
+    useEffect(() => {
+        if (!observer.current || !marker.current)
+            return;
+        observer.current.unobserve(marker.current);
+        observer.current.observe(marker.current);
+    }, [shown_count]);
+    useEffect(() => () => observer.current?.disconnect(), []);
+    const reset = useCallback(() => set_shown_count(page_size), [page_size]);
+    return { shown_count, more_ref, reset };
+}

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

@@ -25,13 +25,19 @@ interface ShellProps {
     sidebar?: ReactNode;
     sidebar_width?: SidebarWidth;
     theme: ThemeChoice;
-    user: string | null;
+    user?: string | null;
+    logged_out?: boolean;
     user_href?: string;
     on_logout?: () => void;
+    brand_href?: string;
+    menu_open?: boolean;
+    on_menu_open_change?: (open: boolean) => void;
+    main_class?: string;
     tools?: ReactNode;
     sidebar_foot?: ReactNode;
+    status_bar?: ReactNode;
     view_key?: string;
     children: ReactNode;
 }
-export declare function Shell({ brand, sections, active, sidebar: sidebar_content, sidebar_width, theme, user, user_href, on_logout, tools, sidebar_foot, view_key, children }: ShellProps): import("react").JSX.Element;
+export declare function Shell({ brand, sections, active, sidebar: sidebar_content, sidebar_width, theme, user, logged_out: held_logged_out, user_href, on_logout, brand_href, tools, sidebar_foot, status_bar, view_key, menu_open: held_menu_open, on_menu_open_change, main_class, children, }: ShellProps): import("react").JSX.Element;
 export {};

package/dist/web/react/shell.js

@@ -1,5 +1,5 @@
 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.
+// The frame around every view: the top bar, the sidebar that slides in on phones and resizes on wide screens, the theme button, a status bar, 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";
@@ -41,20 +41,31 @@ function use_sidebar_width(spec) {
     };
     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);
+export function Shell({ brand, sections = [], active, sidebar: sidebar_content, sidebar_width, theme, user, logged_out: held_logged_out, user_href, on_logout, brand_href = "#/", tools, sidebar_foot, status_bar, view_key, menu_open: held_menu_open, on_menu_open_change, main_class, children, }) {
+    const [own_menu_open, set_own_menu_open] = useState(false);
+    const menu_open = held_menu_open ?? own_menu_open;
     const main = useRef(null);
     const menu_button = useRef(null);
     const sidebar = useRef(null);
     const first_view = useRef(true);
-    const logged_out = user === null;
+    const logged_out = held_logged_out ?? user === null;
+    const user_name = typeof user === "string" && user !== "" ? user : undefined;
     const [width, change_width] = use_sidebar_width(sidebar_width);
+    // Every opening and closing of the phone menu goes through here, so an app that holds it hears each one.
+    function set_menu_open(open) {
+        if (open === menu_open)
+            return;
+        if (held_menu_open === undefined)
+            set_own_menu_open(open);
+        on_menu_open_change?.(open);
+    }
     // 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]);
+        document.body.classList.toggle("has-status-bar", status_bar !== undefined);
+    }, [logged_out, menu_open, status_bar !== undefined]);
     useEffect(() => {
         if (menu_open)
             sidebar.current?.querySelector("a[href], button:not(:disabled), input, select, textarea, [tabindex='0']")?.focus();
@@ -77,5 +88,5 @@ export function Shell({ brand, sections = [], active, sidebar: sidebar_content,
         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, {})] }));
+    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: brand_href, className: "brand", children: brand }), !logged_out && tools, !logged_out && _jsx(ThemeButton, { choice: theme }), user_name !== undefined && (user_href ? _jsx("a", { className: "account-link", href: user_href, children: user_name }) : _jsx("span", { className: "user-name", children: user_name })), user_name !== undefined && 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 !== undefined && sidebar_content !== null ? _jsx("div", { className: "sidebar-content", 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", className: main_class, tabIndex: -1, children: children })] }), status_bar !== undefined && _jsx("footer", { className: "status-bar", children: status_bar }), _jsx(Toasts, {}), _jsx(Dialogs, {}), _jsx(ContextMenus, {})] }));
 }

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

@@ -1,11 +1,14 @@
-import { type MouseEvent, type ReactNode } from "react";
+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;
     id?: string;
     cell: (row: Row) => ReactNode;
     sort?: (row: Row) => string | number | null;
+    sortable?: boolean;
     class?: string;
     width?: number;
     min_width?: number;
@@ -15,12 +18,27 @@ export interface TableColumn<Row> {
     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;
     sorting?: Sorting | Sorting[];
+    manual_sorting?: boolean;
     on_sort?: (sorting: Sorting) => void;
     on_sorting_change?: (sorting: Sorting[]) => void;
     column_order?: string[];
@@ -36,7 +54,19 @@ interface DataTableProps<Row> {
     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 }: {

package/dist/web/react/table.js

@@ -1,9 +1,12 @@
 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";
+// 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 { 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";
 const is_empty = (value) => value === null || value === undefined || value === "";
@@ -15,9 +18,48 @@ function filtered_tree(rows, passes, get_children, kept_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, rows, row_key, caption, get_children, row_passes } = 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 });
@@ -27,9 +69,14 @@ export function DataTable(props) {
     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 sorting = sorting_list(props.sorting).filter((key) => by_id.get(key.key)?.sort);
+    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;
@@ -61,7 +108,7 @@ export function DataTable(props) {
         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 })),
+            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])),
@@ -70,13 +117,15 @@ export function DataTable(props) {
         getSortedRowModel: getSortedRowModel(),
         getExpandedRowModel: getExpandedRowModel(),
         getRowCanExpand: (row) => row.subRows.length > 0,
+        manualSorting: manual,
     });
-    const shown = table.getVisibleLeafColumns().map((column) => by_id.get(column.id));
-    function toggle_row(row) {
+    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 = row.getIsExpanded() ? open.filter((id) => id !== row.id) : [...open, row.id];
+        const next = is_open ? open.filter((each) => each !== id) : [...open, id];
         if (props.expanded === undefined)
             set_own_expanded(next);
         props.on_expanded_change?.(next);
@@ -96,7 +145,7 @@ export function DataTable(props) {
             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]);
+    }, [shown_ids, props.on_column_widths_change]);
     function resize(column, width, done) {
         props.on_column_widths_change?.({ ...widths, [column_id(column)]: width }, done);
     }
@@ -162,13 +211,72 @@ export function DataTable(props) {
         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 = Boolean(column.sort) && Boolean(props.on_sort || props.on_sorting_change);
-        const width = width_of(column);
+        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"),
@@ -177,29 +285,106 @@ export function DataTable(props) {
         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) => {
+                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: [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));
+            }, 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 && !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) {
+    function body_row(row, key) {
         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 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: [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) })] }));
+    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", { ref: wrap, className: props.virtual ? "table-wrap virtual" : "table-wrap", style: props.virtual ? { overflowY: "auto" } : undefined, onScroll: line_height === undefined ? undefined : measure, children: _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.

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

@@ -2,3 +2,4 @@ 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

@@ -1,5 +1,6 @@
 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.
+// 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 = "—" }) {
@@ -7,3 +8,12 @@ export function Age({ epoch, missing = "—" }) {
         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;
+}