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

package/dist/web/{preact → react}/controls.js

@@ -1,12 +1,13 @@
-import { jsx as _jsx, jsxs as _jsxs } from "preact/jsx-runtime";
-import { useEffect, useRef, useState } from "preact/hooks";
+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", { class: 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))) }));
+    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", { class: "segmented", role: "group", "aria-label": label, children: 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);
@@ -32,12 +33,12 @@ export function Switch({ label, checked, on_change, disabled = false }) {
 export function SearchBox({ label, value, on_input }) {
     const timer = useRef(undefined);
     useEffect(() => () => clearTimeout(timer.current), []);
-    return (_jsx("input", { type: "search", class: "filter", placeholder: label, "aria-label": label, defaultValue: value, onInput: (event) => {
+    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", { class: "field", children: [_jsx("span", { class: "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)) })] }));
+    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/{preact → react}/dialog.d.ts

@@ -1,16 +1,16 @@
-import { type ComponentChildren } from "preact";
+import { type ReactNode } from "react";
 interface DialogProps {
-    title: ComponentChildren;
+    title: ReactNode;
     on_close: () => void;
-    buttons?: ComponentChildren;
+    buttons?: ReactNode;
     wide?: boolean;
     class_name?: string;
-    children: ComponentChildren;
+    children: ReactNode;
 }
-export declare function Dialog({ title, on_close, buttons, wide, class_name, children }: DialogProps): import("preact").JSX.Element;
+export declare function Dialog({ title, on_close, buttons, wide, class_name, children }: DialogProps): import("react").JSX.Element;
 export interface ConfirmOptions {
     title: string;
-    message: ComponentChildren;
+    message: ReactNode;
     confirm_label: string;
     busy_label?: string;
     danger?: boolean;
@@ -21,15 +21,15 @@ export interface ConfirmOptions {
 export declare function ConfirmDialog({ options, on_close }: {
     options: ConfirmOptions;
     on_close: () => void;
-}): import("preact").JSX.Element;
+}): import("react").JSX.Element;
 export declare function TextDialog({ title, text, on_close }: {
     title: string;
     text: string;
     on_close: () => void;
-}): import("preact").JSX.Element;
-type Builder = (close: () => void) => ComponentChildren;
+}): 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("preact").JSX.Element;
+export declare function Dialogs(): import("react").JSX.Element;
 export {};

package/dist/web/{preact → react}/dialog.js

@@ -1,9 +1,8 @@
-import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "preact/jsx-runtime";
+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 } from "preact";
-import { useEffect, useId, useRef, useState } from "preact/hooks";
+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, and Escape calls on_close.
+// 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();
@@ -11,15 +10,21 @@ export function Dialog({ title, on_close, buttons, wide = false, class_name, chi
     close.current = on_close;
     useEffect(() => {
         const element = dialog.current;
+        const opener = document.activeElement;
         element.showModal();
-        return () => element.close();
+        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, class: ["dialog", wide && "wide", class_name].filter(Boolean).join(" "), "aria-labelledby": title_id, onCancel: (event) => {
+    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", { class: "dialog-body", children: children }), buttons && _jsx("div", { class: "dialog-buttons", children: buttons })] }));
+        }, 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("");
@@ -35,11 +40,11 @@ export function ConfirmDialog({ options, 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", { class: 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", { class: "type-confirm", children: [_jsxs("span", { children: ["Type ", _jsx("strong", { children: options.type_to_confirm }), " to confirm:"] }), _jsx("input", { type: "text", class: "filter", autocomplete: "off", autoFocus: true, "aria-label": `Type ${options.type_to_confirm} to confirm`, value: typed, onInput: (event) => set_typed(event.currentTarget.value) })] }))] }));
+            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", { class: "accent solid", onClick: on_close, children: "Close" })] }), children: _jsx("pre", { class: "output", children: text }) }));
+    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;

package/dist/web/{preact → react}/layout.d.ts

