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

package/dist/web/react/badges.js

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

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

@@ -0,0 +1,37 @@
+import { type ReactNode } from "react";
+interface SegmentedProps<Value extends string> {
+    label: string;
+    choices: {
+        value: Value;
+        label: string;
+    }[];
+    value: Value;
+    on_change: (value: Value) => void;
+    class_name?: string;
+}
+export declare function Segmented<Value extends string>({ label, choices, value, on_change, class_name }: SegmentedProps<Value>): import("react").JSX.Element;
+export declare function ButtonGroup({ label, children }: {
+    label: string;
+    children: ReactNode;
+}): import("react").JSX.Element;
+interface SwitchProps {
+    label: string;
+    checked: boolean;
+    on_change: (on: boolean) => Promise<boolean | void> | boolean | void;
+    disabled?: boolean;
+}
+export declare function Switch({ label, checked, on_change, disabled }: SwitchProps): import("react").JSX.Element;
+interface SearchBoxProps {
+    label: string;
+    value: string;
+    on_input: (value: string) => void;
+}
+export declare function SearchBox({ label, value, on_input }: SearchBoxProps): import("react").JSX.Element;
+interface SelectProps<Value extends string> {
+    label: string;
+    options: [value: Value, text: string][];
+    value: Value;
+    on_change: (value: Value) => void;
+}
+export declare function Select<Value extends string>({ label, options, value, on_change }: SelectProps<Value>): import("react").JSX.Element;
+export {};

package/dist/web/react/controls.js

@@ -0,0 +1,44 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// React controls drawn like the page's own: segmented choices, switches and search fields.
+import { useEffect, useRef, useState } from "react";
+// One of a few choices side by side; the chosen one takes the accent.
+export function Segmented({ label, choices, value, on_change, class_name }) {
+    return (_jsx("div", { className: class_name ? `segmented ${class_name}` : "segmented", role: "radiogroup", "aria-label": label, children: choices.map((choice) => (_jsx("button", { type: "button", role: "radio", "aria-checked": value === choice.value, onClick: () => on_change(choice.value), children: choice.label }, choice.value))) }));
+}
+// Buttons joined into one control, such as zoom out, zoom in and fit.
+export function ButtonGroup({ label, children }) {
+    return _jsx("div", { className: "segmented", role: "group", "aria-label": label, children: children });
+}
+export function Switch({ label, checked, on_change, disabled = false }) {
+    const [busy, set_busy] = useState(false);
+    async function change(event) {
+        const box = event.currentTarget;
+        const on = box.checked;
+        set_busy(true);
+        try {
+            if ((await on_change(on)) === false)
+                box.checked = !on;
+        }
+        catch (error) {
+            box.checked = !on;
+            throw error;
+        }
+        finally {
+            set_busy(false);
+        }
+    }
+    return _jsx("input", { type: "checkbox", role: "switch", "aria-label": label, checked: checked, disabled: disabled || busy, onChange: change });
+}
+// A search field that hands on what was typed once typing pauses; the field keeps its own text, so a redraw never wipes typing.
+export function SearchBox({ label, value, on_input }) {
+    const timer = useRef(undefined);
+    useEffect(() => () => clearTimeout(timer.current), []);
+    return (_jsx("input", { type: "search", className: "filter", placeholder: label, "aria-label": label, defaultValue: value, onChange: (event) => {
+            clearTimeout(timer.current);
+            const text = event.currentTarget.value;
+            timer.current = window.setTimeout(() => on_input(text), 200);
+        } }));
+}
+export function Select({ label, options, value, on_change }) {
+    return (_jsxs("label", { className: "field", children: [_jsx("span", { className: "field-label", children: label }), _jsx("select", { value: value, onChange: (event) => on_change(event.currentTarget.value), children: options.map(([option, text]) => _jsx("option", { value: option, children: text }, option)) })] }));
+}

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

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

package/dist/web/react/dialog.js

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

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

@@ -0,0 +1,80 @@
+import { type ReactNode } from "react";
+import type { Tone } from "./badges.tsx";
+export declare function Section({ title, tools, children }: {
+    title: ReactNode;
+    tools?: ReactNode;
+    children?: ReactNode;
+}): 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: string;
+    hint?: ReactNode;
+    children: ReactNode;
+}): import("react").JSX.Element;
+export declare function SettingRow({ label, hint, as_label, children }: {
+    label: ReactNode;
+    hint?: ReactNode;
+    as_label?: boolean;
+    children: ReactNode;
+}): import("react").JSX.Element;
+export {};

package/dist/web/react/layout.js

