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

package/dist/web/react/following.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Output that keeps its newest lines in view as they arrive, unless the reader has scrolled up to read, with a Follow switch.
+import { useCallback, useLayoutEffect, useRef, useState } from "react";
+import { cx } from "../dom.js";
+// How far above the bottom still counts as at the bottom.
+const FOLLOW_SLACK_PIXELS = 8;
+export const at_bottom = (element) => element.scrollTop + element.clientHeight >= element.scrollHeight - FOLLOW_SLACK_PIXELS;
+// Scrolls the box to its end whenever the dependency changes while following; active false, such as once a run has ended, leaves the scroll alone.
+export function use_follow_tail(dependency, active = true) {
+    const ref = useRef(null);
+    const [following, set_following] = useState(true);
+    useLayoutEffect(() => {
+        const element = ref.current;
+        if (following && active && element)
+            element.scrollTop = element.scrollHeight;
+    }, [dependency, following, active]);
+    const on_scroll = useCallback((event) => {
+        if (!active)
+            return;
+        set_following(at_bottom(event.currentTarget));
+    }, [active]);
+    return { ref, following, set_following, on_scroll };
+}
+export function FollowToggle({ following, on_change, disabled = false, label = "Follow" }) {
+    return (_jsxs("label", { className: "follow-toggle", children: [_jsx("input", { type: "checkbox", checked: following, disabled: disabled, onChange: (event) => on_change(event.currentTarget.checked) }), " ", label] }));
+}
+// Streamed text in an output box that follows its tail.
+export function FollowingOutput({ text, active = true, toggle = false, class_name, tools }) {
+    const tail = use_follow_tail(text, active);
+    const output = _jsx("pre", { ref: tail.ref, className: cx("output", "following-output", class_name), onScroll: tail.on_scroll, children: text });
+    if (!toggle && tools === undefined)
+        return output;
+    return (_jsxs("div", { className: "following", children: [_jsxs("div", { className: "following-tools", children: [tools, toggle && _jsx(FollowToggle, { following: tail.following, on_change: tail.set_following, disabled: !active })] }), output] }));
+}

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

@@ -1,6 +1,17 @@
 import { type MouseEvent, type ReactNode } from "react";
 import type { Tone } from "./badges.tsx";
 export { moved } from "../tables.ts";
+interface PageHeadingProps {
+    title: ReactNode;
+    subtitle?: ReactNode;
+    icon?: ReactNode;
+    banner?: string | ReactNode;
+    actions?: ReactNode;
+    class_name?: string;
+    level?: 1 | 2 | 3;
+    children?: ReactNode;
+}
+export declare function PageHeading({ title, subtitle, icon, banner, actions, class_name, level, children }: PageHeadingProps): import("react").JSX.Element;
 interface SectionProps {
     title: ReactNode;
     tools?: ReactNode;

package/dist/web/react/layout.js

@@ -1,7 +1,12 @@
 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, settings rows and list row buttons.
+// The pieces a page is laid out with: the page heading, panels, facts, tiles, cards, tabs, breadcrumbs, toolbars, steppers, settings rows and list row buttons.
 import { Fragment } from "react";
 export { moved } from "../tables.js";
+// A page's heading: an optional banner, the title with its icon and subtitle, and the page's buttons.
+export function PageHeading({ title, subtitle, icon, banner, actions, class_name, level = 1, children }) {
+    const Title = `h${level}`;
+    return (_jsxs("header", { className: class_name ? `page-head ${class_name}` : "page-head", children: [typeof banner === "string" ? _jsx("img", { className: "page-banner", src: banner, alt: "", loading: "lazy" }) : banner, _jsxs("div", { className: "page-title spread", children: [_jsxs("div", { className: "page-identity", children: [icon, _jsxs("div", { children: [_jsx(Title, { children: title }), subtitle && _jsx("p", { className: "page-subtitle muted", children: subtitle })] })] }), actions && _jsx("div", { className: "head-actions", children: actions })] }), children] }));
+}
 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] }));
 }

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

@@ -0,0 +1,8 @@
+export declare function render_markdown(text: string): string;
+interface MarkdownProps {
+    text: string;
+    class_name?: string;
+    follow?: boolean;
+}
+export declare function Markdown({ text, class_name, follow }: MarkdownProps): import("react").JSX.Element;
+export {};

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/media.js

