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

package/README.md

@@ -28,18 +28,22 @@ Code the X-apps share, published as one npm package, `@x-tech-laboratories/x-lib
 | `server/backup_files`                    | `file_backup_store`: the `backups` store as files in a folder on disk.        |
 | `web/dom`, `web/format`, `web/router`, `web/theme` | The page's element builder, formatters (including `compact_count`, such as `"1.4M"`), hash router and theme choice, kept in this browser or the app's settings. |
 | `web/states`, `web/tables`, `web/menus`, `web/split` | `LoginNeeded`; sorting by several columns, trees and column order; menu items, placement and keys; pane sizing. |
-| `web/tree`                               | Rows with `parent_id` and `position`: nesting, subtrees, tree order, paths, and where a dropped or keyed row lands. |
+| `web/tree`                               | Rows with `parent_id` and `position`: nesting, subtrees, tree order, paths, and where a dropped or keyed row lands, its siblings ordered by position or, with `by_list_order`, as the list gives them. |
 | `web/watch`, `web/react/watch`           | `create_watch`: a change counter a store bumps; `use_watch` redraws only the components that read that store. |
 | `web/prefs`, `web/react/prefs`           | Remembered view settings that read as their default when stored corrupt, stale or of the wrong shape; `use_pref` keeps one as component state. |
 | `web/selection`, `web/virtual`, `web/drag` | Picking rows with plain, Ctrl and Shift clicks from a fixed anchor, or as lists of ids with the anchor kept by id, the row an arrow or page key moves to; which rows of a long list a viewport needs; a badge such as "3 tasks" as the drag image. |
-| `web/react/shell`                        | `Shell`: top bar, section links or the app's own sidebar, resizable, theme button, toasts, dialogs and menus, with or without logins, its phone menu held by the Shell or the app; `use_route`. |
-| `web/react/layout`, `badges`, `states`   | Panels, facts, tiles, cards, tabs, crumbs, steppers, settings rows, `RowActions` and `moved` for ordered lists, `SelectionBar` for picked rows; badges and chips; `use_resource` and its loading states. |
+| `web/react/shell`                        | `Shell`: top bar, section links or the app's own sidebar in a `.sidebar-content` box, resizable, theme button, a `status_bar` at the foot, toasts, dialogs and menus, with or without logins (no account UI without a `user`, `logged_out` hiding the sidebar and tools), its phone menu held by the Shell or the app; `use_route`. |
+| `web/react/layout`, `badges`, `states`   | `PageHeading` with a subtitle, icon, banner and actions; panels, facts, tiles, cards, tabs, crumbs, steppers, settings rows, `RowActions` and `moved` for ordered lists, `SelectionBar` for picked rows; badges and chips; `use_resource` with its `status` (idle until `enabled`, loading, loaded, failed), a `watch` that reloads it quietly, and its loading states, `Loaded` taking an `idle` slot. |
 | `web/react/time`                         | `Age`: a time as how long ago, with the full stamp on hover; `use_now`, the time read again each minute. |
-| `web/react/reveal`                       | `use_reveal`: a long list shown a page at a time, the next page added as its end scrolls into view. |
-| `web/react/controls`, `table`            | Segmented choices, button groups, switches, search boxes that can take focus and follow a value cleared from outside, selects, `CommitInput`, `DateTimeField`, `ColorPicker`, `TreeSelect`; `DataTable` on TanStack Table, sorting by several columns, with columns to move, resize, hide and filter, tree rows, groups under headings, rows the app drags and styles, rows that come sorted from a database, rows worked by keyboard, and cards on phones; a pager. |
+| `web/react/reveal`                       | `use_reveal`: a long list shown a page at a time, the next page added as its end scrolls into view, starting from the count shown before the page was left if given. |
+| `web/react/media`                        | `Avatar`, a round picture or the name's first letter; `MediaTile` and `MediaGrid`: videos, albums or playlists as tiles in a grid or as rows, with text over the picture's corner such as a length, lines under the title, a faded look, and buttons in the corner. |
+| `web/react/menu_button`                  | `MenuButton`: a ⋮ button that opens a menu under itself, even inside a link, saying through `aria-expanded` whether it is open. |
+| `web/react/test_stubs`                   | Stands in for `showPopover`, `hidePopover`, `showModal` and `close`, which jsdom lacks; an app's widget tests import it for its side effects. |
+| `web/react/list_picker`                  | `pick_list_dialog`: adds one thing to any of the app's lists, such as a video to playlists, ticking the lists that hold it and making a new one. |
+| `web/react/controls`, `table`            | Segmented choices, button groups, switches, search boxes that hand on typing as it pauses, submit on Enter or a button, clear on Escape, can take a paste whole, take focus and follow a value cleared from outside, selects, `CommitInput`, `DateTimeField`, `ColorPicker`, `TreeSelect`; `DataTable` on TanStack Table, sorting by several columns, with columns to move, resize, hide and filter, tree rows, groups under headings, rows the app drags and styles, rows that come sorted from a database, rows worked by keyboard, rows that draw again only when they change, `virtual` rows drawn only where they show, a last column that fills the room left, group headings that hide when the filter empties them, and cards on phones; a pager. |
 | `web/react/shortcuts`                    | `use_shortcuts` for keys such as `"mod+z"`, quiet while typing or while a dialog or popover is open; `describe_keys` for help text. |
 | `web/react/tree`                         | `Tree`: nested rows that fold, walk with the arrow keys, reorder by dragging or with Alt and the arrow keys, show several picked, and take drops from outside. |
-| `web/react/toasts`, `dialog`, `menus`, `split` | Toasts with a link or Undo that say how they closed, and `undoable` actions that commit or undo exactly once; modal, confirm and text dialogs openable from anywhere; context menus and popovers worked by keyboard, openable from anywhere; resize handles and splits. |
+| `web/react/toasts`, `dialog`, `menus`, `split` | Toasts with a link or Undo that say how they closed, and `undoable` actions that commit or undo exactly once; modal dialogs with a subtitle, header actions, a full-window size and a `form` whose submit button sends it, and confirm and text dialogs, openable from anywhere; context menus and popovers worked by keyboard, openable from anywhere, their keep-open items ticking at once; resize handles and splits. |
 
 ```ts
 import { AgentHub } from "@x-tech-laboratories/x-libs/server/agents/hub";

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

