@matchstick-trading/primitives 0.0.10

package/dist/SymbolSearch.d.ts

@@ -0,0 +1,10 @@
+import { Root, Input, List, Option, Count } from './SymbolSearchParts.js';
+export * from './SymbolSearchParts.js';
+export declare const SymbolSearch: {
+    Root: typeof Root;
+    Input: typeof Input;
+    List: typeof List;
+    Option: typeof Option;
+    Count: typeof Count;
+};
+//# sourceMappingURL=SymbolSearch.d.ts.map

package/dist/SymbolSearch.js

@@ -0,0 +1,5 @@
+import { Root, Input, List, Option, Count } from './SymbolSearchParts.js';
+// The parts live in SymbolSearchParts.js (a client module). The namespace object is built here, outside it, so a server
+// component can write `SymbolSearch.Root`: a property of an object exported from a client module is not reachable there.
+export * from './SymbolSearchParts.js';
+export const SymbolSearch = { Root, Input, List, Option, Count };

package/dist/SymbolSearchParts.d.ts

@@ -0,0 +1,39 @@
+import { type ReactNode } from 'react';
+import { type Instrument, type SymbolMatch } from './core/symbol-search.js';
+export interface SymbolSearchRootProps {
+    instruments: readonly Instrument[];
+    /** Rows shown, 1 to 200; default 20. */
+    limit?: number;
+    venue?: string;
+    kind?: string;
+    /** True when the instrument list is synthetic; sets `data-synthetic` on the root. */
+    synthetic?: boolean;
+    onPick?: (instrument: Instrument) => void;
+    className?: string;
+    children?: ReactNode;
+}
+declare function Root({ instruments, limit, venue, kind, synthetic, onPick, className, children }: SymbolSearchRootProps): import("react").JSX.Element;
+/** The text box. One tab stop; it owns the keys. */
+declare function Input({ className, label, placeholder }: {
+    className?: string;
+    label?: string;
+    placeholder?: string;
+}): import("react").JSX.Element;
+/** The result list, given the rows to draw. Hidden while closed or empty. */
+declare function List({ className, children }: {
+    className?: string;
+    children: (rows: SymbolMatch[]) => ReactNode;
+}): import("react").JSX.Element;
+/** One row. `data-matched` says why it is here; `data-venue` keeps the same symbol on two venues apart. */
+declare function Option({ row, index, className, children }: {
+    row: SymbolMatch;
+    index: number;
+    className?: string;
+    children?: ReactNode;
+}): import("react").JSX.Element;
+/** The count, announced politely: "3 results", "No instrument matches". Nothing while the box is empty. */
+declare function Count({ className }: {
+    className?: string;
+}): import("react").JSX.Element;
+export { Root, Input, List, Option, Count };
+//# sourceMappingURL=SymbolSearchParts.d.ts.map

package/dist/SymbolSearchParts.js

