@mdbase-dev/ui 0.1.0-beta.117

package/dist/AppSwitcher.js

@@ -0,0 +1,38 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId, useRef, useState } from "react";
+import { mdbaseAppHref, withAppUrls } from "./apps.js";
+import { MdbaseAppMark, Wordmark } from "./brand.js";
+import { moveMenuFocus, useMenuPopover } from "./popover.js";
+/**
+ * The product wordmark as a menu for opening the current collection in the other mdbase apps.
+ * Each opens in a new tab so the current app stays where it is.
+ */
+export function AppSwitcher({ current, urls = {}, motion }) {
+    const menuId = useId();
+    const triggerRef = useRef(null);
+    const [open, setOpen] = useState(false);
+    const close = (refocus) => {
+        setOpen(false);
+        if (refocus)
+            triggerRef.current?.focus();
+    };
+    return _jsxs(_Fragment, { children: [_jsxs("button", { ref: triggerRef, type: "button", className: "mdbase-app-switcher", "aria-label": `mdbase ${current}: open this collection in another app`, "aria-haspopup": "menu", "aria-expanded": open, "aria-controls": open ? menuId : undefined, title: "Open in another mdbase app", onClick: () => (open ? close(false) : setOpen(true)), onKeyDown: (event) => {
+                    if (!open && (event.key === "ArrowDown" || event.key === "ArrowUp")) {
+                        event.preventDefault();
+                        setOpen(true);
+                    }
+                }, children: [_jsx(Wordmark, { app: current, motion: motion }), _jsx("svg", { className: "mdbase-app-switcher-chevron", viewBox: "0 0 24 24", "aria-hidden": "true", children: _jsx("path", { d: "m7 10 5 5 5-5" }) })] }), open ? _jsx(AppMenu, { id: menuId, apps: withAppUrls(urls), current: current, triggerRef: triggerRef, onClose: close }) : null] });
+}
+function AppMenu({ id, apps, current, triggerRef, onClose }) {
+    const menuRef = useRef(null);
+    useMenuPopover(menuRef, triggerRef, onClose, { width: 320, focus: 'a[role="menuitem"]' });
+    const heading = new URL(location.href).searchParams.has("collection") ? "Open this collection in" : "mdbase apps";
+    return _jsxs("div", { ref: menuRef, id: id, className: "mdbase-menu", popover: "manual", role: "menu", "aria-label": heading, tabIndex: -1, onKeyDown: (event) => moveMenuFocus(event, menuRef.current), children: [_jsx("div", { className: "mdbase-menu-heading", role: "presentation", children: heading }), _jsx("div", { className: "mdbase-menu-list", children: apps.map((app) => _jsx(AppItem, { app: app, current: app.id === current, onOpen: () => onClose(false) }, app.id)) }), _jsx("p", { className: "mdbase-menu-note", children: "Opens in a new tab" })] });
+}
+function AppItem({ app, current, onOpen }) {
+    const copy = _jsxs(_Fragment, { children: [_jsx(MdbaseAppMark, { app: app.id, className: "mdbase-app-menu-mark" }), _jsxs("span", { className: "mdbase-menu-copy", children: [_jsx("strong", { children: app.name }), _jsx("small", { children: app.description })] })] });
+    if (current) {
+        return _jsxs("div", { className: "mdbase-menu-item is-current", role: "menuitem", "aria-current": "page", "aria-disabled": "true", tabIndex: -1, children: [copy, _jsx("span", { className: "mdbase-app-menu-current", children: "Current" })] });
+    }
+    return _jsxs("a", { className: "mdbase-menu-item", role: "menuitem", href: mdbaseAppHref(app.url, location.href), target: "_blank", rel: "noopener", onClick: onOpen, children: [copy, _jsx("svg", { className: "mdbase-app-menu-external", viewBox: "0 0 24 24", "aria-hidden": "true", children: _jsx("path", { d: "M10 5.5H5.5v13h13V14M13.5 5.5h5v5M18.5 5.5 11 13" }) }), _jsx("span", { className: "mdbase-visually-hidden", children: " (opens in a new tab)" })] });
+}