@@ -1,44 +1,44 @@
-import { type ComponentChildren } from "preact";
+import { type ReactNode } from "react";
 import type { Tone } from "./badges.tsx";
 export declare function Section({ title, tools, children }: {
-    title: ComponentChildren;
-    tools?: ComponentChildren;
-    children?: ComponentChildren;
-}): import("preact").JSX.Element;
-export type Fact = [label: string, value: ComponentChildren, class_name?: string];
+    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("preact").JSX.Element;
+}): import("react").JSX.Element;
 export declare function Stack({ tight, children }: {
     tight?: boolean;
-    children: ComponentChildren;
-}): import("preact").JSX.Element;
+    children: ReactNode;
+}): import("react").JSX.Element;
 interface TileProps {
     label: string;
-    value: ComponentChildren;
+    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("preact").JSX.Element;
+export declare function Tile({ label, value, tone, class_name, href, value_first }: TileProps): import("react").JSX.Element;
 export declare function Tiles({ children }: {
-    children: ComponentChildren;
-}): import("preact").JSX.Element;
+    children: ReactNode;
+}): import("react").JSX.Element;
 interface CardProps {
-    title: ComponentChildren;
-    subtitle?: ComponentChildren;
-    badge?: ComponentChildren;
+    title: ReactNode;
+    subtitle?: ReactNode;
+    badge?: ReactNode;
     class_name?: string;
     href?: string;
     on_click?: () => void;
-    children?: ComponentChildren;
+    children?: ReactNode;
 }
-export declare function Card({ title, subtitle, badge, class_name, href, on_click, children }: CardProps): import("preact").JSX.Element;
+export declare function Card({ title, subtitle, badge, class_name, href, on_click, children }: CardProps): import("react").JSX.Element;
 export declare function Cards({ children }: {
-    children: ComponentChildren;
-}): import("preact").JSX.Element;
+    children: ReactNode;
+}): import("react").JSX.Element;
 export interface TabItem<Id extends string> {
     id: Id;
     label: string;
@@ -49,13 +49,13 @@ export declare function Tabs<Id extends string>({ items, active, label, on_selec
     active: Id;
     label?: string;
     on_select?: (id: Id) => void;
-}): import("preact").JSX.Element;
+}): import("react").JSX.Element;
 export declare function Crumbs({ items }: {
     items: [label: string, href: string | null][];
-}): import("preact").JSX.Element;
+}): import("react").JSX.Element;
 export declare function Toolbar({ children }: {
-    children: ComponentChildren;
-}): import("preact").JSX.Element;
+    children: ReactNode;
+}): import("react").JSX.Element;
 interface Step {
     text: string;
     href: string | null;
@@ -63,18 +63,18 @@ interface Step {
 export declare function Stepper({ label, previous, position, next }: {
     label: string;
     previous: Step;
-    position: ComponentChildren;
+    position: ReactNode;
     next: Step;
-}): import("preact").JSX.Element;
+}): import("react").JSX.Element;
 export declare function SettingsGroup({ heading, hint, children }: {
     heading: string;
-    hint?: ComponentChildren;
-    children: ComponentChildren;
-}): import("preact").JSX.Element;
+    hint?: ReactNode;
+    children: ReactNode;
+}): import("react").JSX.Element;
 export declare function SettingRow({ label, hint, as_label, children }: {
-    label: ComponentChildren;
-    hint?: ComponentChildren;
+    label: ReactNode;
+    hint?: ReactNode;
     as_label?: boolean;
-    children: ComponentChildren;
-}): import("preact").JSX.Element;
+    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 {};

package/dist/web/react/shell.js

