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

package/dist/log.js

@@ -0,0 +1,79 @@
+// Logging by scope and level, such as "warn,play:debug", where a mistake in the setting never silences logging.
+const level_order = { critical: 0, error: 1, warn: 2, info: 3, debug: 4 };
+export const levels = Object.keys(level_order);
+const level_aliases = {
+    crit: "critical", critical: "critical",
+    err: "error", error: "error",
+    warn: "warn", warning: "warn",
+    info: "info",
+    debug: "debug", verbose: "debug", trace: "debug",
+};
+export const default_level = "info";
+// ── Parsing ──────────────────────────────────────────────────────────────────
+// A bare level sets the default and "scope:level" one scope; entries it cannot read are skipped.
+export function parse_level_spec(spec, fallback = default_level) {
+    const parsed = { default: fallback, scopes: {} };
+    if (!spec)
+        return parsed;
+    for (const raw_part of spec.split(",")) {
+        const part = raw_part.trim().toLowerCase();
+        if (part === "")
+            continue;
+        // Scopes hold colons of their own, so the level follows the last one.
+        const colon = part.lastIndexOf(":");
+        if (colon === -1) {
+            const level = level_aliases[part];
+            if (level)
+                parsed.default = level;
+            continue;
+        }
+        const scope = part.slice(0, colon).trim();
+        const level = level_aliases[part.slice(colon + 1).trim()];
+        if (!level || scope === "")
+            continue;
+        if (scope === "*")
+            parsed.default = level;
+        else
+            parsed.scopes[scope] = level;
+    }
+    return parsed;
+}
+export function level_for(spec, scope) {
+    return spec.scopes[scope] ?? spec.default;
+}
+export function is_enabled(spec, scope, level) {
+    return level_order[level] <= level_order[level_for(spec, scope)];
+}
+const two_digits = (count) => String(count).padStart(2, "0");
+// A line in fixed columns, such as "10:33:35.123 WARN     play      message {"detail":1}".
+export function format_record(record) {
+    const date = new Date(record.at);
+    const time = `${two_digits(date.getHours())}:${two_digits(date.getMinutes())}:${two_digits(date.getSeconds())}.${String(date.getMilliseconds()).padStart(3, "0")}`;
+    let line = `${time} ${record.level.toUpperCase().padEnd(8)} ${record.scope.padEnd(9)} ${record.message}`;
+    if (record.data !== undefined) {
+        try {
+            line += ` ${JSON.stringify(record.data)}`;
+        }
+        catch {
+            line += " [unserializable]";
+        }
+    }
+    return line;
+}
+const resolve_spec = (source) => typeof source === "function" ? source() : source;
+export function create_logger(scope, spec, sink) {
+    const emit = (level, message, data) => {
+        if (!is_enabled(resolve_spec(spec), scope, level))
+            return;
+        sink({ at: Date.now(), level, scope, message, data });
+    };
+    return {
+        critical: (message, data) => emit("critical", message, data),
+        error: (message, data) => emit("error", message, data),
+        warn: (message, data) => emit("warn", message, data),
+        info: (message, data) => emit("info", message, data),
+        debug: (message, data) => emit("debug", message, data),
+        enabled: (level) => is_enabled(resolve_spec(spec), scope, level),
+        child: (child_scope) => create_logger(`${scope}:${child_scope}`, spec, sink),
+    };
+}

package/dist/server/backup_files.d.ts

@@ -0,0 +1,3 @@
+import type { BackupNaming, BackupStore } from "../backups.ts";
+export declare function backup_path(folder: string, naming: BackupNaming, name: string): string;
+export declare function file_backup_store(folder: () => string, naming: BackupNaming, copy_to: (path: string) => void): BackupStore;

package/dist/server/backup_files.js

@@ -0,0 +1,25 @@
+// Backups kept as files in a folder on disk, for an app's main process or server.
+import { mkdirSync, readdirSync, rmSync, statSync } from "node:fs";
+import { join } from "node:path";
+// The path of a backup in the folder, refusing any name the naming did not write.
+export function backup_path(folder, naming, name) {
+    if (!naming.pattern.test(name))
+        throw new Error(`not a backup name: ${name}`);
+    return join(folder, name);
+}
+// A folder of backup files, made when first used; copy_to writes the app's data to the path it is given, such as through SQLite's own backup.
+export function file_backup_store(folder, naming, copy_to) {
+    const path_of = (name) => backup_path(folder(), naming, name);
+    return {
+        list: () => {
+            mkdirSync(folder(), { recursive: true });
+            return readdirSync(folder()).filter((name) => naming.pattern.test(name)).map((name) => ({ name, size_bytes: statSync(path_of(name)).size }));
+        },
+        take: (name) => {
+            mkdirSync(folder(), { recursive: true });
+            copy_to(path_of(name));
+            return statSync(path_of(name)).size;
+        },
+        remove: (name) => rmSync(path_of(name)),
+    };
+}

