@matchstick-trading/primitives 0.0.10

package/dist/CsvDropParts.js

@@ -0,0 +1,77 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createContext, useCallback, useContext, useRef, useState } from 'react';
+import { describeBarsCsv, parseBarsCsv } from './core/csv-bars.js';
+const Ctx = createContext(null);
+function useCsvDrop() {
+    const ctx = useContext(Ctx);
+    if (!ctx)
+        throw new Error('CsvDrop parts must be inside CsvDrop.Root');
+    return ctx;
+}
+/**
+ * A drop area for the user's own CSV file. The file is read in the browser and never leaves the page. Drop a file
+ * on the area, or use CsvDrop.Input (the keyboard path: a native file picker). State shows as `data-state`
+ * ('idle' | 'reading' | 'loaded' | 'error') and `data-dragging` while a file is over the area.
+ */
+function Root({ onLoad, maxBytes = 50 * 1024 * 1024, maxRows, className, children }) {
+    const [state, setState] = useState({ kind: 'idle' });
+    const [dragging, setDragging] = useState(false);
+    const depth = useRef(0);
+    // Each read gets a number; a slower earlier read that finishes late is dropped, so the newest file always wins.
+    const generation = useRef(0);
+    const read = useCallback((file) => {
+        const id = ++generation.current;
+        if (file.size > maxBytes) {
+            setState({ kind: 'error', message: `${file.name} is larger than ${Math.round(maxBytes / 1024 / 1024)} MB, so it wasn't read.` });
+            return;
+        }
+        setState({ kind: 'reading', fileName: file.name });
+        file.text().then((text) => {
+            if (id !== generation.current)
+                return;
+            const load = { ...parseBarsCsv(text, { maxRows }), fileName: file.name };
+            setState({ kind: 'loaded', load });
+            onLoad(load);
+        }, () => { if (id === generation.current)
+            setState({ kind: 'error', message: `${file.name} couldn't be read.` }); });
+    }, [maxBytes, maxRows, onLoad]);
+    const hasFile = (e) => Array.from(e.dataTransfer.types).includes('Files');
+    return (_jsx(Ctx.Provider, { value: { state, read }, children: _jsx("div", { "data-mt": "", "data-part": "csv-drop", "data-state": state.kind, "data-dragging": dragging ? '' : undefined, className: className, onDragEnter: (e) => { if (!hasFile(e))
+                return; e.preventDefault(); depth.current++; setDragging(true); }, onDragOver: (e) => { if (hasFile(e))
+                e.preventDefault(); }, onDragLeave: () => { depth.current = Math.max(0, depth.current - 1); if (depth.current === 0)
+                setDragging(false); }, onDrop: (e) => {
+                if (!hasFile(e))
+                    return;
+                e.preventDefault();
+                depth.current = 0;
+                setDragging(false);
+                const file = e.dataTransfer.files[0];
+                if (file)
+                    read(file);
+            }, children: children }) }));
+}
+/** The native file picker, labelled by its children. Accepts .csv, .tsv and .txt. */
+function Input({ className, children }) {
+    const { read } = useCsvDrop();
+    return (_jsxs("label", { "data-part": "csv-input", className: className, children: [children, _jsx("input", { type: "file", accept: ".csv,.tsv,.txt,text/csv,text/tab-separated-values,text/plain", onChange: (e) => {
+                    const file = e.target.files?.[0];
+                    if (file)
+                        read(file);
+                    e.target.value = '';
+                } })] }));
+}
+/** A polite status line: reading, how many bars loaded, and which rows were skipped and why. */
+function Status({ className, idle }) {
+    const { state } = useCsvDrop();
+    let text = idle ?? null;
+    if (state.kind === 'reading')
+        text = `Reading ${state.fileName}…`;
+    if (state.kind === 'loaded')
+        text = describeBarsCsv(state.load, state.load.fileName);
+    if (state.kind === 'error')
+        text = state.message;
+    const failed = state.kind === 'error' || (state.kind === 'loaded' && state.load.bars.length === 0);
+    return (_jsx("p", { role: "status", "aria-live": "polite", "data-part": "csv-status", "data-kind": failed ? 'error' : undefined, className: className, children: text }));
+}
+export { Root, Input, Status };