package/dist/CommandPalette.d.ts

@@ -0,0 +1,37 @@
+import { type JSX } from "react";
+export interface Command {
+    readonly id: string;
+    readonly label: string;
+    readonly detail?: string | undefined;
+    /** Commands show under their group's heading, in the order the groups first appear. */
+    readonly group: string;
+    readonly keywords?: string | undefined;
+    /** For example "mod+shift+f"; see shortcutLabel. */
+    readonly shortcut?: string | undefined;
+    readonly run: () => void;
+    /** A variant run with Shift+Enter or Shift+click, such as opening beside the document. */
+    readonly alternate?: {
+        readonly label: string;
+        readonly run: () => void;
+    } | undefined;
+}
+export declare function isApplePlatform(): boolean;
+/** "mod+shift+f" as the platform writes it: ⌘⇧F on Apple systems, Ctrl+Shift+F elsewhere. */
+export declare function shortcutLabel(shortcut: string): string;
+/**
+ * Without a query, show a few of each group (every command of the groups in `showAll`); with
+ * one, show every command matching all its terms, grouped in their original order.
+ */
+export declare function matchingCommands(commands: readonly Command[], query: string, showAll?: readonly string[]): readonly Command[];
+/**
+ * Find or run anything: every mdbase app opens it with Mod+K. Typing filters commands; the
+ * arrows move, Enter runs, Shift+Enter runs a command's alternate, Escape closes.
+ */
+export declare function CommandPalette({ open, commands, onClose, label, placeholder, showAll }: {
+    readonly open: boolean;
+    readonly commands: readonly Command[];
+    readonly onClose: () => void;
+    readonly label?: string | undefined;
+    readonly placeholder?: string | undefined;
+    readonly showAll?: readonly string[] | undefined;
+}): JSX.Element | null;

package/dist/CommandPalette.js