@@ -0,0 +1,71 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// The pieces a page is laid out with: panels, facts, tiles, cards, tabs, breadcrumbs, toolbars, steppers and settings rows.
+import { Fragment } from "react";
+// ── Panels ───────────────────────────────────────────────────────────────────
+export function Section({ title, tools, children }) {
+    return (_jsxs("section", { className: "panel", children: [_jsxs("div", { className: "panel-head", children: [_jsx("h2", { children: title }), tools && _jsx("div", { className: "panel-tools", children: tools })] }), children] }));
+}
+// 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, children }) {
+    const text = (_jsxs("span", { className: "setting-text", children: [_jsx("span", { className: "setting-label", children: label }), hint && _jsx("span", { className: "setting-hint", children: hint })] }));
+    return as_label ? _jsxs("label", { className: "setting-row", children: [text, children] }) : _jsxs("div", { className: "setting-row", children: [text, children] });
+}

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[]): 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/menus.js

@@ -0,0 +1,159 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Menus and popovers on the native popover: closed by Escape or a click elsewhere, and here also by scrolling or leaving the window.
+import { Fragment, useEffect, useId, useLayoutEffect, useRef, useState } from "react";
+import { item_after_key, item_starting_with, on_screen_position } from "../menus.js";
+// Shows the element as a popover while it is rendered, calling the latest on_close once it closes for any reason.
+function use_popover(on_close, opener) {
+    const element = useRef(null);
+    const close = useRef(on_close);
+    close.current = on_close;
+    const focused_before = useRef(opener ?? document.activeElement);
+    useEffect(() => {
+        const popover = element.current;
+        const hide = () => { if (popover.matches(":popover-open"))
+            popover.hidePopover(); };
+        const toggled = (event) => { if (event.newState === "closed")
+            close.current(); };
+        const outside_scroll = (event) => { if (!popover.contains(event.target))
+            hide(); };
+        popover.addEventListener("toggle", toggled);
+        window.addEventListener("blur", hide);
+        window.addEventListener("scroll", outside_scroll, true);
+        return () => {
+            popover.removeEventListener("toggle", toggled);
+            window.removeEventListener("blur", hide);
+            window.removeEventListener("scroll", outside_scroll, true);
+        };
+    }, []);
+    const return_focus = () => {
+        const before = focused_before.current;
+        if (before?.isConnected && before !== document.body)
+            before.focus();
+    };
+    const dismiss = () => {
+        const popover = element.current;
+        return_focus();
+        if (popover?.matches(":popover-open"))
+            popover.hidePopover();
+        else
+            close.current();
+    };
+    return { element, dismiss, return_focus };
+}
+// Shows the popover at the point, flipped or pushed back so it stays on screen.
+function show_at(popover, x, y) {
+    if (!popover.matches(":popover-open"))
+        popover.showPopover();
+    const size = popover.getBoundingClientRect();
+    const position = on_screen_position(x, y, size.width, size.height);
+    popover.style.left = `${position.left}px`;
+    popover.style.top = `${position.top}px`;
+}
+// ── Keys ─────────────────────────────────────────────────────────────────────
+const item_selector = '[role^="menuitem"]:not([aria-disabled="true"])';
+const typeahead_pause_in_milliseconds = 600;
+// Arrows, Home and End move between items, typing jumps to one by its first letters, Enter or Space runs it, and Escape closes.
+function use_menu_keys(container, dismiss, whole_menu) {
+    const typed = useRef({ text: "", at: 0 });
+    return (event) => {
+        if (event.key === "Escape") {
+            event.preventDefault();
+            event.stopPropagation();
+            dismiss();
+            return;
+        }
+        if (whole_menu && event.key === "Tab")
+            return dismiss();
+        const items = [...container.current.querySelectorAll(item_selector)];
+        const current = items.indexOf(document.activeElement);
+        // In a popover the keys belong to its fields until focus is on one of its items.
+        if (!whole_menu && current < 0)
+            return;
+        if ((event.key === "Enter" || event.key === " ") && current >= 0) {
+            event.preventDefault();
+            items[current].click();
+            return;
+        }
+        const moved = item_after_key(event.key, current, items.length);
+        if (moved !== null) {
+            event.preventDefault();
+            items[moved].focus();
+            return;
+        }
+        if (event.key.length !== 1 || event.ctrlKey || event.metaKey || event.altKey)
+            return;
+        const now = Date.now();
+        typed.current = { text: now - typed.current.at > typeahead_pause_in_milliseconds ? event.key : typed.current.text + event.key, at: now };
+        const labels = items.map((item) => item.querySelector(".menu-label")?.textContent ?? item.textContent ?? "");
+        const found = item_starting_with(labels, typed.current.text, current);
+        if (found !== null) {
+            event.preventDefault();
+            items[found].focus();
+        }
+    };
+}
+// A menu's buttons, also for use inside a Popover, such as a column filter's choices.
+export function MenuList({ items, on_close }) {
+    return (_jsx(_Fragment, { children: items.map((item) => (_jsxs(Fragment, { children: [item.separator_before && _jsx("div", { className: "menu-separator", role: "separator" }), _jsxs("button", { type: "button", className: item.danger ? "menu-item danger" : "menu-item", role: item.checked === undefined ? "menuitem" : item.radio ? "menuitemradio" : "menuitemcheckbox", "aria-checked": item.checked, "aria-disabled": item.disabled || undefined, tabIndex: -1, onClick: () => {
+                        if (item.disabled)
+                            return;
+                        if (!item.keep_open)
+                            on_close();
+                        item.run();
+                    }, children: [_jsx("span", { className: "menu-label", children: item.label }), item.hint && _jsx("span", { className: "menu-hint", children: item.hint })] })] }, item.label))) }));
+}
+export function ContextMenu({ x, y, items, on_close, label }) {
+    const { element: menu, dismiss, return_focus } = use_popover(on_close);
+    const keys = use_menu_keys(menu, dismiss, true);
+    useLayoutEffect(() => {
+        show_at(menu.current, x, y);
+        menu.current.querySelector(item_selector)?.focus();
+    }, [x, y]);
+    return (_jsx("div", { ref: menu, popover: "auto", className: "menu", role: "menu", "aria-label": label, tabIndex: -1, onKeyDown: keys, children: _jsx(MenuList, { items: items, on_close: () => { return_focus(); on_close(); } }) }));
+}
+let open_menu = null;
+let next_menu_id = 1;
+const menu_listeners = new Set();
+function publish_menu(menu) {
+    open_menu = menu;
+    for (const listener of menu_listeners)
+        listener(open_menu);
+}
+// Opens a menu where the event happened, such as a right-click, replacing any menu already open.
+export function open_context_menu(event, items) {
+    event.preventDefault();
+    publish_menu({ id: next_menu_id++, x: event.clientX, y: event.clientY, items });
+}
+// Where menus opened from anywhere are drawn; the Shell holds one.
+export function ContextMenus() {
+    const [menu, set_menu] = useState(open_menu);
+    useEffect(() => {
+        menu_listeners.add(set_menu);
+        return () => void menu_listeners.delete(set_menu);
+    }, []);
+    if (!menu)
+        return null;
+    return _jsx(ContextMenu, { x: menu.x, y: menu.y, items: menu.items, on_close: () => { if (open_menu?.id === menu.id)
+            publish_menu(null); } }, menu.id);
+}
+// Holds any content, such as a column's filter, with its first field ready to type into and its menu items reachable by arrow keys.
+export function Popover({ anchor, x = 0, y = 0, label, on_close, children }) {
+    const { element: popover, dismiss } = use_popover(on_close, anchor);
+    const keys = use_menu_keys(popover, dismiss, false);
+    const anchor_name = `--popover-${useId().replace(/[^\w-]/g, "")}`;
+    useLayoutEffect(() => {
+        const element = popover.current;
+        if (anchor) {
+            // The anchor's name ties it to this popover, which CSS then hangs below it, flipping where there is no room.
+            anchor.style.setProperty("anchor-name", anchor_name);
+            element.style.setProperty("position-anchor", anchor_name);
+            element.showPopover();
+        }
+        else {
+            show_at(element, x, y);
+        }
+        element.querySelector(`input, select, textarea, ${item_selector}, button`)?.focus();
+        return () => void anchor?.style.removeProperty("anchor-name");
+    }, [anchor, x, y]);
+    return (_jsx("div", { ref: popover, popover: "auto", className: anchor ? "popover anchored" : "popover", role: "dialog", "aria-label": label, onKeyDown: keys, children: children }));
+}

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