package/dist/Cursor.d.ts

@@ -0,0 +1,6 @@
+import { Root } from './CursorParts.js';
+export * from './CursorParts.js';
+export declare const Cursor: {
+    Root: typeof Root;
+};
+//# sourceMappingURL=Cursor.d.ts.map

package/dist/Cursor.js

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

package/dist/CursorParts.d.ts

@@ -0,0 +1,51 @@
+import { type ReactNode } from 'react';
+/**
+ * Cursor: the one owner of "where in the session are we". Every view (Transport, Scrubber,
+ * Ladder, DiffTable) reads this one value instead of keeping its own copy, so linked panels cannot disagree
+ * about time. Renders no DOM.
+ *
+ * The value is the engine's own cursor shape, sequence and timestamp as bigint: an exact integer, never a
+ * float. (A wire form with decimal strings belongs at the contract boundary, not in this React state.)
+ *
+ * Controlled (`value` + `onValueChange`) or uncontrolled (`defaultValue`), the same three-prop pattern the
+ * headless libraries use. A controlled Root never changes the value itself: `setValue` only calls
+ * `onValueChange`, and the host decides.
+ */
+export type CursorValue = {
+    readonly position: 'initial';
+} | {
+    readonly position: 'event';
+    readonly sequence: bigint;
+    readonly timestamp: bigint;
+};
+export type CursorState = 'idle' | 'playing' | 'seeking';
+export type CursorBoundary = 'start' | 'end' | null;
+export declare const CURSOR_START: CursorValue;
+/** True when both are the same place in the session. */
+export declare function sameCursor(a: CursorValue, b: CursorValue): boolean;
+export interface CursorRootProps {
+    value?: CursorValue;
+    defaultValue?: CursorValue;
+    onValueChange?: (value: CursorValue) => void;
+    /** What the host is doing with the cursor. Exposed as `data-state` to every view that asks for attributes. */
+    state?: CursorState;
+    /** Set when the cursor is at the start or end of the session. */
+    boundary?: CursorBoundary;
+    children?: ReactNode;
+}
+interface CursorContext {
+    value: CursorValue;
+    setValue: (value: CursorValue) => void;
+    state: CursorState;
+    boundary: CursorBoundary;
+}
+declare function Root({ value, defaultValue, onValueChange, state, boundary, children }: CursorRootProps): import("react").JSX.Element;
+/** Reads the shared cursor. Throws a plain message when there is no `Cursor.Root` above, rather than guessing a position. */
+export declare function useCursor(): CursorContext & {
+    attributes: {
+        'data-state': CursorState;
+        'data-boundary'?: 'start' | 'end';
+    };
+};
+export { Root };
+//# sourceMappingURL=CursorParts.d.ts.map

package/dist/CursorParts.js

@@ -0,0 +1,40 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useCallback, useContext, useMemo, useRef, useState } from 'react';
+export const CURSOR_START = { position: 'initial' };
+/** True when both are the same place in the session. */
+export function sameCursor(a, b) {
+    if (a.position === 'initial' || b.position === 'initial')
+        return a.position === b.position;
+    return a.sequence === b.sequence && a.timestamp === b.timestamp;
+}
+const Context = createContext(null);
+function Root({ value, defaultValue = CURSOR_START, onValueChange, state = 'idle', boundary = null, children }) {
+    const controlled = value !== undefined;
+    const [inner, setInner] = useState(defaultValue);
+    const current = controlled ? value : inner;
+    // The latest callback and mode, read at call time, so `setValue` keeps one identity for the life of the Root.
+    const live = useRef({ controlled, onValueChange, current });
+    live.current = { controlled, onValueChange, current };
+    const setValue = useCallback((next) => {
+        const { controlled: isControlled, onValueChange: notify, current: now } = live.current;
+        if (sameCursor(now, next))
+            return;
+        if (!isControlled)
+            setInner(next);
+        notify?.(next);
+    }, []);
+    const context = useMemo(() => ({ value: current, setValue, state, boundary }), [current, setValue, state, boundary]);
+    return _jsx(Context.Provider, { value: context, children: children });
+}
+/** Reads the shared cursor. Throws a plain message when there is no `Cursor.Root` above, rather than guessing a position. */
+export function useCursor() {
+    const context = useContext(Context);
+    if (!context)
+        throw new Error('useCursor needs a Cursor.Root above it: there is no shared cursor to read.');
+    const attributes = context.boundary
+        ? { 'data-state': context.state, 'data-boundary': context.boundary }
+        : { 'data-state': context.state };
+    return { ...context, attributes };
+}
+export { Root };

