@x-tech-laboratories/x-libs 0.9.0 → 0.11.0

package/dist/web/react/markdown.js

@@ -0,0 +1,40 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+// Markdown drawn as safe HTML on marked and DOMPurify: raw HTML shows as text, only web links are clickable, and they open in a new tab.
+// marked matches the hand-written parser feature for feature (headings, lists, code, quotes, rules, emphasis, links) and adds tables and nested lists; DOMPurify drops anything a model might slip in.
+import DOMPurify from "dompurify";
+import { Marked } from "marked";
+import { useLayoutEffect, useMemo, useRef } from "react";
+import { cx } from "../dom.js";
+import { at_bottom } from "./following.js";
+const LINK_SCHEMES = ["http://", "https://"];
+const escape_html = (text) => text.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
+const renderer = {
+    // Raw HTML in the text shows as written.
+    html({ text }) {
+        return escape_html(text);
+    },
+    // Only web links become links; another scheme shows as its text and address.
+    link({ href, title, tokens }) {
+        const text = this.parser.parseInline(tokens);
+        if (!LINK_SCHEMES.some((scheme) => href.startsWith(scheme)))
+            return `${text} (${escape_html(href)})`;
+        const title_part = title ? ` title="${escape_html(title)}"` : "";
+        return `<a href="${escape_html(href)}"${title_part} target="_blank" rel="noreferrer">${text}</a>`;
+    },
+};
+const marked = new Marked({ gfm: true, breaks: true, renderer });
+// Markdown as sanitized HTML, ready for innerHTML.
+export function render_markdown(text) {
+    const html = marked.parse(text, { async: false });
+    return DOMPurify.sanitize(html, { USE_PROFILES: { html: true }, ADD_ATTR: ["target"] });
+}
+export function Markdown({ text, class_name, follow = false }) {
+    const box = useRef(null);
+    const html = useMemo(() => render_markdown(text), [text]);
+    const following = follow && (box.current === null || at_bottom(box.current));
+    useLayoutEffect(() => {
+        if (following && box.current !== null)
+            box.current.scrollTop = box.current.scrollHeight;
+    }, [html]);
+    return _jsx("div", { ref: box, className: cx("markdown", class_name), dangerouslySetInnerHTML: { __html: html } });
+}

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

@@ -0,0 +1,16 @@
+import type { ReactNode } from "react";
+import { type TabItem } from "./layout.tsx";
+export type { TabItem } from "./layout.tsx";
+interface PageViewProps<Section extends string> {
+    title: string;
+    subtitle?: ReactNode;
+    on_close: () => void;
+    actions?: ReactNode;
+    sections?: TabItem<Section>[];
+    section?: Section;
+    on_section?: (section: Section) => void;
+    close_label?: string;
+    class_name?: string;
+    children: ReactNode;
+}
+export declare function PageView<Section extends string>({ title, subtitle, on_close, actions, sections, section, on_section, close_label, class_name, children }: PageViewProps<Section>): import("react").JSX.Element;

package/dist/web/react/page_view.js

@@ -0,0 +1,6 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Dialog } from "./dialog.js";
+import { Tabs } from "./layout.js";
+export function PageView({ title, subtitle, on_close, actions, sections, section, on_section, close_label = "Close", class_name, children }) {
+    return (_jsxs(Dialog, { title: title, subtitle: subtitle, on_close: on_close, full: true, class_name: class_name ? `page-view ${class_name}` : "page-view", actions: _jsxs(_Fragment, { children: [actions, _jsx("button", { type: "button", onClick: on_close, title: `${close_label} (Esc)`, children: close_label })] }), children: [sections && section !== undefined && _jsx(Tabs, { label: `${title} sections`, items: sections, active: section, on_select: on_section }), children] }));
+}

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

@@ -0,0 +1,10 @@
+import type { ReactNode } from "react";
+interface ProgressBarProps {
+    value: number | null;
+    max?: number;
+    label: string;
+    detail?: ReactNode | true;
+    class_name?: string;
+}
+export declare function ProgressBar({ value, max, label, detail, class_name }: ProgressBarProps): import("react").JSX.Element;
+export {};