@@ -25,10 +25,14 @@ export declare function Switch({ label, checked, on_change, disabled }: SwitchPr
 interface SearchBoxProps {
     label: string;
     value: string;
-    on_input: (value: string) => void;
+    on_input?: (value: string) => void;
+    on_submit?: (value: string) => void;
+    on_paste?: (text: string) => boolean;
+    submit_label?: string;
+    clear_on_submit?: boolean;
     auto_focus?: boolean;
 }
-export declare function SearchBox({ label, value, on_input, auto_focus }: SearchBoxProps): import("react").JSX.Element;
+export declare function SearchBox({ label, value, on_input, on_submit, on_paste, submit_label, clear_on_submit, auto_focus }: SearchBoxProps): import("react").JSX.Element;
 interface SelectProps<Value extends string | number> {
     label: string;
     options: [value: Value, text: string][];

package/dist/web/react/controls.js

@@ -31,27 +31,76 @@ export function Switch({ label, checked, on_change, disabled = false }) {
     }
     return _jsx("input", { type: "checkbox", role: "switch", "aria-label": label, checked: checked, disabled: disabled || busy, onChange: change });
 }
-// A search field that hands on what was typed once typing pauses; the field keeps its own text, so a redraw never wipes typing, and shows a value changed from outside, such as one cleared.
-export function SearchBox({ label, value, on_input, auto_focus = false }) {
+// A search field that hands on what was typed once typing pauses and submits it on Enter; Escape clears it; the field keeps its own text, so a redraw never wipes typing, and shows a value changed from outside, such as one cleared.
+export function SearchBox({ label, value, on_input, on_submit, on_paste, submit_label, clear_on_submit = false, auto_focus = false }) {
     const field = useRef(null);
     const timer = useRef(undefined);
     const handed_on = useRef(value);
+    const submitted = useRef(value);
     useEffect(() => () => clearTimeout(timer.current), []);
     useEffect(() => {
         if (value === handed_on.current || !field.current)
             return;
         clearTimeout(timer.current);
         handed_on.current = value;
+        submitted.current = value;
         field.current.value = value;
     }, [value]);
-    return (_jsx("input", { ref: field, type: "search", className: "filter", placeholder: label, "aria-label": label, defaultValue: value, autoFocus: auto_focus, onChange: (event) => {
-            clearTimeout(timer.current);
-            const text = event.currentTarget.value;
-            timer.current = window.setTimeout(() => {
-                handed_on.current = text;
-                on_input(text);
-            }, 200);
-        } }));
+    function hand_on(text) {
+        clearTimeout(timer.current);
+        if (text === handed_on.current)
+            return;
+        handed_on.current = text;
+        on_input?.(text);
+    }
+    function submit() {
+        const text = field.current?.value ?? "";
+        hand_on(text);
+        submitted.current = clear_on_submit ? "" : text;
+        on_submit?.(text);
+        if (clear_on_submit && field.current) {
+            field.current.value = "";
+            handed_on.current = "";
+        }
+    }
+    function clear() {
+        if (!field.current)
+            return;
+        field.current.value = "";
+        hand_on("");
+        if (submitted.current !== "") {
+            submitted.current = "";
+            on_submit?.("");
+        }
+    }
+    function typed(event) {
+        clearTimeout(timer.current);
+        const text = event.currentTarget.value;
+        // An emptied field goes straight back to everything, taking back what was submitted.
+        if (text === "")
+            return clear();
+        if (!on_input)
+            return;
+        timer.current = window.setTimeout(() => hand_on(text), 200);
+    }
+    function keyed(event) {
+        if (event.key === "Enter") {
+            event.preventDefault();
+            submit();
+        }
+        else if (event.key === "Escape" && event.currentTarget.value !== "") {
+            event.preventDefault();
+            clear();
+        }
+    }
+    function pasted(event) {
+        if (on_paste?.(event.clipboardData.getData("text")))
+            event.preventDefault();
+    }
+    const input = (_jsx("input", { ref: field, type: "search", className: "filter", placeholder: label, "aria-label": label, defaultValue: value, autoFocus: auto_focus, onChange: typed, onKeyDown: keyed, onPaste: on_paste && pasted }));
+    if (!submit_label)
+        return input;
+    return (_jsxs("form", { className: "search-box", role: "search", onSubmit: (event) => { event.preventDefault(); submit(); }, children: [input, _jsx("button", { type: "submit", className: "accent solid", children: submit_label })] }));
 }
 export function Select({ label, options, value, on_change, bare = false }) {
     const change = (event) => {

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

@@ -1,13 +1,23 @@
-import { type ReactNode } from "react";
+import { type FormEvent, type ReactNode } from "react";
+export interface DialogForm {
+    on_submit: (event: FormEvent<HTMLFormElement>) => void;
+    submit_label?: ReactNode;
+    submit_disabled?: boolean;
+    danger?: boolean;
+}
 interface DialogProps {
     title: ReactNode;
+    subtitle?: ReactNode;
+    actions?: ReactNode;
     on_close: () => void;
     buttons?: ReactNode;
+    form?: DialogForm;
     wide?: boolean;
+    full?: boolean;
     class_name?: string;
     children: ReactNode;
 }
-export declare function Dialog({ title, on_close, buttons, wide, class_name, children }: DialogProps): import("react").JSX.Element;
+export declare function Dialog({ title, subtitle, actions, on_close, buttons, form, wide, full, class_name, children }: DialogProps): import("react").JSX.Element;
 export interface ConfirmOptions {
     title: string;
     message: ReactNode;

package/dist/web/react/dialog.js

@@ -3,7 +3,7 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
 import { Fragment, useEffect, useId, useRef, useState } from "react";
 import { toast } from "./toasts.js";
 // Shown while it is rendered: the page behind it is inert, focus stays inside, Escape calls on_close, and focus goes back to the opener after.
-export function Dialog({ title, on_close, buttons, wide = false, class_name, children }) {
+export function Dialog({ title, subtitle, actions, on_close, buttons, form, wide = false, full = false, class_name, children }) {
     const dialog = useRef(null);
     const title_id = useId();
     const close = useRef(on_close);
@@ -19,12 +19,16 @@ export function Dialog({ title, on_close, buttons, wide = false, class_name, chi
                 opener.focus();
         };
     }, []);
-    return (_jsxs("dialog", { ref: dialog, className: ["dialog", wide && "wide", class_name].filter(Boolean).join(" "), "aria-labelledby": title_id, onCancel: (event) => {
+    const heading = _jsx("h2", { id: title_id, children: title });
+    const submit = form?.submit_label !== undefined && (_jsx("button", { type: "submit", className: form.danger ? "danger solid" : "accent solid", disabled: form.submit_disabled, children: form.submit_label }));
+    const foot = (buttons || submit) && _jsxs("div", { className: "dialog-buttons", children: [buttons, submit] });
+    const body = _jsx("div", { className: "dialog-body", children: children });
+    return (_jsxs("dialog", { ref: dialog, className: ["dialog", wide && "wide", full && "full", class_name].filter(Boolean).join(" "), "aria-labelledby": title_id, onCancel: (event) => {
             // Escape asks the owner to close, so the dialog never closes behind its owner's back.
             event.preventDefault();
             event.stopPropagation();
             close.current();
-        }, children: [_jsx("h2", { id: title_id, children: title }), _jsx("div", { className: "dialog-body", children: children }), buttons && _jsx("div", { className: "dialog-buttons", children: buttons })] }));
+        }, children: [subtitle === undefined && actions === undefined ? heading : (_jsxs("header", { className: "dialog-header", children: [_jsxs("div", { className: "dialog-heading", children: [heading, subtitle !== undefined && _jsx("p", { className: "dialog-subtitle", children: subtitle })] }), actions !== undefined && _jsx("div", { className: "dialog-actions", children: actions })] })), form ? (_jsxs("form", { className: "dialog-form", onSubmit: (event) => { event.preventDefault(); form.on_submit(event); }, children: [body, foot] })) : _jsxs(_Fragment, { children: [body, foot] })] }));
 }
 export function ConfirmDialog({ options, on_close }) {
     const [typed, set_typed] = useState("");

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

@@ -1,6 +1,16 @@
 import { type MouseEvent, type ReactNode } from "react";
 import type { Tone } from "./badges.tsx";
 export { moved } from "../tables.ts";
+interface PageHeadingProps {
+    title: ReactNode;
+    subtitle?: ReactNode;
+    icon?: ReactNode;
+    banner?: string | ReactNode;
+    actions?: ReactNode;
+    class_name?: string;
+    children?: ReactNode;
+}
+export declare function PageHeading({ title, subtitle, icon, banner, actions, class_name, children }: PageHeadingProps): import("react").JSX.Element;
 interface SectionProps {
     title: ReactNode;
     tools?: ReactNode;

package/dist/web/react/layout.js

@@ -1,7 +1,11 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-// The pieces a page is laid out with: panels, facts, tiles, cards, tabs, breadcrumbs, toolbars, steppers, settings rows and list row buttons.
+// The pieces a page is laid out with: the page heading, panels, facts, tiles, cards, tabs, breadcrumbs, toolbars, steppers, settings rows and list row buttons.
 import { Fragment } from "react";
 export { moved } from "../tables.js";
+// A page's heading: an optional banner, the title with its icon and subtitle, and the page's buttons.
+export function PageHeading({ title, subtitle, icon, banner, actions, class_name, children }) {
+    return (_jsxs("header", { className: class_name ? `page-head ${class_name}` : "page-head", children: [typeof banner === "string" ? _jsx("img", { className: "page-banner", src: banner, alt: "", loading: "lazy" }) : banner, _jsxs("div", { className: "page-title spread", children: [_jsxs("div", { className: "page-identity", children: [icon, _jsxs("div", { children: [_jsx("h1", { children: title }), subtitle && _jsx("p", { className: "page-subtitle muted", children: subtitle })] })] }), actions && _jsx("div", { className: "head-actions", children: actions })] }), children] }));
+}
 export function Section({ title, tools, class_name, on_context_menu, children }) {
     return (_jsxs("section", { className: class_name ? `panel ${class_name}` : "panel", onContextMenu: on_context_menu, children: [_jsxs("div", { className: "panel-head", children: [_jsx("h2", { children: title }), tools && _jsx("div", { className: "panel-tools", children: tools })] }), children] }));
 }

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

@@ -0,0 +1,19 @@
+export interface PickableList {
+    id: string;
+    name: string;
+    count?: number;
+    holds: boolean;
+}
+export interface ListPickerOptions {
+    title: string;
+    load: () => Promise<PickableList[]>;
+    add: (id: string) => Promise<void>;
+    create: (name: string) => Promise<PickableList>;
+    new_label?: string;
+    empty_text?: string;
+}
+export declare function ListPicker({ options, on_close }: {
+    options: ListPickerOptions;
+    on_close: () => void;
+}): import("react").JSX.Element;
+export declare function pick_list_dialog(options: ListPickerOptions): () => void;

package/dist/web/react/list_picker.js

@@ -0,0 +1,50 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// A dialog that adds one thing to any of the app's lists, such as a video to playlists, and makes a new list for it.
+import { useState } from "react";
+import { Badge } from "./badges.js";
+import { Dialog, open_dialog } from "./dialog.js";
+import { Empty, Loaded, use_resource } from "./states.js";
+export function ListPicker({ options, on_close }) {
+    const lists = use_resource(options.load, []);
+    const [added, set_added] = useState([]);
+    const [new_name, set_new_name] = useState("");
+    const [busy, set_busy] = useState(false);
+    const new_label = options.new_label ?? "New list";
+    // Lists added to or made here show as holding the thing without loading them again.
+    const shown = (loaded) => {
+        const merged = loaded.map((list) => added.find((other) => other.id === list.id) ?? list);
+        return [...merged, ...added.filter((list) => !loaded.some((other) => other.id === list.id))];
+    };
+    async function add(list) {
+        set_busy(true);
+        try {
+            await options.add(list.id);
+            set_added((before) => [...before, { ...list, holds: true, count: list.count === undefined ? undefined : list.count + 1 }]);
+        }
+        finally {
+            set_busy(false);
+        }
+    }
+    async function create(event) {
+        event.preventDefault();
+        const name = new_name.trim();
+        if (!name)
+            return;
+        set_busy(true);
+        try {
+            const list = await options.create(name);
+            set_added((before) => [...before, { ...list, holds: true }]);
+            set_new_name("");
+        }
+        finally {
+            set_busy(false);
+        }
+    }
+    return (_jsxs(Dialog, { title: options.title, on_close: on_close, class_name: "list-picker", buttons: _jsx("button", { className: "accent solid", onClick: on_close, children: "Done" }), children: [_jsx(Loaded, { resource: lists, lines: 3, children: (loaded) => shown(loaded).length === 0
+                    ? _jsx(Empty, { title: options.empty_text ?? "No lists yet." })
+                    : (_jsx("ul", { className: "plain-list list-picker-lists", children: shown(loaded).map((list) => (_jsx("li", { children: _jsxs("button", { type: "button", className: "list-picker-item", "aria-pressed": list.holds, disabled: list.holds || busy, onClick: () => void add(list), children: [_jsx("span", { className: "list-picker-tick", "aria-hidden": "true", children: list.holds ? "✓" : "" }), _jsx("span", { className: "list-picker-name", children: list.name }), list.count !== undefined && _jsx(Badge, { children: list.count })] }) }, list.id))) })) }), _jsxs("form", { className: "list-picker-new", onSubmit: (event) => void create(event), children: [_jsx("input", { type: "text", placeholder: new_label, "aria-label": new_label, value: new_name, onChange: (event) => set_new_name(event.currentTarget.value) }), _jsx("button", { type: "submit", disabled: !new_name.trim() || busy, children: "Create" })] })] }));
+}
+// Opens the picker from anywhere, such as a card's menu; the Shell draws it.
+export function pick_list_dialog(options) {
+    return open_dialog((close) => _jsx(ListPicker, { options: options, on_close: close }));
+}

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

@@ -0,0 +1,24 @@
+import type { ReactNode } from "react";
+interface AvatarProps {
+    src?: string | null;
+    name: string;
+    size?: "small" | "medium" | "large";
+}
+export declare function Avatar({ src, name, size }: AvatarProps): import("react").JSX.Element;
+interface MediaTileProps {
+    title: ReactNode;
+    href: string;
+    image?: string | null;
+    corner?: ReactNode;
+    lines?: ReactNode[];
+    dimmed?: boolean;
+    actions?: ReactNode;
+    lead?: ReactNode;
+}
+export declare function MediaTile({ title, href, image, corner, lines, dimmed, actions, lead }: MediaTileProps): import("react").JSX.Element;
+export declare function MediaGrid({ label, rows, children }: {
+    label?: string;
+    rows?: boolean;
+    children: ReactNode;
+}): import("react").JSX.Element;
+export {};

package/dist/web/react/media.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// A round picture of a person or channel, or the first letter of its name when there is none.
+export function Avatar({ src, name, size = "medium" }) {
+    const avatar_class = `avatar avatar-${size}`;
+    if (src)
+        return _jsx("img", { className: avatar_class, src: src, alt: "", loading: "lazy" });
+    const first_letter = [...name.trim()][0]?.toLocaleUpperCase() ?? "?";
+    return _jsx("span", { className: `${avatar_class} avatar-initial`, "aria-hidden": "true", children: first_letter });
+}
+// One video, album or playlist: its picture, its title and a few lines about it.
+export function MediaTile({ title, href, image, corner, lines = [], dimmed = false, actions, lead }) {
+    const shown_lines = lines.filter((line) => line !== null && line !== undefined && line !== false && line !== "");
+    return (_jsxs("div", { role: "listitem", className: dimmed ? "media-tile media-dimmed dimmed" : "media-tile", children: [lead !== undefined && _jsx("span", { className: "media-lead", children: lead }), _jsxs("a", { className: "media-picture", href: href, tabIndex: -1, "aria-hidden": "true", children: [image ? _jsx("img", { src: image, alt: "", loading: "lazy" }) : _jsx("span", { className: "media-blank" }), corner && _jsx("span", { className: "media-corner", children: corner })] }), _jsxs("div", { className: "media-text", children: [_jsx("a", { className: "media-title", href: href, children: title }), shown_lines.map((line, index) => _jsx("div", { className: "media-line", children: line }, index))] }), actions && _jsx("div", { className: "media-actions", children: actions })] }));
+}
+// Tiles side by side filling the width, or one under another as rows with the picture on the left.
+export function MediaGrid({ label, rows = false, children }) {
+    return _jsx("div", { role: "list", "aria-label": label, className: rows ? "media-grid media-rows" : "media-grid", children: children });
+}

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

@@ -0,0 +1,10 @@
+import { type ReactNode } from "react";
+import { type MenuItem } from "./menus.tsx";
+interface MenuButtonProps {
+    label: string;
+    items: MenuItem[] | (() => MenuItem[]);
+    glyph?: ReactNode;
+    class_name?: string;
+}
+export declare function MenuButton({ label, items, glyph, class_name }: MenuButtonProps): import("react").JSX.Element;
+export {};

package/dist/web/react/menu_button.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+// A button that opens a menu under itself, such as the ⋮ on a card; the Shell draws the menu.
+import { useState } from "react";
+import { open_context_menu } from "./menus.js";
+export function MenuButton({ label, items, glyph = "⋮", class_name }) {
+    const [open, set_open] = useState(false);
+    function open_menu(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();
+        set_open(true);
+        open_context_menu({ clientX: box.left, clientY: box.bottom, preventDefault: () => { } }, typeof items === "function" ? items() : items, () => set_open(false));
+    }
+    return (_jsx("button", { type: "button", className: class_name ? `icon menu-trigger ${class_name}` : "icon menu-trigger", "aria-label": label, title: label, "aria-haspopup": "menu", "aria-expanded": open, onClick: open_menu, children: glyph }));
+}

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

@@ -18,7 +18,7 @@ export declare function open_context_menu(event: {
     clientX: number;
     clientY: number;
     preventDefault(): void;
-}, items: MenuItem[]): void;
+}, items: MenuItem[], on_close?: () => void): void;
 export declare function ContextMenus(): import("react").JSX.Element | null;
 interface PopoverProps {
     anchor?: HTMLElement | null;

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))) }));
 }