package/dist/DepthProfile.d.ts

@@ -0,0 +1,13 @@
+import { Root, Plot, Bids, Asks, Axis, Crosshair, Readout, Table } from './DepthProfileParts.js';
+export * from './DepthProfileParts.js';
+export declare const DepthProfile: {
+    Root: typeof Root;
+    Plot: typeof Plot;
+    Bids: typeof Bids;
+    Asks: typeof Asks;
+    Axis: typeof Axis;
+    Crosshair: typeof Crosshair;
+    Readout: typeof Readout;
+    Table: typeof Table;
+};
+//# sourceMappingURL=DepthProfile.d.ts.map

package/dist/DepthProfile.js

@@ -0,0 +1,5 @@
+import { Root, Plot, Bids, Asks, Axis, Crosshair, Readout, Table } from './DepthProfileParts.js';
+// The parts live in DepthProfileParts.js (a client module). The namespace object is built here, outside it, so a server
+// component can write `DepthProfile.Root`: a property of an object exported from a client module is not reachable there.
+export * from './DepthProfileParts.js';
+export const DepthProfile = { Root, Plot, Bids, Asks, Axis, Crosshair, Readout, Table };

package/dist/DepthProfileParts.d.ts

@@ -0,0 +1,45 @@
+import { type ReactNode } from 'react';
+import { type DepthLevel } from './core/depth-profile.js';
+export interface DepthProfileRootProps {
+    /** Best price first on each side. */
+    levels: readonly DepthLevel[];
+    /** Controlled crosshair: the `side:price` id of the level, or null for none. */
+    active?: string | null;
+    onActiveChange?: (id: string | null) => void;
+    className?: string;
+    'aria-label'?: string;
+    children?: ReactNode;
+}
+declare function Root({ levels: given, active, onActiveChange, className, 'aria-label': label, children }: DepthProfileRootProps): import("react").JSX.Element;
+/** The drawing. One tab stop; a tap or click picks the nearest level; ArrowLeft/Right move the crosshair, Home/End jump to the ends, Escape clears it. */
+declare function Plot({ className, label, children }: {
+    className?: string;
+    label?: string;
+    children?: ReactNode;
+}): import("react").JSX.Element;
+declare function Bids({ className }: {
+    className?: string;
+}): import("react").JSX.Element;
+declare function Asks({ className }: {
+    className?: string;
+}): import("react").JSX.Element;
+/** The lowest and highest price on the plot, as recorded, at its two ends. */
+declare function Axis({ className }: {
+    className?: string;
+}): import("react").JSX.Element | null;
+/** A line and a point at the active level; nothing is drawn while there is none. */
+declare function Crosshair({ className }: {
+    className?: string;
+}): import("react").JSX.Element | null;
+/** The active level in words, announced politely. The host may pass its own wording. */
+declare function Readout({ className, format }: {
+    className?: string;
+    format?: (level: DepthLevel) => string;
+}): import("react").JSX.Element;
+/** The same levels as a table: the text equivalent of the plot. Prices run low to high. */
+declare function Table({ className, caption }: {
+    className?: string;
+    caption?: string;
+}): import("react").JSX.Element;
+export { Root, Plot, Bids, Asks, Axis, Crosshair, Readout, Table };
+//# sourceMappingURL=DepthProfileParts.d.ts.map

package/dist/DepthProfileParts.js