package/dist/web/react/progress.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cx } from "../dom.js";
+// The fill reads its width from --progress, as Halon's seek slider reads --range-progress.
+export function ProgressBar({ value, max = 100, label, detail, class_name }) {
+    const known = value !== null && max > 0;
+    const percent = known ? Math.max(0, Math.min(100, Math.round((value / max) * 100))) : 0;
+    const words = detail === true ? `${percent}%` : detail;
+    return (_jsxs("div", { className: cx("progress", class_name), children: [_jsx("div", { className: cx("progress-bar", !known && "indeterminate"), role: "progressbar", "aria-label": label, "aria-valuemin": 0, "aria-valuemax": max, "aria-valuenow": known ? value : undefined, style: { "--progress": `${percent}%` }, children: _jsx("div", { className: "progress-fill" }) }), words !== undefined && _jsx("span", { className: "progress-detail muted", children: words })] }));
+}

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

@@ -0,0 +1,8 @@
+interface RatingProps {
+    value: number | null;
+    max?: number;
+    label?: string;
+    on_change?: (value: number | null) => void;
+}
+export declare function Rating({ value, max, label, on_change }: RatingProps): import("react").JSX.Element;
+export {};

package/dist/web/react/rating.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cx } from "../dom.js";
+const plural_stars = (count) => `${count} star${count === 1 ? "" : "s"}`;
+// Arrow keys move one star, Home and End to the ends, and Delete or 0 clears the rating.
+export function Rating({ value, max = 5, label = "Rating", on_change }) {
+    const lit = value ?? 0;
+    const read_only = on_change === undefined;
+    function key_down(event) {
+        if (read_only)
+            return;
+        const next = event.key === "ArrowRight" || event.key === "ArrowUp" ? Math.min(max, lit + 1)
+            : event.key === "ArrowLeft" || event.key === "ArrowDown" ? Math.max(0, lit - 1)
+                : event.key === "Home" ? 0
+                    : event.key === "End" ? max
+                        : event.key === "Delete" || event.key === "Backspace" || event.key === "0" ? null
+                            : undefined;
+        if (next === undefined)
+            return;
+        event.preventDefault();
+        on_change(next);
+    }
+    return (_jsx("div", { className: cx("rating", read_only && "read-only"), role: "slider", tabIndex: read_only ? undefined : 0, "aria-label": label, "aria-readonly": read_only || undefined, "aria-valuemin": 0, "aria-valuemax": max, "aria-valuenow": lit, "aria-valuetext": value === null ? "Unrated" : plural_stars(value), onKeyDown: key_down, children: Array.from({ length: max }, (_, index) => index + 1).map((star) => (_jsx("button", { type: "button", className: cx("star", star <= lit && "on"), tabIndex: -1, disabled: read_only, "aria-label": plural_stars(star), onClick: () => on_change?.(star), children: "\u2605" }, star))) }));
+}

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

@@ -29,7 +29,8 @@ interface LoadedProps<Data> {
     resource: Resource<Data>;
     lines?: number;
     idle?: ReactNode;
+    empty?: ReactNode;
     children: (data: Data) => ReactNode;
 }
-export declare function Loaded<Data>({ resource, lines, idle, children }: LoadedProps<Data>): import("react").JSX.Element;
+export declare function Loaded<Data>({ resource, lines, idle, empty, children }: LoadedProps<Data>): import("react").JSX.Element;
 export {};

package/dist/web/react/states.js

@@ -1,6 +1,7 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // What a part of the page shows while it loads, when it has nothing, and when loading failed, and the hook that loads it.
 import { useCallback, useEffect, useRef, useState } from "react";
