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

package/dist/web/react/tree.js

@@ -0,0 +1,168 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// A tree of rows: fold and unfold, walk it with the arrow keys, and reorder it by dragging or with Alt and the arrow keys.
+import { useEffect, useRef, useState } from "react";
+import { by_position, can_drop as is_outside_subtree, key_drop, move_for_drop, nest, placement_at, } from "../tree.js";
+const KEY_MOVES = { ArrowUp: "up", ArrowDown: "down", ArrowRight: "indent", ArrowLeft: "outdent" };
+// The rows a person can see, top to bottom, skipping those inside folded rows.
+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, }) {
+    const [focused_id, set_focused_id] = useState(null);
+    const [dragged_id, set_dragged_id] = useState(null);
+    const [drop_target, set_drop_target] = useState(null);
+    const row_elements = useRef(new Map());
+    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;
+    useEffect(() => {
+        if (!moves_focus.current || focused_id === null)
+            return;
+        moves_focus.current = false;
+        row_elements.current.get(focused_id)?.focus();
+    }, [focused_id, items]);
+    // ── Folding ────────────────────────────────────────────────────────────────
+    function set_collapsed(id, is_collapsed) {
+        if (collapsed.has(id) === is_collapsed)
+            return;
+        const next = new Set(collapsed);
+        if (is_collapsed)
+            next.add(id);
+        else
+            next.delete(id);
+        on_collapsed_change(next);
+    }
+    // ── Moving ─────────────────────────────────────────────────────────────────
+    function is_allowed(dragged, target, placement) {
+        if (placement === "inside" && !allow_inside)
+            return false;
+        return is_outside_subtree(dragged.id, target.id, items) && (can_drop?.(dragged, target, placement) ?? true);
+    }
+    // A row dropped into a folded one unfolds it, so the moved row stays in sight.
+    function move(item, target, placement) {
+        if (placement === "inside")
+            set_collapsed(target.id, false);
+        on_move(item, move_for_drop(item, target, placement, items));
+    }
+    function placement_over(event, target) {
+        const dragged = items.find((item) => item.id === dragged_id);
+        if (!dragged)
+            return null;
+        const box = event.currentTarget.getBoundingClientRect();
+        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;
+    }
+    function drag_over(event, target) {
+        const placement = placement_over(event, target);
+        if (!placement)
+            return;
+        event.preventDefault();
+        if (event.dataTransfer)
+            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) {
+        const placement = placement_over(event, target);
+        const dragged = items.find((item) => item.id === dragged_id);
+        end_drag();
+        if (!placement || !dragged)
+            return;
+        event.preventDefault();
+        move(dragged, target, placement);
+    }
+    function end_drag() {
+        set_dragged_id(null);
+        set_drop_target(null);
+    }
+    // ── Keyboard ───────────────────────────────────────────────────────────────
+    function focus_row(id) {
+        if (id === undefined)
+            return;
+        moves_focus.current = true;
+        set_focused_id(id);
+    }
+    function key_down(event) {
+        const row = event.target.closest("[role='treeitem']");
+        if (row !== event.target)
+            return;
+        const index = shown.findIndex((node) => node.item.id === row.dataset.id);
+        const node = shown[index];
+        if (!node)
+            return;
+        const { item } = node;
+        const is_open = node.children.length > 0 && !collapsed.has(item.id);
+        if (event.altKey && on_move && KEY_MOVES[event.key]) {
+            const key_target = key_drop(item, KEY_MOVES[event.key], items);
+            if (key_target && is_allowed(item, key_target.target, key_target.placement)) {
+                move(item, key_target.target, key_target.placement);
+                focus_row(item.id);
+            }
+        }
+        else if (event.altKey || event.ctrlKey || event.metaKey) {
+            return;
+        }
+        else if (event.key === "ArrowDown")
+            focus_row(shown[index + 1]?.item.id);
+        else if (event.key === "ArrowUp")
+            focus_row(shown[index - 1]?.item.id);
+        else if (event.key === "Home")
+            focus_row(shown[0]?.item.id);
+        else if (event.key === "End")
+            focus_row(shown.at(-1)?.item.id);
+        else if (event.key === "ArrowRight") {
+            if (is_open)
+                focus_row(node.children[0].item.id);
+            else if (node.children.length > 0)
+                set_collapsed(item.id, false);
+            else
+                return;
+        }
+        else if (event.key === "ArrowLeft") {
+            if (is_open)
+                set_collapsed(item.id, true);
+            else if (item.parent_id !== null && shown.some((each) => each.item.id === item.parent_id))
+                focus_row(item.parent_id);
+            else
+                return;
+        }
+        else if ((event.key === "Enter" || event.key === " ") && on_select)
+            on_select(item);
+        else
+            return;
+        event.preventDefault();
+    }
+    // ── Rows ───────────────────────────────────────────────────────────────────
+    function new_item_row(parent_id) {
+        if (!new_item || new_item.parent_id !== parent_id)
+            return null;
+        return _jsx("li", { role: "none", className: "tree-new", children: new_item.form });
+    }
+    function branch(node, depth) {
+        const { item, children } = node;
+        const has_children = children.length > 0;
+        const is_collapsed = collapsed.has(item.id);
+        const name = name_of?.(item) ?? "row";
+        const new_child = new_item_row(item.id);
+        const row_class = [
+            "tree-row",
+            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)
+                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
+                            ? (_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)] }));
+}