@@ -0,0 +1,96 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createContext, useCallback, useContext, useId, useMemo, useState } from 'react';
+import { DEPTH_HEIGHT, DEPTH_WIDTH, depthGeometry, depthLevelId, nextDepthIndex, resolveDepthKey } from './core/depth-profile.js';
+const Context = createContext(null);
+function useDepth(part) {
+    const context = useContext(Context);
+    if (!context)
+        throw new Error(`DepthProfile.${part} needs a DepthProfile.Root above it.`);
+    return context;
+}
+function Root({ levels: given, active, onActiveChange, className, 'aria-label': label = 'Cumulative order-book depth', children }) {
+    const levels = useMemo(() => (Array.isArray(given) ? given.filter((level) => level != null) : []), [given]); // no list, or a hole in it, is left out
+    const geometry = useMemo(() => depthGeometry(levels), [levels]);
+    const [inner, setInner] = useState(null);
+    const controlled = active !== undefined;
+    const activeId = controlled ? active : inner;
+    const index = activeId === null ? -1 : geometry.ordered.findIndex((l) => depthLevelId(l) === activeId);
+    const readoutId = useId();
+    const setActive = useCallback((next) => {
+        const id = next === null ? null : depthLevelId(geometry.ordered[next]);
+        if (!controlled)
+            setInner(id);
+        onActiveChange?.(id);
+    }, [geometry, controlled, onActiveChange]);
+    const context = useMemo(() => ({ ...geometry, active: index < 0 ? null : index, setActive, readoutId }), [geometry, index, setActive, readoutId]);
+    return (_jsx(Context.Provider, { value: context, children: _jsx("figure", { className: className, "aria-label": label, children: children }) }));
+}
+/** The drawing. One tab stop; a tap or click picks the nearest level; ArrowLeft/Right move the crosshair, Home/End jump to the ends, Escape clears it. */
+function Plot({ className, label = 'Bid and ask cumulative depth', children }) {
+    const { ordered, active, setActive, readoutId, x } = useDepth('Plot');
+    const onKeyDown = (event) => {
+        const action = resolveDepthKey(event);
+        if (!action)
+            return;
+        event.preventDefault();
+        event.stopPropagation(); // arrows, Home and End are also transport shortcuts on the page
+        setActive(nextDepthIndex(ordered, active, action));
+    };
+    const onPointerDown = (event) => {
+        const svg = event.currentTarget;
+        const matrix = svg.getScreenCTM();
+        if (!ordered.length || !matrix)
+            return;
+        // Through the inverse screen transform, so the letterboxing of preserveAspectRatio is accounted for.
+        const point = svg.createSVGPoint();
+        point.x = event.clientX;
+        point.y = event.clientY;
+        const at = point.matrixTransform(matrix.inverse()).x;
+        let nearest = 0;
+        for (let i = 1; i < ordered.length; i++) {
+            if (Math.abs(x(ordered[i].price) - at) < Math.abs(x(ordered[nearest].price) - at))
+                nearest = i;
+        }
+        setActive(nearest);
+    };
+    return (_jsx("svg", { className: className, viewBox: `0 0 ${DEPTH_WIDTH} ${DEPTH_HEIGHT}`, role: "group", "aria-label": label, "aria-describedby": readoutId, tabIndex: 0, onKeyDown: onKeyDown, onPointerDown: onPointerDown, children: children }));
+}
+function Bids({ className }) {
+    const { bidPoints } = useDepth('Bids');
+    return _jsx("polygon", { className: className, "data-part": "depth-bids", "data-side": "bid", points: bidPoints });
+}
+function Asks({ className }) {
+    const { askPoints } = useDepth('Asks');
+    return _jsx("polygon", { className: className, "data-part": "depth-asks", "data-side": "ask", points: askPoints });
+}
+/** The lowest and highest price on the plot, as recorded, at its two ends. */
+function Axis({ className }) {
+    const { ordered } = useDepth('Axis');
+    if (ordered.length === 0)
+        return null;
+    const low = ordered[0].price;
+    const high = ordered[ordered.length - 1].price;
+    return (_jsxs("g", { className: className, "data-part": "depth-axis", "aria-hidden": "true", children: [_jsx("text", { x: 0, y: DEPTH_HEIGHT - 2, textAnchor: "start", children: low }), _jsx("text", { x: DEPTH_WIDTH, y: DEPTH_HEIGHT - 2, textAnchor: "end", children: high })] }));
+}
+/** A line and a point at the active level; nothing is drawn while there is none. */
+function Crosshair({ className }) {
+    const { ordered, active, x, y } = useDepth('Crosshair');
+    if (active === null)
+        return null;
+    const level = ordered[active];
+    return (_jsxs("g", { className: className, "data-part": "depth-crosshair", "data-side": level.side, "aria-hidden": "true", children: [_jsx("line", { x1: x(level.price), x2: x(level.price), y1: 0, y2: DEPTH_HEIGHT }), _jsx("circle", { cx: x(level.price), cy: y(level.cumulative), r: 4 })] }));
+}
+/** The active level in words, announced politely. The host may pass its own wording. */
+function Readout({ className, format }) {
+    const { ordered, active, readoutId } = useDepth('Readout');
+    const level = active === null ? null : ordered[active];
+    const text = level === null ? '' : format ? format(level) : `${level.side === 'bid' ? 'Bid' : 'Ask'} ${level.price}, cumulative size ${level.cumulative}`;
+    return _jsx("output", { id: readoutId, className: className, "aria-live": "polite", "data-side": level?.side, children: text });
+}
+/** The same levels as a table: the text equivalent of the plot. Prices run low to high. */
+function Table({ className, caption = 'Cumulative depth by price level' }) {
+    const { ordered, active } = useDepth('Table');
+    return (_jsxs("table", { className: className, children: [_jsx("caption", { children: caption }), _jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { scope: "col", children: "Side" }), _jsx("th", { scope: "col", children: "Price" }), _jsx("th", { scope: "col", children: "Cumulative size" })] }) }), _jsx("tbody", { children: ordered.map((level, i) => (_jsxs("tr", { "data-side": level.side, "aria-current": i === active ? 'true' : undefined, children: [_jsx("td", { children: level.side === 'bid' ? 'Bid' : 'Ask' }), _jsx("td", { "data-mt-numeric": true, children: level.price }), _jsx("td", { "data-mt-numeric": true, children: level.cumulative })] }, depthLevelId(level)))) })] }));
+}
+export { Root, Plot, Bids, Asks, Axis, Crosshair, Readout, Table };

