@x-tech-laboratories/x-libs 0.14.1 → 0.14.2

package/dist/web/format.js

@@ -0,0 +1,82 @@
+// Writes times, durations, sizes and counts short enough for a table cell.
+import pretty_bytes from "pretty-bytes";
+// ── Times ────────────────────────────────────────────────────────────────────
+export function now_seconds() {
+    return Date.now() / 1000;
+}
+const relative = new Intl.RelativeTimeFormat("en", { style: "narrow", numeric: "always" });
+const plurals = new Intl.PluralRules("en");
+// A whole number of the largest unit that reads well, such as -3 hours, for "3h ago" or "in 3h".
+function relative_time(seconds) {
+    const magnitude = Math.abs(seconds);
+    const sign = seconds < 0 ? -1 : 1;
+    if (magnitude < 90)
+        return relative.format(sign * Math.round(magnitude), "second");
+    if (magnitude < 5400)
+        return relative.format(sign * Math.round(magnitude / 60), "minute");
+    if (magnitude < 129600)
+        return relative.format(sign * Math.round(magnitude / 3600), "hour");
+    return relative.format(sign * Math.round(magnitude / 86400), "day");
+}
+export function age(epoch) {
+    if (!epoch)
+        return "never";
+    return relative_time(-Math.max(0, now_seconds() - epoch));
+}
+// How long until the epoch, such as "in 3d", "now" when it is less than 90 seconds off, or how long ago once passed.
+export function until(epoch) {
+    if (epoch === null)
+        return "—";
+    const seconds = epoch - now_seconds();
+    if (seconds < 0)
+        return age(epoch);
+    return seconds < 90 ? "now" : relative_time(seconds);
+}
+export function duration(seconds) {
+    if (seconds === null)
+        return "—";
+    // Settings are often whole days or hours, which read better without a decimal.
+    if (seconds >= 86400 && seconds % 86400 === 0)
+        return `${seconds / 86400}d`;
+    if (seconds < 120)
+        return `${Math.round(seconds)}s`;
+    if (seconds < 7200)
+        return `${Math.round(seconds / 60)}m`;
+    if (seconds < 172800)
+        return seconds % 3600 === 0 ? `${seconds / 3600}h` : `${(seconds / 3600).toFixed(1)}h`;
+    return `${Math.round(seconds / 86400)}d`;
+}
+export function stamp(epoch) {
+    return new Date(epoch * 1000).toLocaleString();
+}
+// ── Sizes ────────────────────────────────────────────────────────────────────
+// Sizes in binary units, such as "44.4 GiB".
+export function bytes(count) {
+    return pretty_bytes(count, { binary: true, maximumFractionDigits: 1 });
+}
+// Sizes in decimal units, such as "1.2 GB".
+export function size(count) {
+    if (count === null || count === undefined)
+        return "—";
+    return pretty_bytes(count, { maximumFractionDigits: 1 });
+}
+// A size change with its sign, such as +1.2 GB or -300 MB.
+export function size_change(count) {
+    if (count === null || count === undefined)
+        return "—";
+    return count === 0 ? size(0) : pretty_bytes(count, { signed: true, maximumFractionDigits: 1 });
+}
+// ── Counts ───────────────────────────────────────────────────────────────────
+export function count_change(value) {
+    if (value === null || value === undefined)
+        return "—";
+    return value > 0 ? `+${value.toLocaleString()}` : value < 0 ? `−${Math.abs(value).toLocaleString()}` : "0";
+}
+export function plural(count, word) {
+    return `${count.toLocaleString()} ${word}${plurals.select(count) === "one" ? "" : "s"}`;
+}
+const compact = new Intl.NumberFormat("en", { notation: "compact", maximumFractionDigits: 1 });
+// A count in a few characters, such as "1.4M", "150K" or "950".
+export function compact_count(count) {
+    return compact.format(count);
+}

package/dist/web/menus.d.ts