@@ -0,0 +1,130 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment, useEffect, useMemo, useRef, useState } from "react";
+export function isApplePlatform() {
+    return typeof navigator !== "undefined" && /Mac|iPhone|iPad/u.test(navigator.platform || navigator.userAgent);
+}
+/** "mod+shift+f" as the platform writes it: ⌘⇧F on Apple systems, Ctrl+Shift+F elsewhere. */
+export function shortcutLabel(shortcut) {
+    const apple = isApplePlatform();
+    return shortcut
+        .split("+")
+        .map((part) => {
+        switch (part.toLowerCase()) {
+            case "mod": return apple ? "⌘" : "Ctrl";
+            case "shift": return apple ? "⇧" : "Shift";
+            case "alt": return apple ? "⌥" : "Alt";
+            default: return part.length === 1 ? part.toUpperCase() : part;
+        }
+    })
+        .join(apple ? "" : "+");
+}
+const browseLimit = 6;
+const searchLimit = 40;
+/**
+ * Without a query, show a few of each group (every command of the groups in `showAll`); with
+ * one, show every command matching all its terms, grouped in their original order.
+ */
+export function matchingCommands(commands, query, showAll = []) {
+    const terms = query.trim().toLocaleLowerCase().split(/\s+/u).filter(Boolean);
+    if (terms.length === 0) {
+        const counts = new Map();
+        return commands.filter((command) => {
+            const count = counts.get(command.group) ?? 0;
+            counts.set(command.group, count + 1);
+            return showAll.includes(command.group) || count < browseLimit;
+        });
+    }
+    const matches = commands.filter((command) => {
+        const content = `${command.label} ${command.detail ?? ""} ${command.group} ${command.keywords ?? ""}`.toLocaleLowerCase();
+        return terms.every((term) => content.includes(term));
+    });
+    const groups = [...new Set(matches.map(({ group }) => group))];
+    return groups.flatMap((group) => matches.filter((command) => command.group === group)).slice(0, searchLimit);
+}
+/**
+ * Find or run anything: every mdbase app opens it with Mod+K. Typing filters commands; the
+ * arrows move, Enter runs, Shift+Enter runs a command's alternate, Escape closes.
+ */
+export function CommandPalette({ open, commands, onClose, label = "Commands", placeholder = "Search commands", showAll }) {
+    return open ? _jsx(OpenCommandPalette, { commands: commands, onClose: onClose, label: label, placeholder: placeholder, showAll: showAll }) : null;
+}
+function OpenCommandPalette({ commands, onClose, label, placeholder, showAll }) {
+    const [query, setQuery] = useState("");
+    const [active, setActive] = useState(0);
+    const inputRef = useRef(null);
+    const paletteRef = useRef(null);
+    const matches = useMemo(() => matchingCommands(commands, query, showAll), [commands, query, showAll]);
+    useEffect(() => {
+        const previous = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+        globalThis.setTimeout(() => inputRef.current?.focus(), 0);
+        return () => previous?.focus();
+    }, []);
+    const run = (command, alternate = false) => {
+        onClose();
+        (alternate && command.alternate ? command.alternate.run : command.run)();
+    };
+    const hintId = `${label.replace(/\W+/gu, "-").toLowerCase()}-hint`;
+    return _jsxs("dialog", { className: "mdbase-command-backdrop", open: true, children: [_jsx("button", { className: "mdbase-command-dismiss", type: "button", "aria-label": `Close ${label.toLowerCase()}`, onClick: onClose }), _jsxs("section", { ref: paletteRef, className: "mdbase-command-palette", role: "dialog", "aria-modal": "true", "aria-label": label, onKeyDown: (event) => {
+                    if (event.key === "Escape") {
+                        event.preventDefault();
+                        onClose();
+                    }
+                    else if (event.key === "Tab") {
+                        trapFocus(event, paletteRef.current);
+                    }
+                }, children: [_jsxs("label", { className: "mdbase-command-search", children: [_jsxs("svg", { viewBox: "0 0 24 24", "aria-hidden": "true", fill: "none", stroke: "currentColor", strokeWidth: "1.6", children: [_jsx("circle", { cx: "11", cy: "11", r: "6.5" }), _jsx("path", { d: "m16 16 4 4" })] }), _jsx("span", { className: "mdbase-visually-hidden", children: placeholder }), _jsx("input", { ref: inputRef, value: query, placeholder: placeholder, onChange: (event) => {
+                                    setQuery(event.target.value);
+                                    setActive(0);
+                                }, onKeyDown: (event) => handleKeys(event, matches, active, setActive, run, onClose) })] }), _jsx("div", { className: "mdbase-command-results", role: "listbox", "aria-label": "Results", "aria-describedby": hintId, children: matches.length > 0
+                            ? matches.map((command, index) => _jsxs(Fragment, { children: [command.group !== matches[index - 1]?.group
+                                        ? _jsx("div", { className: "mdbase-command-group", role: "presentation", children: command.group })
+                                        : null, _jsx(CommandRow, { command: command, active: index === active, onRun: run })] }, command.id))
+                            : _jsx("div", { className: "mdbase-command-empty", children: "Nothing matches" }) }), _jsxs("footer", { className: "mdbase-command-footer", id: hintId, children: [_jsxs("span", { children: [_jsx("kbd", { children: "\u2191" }), _jsx("kbd", { children: "\u2193" }), " to move"] }), _jsxs("span", { children: [_jsx("kbd", { children: "\u21B5" }), " to open"] }), matches[active]?.alternate
+                                ? _jsxs("span", { children: [_jsx("kbd", { children: shortcutLabel("shift") }), _jsx("kbd", { children: "\u21B5" }), " ", matches[active].alternate.label.toLocaleLowerCase()] })
+                                : null, _jsxs("span", { children: [_jsx("kbd", { children: "Esc" }), " to close"] })] })] })] });
+}
+function trapFocus(event, container) {
+    if (!container)
+        return;
+    const items = [...container.querySelectorAll("input, button, [tabindex]:not([tabindex='-1'])")];
+    const first = items[0];
+    const last = items.at(-1);
+    if (!first || !last)
+        return;
+    if (event.shiftKey && document.activeElement === first) {
+        event.preventDefault();
+        last.focus();
+    }
+    else if (!event.shiftKey && document.activeElement === last) {
+        event.preventDefault();
+        first.focus();
+    }
+}
+function CommandRow({ command, active, onRun }) {
+    const ref = useRef(null);
+    useEffect(() => {
+        if (active)
+            ref.current?.scrollIntoView({ block: "nearest" });
+    }, [active]);
+    return _jsxs("button", { ref: ref, type: "button", role: "option", "aria-selected": active, onMouseDown: (event) => onRun(command, event.shiftKey), children: [_jsxs("span", { children: [_jsx("strong", { children: command.label }), command.detail ? _jsx("small", { children: command.detail }) : null] }), command.alternate && active
+                ? _jsxs("span", { className: "mdbase-command-alternate", children: [shortcutLabel("shift"), "\u21B5 ", command.alternate.label] })
+                : null, command.shortcut ? _jsx("kbd", { children: shortcutLabel(command.shortcut) }) : null] });
+}
+function handleKeys(event, matches, active, setActive, run, close) {
+    if (event.key === "Escape") {
+        event.preventDefault();
+        close();
+    }
+    else if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+        event.preventDefault();
+        const direction = event.key === "ArrowDown" ? 1 : -1;
+        setActive((active + direction + matches.length) % Math.max(1, matches.length));
+    }
+    else if (event.key === "Enter") {
+        const command = matches[active];
+        if (command) {
+            event.preventDefault();
+            run(command, event.shiftKey);
+        }
+    }
+}