package/dist/DiffTable.d.ts

@@ -0,0 +1,13 @@
+import { Root, Header, Row, Price, QtyA, QtyB, Delta, ChangeMark } from './DiffTableParts.js';
+export * from './DiffTableParts.js';
+export declare const DiffTable: {
+    Root: typeof Root;
+    Header: typeof Header;
+    Row: typeof Row;
+    Price: typeof Price;
+    QtyA: typeof QtyA;
+    QtyB: typeof QtyB;
+    Delta: typeof Delta;
+    ChangeMark: typeof ChangeMark;
+};
+//# sourceMappingURL=DiffTable.d.ts.map

package/dist/DiffTable.js

@@ -0,0 +1,5 @@
+import { Root, Header, Row, Price, QtyA, QtyB, Delta, ChangeMark } from './DiffTableParts.js';
+// The parts live in DiffTableParts.js (a client module). The namespace object is built here, outside it, so a server
+// component can write `DiffTable.Root`: a property of an object exported from a client module is not reachable there.
+export * from './DiffTableParts.js';
+export const DiffTable = { Root, Header, Row, Price, QtyA, QtyB, Delta, ChangeMark };

package/dist/DiffTableParts.d.ts

@@ -0,0 +1,57 @@
+import { type ReactNode } from 'react';
+import { type DiffChange, type DiffSort, type DiffTableRow } from './core/diff-table.js';
+export interface DiffTableRootProps {
+    rows: readonly DiffTableRow[];
+    /** Controlled sort; leave out for an uncontrolled table that starts as `book`. */
+    sort?: DiffSort;
+    onSortChange?: (sort: DiffSort) => void;
+    /** Enter or Space on a focused row. */
+    onSelect?: (row: DiffTableRow) => void;
+    /** The `a` or `b` key: focus that cursor control. */
+    onFocusCursor?: (which: 'a' | 'b') => void;
+    className?: string;
+    caption?: string;
+    captionClassName?: string;
+    /** The parts, given the rows in the order to show them (sorted, and held while the pointer is over the table). */
+    children: (rows: DiffTableRow[]) => ReactNode;
+}
+declare function Root({ rows, sort, onSortChange, onSelect, onFocusCursor, className, caption, captionClassName, children }: DiffTableRootProps): 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 level. A single tab stop for the table: the active row, or the first. The pointer does not move it. */
+declare function Row({ row, selected, className, children }: {
+    row: DiffTableRow;
+    selected?: boolean;
+    className?: string;
+    children: ReactNode;
+}): import("react").JSX.Element;
+/** The row header cell: the price as recorded. Pass children to put a control inside. */
+declare function Price({ row, className, children }: {
+    row: DiffTableRow;
+    className?: string;
+    children?: ReactNode;
+}): import("react").JSX.Element;
+declare function QtyA({ row, className }: {
+    row: DiffTableRow;
+    className?: string;
+}): import("react").JSX.Element;
+declare function QtyB({ row, className }: {
+    row: DiffTableRow;
+    className?: string;
+}): import("react").JSX.Element;
+/** qtyB minus qtyA with its sign shown. */
+declare function Delta({ row, className }: {
+    row: DiffTableRow;
+    className?: string;
+}): import("react").JSX.Element;
+/** The change in words; tokens.css adds the mark (+, −, ±) so it never rests on colour alone. */
+declare function ChangeMark({ change, className, label }: {
+    change: DiffChange;
+    className?: string;
+    label?: string;
+}): import("react").JSX.Element;
+export { Root, Header, Row, Price, QtyA, QtyB, Delta, ChangeMark };
+//# sourceMappingURL=DiffTableParts.d.ts.map