@@ -115,14 +139,16 @@ let open_menu = null;
 let next_menu_id = 1;
 const menu_listeners = new Set();
 function publish_menu(menu) {
+    const before = open_menu;
     open_menu = menu;
     for (const listener of menu_listeners)
         listener(open_menu);
+    before?.on_close?.();
 }
-// Opens a menu where the event happened, such as a right-click, replacing any menu already open.
-export function open_context_menu(event, items) {
+// Opens a menu where the event happened, such as a right-click, replacing any menu already open; on_close hears when it closes for any reason.
+export function open_context_menu(event, items, on_close) {
     event.preventDefault();
-    publish_menu({ id: next_menu_id++, x: event.clientX, y: event.clientY, items });
+    publish_menu({ id: next_menu_id++, x: event.clientX, y: event.clientY, items, on_close });
 }
 // Where menus opened from anywhere are drawn; the Shell holds one.
 export function ContextMenus() {

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

@@ -1,5 +1,6 @@
 export interface RevealOptions {
     root_margin?: string;
+    initial_count?: number;
 }
 export interface Reveal {
     shown_count: number;

package/dist/web/react/reveal.js

@@ -2,7 +2,7 @@
 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(page_size);
+    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) => {

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

@@ -26,6 +26,7 @@ interface ShellProps {
     sidebar_width?: SidebarWidth;
     theme: ThemeChoice;
     user?: string | null;
+    logged_out?: boolean;
     user_href?: string;
     on_logout?: () => void;
     brand_href?: string;
@@ -34,8 +35,9 @@ interface ShellProps {
     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, brand_href, tools, sidebar_foot, view_key, menu_open: held_menu_open, on_menu_open_change, main_class, 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,14 +41,15 @@ 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, brand_href = "#/", tools, sidebar_foot, view_key, menu_open: held_menu_open, on_menu_open_change, main_class, children, }) {
+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) {
@@ -63,7 +64,8 @@ export function Shell({ brand, sections = [], active, sidebar: sidebar_content,
     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();
@@ -86,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: brand_href, className: "brand", children: brand }), !logged_out && tools, !logged_out && _jsx(ThemeButton, { choice: theme }), typeof user === "string" && (user_href ? _jsx("a", { className: "account-link", href: user_href, children: user }) : _jsx("span", { className: "user-name", children: user })), typeof user === "string" && 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", className: main_class, 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/states.d.ts

@@ -1,4 +1,5 @@
 import { type ReactNode } from "react";
+import type { Watch } from "../watch.ts";
 export declare function Skeleton({ lines }: {
     lines?: number;
 }): import("react").JSX.Element;
@@ -10,18 +11,25 @@ export declare function Failure({ error, retry }: {
     error: unknown;
     retry: () => void;
 }): import("react").JSX.Element;
+export type ResourceStatus = "idle" | "loading" | "loaded" | "failed";
 export interface Resource<Data> {
     data: Data | null;
     error: unknown;
     loading: boolean;
+    status: ResourceStatus;
     reload: (quiet?: boolean) => Promise<void>;
 }
 export interface ResourceOptions {
     refresh_in_milliseconds?: number;
+    enabled?: boolean;
+    watch?: Watch;
 }
 export declare function use_resource<Data>(work: () => Promise<Data>, dependencies: unknown[], options?: ResourceOptions): Resource<Data>;
-export declare function Loaded<Data>({ resource, lines, children }: {
+interface LoadedProps<Data> {
     resource: Resource<Data>;
     lines?: number;
+    idle?: ReactNode;
     children: (data: Data) => ReactNode;
-}): import("react").JSX.Element;
+}
+export declare function Loaded<Data>({ resource, lines, idle, children }: LoadedProps<Data>): import("react").JSX.Element;
+export {};

package/dist/web/react/states.js

@@ -14,35 +14,49 @@ export function Failure({ error, 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 enabled = options.enabled ?? true;
+    const [state, set_state] = useState({ data: null, error: null, status: enabled ? "loading" : "idle" });
     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 });
+            set_state({ data: null, error: null, status: "loading" });
         return latest_work.current().then((data) => { if (mine === generation.current)
-            set_state({ data, error: null, loading: false }); }, (error) => {
+            set_state({ data, error: null, status: "loaded" }); }, (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 });
+            set_state((before) => quiet && before.data !== null ? before : { data: null, error, status: "failed" });
         });
     }, []);
