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

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

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

@@ -1,18 +1,88 @@
-// 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)];
+}
+// 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/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,37 @@
+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 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 {
+    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,128 @@
+// 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;
+}
+// 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) {
+    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/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.4.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": {
@@ -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/controls.d.ts

@@ -1,37 +0,0 @@
-import type { ComponentChildren } from "preact";
-interface SegmentedProps<Value extends string> {
-    label: string;
-    choices: {
-        value: Value;
-        label: string;
-    }[];
-    value: Value;
-    on_change: (value: Value) => void;
-    class_name?: string;
-}
-export declare function Segmented<Value extends string>({ label, choices, value, on_change, class_name }: SegmentedProps<Value>): import("preact").JSX.Element;
-export declare function ButtonGroup({ label, children }: {
-    label: string;
-    children: ComponentChildren;
-}): import("preact").JSX.Element;
-interface SwitchProps {
-    label: string;
-    checked: boolean;
-    on_change: (on: boolean) => Promise<boolean | void> | boolean | void;
-    disabled?: boolean;
-}
-export declare function Switch({ label, checked, on_change, disabled }: SwitchProps): import("preact").JSX.Element;
-interface SearchBoxProps {
-    label: string;
-    value: string;
-    on_input: (value: string) => void;
-}
-export declare function SearchBox({ label, value, on_input }: SearchBoxProps): import("preact").JSX.Element;
-interface SelectProps<Value extends string> {
-    label: string;
-    options: [value: Value, text: string][];
-    value: Value;
-    on_change: (value: Value) => void;
-}
-export declare function Select<Value extends string>({ label, options, value, on_change }: SelectProps<Value>): import("preact").JSX.Element;
-export {};