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

package/dist/web/react/table.js

@@ -1,9 +1,10 @@
 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, and cards on phones.
+import { Fragment, 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 { ContextMenu, Popover } from "./menus.js";
 import { ResizeHandle } from "./split.js";
 const is_empty = (value) => value === null || value === undefined || value === "";
@@ -17,7 +18,8 @@ function filtered_tree(rows, passes, get_children, kept_children) {
 }
 // ── 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 } = 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 +29,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 +68,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,6 +77,7 @@ 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) {
@@ -162,12 +170,53 @@ 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.original, placement) : row_dragging;
+        return allowed ? placement : null;
+    }
+    function row_drag_start(row, event) {
+        set_row_dragging(true);
+        props.on_row_drag_start(row.original, 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);
+    }
+    function row_drag_over(row, event) {
+        const placement = row_placement(row, event);
+        if (!placement) {
+            if (row_drop?.id === row.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 });
+    }
+    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.original, placement, event);
+    }
+    function row_drag_end() {
+        set_row_dragging(false);
+        set_row_drop(null);
+        props.on_row_drag_end?.();
+    }
     // ── 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 sortable = is_sortable(column) && Boolean(props.on_sort || props.on_sorting_change);
         const width = width_of(column);
         const movable = can_move(column);
         const class_name = [
@@ -186,20 +235,39 @@ export function DataTable(props) {
     }
     function body_row(row) {
         const original = row.original;
-        const extra = props.row_class?.(original);
-        return (_jsx("tr", { className: extra, onClick: props.on_row_click && ((event) => props.on_row_click(original, event)), onContextMenu: props.on_row_context_menu && ((event) => props.on_row_context_menu(original, event)), children: shown.map((column, index) => {
-                const label = column.label;
-                if (!tree || index > 0)
-                    return _jsx("td", { className: column.class, "data-label": label, children: column.cell(original) }, column_id(column));
-                const open = row.getIsExpanded();
-                const count = row.subRows.length;
-                return (_jsxs("td", { className: [column.class, "tree-cell"].filter(Boolean).join(" "), "data-label": label, style: { "--tree-depth": row.depth }, children: [count > 0 ? (_jsx("button", { type: "button", className: "icon tree-toggle", "aria-expanded": open, "aria-label": open ? "Collapse" : "Expand", onClick: (event) => { event.stopPropagation(); toggle_row(row); }, children: open ? "▾" : "▸" })) : _jsx("span", { className: "tree-spacer" }), column.cell(original), count > 0 && !open && _jsx("span", { className: "tree-count", title: `${count} inside`, children: count })] }, column_id(column)));
-            }) }, row.id));
+        const 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));
+    }
+    // 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) {
+        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);
+        }
+        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)));
     }
     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", { 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) })] }));
 }
 // ── 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;
+}

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

@@ -14,4 +14,16 @@ export interface ToastOptions {
 }
 export type ToastCloseReason = "timeout" | "dismissed" | "action" | "closed";
 export declare function toast(message: string, options?: ToastOptions): () => void;
+export interface UndoableOptions {
+    commit: () => void;
+    undo: () => void;
+    duration_in_milliseconds?: number;
+    undo_label?: string;
+}
+export interface Undoable {
+    finish: () => void;
+    undo: () => void;
+    readonly settled: boolean;
+}
+export declare function undoable(message: string, { commit, undo, duration_in_milliseconds, undo_label }: UndoableOptions): Undoable;
 export declare function Toasts(): import("react").JSX.Element;

package/dist/web/react/toasts.js

@@ -25,6 +25,37 @@ export function toast(message, options = {}) {
         setTimeout(() => close_toast(id, "timeout"), options.duration_in_milliseconds ?? 6000);
     return () => close_toast(id, "closed");
 }
