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

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

@@ -0,0 +1,25 @@
+import { type ReactNode, type RefObject, type UIEvent } from "react";
+export declare const at_bottom: (element: HTMLElement) => boolean;
+export interface FollowTail<Element extends HTMLElement> {
+    ref: RefObject<Element | null>;
+    following: boolean;
+    set_following: (following: boolean) => void;
+    on_scroll: (event: UIEvent<Element>) => void;
+}
+export declare function use_follow_tail<Element extends HTMLElement>(dependency: unknown, active?: boolean): FollowTail<Element>;
+interface FollowToggleProps {
+    following: boolean;
+    on_change: (following: boolean) => void;
+    disabled?: boolean;
+    label?: string;
+}
+export declare function FollowToggle({ following, on_change, disabled, label }: FollowToggleProps): import("react").JSX.Element;
+interface FollowingOutputProps {
+    text: string;
+    active?: boolean;
+    toggle?: boolean;
+    class_name?: string;
+    tools?: ReactNode;
+}
+export declare function FollowingOutput({ text, active, toggle, class_name, tools }: FollowingOutputProps): import("react").JSX.Element;
+export {};

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

@@ -0,0 +1,111 @@
+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;
+    class_name?: string;
+    on_context_menu?: (event: MouseEvent<HTMLElement>) => void;
+    children?: ReactNode;
+}
+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)[];
+    layout?: "grid" | "rows";
+}): import("react").JSX.Element;
+export declare function Stack({ tight, children }: {
+    tight?: boolean;
+    children: ReactNode;
+}): import("react").JSX.Element;
+interface TileProps {
+    label: string;
+    value: ReactNode;
+    tone?: Tone;
+    class_name?: string | null;
+    href?: string;
+    value_first?: boolean;
+}
+export declare function Tile({ label, value, tone, class_name, href, value_first }: TileProps): import("react").JSX.Element;
+export declare function Tiles({ children }: {
+    children: ReactNode;
+}): import("react").JSX.Element;
+interface CardProps {
+    title: ReactNode;
+    subtitle?: ReactNode;
+    badge?: ReactNode;
+    class_name?: string;
+    href?: string;
+    on_click?: () => void;
+    children?: ReactNode;
+}
+export declare function Card({ title, subtitle, badge, class_name, href, on_click, children }: CardProps): import("react").JSX.Element;
+export declare function Cards({ children }: {
+    children: ReactNode;
+}): import("react").JSX.Element;
+export interface TabItem<Id extends string> {
+    id: Id;
+    label: string;
+    href?: string;
+}
+export declare function Tabs<Id extends string>({ items, active, label, on_select }: {
+    items: TabItem<Id>[];
+    active: Id;
+    label?: string;
+    on_select?: (id: Id) => void;
+}): import("react").JSX.Element;
+export declare function Crumbs({ items }: {
+    items: [label: string, href: string | null][];
+}): import("react").JSX.Element;
+export declare function Toolbar({ children }: {
+    children: ReactNode;
+}): import("react").JSX.Element;
+interface Step {
+    text: string;
+    href: string | null;
+}
+export declare function Stepper({ label, previous, position, next }: {
+    label: string;
+    previous: Step;
+    position: ReactNode;
+    next: Step;
+}): import("react").JSX.Element;
+export declare function SettingsGroup({ heading, hint, children }: {
+    heading: ReactNode;
+    hint?: ReactNode;
+    children: ReactNode;
+}): import("react").JSX.Element;
+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;
+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