package/dist/web/tables.d.ts

@@ -4,7 +4,24 @@ export interface Sorting {
 }
 export interface SortableColumn<Row> {
     label: string;
+    id?: string;
     sort?: (row: Row) => string | number | null;
 }
-export declare function sorted_rows<Row>(columns: SortableColumn<Row>[], rows: Row[], sorting: Sorting | undefined): Row[];
+export type SortValue = string | number | null | undefined;
+export declare function column_id(column: {
+    id?: string;
+    label: string;
+}): string;
+export declare function sorting_list(sorting: Sorting | readonly Sorting[] | undefined): Sorting[];
+export declare function compare_values(first: SortValue, second: SortValue, descending?: boolean): number;
+export declare function sorted_rows<Row>(columns: SortableColumn<Row>[], rows: Row[], sorting: Sorting | readonly Sorting[] | undefined): Row[];
+export interface TreeRow<Row> {
+    row: Row;
+    children: TreeRow<Row>[];
+}
+export declare function sorted_tree<Row>(columns: SortableColumn<Row>[], rows: Row[], sorting: Sorting | readonly Sorting[] | undefined, get_children: (row: Row) => Row[] | undefined): TreeRow<Row>[];
+export declare function sort_after_click(sorting: readonly Sorting[], key: string, adding: boolean): Sorting[];
 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 clamp_width(width: number, min?: number, max?: number): number;

package/dist/web/tables.js

@@ -1,18 +1,80 @@
-// The order a sorted table shows its rows in, and the sorting a view's query asks for.
-// The rows in the order the sorting asks for, with rows missing a value last.
+// The order a sorted table shows its rows in, the sorting a click or a view's query asks for, and the order of its columns.
+export function column_id(column) {
+    return column.id ?? column.label;
+}
+// One sorting or several as a list, the first deciding first.
+export function sorting_list(sorting) {
+    if (!sorting)
+        return [];
+    return Array.isArray(sorting) ? [...sorting] : [sorting];
+}
+const is_empty = (value) => value === null || value === undefined || value === "";
+// Numbers by size and text by its words and numbers, with an empty value last whichever way the column sorts.
+export function compare_values(first, second, descending = false) {
+    if (is_empty(first) || is_empty(second))
+        return Number(is_empty(first)) - Number(is_empty(second));
+    const order = typeof first === "number" && typeof second === "number"
+        ? first - second
+        : String(first).localeCompare(String(second), undefined, { numeric: true, sensitivity: "base" });
+    return descending ? -order : order;
+}
+// The rows in the order the sortings ask for, the later ones breaking ties, and rows missing a value last.
 export function sorted_rows(columns, rows, sorting) {
-    const column = sorting ? columns.find((candidate) => candidate.label === sorting.key && candidate.sort) : undefined;
-    if (!sorting || !column?.sort)
+    const keys = sorting_list(sorting).flatMap((key) => {
+        const column = columns.find((candidate) => column_id(candidate) === key.key && candidate.sort);
+        return column?.sort ? [{ value: column.sort, descending: key.descending }] : [];
+    });
+    if (keys.length === 0)
         return rows;
-    const value = column.sort;
     return [...rows].sort((left, right) => {
-        const [first, second] = [value(left), value(right)];
-        const order = first === second ? 0 : first === null ? 1 : second === null ? -1 : first < second ? -1 : 1;
-        return sorting.descending ? -order : order;
+        for (const key of keys) {
+            const order = compare_values(key.value(left), key.value(right), key.descending);
+            if (order !== 0)
+                return order;
+        }
+        return 0;
     });
 }