@@ -0,0 +1,86 @@
+'use client';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { createContext, useCallback, useContext, useId, useMemo, useState } from 'react';
+import { buildSymbolIndex, nextSymbolIndex, resolveSymbolKey, searchSymbols } from './core/symbol-search.js';
+const Context = createContext(null);
+function useSearch(part) {
+    const context = useContext(Context);
+    if (!context)
+        throw new Error(`SymbolSearch.${part} needs a SymbolSearch.Root above it.`);
+    return context;
+}
+function Root({ instruments, limit = 20, venue, kind, synthetic, onPick, className, children }) {
+    const index = useMemo(() => buildSymbolIndex(instruments), [instruments]);
+    const [query, setQueryState] = useState('');
+    const [open, setOpen] = useState(false);
+    const [active, setActive] = useState(-1);
+    const id = useId();
+    const shown = Math.min(200, Math.max(1, Math.floor(limit) || 20));
+    const found = useMemo(() => searchSymbols(index, query, { limit: shown + 1, venue, kind }), [index, query, shown, venue, kind]);
+    const rows = found.slice(0, shown);
+    const more = found.length > shown;
+    const setQuery = useCallback((text) => {
+        setQueryState(text);
+        setOpen(text.trim() !== '');
+        setActive(text.trim() === '' ? -1 : 0); // the best match is highlighted, so Enter alone takes it
+    }, []);
+    const pick = useCallback((i) => {
+        const row = rows[i];
+        if (!row)
+            return;
+        setQueryState(row.instrument.symbol);
+        setOpen(false);
+        setActive(-1);
+        onPick?.(row.instrument);
+    }, [rows, onPick]);
+    const context = useMemo(() => ({
+        query, setQuery, open, setOpen, rows, more, active: active >= rows.length ? rows.length - 1 : active, setActive, pick,
+        listId: `${id}-list`, countId: `${id}-count`, optionId: (i) => `${id}-opt-${i}`,
+    }), [query, setQuery, open, rows, more, active, pick, id]);
+    return (_jsx(Context.Provider, { value: context, children: _jsx("div", { className: className, "data-synthetic": synthetic ? '' : undefined, children: children }) }));
+}
+/** The text box. One tab stop; it owns the keys. */
+function Input({ className, label = 'Search instruments', placeholder }) {
+    const { query, setQuery, open, setOpen, rows, active, setActive, pick, listId, countId, optionId } = useSearch('Input');
+    const onKeyDown = (event) => {
+        const action = resolveSymbolKey(event.nativeEvent, { open, hasText: query !== '' });
+        if (!action)
+            return;
+        if (action === 'pick' && rows.length === 0)
+            return;
+        event.preventDefault();
+        event.stopPropagation(); // these keys are not the page's transport shortcuts while the box has focus
+        if (action === 'next' || action === 'previous') {
+            if (!open && query.trim() !== '')
+                setOpen(true);
+            setActive(nextSymbolIndex(rows.length, active, action));
+        }
+        else if (action === 'pick')
+            pick(Math.max(0, active));
+        else if (action === 'close')
+            setOpen(false);
+        else
+            setQuery('');
+    };
+    return (_jsx("input", { className: className, type: "text", role: "combobox", "aria-label": label, "aria-autocomplete": "list", "aria-expanded": open && rows.length > 0, "aria-controls": listId, "aria-describedby": countId, "aria-activedescendant": open && active >= 0 && active < rows.length ? optionId(active) : undefined, autoComplete: "off", autoCapitalize: "characters", spellCheck: false, placeholder: placeholder, value: query, onChange: (event) => setQuery(event.target.value), onBlur: () => setOpen(false), onKeyDown: onKeyDown }));
+}
+/** The result list, given the rows to draw. Hidden while closed or empty. */
+function List({ className, children }) {
+    const { rows, open, listId } = useSearch('List');
+    return (_jsx("ul", { id: listId, className: className, role: "listbox", "aria-label": "Matching instruments", hidden: !open || rows.length === 0, children: open ? children(rows) : null }));
+}
+/** One row. `data-matched` says why it is here; `data-venue` keeps the same symbol on two venues apart. */
+function Option({ row, index, className, children }) {
+    const { active, pick, optionId } = useSearch('Option');
+    const { instrument } = row;
+    return (_jsx("li", { id: optionId(index), className: className, role: "option", "aria-selected": index === active, "data-matched": row.matchedOn, "data-venue": instrument.venue, onMouseDown: (event) => event.preventDefault(), onClick: () => pick(index), children: children ?? (_jsxs(_Fragment, { children: [_jsx("span", { "data-mt-numeric": "", children: instrument.symbol }), " ", _jsx("span", { children: instrument.venue }), instrument.name && _jsxs(_Fragment, { children: [" ", _jsx("span", { children: instrument.name })] }), row.matchedOn !== 'symbol' && _jsxs(_Fragment, { children: [" ", _jsxs("span", { children: ["(matched ", row.matchedOn, ")"] })] })] })) }));
+}
+/** The count, announced politely: "3 results", "No instrument matches". Nothing while the box is empty. */
+function Count({ className }) {
+    const { query, rows, more, countId } = useSearch('Count');
+    const text = query.trim() === '' ? ''
+        : rows.length === 0 ? `No instrument matches “${query.trim()}”.`
+            : `${rows.length}${more ? '+' : ''} ${rows.length === 1 && !more ? 'result' : 'results'}${more ? ', first rows shown' : ''}.`;
+    return _jsx("output", { id: countId, className: className, "aria-live": "polite", children: text });
+}
+export { Root, Input, List, Option, Count };