+import { describe_error } from "../errors.js";
 import { pass_login_needed } from "../states.js";
 // ── States ───────────────────────────────────────────────────────────────────
 export function Skeleton({ lines = 3 }) {
@@ -10,7 +11,7 @@ export function Empty({ title, hint }) {
     return (_jsxs("div", { className: "empty", children: [_jsx("p", { className: "empty-title", children: title }), hint && _jsx("p", { className: "muted", children: hint })] }));
 }
 export function Failure({ error, retry }) {
-    return (_jsxs("div", { className: "failure", role: "alert", children: [_jsxs("p", { children: ["Could not load this: ", error instanceof Error ? error.message : String(error)] }), _jsx("button", { onClick: retry, children: "Retry" })] }));
+    return (_jsxs("div", { className: "failure", role: "alert", children: [_jsxs("p", { children: ["Could not load this: ", describe_error(error)] }), _jsx("button", { onClick: retry, children: "Retry" })] }));
 }
 // Loads what the work fetches whenever the dependencies change, passing a lapsed login on to the page.
 export function use_resource(work, dependencies, options = {}) {
@@ -51,13 +52,13 @@ export function use_resource(work, dependencies, options = {}) {
     }, [options.watch, enabled]);
     return { ...state, loading: state.status === "loading", reload };
 }
-// Shows a skeleton while the resource first loads, an error with Retry if that fails, and what children build from it after.
-export function Loaded({ resource, lines, idle = null, children }) {
-    if (resource.data !== null)
-        return _jsx(_Fragment, { children: children(resource.data) });
+// Shows a skeleton while the resource first loads, an error with Retry if that fails, and what children build from it after, going by its status so a null result still shows.
+export function Loaded({ resource, lines, idle = null, empty, children }) {
+    if (resource.status === "loaded")
+        return _jsx(_Fragment, { children: resource.data === null && empty !== undefined ? empty : children(resource.data) });
     if (resource.status === "idle")
         return _jsx(_Fragment, { children: idle });
-    if (resource.error !== null)
+    if (resource.status === "failed")
         return _jsx(Failure, { error: resource.error, retry: () => void resource.reload() });
     return _jsx(Skeleton, { lines: lines });
 }

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

@@ -0,0 +1,4 @@
+import type { Store } from "../store.ts";
+export type { Store, StoreOptions } from "../store.ts";
+export { create_store } from "../store.ts";
+export declare function use_store<Value>(store: Store<Value>): Value;

package/dist/web/react/store.js

@@ -0,0 +1,7 @@
+// Reads a store's value and redraws the component when it changes.
+import { use_watch } from "./watch.js";
+export { create_store } from "../store.js";
+export function use_store(store) {
+    use_watch(store.watch);
+    return store.get();
+}

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

@@ -0,0 +1,23 @@
+import { type FocusEvent, type KeyboardEvent, type ReactNode } from "react";
+export interface FieldProps<Field extends HTMLElement> {
+    "aria-autocomplete": "list";
+    "aria-expanded": boolean;
+    "aria-controls": string;
+    "aria-activedescendant": string | undefined;
+    onKeyDown: (event: KeyboardEvent<Field>) => void;
+    onBlur: (event: FocusEvent<Field>) => void;
+}
+interface SuggestionsProps<Item, Field extends HTMLElement> {
+    value: string;
+    source: (value: string) => Item[] | Promise<Item[]>;
+    key_of: (item: Item) => string;
+    render: (item: Item) => ReactNode;
+    detail?: (item: Item) => ReactNode;
+    on_take: (item: Item) => void;
+    label: string;
+    on_key_down?: (event: KeyboardEvent<Field>) => void;
+    on_blur?: (event: FocusEvent<Field>) => void;
+    children: (field: FieldProps<Field>) => ReactNode;
+}
+export declare function Suggestions<Item, Field extends HTMLElement>({ value, source, key_of, render, detail, on_take, label, on_key_down, on_blur, children }: SuggestionsProps<Item, Field>): import("react").JSX.Element;
+export {};

package/dist/web/react/suggestions.js

@@ -0,0 +1,57 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Completions listed under a text field as it is typed into, such as slash commands: arrow keys choose, Tab or Enter take, Escape dismisses.
+import { useEffect, useId, useRef, useState } from "react";
+export function Suggestions({ value, source, key_of, render, detail, on_take, label, on_key_down, on_blur, children }) {
+    const list_id = useId();
+    const [items, set_items] = useState([]);
+    const [index, set_index] = useState(0);
+    const latest_value = useRef(value);
+    latest_value.current = value;
+    useEffect(() => {
+        let stale = false;
+        Promise.resolve(source(value)).then((found) => {
+            if (stale || latest_value.current !== value)
+                return;
+            set_items(found);
+            set_index(0);
+        });
+        return () => { stale = true; };
+    }, [value]);
+    function take(choice) {
+        const item = items[choice];
+        if (item === undefined)
+            return;
+        set_items([]);
+        on_take(item);
+    }
+    function key_down(event) {
+        if (items.length > 0 && !event.ctrlKey && !event.metaKey && !event.altKey) {
+            if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+                event.preventDefault();
+                set_index((index + (event.key === "ArrowDown" ? 1 : -1) + items.length) % items.length);
+                return;
+            }
+            if (event.key === "Tab" || event.key === "Enter") {
+                event.preventDefault();
+                take(index);
+                return;
+            }
+            if (event.key === "Escape") {
+                event.preventDefault();
+                set_items([]);
+                return;
+            }
+        }
+        on_key_down?.(event);
+    }
+    const option_id = (position) => `${list_id}-${position}`;
+    const field = {
+        "aria-autocomplete": "list",
+        "aria-expanded": items.length > 0,
+        "aria-controls": list_id,
+        "aria-activedescendant": items.length > 0 ? option_id(index) : undefined,
+        onKeyDown: key_down,
+        onBlur: (event) => { set_items([]); on_blur?.(event); },
+    };
+    return (_jsxs("div", { className: "suggest-wrap", children: [children(field), items.length > 0 && (_jsx("ul", { id: list_id, className: "suggestions menu", role: "listbox", "aria-label": label, children: items.map((item, position) => (_jsxs("li", { id: option_id(position), role: "option", className: "menu-item", "aria-selected": position === index, onMouseDown: (event) => { event.preventDefault(); take(position); }, children: [_jsx("span", { className: "suggestion-main", children: render(item) }), detail && _jsx("span", { className: "suggestion-detail muted small", children: detail(item) })] }, key_of(item)))) }))] }));
+}

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