-    useEffect(() => void reload(), dependencies);
     useEffect(() => {
-        if (!options.refresh_in_milliseconds)
+        if (enabled)
+            return void reload();
+        // Turning off drops the load under way and what it showed.
+        generation.current += 1;
+        set_state((before) => before.status === "idle" ? before : { data: null, error: null, status: "idle" });
+    }, [enabled, ...dependencies]);
+    useEffect(() => {
+        if (!options.refresh_in_milliseconds || !enabled)
             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 };
+    }, [options.refresh_in_milliseconds, enabled]);
+    useEffect(() => {
+        if (!options.watch || !enabled)
+            return;
+        return options.watch.subscribe(() => void reload(true));
+    }, [options.watch, enabled]);
+    return { ...state, loading: state.status === "loading", 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 }) {
+export function Loaded({ resource, lines, idle = null, children }) {
     if (resource.data !== null)
         return _jsx(_Fragment, { children: children(resource.data) });
+    if (resource.status === "idle")
+        return _jsx(_Fragment, { children: idle });
     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

@@ -24,12 +24,19 @@ export interface RowGroup<Row> {
     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;

package/dist/web/react/table.js

@@ -1,10 +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, rows in groups under headings, rows dragged by the app's rules, and cards on phones.
-import { Fragment, 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 === "";
@@ -16,9 +18,47 @@ 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, row_key, caption, get_children, row_passes, groups, allow_inside_drop = true } = 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);
@@ -79,12 +119,13 @@ export function DataTable(props) {
         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);
@@ -104,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);
     }