+// Sorts each level of a tree on its own, so children stay under their parents.
+export function sorted_tree(columns, rows, sorting, get_children) {
+    return sorted_rows(columns, rows, sorting).map((row) => ({ row, children: sorted_tree(columns, get_children(row) ?? [], sorting, get_children) }));
+}
+// A plain click sorts by that column alone; a Shift+click adds it to the sort or flips it; a third click takes it out.
+export function sort_after_click(sorting, key, adding) {
+    const current = sorting.find((each) => each.key === key);
+    const next = !current ? { key, descending: false } : current.descending ? null : { key, descending: true };
+    if (!adding) {
+        if (current && sorting.length === 1)
+            return next ? [next] : [];
+        return [{ key, descending: false }];
+    }
+    if (!current)
+        return [...sorting, next];
+    return next ? sorting.map((each) => (each.key === key ? next : each)) : sorting.filter((each) => each.key !== key);
+}
 // The sorting a view's query asks for, such as ?sort=Name&dir=desc.
 export function sorting_from(query, fallback) {
     const key = query.get("sort");
     return key ? { key, descending: query.get("dir") === "desc" } : fallback;
 }
+// ── Columns ──────────────────────────────────────────────────────────────────
+// Every column in its saved order, leaving out ones gone since and placing a new one just after the column before it.
+export function ordered_columns(saved_order, all_columns) {
+    const ordered = saved_order.filter((column, index) => all_columns.includes(column) && saved_order.indexOf(column) === index);
+    all_columns.forEach((column, index) => {
+        if (ordered.includes(column))
+            return;
+        ordered.splice(index === 0 ? 0 : ordered.indexOf(all_columns[index - 1]) + 1, 0, column);
+    });
+    return ordered;
+}
+// Moves a column to just before or after another one.
+export function move_column(order, column, target, after) {
+    const rest = order.filter((each) => each !== column);
+    const index = rest.indexOf(target) + (after ? 1 : 0);
+    return [...rest.slice(0, index), column, ...rest.slice(index)];
+}
+// 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/theme.d.ts

@@ -5,5 +5,10 @@ export interface ThemeChoice {
     on_change(listener: (theme: Theme) => void): () => void;
     apply(theme?: Theme): void;
 }
-export declare function theme_choice(storage_key: string): ThemeChoice;
+export interface ThemeStorage {
+    read(): Theme | undefined;
+    write(theme: Theme): void;
+}
+export declare function local_theme_storage(storage_key: string): ThemeStorage;
+export declare function theme_choice(where: string | ThemeStorage): ThemeChoice;
 export declare function next_theme(theme: Theme): Theme;

package/dist/web/theme.js