package/dist/Dialog.d.ts

@@ -0,0 +1,12 @@
+import { type JSX, type ReactNode } from "react";
+/**
+ * A modal dialog on the native <dialog>: the browser keeps focus inside it and the page
+ * behind it inert. Escape, the close button or a press on the backdrop closes it.
+ */
+export declare function Dialog({ open, onClose, title, className, children }: {
+    readonly open: boolean;
+    readonly onClose: () => void;
+    readonly title: string;
+    readonly className?: string | undefined;
+    readonly children: ReactNode;
+}): JSX.Element;

package/dist/Dialog.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useLayoutEffect, useRef } from "react";
+/**
+ * A modal dialog on the native <dialog>: the browser keeps focus inside it and the page
+ * behind it inert. Escape, the close button or a press on the backdrop closes it.
+ */
+export function Dialog({ open, onClose, title, className, children }) {
+    const ref = useRef(null);
+    // A layout effect, so the dialog is open before fields inside it ask to be focused.
+    useLayoutEffect(() => {
+        const dialog = ref.current;
+        if (!dialog)
+            return;
+        if (open && !dialog.open)
+            dialog.showModal();
+        else if (!open && dialog.open)
+            dialog.close();
+    }, [open]);
+    return _jsx("dialog", { ref: ref, className: ["mdbase-dialog", className].filter(Boolean).join(" "), "aria-label": title, onClose: onClose, onMouseDown: (event) => {
+            if (event.target === event.currentTarget)
+                onClose();
+        }, children: open && _jsxs("div", { className: "mdbase-dialog-body", children: [_jsxs("header", { className: "mdbase-dialog-header", children: [_jsx("h2", { children: title }), _jsx("button", { type: "button", className: "mdbase-icon-button", onClick: onClose, "aria-label": "Close", children: _jsx("svg", { viewBox: "0 0 24 24", "aria-hidden": "true", fill: "none", stroke: "currentColor", strokeWidth: "1.6", strokeLinecap: "round", children: _jsx("path", { d: "m6 6 12 12M18 6 6 18" }) }) })] }), children] }) });
+}

package/dist/SaveNotice.d.ts

@@ -0,0 +1,17 @@
+import type { JSX } from "react";
+/**
+ * saved: confirmed, so it settles away (see .mdbase-settle in controls.css).
+ * saving: work in progress. pending: changed but not yet saved.
+ * attention: a conflict or failure, which never fades.
+ */
+export type SaveTone = "saved" | "saving" | "pending" | "attention";
+/**
+ * The minimal save notice every mdbase app shows beside what it edits. Put it inside an
+ * element with `mdbase-settle-host` so hovering or focusing that element brings a settled
+ * notice back.
+ */
+export declare function SaveNotice({ tone, label, className }: {
+    readonly tone: SaveTone;
+    readonly label?: string | undefined;
+    readonly className?: string | undefined;
+}): JSX.Element;

