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

package/dist/web/react/time.js

@@ -0,0 +1,9 @@
+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.
+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) });
+}

package/dist/web/{toasts.d.ts → react/toasts.d.ts}

@@ -3,12 +3,15 @@ export interface ToastOptions {
     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 declare function Toasts(): import("react").JSX.Element;

package/dist/web/react/toasts.js

@@ -0,0 +1,41 @@
+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");
+}
+// ── 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,23 @@
+import { 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;
+    on_select?: (item: Item) => void;
+    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;
+}
+export declare function Tree<Item extends TreeItem>({ items, label, render_item, render_extra, name_of, collapsed, on_collapsed_change, selected_id, on_select, on_move, can_drop, allow_inside, new_item, on_context_menu, }: TreeProps<Item>): import("react").JSX.Element;

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/states.d.ts

@@ -1,10 +1,3 @@
-import { type Child } from "./dom.ts";
 export declare class LoginNeeded extends Error {
 }
-export declare function skeleton(lines?: number): HTMLElement;
-export declare function empty(title: string, hint?: Child): HTMLElement;
-export declare function failure(error: unknown, retry: () => void): HTMLElement;
-export declare function load(target: HTMLElement, work: () => Promise<Child>, options?: {
-    quiet?: boolean;
-}): Promise<boolean>;
-export declare function attempt<Answer>(target: HTMLElement, quiet: boolean, work: () => Promise<Answer>, retry: () => void): Promise<Answer | null>;
+export declare function pass_login_needed(error: unknown): boolean;

package/dist/web/states.js

@@ -1,47 +1,10 @@
-// What a part of the page shows while it loads, when it has nothing, and when loading failed.
-import { h, nodes } from "./dom.js";
-// ── Login ────────────────────────────────────────────────────────────────────
-// Thrown by a request whose session has lapsed; loading passes it on so the page can ask for a login.
+// What a request throws when the session has lapsed, so a page can tell it from any other failure and ask for a login.
 export class LoginNeeded extends Error {
 }
-// ── States ───────────────────────────────────────────────────────────────────
-export function skeleton(lines = 3) {
-    return h("div", { class: "skeleton", "aria-busy": "true", "aria-label": "Loading" }, ...Array.from({ length: lines }, (_, index) => h("div", { class: "skeleton-line", style: `width: ${90 - index * 15}%` })));
-}
-export function empty(title, hint = null) {
-    return h("div", { class: "empty" }, h("p", { class: "empty-title" }, title), hint && h("p", { class: "muted" }, hint));
-}
-export function failure(error, retry) {
-    return h("div", { class: "failure", role: "alert" }, h("p", {}, `Could not load this: ${error instanceof Error ? error.message : String(error)}`), h("button", { onclick: retry }, "Retry"));
-}
-// ── Loading ──────────────────────────────────────────────────────────────────
-// Fills the target with what the work builds, showing a skeleton first and an error with Retry if it fails.
-export async function load(target, work, options = {}) {
-    if (!options.quiet)
-        target.replaceChildren(skeleton());
-    try {
-        target.replaceChildren(...nodes(await work()));
-        return true;
-    }
-    catch (error) {
-        // A login is the page's to ask for; a quiet refresh keeps what is already shown.
-        if (error instanceof LoginNeeded)
-            throw error;
-        if (!options.quiet)
-            target.replaceChildren(failure(error, () => void load(target, work)));
+// Hands a LoginNeeded on as an unhandled rejection, which the page's login listens for.
+export function pass_login_needed(error) {
+    if (!(error instanceof LoginNeeded))
         return false;
-    }
-}
-// Fetches what a view needs, putting an error with Retry in the target when a first load fails; null when it failed.
-export async function attempt(target, quiet, work, retry) {
-    try {
-        return await work();
-    }
-    catch (error) {
-        if (error instanceof LoginNeeded)
-            throw error;
-        if (!quiet)
-            target.replaceChildren(failure(error, retry));
-        return null;
-    }
+    void Promise.reject(error);
+    return true;
 }

package/dist/web/tables.d.ts

@@ -1,20 +1,27 @@
-import { type Child } from "./dom.ts";
-export interface Column<Row> {
-    label: string;
-    cell: (row: Row) => Child;
-    sort?: (row: Row) => string | number | null;
-    class?: string;
-}
 export interface Sorting {
     key: string;
     descending: boolean;
 }
-export interface TableOptions {
-    sorting?: Sorting;
-    on_sort?: (sorting: Sorting) => void;
-    caption?: string;
+export interface SortableColumn<Row> {
+    label: string;
+    id?: string;
+    sort?: (row: Row) => string | number | null;
+}
+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_rows<Row>(columns: Pick<Column<Row>, "label" | "sort">[], rows: Row[], sorting: Sorting | undefined): 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 data_table<Row>(columns: Column<Row>[], rows: Row[], options?: TableOptions): HTMLElement;
-export declare function pager(page: number, has_more: boolean, go: (page: number) => void): HTMLElement | null;
+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,44 +1,80 @@
-// Tables that sort by a column's header and turn into cards on phones, with a pager for long lists.
-import { h } from "./dom.js";
-// ── Sorting ──────────────────────────────────────────────────────────────────
-// 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;
 }
-// ── Tables ───────────────────────────────────────────────────────────────────
-// A table whose cells carry their column's label, so phones can show each row as a card.
-export function data_table(columns, rows, options = {}) {
-    const sorting = options.sorting;
-    const sort_column = sorting ? columns.find((column) => column.label === sorting.key && column.sort) : undefined;
-    const header = (column) => {
-        if (!column.sort || !options.on_sort)
-            return h("th", { class: column.class ?? null, scope: "col" }, column.label);
-        const active = sort_column === column;
-        const descending = active && sorting.descending;
-        return h("th", { class: column.class ?? null, scope: "col", "aria-sort": active ? (descending ? "descending" : "ascending") : "none" }, h("button", {
-            class: "sort",
-            onclick: () => options.on_sort({ key: column.label, descending: active ? !descending : false }),
-        }, column.label, active ? (descending ? " ↓" : " ↑") : ""));
-    };
-    return h("div", { class: "table-wrap" }, h("table", { class: "responsive" }, options.caption ? h("caption", { class: "visually-hidden" }, options.caption) : null, h("thead", {}, h("tr", {}, ...columns.map(header))), h("tbody", {}, ...sorted_rows(columns, rows, sorting).map((row) => h("tr", {}, ...columns.map((column) => h("td", { class: column.class ?? null, "data-label": column.label }, column.cell(row))))))));
-}
-// ── 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 h("nav", { class: "pager", "aria-label": "Pages" }, h("button", { disabled: page <= 1, onclick: () => go(page - 1) }, "← Newer"), h("span", { class: "muted" }, `Page ${page}`), h("button", { disabled: !has_more, onclick: () => go(page + 1) }, "Older →"));
+// ── 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

@@ -2,8 +2,13 @@ export type Theme = "system" | "light" | "dark";
 export interface ThemeChoice {
     get(): Theme;
     set(theme: Theme): void;
-    on_change(listener: (theme: Theme) => void): void;
+    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,18 +38,13 @@ 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) => void listeners.add(listener) };
+    return { get, set, apply, on_change: (listener) => {
+            listeners.add(listener);
+            return () => void listeners.delete(listener);
+        } };
 }
 // The header's button steps through system, light and dark.
 export function next_theme(theme) {

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;