package/dist/DiffTableParts.js

@@ -0,0 +1,103 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createContext, useCallback, useContext, useMemo, useRef, useState } from 'react';
+import { primitiveAttributes } from './attributes.js';
+import { DIFF_CHANGE_LABEL, diffRowId, holdDiffOrder, nextDiffIndex, nextDiffSort, resolveDiffKey, signedDelta, sortDiffRows } from './core/diff-table.js';
+const Context = createContext(null);
+function useDiff(part) {
+    const context = useContext(Context);
+    if (!context)
+        throw new Error(`DiffTable.${part} needs a DiffTable.Root above it.`);
+    return context;
+}
+function Root({ rows, sort, onSortChange, onSelect, onFocusCursor, className, caption, captionClassName, children }) {
+    const [innerSort, setInnerSort] = useState('book');
+    const controlled = sort !== undefined;
+    const current = controlled ? sort : innerSort;
+    const [held, setHeld] = useState(null);
+    const [activeId, setActiveId] = useState(null);
+    const table = useRef(null);
+    const sorted = useMemo(() => sortDiffRows(rows, current), [rows, current]);
+    const shown = useMemo(() => (held ? holdDiffOrder(held, sorted) : sorted), [held, sorted]);
+    const firstId = shown.length ? diffRowId(shown[0]) : null;
+    const changeSort = useCallback(() => {
+        const next = nextDiffSort(current);
+        if (!controlled)
+            setInnerSort(next);
+        setHeld(null); // asking for a new order is the one time the rows may move under the pointer
+        onSortChange?.(next);
+    }, [current, controlled, onSortChange]);
+    const focusRow = (id) => {
+        setActiveId(id);
+        for (const tr of table.current?.querySelectorAll('tbody tr[data-diff-row]') ?? []) {
+            if (tr.dataset.diffRow === id) {
+                tr.focus();
+                return;
+            }
+        }
+    };
+    const onKeyDown = (event) => {
+        const action = resolveDiffKey(event.nativeEvent);
+        if (!action)
+            return;
+        const onRow = event.target.closest('tr[data-diff-row]');
+        if (action.type === 'select') {
+            if (event.target !== onRow || !onRow)
+                return; // Enter and Space on the pick button are the button's own
+            const row = shown.find((r) => diffRowId(r) === onRow.dataset.diffRow);
+            if (!row || !onSelect)
+                return;
+            event.preventDefault();
+            onSelect(row);
+            return;
+        }
+        if (action.type === 'move' && !onRow)
+            return;
+        event.preventDefault();
+        event.stopPropagation(); // these letters and arrows are also page shortcuts
+        if (action.type === 'move') {
+            const index = shown.findIndex((r) => diffRowId(r) === onRow?.dataset.diffRow);
+            const to = nextDiffIndex(shown.length, index, action.to);
+            if (to >= 0)
+                focusRow(diffRowId(shown[to]));
+        }
+        else if (action.type === 'cursor')
+            onFocusCursor?.(action.which);
+        else
+            changeSort();
+    };
+    const context = useMemo(() => ({ activeId, firstId, setActive: setActiveId }), [activeId, firstId]);
+    return (_jsx(Context.Provider, { value: context, children: _jsxs("table", { ref: table, className: className, "data-mt": "", "data-sorted": current, onPointerEnter: () => setHeld(sorted.map(diffRowId)), onPointerLeave: () => setHeld(null), onKeyDown: onKeyDown, children: [caption && _jsx("caption", { className: captionClassName, children: caption }), children(shown)] }) }));
+}
+/** 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 level. A single tab stop for the table: the active row, or the first. The pointer does not move it. */
+function Row({ row, selected, className, children }) {
+    const { activeId, firstId, setActive } = useDiff('Row');
+    const id = diffRowId(row);
+    const stop = activeId === null ? id === firstId : id === activeId;
+    const { 'data-mt': _scope, ...state } = primitiveAttributes({ side: row.side });
+    return (_jsx("tr", { className: className, ...state, "data-diff": row.change === 'unchanged' ? undefined : row.change, "data-diff-row": id, "aria-selected": selected === undefined ? undefined : selected, tabIndex: stop ? 0 : -1, onFocus: () => setActive(id), children: children }));
+}
+/** The row header cell: the price as recorded. Pass children to put a control inside. */
+function Price({ row, className, children }) {
+    return _jsx("th", { scope: "row", className: className, "data-mt-numeric": "", children: children ?? row.price });
+}
+function QtyA({ row, className }) {
+    return _jsx("td", { className: className, "data-mt-numeric": "", children: row.qtyA });
+}
+function QtyB({ row, className }) {
+    return _jsx("td", { className: className, "data-mt-numeric": "", children: row.qtyB });
+}
+/** qtyB minus qtyA with its sign shown. */
+function Delta({ row, className }) {
+    return _jsx("td", { className: className, "data-mt-numeric": "", children: signedDelta(row.delta) });
+}
+/** The change in words; tokens.css adds the mark (+, −, ±) so it never rests on colour alone. */
+function ChangeMark({ change, className, label }) {
+    const attributes = primitiveAttributes(change === 'unchanged' ? {} : { diff: change });
+    return _jsx("span", { className: className, ...attributes, children: label ?? DIFF_CHANGE_LABEL[change] });
+}
+export { Root, Header, Row, Price, QtyA, QtyB, Delta, ChangeMark };

package/dist/Drawings.d.ts

@@ -0,0 +1,13 @@
+import { Root, Layer, Toolbar, List, Remove, Undo, Lock, Edit } from './DrawingsParts.js';
+export * from './DrawingsParts.js';
+export declare const Drawings: {
+    Root: typeof Root;
+    Layer: typeof Layer;
+    Toolbar: typeof Toolbar;
+    List: typeof List;
+    Remove: typeof Remove;
+    Undo: typeof Undo;
+    Lock: typeof Lock;
+    Edit: typeof Edit;
+};
+//# sourceMappingURL=Drawings.d.ts.map

package/dist/Drawings.js

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