package/dist/Tape.d.ts

@@ -0,0 +1,15 @@
+import { Root, Table, Header, Row, Time, Price, Size, Side, Summary, Status } from './TapeParts.js';
+export * from './TapeParts.js';
+export declare const Tape: {
+    Root: typeof Root;
+    Table: typeof Table;
+    Header: typeof Header;
+    Row: typeof Row;
+    Time: typeof Time;
+    Price: typeof Price;
+    Size: typeof Size;
+    Side: typeof Side;
+    Summary: typeof Summary;
+    Status: typeof Status;
+};
+//# sourceMappingURL=Tape.d.ts.map

package/dist/Tape.js

@@ -0,0 +1,5 @@
+import { Root, Table, Header, Row, Time, Price, Size, Side, Summary, Status } from './TapeParts.js';
+// The parts live in TapeParts.js (a client module). The namespace object is built here, outside it, so a server
+// component can write `Tape.Root`: a property of an object exported from a client module is not reachable there.
+export * from './TapeParts.js';
+export const Tape = { Root, Table, Header, Row, Time, Price, Size, Side, Summary, Status };

package/dist/TapeParts.d.ts

@@ -0,0 +1,69 @@
+import { type ReactNode } from 'react';
+import { type TapeIssue, type TapeRow, type TapeTrade } from './core/tape.js';
+export interface TapeRootProps {
+    /** The trades, oldest first. Anything that breaks a rule is reported by `Tape.Status` and left out. */
+    trades: readonly TapeTrade[];
+    /** How many of the newest rows to show. Default 50. */
+    limit?: number;
+    /** How often the summary line may change, in milliseconds. Default 5000. */
+    summaryEveryMs?: number;
+    /** Enter or Space on a focused row. */
+    onSelect?: (row: TapeRow) => void;
+    className?: string;
+    /** The parts, given the rows to show (newest first, held while the pointer or focus is on the tape). */
+    children: (rows: TapeRow[]) => ReactNode;
+}
+declare function Root({ trades, limit, summaryEveryMs, onSelect, className, children }: TapeRootProps): import("react").JSX.Element;
+/** The table. Give it a caption through `caption`; the rows go inside `tbody`. */
+declare function Table({ caption, className, captionClassName, children }: {
+    caption: string;
+    className?: string;
+    captionClassName?: string;
+    children: ReactNode;
+}): import("react").JSX.Element;
+/** The header row. Put the `<th scope="col">` cells inside. */
+declare function Header({ className, children }: {
+    className?: string;
+    children: ReactNode;
+}): import("react").JSX.Element;
+/** One trade. A single tab stop for the tape: the active row, or the newest. Holding the pointer does not move it. */
+declare function Row({ row, selected, className, children }: {
+    row: TapeRow;
+    selected?: boolean;
+    className?: string;
+    children: ReactNode;
+}): import("react").JSX.Element;
+/** The time as recorded, UTC. */
+declare function Time({ row, className }: {
+    row: TapeRow;
+    className?: string;
+}): import("react").JSX.Element;
+declare function Price({ row, className }: {
+    row: TapeRow;
+    className?: string;
+}): import("react").JSX.Element;
+declare function Size({ row, className }: {
+    row: TapeRow;
+    className?: string;
+}): import("react").JSX.Element;
+/** The side in words; tokens.css adds the mark so it never rests on colour alone. An unknown side has no colour. */
+declare function Side({ row, className, label }: {
+    row: TapeRow;
+    className?: string;
+    label?: string;
+}): import("react").JSX.Element;
+/** The polite live line: a summary of the tape on a timer. Render it once, outside the table. */
+declare function Summary({ className }: {
+    className?: string;
+}): import("react").JSX.Element;
+/** What the tape is doing that the rows do not say: paused with N new waiting, and rows left out for breaking a rule. */
+declare function Status({ className, children }: {
+    className?: string;
+    children?: (state: {
+        paused: boolean;
+        waiting: number;
+        issues: TapeIssue[];
+    }) => ReactNode;
+}): import("react").JSX.Element | null;
+export { Root, Table, Header, Row, Time, Price, Size, Side, Summary, Status };
+//# sourceMappingURL=TapeParts.d.ts.map