package/dist/web/drag.d.ts

@@ -0,0 +1,3 @@
+export declare function set_drag_badge(event: {
+    dataTransfer: DataTransfer | null;
+}, label: string, class_name?: string): void;

package/dist/web/drag.js

@@ -0,0 +1,13 @@
+// What a drag shows under the pointer.
+// Shows a small badge such as "3 tasks" under the pointer as the drag image, in place of a picture of the grabbed row.
+export function set_drag_badge(event, label, class_name = "drag-badge") {
+    if (!event.dataTransfer)
+        return;
+    const badge = document.createElement("div");
+    badge.className = class_name;
+    badge.textContent = label;
+    document.body.append(badge);
+    event.dataTransfer.setDragImage(badge, -12, -12);
+    // The browser takes its picture of the badge during this event, so it can go once the event is over.
+    setTimeout(() => badge.remove(), 0);
+}

package/dist/web/format.d.ts

@@ -8,3 +8,4 @@ export declare function size(count: number | null | undefined): string;
 export declare function size_change(count: number | null | undefined): string;
 export declare function count_change(value: number | null | undefined): string;
 export declare function plural(count: number, word: string): string;
+export declare function compact_count(count: number): string;

package/dist/web/format.js

@@ -75,3 +75,8 @@ export function count_change(value) {
 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/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/controls.d.ts

@@ -1,4 +1,5 @@
-import { type ReactNode } from "react";
+import { type InputHTMLAttributes, type ReactNode } from "react";
+import { type TreeItem } from "../tree.ts";
 interface SegmentedProps<Value extends string> {
     label: string;
     choices: {
@@ -25,13 +26,47 @@ interface SearchBoxProps {
     label: string;
     value: string;
     on_input: (value: string) => void;
+    auto_focus?: boolean;
 }
-export declare function SearchBox({ label, value, on_input }: SearchBoxProps): import("react").JSX.Element;
-interface SelectProps<Value extends string> {
+export declare function SearchBox({ label, value, on_input, 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>({ label, options, value, on_change }: SelectProps<Value>): import("react").JSX.Element;
+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 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

@@ -1,6 +1,8 @@
+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 and search fields.
+// React controls drawn like the page's own: segmented choices, switches, search fields, selects, and date, colour and tree pickers.
 import { 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))) }));
@@ -29,16 +31,58 @@ export function Switch({ label, checked, on_change, disabled = 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; the field keeps its own text, so a redraw never wipes typing.
-export function SearchBox({ label, value, on_input }) {
+// A search field that hands on what was typed once typing pauses; 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, auto_focus = false }) {
+    const field = useRef(null);
     const timer = useRef(undefined);
+    const handed_on = useRef(value);
     useEffect(() => () => clearTimeout(timer.current), []);
-    return (_jsx("input", { type: "search", className: "filter", placeholder: label, "aria-label": label, defaultValue: value, onChange: (event) => {
+    useEffect(() => {
+        if (value === handed_on.current || !field.current)
+            return;
+        clearTimeout(timer.current);
+        handed_on.current = value;
+        field.current.value = value;
+    }, [value]);
+    return (_jsx("input", { ref: field, type: "search", className: "filter", placeholder: label, "aria-label": label, defaultValue: value, autoFocus: auto_focus, onChange: (event) => {
             clearTimeout(timer.current);
             const text = event.currentTarget.value;
-            timer.current = window.setTimeout(() => on_input(text), 200);
+            timer.current = window.setTimeout(() => {
+                handed_on.current = text;
+                on_input(text);
+            }, 200);
         } }));
 }
-export function Select({ label, options, value, on_change }) {
-    return (_jsxs("label", { className: "field", children: [_jsx("span", { className: "field-label", children: label }), _jsx("select", { value: value, onChange: (event) => on_change(event.currentTarget.value), children: options.map(([option, text]) => _jsx("option", { value: option, children: text }, option)) })] }));
+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", "aria-label": `Clear ${label.toLowerCase()} date`, onClick: () => on_change(null), children: "\u00D7" })] })] }));
+}
+// 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);
+    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("option", { value: "", children: blank_label }), in_tree_order(items).map((item) => (_jsx("option", { value: item.id, disabled: disabled_ids.includes(item.id), title: path_names(item, items, name_of).join(" › "), children: `${"\u2003".repeat(depth_of(item))}${name_of(item)}` }, item.id)))] }));
 }

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

@@ -1,13 +1,23 @@
-import { type ReactNode } from "react";
+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, on_close, buttons, wide, class_name, children }: DialogProps): import("react").JSX.Element;
+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;