package/dist/SaveNotice.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const defaultLabels = {
+    saved: "Saved",
+    saving: "Saving",
+    pending: "Unsaved",
+    attention: "Needs attention"
+};
+/**
+ * The minimal save notice every mdbase app shows beside what it edits. Put it inside an
+ * element with `mdbase-settle-host` so hovering or focusing that element brings a settled
+ * notice back.
+ */
+export function SaveNotice({ tone, label = defaultLabels[tone], className }) {
+    return _jsxs("span", { className: ["mdbase-save-notice", `is-${tone}`, tone === "saved" && "mdbase-settle", className].filter(Boolean).join(" "), "aria-live": "polite", children: [tone === "saved" && _jsx("svg", { viewBox: "0 0 16 16", "aria-hidden": "true", children: _jsx("path", { d: "m3.5 8.5 3 3 6-7" }) }), label] });
+}

package/dist/Select.d.ts

@@ -0,0 +1,20 @@
+import { type ButtonHTMLAttributes, type JSX, type Ref } from "react";
+import { type SelectItems } from "./select-model.js";
+export type { SelectItems, SelectOption, SelectOptionGroup } from "./select-model.js";
+type TriggerAttributes = Omit<ButtonHTMLAttributes<HTMLButtonElement>, "value" | "onChange" | "children" | "type" | "role">;
+export interface SelectProps<Value extends string> extends TriggerAttributes {
+    readonly value: Value | "";
+    readonly options: SelectItems<Value>;
+    readonly onChange: (value: Value) => void;
+    /** Shown while the value matches no option, like a native select's disabled first option. */
+    readonly placeholder?: string | undefined;
+    /** The trigger button, for focusing the control from elsewhere. */
+    readonly ref?: Ref<HTMLButtonElement> | undefined;
+}
+/**
+ * A styled single-choice dropdown following the ARIA select-only combobox pattern. The list
+ * opens in the browser's top layer, so clipped or transformed containers (virtual rows, side
+ * panels, menus) never cut it off, while it stays in the DOM beside its trigger: a click in
+ * the list still counts as inside any menu that contains the select.
+ */
+export declare function Select<Value extends string>({ value, options: items, onChange, placeholder, className, disabled, onKeyDown, onClick, ref, ...trigger }: SelectProps<Value>): JSX.Element;

package/dist/Select.js