@@ -0,0 +1,17 @@
+export interface MenuItem {
+    label: string;
+    run: () => void;
+    hint?: string;
+    disabled?: boolean;
+    danger?: boolean;
+    separator_before?: boolean;
+    checked?: boolean;
+    radio?: boolean;
+    keep_open?: boolean;
+}
+export declare function on_screen_position(x: number, y: number, width: number, height: number, room_width?: number, room_height?: number): {
+    left: number;
+    top: number;
+};
+export declare function item_after_key(key: string, current: number, count: number): number | null;
+export declare function item_starting_with(labels: readonly string[], typed: string, current: number): number | null;

package/dist/web/menus.js

@@ -0,0 +1,40 @@
+// What a menu item holds, where a menu opened at a point goes so it stays on screen, and which item a key moves to.
+const edge_gap = 4;
+// Flipped to the point's other side near an edge, or pushed back from the edge when neither side has room.
+export function on_screen_position(x, y, width, height, room_width = window.innerWidth, room_height = window.innerHeight) {
+    const place = (start, size, room) => {
+        if (start + size + edge_gap <= room)
+            return start;
+        if (start - size >= edge_gap)
+            return start - size;
+        return Math.max(edge_gap, room - size - edge_gap);
+    };
+    return { left: place(x, width, room_width), top: place(y, height, room_height) };
+}
+// ── Keys ─────────────────────────────────────────────────────────────────────
+// The item an arrow, Home or End key moves to from the current one, wrapping round, or null for any other key.
+export function item_after_key(key, current, count) {
+    if (count === 0)
+        return null;
+    switch (key) {
+        case "ArrowDown": return current < 0 ? 0 : (current + 1) % count;
+        case "ArrowUp": return current < 0 ? count - 1 : (current - 1 + count) % count;
+        case "Home": return 0;
+        case "End": return count - 1;
+        default: return null;
+    }
+}
+// The first item after the current one whose label starts with the typed text, or null when none does.
+export function item_starting_with(labels, typed, current) {
+    const wanted = typed.toLocaleLowerCase();
+    // A repeated first letter steps on through the items that start with it.
+    const repeated = wanted.length > 1 && [...wanted].every((letter) => letter === wanted[0]);
+    const prefix = repeated ? wanted[0] : wanted;
+    const start = repeated || wanted.length === 1 ? current + 1 : Math.max(current, 0);
+    for (let offset = 0; offset < labels.length; offset += 1) {
+        const index = (start + offset) % labels.length;
+        if (labels[index].trim().toLocaleLowerCase().startsWith(prefix))
+            return index;
+    }
+    return null;
+}

package/dist/web/prefs.d.ts

@@ -0,0 +1,12 @@
+export interface StorageLike {
+    getItem(key: string): string | null;
+    setItem(key: string, value: string): void;
+    removeItem(key: string): void;
+}
+export type Validator<Value> = (value: unknown) => value is Value;
+export declare function browser_storage(): StorageLike | undefined;
+export declare function read_pref<Value>(storage: StorageLike | undefined, key: string, initial: Value, validate?: Validator<Value>): Value;
+export declare function write_pref(storage: StorageLike | undefined, key: string, value: unknown): void;
+export declare function one_of<Value extends string>(...allowed: readonly Value[]): Validator<Value>;
+export declare function is_boolean(value: unknown): value is boolean;
+export declare function is_number_in(min: number, max: number): Validator<number>;

package/dist/web/prefs.js

