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

package/dist/web/tree.js

@@ -0,0 +1,107 @@
+// Trees of rows that name their parent and their place among siblings, and where a dragged or keyed row lands.
+// ── Shape ────────────────────────────────────────────────────────────────────
+export function by_position(first, second) {
+    return first.position - second.position;
+}
+export function children_of(parent_id, items) {
+    return items.filter((item) => item.parent_id === parent_id);
+}
+// The item itself plus everything below it, at any depth.
+export function subtree_ids(item_id, items) {
+    const ids = new Set([item_id]);
+    for (const id of ids) {
+        for (const child of children_of(id, items))
+            ids.add(child.id);
+    }
+    return ids;
+}
+// Each shown item sits under its nearest ancestor that is also shown, or at the top when none is, in the order given.
+export function nest(shown, all = shown) {
+    const item_by_id = new Map(all.map((item) => [item.id, item]));
+    const node_by_id = new Map(shown.map((item) => [item.id, { item, children: [] }]));
+    const top_nodes = [];
+    for (const node of node_by_id.values()) {
+        const seen = new Set([node.item.id]);
+        let ancestor_id = node.item.parent_id;
+        while (ancestor_id && !node_by_id.has(ancestor_id) && !seen.has(ancestor_id)) {
+            seen.add(ancestor_id);
+            ancestor_id = item_by_id.get(ancestor_id)?.parent_id ?? null;
+        }
+        if (ancestor_id && node_by_id.has(ancestor_id) && !seen.has(ancestor_id))
+            node_by_id.get(ancestor_id).children.push(node);
+        else
+            top_nodes.push(node);
+    }
+    return top_nodes;
+}
+// ── Dropping ─────────────────────────────────────────────────────────────────
+// The top and bottom quarters of a row drop beside it and the middle drops into it, or halves when nothing drops inside.
+export function placement_at(fraction_down, allow_inside) {
+    if (!allow_inside)
+        return fraction_down < 0.5 ? "before" : "after";
+    if (fraction_down < 0.25)
+        return "before";
+    if (fraction_down > 0.75)
+        return "after";
+    return "inside";
+}
+// A row cannot drop onto itself or anything below it.
+export function can_drop(dragged_id, target_id, items) {
+    return !subtree_ids(dragged_id, items).has(target_id);
+}
+// Picks a position between the neighbours at the drop point, so only the moved item changes.
+function position_beside(siblings, target, placement) {
+    const sorted = [...siblings].sort(by_position);
+    const index = sorted.findIndex((sibling) => sibling.id === target.id);
+    const neighbour = sorted[placement === "before" ? index - 1 : index + 1];
+    if (!neighbour)
+        return placement === "before" ? target.position - 1 : target.position + 1;
+    return (target.position + neighbour.position) / 2;
+}
+// For a flat list, where items only move before or after each other.
+export function position_for_drop(dragged, target, placement, items) {
+    return position_beside(items.filter((item) => item.id !== dragged.id), target, placement);
+}
+// Inside drops after the target's last child; before and after drop among the target's siblings.
+export function move_for_drop(dragged, target, placement, items) {
+    const others = items.filter((item) => item.id !== dragged.id);
+    if (placement === "inside") {
+        const last_child_position = Math.max(target.position, ...children_of(target.id, others).map((item) => item.position));
+        return { parent_id: target.id, position: last_child_position + 1 };
+    }
+    return { parent_id: target.parent_id, position: position_beside(children_of(target.parent_id, others), target, placement) };
+}
+// Moves several items together, keeping their order: inside the target after its last child, or in a run between it and its neighbour.
+export function moves_for_drop(dragged, target, placement, items) {
+    const dragged_ids = new Set(dragged.map((item) => item.id));
+    const others = items.filter((item) => !dragged_ids.has(item.id));
+    if (placement === "inside") {
+        const last_child_position = Math.max(target.position, ...children_of(target.id, others).map((item) => item.position));
+        return dragged.map((_, index) => ({ parent_id: target.id, position: last_child_position + index + 1 }));
+    }
+    const siblings = children_of(target.parent_id, others).sort(by_position);
+    const index = siblings.findIndex((sibling) => sibling.id === target.id);
+    const neighbour = siblings[placement === "before" ? index - 1 : index + 1];
+    const low = placement === "before" ? (neighbour?.position ?? target.position - 1) : target.position;
+    const high = placement === "before" ? target.position : (neighbour?.position ?? target.position + 1);
+    return dragged.map((_, index) => ({ parent_id: target.parent_id, position: low + ((high - low) * (index + 1)) / (dragged.length + 1) }));
+}
+// Up and down pass the sibling beside it, indent goes last inside the sibling above, outdent goes after its parent; null when it cannot go that way.
+export function key_drop(item, direction, items) {
+    const siblings = children_of(item.parent_id, items).sort(by_position);
+    const index = siblings.findIndex((sibling) => sibling.id === item.id);
+    const above = siblings[index - 1];
+    const below = siblings[index + 1];
+    const parent = items.find((each) => each.id === item.parent_id);
+    if (direction === "up")
+        return above ? { target: above, placement: "before" } : null;
+    if (direction === "down")
+        return below ? { target: below, placement: "after" } : null;
+    if (direction === "indent")
+        return above ? { target: above, placement: "inside" } : null;
+    return parent ? { target: parent, placement: "after" } : null;
+}
+export function move_for_key(item, direction, items) {
+    const drop = key_drop(item, direction, items);
+    return drop && move_for_drop(item, drop.target, drop.placement, items);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@x-tech-laboratories/x-libs",
-  "version": "0.3.0",
+  "version": "0.6.0",
   "description": "Code the X-apps share: agents and their long runs, passwords, durations, and the web page's helpers and widgets",
   "license": "GPL-3.0-or-later",
   "repository": {
@@ -29,7 +29,8 @@
   "peerDependencies": {
     "@fastify/websocket": "^11.3.5",
     "fastify": "^5.12.7",
-    "preact": "^10.29.8"
+    "react": "^19",
+    "react-dom": "^19"
   },
   "peerDependenciesMeta": {
     "@fastify/websocket": {
@@ -38,22 +39,32 @@
     "fastify": {
       "optional": true
     },
-    "preact": {
+    "react": {
+      "optional": true
+    },
+    "react-dom": {
       "optional": true
     }
   },
   "devDependencies": {
     "@fastify/websocket": "^11.3.5",
+    "@testing-library/dom": "^10.4.2",
+    "@testing-library/react": "^16.3.3",
     "@types/node": "^24.19.2",
+    "@types/react": "^19.3.0",
+    "@types/react-dom": "^19.3.0",
     "@types/sshpk": "^1.17.5",
     "fastify": "^5.12.7",
+    "jsdom": "^31.0.0",
     "oxlint": "^1.90.0",
-    "preact": "^10.29.8",
+    "react": "^19.3.1",
+    "react-dom": "^19.3.1",
     "typescript": "^7.0.2",
     "vitest": "^5.0.5"
   },
   "dependencies": {
     "@inquirer/password": "^5.2.5",
+    "@tanstack/react-table": "^8.21.3",
     "parse-duration": "^2.1.11",
     "pretty-bytes": "^7.2.0",
     "sshpk": "^1.18.0"

package/dist/web/badges.d.ts

@@ -1,10 +0,0 @@
-import { type Child } from "./dom.ts";
-export type Tone = "good" | "warn" | "bad" | "info" | "none";
-export declare function badge(text: Child, tone?: Tone, title?: string): HTMLElement;
-export declare function state_badge<State extends string>(labels: Record<State, [text: string, tone: Tone]>, state: State): HTMLElement;
-export declare function chip(text: Child, title?: string): HTMLElement;
-export declare function chip_button(text: Child, on_click: () => void, title?: string): HTMLElement;
-export declare function chips(items: Child[], options?: {
-    inline?: boolean;
-}): HTMLElement;
-export declare function verdict(ok: boolean | null | undefined, label: string): HTMLElement;

package/dist/web/badges.js

@@ -1,30 +0,0 @@
-// Badges, chips and verdicts: short labels whose tone is written out, so meaning never rests on color alone.
-import { h } from "./dom.js";
-// ── Badges ───────────────────────────────────────────────────────────────────
-export function badge(text, tone = "none", title = "") {
-    return h("span", { class: `badge tone-${tone}`, title: title || null }, text);
-}
-// A badge for one of a fixed set of states, each named by its text and tone.
-export function state_badge(labels, state) {
-    const [text, tone] = labels[state];
-    return badge(text, tone);
-}
-// ── Chips ────────────────────────────────────────────────────────────────────
-export function chip(text, title = "") {
-    return h("span", { class: "chip", title: title || null }, text);
-}
-// A chip that picks what it names, such as a tag to filter by.
-export function chip_button(text, on_click, title = "") {
-    return h("button", { type: "button", class: "chip", title: title || null, onclick: on_click }, text);
-}
-// A row of chips or badges, with less space between them when they sit inside a line of text.
-export function chips(items, options = {}) {
-    return h("span", { class: options.inline ? "chips inline-chips" : "chips" }, ...items);
-}
-// ── Verdicts ─────────────────────────────────────────────────────────────────
-// A pass, fail or not-yet verdict, such as "checks: pass".
-export function verdict(ok, label) {
-    const text = ok === null || ok === undefined ? "no verdict" : ok ? "pass" : "fail";
-    const tone = ok === null || ok === undefined ? "none" : ok ? "good" : "bad";
-    return h("span", { class: `verdict tone-${tone}` }, `${label}: ${text}`);
-}

package/dist/web/controls.d.ts

@@ -1,6 +0,0 @@
-import { type Child } from "./dom.ts";
-export declare function search_box(label: string, value: string, on_input: (value: string) => void): HTMLInputElement;
-export declare function select(label: string, options: [value: string, text: string][], value: string, on_change: (value: string) => void): HTMLElement;
-export declare function segmented<Value extends string>(label: string, choices: [value: Value, text: string][], value: Value, on_change: (value: Value) => void): HTMLElement;
-export declare function button_group(label: string, ...buttons: Child[]): HTMLElement;
-export declare function switch_toggle(label: string, checked: boolean, on_change: (on: boolean) => Promise<boolean | void> | boolean | void): HTMLInputElement;

package/dist/web/controls.js

@@ -1,55 +0,0 @@
-// Controls that change what a view shows or does: filters, selects, segmented choices, switches and button groups.
-import { h } from "./dom.js";
-// ── Filters ──────────────────────────────────────────────────────────────────
-// A search field that hands on what was typed once typing pauses.
-export function search_box(label, value, on_input) {
-    let timer;
-    return h("input", {
-        type: "search", class: "filter", placeholder: label, "aria-label": label, value,
-        oninput: (event) => {
-            clearTimeout(timer);
-            const text = event.target.value;
-            timer = window.setTimeout(() => on_input(text), 200);
-        },
-    });
-}
-export function select(label, options, value, on_change) {
-    return h("label", { class: "field" }, h("span", { class: "field-label" }, label), h("select", { onchange: (event) => on_change(event.target.value) }, ...options.map(([option, text]) => h("option", { value: option, selected: option === value }, text))));
-}
-// ── Choices ──────────────────────────────────────────────────────────────────
-// One of a few choices side by side, such as cards or a table; the chosen one takes the accent.
-export function segmented(label, choices, value, on_change) {
-    const buttons = choices.map(([choice, text]) => h("button", {
-        type: "button", role: "radio", "aria-checked": String(choice === value),
-        onclick: () => {
-            for (const [index, button] of buttons.entries())
-                button.setAttribute("aria-checked", String(choices[index][0] === choice));
-            on_change(choice);
-        },
-    }, text));
-    return h("div", { class: "segmented", role: "radiogroup", "aria-label": label }, ...buttons);
-}
-// Buttons joined into one control, such as zoom out, zoom in and fit.
-export function button_group(label, ...buttons) {
-    return h("div", { class: "segmented", role: "group", "aria-label": label }, ...buttons);
-}
-// An on and off switch that waits on the change and flips back when the change did not take.
-export function switch_toggle(label, checked, on_change) {
-    const box = h("input", { type: "checkbox", role: "switch", checked, "aria-label": label });
-    box.addEventListener("change", async () => {
-        const on = box.checked;
-        box.disabled = true;
-        try {
-            if ((await on_change(on)) === false)
-                box.checked = !on;
-        }
-        catch (error) {
-            box.checked = !on;
-            throw error;
-        }
-        finally {
-            box.disabled = false;
-        }
-    });
-    return box;
-}

package/dist/web/dialogs.d.ts

@@ -1,18 +0,0 @@
-import { type Child } from "./dom.ts";
-export interface DialogOptions {
-    wide?: boolean;
-    class_name?: string;
-}
-export declare function open_dialog(title: string, body: Child, buttons: (close: () => void) => Child, options?: DialogOptions): () => void;
-export interface ConfirmOptions {
-    title: string;
-    message: Child;
-    confirm_label: string;
-    busy_label?: string;
-    danger?: boolean;
-    wide?: boolean;
-    type_to_confirm?: string;
-    run: () => Promise<void>;
-}
-export declare function confirm_dialog(options: ConfirmOptions): void;
-export declare function text_dialog(title: string, text: string): void;

package/dist/web/dialogs.js

@@ -1,49 +0,0 @@
-// Modal dialogs: one with any body and buttons, one that asks before an action, and one that shows a long text.
-import { h } from "./dom.js";
-import { toast } from "./toasts.js";
-// A modal dialog: the page behind it is inert, focus stays inside, and Escape closes it.
-export function open_dialog(title, body, buttons, options = {}) {
-    const classes = ["dialog", options.wide && "wide", options.class_name].filter(Boolean).join(" ");
-    const dialog = h("dialog", { class: classes, "aria-labelledby": "dialog-title" });
-    const close = () => {
-        dialog.close();
-        dialog.remove();
-    };
-    dialog.addEventListener("close", () => dialog.remove());
-    dialog.append(h("h2", { id: "dialog-title" }, title), h("div", { class: "dialog-body" }, body), h("div", { class: "dialog-buttons" }, buttons(close)));
-    document.body.append(dialog);
-    dialog.showModal();
-    return close;
-}
-export function confirm_dialog(options) {
-    const confirm = h("button", { class: options.danger ? "danger solid" : "accent solid", disabled: options.type_to_confirm !== undefined }, options.confirm_label);
-    const typed = options.type_to_confirm === undefined ? null : h("input", {
-        type: "text", class: "filter", autocomplete: "off", "aria-label": `Type ${options.type_to_confirm} to confirm`,
-        oninput: (event) => { confirm.disabled = event.target.value !== options.type_to_confirm; },
-    });
-    const body = h("div", {}, typeof options.message === "string" ? h("p", {}, options.message) : options.message, typed && h("label", { class: "type-confirm" }, h("span", {}, "Type ", h("strong", {}, options.type_to_confirm), " to confirm:"), typed));
-    open_dialog(options.title, body, (close) => {
-        const cancel = h("button", { onclick: close }, "Cancel");
-        confirm.addEventListener("click", async () => {
-            confirm.disabled = true;
-            cancel.disabled = true;
-            confirm.textContent = options.busy_label ?? "Working…";
-            try {
-                await options.run();
-            }
-            finally {
-                close();
-            }
-        });
-        return [cancel, confirm];
-    }, { wide: options.wide });
-    (typed ?? confirm).focus();
-}
-// ── Text ─────────────────────────────────────────────────────────────────────
-// Shows a long text result, such as a preview, with a button to copy it.
-export function text_dialog(title, text) {
-    open_dialog(title, h("pre", { class: "output" }, text), (close) => [
-        h("button", { onclick: () => void navigator.clipboard?.writeText(text).then(() => toast("Copied.")) }, "Copy"),
-        h("button", { class: "accent solid", onclick: close }, "Close"),
-    ], { wide: true });
-}

package/dist/web/layout.d.ts

@@ -1,28 +0,0 @@
-import { type Child } from "./dom.ts";
-export declare function section(title: Child, body: Child, tools?: Child): HTMLElement;
-export declare function facts(rows: [label: string, value: Child, class_name?: string][], layout?: "grid" | "rows"): HTMLElement;
-export declare function tile(label: string, value: Child, class_name?: string | null, href?: string | null): HTMLElement;
-export declare function tiles(...items: Child[]): HTMLElement;
-export interface CardOptions {
-    subtitle?: Child;
-    badge?: Child;
-    class_name?: string;
-    href?: string;
-}
-export declare function card(title: Child, body: Child, options?: CardOptions): HTMLElement;
-export declare function cards(...items: Child[]): HTMLElement;
-export interface TabItem {
-    id: string;
-    label: string;
-    href: string;
-}
-export declare function tabs(items: TabItem[], active: string, label?: string): HTMLElement;
-export declare function crumbs(items: [label: string, href: string | null][]): HTMLElement;
-export declare function toolbar(...children: Child[]): HTMLElement;
-export declare function stepper(label: string, previous: {
-    text: string;
-    href: string | null;
-}, position: Child, next: {
-    text: string;
-    href: string | null;
-}): HTMLElement;

package/dist/web/layout.js

@@ -1,53 +0,0 @@
-// The pieces a page is laid out with: panels, facts, tiles, cards, tabs, breadcrumbs, toolbars and steppers.
-import { h } from "./dom.js";
-// ── Panels ───────────────────────────────────────────────────────────────────
-export function section(title, body, tools = null) {
-    return h("section", { class: "panel" }, h("div", { class: "panel-head" }, h("h2", {}, title), tools && h("div", { class: "panel-tools" }, tools)), body);
-}
-// Labelled values in a grid of tiles, or as rows of label and value for long values such as paths.
-export function facts(rows, layout = "grid") {
-    return h("dl", { class: layout === "rows" ? "facts facts-rows" : "facts" }, ...rows.map(([label, value, class_name]) => h("div", {}, h("dt", {}, label), h("dd", { class: class_name ?? null }, value ?? "—"))));
-}
-// ── Tiles and cards ──────────────────────────────────────────────────────────
-// One headline figure under its label; a class such as tile-bad or tone-edge-warn marks its edge, and a link makes it open a page.
-export function tile(label, value, class_name = null, href = null) {
-    const tile_class = `tile${class_name ? ` ${class_name}` : ""}`;
-    const children = [h("div", { class: "tile-label" }, label), h("div", { class: "tile-value" }, value)];
-    return href === null ? h("div", { class: tile_class }, ...children) : h("a", { class: tile_class, href }, ...children);
-}
-export function tiles(...items) {
-    return h("div", { class: "tiles" }, ...items);
-}
-// A titled card for one thing among many, laid out in a grid.
-export function card(title, body, options = {}) {
-    const card_class = `card${options.class_name ? ` ${options.class_name}` : ""}`;
-    const children = [
-        h("div", { class: "card-head" }, h("strong", {}, title), options.badge),
-        options.subtitle && h("div", { class: "muted card-host" }, options.subtitle),
-        body,
-    ];
-    return options.href ? h("a", { class: card_class, href: options.href }, ...children) : h("div", { class: card_class }, ...children);
-}
-export function cards(...items) {
-    return h("div", { class: "grid" }, ...items);
-}
-export function tabs(items, active, label = "Sections") {
-    return h("nav", { class: "tabs", "aria-label": label }, ...items.map((item) => h("a", { href: item.href, class: item.id === active ? "tab active" : "tab", "aria-current": item.id === active ? "page" : null }, item.label)));
-}
-export function crumbs(items) {
-    return h("nav", { class: "crumbs", "aria-label": "Breadcrumb" }, ...items.flatMap(([label, href], index) => [
-        index > 0 ? h("span", { class: "muted", "aria-hidden": "true" }, " / ") : null,
-        href ? h("a", { href }, label) : h("span", { "aria-current": "page" }, label),
-    ]));
-}
-// ── Toolbars ─────────────────────────────────────────────────────────────────
-export function toolbar(...children) {
-    return h("div", { class: "toolbar" }, ...children);
-}
-// Steps to the item before or after this one, each a link or a dead button when there is none, with where this one stands between.
-export function stepper(label, previous, position, next) {
-    const step = (target) => target.href === null
-        ? h("button", { disabled: true }, target.text)
-        : h("a", { class: "button", href: target.href }, target.text);
-    return h("div", { class: "stepper", role: "group", "aria-label": label }, step(previous), h("span", { class: "muted" }, position), step(next));
-}

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

@@ -1,24 +0,0 @@
-interface SegmentedProps<Value extends string> {
-    label: string;
-    choices: {
-        value: Value;
-        label: string;
-    }[];
-    value: Value;
-    on_change: (value: Value) => void;
-}
-export declare function Segmented<Value extends string>({ label, choices, value, on_change }: SegmentedProps<Value>): 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;
-export {};

package/dist/web/preact/controls.js

@@ -1,36 +0,0 @@
-import { jsx as _jsx } from "preact/jsx-runtime";
-// Preact controls drawn like the page's own: segmented choices, switches and search fields.
-import { useRef, useState } from "preact/hooks";
-// One of a few choices side by side; the chosen one takes the accent.
-export function Segmented({ label, choices, value, on_change }) {
-    return (_jsx("div", { class: "segmented", role: "radiogroup", "aria-label": label, children: choices.map((choice) => (_jsx("button", { type: "button", role: "radio", "aria-checked": value === choice.value, onClick: () => on_change(choice.value), children: choice.label }, choice.value))) }));
-}
-export function Switch({ label, checked, on_change, disabled = false }) {
-    const [busy, set_busy] = useState(false);
-    async function change(event) {
-        const box = event.currentTarget;
-        const on = box.checked;
-        set_busy(true);
-        try {
-            if ((await on_change(on)) === false)
-                box.checked = !on;
-        }
-        catch (error) {
-            box.checked = !on;
-            throw error;
-        }
-        finally {
-            set_busy(false);
-        }
-    }
-    return _jsx("input", { type: "checkbox", role: "switch", "aria-label": label, checked: checked, disabled: disabled || busy, onChange: change });
-}
-// A search field that hands on what was typed once typing pauses.
-export function SearchBox({ label, value, on_input }) {
-    const timer = useRef(undefined);
-    return (_jsx("input", { type: "search", class: "filter", placeholder: label, "aria-label": label, value: value, onInput: (event) => {
-            clearTimeout(timer.current);
-            const text = event.currentTarget.value;
-            timer.current = window.setTimeout(() => on_input(text), 200);
-        } }));
-}

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

@@ -1,11 +0,0 @@
-import type { ComponentChildren } from "preact";
-interface DialogProps {
-    title: ComponentChildren;
-    on_close: () => void;
-    buttons?: ComponentChildren;
-    wide?: boolean;
-    class_name?: string;
-    children: ComponentChildren;
-}
-export declare function Dialog({ title, on_close, buttons, wide, class_name, children }: DialogProps): import("preact").JSX.Element;
-export {};

package/dist/web/preact/dialog.js

@@ -1,20 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "preact/jsx-runtime";
-import { useEffect, useId, useRef } from "preact/hooks";
-// Shown while it is rendered; closing it by Escape or a button calls on_close, which should stop rendering it.
-export function Dialog({ title, on_close, buttons, wide = false, class_name, children }) {
-    const dialog = useRef(null);
-    const title_id = useId();
-    const close = useRef(on_close);
-    close.current = on_close;
-    useEffect(() => {
-        const element = dialog.current;
-        element.showModal();
-        return () => element.close();
-    }, []);
-    return (_jsxs("dialog", { ref: dialog, class: ["dialog", wide && "wide", class_name].filter(Boolean).join(" "), "aria-labelledby": title_id, onCancel: (event) => {
-            // Escape asks the owner to close, so the dialog never closes behind its owner's back.
-            event.preventDefault();
-            event.stopPropagation();
-            close.current();
-        }, children: [_jsx("h2", { id: title_id, children: title }), _jsx("div", { class: "dialog-body", children: children }), buttons && _jsx("div", { class: "dialog-buttons", children: buttons })] }));
-}

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

@@ -1,80 +0,0 @@
-import type { ComponentChildren } from "preact";
-import type { Tone } from "../badges.ts";
-export type { Tone } from "../badges.ts";
-interface SectionProps {
-    title: ComponentChildren;
-    tools?: ComponentChildren;
-    children: ComponentChildren;
-}
-export declare function Section({ title, tools, children }: SectionProps): import("preact").JSX.Element;
-export declare function Facts({ rows, layout }: {
-    rows: [label: string, value: ComponentChildren][];
-    layout?: "grid" | "rows";
-}): import("preact").JSX.Element;
-interface TileProps {
-    label: string;
-    value: ComponentChildren;
-    tone?: Tone;
-    href?: string;
-}
-export declare function Tile({ label, value, tone, href }: TileProps): import("preact").JSX.Element;
-export declare function Tiles({ children }: {
-    children: ComponentChildren;
-}): import("preact").JSX.Element;
-interface CardProps {
-    title: ComponentChildren;
-    subtitle?: ComponentChildren;
-    badge?: ComponentChildren;
-    class_name?: string;
-    href?: string;
-    on_click?: () => void;
-    children?: ComponentChildren;
-}
-export declare function Card({ title, subtitle, badge, class_name, href, on_click, children }: CardProps): import("preact").JSX.Element;
-export declare function Cards({ children }: {
-    children: ComponentChildren;
-}): import("preact").JSX.Element;
-interface TabsProps<Id extends string> {
-    items: {
-        id: Id;
-        label: string;
-        href?: string;
-    }[];
-    active: Id;
-    label?: string;
-    on_select?: (id: Id) => void;
-}
-export declare function Tabs<Id extends string>({ items, active, label, on_select }: TabsProps<Id>): import("preact").JSX.Element;
-export declare function Badge({ tone, title, children }: {
-    tone?: Tone;
-    title?: string;
-    children: ComponentChildren;
-}): import("preact").JSX.Element;
-export declare function Chip({ title, on_click, children }: {
-    title?: string;
-    on_click?: () => void;
-    children: ComponentChildren;
-}): import("preact").JSX.Element;
-export declare function Skeleton({ lines }: {
-    lines?: number;
-}): import("preact").JSX.Element;
-export declare function Empty({ title, hint }: {
-    title: string;
-    hint?: ComponentChildren;
-}): import("preact").JSX.Element;
-export declare function Failure({ error, retry }: {
-    error: unknown;
-    retry: () => void;
-}): import("preact").JSX.Element;
-export declare function SettingsGroup({ heading, hint, children }: {
-    heading: string;
-    hint?: ComponentChildren;
-    children: ComponentChildren;
-}): import("preact").JSX.Element;
-interface SettingRowProps {
-    label: ComponentChildren;
-    hint?: ComponentChildren;
-    as_label?: boolean;
-    children: ComponentChildren;
-}
-export declare function SettingRow({ label, hint, as_label, children }: SettingRowProps): import("preact").JSX.Element;