@@ -0,0 +1,158 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId, useLayoutEffect, useRef, useState, } from "react";
+import { edgeOption, extendTypeahead, flattenOptions, stepOption, typeaheadOption, } from "./select-model.js";
+import { SelectList } from "./SelectList.js";
+import { useSelectPopover } from "./popover.js";
+/**
+ * A styled single-choice dropdown following the ARIA select-only combobox pattern. The list
+ * opens in the browser's top layer, so clipped or transformed containers (virtual rows, side
+ * panels, menus) never cut it off, while it stays in the DOM beside its trigger: a click in
+ * the list still counts as inside any menu that contains the select.
+ */
+export function Select({ value, options: items, onChange, placeholder, className, disabled, onKeyDown, onClick, ref, ...trigger }) {
+    const id = useId();
+    const triggerRef = useRef(null);
+    const listRef = useRef(null);
+    const options = flattenOptions(items);
+    const selected = options.findIndex((option) => option.value === value);
+    const state = useSelectState(options, selected, value, onChange, disabled, triggerRef);
+    useSelectPopover(state.open, triggerRef, listRef, () => state.close(false));
+    useLayoutEffect(() => {
+        if (state.open && listRef.current) {
+            revealOption(listRef.current, state.active);
+        }
+    }, [state.active, state.open]);
+    const label = selected >= 0 ? options[selected]?.label : placeholder;
+    return (_jsxs(_Fragment, { children: [_jsxs("button", { ...trigger, ref: (node) => {
+                    triggerRef.current = node;
+                    if (typeof ref === "function")
+                        ref(node);
+                    else if (ref)
+                        ref.current = node;
+                }, type: "button", role: "combobox", className: ["mdbase-select", className].filter(Boolean).join(" "), "data-value": value, disabled: disabled, "aria-haspopup": "listbox", "aria-expanded": state.open, "aria-controls": `${id}-list`, onClick: (event) => {
+                    onClick?.(event);
+                    if (!event.defaultPrevented) {
+                        state.toggle();
+                    }
+                }, onKeyDown: (event) => {
+                    onKeyDown?.(event);
+                    if (!event.defaultPrevented) {
+                        state.onTriggerKey(event);
+                    }
+                }, children: [_jsx("span", { className: selected >= 0 ? "mdbase-select-value" : "mdbase-select-value is-empty", children: label ?? "" }), _jsx("svg", { className: "mdbase-select-chevron", viewBox: "0 0 24 24", "aria-hidden": "true", children: _jsx("path", { d: "m7 10 5 5 5-5" }) })] }), _jsx(SelectList, { id: id, listRef: listRef, items: items, selected: selected, active: state.active, open: state.open, label: trigger["aria-label"], labelledBy: trigger["aria-labelledby"], onActivate: state.setActive, onChoose: state.choose, onKeyDown: state.onListKey })] }));
+}
+function useSelectState(options, selected, value, onChange, disabled, triggerRef) {
+    const [open, setOpen] = useState(false);
+    const [active, setActive] = useState(-1);
+    const typed = useRef({ text: "", at: 0 });
+    const typeahead = (event, from) => {
+        typed.current = extendTypeahead(typed.current, event.key, event.timeStamp);
+        return typeaheadOption(options, typed.current.text, from);
+    };
+    const show = (index) => {
+        if (!disabled && options.length) {
+            setActive(index);
+            setOpen(true);
+        }
+    };
+    const close = (refocus) => {
+        setOpen(false);
+        if (refocus) {
+            triggerRef.current?.focus();
+        }
+    };
+    const commit = (index) => {
+        const option = options[index];
+        if (option && !option.disabled && option.value !== value) {
+            onChange(option.value);
+        }
+    };
+    const choose = (index) => {
+        if (options[index] && !options[index].disabled) {
+            close(true);
+            commit(index);
+        }
+    };
+    const initial = (key) => selected >= 0 ? selected : edgeOption(options, key === "ArrowUp" ? "last" : "first");
+    const onTriggerKey = (event) => {
+        if (disabled) {
+            return;
+        }
+        if (["ArrowDown", "ArrowUp", "Enter", " "].includes(event.key)) {
+            event.preventDefault();
+            show(initial(event.key));
+        }
+        else if (isPrintable(event)) {
+            // Like a native select, typing on the closed control changes the value directly.
+            commit(typeahead(event, selected));
+        }
+    };
+    const moves = {
+        ArrowDown: () => stepOption(options, active, 1),
+        ArrowUp: () => stepOption(options, active, -1),
+        Home: () => edgeOption(options, "first"),
+        End: () => edgeOption(options, "last"),
+        PageDown: () => stepPage(options, active, 1),
+        PageUp: () => stepPage(options, active, -1),
+    };
+    const onListKey = (event) => {
+        event.stopPropagation();
+        const move = moves[event.key];
+        if (move) {
+            event.preventDefault();
+            setActive(move());
+        }
+        else if (event.key === "Enter" || event.key === " ") {
+            event.preventDefault();
+            choose(active);
+        }
+        else if (event.key === "Escape" || event.key === "Tab") {
+            if (event.key === "Escape") {
+                event.preventDefault();
+            }
+            close(event.key === "Escape");
+        }
+        else if (isPrintable(event)) {
+            const match = typeahead(event, active);
+            setActive(match >= 0 ? match : active);
+        }
+    };
+    return {
+        open,
+        active,
+        setActive,
+        close,
+        choose,
+        toggle: () => (open ? close(false) : show(initial("ArrowDown"))),
+        onTriggerKey,
+        onListKey,
+    };
+}
+function stepPage(options, from, direction) {
+    let index = from;
+    for (let step = 0; step < 8; step += 1) {
+        index = stepOption(options, index, direction);
+    }
+    return index;
+}
+/**
+ * Scrolls only the list to show an option. scrollIntoView would also scroll the panels the
+ * list sits inside in the DOM, which the open list treats as the page moving and closes.
+ */
+function revealOption(list, index) {
+    const option = list.querySelector(`[data-index="${String(index)}"]`);
+    if (!option) {
+        return;
+    }
+    const top = option.offsetTop;
+    const bottom = top + option.offsetHeight;
+    if (top < list.scrollTop) {
+        list.scrollTop = top;
+    }
+    else if (bottom > list.scrollTop + list.clientHeight) {
+        list.scrollTop = bottom - list.clientHeight;
+    }
+}
+function isPrintable(event) {
+    return (event.key.length === 1 && event.key !== " " && !event.ctrlKey && !event.metaKey && !event.altKey);
+}

