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

package/dist/web/react/table.js

@@ -0,0 +1,278 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// A React table drawn like the page's own on TanStack Table: sorting by one column or several, columns the user moves, resizes,
+// hides and filters, rows nested under rows, rows in groups under headings, rows dragged by the app's rules, and cards on phones.
+import { Fragment, useLayoutEffect, useMemo, useRef, useState } from "react";
+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 === "";
+// The rows that pass and, in a tree, those above a row that passes, with each row's passing children.
+function filtered_tree(rows, passes, get_children, kept_children) {
+    return rows.filter((row) => {
+        const children = get_children ? filtered_tree(get_children(row) ?? [], passes, get_children, kept_children) : [];
+        kept_children.set(row, children);
+        return passes(row) || children.length > 0;
+    });
+}
+// ── Table ────────────────────────────────────────────────────────────────────
+export function DataTable(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 });
+    const [columns_menu, set_columns_menu] = useState(null);
+    const [dragged, set_dragged] = useState(null);
+    const [drop_target, set_drop_target] = useState(null);
+    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 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;
+    const tree = get_children !== undefined;
+    // ── Rows ──
+    const { data, children_of } = useMemo(() => {
+        if (!row_passes)
+            return { data: rows, children_of: get_children };
+        const kept_children = new Map();
+        const kept = filtered_tree(rows, row_passes, get_children, kept_children);
+        return { data: kept, children_of: get_children && ((row) => kept_children.get(row) ?? []) };
+    }, [rows, row_passes, get_children]);
+    // TanStack flips a descending column's order, so an empty value is flipped first to stay last.
+    const descending = useRef(new Set());
+    descending.current = new Set(sorting.filter((key) => key.descending).map((key) => key.key));
+    const definitions = useMemo(() => columns.map((column) => ({
+        id: column_id(column),
+        accessorFn: column.sort,
+        enableSorting: Boolean(column.sort),
+        sortingFn: (left, right, id) => {
+            const [first, second] = [left.getValue(id), right.getValue(id)];
+            const order = compare_values(first, second);
+            return (is_empty(first) || is_empty(second)) && descending.current.has(id) ? -order : order;
+        },
+    })), [columns]);
+    const table = useReactTable({
+        data,
+        columns: definitions,
+        getRowId: row_key ? (row) => String(row_key(row)) : undefined,
+        getSubRows: children_of ? (row) => children_of(row) ?? [] : undefined,
+        state: {
+            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])),
+        },
+        getCoreRowModel: getCoreRowModel(),
+        getSortedRowModel: getSortedRowModel(),
+        getExpandedRowModel: getExpandedRowModel(),
+        getRowCanExpand: (row) => row.subRows.length > 0,
+        manualSorting: manual,
+    });
+    const shown = table.getVisibleLeafColumns().map((column) => by_id.get(column.id));
+    function toggle_row(row) {
+        const open = expanded === true
+            ? table.getCoreRowModel().flatRows.filter((each) => each.subRows.length > 0).map((each) => each.id)
+            : expanded;
+        const next = row.getIsExpanded() ? open.filter((id) => id !== row.id) : [...open, row.id];
+        if (props.expanded === undefined)
+            set_own_expanded(next);
+        props.on_expanded_change?.(next);
+    }
+    // ── Sorting ──
+    function sort_by(id, adding) {
+        if (props.on_sorting_change)
+            return props.on_sorting_change(sort_after_click(sorting, id, adding));
+        const current = sorting.find((key) => key.key === id);
+        props.on_sort?.({ key: id, descending: current ? !current.descending : false });
+    }
+    // ── Widths ──
+    const width_of = (column) => widths[column_id(column)] ?? column.width;
+    // A column never sized is measured, so the first drag of its edge starts from where it is.
+    useLayoutEffect(() => {
+        if (!props.on_column_widths_change)
+            return;
+        const sizes = Object.fromEntries([...header_cells.current].map(([id, cell]) => [id, cell.offsetWidth]));
+        set_measured((before) => JSON.stringify(before) === JSON.stringify(sizes) ? before : sizes);
+    }, [shown.map(column_id).join("\n"), props.on_column_widths_change]);
+    function resize(column, width, done) {
+        props.on_column_widths_change?.({ ...widths, [column_id(column)]: width }, done);
+    }
+    // ── Moving ──
+    const can_move = (column) => Boolean(props.on_column_order_change) && column.movable !== false;
+    const order = () => table.getState().columnOrder;
+    function move(id, target, after) {
+        if (id !== target)
+            props.on_column_order_change?.(move_column(order(), id, target, after));
+    }
+    // A column dropped on the left half of another goes before it, and on the right half after it.
+    function drag_over(column, event) {
+        if (!dragged || !can_move(column))
+            return;
+        event.preventDefault();
+        const cell = event.currentTarget.getBoundingClientRect();
+        set_drop_target({ id: column_id(column), after: event.clientX > cell.left + cell.width / 2 });
+    }
+    function drop(event) {
+        event.preventDefault();
+        if (dragged && drop_target)
+            move(dragged, drop_target.id, drop_target.after);
+        set_dragged(null);
+        set_drop_target(null);
+    }
+    // Alt with an arrow moves the column one place along, past any hidden ones.
+    function move_by_key(column, event) {
+        if (!event.altKey || !can_move(column) || (event.key !== "ArrowLeft" && event.key !== "ArrowRight"))
+            return;
+        event.preventDefault();
+        const ids = shown.map(column_id);
+        const index = ids.indexOf(column_id(column));
+        const target = ids[index + (event.key === "ArrowLeft" ? -1 : 1)];
+        if (target && by_id.get(target)?.movable !== false)
+            move(column_id(column), target, event.key === "ArrowRight");
+    }
+    // ── Filters ──
+    function toggle_filter(id, anchor) {
+        // The click that closed the popover by landing outside it is the same one that reaches its button.
+        const just_closed = filter_closed.current.id === id && Date.now() - filter_closed.current.at < 300;
+        set_open_filter(open_filter?.id === id || just_closed ? null : { id, anchor });
+    }
+    function close_filter() {
+        if (open_filter)
+            filter_closed.current = { id: open_filter.id, at: Date.now() };
+        set_open_filter(null);
+    }
+    const any_filter = columns.some((column) => column.filter_active);
+    // ── Hiding ──
+    function open_columns_menu(event) {
+        if (!props.on_hidden_columns_change)
+            return;
+        event.preventDefault();
+        if (event.type === "contextmenu")
+            return set_columns_menu({ x: event.clientX, y: event.clientY });
+        const button = event.currentTarget.getBoundingClientRect();
+        set_columns_menu({ x: button.left, y: button.bottom + 4 });
+    }
+    const column_choices = columns.map((column) => {
+        const id = column_id(column);
+        const visible = !hidden.includes(id);
+        // The last column on show stays, so the table never empties.
+        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 = is_sortable(column) && Boolean(props.on_sort || props.on_sorting_change);
+        const width = width_of(column);
+        const movable = can_move(column);
+        const class_name = [
+            column.class, column.filter_active && "filtered", dragged === id && "dragged", drop_target?.id === id && (drop_target.after ? "drop-after" : "drop-before"),
+        ].filter(Boolean).join(" ") || undefined;
+        const marker = key && (_jsxs("span", { className: "sort-marker", "aria-hidden": "true", children: [key.descending ? " ↓" : " ↑", sorting.length > 1 && _jsx("sup", { className: "sort-rank", children: index + 1 })] }));
+        return (_jsxs("th", { ref: (cell) => { if (cell)
+                header_cells.current.set(id, cell);
+            else
+                header_cells.current.delete(id); }, className: class_name, scope: "col", style: width === undefined ? undefined : { width, minWidth: width, maxWidth: width }, "aria-sort": sortable ? (key ? (key.descending ? "descending" : "ascending") : "none") : undefined, draggable: movable || undefined, title: movable ? "Drag to move this column" : undefined, onPointerDownCapture: (event) => { resizing.current = event.target.classList.contains("resize-handle"); }, onDragStart: (event) => {
+                if (resizing.current)
+                    return event.preventDefault();
+                event.dataTransfer.setData("text/plain", id);
+                set_dragged(id);
+            }, onDragEnd: () => { set_dragged(null); set_drop_target(null); }, onDragOver: (event) => drag_over(column, event), onDragLeave: () => set_drop_target(null), onDrop: drop, children: [sortable ? (_jsxs("button", { type: "button", className: "sort", title: props.on_sorting_change ? "Click to sort by this column, Shift+click to add it to the sort" : undefined, onClick: (event) => sort_by(id, event.shiftKey), onKeyDown: (event) => move_by_key(column, event), children: [column.label, marker] })) : movable ? (_jsx("span", { tabIndex: 0, onKeyDown: (event) => move_by_key(column, event), children: column.label })) : column.label, column.filter !== undefined && (_jsx("button", { type: "button", className: column.filter_active ? "icon filter-button active" : "icon filter-button", "aria-label": `Filter by ${column.label}`, "aria-expanded": open_filter?.id === id, title: column.filter_active ? `Filtered by ${column.label}` : `Filter by ${column.label}`, onClick: (event) => toggle_filter(id, event.currentTarget), children: _jsx("svg", { viewBox: "0 0 16 16", width: "12", height: "12", "aria-hidden": "true", children: _jsx("path", { d: "M2 3h12l-4.5 5.5V13l-3 1.5v-6z", fill: "currentColor" }) }) })), props.on_column_widths_change && (_jsx(ResizeHandle, { side: "left", size: width ?? measured[id] ?? column.min_width ?? 48, min: column.min_width ?? 48, max: column.max_width ?? 960, default_size: clamp_width(column.width ?? measured[id] ?? 120, column.min_width, column.max_width), on_resize: (size) => resize(column, size, false), on_resize_end: (size) => resize(column, size, true), label: `Resize the ${column.label} column`, class_name: "column-resize" }))] }, id));
+    }
+    function body_row(row) {
+        const original = row.original;
+        const row_class = [props.row_class?.(original), row_drop?.id === row.id && `drop-${row_drop.placement}`].filter(Boolean).join(" ") || undefined;
+        const after = props.render_after_row?.(original);
+        const draggable = Boolean(props.on_row_drag_start);
+        const keyed = props.on_row_key_down !== undefined;
+        const key = row_key ? String(row_key(original)) : row.id;
+        return (_jsxs(Fragment, { children: [_jsx("tr", { className: row_class, title: props.row_title?.(original), style: props.row_style?.(original), "data-row-key": keyed ? key : undefined, tabIndex: keyed ? (props.active_row !== undefined && String(props.active_row) === key ? 0 : -1) : undefined, "aria-selected": props.row_selected ? props.row_selected(original) : undefined, draggable: draggable || undefined, onDragStart: draggable ? (event) => row_drag_start(row, event) : undefined, onDragEnd: draggable ? row_drag_end : undefined, onDragOver: props.on_row_drop && ((event) => row_drag_over(row, event)), onDragLeave: props.on_row_drop && (() => { if (row_drop?.id === row.id)
+                        set_row_drop(null); }), onDrop: props.on_row_drop && ((event) => row_drag_drop(row, event)), onClick: props.on_row_click && ((event) => props.on_row_click(original, event)), onDoubleClick: props.on_row_double_click && ((event) => props.on_row_double_click(original, event)), onKeyDown: props.on_row_key_down && ((event) => props.on_row_key_down(original, event)), onContextMenu: props.on_row_context_menu && ((event) => props.on_row_context_menu(original, event)), children: shown.map((column, index) => {
+                        const label = column.label;
+                        if (!tree || index > 0)
+                            return _jsx("td", { className: column.class, "data-label": label, children: column.cell(original) }, column_id(column));
+                        const open = row.getIsExpanded();
+                        const count = row.subRows.length;
+                        return (_jsxs("td", { className: [column.class, "tree-cell"].filter(Boolean).join(" "), "data-label": label, style: { "--tree-depth": row.depth }, children: [count > 0 ? (_jsx("button", { type: "button", className: "icon tree-toggle", "aria-expanded": open, "aria-label": open ? "Collapse" : "Expand", onClick: (event) => { event.stopPropagation(); toggle_row(row); }, children: open ? "▾" : "▸" })) : _jsx("span", { className: "tree-spacer" }), column.cell(original), count > 0 && !open && _jsx("span", { className: "tree-count", title: `${count} inside`, children: count })] }, column_id(column)));
+                    }) }), after !== undefined && after !== null && typeof after !== "boolean" && _jsx("tr", { className: "row-extra", children: _jsx("td", { colSpan: shown.length, children: after }) })] }, row.id));
+    }
+    // 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: 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.
+export function Pager({ page, has_more, go }) {
+    if (page === 1 && !has_more)
+        return null;
+    return (_jsxs("nav", { className: "pager", "aria-label": "Pages", children: [_jsx("button", { disabled: page <= 1, onClick: () => go(page - 1), children: "\u2190 Newer" }), _jsxs("span", { className: "muted", children: ["Page ", page] }), _jsx("button", { disabled: !has_more, onClick: () => go(page + 1), children: "Older \u2192" })] }));
+}

package/dist/web/{preact → react}/time.d.ts

@@ -1,4 +1,5 @@
 export declare function Age({ epoch, missing }: {
     epoch: number | null | undefined;
     missing?: string;
-}): import("preact").JSX.Element;
+}): import("react").JSX.Element;
+export declare function use_now(interval_in_milliseconds?: number): Date;