package/dist/web/react/dialog.js

@@ -3,7 +3,7 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
 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, on_close, buttons, wide = false, class_name, children }) {
+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);
@@ -19,12 +19,16 @@ export function Dialog({ title, on_close, buttons, wide = false, class_name, chi
                 opener.focus();
         };
     }, []);
-    return (_jsxs("dialog", { ref: dialog, className: ["dialog", wide && "wide", class_name].filter(Boolean).join(" "), "aria-labelledby": title_id, onCancel: (event) => {
+    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: [_jsx("h2", { id: title_id, children: title }), _jsx("div", { className: "dialog-body", children: children }), buttons && _jsx("div", { className: "dialog-buttons", children: buttons })] }));
+        }, 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("");

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

@@ -1,10 +1,14 @@
-import { type ReactNode } from "react";
+import { type MouseEvent, type ReactNode } from "react";
 import type { Tone } from "./badges.tsx";
-export declare function Section({ title, tools, children }: {
+export { moved } from "../tables.ts";
+interface SectionProps {
     title: ReactNode;
     tools?: ReactNode;
+    class_name?: string;
+    on_context_menu?: (event: MouseEvent<HTMLElement>) => void;
     children?: ReactNode;
-}): import("react").JSX.Element;
+}
+export declare function Section({ title, tools, class_name, on_context_menu, children }: SectionProps): import("react").JSX.Element;
 export type Fact = [label: string, value: ReactNode, class_name?: string];
 export declare function Facts({ rows, layout }: {
     rows: (Fact | null | false)[];
@@ -67,14 +71,30 @@ export declare function Stepper({ label, previous, position, next }: {
     next: Step;
 }): import("react").JSX.Element;
 export declare function SettingsGroup({ heading, hint, children }: {
-    heading: string;
+    heading: ReactNode;
     hint?: ReactNode;
     children: ReactNode;
 }): import("react").JSX.Element;
-export declare function SettingRow({ label, hint, as_label, children }: {
+export declare function SettingRow({ label, hint, as_label, class_name, children }: {
     label: ReactNode;
     hint?: ReactNode;
     as_label?: boolean;
+    class_name?: string;
     children: ReactNode;
 }): import("react").JSX.Element;
-export {};
+interface RowActionsProps {
+    index: number;
+    count: number;
+    on_move: (from: number, to: number) => void;
+    on_remove?: () => void;
+    remove_label: string;
+}
+export declare function RowActions({ index, count, on_move, on_remove, remove_label }: RowActionsProps): import("react").JSX.Element;
+interface SelectionBarProps {
+    count: number;
+    total: number;
+    on_clear: () => void;
+    on_select_all: () => void;
+    children: ReactNode;
+}
+export declare function SelectionBar({ count, total, on_clear, on_select_all, children }: SelectionBarProps): import("react").JSX.Element;

package/dist/web/react/layout.js

@@ -1,9 +1,9 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-// The pieces a page is laid out with: panels, facts, tiles, cards, tabs, breadcrumbs, toolbars, steppers and settings rows.
+// The pieces a page is laid out with: panels, facts, tiles, cards, tabs, breadcrumbs, toolbars, steppers, settings rows and list row buttons.
 import { Fragment } from "react";
-// ── Panels ───────────────────────────────────────────────────────────────────
-export function Section({ title, tools, children }) {
-    return (_jsxs("section", { className: "panel", children: [_jsxs("div", { className: "panel-head", children: [_jsx("h2", { children: title }), tools && _jsx("div", { className: "panel-tools", children: tools })] }), children] }));
+export { moved } from "../tables.js";
+export function Section({ title, tools, class_name, on_context_menu, children }) {
+    return (_jsxs("section", { className: class_name ? `panel ${class_name}` : "panel", onContextMenu: on_context_menu, children: [_jsxs("div", { className: "panel-head", children: [_jsx("h2", { children: title }), tools && _jsx("div", { className: "panel-tools", children: tools })] }), children] }));
 }
 // 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" }) {
@@ -65,7 +65,16 @@ export function SettingsGroup({ heading, hint, children }) {
     return (_jsxs("section", { className: "settings-group", children: [_jsx("h3", { className: "settings-heading", children: heading }), hint && _jsx("p", { className: "setting-hint", children: hint }), children] }));
 }
 // A setting's name and hint on one side and its control on the other; as a label, clicking anywhere works its one control.
-export function SettingRow({ label, hint, as_label = false, children }) {
+export function SettingRow({ label, hint, as_label = false, class_name, children }) {
+    const row_class = class_name ? `setting-row ${class_name}` : "setting-row";
     const text = (_jsxs("span", { className: "setting-text", children: [_jsx("span", { className: "setting-label", children: label }), hint && _jsx("span", { className: "setting-hint", children: hint })] }));
-    return as_label ? _jsxs("label", { className: "setting-row", children: [text, children] }) : _jsxs("div", { className: "setting-row", children: [text, children] });
+    return as_label ? _jsxs("label", { className: row_class, children: [text, children] }) : _jsxs("div", { className: row_class, children: [text, children] });
+}
+// The up, down and remove buttons of a row in an ordered list.
+export function RowActions({ index, count, on_move, on_remove, remove_label }) {
+    return (_jsxs("span", { className: "row-actions", children: [_jsx("button", { type: "button", className: "icon", "aria-label": "Move up", disabled: index === 0, onClick: () => on_move(index, index - 1), children: "\u2191" }), _jsx("button", { type: "button", className: "icon", "aria-label": "Move down", disabled: index === count - 1, onClick: () => on_move(index, index + 1), children: "\u2193" }), on_remove && _jsx("button", { type: "button", className: "icon danger", "aria-label": remove_label, onClick: on_remove, children: "\u00D7" })] }));
+}
+// A bar floating at the foot of the page while rows are picked: how many, Select all, the actions, and a button that lets them go.
+export function SelectionBar({ count, total, on_clear, on_select_all, children }) {
+    return (_jsxs("div", { className: "selection-bar", role: "toolbar", "aria-label": "Selected rows", children: [_jsx("button", { type: "button", className: "icon", "aria-label": "Clear selection", title: "Clear selection (Esc)", onClick: on_clear, children: "\u2715" }), _jsxs("span", { className: "selection-count", children: [count, " selected"] }), count < total && _jsx("button", { type: "button", onClick: on_select_all, children: "Select all" }), _jsx("span", { className: "selection-divider", "aria-hidden": "true" }), children] }));
 }

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

@@ -0,0 +1,19 @@
+export interface PickableList {
+    id: string;
+    name: string;
+    count?: number;
+    holds: boolean;
+}
+export interface ListPickerOptions {
+    title: string;
+    load: () => Promise<PickableList[]>;
+    add: (id: string) => Promise<void>;
+    create: (name: string) => Promise<PickableList>;
+    new_label?: string;
+    empty_text?: string;
+}
+export declare function ListPicker({ options, on_close }: {
+    options: ListPickerOptions;
+    on_close: () => void;
+}): import("react").JSX.Element;
+export declare function pick_list_dialog(options: ListPickerOptions): () => void;

package/dist/web/react/list_picker.js

@@ -0,0 +1,50 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// A dialog that adds one thing to any of the app's lists, such as a video to playlists, and makes a new list for it.
+import { useState } from "react";
+import { Badge } from "./badges.js";
+import { Dialog, open_dialog } from "./dialog.js";
+import { Empty, Loaded, use_resource } from "./states.js";
+export function ListPicker({ options, on_close }) {
+    const lists = use_resource(options.load, []);
+    const [added, set_added] = useState([]);
+    const [new_name, set_new_name] = useState("");
+    const [busy, set_busy] = useState(false);
+    const new_label = options.new_label ?? "New list";
+    // Lists added to or made here show as holding the thing without loading them again.
+    const shown = (loaded) => {
+        const merged = loaded.map((list) => added.find((other) => other.id === list.id) ?? list);
+        return [...merged, ...added.filter((list) => !loaded.some((other) => other.id === list.id))];
+    };
+    async function add(list) {
+        set_busy(true);
+        try {
+            await options.add(list.id);
+            set_added((before) => [...before, { ...list, holds: true, count: list.count === undefined ? undefined : list.count + 1 }]);
+        }
+        finally {
+            set_busy(false);
+        }
+    }
+    async function create(event) {
+        event.preventDefault();
+        const name = new_name.trim();
+        if (!name)
+            return;
+        set_busy(true);
+        try {
+            const list = await options.create(name);
+            set_added((before) => [...before, { ...list, holds: true }]);
+            set_new_name("");
+        }
+        finally {
+            set_busy(false);
+        }
+    }
+    return (_jsxs(Dialog, { title: options.title, on_close: on_close, class_name: "list-picker", buttons: _jsx("button", { className: "accent solid", onClick: on_close, children: "Done" }), children: [_jsx(Loaded, { resource: lists, lines: 3, children: (loaded) => shown(loaded).length === 0
+                    ? _jsx(Empty, { title: options.empty_text ?? "No lists yet." })
+                    : (_jsx("ul", { className: "plain-list list-picker-lists", children: shown(loaded).map((list) => (_jsx("li", { children: _jsxs("button", { type: "button", className: "list-picker-item", "aria-pressed": list.holds, disabled: list.holds || busy, onClick: () => void add(list), children: [_jsx("span", { className: "list-picker-tick", "aria-hidden": "true", children: list.holds ? "✓" : "" }), _jsx("span", { className: "list-picker-name", children: list.name }), list.count !== undefined && _jsx(Badge, { children: list.count })] }) }, list.id))) })) }), _jsxs("form", { className: "list-picker-new", onSubmit: (event) => void create(event), children: [_jsx("input", { type: "text", placeholder: new_label, "aria-label": new_label, value: new_name, onChange: (event) => set_new_name(event.currentTarget.value) }), _jsx("button", { type: "submit", disabled: !new_name.trim() || busy, children: "Create" })] })] }));
+}
+// Opens the picker from anywhere, such as a card's menu; the Shell draws it.
+export function pick_list_dialog(options) {
+    return open_dialog((close) => _jsx(ListPicker, { options: options, on_close: close }));
+}

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

@@ -0,0 +1,24 @@
+import type { ReactNode } from "react";
+interface AvatarProps {
+    src?: string | null;
+    name: string;
+    size?: "small" | "medium" | "large";
+}
+export declare function Avatar({ src, name, size }: AvatarProps): import("react").JSX.Element;
+interface MediaTileProps {
+    title: ReactNode;
+    href: string;
+    image?: string | null;
+    corner?: ReactNode;
+    lines?: ReactNode[];
+    dimmed?: boolean;
+    actions?: ReactNode;
+    lead?: ReactNode;
+}
+export declare function MediaTile({ title, href, image, corner, lines, dimmed, actions, lead }: MediaTileProps): import("react").JSX.Element;
+export declare function MediaGrid({ label, rows, children }: {
+    label?: string;
+    rows?: boolean;
+    children: ReactNode;
+}): import("react").JSX.Element;
+export {};

package/dist/web/react/media.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// A round picture of a person or channel, or the first letter of its name when there is none.
+export function Avatar({ src, name, size = "medium" }) {
+    const avatar_class = `avatar avatar-${size}`;
+    if (src)
+        return _jsx("img", { className: avatar_class, src: src, alt: "", loading: "lazy" });
+    const first_letter = [...name.trim()][0]?.toLocaleUpperCase() ?? "?";
+    return _jsx("span", { className: `${avatar_class} avatar-initial`, "aria-hidden": "true", children: first_letter });
+}
+// One video, album or playlist: its picture, its title and a few lines about it.
+export function MediaTile({ title, href, image, corner, lines = [], dimmed = false, actions, lead }) {
+    const shown_lines = lines.filter((line) => line !== null && line !== undefined && line !== false && line !== "");
+    return (_jsxs("div", { role: "listitem", className: dimmed ? "media-tile dimmed" : "media-tile", children: [lead !== undefined && _jsx("span", { className: "media-lead", children: lead }), _jsxs("a", { className: "media-picture", href: href, tabIndex: -1, "aria-hidden": "true", children: [image ? _jsx("img", { src: image, alt: "", loading: "lazy" }) : _jsx("span", { className: "media-blank" }), corner && _jsx("span", { className: "media-corner", children: corner })] }), _jsxs("div", { className: "media-text", children: [_jsx("a", { className: "media-title", href: href, children: title }), shown_lines.map((line, index) => _jsx("div", { className: "media-line", children: line }, index))] }), actions && _jsx("div", { className: "media-actions", children: actions })] }));
+}
+// Tiles side by side filling the width, or one under another as rows with the picture on the left.
+export function MediaGrid({ label, rows = false, children }) {
+    return _jsx("div", { role: "list", "aria-label": label, className: rows ? "media-grid media-rows" : "media-grid", children: children });
+}

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

@@ -0,0 +1,10 @@
+import type { ReactNode } from "react";
+import { type MenuItem } from "./menus.tsx";
+interface MenuButtonProps {
+    label: string;
+    items: MenuItem[] | (() => MenuItem[]);
+    glyph?: ReactNode;
+    class_name?: string;
+}
+export declare function MenuButton({ label, items, glyph, class_name }: MenuButtonProps): import("react").JSX.Element;
+export {};