package/dist/SelectList.d.ts

@@ -0,0 +1,19 @@
+import { type SelectItems } from "./select-model.js";
+import type { JSX, KeyboardEvent, RefObject } from "react";
+/**
+ * The listbox half of a select. Focus stays on the listbox, which names its active option with
+ * aria-activedescendant, so options take pointer input only; the keyboard goes to the list.
+ */
+export declare function SelectList<Value extends string>({ id, listRef, items, selected, active, open, label, labelledBy, onActivate, onChoose, onKeyDown, }: {
+    readonly id: string;
+    readonly listRef: RefObject<HTMLDivElement | null>;
+    readonly items: SelectItems<Value>;
+    readonly selected: number;
+    readonly active: number;
+    readonly open: boolean;
+    readonly label: string | undefined;
+    readonly labelledBy: string | undefined;
+    readonly onActivate: (index: number) => void;
+    readonly onChoose: (index: number) => void;
+    readonly onKeyDown: (event: KeyboardEvent<HTMLDivElement>) => void;
+}): JSX.Element;

package/dist/SelectList.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { isOptionGroup, itemOffsets } from "./select-model.js";
+/**
+ * The listbox half of a select. Focus stays on the listbox, which names its active option with
+ * aria-activedescendant, so options take pointer input only; the keyboard goes to the list.
+ */
+export function SelectList({ id, listRef, items, selected, active, open, label, labelledBy, onActivate, onChoose, onKeyDown, }) {
+    const offsets = itemOffsets(items);
+    const option = (value, index) => (_jsx("div", { id: `${id}-option-${String(index)}`, "data-index": index, "data-value": value.value, role: "option", "aria-selected": index === selected, "aria-disabled": value.disabled ? true : undefined, className: index === active ? "mdbase-select-option is-active" : "mdbase-select-option", onPointerMove: () => {
+            if (!value.disabled && index !== active) {
+                onActivate(index);
+            }
+        }, onClick: () => onChoose(index), children: value.label }, value.value));
+    return (_jsx("div", { ref: listRef, id: `${id}-list`, className: "mdbase-select-list", popover: "manual", role: "listbox", tabIndex: -1, "aria-label": label, "aria-labelledby": labelledBy, "aria-activedescendant": open && active >= 0 ? `${id}-option-${String(active)}` : undefined, onKeyDown: onKeyDown, onClick: (event) => {
+            event.stopPropagation();
+            event.preventDefault();
+        }, onDoubleClick: (event) => event.stopPropagation(), children: items.map((item, itemIndex) => {
+            const first = offsets[itemIndex] ?? 0;
+            return isOptionGroup(item) ? (_jsxs("div", { role: "group", "aria-label": item.label, children: [_jsx("div", { className: "mdbase-select-group", "aria-hidden": "true", children: item.label }), item.options.map((value, offset) => option(value, first + offset))] }, `group:${item.label}`)) : (option(item, first));
+        }) }));
+}