@@ -1,16 +1,34 @@
-// The light, dark or system theme, kept in this browser and set as data-theme on the page.
-// The choice kept under the storage key, such as "x-nix-theme".
-export function theme_choice(storage_key) {
-    const listeners = new Set();
-    const get = () => {
-        try {
-            const saved = localStorage.getItem(storage_key);
-            return saved === "light" || saved === "dark" ? saved : "system";
-        }
-        catch {
-            return "system";
-        }
+// The light, dark or system theme, kept in this browser or the app's own settings, and set as data-theme on the page.
+// The choice kept in this browser under the storage key, such as "x-nix-theme".
+export function local_theme_storage(storage_key) {
+    return {
+        read: () => {
+            try {
+                const saved = localStorage.getItem(storage_key);
+                return saved === "light" || saved === "dark" ? saved : undefined;
+            }
+            catch {
+                return undefined;
+            }
+        },
+        write: (theme) => {
+            try {
+                if (theme === "system")
+                    localStorage.removeItem(storage_key);
+                else
+                    localStorage.setItem(storage_key, theme);
+            }
+            catch {
+                // Without storage the choice lasts until the page is closed.
+            }
+        },
     };
+}
+// The choice kept under a storage key in this browser, or in the storage the app hands over.
+export function theme_choice(where) {
+    const storage = typeof where === "string" ? local_theme_storage(where) : where;
+    const listeners = new Set();
+    const get = () => storage.read() ?? "system";
     const apply = (theme = get()) => {
         if (theme === "system")
             delete document.documentElement.dataset.theme;
@@ -20,15 +38,7 @@ export function theme_choice(storage_key) {
             listener(theme);
     };
     const set = (theme) => {
-        try {
-            if (theme === "system")
-                localStorage.removeItem(storage_key);
-            else
-                localStorage.setItem(storage_key, theme);
-        }
-        catch {
-            // Without storage the choice lasts until the page is closed.
-        }
+        storage.write(theme);
         apply(theme);
     };
     return { get, set, apply, on_change: (listener) => {

package/dist/web/tree.d.ts

@@ -0,0 +1,35 @@
+export interface TreeItem {
+    id: string;
+    parent_id: string | null;
+    position: number;
+}
+export interface TreeNode<Item> {
+    item: Item;
+    children: TreeNode<Item>[];
+}
+export type SidePlacement = "before" | "after";
+export type DropPlacement = SidePlacement | "inside";
+export interface TreeMove {
+    parent_id: string | null;
+    position: number;
+}
+export declare function by_position<Item extends {
+    position: number;
+}>(first: Item, second: Item): number;
+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 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 {
+    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[];
+export type KeyMove = "up" | "down" | "indent" | "outdent";
+export declare function key_drop<Item extends TreeItem>(item: Item, direction: KeyMove, items: Item[]): {
+    target: Item;
+    placement: DropPlacement;
+} | null;
+export declare function move_for_key<Item extends TreeItem>(item: Item, direction: KeyMove, items: Item[]): TreeMove | null;

package/dist/web/tree.js

@@ -0,0 +1,107 @@
+// Trees of rows that name their parent and their place among siblings, and where a dragged or keyed row lands.
+// ── Shape ────────────────────────────────────────────────────────────────────
+export function by_position(first, second) {
+    return first.position - second.position;
+}
+export function children_of(parent_id, items) {
+    return items.filter((item) => item.parent_id === parent_id);
+}
+// The item itself plus everything below it, at any depth.
+export function subtree_ids(item_id, items) {
+    const ids = new Set([item_id]);
+    for (const id of ids) {
+        for (const child of children_of(id, items))
+            ids.add(child.id);
+    }
+    return ids;
+}
+// Each shown item sits under its nearest ancestor that is also shown, or at the top when none is, in the order given.
+export function nest(shown, all = shown) {
+    const item_by_id = new Map(all.map((item) => [item.id, item]));
+    const node_by_id = new Map(shown.map((item) => [item.id, { item, children: [] }]));
+    const top_nodes = [];
+    for (const node of node_by_id.values()) {
+        const seen = new Set([node.item.id]);
+        let ancestor_id = node.item.parent_id;
+        while (ancestor_id && !node_by_id.has(ancestor_id) && !seen.has(ancestor_id)) {
+            seen.add(ancestor_id);
+            ancestor_id = item_by_id.get(ancestor_id)?.parent_id ?? null;
+        }
+        if (ancestor_id && node_by_id.has(ancestor_id) && !seen.has(ancestor_id))
+            node_by_id.get(ancestor_id).children.push(node);
+        else
+            top_nodes.push(node);
+    }
+    return top_nodes;
+}
+// ── 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) {
+    if (!allow_inside)
+        return fraction_down < 0.5 ? "before" : "after";
+    if (fraction_down < 0.25)
+        return "before";
+    if (fraction_down > 0.75)
+        return "after";
+    return "inside";
+}
+// A row cannot drop onto itself or anything below it.
+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);
+    const index = sorted.findIndex((sibling) => sibling.id === target.id);
+    const neighbour = sorted[placement === "before" ? index - 1 : index + 1];
+    if (!neighbour)
+        return placement === "before" ? target.position - 1 : target.position + 1;
+    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);
+}
+// 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) {
+    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) };
+}
+// 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) {
+    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 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;
+    const high = placement === "before" ? target.position : (neighbour?.position ?? target.position + 1);
+    return dragged.map((_, index) => ({ parent_id: target.parent_id, position: low + ((high - low) * (index + 1)) / (dragged.length + 1) }));
+}
+// Up and down pass the sibling beside it, indent goes last inside the sibling above, outdent goes after its parent; null when it cannot go that way.
+export function key_drop(item, direction, items) {
+    const siblings = children_of(item.parent_id, items).sort(by_position);
+    const index = siblings.findIndex((sibling) => sibling.id === item.id);
+    const above = siblings[index - 1];
+    const below = siblings[index + 1];
+    const parent = items.find((each) => each.id === item.parent_id);
+    if (direction === "up")
+        return above ? { target: above, placement: "before" } : null;
+    if (direction === "down")
+        return below ? { target: below, placement: "after" } : null;
+    if (direction === "indent")
+        return above ? { target: above, placement: "inside" } : null;
+    return parent ? { target: parent, placement: "after" } : null;
+}
+export function move_for_key(item, direction, items) {
+    const drop = key_drop(item, direction, items);
+    return drop && move_for_drop(item, drop.target, drop.placement, items);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@x-tech-laboratories/x-libs",
-  "version": "0.4.0",
+  "version": "0.6.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": {
@@ -29,7 +29,8 @@
   "peerDependencies": {
     "@fastify/websocket": "^11.3.5",
     "fastify": "^5.12.7",
-    "preact": "^10.29.8"
+    "react": "^19",
+    "react-dom": "^19"
   },
   "peerDependenciesMeta": {
     "@fastify/websocket": {
@@ -38,22 +39,32 @@
     "fastify": {
       "optional": true
     },
-    "preact": {
+    "react": {
+      "optional": true
+    },
+    "react-dom": {
       "optional": true
     }
   },
   "devDependencies": {
     "@fastify/websocket": "^11.3.5",
+    "@testing-library/dom": "^10.4.2",
+    "@testing-library/react": "^16.3.3",
     "@types/node": "^24.19.2",
+    "@types/react": "^19.3.0",
+    "@types/react-dom": "^19.3.0",
     "@types/sshpk": "^1.17.5",
     "fastify": "^5.12.7",
+    "jsdom": "^31.0.0",
     "oxlint": "^1.90.0",
-    "preact": "^10.29.8",
+    "react": "^19.3.1",
+    "react-dom": "^19.3.1",
     "typescript": "^7.0.2",
     "vitest": "^5.0.5"
   },
   "dependencies": {
     "@inquirer/password": "^5.2.5",
+    "@tanstack/react-table": "^8.21.3",
     "parse-duration": "^2.1.11",
     "pretty-bytes": "^7.2.0",
     "sshpk": "^1.18.0"

package/dist/web/preact/layout.js

@@ -1,71 +0,0 @@
-import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "preact/jsx-runtime";
-// The pieces a page is laid out with: panels, facts, tiles, cards, tabs, breadcrumbs, toolbars, steppers and settings rows.
-import { Fragment } from "preact";
-// ── Panels ───────────────────────────────────────────────────────────────────
-export function Section({ title, tools, children }) {
-    return (_jsxs("section", { class: "panel", children: [_jsxs("div", { class: "panel-head", children: [_jsx("h2", { children: title }), tools && _jsx("div", { class: "panel-tools", children: tools })] }), children] }));
-}
-// Labelled values in a grid of tiles, or as rows of label and value for long values such as paths.
-export function Facts({ rows, layout = "grid" }) {
-    return (_jsx("dl", { class: layout === "rows" ? "facts facts-rows" : "facts", children: rows.filter((row) => Boolean(row)).map(([label, value, class_name]) => (_jsxs("div", { children: [_jsx("dt", { children: label }), _jsx("dd", { class: class_name, children: value ?? "—" })] }, label))) }));
-}
-// A stack of panels or blocks spaced by its gap, tighter when tight.
-export function Stack({ tight = false, children }) {
-    return _jsx("div", { class: tight ? "stack tight" : "stack", children: children });
-}
-// One headline figure and its label.
-export function Tile({ label, value, tone, class_name, href, value_first = false }) {
-    const tile_class = ["tile", tone && tone !== "none" && `tile-${tone}`, class_name].filter(Boolean).join(" ");
-    const label_part = _jsx("div", { class: "tile-label", children: label });
-    const value_part = _jsx("div", { class: "tile-value", children: value });
-    const children = value_first ? _jsxs(_Fragment, { children: [value_part, label_part] }) : _jsxs(_Fragment, { children: [label_part, value_part] });
-    return href ? _jsx("a", { class: tile_class, href: href, children: children }) : _jsx("div", { class: tile_class, children: children });
-}
-export function Tiles({ children }) {
-    return _jsx("div", { class: "tiles", children: children });
-}
-// A titled card for one thing among many, laid out in a grid of Cards.
-export function Card({ title, subtitle, badge, class_name, href, on_click, children }) {
-    const card_class = class_name ? `card ${class_name}` : "card";
-    const body = (_jsxs(_Fragment, { children: [_jsxs("div", { class: "card-head", children: [_jsx("strong", { children: title }), badge] }), subtitle && _jsx("div", { class: "muted card-host", children: subtitle }), children] }));
-    if (href)
-        return _jsx("a", { class: card_class, href: href, children: body });
-    if (on_click)
-        return _jsx("button", { type: "button", class: card_class, onClick: on_click, children: body });
-    return _jsx("div", { class: card_class, children: body });
-}
-export function Cards({ children }) {
-    return _jsx("div", { class: "grid", children: children });
-}
-export function Tabs({ items, active, label = "Sections", on_select }) {
-    return (_jsx("nav", { class: "tabs", "aria-label": label, children: items.map((item) => {
-            const tab_class = item.id === active ? "tab active" : "tab";
-            const current = item.id === active ? "page" : undefined;
-            return item.href
-                ? _jsx("a", { class: tab_class, href: item.href, "aria-current": current, children: item.label }, item.id)
-                : _jsx("button", { type: "button", class: tab_class, "aria-current": current, onClick: () => on_select?.(item.id), children: item.label }, item.id);
-        }) }));
-}
-export function Crumbs({ items }) {
-    return (_jsx("nav", { class: "crumbs", "aria-label": "Breadcrumb", children: items.map(([label, href], index) => (_jsxs(Fragment, { children: [index > 0 && _jsx("span", { class: "muted", "aria-hidden": "true", children: " / " }), href ? _jsx("a", { href: href, children: label }) : _jsx("span", { "aria-current": "page", children: label })] }, index))) }));
-}
-// ── Toolbars ─────────────────────────────────────────────────────────────────
-export function Toolbar({ children }) {
-    return _jsx("div", { class: "toolbar", children: children });
-}
-// Steps to the item before or after this one, each a link or a dead button when there is none, with where this one stands between.
-export function Stepper({ label, previous, position, next }) {
-    const step = (target) => target.href === null
-        ? _jsx("button", { disabled: true, children: target.text })
-        : _jsx("a", { class: "button", href: target.href, children: target.text });
-    return _jsxs("div", { class: "stepper", role: "group", "aria-label": label, children: [step(previous), _jsx("span", { class: "muted", children: position }), step(next)] });
-}
-// ── Settings ─────────────────────────────────────────────────────────────────
-export function SettingsGroup({ heading, hint, children }) {
-    return (_jsxs("section", { class: "settings-group", children: [_jsx("h3", { class: "settings-heading", children: heading }), hint && _jsx("p", { class: "setting-hint", children: hint }), children] }));
-}
-// A setting's name and hint on one side and its control on the other; as a label, clicking anywhere works its one control.
-export function SettingRow({ label, hint, as_label = false, children }) {
-    const text = (_jsxs("span", { class: "setting-text", children: [_jsx("span", { class: "setting-label", children: label }), hint && _jsx("span", { class: "setting-hint", children: hint })] }));
-    return as_label ? _jsxs("label", { class: "setting-row", children: [text, children] }) : _jsxs("div", { class: "setting-row", children: [text, children] });
-}

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

@@ -1,19 +0,0 @@
-import { type ComponentChildren } from "preact";
-import { type MenuItem } from "../menus.ts";
-export type { MenuItem } from "../menus.ts";
-interface ContextMenuProps {
-    x: number;
-    y: number;
-    items: MenuItem[];
-    on_close: () => void;
-}
-export declare function ContextMenu({ x, y, items, on_close }: ContextMenuProps): import("preact").JSX.Element;
-interface PopoverProps {
-    anchor?: HTMLElement | null;
-    x?: number;
-    y?: number;
-    label: string;
-    on_close: () => void;
-    children: ComponentChildren;
-}
-export declare function Popover({ anchor, x, y, label, on_close, children }: PopoverProps): import("preact").JSX.Element;