@@ -0,0 +1,37 @@
+import { type ReactNode } from "react";
+import { type Route } from "../router.ts";
+import { type ThemeChoice } from "../theme.ts";
+export declare function use_route(): Route;
+export declare function ThemeButton({ choice }: {
+    choice: ThemeChoice;
+}): import("react").JSX.Element;
+export interface ShellSection {
+    id: string;
+    label: string;
+    href: string;
+}
+export interface SidebarWidth {
+    default_width: number;
+    min: number;
+    max: number;
+    storage_key?: string;
+    width?: number;
+    on_change?: (width: number, done: boolean) => void;
+}
+interface ShellProps {
+    brand: string;
+    sections?: ShellSection[];
+    active?: string;
+    sidebar?: ReactNode;
+    sidebar_width?: SidebarWidth;
+    theme: ThemeChoice;
+    user: string | null;
+    user_href?: string;
+    on_logout?: () => void;
+    tools?: ReactNode;
+    sidebar_foot?: ReactNode;
+    view_key?: string;
+    children: ReactNode;
+}
+export declare function Shell({ brand, sections, active, sidebar: sidebar_content, sidebar_width, theme, user, user_href, on_logout, tools, sidebar_foot, view_key, children }: ShellProps): import("react").JSX.Element;
+export {};