package/dist/TapeParts.js

@@ -0,0 +1,139 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createContext, useContext, useEffect, useMemo, useRef, useState } from 'react';
+import { TAPE_SIDE_LABEL, holdTape, newestFirst, nextTapeIndex, readTape, resolveTapeKey, tapeSummary } from './core/tape.js';
+const Context = createContext(null);
+function useTape(part) {
+    const context = useContext(Context);
+    if (!context)
+        throw new Error(`Tape.${part} needs a Tape.Root above it.`);
+    return context;
+}
+function Root({ trades, limit = 50, summaryEveryMs = 5000, onSelect, className, children }) {
+    const read = useMemo(() => readTape(trades), [trades]);
+    const [pointer, setPointer] = useState(false);
+    const [focus, setFocus] = useState(false);
+    const [held, setHeld] = useState(null);
+    const [activeId, setActiveId] = useState(null);
+    const root = useRef(null);
+    const live = useMemo(() => newestFirst(read.rows).slice(0, Math.max(0, limit)), [read.rows, limit]);
+    const paused = pointer || focus;
+    const holding = paused && held ? holdTape(held, read.rows) : null;
+    const shown = holding ? holding.rows : live;
+    const waiting = holding ? holding.waiting : 0;
+    const summary = useMemo(() => tapeSummary(read.rows), [read.rows]);
+    const firstId = shown.length ? shown[0].id : null;
+    // If the row last focused has left the shown rows, the tab stop goes back to the newest row.
+    const stopId = activeId !== null && shown.some((r) => r.id === activeId) ? activeId : null;
+    const freeze = () => setHeld((current) => current ?? live.map((r) => r.id));
+    const release = (next) => { if (!next)
+        setHeld(null); };
+    const focusRow = (id) => {
+        setActiveId(id);
+        for (const tr of root.current?.querySelectorAll('tr[data-tape-row]') ?? []) {
+            if (tr.dataset.tapeRow === id) {
+                tr.focus();
+                return;
+            }
+        }
+    };
+    const onKeyDown = (event) => {
+        const action = resolveTapeKey(event.nativeEvent);
+        if (!action)
+            return;
+        const onRow = event.target.closest('tr[data-tape-row]');
+        if (!onRow)
+            return;
+        if (action.type === 'select') {
+            if (event.target !== onRow)
+                return; // a control inside the row keeps its own Enter and Space
+            const row = shown.find((r) => r.id === onRow.dataset.tapeRow);
+            if (!row || !onSelect)
+                return;
+            event.preventDefault();
+            onSelect(row);
+            return;
+        }
+        event.preventDefault();
+        event.stopPropagation(); // these keys are also page shortcuts
+        const index = shown.findIndex((r) => r.id === onRow.dataset.tapeRow);
+        const to = nextTapeIndex(shown.length, index, action.to);
+        if (to >= 0)
+            focusRow(shown[to].id);
+    };
+    const onBlur = (event) => {
+        if (event.currentTarget.contains(event.relatedTarget))
+            return;
+        setFocus(false);
+        release(pointer);
+    };
+    // A focused row that the host's window drops leaves the page without a blur event, so let go of the hold here.
+    useEffect(() => {
+        if (focus && root.current && !root.current.contains(document.activeElement)) {
+            setFocus(false);
+            if (!pointer)
+                setHeld(null);
+        }
+    }, [shown, focus, pointer]);
+    // The summary changes on a timer, and not at all while someone is reading rows.
+    const latest = useRef(summary);
+    latest.current = summary;
+    const pausedRef = useRef(paused);
+    pausedRef.current = paused;
+    const [announced, setAnnounced] = useState(summary);
+    useEffect(() => {
+        const id = setInterval(() => { if (!pausedRef.current)
+            setAnnounced(latest.current); }, Math.max(1000, summaryEveryMs));
+        return () => clearInterval(id);
+    }, [summaryEveryMs]);
+    const context = useMemo(() => ({ issues: read.issues, paused, waiting, summary: announced, activeId: stopId, firstId, setActive: setActiveId }), [read.issues, paused, waiting, announced, stopId, firstId]);
+    return (_jsx(Context.Provider, { value: context, children: _jsx("div", { ref: root, className: className, "data-mt": "", "data-paused": paused ? '' : undefined, onPointerEnter: () => { setPointer(true); freeze(); }, onPointerLeave: () => { setPointer(false); release(focus); }, onFocus: () => { setFocus(true); freeze(); }, onBlur: onBlur, onKeyDown: onKeyDown, children: children(shown) }) }));
+}
+/** The table. Give it a caption through `caption`; the rows go inside `tbody`. */
+function Table({ caption, className, captionClassName, children }) {
+    return (_jsxs("table", { className: className, children: [_jsx("caption", { className: captionClassName, children: caption }), children] }));
+}
+/** The header row. Put the `<th scope="col">` cells inside. */
+function Header({ className, children }) {
+    return _jsx("thead", { children: _jsx("tr", { className: className, children: children }) });
+}
+/** One trade. A single tab stop for the tape: the active row, or the newest. Holding the pointer does not move it. */
+function Row({ row, selected, className, children }) {
+    const { activeId, firstId, setActive } = useTape('Row');
+    const stop = activeId === null ? row.id === firstId : row.id === activeId;
+    return (_jsx("tr", { className: className, "data-tape-row": row.id, "aria-selected": selected === undefined ? undefined : selected, tabIndex: stop ? 0 : -1, onFocus: () => setActive(row.id), children: children }));
+}
+/** The time as recorded, UTC. */
+function Time({ row, className }) {
+    return _jsx("th", { scope: "row", className: className, "data-mt-numeric": "", children: _jsx("time", { dateTime: row.t, children: row.time }) });
+}
+function Price({ row, className }) {
+    return _jsx("td", { className: className, "data-mt-numeric": "", children: row.price });
+}
+function Size({ row, className }) {
+    return _jsx("td", { className: className, "data-mt-numeric": "", children: row.size });
+}
+/** The side in words; tokens.css adds the mark so it never rests on colour alone. An unknown side has no colour. */
+function Side({ row, className, label }) {
+    return _jsx("td", { className: className, "data-mt": "", "data-tape-side": row.side === 'unknown' ? undefined : row.side, title: row.side === 'unknown' ? 'The feed did not say which side was the aggressor' : undefined, children: label ?? TAPE_SIDE_LABEL[row.side] });
+}
+/** The polite live line: a summary of the tape on a timer. Render it once, outside the table. */
+function Summary({ className }) {
+    const { summary } = useTape('Summary');
+    return _jsx("p", { className: className, role: "status", "aria-live": "polite", "aria-atomic": "true", children: summary });
+}
+/** What the tape is doing that the rows do not say: paused with N new waiting, and rows left out for breaking a rule. */
+function Status({ className, children }) {
+    const { paused, waiting, issues } = useTape('Status');
+    if (children)
+        return _jsx("div", { className: className, children: children({ paused, waiting, issues }) });
+    const parts = [];
+    if (paused)
+        parts.push(waiting > 0 ? `Paused. ${waiting} new ${waiting === 1 ? 'trade' : 'trades'} waiting.` : 'Paused while you read.');
+    if (issues.length)
+        parts.push(`${issues.length} ${issues.length === 1 ? 'row' : 'rows'} left out: ${issues.slice(0, 3).map((i) => `row ${i.index + 1}, ${i.message}`).join('; ')}${issues.length > 3 ? '; …' : ''}.`);
+    if (!parts.length)
+        return null;
+    return _jsx("p", { className: className, "data-paused": paused ? '' : undefined, children: parts.join(' ') });
+}
+export { Root, Table, Header, Row, Time, Price, Size, Side, Summary, Status };