@@ -0,0 +1,81 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// The frame around every view: the top bar, the sidebar that slides in on phones and resizes on wide screens, the theme button, and the toasts, dialogs and menus.
+import { useEffect, useRef, useState } from "react";
+import { current_route } from "../router.js";
+import { store_sizes, stored_sizes } from "../split.js";
+import { next_theme } from "../theme.js";
+import { Dialogs } from "./dialog.js";
+import { ContextMenus } from "./menus.js";
+import { ResizeHandle } from "./split.js";
+import { Toasts } from "./toasts.js";
+// ── Route ────────────────────────────────────────────────────────────────────
+// The hash route, read again whenever it changes.
+export function use_route() {
+    const [route, set_route] = useState(current_route);
+    useEffect(() => {
+        const changed = () => set_route(current_route());
+        window.addEventListener("hashchange", changed);
+        return () => window.removeEventListener("hashchange", changed);
+    }, []);
+    return route;
+}
+// ── Theme ────────────────────────────────────────────────────────────────────
+const theme_labels = { system: ["◐", "Theme: system"], light: ["☀", "Theme: light"], dark: ["☾", "Theme: dark"] };
+// Steps through system, light and dark, its glyph and label showing the current one.
+export function ThemeButton({ choice }) {
+    const [theme, set_theme] = useState(choice.get);
+    useEffect(() => choice.on_change(set_theme), []);
+    const [icon, text] = theme_labels[theme];
+    return (_jsx("button", { id: "theme", className: "icon", title: `${text} (click to change)`, "aria-label": `${text}, click to change`, onClick: () => choice.set(next_theme(choice.get())), children: icon }));
+}
+// The sidebar's width: the app's own, else the one kept in this browser, else the default.
+function use_sidebar_width(spec) {
+    const [kept, set_kept] = useState(() => spec?.storage_key ? stored_sizes(spec.storage_key, 1)?.[0] : undefined);
+    const width = spec ? Math.min(spec.max, Math.max(spec.min, spec.width ?? kept ?? spec.default_width)) : undefined;
+    const change = (next, done) => {
+        if (spec?.width === undefined)
+            set_kept(next);
+        if (done && spec?.storage_key)
+            store_sizes(spec.storage_key, [next]);
+        spec?.on_change?.(next, done);
+    };
+    return [width, change];
+}
+export function Shell({ brand, sections = [], active, sidebar: sidebar_content, sidebar_width, theme, user, user_href, on_logout, tools, sidebar_foot, view_key, children }) {
+    const [menu_open, set_menu_open] = useState(false);
+    const main = useRef(null);
+    const menu_button = useRef(null);
+    const sidebar = useRef(null);
+    const first_view = useRef(true);
+    const logged_out = user === null;
+    const [width, change_width] = use_sidebar_width(sidebar_width);
+    // The login page has no theme button, so the saved theme is set here.
+    useEffect(() => theme.apply(), []);
+    useEffect(() => {
+        document.body.classList.toggle("logged-out", logged_out);
+        document.body.classList.toggle("menu-open", menu_open);
+    }, [logged_out, menu_open]);
+    useEffect(() => {
+        if (menu_open)
+            sidebar.current?.querySelector("a[href], button:not(:disabled), input, select, textarea, [tabindex='0']")?.focus();
+        if (!menu_open)
+            return;
+        const escape = (event) => {
+            if (event.key !== "Escape")
+                return;
+            set_menu_open(false);
+            menu_button.current?.focus();
+        };
+        document.addEventListener("keydown", escape);
+        return () => document.removeEventListener("keydown", escape);
+    }, [menu_open]);
+    // A new view closes the menu and takes focus, which tells a screen reader the page changed, but not on the first load.
+    useEffect(() => {
+        set_menu_open(false);
+        if (!first_view.current)
+            main.current?.focus({ preventScroll: true });
+        first_view.current = false;
+        window.scrollTo(0, 0);
+    }, [view_key]);
+    return (_jsxs(_Fragment, { children: [_jsx("a", { className: "skip", href: "#main", children: "Skip to content" }), _jsxs("header", { className: "topbar", children: [_jsx("button", { ref: menu_button, className: "icon menu-button", "aria-label": "Open the menu", "aria-expanded": menu_open, "aria-controls": "sidebar", onClick: () => set_menu_open(!menu_open), children: "\u2630" }), _jsx("a", { href: "#/", className: "brand", children: brand }), !logged_out && tools, !logged_out && _jsx(ThemeButton, { choice: theme }), !logged_out && (user_href ? _jsx("a", { className: "account-link", href: user_href, children: user }) : _jsx("span", { className: "user-name", children: user })), !logged_out && on_logout && _jsx("button", { onClick: on_logout, children: "Log out" })] }), _jsxs("div", { className: "layout", style: width === undefined ? undefined : { "--sidebar-width": `${width}px` }, children: [_jsxs("nav", { ref: sidebar, id: "sidebar", className: "sidebar", "aria-label": "Main", children: [sidebar_content ?? sections.map((section) => (_jsx("a", { href: section.href, "data-section": section.id, className: section.id === active ? "active" : undefined, "aria-current": section.id === active ? "page" : undefined, children: section.label }, section.id))), sidebar_foot, sidebar_width && width !== undefined && (_jsx(ResizeHandle, { side: "left", size: width, min: sidebar_width.min, max: sidebar_width.max, default_size: sidebar_width.default_width, on_resize: (next) => change_width(next, false), on_resize_end: (next) => change_width(next, true), label: "Resize the sidebar", class_name: "sidebar-resize" }))] }), _jsx("div", { className: "scrim", hidden: !menu_open, onClick: () => set_menu_open(false) }), _jsx("main", { ref: main, id: "main", tabIndex: -1, children: children })] }), _jsx(Toasts, {}), _jsx(Dialogs, {}), _jsx(ContextMenus, {})] }));
+}