@@ -0,0 +1,85 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// 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] }));
+}
+// Labelled values in a grid of tiles, or as rows of label and value for long values such as paths.
+export function Facts({ rows, layout = "grid" }) {
+    return (_jsx("dl", { className: layout === "rows" ? "facts facts-rows" : "facts", children: rows.filter((row) => Boolean(row)).map(([label, value, class_name]) => (_jsxs("div", { children: [_jsx("dt", { children: label }), _jsx("dd", { className: class_name, children: value ?? "—" })] }, label))) }));
+}
+// A stack of panels or blocks spaced by its gap, tighter when tight.
+export function Stack({ tight = false, children }) {
+    return _jsx("div", { className: tight ? "stack tight" : "stack", children: children });
+}
+// One headline figure and its label.
+export function Tile({ label, value, tone, class_name, href, value_first = false }) {
+    const tile_class = ["tile", tone && tone !== "none" && `tile-${tone}`, class_name].filter(Boolean).join(" ");
+    const label_part = _jsx("div", { className: "tile-label", children: label });
+    const value_part = _jsx("div", { className: "tile-value", children: value });
+    const children = value_first ? _jsxs(_Fragment, { children: [value_part, label_part] }) : _jsxs(_Fragment, { children: [label_part, value_part] });
+    return href ? _jsx("a", { className: tile_class, href: href, children: children }) : _jsx("div", { className: tile_class, children: children });
+}
+export function Tiles({ children }) {
+    return _jsx("div", { className: "tiles", children: children });
+}
+// A titled card for one thing among many, laid out in a grid of Cards.
+export function Card({ title, subtitle, badge, class_name, href, on_click, children }) {
+    const card_class = class_name ? `card ${class_name}` : "card";
+    const body = (_jsxs(_Fragment, { children: [_jsxs("div", { className: "card-head", children: [_jsx("strong", { children: title }), badge] }), subtitle && _jsx("div", { className: "muted card-host", children: subtitle }), children] }));
+    if (href)
+        return _jsx("a", { className: card_class, href: href, children: body });
+    if (on_click)
+        return _jsx("button", { type: "button", className: card_class, onClick: on_click, children: body });
+    return _jsx("div", { className: card_class, children: body });
+}
+export function Cards({ children }) {
+    return _jsx("div", { className: "grid", children: children });
+}
+export function Tabs({ items, active, label = "Sections", on_select }) {
+    return (_jsx("nav", { className: "tabs", "aria-label": label, children: items.map((item) => {
+            const tab_class = item.id === active ? "tab active" : "tab";
+            const current = item.id === active ? "page" : undefined;
+            return item.href
+                ? _jsx("a", { className: tab_class, href: item.href, "aria-current": current, children: item.label }, item.id)
+                : _jsx("button", { type: "button", className: tab_class, "aria-current": current, onClick: () => on_select?.(item.id), children: item.label }, item.id);
+        }) }));
+}
+export function Crumbs({ items }) {
+    return (_jsx("nav", { className: "crumbs", "aria-label": "Breadcrumb", children: items.map(([label, href], index) => (_jsxs(Fragment, { children: [index > 0 && _jsx("span", { className: "muted", "aria-hidden": "true", children: " / " }), href ? _jsx("a", { href: href, children: label }) : _jsx("span", { "aria-current": "page", children: label })] }, index))) }));
+}
+// ── Toolbars ─────────────────────────────────────────────────────────────────
+export function Toolbar({ children }) {
+    return _jsx("div", { className: "toolbar", children: children });
+}
+// Steps to the item before or after this one, each a link or a dead button when there is none, with where this one stands between.
+export function Stepper({ label, previous, position, next }) {
+    const step = (target) => target.href === null
+        ? _jsx("button", { disabled: true, children: target.text })
+        : _jsx("a", { className: "button", href: target.href, children: target.text });
+    return _jsxs("div", { className: "stepper", role: "group", "aria-label": label, children: [step(previous), _jsx("span", { className: "muted", children: position }), step(next)] });
+}
+// ── Settings ─────────────────────────────────────────────────────────────────
+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, 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: 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 remove", "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 remove", "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/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.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 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 }) {
+    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 {};

package/dist/web/react/menu_button.js

@@ -0,0 +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 }) {
+    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();
+        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", "aria-expanded": open, onClick: open_menu, children: glyph }));
+}

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