package/dist/ThemeSelect.d.ts

@@ -0,0 +1,12 @@
+import type { JSX } from "react";
+import { type ThemePreference } from "./theme.js";
+/**
+ * The one control for choosing System, Light or Dark. The app owns the preference (with
+ * loadThemePreference and saveThemePreference) because commands and menus may change it too.
+ */
+export declare function ThemeSelect({ value, onChange, className, label }: {
+    readonly value: ThemePreference;
+    readonly onChange: (value: ThemePreference) => void;
+    readonly className?: string | undefined;
+    readonly label?: string | undefined;
+}): JSX.Element;

package/dist/ThemeSelect.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Select } from "./Select.js";
+import { themePreferences } from "./theme.js";
+const themeLabels = { system: "System", light: "Light", dark: "Dark" };
+const themeOptions = themePreferences.map((value) => ({ value, label: themeLabels[value] }));
+/**
+ * The one control for choosing System, Light or Dark. The app owns the preference (with
+ * loadThemePreference and saveThemePreference) because commands and menus may change it too.
+ */
+export function ThemeSelect({ value, onChange, className, label = "Color theme" }) {
+    return _jsx(Select, { "aria-label": label, className: className, value: value, options: themeOptions, onChange: onChange });
+}

package/dist/apps.d.ts

@@ -0,0 +1,20 @@
+/**
+ * The mdbase apps a collection can be opened in. Editor is the canonical app for a
+ * collection; Reader and Writer serve particular workflows on the same records.
+ */
+export type MdbaseAppId = "editor" | "reader" | "writer";
+export interface MdbaseApp {
+    readonly id: MdbaseAppId;
+    readonly name: string;
+    readonly description: string;
+    /** Production origin. Lab and local builds substitute their own with `withAppUrls`. */
+    readonly url: string;
+}
+export declare const mdbaseApps: readonly MdbaseApp[];
+/**
+ * Replaces app URLs for a lab or local build, for example from
+ * `import.meta.env.VITE_MDBASE_WRITER_URL`. Unset entries keep production.
+ */
+export declare function withAppUrls(urls: Partial<Record<MdbaseAppId, string | undefined>>, apps?: readonly MdbaseApp[]): readonly MdbaseApp[];
+/** A link that opens the current page's collection in another app. */
+export declare function mdbaseAppHref(appUrl: string, currentHref: string): string;

package/dist/apps.js

@@ -0,0 +1,47 @@
+export const mdbaseApps = [
+    {
+        id: "editor",
+        name: "Editor",
+        description: "Browse and edit records",
+        url: "https://editor.mdbase.dev/"
+    },
+    {
+        id: "reader",
+        name: "Reader",
+        description: "Read and annotate sources",
+        url: "https://reader.mdbase.dev/"
+    },
+    {
+        id: "writer",
+        name: "Writer",
+        description: "Write manuscripts that cite your sources",
+        url: "https://writer.mdbase.dev/"
+    }
+];
+/**
+ * Replaces app URLs for a lab or local build, for example from
+ * `import.meta.env.VITE_MDBASE_WRITER_URL`. Unset entries keep production.
+ */
+export function withAppUrls(urls, apps = mdbaseApps) {
+    return apps.map((app) => {
+        const url = urls[app.id];
+        return url ? { ...app, url } : app;
+    });
+}
+/**
+ * Parameters every mdbase app reads the same way: `collection` is the Connect SDK's
+ * selection and `server` picks a non-default Connect server. App-specific parameters
+ * (Reader's `source`, Writer's `manuscript`) mean nothing to another app, so they stay behind.
+ */
+const sharedParameters = ["collection", "server"];
+/** A link that opens the current page's collection in another app. */
+export function mdbaseAppHref(appUrl, currentHref) {
+    const target = new URL(appUrl);
+    const current = new URL(currentHref);
+    for (const key of sharedParameters) {
+        const value = current.searchParams.get(key);
+        if (value)
+            target.searchParams.set(key, value);
+    }
+    return target.href;
+}