@@ -10,7 +10,7 @@ export function Avatar({ src, name, size = "medium" }) {
 // 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 })] }));
+    return (_jsxs("div", { role: "listitem", className: dimmed ? "media-tile media-dimmed 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 }) {

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

@@ -1,4 +1,4 @@
-import type { ReactNode } from "react";
+import { type ReactNode } from "react";
 import { type MenuItem } from "./menus.tsx";
 interface MenuButtonProps {
     label: string;

package/dist/web/react/menu_button.js

@@ -1,12 +1,16 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+// A button that opens a menu under itself, such as the ⋮ on a card; the Shell draws the menu.
+import { useState } from "react";
 import { open_context_menu } from "./menus.js";
 export function MenuButton({ label, items, glyph = "⋮", class_name }) {
-    function open(event) {
+    const [open, set_open] = useState(false);
+    function open_menu(event) {
         // The button may sit inside a link, such as a whole card that opens its video.
         event.preventDefault();
         event.stopPropagation();
         const box = event.currentTarget.getBoundingClientRect();
-        open_context_menu({ clientX: box.left, clientY: box.bottom, preventDefault: () => { } }, typeof items === "function" ? items() : items);
+        set_open(true);
+        open_context_menu({ clientX: box.left, clientY: box.bottom, preventDefault: () => { } }, typeof items === "function" ? items() : items, () => set_open(false));
     }
-    return (_jsx("button", { type: "button", className: class_name ? `icon menu-trigger ${class_name}` : "icon menu-trigger", "aria-label": label, title: label, "aria-haspopup": "menu", onClick: open, children: glyph }));
+    return (_jsx("button", { type: "button", className: class_name ? `icon menu-trigger ${class_name}` : "icon menu-trigger", "aria-label": label, title: label, "aria-haspopup": "menu", "aria-expanded": open, onClick: open_menu, children: glyph }));
 }

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

@@ -18,7 +18,7 @@ export declare function open_context_menu(event: {
     clientX: number;
     clientY: number;
     preventDefault(): void;
-}, items: MenuItem[]): void;
+}, items: MenuItem[], on_close?: () => void): void;
 export declare function ContextMenus(): import("react").JSX.Element | null;
 interface PopoverProps {
     anchor?: HTMLElement | null;

package/dist/web/react/menus.js

@@ -139,14 +139,16 @@ let open_menu = null;
 let next_menu_id = 1;
 const menu_listeners = new Set();
 function publish_menu(menu) {
+    const before = open_menu;
     open_menu = menu;
     for (const listener of menu_listeners)
         listener(open_menu);
+    before?.on_close?.();
 }
-// Opens a menu where the event happened, such as a right-click, replacing any menu already open.
-export function open_context_menu(event, items) {
+// Opens a menu where the event happened, such as a right-click, replacing any menu already open; on_close hears when it closes for any reason.
+export function open_context_menu(event, items, on_close) {
     event.preventDefault();
-    publish_menu({ id: next_menu_id++, x: event.clientX, y: event.clientY, items });
+    publish_menu({ id: next_menu_id++, x: event.clientX, y: event.clientY, items, on_close });
 }
 // Where menus opened from anywhere are drawn; the Shell holds one.
 export function ContextMenus() {

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

@@ -1,4 +1,5 @@
 import { type ReactNode } from "react";
+import type { Watch } from "../watch.ts";
 export declare function Skeleton({ lines }: {
     lines?: number;
 }): import("react").JSX.Element;
@@ -10,18 +11,26 @@ export declare function Failure({ error, retry }: {
     error: unknown;
     retry: () => void;
 }): import("react").JSX.Element;
+export type ResourceStatus = "idle" | "loading" | "loaded" | "failed";
 export interface Resource<Data> {
     data: Data | null;
     error: unknown;
     loading: boolean;
+    status: ResourceStatus;
     reload: (quiet?: boolean) => Promise<void>;
 }
 export interface ResourceOptions {
     refresh_in_milliseconds?: number;
+    enabled?: boolean;
+    watch?: Watch;
 }
 export declare function use_resource<Data>(work: () => Promise<Data>, dependencies: unknown[], options?: ResourceOptions): Resource<Data>;
-export declare function Loaded<Data>({ resource, lines, children }: {
+interface LoadedProps<Data> {
     resource: Resource<Data>;
     lines?: number;
+    idle?: ReactNode;
+    empty?: ReactNode;
     children: (data: Data) => ReactNode;
-}): 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,40 +11,54 @@ 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 = {}) {
-    const [state, set_state] = useState({ data: null, error: null, loading: true });
+    const enabled = options.enabled ?? true;
+    const [state, set_state] = useState({ data: null, error: null, status: enabled ? "loading" : "idle" });
     const latest_work = useRef(work);
     latest_work.current = work;
     const generation = useRef(0);
     const reload = useCallback((quiet = false) => {
         const mine = ++generation.current;
         if (!quiet)
-            set_state({ data: null, error: null, loading: true });
+            set_state({ data: null, error: null, status: "loading" });
         return latest_work.current().then((data) => { if (mine === generation.current)
-            set_state({ data, error: null, loading: false }); }, (error) => {
+            set_state({ data, error: null, status: "loaded" }); }, (error) => {
             if (pass_login_needed(error) || mine !== generation.current)
                 return;
-            set_state((before) => quiet && before.data !== null ? { ...before, loading: false } : { data: null, error, loading: false });
+            set_state((before) => quiet && before.data !== null ? before : { data: null, error, status: "failed" });
         });
     }, []);
-    useEffect(() => void reload(), dependencies);
     useEffect(() => {
-        if (!options.refresh_in_milliseconds)
+        if (enabled)
+            return void reload();
+        // Turning off drops the load under way and what it showed.
+        generation.current += 1;
+        set_state((before) => before.status === "idle" ? before : { data: null, error: null, status: "idle" });
+    }, [enabled, ...dependencies]);
+    useEffect(() => {
+        if (!options.refresh_in_milliseconds || !enabled)
             return;
         const timer = setInterval(() => { if (document.visibilityState === "visible")
             void reload(true); }, options.refresh_in_milliseconds);
         return () => clearInterval(timer);
-    }, [options.refresh_in_milliseconds]);
-    return { ...state, reload };
+    }, [options.refresh_in_milliseconds, enabled]);
+    useEffect(() => {
+        if (!options.watch || !enabled)
+            return;
+        return options.watch.subscribe(() => void reload(true));
+    }, [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, children }) {
-    if (resource.data !== null)
-        return _jsx(_Fragment, { children: children(resource.data) });
-    if (resource.error !== null)
+// 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.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.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/web/react/test_stubs.js

@@ -0,0 +1,25 @@
+// Stands in for the native popover and modal dialog, which jsdom does not draw; a test imports it for its side effects.
+// 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>;