+// Shows the message with an Undo button, then either undoes or commits the action, exactly once.
+export function undoable(message, { commit, undo, duration_in_milliseconds = 8000, undo_label = "Undo" }) {
+    let settled = false;
+    let undo_wanted = false;
+    const settle = (reason) => {
+        if (settled)
+            return;
+        settled = true;
+        if (reason === "action" || undo_wanted)
+            undo();
+        else
+            commit();
+    };
+    const close = toast(message, {
+        action: { text: undo_label, run: () => { } },
+        duration_in_milliseconds,
+        on_close: settle,
+    });
+    return {
+        finish: () => close(),
+        undo: () => {
+            if (settled)
+                return;
+            undo_wanted = true;
+            close();
+        },
+        get settled() {
+            return settled;
+        },
+    };
+}
 // ── Host ─────────────────────────────────────────────────────────────────────
 // Where toasts stack; the Shell holds one, and a page without the Shell renders its own.
 export function Toasts() {

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

@@ -1,4 +1,4 @@
-import { type MouseEvent, type ReactNode } from "react";
+import { type DragEvent, type MouseEvent, type ReactNode } from "react";
 import { type DropPlacement, type TreeItem, type TreeMove } from "../tree.ts";
 export type { DropPlacement, TreeItem, TreeMove } from "../tree.ts";
 interface TreeProps<Item extends TreeItem> {
@@ -10,7 +10,10 @@ interface TreeProps<Item extends TreeItem> {
     collapsed: ReadonlySet<string>;
     on_collapsed_change: (collapsed: Set<string>) => void;
     selected_id?: string | null;
+    selected_ids?: ReadonlySet<string>;
     on_select?: (item: Item) => void;
+    on_activate?: (item: Item) => void;
+    row_class?: (item: Item) => string | undefined;
     on_move?: (item: Item, move: TreeMove) => void;
     can_drop?: (dragged: Item, target: Item, placement: DropPlacement) => boolean;
     allow_inside?: boolean;
@@ -19,5 +22,7 @@ interface TreeProps<Item extends TreeItem> {
         form: ReactNode;
     } | null;
     on_context_menu?: (event: MouseEvent<HTMLElement>, item: Item) => void;
+    accepts_external?: (event: DragEvent<HTMLElement>, item: Item) => boolean;
+    on_external_drop?: (event: DragEvent<HTMLElement>, item: Item) => void;
 }
-export declare function Tree<Item extends TreeItem>({ items, label, render_item, render_extra, name_of, collapsed, on_collapsed_change, selected_id, on_select, on_move, can_drop, allow_inside, new_item, on_context_menu, }: TreeProps<Item>): import("react").JSX.Element;
+export declare function Tree<Item extends TreeItem>({ items, label, render_item, render_extra, name_of, collapsed, on_collapsed_change, selected_id, selected_ids, on_select, on_activate, row_class: class_of, on_move, can_drop, allow_inside, new_item, on_context_menu, accepts_external, on_external_drop, }: TreeProps<Item>): import("react").JSX.Element;

package/dist/web/react/tree.js

@@ -7,7 +7,7 @@ const KEY_MOVES = { ArrowUp: "up", ArrowDown: "down", ArrowRight: "indent", Arro
 function visible_nodes(nodes, collapsed) {
     return nodes.flatMap((node) => [node, ...(collapsed.has(node.item.id) ? [] : visible_nodes(node.children, collapsed))]);
 }
-export function Tree({ items, label, render_item, render_extra, name_of, collapsed, on_collapsed_change, selected_id = null, on_select, on_move, can_drop, allow_inside = true, new_item = null, on_context_menu, }) {
+export function Tree({ items, label, render_item, render_extra, name_of, collapsed, on_collapsed_change, selected_id = null, selected_ids, on_select, on_activate, row_class: class_of, on_move, can_drop, allow_inside = true, new_item = null, on_context_menu, accepts_external, on_external_drop, }) {
     const [focused_id, set_focused_id] = useState(null);
     const [dragged_id, set_dragged_id] = useState(null);
     const [drop_target, set_drop_target] = useState(null);
@@ -15,7 +15,9 @@ export function Tree({ items, label, render_item, render_extra, name_of, collaps
     const moves_focus = useRef(false);
     const roots = nest([...items].sort(by_position), items);
     const shown = visible_nodes(roots, collapsed);
-    const tab_stop = [focused_id, selected_id].find((id) => id !== null && shown.some((node) => node.item.id === id)) ?? shown[0]?.item.id;
+    const is_selected = (id) => selected_id === id || Boolean(selected_ids?.has(id));
+    const first_selected = shown.find((node) => selected_ids?.has(node.item.id))?.item.id ?? null;
+    const tab_stop = [focused_id, selected_id, first_selected].find((id) => id !== null && shown.some((node) => node.item.id === id)) ?? shown[0]?.item.id;
     useEffect(() => {
         if (!moves_focus.current || focused_id === null)
             return;
@@ -53,17 +55,29 @@ export function Tree({ items, label, render_item, render_extra, name_of, collaps
         const placement = placement_at(box.height > 0 ? (event.clientY - box.top) / box.height : 0.5, allow_inside);
         return is_allowed(dragged, target, placement) ? placement : null;
     }
+    // A drag from outside the tree, such as a task, lands inside the row that accepts it.
+    function accepts_from_outside(event, target) {
+        return dragged_id === null && Boolean(accepts_external?.(event, target));
+    }
     function drag_over(event, target) {
-        const placement = placement_over(event, target);
+        const external = accepts_from_outside(event, target);
+        const placement = external ? "inside" : placement_over(event, target);
         if (!placement)
             return;
         event.preventDefault();
-        if (event.dataTransfer)
+        // An outside drag keeps the effect its source allowed, which may not include a move.
+        if (event.dataTransfer && !external)
             event.dataTransfer.dropEffect = "move";
         if (drop_target?.id !== target.id || drop_target.placement !== placement)
             set_drop_target({ id: target.id, placement });
     }
     function drop(event, target) {
+        if (accepts_from_outside(event, target)) {
+            event.preventDefault();
+            end_drag();
+            on_external_drop?.(event, target);
+            return;
+        }
         const placement = placement_over(event, target);
         const dragged = items.find((item) => item.id === dragged_id);
         end_drag();
@@ -147,22 +161,23 @@ export function Tree({ items, label, render_item, render_extra, name_of, collaps
         const new_child = new_item_row(item.id);
         const row_class = [
             "tree-row",
+            class_of?.(item),
             dragged_id === item.id && "dragging",
             drop_target?.id === item.id && `drop-${drop_target.placement}`,
         ].filter(Boolean).join(" ");
         return (_jsxs("li", { ref: (element) => { if (element)
                 row_elements.current.set(item.id, element);
             else
-                row_elements.current.delete(item.id); }, role: "treeitem", className: "tree-item", "data-id": item.id, "aria-level": depth + 1, "aria-expanded": has_children ? !is_collapsed : undefined, "aria-selected": on_select ? selected_id === item.id : undefined, tabIndex: tab_stop === item.id ? 0 : -1, onFocus: (event) => { if (event.target === event.currentTarget)
+                row_elements.current.delete(item.id); }, role: "treeitem", className: "tree-item", "data-id": item.id, "aria-level": depth + 1, "aria-expanded": has_children ? !is_collapsed : undefined, "aria-selected": on_select || selected_ids ? is_selected(item.id) : undefined, tabIndex: tab_stop === item.id ? 0 : -1, onFocus: (event) => { if (event.target === event.currentTarget)
                 set_focused_id(item.id); }, children: [_jsxs("div", { className: row_class, draggable: on_move ? true : undefined, onDragStart: (event) => {
                         event.dataTransfer?.setData("text/plain", item.id);
                         if (event.dataTransfer)
                             event.dataTransfer.effectAllowed = "move";
                         set_dragged_id(item.id);
                     }, onDragEnd: end_drag, onDragOver: (event) => drag_over(event, item), onDragLeave: () => { if (drop_target?.id === item.id)
-                        set_drop_target(null); }, onDrop: (event) => drop(event, item), onClick: () => { focus_row(item.id); on_select?.(item); }, onContextMenu: on_context_menu && ((event) => on_context_menu(event, item)), children: [has_children
+                        set_drop_target(null); }, onDrop: (event) => drop(event, item), onClick: () => { focus_row(item.id); on_select?.(item); }, onDoubleClick: on_activate && (() => on_activate(item)), onContextMenu: on_context_menu && ((event) => on_context_menu(event, item)), children: [has_children
                             ? (_jsx("button", { type: "button", className: "tree-toggle", tabIndex: -1, "aria-label": is_collapsed ? `Expand ${name}` : `Collapse ${name}`, onClick: (event) => { event.stopPropagation(); set_collapsed(item.id, !is_collapsed); }, children: _jsx("span", { "aria-hidden": "true", children: is_collapsed ? "▸" : "▾" }) }))
                             : _jsx("span", { className: "tree-toggle", "aria-hidden": "true" }), _jsx("span", { className: "tree-label", children: render_item(item) }), render_extra && _jsx("span", { className: "tree-extra", children: render_extra(item) })] }), ((has_children && !is_collapsed) || new_child) && (_jsxs("ul", { role: "group", className: "tree-children", children: [!is_collapsed && children.map((child) => branch(child, depth + 1)), new_child] }))] }, item.id));
     }
-    return (_jsxs("ul", { role: "tree", className: "tree", "aria-label": label, onKeyDown: key_down, children: [roots.map((node) => branch(node, 0)), new_item_row(null)] }));
+    return (_jsxs("ul", { role: "tree", className: "tree", "aria-label": label, "aria-multiselectable": selected_ids ? true : undefined, onKeyDown: key_down, children: [roots.map((node) => branch(node, 0)), new_item_row(null)] }));
 }

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

@@ -0,0 +1,3 @@
+import type { Watch } from "../watch.ts";
+export type { Watch } from "../watch.ts";
+export declare function use_watch(watch: Watch): number;

package/dist/web/react/watch.js

@@ -0,0 +1,5 @@
+// Redraws a component whenever a watch it reads is bumped.
+import { useSyncExternalStore } from "react";
+export function use_watch(watch) {
+    return useSyncExternalStore(watch.subscribe, watch.version);
+}

package/dist/web/selection.d.ts

@@ -0,0 +1,25 @@
+export type SelectionIntent = "replace" | "toggle" | "range" | "range-add";
+export declare function intent_for(modifiers: {
+    shift?: boolean;
+    ctrl?: boolean;
+}): SelectionIntent;
+export declare class Selection<Id = number> {
+    private readonly picked;
+    private anchor;
+    get size(): number;
+    has(id: Id): boolean;
+    ids(): Id[];
+    inspect(): {
+        size: number;
+        anchor: number | null;
+    };
+    clear(): void;
+    apply(ordered: readonly Id[], index: number, intent: SelectionIntent): void;
+    select_all(ordered: readonly Id[]): void;
+    invert(ordered: readonly Id[]): void;
+    retain(ordered: readonly Id[]): void;
+}
+export declare function toggled(picked: readonly string[], id: string): string[];
+export declare function with_range(order: readonly string[], picked: readonly string[], anchor_id: string | null, id: string): string[];
+export declare function still_shown(order: readonly string[], picked: readonly string[]): string[];
+export declare function row_after_key(key: string, current: number, last: number, rows_per_page: number): number | null;

package/dist/web/selection.js

@@ -0,0 +1,106 @@
+// Picking rows in a list: plain, Ctrl and Shift clicks, an anchor ranges measure from, and the row an arrow or page key moves to.
+export function intent_for(modifiers) {
+    if (modifiers.shift)
+        return modifiers.ctrl ? "range-add" : "range";
+    return modifiers.ctrl ? "toggle" : "replace";
+}
+// ── Selection ────────────────────────────────────────────────────────────────
+export class Selection {
+    picked = new Set();
+    anchor = null;
+    get size() {
+        return this.picked.size;
+    }
+    has(id) {
+        return this.picked.has(id);
+    }
+    ids() {
+        return [...this.picked];
+    }
+    // The picks and the anchor, for finding why a range came out wrong.
+    inspect() {
+        return { size: this.picked.size, anchor: this.anchor };
+    }
+    clear() {
+        this.picked.clear();
+        this.anchor = null;
+    }
+    // Applies a click on the row at index in the list as shown.
+    apply(ordered, index, intent) {
+        if (index < 0 || index >= ordered.length)
+            return;
+        const id = ordered[index];
+        if (intent === "replace") {
+            this.picked.clear();
+            this.picked.add(id);
+            this.anchor = index;
+            return;
+        }
+        if (intent === "toggle") {
+            if (this.picked.has(id))
+                this.picked.delete(id);
+            else
+                this.picked.add(id);
+            this.anchor = index;
+            return;
+        }
+        // The anchor stays put, so every extension measures from the same row.
+        const from = this.anchor ?? index;
+        const [low, high] = from <= index ? [from, index] : [index, from];
+        if (intent === "range")
+            this.picked.clear();
+        for (let row = low; row <= high; row += 1)
+            this.picked.add(ordered[row]);
+    }
+    select_all(ordered) {
+        for (const id of ordered)
+            this.picked.add(id);
+    }
+    invert(ordered) {
+        const next = ordered.filter((id) => !this.picked.has(id));
+        this.picked.clear();
+        for (const id of next)
+            this.picked.add(id);
+    }
+    // Drops picks no longer in the list, such as after a filter narrows it.
+    retain(ordered) {
+        const kept = new Set(ordered);
+        for (const id of this.picked)
+            if (!kept.has(id))
+                this.picked.delete(id);
+    }
+}
+// ── Ids ──────────────────────────────────────────────────────────────────────
+// The same picking as plain lists of ids held in an app's state, the anchor kept by id so it survives the rows moving between clicks.
+// Adds the id when missing and takes it out when there.
+export function toggled(picked, id) {
+    return picked.includes(id) ? picked.filter((each) => each !== id) : [...picked, id];
+}
+// Every id between the anchor and the id in the shown order, both included, added to those picked; just the id when the anchor is not shown.
+export function with_range(order, picked, anchor_id, id) {
+    const anchor_index = anchor_id === null ? -1 : order.indexOf(anchor_id);
+    const index = order.indexOf(id);
+    if (anchor_index === -1 || index === -1)
+        return [id];
+    const run = order.slice(Math.min(anchor_index, index), Math.max(anchor_index, index) + 1);
+    return [...picked.filter((each) => !run.includes(each)), ...run];
+}
+// Keeps only the picked ids still shown, in the shown order.
+export function still_shown(order, picked) {
+    const picked_ids = new Set(picked);
+    return order.filter((id) => picked_ids.has(id));
+}
+// ── Keys ─────────────────────────────────────────────────────────────────────
+// The row an arrow, page, Home or End key moves to, held inside the list, or null for any other key.
+export function row_after_key(key, current, last, rows_per_page) {
+    const clamp = (row) => Math.min(last, Math.max(0, row));
+    switch (key) {
+        case "ArrowDown": return clamp(current + 1);
+        case "ArrowUp": return clamp(current - 1);
+        case "PageDown": return clamp(current + rows_per_page);
+        case "PageUp": return clamp(current - rows_per_page);
+        case "Home": return 0;
+        case "End": return Math.max(0, last);
+        default: return null;
+    }
+}

package/dist/web/tables.d.ts

@@ -24,4 +24,5 @@ export declare function sort_after_click(sorting: readonly Sorting[], key: strin
 export declare function sorting_from(query: URLSearchParams, fallback: Sorting): Sorting;
 export declare function ordered_columns(saved_order: readonly string[], all_columns: readonly string[]): string[];
 export declare function move_column(order: readonly string[], column: string, target: string, after: boolean): string[];
+export declare function moved<Item>(items: readonly Item[], from: number, to: number): Item[];
 export declare function clamp_width(width: number, min?: number, max?: number): number;

package/dist/web/tables.js

@@ -74,6 +74,14 @@ export function move_column(order, column, target, after) {
     const index = rest.indexOf(target) + (after ? 1 : 0);
     return [...rest.slice(0, index), column, ...rest.slice(index)];
 }
+// Moves the item at from to to, such as for a list's up and down buttons.
+export function moved(items, from, to) {
+    if (from < 0 || from >= items.length)
+        return [...items];
+    const rest = items.filter((_, index) => index !== from);
+    rest.splice(Math.max(0, Math.min(to, rest.length)), 0, items[from]);
+    return rest;
+}
 // A width held between the column's narrowest and widest.
 export function clamp_width(width, min = 48, max = 960) {
     return Math.round(Math.min(max, Math.max(min, width)));

package/dist/web/tree.d.ts

@@ -19,6 +19,8 @@ export declare function by_position<Item extends {
 export declare function children_of<Item extends TreeItem>(parent_id: string | null, items: Item[]): Item[];
 export declare function subtree_ids(item_id: string, items: TreeItem[]): Set<string>;
 export declare function nest<Item extends TreeItem>(shown: Item[], all?: Item[]): TreeNode<Item>[];
+export declare function in_tree_order<Item extends TreeItem>(items: Item[], reversed?: boolean): Item[];
+export declare function path_names<Item extends TreeItem>(item: Item, items: Item[], name_of: (item: Item) => string): string[];
 export declare function placement_at(fraction_down: number, allow_inside: boolean): DropPlacement;
 export declare function can_drop(dragged_id: string, target_id: string, items: TreeItem[]): boolean;
 export declare function position_for_drop<Item extends {

package/dist/web/tree.js

@@ -34,6 +34,27 @@ export function nest(shown, all = shown) {
     }
     return top_nodes;
 }
+// Every item in tree order: each followed by the items below it, siblings by position, each set of siblings reversed when asked.
+export function in_tree_order(items, reversed = false) {
+    const sorted = [...items].sort(by_position);
+    if (reversed)
+        sorted.reverse();
+    const walk = (nodes) => nodes.flatMap((node) => [node.item, ...walk(node.children)]);
+    const ordered = walk(nest(sorted, items));
+    const reached = new Set(ordered);
+    return [...ordered, ...sorted.filter((item) => !reached.has(item))];
+}
+// The names from the top of the tree down to the item, such as ["Work", "Clients"]; stops at a missing parent or a loop.
+export function path_names(item, items, name_of) {
+    const item_by_id = new Map(items.map((each) => [each.id, each]));
+    const path = [item];
+    let parent = item.parent_id === null ? undefined : item_by_id.get(item.parent_id);
+    while (parent && !path.includes(parent)) {
+        path.unshift(parent);
+        parent = parent.parent_id === null ? undefined : item_by_id.get(parent.parent_id);
+    }
+    return path.map(name_of);
+}
 // ── Dropping ─────────────────────────────────────────────────────────────────
 // The top and bottom quarters of a row drop beside it and the middle drops into it, or halves when nothing drops inside.
 export function placement_at(fraction_down, allow_inside) {

package/dist/web/virtual.d.ts

@@ -0,0 +1,7 @@
+export interface VirtualWindow {
+    start: number;
+    end: number;
+    offset_px: number;
+    total_px: number;
+}
+export declare function virtual_window(total_rows: number, row_height: number, scroll_top: number, viewport_height: number, overscan?: number): VirtualWindow;

package/dist/web/virtual.js

@@ -0,0 +1,10 @@
+// Which rows of a long list a scrolled viewport needs, so only those are drawn.
+export function virtual_window(total_rows, row_height, scroll_top, viewport_height, overscan = 8) {
+    if (row_height <= 0)
+        throw new Error("row_height must be positive");
+    const first_visible = Math.floor(Math.max(0, scroll_top) / row_height);
+    const visible_count = Math.ceil(viewport_height / row_height);
+    const start = Math.max(0, first_visible - overscan);
+    const end = Math.min(total_rows, first_visible + visible_count + overscan);
+    return { start, end, offset_px: start * row_height, total_px: total_rows * row_height };
+}

package/dist/web/watch.d.ts

@@ -0,0 +1,6 @@
+export interface Watch {
+    version(): number;
+    bump(): void;
+    subscribe(listener: () => void): () => void;
+}
+export declare function create_watch(): Watch;

package/dist/web/watch.js

@@ -0,0 +1,17 @@
+// A change counter a store bumps and a page watches, so only what reads the store redraws when it changes.
+export function create_watch() {
+    let version = 0;
+    const listeners = new Set();
+    return {
+        version: () => version,
+        bump: () => {
+            version += 1;
+            for (const listener of listeners)
+                listener();
+        },
+        subscribe: (listener) => {
+            listeners.add(listener);
+            return () => void listeners.delete(listener);
+        },
+    };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@x-tech-laboratories/x-libs",
-  "version": "0.6.0",
+  "version": "0.7.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": {