@@ -177,26 +218,26 @@ export function DataTable(props) {
             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.original, placement) : row_dragging;
+        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, event) {
+    function row_drag_start(row, id, event) {
         set_row_dragging(true);
-        props.on_row_drag_start(row.original, event);
+        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", row.id);
+            event.dataTransfer.setData("text/plain", id);
     }
-    function row_drag_over(row, event) {
+    function row_drag_over(row, id, event) {
         const placement = row_placement(row, event);
         if (!placement) {
-            if (row_drop?.id === row.id)
+            if (row_drop?.id === id)
                 set_row_drop(null);
             return;
         }
         event.preventDefault();
-        if (row_drop?.id !== row.id || row_drop.placement !== placement)
-            set_row_drop({ id: row.id, placement });
+        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);
@@ -204,20 +245,38 @@ export function DataTable(props) {
         if (!placement)
             return;
         event.preventDefault();
-        props.on_row_drop(row.original, placement, event);
+        props.on_row_drop(row, placement, event);
     }
     function row_drag_end() {
         set_row_dragging(false);
         set_row_drop(null);
         props.on_row_drag_end?.();
     }
+    // The rows read these through a ref, so a new handler from the app never draws every row again.
+    const events = useRef(null);
+    events.current = {
+        click: (row, event) => props.on_row_click?.(row, event),
+        double_click: (row, event) => props.on_row_double_click?.(row, event),
+        context_menu: (row, event) => props.on_row_context_menu?.(row, event),
+        key_down: (row, event) => props.on_row_key_down?.(row, event),
+        toggle: toggle_row,
+        drag_start: row_drag_start,
+        drag_end: row_drag_end,
+        drag_over: (row, id, event) => { if (props.on_row_drop)
+            row_drag_over(row, id, event); },
+        drag_leave: (id) => { if (props.on_row_drop && row_drop?.id === id)
+            set_row_drop(null); },
+        drop: (row, _id, event) => { if (props.on_row_drop)
+            row_drag_drop(row, event); },
+    };
     // ── Drawing ──
     function header(column) {
         const id = column_id(column);
         const index = sorting.findIndex((key) => key.key === id);
         const key = sorting[index];
         const sortable = is_sortable(column) && Boolean(props.on_sort || props.on_sorting_change);
-        const width = width_of(column);
+        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"),
@@ -226,32 +285,21 @@ 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 row_class = [props.row_class?.(original), row_drop?.id === row.id && `drop-${row_drop.placement}`].filter(Boolean).join(" ") || undefined;
-        const after = props.render_after_row?.(original);
-        const draggable = Boolean(props.on_row_drag_start);
         const keyed = props.on_row_key_down !== undefined;
-        const key = row_key ? String(row_key(original)) : row.id;
-        return (_jsxs(Fragment, { children: [_jsx("tr", { className: row_class, title: props.row_title?.(original), style: props.row_style?.(original), "data-row-key": keyed ? key : undefined, tabIndex: keyed ? (props.active_row !== undefined && String(props.active_row) === key ? 0 : -1) : undefined, "aria-selected": props.row_selected ? props.row_selected(original) : undefined, draggable: draggable || undefined, onDragStart: draggable ? (event) => row_drag_start(row, event) : undefined, onDragEnd: draggable ? row_drag_end : undefined, onDragOver: props.on_row_drop && ((event) => row_drag_over(row, event)), onDragLeave: props.on_row_drop && (() => { if (row_drop?.id === row.id)
-                        set_row_drop(null); }), onDrop: props.on_row_drop && ((event) => row_drag_drop(row, event)), onClick: props.on_row_click && ((event) => props.on_row_click(original, event)), onDoubleClick: props.on_row_double_click && ((event) => props.on_row_double_click(original, event)), onKeyDown: props.on_row_key_down && ((event) => props.on_row_key_down(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)));
-                    }) }), after !== undefined && after !== null && typeof after !== "boolean" && _jsx("tr", { className: "row-extra", children: _jsx("td", { colSpan: shown.length, children: after }) })] }, row.id));
+        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_body(groups) {
+    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); }));
@@ -262,12 +310,81 @@ export function DataTable(props) {
                 current = group_of.get(row.original) ?? current;
             rows_by_group[current].push(row);
         }