@@ -0,0 +1,62 @@
+// Remembered view settings: a stored value that is corrupt, from an older version or of the wrong shape reads as the default.
+// This browser's localStorage, or nothing where there is none or it may not be touched.
+export function browser_storage() {
+    try {
+        return typeof localStorage === "undefined" ? undefined : localStorage;
+    }
+    catch {
+        return undefined;
+    }
+}
+// ── Reading and writing ──────────────────────────────────────────────────────
+// The stored value, or the initial one whenever the stored one cannot be used.
+export function read_pref(storage, key, initial, validate) {
+    if (!storage)
+        return initial;
+    let raw;
+    try {
+        raw = storage.getItem(key);
+    }
+    catch {
+        return initial;
+    }
+    if (raw === null)
+        return initial;
+    let parsed;
+    try {
+        parsed = JSON.parse(raw);
+    }
+    catch {
+        return initial;
+    }
+    if (validate)
+        return validate(parsed) ? parsed : initial;
+    // Without a validator the stored value must at least have the initial value's shape.
+    if (parsed === null || initial === null)
+        return parsed ?? initial;
+    if (Array.isArray(initial) !== Array.isArray(parsed))
+        return initial;
+    if (typeof parsed !== typeof initial)
+        return initial;
+    return parsed;
+}
+export function write_pref(storage, key, value) {
+    if (!storage)
+        return;
+    try {
+        storage.setItem(key, JSON.stringify(value));
+    }
+    catch {
+        // A full or disabled storage keeps the setting until the page closes.
+    }
+}
+// ── Validators ───────────────────────────────────────────────────────────────
+export function one_of(...allowed) {
+    return (value) => typeof value === "string" && allowed.includes(value);
+}
+export function is_boolean(value) {
+    return typeof value === "boolean";
+}
+export function is_number_in(min, max) {
+    return (value) => typeof value === "number" && Number.isFinite(value) && value >= min && value <= max;
+}

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

@@ -0,0 +1,35 @@
+import type { ReactNode } from "react";
+export type Tone = "good" | "warn" | "bad" | "info" | "none";
+export declare function Badge({ tone, title, children }: {
+    tone?: Tone;
+    title?: string;
+    children: ReactNode;
+}): import("react").JSX.Element;
+export declare function StateBadge<State extends string>({ labels, state, title }: {
+    labels: Record<State, [text: string, tone: Tone]>;
+    state: State;
+    title?: string;
+}): import("react").JSX.Element;
+export declare function Chip({ title, on_click, class_name, children }: {
+    title?: string;
+    on_click?: () => void;
+    class_name?: string;
+    children: ReactNode;
+}): import("react").JSX.Element;
+export declare function Chips({ inline, children }: {
+    inline?: boolean;
+    children: ReactNode;
+}): import("react").JSX.Element;
+export declare function Verdict({ ok, label }: {
+    ok: boolean | null | undefined;
+    label: string;
+}): import("react").JSX.Element;
+interface StatusPillProps {
+    tone?: Tone;
+    busy?: boolean;
+    label: ReactNode;
+    action?: ReactNode;
+    title?: string;
+}
+export declare function StatusPill({ tone, busy, label, action, title }: StatusPillProps): import("react").JSX.Element;
+export {};

package/dist/web/react/badges.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// ── Badges ───────────────────────────────────────────────────────────────────
+export function Badge({ tone = "none", title, children }) {
+    return _jsx("span", { className: `badge tone-${tone}`, title: title, children: children });
+}
+// A badge for one of a fixed set of states, each named by its text and tone.
+export function StateBadge({ labels, state, title }) {
+    const [text, tone] = labels[state];
+    return _jsx(Badge, { tone: tone, title: title, children: text });
+}
+// ── Chips ────────────────────────────────────────────────────────────────────
+// A chip, or a button chip that picks what it names when it has on_click, such as a tag to filter by.
+export function Chip({ title, on_click, class_name, children }) {
+    const chip_class = class_name ? `chip ${class_name}` : "chip";
+    return on_click
+        ? _jsx("button", { type: "button", className: chip_class, title: title, onClick: on_click, children: children })
+        : _jsx("span", { className: chip_class, title: title, children: children });
+}
+// A row of chips or badges, with less space between them when they sit inside a line of text.
+export function Chips({ inline = false, children }) {
+    return _jsx("span", { className: inline ? "chips inline-chips" : "chips", children: children });
+}
+// ── Verdicts ─────────────────────────────────────────────────────────────────
+// A pass, fail or not-yet verdict, such as "checks: pass".
+export function Verdict({ ok, label }) {
+    const known = ok !== null && ok !== undefined;
+    return _jsxs("span", { className: `verdict tone-${known ? (ok ? "good" : "bad") : "none"}`, children: [label, ": ", known ? (ok ? "pass" : "fail") : "no verdict"] });
+}
+// A state dot and its text, such as "Idle" or "Researching", with an optional button, for a top bar.
+export function StatusPill({ tone = "none", busy = false, label, action, title }) {
+    return (_jsxs("span", { className: "status-pill", title: title, children: [_jsx("span", { className: busy ? `status-dot tone-${tone} busy` : `status-dot tone-${tone}`, "aria-hidden": "true" }), _jsx("span", { className: "status-text small", children: label }), action] }));
+}

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