package/dist/web/react/time.js

@@ -0,0 +1,19 @@
+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, 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 = "—" }) {
+    if (!epoch)
+        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

@@ -0,0 +1,29 @@
+export interface ToastOptions {
+    tone?: "good" | "bad" | "warn" | "info";
+    link?: {
+        href: string;
+        text: string;
+    } | null;
+    action?: {
+        text: string;
+        run: () => void;
+    };
+    sticky?: boolean;
+    duration_in_milliseconds?: number;
+    on_close?: (reason: ToastCloseReason) => void;
+}
+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

@@ -0,0 +1,72 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Short notes in the page's corner after something happened, with an optional link or action such as Undo.
+import { useEffect, useState } from "react";
+let shown = [];
+let next_id = 1;
+const listeners = new Set();
+function publish(toasts) {
+    shown = toasts;
+    for (const listener of listeners)
+        listener(shown);
+}
+// Takes the toast away and tells its owner why, once only.
+function close_toast(id, reason) {
+    const item = shown.find((each) => each.id === id);
+    if (!item)
+        return;
+    publish(shown.filter((each) => each.id !== id));
+    item.on_close?.(reason);
+}
+// Shows the message and returns a function that closes it early.
+export function toast(message, options = {}) {
+    const id = next_id++;
+    publish([...shown, { ...options, id, message }]);
+    if (!(options.sticky ?? options.tone === "bad"))
+        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() {
+    const [toasts, set_toasts] = useState(shown);
+    useEffect(() => {
+        listeners.add(set_toasts);
+        return () => void listeners.delete(set_toasts);
+    }, []);
+    return (_jsx("div", { id: "toasts", className: "toasts", children: toasts.map((item) => {
+            const tone = item.tone ?? "info";
+            const close = () => close_toast(item.id, "dismissed");
+            return (_jsxs("div", { className: `toast tone-${tone}`, role: tone === "bad" ? "alert" : "status", children: [_jsx("span", { children: item.message }), item.link && _jsx("a", { href: item.link.href, onClick: close, children: item.link.text }), item.action && _jsx("button", { className: "toast-action", onClick: () => { close_toast(item.id, "action"); item.action.run(); }, children: item.action.text }), _jsx("button", { className: "icon", "aria-label": "Dismiss", onClick: close, children: "\u00D7" })] }, item.id));
+        }) }));
+}

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

@@ -0,0 +1,28 @@
+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> {
+    items: Item[];
+    label: string;
+    render_item: (item: Item) => ReactNode;
+    render_extra?: (item: Item) => ReactNode;
+    name_of?: (item: Item) => string;
+    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;
+    new_item?: {
+        parent_id: string | null;
+        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, 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

@@ -0,0 +1,183 @@
+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, 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);
+    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 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;
+        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;
+    }
+    // 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 external = accepts_from_outside(event, target);
+        const placement = external ? "inside" : placement_over(event, target);
+        if (!placement)
+            return;
+        event.preventDefault();
+        // 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();
+        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",
+            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_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); }, 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, "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);
+}