@@ -37,6 +37,7 @@ interface DataTableProps<Row> {
     caption?: string;
     virtual?: TableVirtual;
     fill_last_column?: boolean;
+    wrap_class?: string;
     sorting?: Sorting | Sorting[];
     manual_sorting?: boolean;
     on_sort?: (sorting: Sorting) => void;

package/dist/web/react/table.js

@@ -4,6 +4,7 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
 // only where they show, and cards on phones.
 import { memo, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { getCoreRowModel, getExpandedRowModel, getSortedRowModel, useReactTable } from "@tanstack/react-table";
+import { cx } from "../dom.js";
 import { clamp_width, column_id, compare_values, move_column, ordered_columns, sort_after_click, sorting_list } from "../tables.js";
 import { placement_at } from "../tree.js";
 import { virtual_window } from "../virtual.js";
@@ -383,7 +384,7 @@ export function DataTable(props) {
     const filtered_column = open_filter ? by_id.get(open_filter.id) : undefined;
     const filter_body = filtered_column?.filter;
     const tools = (props.on_clear_filters && any_filter) || props.on_hidden_columns_change;
-    return (_jsxs(_Fragment, { children: [tools && (_jsxs("div", { className: "table-tools", children: [props.on_clear_filters && any_filter && _jsx("button", { type: "button", onClick: props.on_clear_filters, children: "Clear filters" }), props.on_hidden_columns_change && _jsx("button", { type: "button", "aria-haspopup": "menu", onClick: open_columns_menu, children: "Columns" })] })), _jsx("div", { ref: wrap, className: props.virtual ? "table-wrap virtual" : "table-wrap", style: props.virtual ? { overflowY: "auto" } : undefined, onScroll: line_height === undefined ? undefined : measure, children: _jsxs("table", { className: fill_last ? "responsive fill-last-column" : "responsive", style: fills_by_fixed ? { tableLayout: "fixed" } : undefined, children: [caption && _jsx("caption", { className: "visually-hidden", children: caption }), _jsx("thead", { ref: head, onContextMenu: props.on_hidden_columns_change && open_columns_menu, children: _jsx("tr", { children: shown.map(header) }) }), _jsxs("tbody", { onFocus: () => { rows_focused.current = true; }, onBlur: (event) => { if (event.relatedTarget && !event.currentTarget.contains(event.relatedTarget))
+    return (_jsxs(_Fragment, { children: [tools && (_jsxs("div", { className: "table-tools", children: [props.on_clear_filters && any_filter && _jsx("button", { type: "button", onClick: props.on_clear_filters, children: "Clear filters" }), props.on_hidden_columns_change && _jsx("button", { type: "button", "aria-haspopup": "menu", onClick: open_columns_menu, children: "Columns" })] })), _jsx("div", { ref: wrap, className: cx("table-wrap", props.virtual && "virtual", props.wrap_class), style: props.virtual ? { overflowY: "auto" } : undefined, onScroll: line_height === undefined ? undefined : measure, children: _jsxs("table", { className: fill_last ? "responsive fill-last-column" : "responsive", style: fills_by_fixed ? { tableLayout: "fixed" } : undefined, children: [caption && _jsx("caption", { className: "visually-hidden", children: caption }), _jsx("thead", { ref: head, onContextMenu: props.on_hidden_columns_change && open_columns_menu, children: _jsx("tr", { children: shown.map(header) }) }), _jsxs("tbody", { onFocus: () => { rows_focused.current = true; }, onBlur: (event) => { if (event.relatedTarget && !event.currentTarget.contains(event.relatedTarget))
                                 rows_focused.current = false; }, children: [windowed && spacer(windowed.offset_px, "spacer before"), drawn.map(draw_line), windowed && spacer(windowed.total_px - windowed.end * line_height, "spacer after")] })] }) }), open_filter && filtered_column && filter_body !== undefined && (_jsx(Popover, { anchor: open_filter.anchor, label: `Filter by ${filtered_column.label}`, on_close: close_filter, children: typeof filter_body === "function" ? filter_body(close_filter) : filter_body })), columns_menu && _jsx(ContextMenu, { x: columns_menu.x, y: columns_menu.y, label: "Columns", items: column_choices, on_close: () => set_columns_menu(null) })] }));
 }
 // ── Pages ────────────────────────────────────────────────────────────────────

package/dist/web/react/test_stubs.js

@@ -1,19 +1,25 @@
 // Stands in for the native popover and modal dialog, which jsdom does not draw; a test imports it for its side effects.
-HTMLElement.prototype.showPopover = function () {
-    this.setAttribute("data-shown", "");
-};
-HTMLElement.prototype.hidePopover = function () {
-    this.removeAttribute("data-shown");
-    this.dispatchEvent(Object.assign(new Event("toggle"), { newState: "closed" }));
-};
-HTMLDialogElement.prototype.showModal = function () {
-    this.setAttribute("open", "");
-};
-HTMLDialogElement.prototype.close = function () {
-    this.removeAttribute("open");
-};
-// jsdom hides every popover, since none ever matches :popover-open, so a shown one is drawn again here.
-const shown_popovers = document.createElement("style");
-shown_popovers.textContent = "[popover][data-shown] { display: block; }";
-document.head.append(shown_popovers);
+// A shared setup file may load in a node environment too, where there is no window to stand in for.
+if (typeof window !== "undefined") {
+    HTMLElement.prototype.showPopover = function () {
+        this.setAttribute("data-shown", "");
+    };
+    HTMLElement.prototype.hidePopover = function () {
+        this.removeAttribute("data-shown");
+        this.dispatchEvent(Object.assign(new Event("toggle"), { newState: "closed" }));
+    };
+    HTMLDialogElement.prototype.showModal = function () {
+        this.setAttribute("open", "");
+    };
+    HTMLDialogElement.prototype.close = function () {
+        this.removeAttribute("open");
+    };
+    // jsdom hides every popover, since none ever matches :popover-open, so a shown one is drawn again here over any app rule.
+    const shown_popovers = document.createElement("style");
+    shown_popovers.textContent = "[popover][data-shown] { display: block !important; }";
+    document.head.append(shown_popovers);
+    // Media queries all say no and scrolling does nothing, since jsdom lays nothing out.
+    window.matchMedia ??= (query) => ({ matches: false, media: query, onchange: null, addEventListener: () => { }, removeEventListener: () => { }, addListener: () => { }, removeListener: () => { }, dispatchEvent: () => false });
+    window.scrollTo = () => { };
+}
 export {};

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

@@ -0,0 +1,8 @@
+interface VolumeButtonProps {
+    volume: number;
+    on_change: (volume: number) => void;
+    step?: number;
+    label?: string;
+}
+export declare function VolumeButton({ volume, on_change, step, label }: VolumeButtonProps): import("react").JSX.Element;
+export {};

package/dist/web/react/volume.js

@@ -0,0 +1,42 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// A speaker button that opens a volume slider; scrolling over it adjusts the volume and a middle-click mutes.
+import { useEffect, useRef, useState } from "react";
+import { Popover } from "./menus.js";
+const speaker_icon = (volume) => volume === 0 ? "🔇" : volume < 34 ? "🔈" : volume < 67 ? "🔉" : "🔊";
+export function VolumeButton({ volume, on_change, step = 5, label = "Volume" }) {
+    const [open, set_open] = useState(false);
+    const trigger = useRef(null);
+    // The level before muting, so unmuting returns to it.
+    const before_mute = useRef(volume || 80);
+    // The click that closed the popover by landing on its button must not open it again.
+    const closed_at = useRef(0);
+    const latest_volume = useRef(volume);
+    latest_volume.current = volume;
+    function set(next) {
+        on_change(Math.max(0, Math.min(100, Math.round(next))));
+    }
+    function toggle_mute() {
+        if (latest_volume.current > 0) {
+            before_mute.current = latest_volume.current;
+            set(0);
+        }
+        else {
+            set(before_mute.current || 80);
+        }
+    }
+    // React's wheel listener is passive and cannot stop the page scrolling, so this one is attached by hand.
+    useEffect(() => {
+        const on_wheel = (event) => {
+            event.preventDefault();
+            set(latest_volume.current + (event.deltaY < 0 ? step : -step));
+        };
+        const button = trigger.current;
+        button.addEventListener("wheel", on_wheel, { passive: false });
+        return () => button.removeEventListener("wheel", on_wheel);
+    }, [step]);
+    return (_jsxs(_Fragment, { children: [_jsx("button", { ref: trigger, type: "button", className: "icon volume-button", "aria-label": `${label} ${volume}%`, "aria-haspopup": "dialog", "aria-expanded": open, title: `${label} ${volume}% — scroll to adjust, middle-click to mute`, onClick: () => { if (Date.now() - closed_at.current > 300)
+                    set_open(!open); }, onAuxClick: (event) => { if (event.button === 1) {
+                    event.preventDefault();
+                    toggle_mute();
+                } }, children: speaker_icon(volume) }), open && (_jsx(Popover, { anchor: trigger.current, label: label, on_close: () => { closed_at.current = Date.now(); set_open(false); }, children: _jsxs("div", { className: "volume-popover", children: [_jsx("button", { type: "button", className: "icon", onClick: toggle_mute, "aria-label": volume === 0 ? "Unmute" : "Mute", children: volume === 0 ? "🔇" : "🔊" }), _jsx("input", { className: "seek input-sm", style: { "--range-progress": `${volume}%` }, type: "range", min: 0, max: 100, step: step, value: volume, "aria-label": label, onChange: (event) => set(Number(event.currentTarget.value)) }), _jsxs("span", { className: "volume-percent", children: [volume, "%"] })] }) }))] }));
+}

package/dist/web/store.d.ts

@@ -0,0 +1,11 @@
+import { type Watch } from "./watch.ts";
+export interface Store<Value> {
+    get(): Value;
+    set(next: Value): void;
+    update(make: (current: Value) => Value): void;
+    watch: Watch;
+}
+export interface StoreOptions {
+    coalesce_in_milliseconds?: number;
+}
+export declare function create_store<Value>(initial: Value, options?: StoreOptions): Store<Value>;

package/dist/web/store.js

@@ -0,0 +1,17 @@
+// A value a page reads and events change, with a watch that redraws only what reads it.
+import { coalesce_bumps, create_watch } from "./watch.js";
+export function create_store(initial, options = {}) {
+    let value = initial;
+    const watch = create_watch();
+    const bump = options.coalesce_in_milliseconds ? coalesce_bumps(watch, options.coalesce_in_milliseconds) : watch.bump;
+    const set = (next) => {
+        value = next;
+        bump();
+    };
+    return {
+        get: () => value,
+        set,
+        update: (make) => set(make(value)),
+        watch,
+    };
+}

package/dist/web/watch.d.ts

@@ -4,3 +4,8 @@ export interface Watch {
     subscribe(listener: () => void): () => void;
 }
 export declare function create_watch(): Watch;
+export interface CoalescedBump {
+    (): void;
+    cancel(): void;
+}
+export declare function coalesce_bumps(watch: Watch, interval_in_milliseconds: number, now?: () => number): CoalescedBump;

package/dist/web/watch.js

@@ -15,3 +15,23 @@ export function create_watch() {
         },
     };
 }
+export function coalesce_bumps(watch, interval_in_milliseconds, now = () => performance.now()) {
+    let timer = null;
+    let last_bump_at = -Infinity;
+    const schedule = () => {
+        if (timer !== null)
+            return;
+        const wait = Math.max(0, interval_in_milliseconds - (now() - last_bump_at));
+        timer = setTimeout(() => {
+            timer = null;
+            last_bump_at = now();
+            watch.bump();
+        }, wait);
+    };
+    schedule.cancel = () => {
+        if (timer !== null)
+            clearTimeout(timer);
+        timer = null;
+    };
+    return schedule;
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@x-tech-laboratories/x-libs",
-  "version": "0.9.0",
-  "description": "Code the X-apps share: agents and their long runs, passwords, durations, and the web page's helpers and widgets",
+  "version": "0.11.0",
+  "description": "Code the X-apps share: agents and their long runs, passwords and sign-in, the Fastify server pieces, durations, and the web page's helpers and widgets",
   "license": "GPL-3.0-or-later",
   "repository": {
     "type": "git",
@@ -27,12 +27,28 @@
     "prepack": "npm run build"
   },
   "peerDependencies": {
+    "@fastify/cookie": "^11.1.5",
+    "@fastify/cors": "^11.4.1",
+    "@fastify/formbody": "^9.0.1",
+    "@fastify/static": "^10.1.10",
     "@fastify/websocket": "^11.3.5",
     "fastify": "^5.12.7",
     "react": "^19",
     "react-dom": "^19"
   },
   "peerDependenciesMeta": {
+    "@fastify/cookie": {
+      "optional": true
+    },
+    "@fastify/cors": {
+      "optional": true
+    },
+    "@fastify/formbody": {
+      "optional": true
+    },
+    "@fastify/static": {
+      "optional": true
+    },
     "@fastify/websocket": {
       "optional": true
     },
@@ -47,6 +63,10 @@
     }
   },
   "devDependencies": {
+    "@fastify/cookie": "^11.1.5",
+    "@fastify/cors": "^11.4.1",
+    "@fastify/formbody": "^9.0.1",
+    "@fastify/static": "^10.1.10",
     "@fastify/websocket": "^11.3.5",
     "@testing-library/dom": "^10.4.2",
     "@testing-library/react": "^16.3.3",
@@ -65,6 +85,8 @@
   "dependencies": {
     "@inquirer/password": "^5.2.5",
     "@tanstack/react-table": "^8.21.3",
+    "dompurify": "^3.4.17",
+    "marked": "^18.1.3",
     "parse-duration": "^2.1.11",
     "pretty-bytes": "^7.2.0",
     "sshpk": "^1.18.0"