@@ -0,0 +1,86 @@
+import { type InputHTMLAttributes, type ReactNode } from "react";
+import { type TreeItem } from "../tree.ts";
+interface SegmentedProps<Value extends string> {
+    label: string;
+    choices: {
+        value: Value;
+        label: string;
+    }[];
+    value: Value;
+    on_change: (value: Value) => void;
+    class_name?: string;
+}
+export declare function Segmented<Value extends string>({ label, choices, value, on_change, class_name }: SegmentedProps<Value>): import("react").JSX.Element;
+export declare function ButtonGroup({ label, children }: {
+    label: string;
+    children: ReactNode;
+}): import("react").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("react").JSX.Element;
+interface SearchBoxProps {
+    label: string;
+    value: string;
+    on_input?: (value: string) => void;
+    on_submit?: (value: string) => void;
+    on_paste?: (text: string) => boolean;
+    submit_label?: string;
+    clear_on_submit?: boolean;
+    auto_focus?: boolean;
+}
+export declare function SearchBox({ label, value, on_input, on_submit, on_paste, submit_label, clear_on_submit, auto_focus }: SearchBoxProps): import("react").JSX.Element;
+interface SelectProps<Value extends string | number> {
+    label: string;
+    options: [value: Value, text: string][];
+    value: Value;
+    on_change: (value: Value) => void;
+    bare?: boolean;
+}
+export declare function Select<Value extends string | number>({ label, options, value, on_change, bare }: SelectProps<Value>): import("react").JSX.Element;
+type CommitInputProps = Omit<InputHTMLAttributes<HTMLInputElement>, "value" | "defaultValue" | "onChange"> & {
+    value: string | number;
+    on_commit: (event: {
+        currentTarget: HTMLInputElement;
+    }) => void;
+};
+export declare function CommitInput({ value, on_commit, onBlur, onKeyDown, ...rest }: CommitInputProps): import("react").JSX.Element;
+interface DateTimeFieldProps {
+    label: string;
+    value: string | null;
+    on_change: (value: string | null) => void;
+    allow_time?: boolean;
+}
+export declare function DateTimeField({ label, value, on_change, allow_time }: DateTimeFieldProps): import("react").JSX.Element;
+interface PathInputProps {
+    label: string;
+    value: string;
+    on_change: (value: string) => void;
+    pick: (current: string) => Promise<string | null>;
+    placeholder?: string;
+    disabled?: boolean;
+    browse_label?: string;
+}
+export declare function PathInput({ label, value, on_change, pick, placeholder, disabled, browse_label }: PathInputProps): import("react").JSX.Element;
+interface ColorPickerProps {
+    label: string;
+    value: string | null;
+    swatches: string[];
+    on_change: (color: string | null) => void;
+    allow_none?: boolean;
+}
+export declare function ColorPicker({ label, value, swatches, on_change, allow_none }: ColorPickerProps): import("react").JSX.Element;
+interface TreeSelectProps<Item extends TreeItem> {
+    label: string;
+    items: Item[];
+    name_of: (item: Item) => string;
+    value: string;
+    blank_label: string;
+    disabled_ids?: readonly string[];
+    on_change: (id: string) => void;
+}
+export declare function TreeSelect<Item extends TreeItem>({ label, items, name_of, value, blank_label, disabled_ids, on_change }: TreeSelectProps<Item>): import("react").JSX.Element;
+export {};