-        return groups.map((group, index) => (_jsxs(Fragment, { children: [_jsx("tr", { className: group.class_name ? `group-row ${group.class_name}` : "group-row", children: _jsx("th", { scope: "colgroup", colSpan: shown.length, children: group.label }) }), rows_by_group[index].map(body_row)] }, group.key)));
+        // 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: groups ? grouped_body(groups) : 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/test_stubs.d.ts

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

package/dist/web/react/test_stubs.js

@@ -0,0 +1,19 @@
+// Stands in for the native popover and modal dialog, which jsdom does not draw; a test imports it for its side effects.
+HTMLElement.prototype.showPopover = function () {
+    this.setAttribute("data-shown", "");
+};
+HTMLElement.prototype.hidePopover = function () {
+    this.removeAttribute("data-shown");
+    this.dispatchEvent(Object.assign(new Event("toggle"), { newState: "closed" }));
+};
+HTMLDialogElement.prototype.showModal = function () {
+    this.setAttribute("open", "");
+};
+HTMLDialogElement.prototype.close = function () {
+    this.removeAttribute("open");
+};
+// jsdom hides every popover, since none ever matches :popover-open, so a shown one is drawn again here.
+const shown_popovers = document.createElement("style");
+shown_popovers.textContent = "[popover][data-shown] { display: block; }";
+document.head.append(shown_popovers);
+export {};