@@ -0,0 +1,31 @@
+import { type ReactNode } from "react";
+import { type MenuItem } from "../menus.ts";
+export type { MenuItem } from "../menus.ts";
+interface MenuListProps {
+    items: MenuItem[];
+    on_close: () => void;
+}
+export declare function MenuList({ items, on_close }: MenuListProps): import("react").JSX.Element;
+interface ContextMenuProps {
+    x: number;
+    y: number;
+    items: MenuItem[];
+    on_close: () => void;
+    label?: string;
+}
+export declare function ContextMenu({ x, y, items, on_close, label }: ContextMenuProps): import("react").JSX.Element;
+export declare function open_context_menu(event: {
+    clientX: number;
+    clientY: number;
+    preventDefault(): void;
+}, items: MenuItem[], on_close?: () => void): void;
+export declare function ContextMenus(): import("react").JSX.Element | null;
+interface PopoverProps {
+    anchor?: HTMLElement | null;
+    x?: number;
+    y?: number;
+    label: string;
+    on_close: () => void;
+    children: ReactNode;
+}
+export declare function Popover({ anchor, x, y, label, on_close, children }: PopoverProps): import("react").JSX.Element;

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/prefs.d.ts

@@ -0,0 +1,2 @@
+import { type StorageLike, type Validator } from "../prefs.ts";
+export declare function use_pref<Value>(key: string, initial: Value, validate?: Validator<Value>, storage?: StorageLike | undefined): [Value, (next: Value) => void];

package/dist/web/react/prefs.js

@@ -0,0 +1,11 @@
+// A remembered setting as component state, read once when the component mounts and written on every change.
+import { useState } from "react";
+import { browser_storage, read_pref, write_pref } from "../prefs.js";
+export function use_pref(key, initial, validate, storage = browser_storage()) {
+    const [value, set_value] = useState(() => read_pref(storage, key, initial, validate));
+    const change = (next) => {
+        set_value(next);
+        write_pref(storage, key, next);
+    };
+    return [value, change];
+}

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/reveal.d.ts

@@ -0,0 +1,10 @@
+export interface RevealOptions {
+    root_margin?: string;
+    initial_count?: number;
+}
+export interface Reveal {
+    shown_count: number;
+    more_ref: (element: Element | null) => void;
+    reset: () => void;
+}
+export declare function use_reveal(page_size: number, options?: RevealOptions): Reveal;

package/dist/web/react/reveal.js

@@ -0,0 +1,30 @@
+// A long list shown a page at a time, the next page added as its end scrolls into view.
+import { useCallback, useEffect, useRef, useState } from "react";
+export function use_reveal(page_size, options = {}) {
+    const root_margin = options.root_margin ?? "200px";
+    const [shown_count, set_shown_count] = useState(() => Math.max(page_size, options.initial_count ?? page_size));
+    const observer = useRef(null);
+    const marker = useRef(null);
+    const more_ref = useCallback((element) => {
+        observer.current?.disconnect();
+        observer.current = null;
+        marker.current = element;
+        if (!element)
+            return;
+        observer.current = new IntersectionObserver((entries) => {
+            if (entries.some((entry) => entry.isIntersecting))
+                set_shown_count((count) => count + page_size);
+        }, { rootMargin: root_margin });
+        observer.current.observe(element);
+    }, [page_size, root_margin]);
+    // Watching the marker afresh after each page asks again whether it is still in view, so a short page keeps filling.
+    useEffect(() => {
+        if (!observer.current || !marker.current)
+            return;
+        observer.current.unobserve(marker.current);
+        observer.current.observe(marker.current);
+    }, [shown_count]);
+    useEffect(() => () => observer.current?.disconnect(), []);
+    const reset = useCallback(() => set_shown_count(page_size), [page_size]);
+    return { shown_count, more_ref, reset };
+}