package/dist/Toolbar.d.ts

@@ -0,0 +1,8 @@
+import { Root, Button, Separator } from './ToolbarParts.js';
+export * from './ToolbarParts.js';
+export declare const Toolbar: {
+    Root: typeof Root;
+    Button: typeof Button;
+    Separator: typeof Separator;
+};
+//# sourceMappingURL=Toolbar.d.ts.map

package/dist/Toolbar.js

@@ -0,0 +1,5 @@
+import { Root, Button, Separator } from './ToolbarParts.js';
+// The parts live in ToolbarParts.js (a client module). The namespace object is built here, outside it, so a server
+// component can write `Toolbar.Root`: a property of an object exported from a client module is not reachable there.
+export * from './ToolbarParts.js';
+export const Toolbar = { Root, Button, Separator };

package/dist/ToolbarParts.d.ts

@@ -0,0 +1,61 @@
+import { type ButtonHTMLAttributes, type ReactNode, type RefObject } from 'react';
+import { type NameProps } from './accessible-name.js';
+/**
+ * A toolbar as parts: Root, Button and Separator. Headless: parts add `data-part` and `data-mt`; the host gives them looks.
+ *
+ * The toolbar is ONE tab stop (roving tabindex). Inside it the arrow keys along its orientation move between the items,
+ * Home and End jump to the ends, and Escape sends focus to `returnFocusTo` (the chart, for a drawing toolbar). An item
+ * is a Toolbar.Button (a plain button, or a toggle with `pressed`) or a Menu.Trigger.
+ */
+type Orientation = 'horizontal' | 'vertical';
+interface ToolbarContext {
+    orientation: Orientation;
+    stop: string | null;
+    setStop: (id: string) => void;
+    register: (id: string, element: HTMLElement) => void;
+    unregister: (id: string) => void;
+    /** Ask the root to re-check which item is the tab stop (an item became enabled or disabled). */
+    refresh: () => void;
+}
+/** The toolbar a part sits in, or null outside one. Menu.Trigger uses it to join the roving tab stop. */
+export declare function useToolbarContext(): ToolbarContext | null;
+/** Makes `element` an item of the toolbar above it, if any; returns the tabIndex and focus handler to put on it. */
+export declare function useToolbarItem(element: RefObject<HTMLElement | null>, disabled?: boolean): {
+    tabIndex: 0 | -1 | undefined;
+    onFocus: (() => void) | undefined;
+};
+type DataAttributes = {
+    [attribute: `data-${string}`]: string | number | boolean | undefined;
+};
+export interface ToolbarRootProps extends DataAttributes {
+    className?: string;
+    /** Names the toolbar. Default "Toolbar"; give it the real name ("Drawing tools"). */
+    'aria-label'?: string;
+    /** Which arrow keys move between items. Default 'horizontal' (Left and Right); 'vertical' uses Up and Down. */
+    orientation?: Orientation;
+    /**
+     * Where Escape sends focus: an element ref, or a function that returns the element (it is read when Escape is pressed,
+     * so the chart need not exist yet). Without it Escape does nothing here.
+     */
+    returnFocusTo?: RefObject<HTMLElement | SVGElement | null> | (() => HTMLElement | SVGElement | null);
+    children?: ReactNode;
+}
+/** role="toolbar" with one tab stop. Put Toolbar.Button and Menu.Trigger inside it, in any wrapper. */
+declare function Root({ className, 'aria-label': label, orientation, returnFocusTo, children, ...rest }: ToolbarRootProps): import("react").JSX.Element;
+export interface ToolbarButtonProps extends NameProps, DataAttributes, Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'type'> {
+    /** Makes the button a toggle: `aria-pressed` is this value. Leave it out for a plain button. */
+    pressed?: boolean;
+}
+/**
+ * A button in the toolbar. Visible words are `children`, else `label`. With only an icon, set `hideLabel` and `label`:
+ * the label becomes the accessible name. A button with no words at all gets no name, and warns in the console.
+ */
+declare function Button({ pressed, icon, label, hideLabel, children, className, onClick, ...rest }: ToolbarButtonProps): import("react").JSX.Element;
+/** A thin divider between groups of items. */
+declare function Separator({ className }: {
+    className?: string;
+}): import("react").JSX.Element;
+/** Warns once, in the console, when a control has no accessible name (no text and no aria-label). */
+export declare function useNameCheck(ref: RefObject<HTMLElement | null>, part: string): void;
+export { Root, Button, Separator };
+//# sourceMappingURL=ToolbarParts.d.ts.map