package/dist/web/react/controls.js

@@ -0,0 +1,154 @@
+import { createElement as _createElement } from "react";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// React controls drawn like the page's own: segmented choices, switches, search fields, selects, and date, colour and tree pickers.
+import { createElement, useEffect, useRef, useState } from "react";
+import { in_tree_order, path_names } from "../tree.js";
+// One of a few choices side by side; the chosen one takes the accent.
+export function Segmented({ label, choices, value, on_change, class_name }) {
+    return (_jsx("div", { className: class_name ? `segmented ${class_name}` : "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))) }));
+}
+// Buttons joined into one control, such as zoom out, zoom in and fit.
+export function ButtonGroup({ label, children }) {
+    return _jsx("div", { className: "segmented", role: "group", "aria-label": label, children: children });
+}
+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 and submits it on Enter; Escape clears it; the field keeps its own text, so a redraw never wipes typing, and shows a value changed from outside, such as one cleared.
+export function SearchBox({ label, value, on_input, on_submit, on_paste, submit_label, clear_on_submit = false, auto_focus = false }) {
+    const field = useRef(null);
+    const timer = useRef(undefined);
+    const handed_on = useRef(value);
+    const submitted = useRef(value);
+    useEffect(() => () => clearTimeout(timer.current), []);
+    useEffect(() => {
+        if (value === handed_on.current || !field.current)
+            return;
+        clearTimeout(timer.current);
+        handed_on.current = value;
+        submitted.current = value;
+        field.current.value = value;
+    }, [value]);
+    function hand_on(text) {
+        clearTimeout(timer.current);
+        if (text === handed_on.current)
+            return;
+        handed_on.current = text;
+        on_input?.(text);
+    }
+    function submit() {
+        const text = field.current?.value ?? "";
+        hand_on(text);
+        submitted.current = clear_on_submit ? "" : text;
+        on_submit?.(text);
+        if (clear_on_submit && field.current) {
+            field.current.value = "";
+            handed_on.current = "";
+        }
+    }
+    function clear() {
+        if (!field.current)
+            return;
+        field.current.value = "";
+        hand_on("");
+        if (submitted.current !== "") {
+            submitted.current = "";
+            on_submit?.("");
+        }
+    }
+    function typed(event) {
+        clearTimeout(timer.current);
+        const text = event.currentTarget.value;
+        // An emptied field goes straight back to everything, taking back what was submitted.
+        if (text === "")
+            return clear();
+        if (!on_input)
+            return;
+        timer.current = window.setTimeout(() => hand_on(text), 200);
+    }
+    function keyed(event) {
+        if (event.key === "Enter") {
+            event.preventDefault();
+            submit();
+        }
+        else if (event.key === "Escape" && event.currentTarget.value !== "") {
+            event.preventDefault();
+            clear();
+        }
+    }
+    function pasted(event) {
+        if (on_paste?.(event.clipboardData.getData("text")))
+            event.preventDefault();
+    }
+    const input = (_jsx("input", { ref: field, type: "search", className: "filter", placeholder: label, "aria-label": label, defaultValue: value, autoFocus: auto_focus, onChange: typed, onKeyDown: keyed, onPaste: on_paste && pasted }));
+    if (!submit_label)
+        return input;
+    return (_jsxs("form", { className: "search-box", role: "search", onSubmit: (event) => { event.preventDefault(); submit(); }, children: [input, _jsx("button", { type: "submit", className: "accent solid", children: submit_label })] }));
+}
+export function Select({ label, options, value, on_change, bare = false }) {
+    const change = (event) => {
+        const text = event.currentTarget.value;
+        on_change((options.find(([option]) => String(option) === text)?.[0] ?? text));
+    };
+    const select = (_jsx("select", { value: value, "aria-label": bare ? label : undefined, onChange: change, children: options.map(([option, text]) => _jsx("option", { value: option, children: text }, option)) }));
+    if (bare)
+        return select;
+    return (_jsxs("label", { className: "field", children: [_jsx("span", { className: "field-label", children: label }), select] }));
+}
+// A field that saves once it is left or Enter is pressed, as a native change event does, and shows the saved value again whenever that changes.
+export function CommitInput({ value, on_commit, onBlur, onKeyDown, ...rest }) {
+    return (_createElement("input", { ...rest, key: String(value), defaultValue: value, onBlur: (event) => { onBlur?.(event); on_commit(event); }, onKeyDown: (event) => { onKeyDown?.(event); if (event.key === "Enter")
+            event.currentTarget.blur(); } }));
+}
+// A local date with an optional time and a clear button; clearing the date clears the time.
+export function DateTimeField({ label, value, on_change, allow_time = true }) {
+    const [day = "", time = ""] = (value ?? "").split("T");
+    const join = (next_day, next_time) => on_change(next_day ? (next_time && allow_time ? `${next_day}T${next_time}` : next_day) : null);
+    return (_jsxs("div", { className: "field date-time-field", children: [_jsx("span", { className: "field-label", children: label }), _jsxs("div", { className: "date-time-inputs", children: [_jsx("input", { type: "date", "aria-label": `${label} date`, value: day, onChange: (event) => join(event.currentTarget.value, time) }), day && allow_time && _jsx("input", { type: "time", "aria-label": `${label} time`, value: time, onChange: (event) => join(day, event.currentTarget.value) }), day && _jsx("button", { type: "button", className: "icon remove", "aria-label": `Clear ${label.toLowerCase()} date`, onClick: () => on_change(null), children: "\u00D7" })] })] }));
+}
+// A path typed by hand or picked through a Browse button.
+export function PathInput({ label, value, on_change, pick, placeholder, disabled = false, browse_label = "Browse…" }) {
+    const [picking, set_picking] = useState(false);
+    async function browse() {
+        set_picking(true);
+        try {
+            const chosen = await pick(value);
+            if (chosen !== null)
+                on_change(chosen);
+        }
+        finally {
+            set_picking(false);
+        }
+    }
+    return (_jsxs("span", { className: "path-row", children: [_jsx("input", { type: "text", "aria-label": label, spellCheck: false, placeholder: placeholder, disabled: disabled, value: value, onChange: (event) => on_change(event.currentTarget.value) }), _jsx("button", { type: "button", disabled: disabled || picking, onClick: () => void browse(), children: browse_label })] }));
+}
+// Swatches, a None choice, and the system colour chooser for any other colour.
+export function ColorPicker({ label, value, swatches, on_change, allow_none = true }) {
+    const is_swatch = value !== null && swatches.some((swatch) => swatch.toLowerCase() === value.toLowerCase());
+    const custom = value !== null && !is_swatch;
+    return (_jsxs("div", { className: "color-picker", role: "radiogroup", "aria-label": label, children: [allow_none && _jsx("button", { type: "button", role: "radio", className: "color-swatch none", "aria-checked": value === null, "aria-label": "No colour", onClick: () => on_change(null) }), swatches.map((swatch) => (_jsx("button", { type: "button", role: "radio", className: "color-swatch", style: { "--swatch-color": swatch }, "aria-checked": value !== null && swatch.toLowerCase() === value.toLowerCase(), "aria-label": swatch, title: swatch, onClick: () => on_change(swatch) }, swatch))), _jsx("input", { type: "color", className: custom ? "color-custom chosen" : "color-custom", "aria-label": "Other colour", value: value ?? "#888888", onChange: (event) => on_change(event.currentTarget.value) })] }));
+}
+// A select listing a tree indented, each choice's whole path on hover and in the closed select.
+export function TreeSelect({ label, items, name_of, value, blank_label, disabled_ids = [], on_change }) {
+    const depth_of = (item) => path_names(item, items, name_of).length - 1;
+    const chosen = items.find((item) => item.id === value);
+    // The open list indents each name by its depth, and the closed face shows the picked choice's whole path.
+    return (_jsxs("select", { className: "tree-select", "aria-label": label, value: value, title: chosen ? path_names(chosen, items, name_of).join(" › ") : undefined, onChange: (event) => on_change(event.currentTarget.value), children: [_jsx("button", { type: "button", children: createElement("selectedcontent") }), _jsx("option", { value: "", children: blank_label }), in_tree_order(items).map((item) => (_jsxs("option", { value: item.id, disabled: disabled_ids.includes(item.id), title: path_names(item, items, name_of).join(" › "), style: { "--depth": depth_of(item) }, children: [_jsx("span", { className: "tree-option-name", children: name_of(item) }), _jsx("span", { className: "tree-option-path", children: path_names(item, items, name_of).join(" › ") })] }, item.id)))] }));
+}

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

@@ -0,0 +1,45 @@
+import { type FormEvent, type ReactNode } from "react";
+export interface DialogForm {
+    on_submit: (event: FormEvent<HTMLFormElement>) => void;
+    submit_label?: ReactNode;
+    submit_disabled?: boolean;
+    danger?: boolean;
+}
+interface DialogProps {
+    title: ReactNode;
+    subtitle?: ReactNode;
+    actions?: ReactNode;
+    on_close: () => void;
+    buttons?: ReactNode;
+    form?: DialogForm;
+    wide?: boolean;
+    full?: boolean;
+    class_name?: string;
+    children: ReactNode;
+}
+export declare function Dialog({ title, subtitle, actions, on_close, buttons, form, wide, full, class_name, children }: DialogProps): import("react").JSX.Element;
+export interface ConfirmOptions {
+    title: string;
+    message: ReactNode;
+    confirm_label: string;
+    busy_label?: string;
+    danger?: boolean;
+    wide?: boolean;
+    type_to_confirm?: string;
+    run: () => Promise<void>;
+}
+export declare function ConfirmDialog({ options, on_close }: {
+    options: ConfirmOptions;
+    on_close: () => void;
+}): import("react").JSX.Element;
+export declare function TextDialog({ title, text, on_close }: {
+    title: string;
+    text: string;
+    on_close: () => void;
+}): import("react").JSX.Element;
+type Builder = (close: () => void) => ReactNode;
+export declare function open_dialog(build: Builder): () => void;
+export declare function confirm_dialog(options: ConfirmOptions): void;
+export declare function text_dialog(title: string, text: string): void;
+export declare function Dialogs(): import("react").JSX.Element;
+export {};

package/dist/web/react/dialog.js

@@ -0,0 +1,82 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Modal dialogs on the native one: any body and buttons, one that asks before an action, and one that shows a long text.
+import { Fragment, useEffect, useId, useRef, useState } from "react";
+import { toast } from "./toasts.js";
+// Shown while it is rendered: the page behind it is inert, focus stays inside, Escape calls on_close, and focus goes back to the opener after.
+export function Dialog({ title, subtitle, actions, on_close, buttons, form, wide = false, full = 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;
+        const opener = document.activeElement;
+        element.showModal();
+        return () => {
+            element.close();
+            // The dialog is already gone from the page here, so the browser cannot hand focus back by itself.
+            if (opener?.isConnected && opener !== document.body)
+                opener.focus();
+        };
+    }, []);
+    const heading = _jsx("h2", { id: title_id, children: title });
+    const submit = form?.submit_label !== undefined && (_jsx("button", { type: "submit", className: form.danger ? "danger solid" : "accent solid", disabled: form.submit_disabled, children: form.submit_label }));
+    const foot = (buttons || submit) && _jsxs("div", { className: "dialog-buttons", children: [buttons, submit] });
+    const body = _jsx("div", { className: "dialog-body", children: children });
+    return (_jsxs("dialog", { ref: dialog, className: ["dialog", wide && "wide", full && "full", 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: [subtitle === undefined && actions === undefined ? heading : (_jsxs("header", { className: "dialog-header", children: [_jsxs("div", { className: "dialog-heading", children: [heading, subtitle !== undefined && _jsx("p", { className: "dialog-subtitle", children: subtitle })] }), actions !== undefined && _jsx("div", { className: "dialog-actions", children: actions })] })), form ? (_jsxs("form", { className: "dialog-form", onSubmit: (event) => { event.preventDefault(); form.on_submit(event); }, children: [body, foot] })) : _jsxs(_Fragment, { children: [body, foot] })] }));
+}
+export function ConfirmDialog({ options, on_close }) {
+    const [typed, set_typed] = useState("");
+    const [busy, set_busy] = useState(false);
+    const ready = options.type_to_confirm === undefined || typed === options.type_to_confirm;
+    async function confirm() {
+        set_busy(true);
+        try {
+            await options.run();
+        }
+        finally {
+            on_close();
+        }
+    }
+    return (_jsxs(Dialog, { title: options.title, on_close: () => { if (!busy)
+            on_close(); }, wide: options.wide, buttons: _jsxs(_Fragment, { children: [_jsx("button", { disabled: busy, onClick: on_close, children: "Cancel" }), _jsx("button", { className: options.danger ? "danger solid" : "accent solid", disabled: !ready || busy, onClick: confirm, autoFocus: options.type_to_confirm === undefined, children: busy ? options.busy_label ?? "Working…" : options.confirm_label })] }), children: [typeof options.message === "string" ? _jsx("p", { children: options.message }) : options.message, options.type_to_confirm !== undefined && (_jsxs("label", { className: "type-confirm", children: [_jsxs("span", { children: ["Type ", _jsx("strong", { children: options.type_to_confirm }), " to confirm:"] }), _jsx("input", { type: "text", className: "filter", autoComplete: "off", autoFocus: true, "aria-label": `Type ${options.type_to_confirm} to confirm`, value: typed, onChange: (event) => set_typed(event.currentTarget.value) })] }))] }));
+}
+// Shows a long text result, such as a preview, with a button to copy it.
+export function TextDialog({ title, text, on_close }) {
+    return (_jsx(Dialog, { title: title, on_close: on_close, wide: true, buttons: _jsxs(_Fragment, { children: [_jsx("button", { onClick: () => void navigator.clipboard?.writeText(text).then(() => toast("Copied.")), children: "Copy" }), _jsx("button", { className: "accent solid", onClick: on_close, children: "Close" })] }), children: _jsx("pre", { className: "output", children: text }) }));
+}
+let open = [];
+let next_id = 1;
+const listeners = new Set();
+function publish(dialogs) {
+    open = dialogs;
+    for (const listener of listeners)
+        listener(open);
+}
+// Opens what the builder makes, such as a Dialog, from an event handler; returns the function that closes it.
+export function open_dialog(build) {
+    const id = next_id++;
+    const close = () => publish(open.filter((dialog) => dialog.id !== id));
+    publish([...open, { id, build }]);
+    return close;
+}
+export function confirm_dialog(options) {
+    open_dialog((close) => _jsx(ConfirmDialog, { options: options, on_close: close }));
+}
+export function text_dialog(title, text) {
+    open_dialog((close) => _jsx(TextDialog, { title: title, text: text, on_close: close }));
+}
+// Where dialogs opened from anywhere are drawn; the Shell holds one.
+export function Dialogs() {
+    const [dialogs, set_dialogs] = useState(open);
+    useEffect(() => {
+        listeners.add(set_dialogs);
+        return () => void listeners.delete(set_dialogs);
+    }, []);
+    return _jsx(_Fragment, { children: dialogs.map((dialog) => _jsx(Fragment, { children: dialog.build(() => publish(open.filter((other) => other.id !== dialog.id))) }, dialog.id)) });
+}