package/dist/web/tree.d.ts

@@ -13,6 +13,9 @@ export interface TreeMove {
     parent_id: string | null;
     position: number;
 }
+export interface DropOptions {
+    by_list_order?: boolean;
+}
 export declare function by_position<Item extends {
     position: number;
 }>(first: Item, second: Item): number;
@@ -26,9 +29,9 @@ export declare function can_drop(dragged_id: string, target_id: string, items: T
 export declare function position_for_drop<Item extends {
     id: string;
     position: number;
-}>(dragged: Item, target: Item, placement: SidePlacement, items: Item[]): number;
-export declare function move_for_drop<Item extends TreeItem>(dragged: Item, target: Item, placement: DropPlacement, items: Item[]): TreeMove;
-export declare function moves_for_drop<Item extends TreeItem>(dragged: Item[], target: Item, placement: DropPlacement, items: Item[]): TreeMove[];
+}>(dragged: Item, target: Item, placement: SidePlacement, items: Item[], options?: DropOptions): number;
+export declare function move_for_drop<Item extends TreeItem>(dragged: Item, target: Item, placement: DropPlacement, items: Item[], options?: DropOptions): TreeMove;
+export declare function moves_for_drop<Item extends TreeItem>(dragged: Item[], target: Item, placement: DropPlacement, items: Item[], options?: DropOptions): TreeMove[];
 export type KeyMove = "up" | "down" | "indent" | "outdent";
 export declare function key_drop<Item extends TreeItem>(item: Item, direction: KeyMove, items: Item[]): {
     target: Item;

package/dist/web/tree.js

@@ -71,8 +71,8 @@ export function can_drop(dragged_id, target_id, items) {
     return !subtree_ids(dragged_id, items).has(target_id);
 }
 // Picks a position between the neighbours at the drop point, so only the moved item changes.
-function position_beside(siblings, target, placement) {
-    const sorted = [...siblings].sort(by_position);
+function position_beside(siblings, target, placement, options = {}) {
+    const sorted = options.by_list_order ? siblings : [...siblings].sort(by_position);
     const index = sorted.findIndex((sibling) => sibling.id === target.id);
     const neighbour = sorted[placement === "before" ? index - 1 : index + 1];
     if (!neighbour)
@@ -80,27 +80,29 @@ function position_beside(siblings, target, placement) {
     return (target.position + neighbour.position) / 2;
 }
 // For a flat list, where items only move before or after each other.
-export function position_for_drop(dragged, target, placement, items) {
-    return position_beside(items.filter((item) => item.id !== dragged.id), target, placement);
+export function position_for_drop(dragged, target, placement, items, options = {}) {
+    return position_beside(items.filter((item) => item.id !== dragged.id), target, placement, options);
 }
 // Inside drops after the target's last child; before and after drop among the target's siblings.
-export function move_for_drop(dragged, target, placement, items) {
+export function move_for_drop(dragged, target, placement, items, options = {}) {
     const others = items.filter((item) => item.id !== dragged.id);
     if (placement === "inside") {
         const last_child_position = Math.max(target.position, ...children_of(target.id, others).map((item) => item.position));
         return { parent_id: target.id, position: last_child_position + 1 };
     }
-    return { parent_id: target.parent_id, position: position_beside(children_of(target.parent_id, others), target, placement) };
+    return { parent_id: target.parent_id, position: position_beside(children_of(target.parent_id, others), target, placement, options) };
 }
 // Moves several items together, keeping their order: inside the target after its last child, or in a run between it and its neighbour.
-export function moves_for_drop(dragged, target, placement, items) {
+export function moves_for_drop(dragged, target, placement, items, options = {}) {
     const dragged_ids = new Set(dragged.map((item) => item.id));
     const others = items.filter((item) => !dragged_ids.has(item.id));
     if (placement === "inside") {
         const last_child_position = Math.max(target.position, ...children_of(target.id, others).map((item) => item.position));
         return dragged.map((_, index) => ({ parent_id: target.id, position: last_child_position + index + 1 }));
     }
-    const siblings = children_of(target.parent_id, others).sort(by_position);
+    const siblings = children_of(target.parent_id, others);
+    if (!options.by_list_order)
+        siblings.sort(by_position);
     const index = siblings.findIndex((sibling) => sibling.id === target.id);
     const neighbour = siblings[placement === "before" ? index - 1 : index + 1];
     const low = placement === "before" ? (neighbour?.position ?? target.position - 1) : target.position;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@x-tech-laboratories/x-libs",
-  "version": "0.7.0",
+  "version": "0.9.0",
   "description": "Code the X-apps share: agents and their long runs, passwords, durations, and the web page's helpers and widgets",
   "license": "GPL-3.0-or-later",
   "repository": {