package/dist/ToolbarParts.js

@@ -0,0 +1,122 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useCallback, useContext, useEffect, useId, useMemo, useRef, useState } from 'react';
+import { buttonFace } from './accessible-name.js';
+const Context = createContext(null);
+/** The toolbar a part sits in, or null outside one. Menu.Trigger uses it to join the roving tab stop. */
+export function useToolbarContext() {
+    return useContext(Context);
+}
+/** Makes `element` an item of the toolbar above it, if any; returns the tabIndex and focus handler to put on it. */
+export function useToolbarItem(element, disabled) {
+    const toolbar = useContext(Context);
+    const id = useId();
+    const register = toolbar?.register;
+    const unregister = toolbar?.unregister;
+    useEffect(() => {
+        if (!register || !unregister || !element.current)
+            return;
+        register(id, element.current);
+        return () => unregister(id);
+    }, [register, unregister, id, element]);
+    // A disabled item cannot be the tab stop: tell the root when that changes, since the root may not re-render on its own.
+    const refresh = toolbar?.refresh;
+    useEffect(() => { refresh?.(); }, [refresh, disabled]);
+    const setStop = toolbar?.setStop;
+    const onFocus = useCallback(() => setStop?.(id), [setStop, id]);
+    if (!toolbar)
+        return { tabIndex: undefined, onFocus: undefined };
+    return { tabIndex: toolbar.stop === id ? 0 : -1, onFocus };
+}
+/** role="toolbar" with one tab stop. Put Toolbar.Button and Menu.Trigger inside it, in any wrapper. */
+function Root({ className, 'aria-label': label = 'Toolbar', orientation = 'horizontal', returnFocusTo, children, ...rest }) {
+    const items = useRef(new Map());
+    const [stop, setStop] = useState(null);
+    const [, setVersion] = useState(0);
+    const register = useCallback((id, element) => { items.current.set(id, element); setVersion((v) => v + 1); }, []);
+    const unregister = useCallback((id) => { items.current.delete(id); setVersion((v) => v + 1); }, []);
+    /** The enabled items in document order. */
+    const ordered = () => [...items.current.entries()]
+        .filter(([, el]) => el.isConnected && !el.disabled)
+        .sort(([, a], [, b]) => (a.compareDocumentPosition(b) & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : 1));
+    // One item must always be the tab stop: when none is (first render, or the one that was removed), a pressed item is the
+    // stop, else the first. This runs after every render because an item can change `pressed` or `disabled` without telling us.
+    useEffect(() => {
+        const list = ordered();
+        if (list.length === 0 || (stop !== null && list.some(([id]) => id === stop)))
+            return;
+        const pressed = list.find(([, el]) => el.getAttribute('aria-pressed') === 'true');
+        setStop((pressed ?? list[0])[0]);
+    });
+    const onKeyDown = (event) => {
+        if (event.altKey || event.ctrlKey || event.metaKey)
+            return;
+        const list = ordered();
+        const at = list.findIndex(([, el]) => el === event.target);
+        if (at < 0)
+            return; // a key inside an open menu belongs to the menu
+        if (event.key === 'Escape') {
+            const target = typeof returnFocusTo === 'function' ? returnFocusTo() : returnFocusTo?.current;
+            if (!target)
+                return;
+            event.preventDefault();
+            event.stopPropagation();
+            target.focus();
+            return;
+        }
+        // A horizontal toolbar mirrors in right-to-left text, as Menu does: the arrow that points ahead visually moves ahead.
+        const rtl = orientation !== 'vertical' && getComputedStyle(event.currentTarget).direction === 'rtl';
+        const forward = orientation === 'vertical' ? 'ArrowDown' : rtl ? 'ArrowLeft' : 'ArrowRight';
+        const back = orientation === 'vertical' ? 'ArrowUp' : rtl ? 'ArrowRight' : 'ArrowLeft';
+        let next;
+        switch (event.key) {
+            case forward:
+                next = (at + 1) % list.length;
+                break;
+            case back:
+                next = (at - 1 + list.length) % list.length;
+                break;
+            case 'Home':
+                next = 0;
+                break;
+            case 'End':
+                next = list.length - 1;
+                break;
+            default: return;
+        }
+        event.preventDefault();
+        event.stopPropagation(); // arrows, Home and End are also transport shortcuts on a replay page
+        setStop(list[next][0]);
+        list[next][1].focus();
+    };
+    const refresh = useCallback(() => setVersion((v) => v + 1), []);
+    const context = useMemo(() => ({ orientation, stop, setStop, register, unregister, refresh }), [orientation, stop, register, unregister, refresh]);
+    return (_jsx(Context.Provider, { value: context, children: _jsx("div", { "data-mt": "", "data-part": "toolbar", ...rest, className: className, role: "toolbar", "aria-label": label, "aria-orientation": orientation, onKeyDown: onKeyDown, children: children }) }));
+}
+/**
+ * A button in the toolbar. Visible words are `children`, else `label`. With only an icon, set `hideLabel` and `label`:
+ * the label becomes the accessible name. A button with no words at all gets no name, and warns in the console.
+ */
+function Button({ pressed, icon, label, hideLabel, children, className, onClick, ...rest }) {
+    const ref = useRef(null);
+    const item = useToolbarItem(ref, rest.disabled);
+    const face = buttonFace(undefined, { icon, label, hideLabel, children, ariaLabel: rest['aria-label'] });
+    useNameCheck(ref, 'Toolbar.Button');
+    return (_jsx("button", { "data-mt": "", "data-part": "toolbar-button", "data-touch-target": "", ...rest, ref: ref, type: "button", className: className, "aria-label": face['aria-label'], "aria-pressed": pressed, tabIndex: item.tabIndex, onFocus: (event) => { item.onFocus?.(); rest.onFocus?.(event); }, onClick: onClick, children: face.content }));
+}
+/** A thin divider between groups of items. */
+function Separator({ className }) {
+    return _jsx("div", { className: className, "data-mt": "", "data-part": "toolbar-separator", role: "separator" });
+}
+/** Warns once, in the console, when a control has no accessible name (no text and no aria-label). */
+export function useNameCheck(ref, part) {
+    useEffect(() => {
+        const el = ref.current;
+        if (!el)
+            return;
+        const named = (el.textContent ?? '').trim() !== '' || (el.getAttribute('aria-label') ?? '').trim() !== '' || el.hasAttribute('aria-labelledby');
+        if (!named)
+            console.warn(`${part} has no accessible name: give it children, or a label with hideLabel when it shows only an icon.`);
+    }, [ref, part]);
+}
+export { Root, Button, Separator };

package/dist/Transport.d.ts

@@ -0,0 +1,15 @@
+import { Root, Group, Play, Speed, Readout, Boundary } from './TransportParts.js';
+export * from './TransportParts.js';
+export declare const Transport: {
+    Root: typeof Root;
+    Group: typeof Group;
+    Play: typeof Play;
+    Previous: import("./TransportParts.js").StepButton;
+    Next: import("./TransportParts.js").StepButton;
+    Start: import("./TransportParts.js").StepButton;
+    End: import("./TransportParts.js").StepButton;
+    Speed: typeof Speed;
+    Readout: typeof Readout;
+    Boundary: typeof Boundary;
+};
+//# sourceMappingURL=Transport.d.ts.map

package/dist/Transport.js

@@ -0,0 +1,5 @@
+import { Root, Group, Play, Previous, Next, Start, End, Speed, Readout, Boundary } from './TransportParts.js';
+// The parts live in TransportParts.js (a client module). The namespace object is built here, outside it, so a server
+// component can write `Transport.Root`: a property of an object exported from a client module is not reachable there.
+export * from './TransportParts.js';
+export const Transport = { Root, Group, Play, Previous, Next, Start, End, Speed, Readout, Boundary };