@matchstick-trading/primitives 0.0.10

package/dist/ScrubberParts.js

@@ -0,0 +1,126 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useCallback, useContext, useMemo, useRef, useState } from 'react';
+import { clampFraction, fractionFromPointer, isActiveScrubPointer, isPrimaryScrubPointer, reduceScrubGesture, resolveScrubKey } from './core/scrubber-gesture.js';
+const Context = createContext(null);
+/** The live scrub state, for a readout that must follow the preview. Throws a plain message outside a `Scrubber.Root`. */
+export function useScrubber() {
+    const context = useContext(Context);
+    if (!context)
+        throw new Error('useScrubber needs a Scrubber.Root above it: there is no scrub state to read.');
+    const { fraction, committedFraction, dragging, loading } = context;
+    return { fraction, committedFraction, dragging, loading };
+}
+function Root({ fraction: committedInput, loading = false, onBeginScrub, onEndScrub, onCommit, onStep, children }) {
+    const committedFraction = committedInput;
+    const [dragFraction, setDragFraction] = useState(null);
+    // Which pointer owns the drag: a ref, because the very next pointer event of the same gesture must read it
+    // before any state update has been applied.
+    const activePointerId = useRef(null);
+    const live = useRef({ dragFraction, loading, onBeginScrub, onEndScrub, onCommit, onStep, committedFraction });
+    live.current = { dragFraction, loading, onBeginScrub, onEndScrub, onCommit, onStep, committedFraction };
+    const apply = useCallback((event) => {
+        const now = live.current;
+        const result = reduceScrubGesture(event, now.dragFraction);
+        // The ref is updated here as well as at render, so two events in one frame still see the latest preview.
+        live.current = { ...now, dragFraction: result.dragFraction };
+        setDragFraction(result.dragFraction);
+        if (result.begin)
+            now.onBeginScrub?.();
+        if (result.end)
+            now.onEndScrub?.();
+        if (result.commit !== null)
+            now.onCommit(result.commit);
+    }, []);
+    const fractionAt = (event) => {
+        const rect = event.currentTarget.getBoundingClientRect();
+        return fractionFromPointer(event.clientX, rect.left, rect.width);
+    };
+    const trackHandlers = useMemo(() => ({
+        onPointerDown(event) {
+            if (live.current.loading)
+                return;
+            // Gate before capturing: a right-click must reach the browser's own menu, and a second finger must not start a scrub.
+            if (!isPrimaryScrubPointer(event))
+                return;
+            // Without this, a press after a text selection starts a native drag and the browser cancels the pointer.
+            event.preventDefault();
+            // preventDefault also stops the browser focusing what was pressed, so a press on the thumb focuses it here.
+            const pressed = event.target instanceof Element ? event.target.closest('[tabindex]') : null;
+            if (pressed && event.currentTarget.contains(pressed))
+                pressed.focus({ preventScroll: true });
+            activePointerId.current = event.pointerId;
+            event.currentTarget.setPointerCapture(event.pointerId);
+            apply({ type: 'down', fraction: fractionAt(event) });
+        },
+        onPointerMove(event) {
+            if (!isActiveScrubPointer(event.pointerId, activePointerId.current))
+                return;
+            apply({ type: 'move', fraction: fractionAt(event) });
+        },
+        onPointerUp(event) {
+            if (!isActiveScrubPointer(event.pointerId, activePointerId.current))
+                return;
+            activePointerId.current = null;
+            // The release's own coordinate, read the same way as a move; the last move may lag it.
+            apply({ type: 'up', fraction: fractionAt(event), loading: live.current.loading });
+            event.currentTarget.releasePointerCapture(event.pointerId);
+        },
+        onPointerCancel(event) {
+            if (!isActiveScrubPointer(event.pointerId, activePointerId.current))
+                return;
+            activePointerId.current = null;
+            apply({ type: 'cancel' });
+        },
+    }), [apply]);
+    const onThumbKeyDown = useCallback((event) => {
+        const now = live.current;
+        if (now.loading)
+            return;
+        const action = resolveScrubKey(event.key, now.committedFraction);
+        if (!action)
+            return;
+        event.preventDefault();
+        if (action.type === 'step') {
+            // A host may also listen for arrows on the window; letting this bubble would step twice.
+            event.stopPropagation();
+            now.onStep(action.direction);
+        }
+        else {
+            now.onCommit(action.fraction);
+        }
+    }, []);
+    const dragging = dragFraction !== null;
+    const context = useMemo(() => ({
+        fraction: dragFraction ?? committedFraction,
+        committedFraction,
+        dragging,
+        loading,
+        trackHandlers,
+        onThumbKeyDown,
+    }), [dragFraction, committedFraction, dragging, loading, trackHandlers, onThumbKeyDown]);
+    return _jsx(Context.Provider, { value: context, children: children });
+}
+function useContextOrThrow(part) {
+    const context = useContext(Context);
+    if (!context)
+        throw new Error(`Scrubber.${part} needs a Scrubber.Root above it.`);
+    return context;
+}
+/** The pressable area. Pointer handlers live here; marks and the thumb go inside it. */
+function Track({ className, children }) {
+    const { trackHandlers, dragging, loading } = useContextOrThrow('Track');
+    return (_jsx("div", { className: className, ...trackHandlers, "data-part": "scrubber-track", "data-state": dragging ? 'dragging' : 'idle', "data-disabled": loading ? '' : undefined, children: children }));
+}
+const percent = (fraction) => `${(clampFraction(fraction) * 100).toFixed(3)}%`;
+/** The one tab stop: `role="slider"`, positioned at the live fraction. Arrows step, Home/End/PageUp/PageDown jump. */
+function Thumb({ className, label = 'Session position', valueText, describedBy }) {
+    const { fraction, loading, onThumbKeyDown } = useContextOrThrow('Thumb');
+    return (_jsx("div", { className: className, "data-part": "scrubber-thumb", role: "slider", tabIndex: 0, "aria-label": label, "aria-describedby": describedBy, "aria-disabled": loading || undefined, "aria-valuemin": 0, "aria-valuemax": 100, "aria-valuenow": Math.round(clampFraction(fraction) * 100), "aria-valuetext": valueText, style: { left: percent(fraction) }, onKeyDown: onThumbKeyDown }));
+}
+/** A position on the track that informs but cannot be activated (a declared gap, a verified checkpoint). */
+function Mark({ at, span, label, kind, title, tabIndex, id, className }) {
+    const style = span === undefined ? { left: percent(at) } : { left: percent(at), width: percent(Math.max(0, span)) };
+    return _jsx("span", { id: id, className: className, "data-part": "scrubber-mark", "data-kind": kind, style: style, role: "img", tabIndex: tabIndex, title: title, "aria-label": label });
+}
+export { Root, Track, Thumb, Mark };

package/dist/Selection.d.ts

@@ -0,0 +1,14 @@
+import type { Series as StudySeries } from './core/studies.js';
+import { Root, Layer, SeriesRoot, Select, Options } from './SelectionParts.js';
+export * from './SelectionParts.js';
+export declare const Selection: {
+    Root: typeof Root;
+    Layer: typeof Layer;
+};
+export type Series = StudySeries;
+export declare const Series: {
+    Root: typeof SeriesRoot;
+    Select: typeof Select;
+    Options: typeof Options;
+};
+//# sourceMappingURL=Selection.d.ts.map

package/dist/Selection.js

@@ -0,0 +1,7 @@
+import { Root, Layer, SeriesRoot, Select, Options } from './SelectionParts.js';
+// The parts live in SelectionParts.js (a client module). The namespace objects are built here, outside it, so a server
+// component can write `Selection.Root` and `Series.Root`: a property of an object exported from a client module is not
+// reachable there.
+export * from './SelectionParts.js';
+export const Selection = { Root, Layer };
+export const Series = { Root: SeriesRoot, Select, Options };

package/dist/SelectionParts.d.ts

@@ -0,0 +1,63 @@
+import { type ReactNode } from 'react';
+import { type NameProps } from './accessible-name.js';
+import { type SelectionContextValue } from './selection-context.js';
+import { type ChartSelection } from './core/selection.js';
+/**
+ * Selection as parts: Selection.Root, Selection.Layer, and Series.Root, Series.Select, Series.Options. One thing is
+ * selected on a chart at a time: a drawing, the bar series or a study. Headless: the parts set `data-part` and
+ * `data-state='selected'`; the host gives them a look and fills the options panel with its own controls.
+ *
+ * Root holds the selection (controlled or not) and says each change in a polite live region. Everything is opt-in:
+ * without a Root above them, Drawings and Studies behave as they always did.
+ */
+export interface SelectionRootProps {
+    /** Controlled selection; without it Root keeps its own. */
+    selection?: ChartSelection;
+    onSelectionChange?: (selection: ChartSelection) => void;
+    children?: ReactNode;
+}
+/** Holds the selection and announces changes. Wrap the Chart, the Drawings.Root and the series and study controls in it. */
+declare function Root({ selection, onSelectionChange, children }: SelectionRootProps): import("react").JSX.Element;
+declare function useSelection(part: string): SelectionContextValue;
+/**
+ * The tap and Escape rules for the chart. Put it inside `Chart.Plot`, next to `Drawings.Layer` if there is one. It draws
+ * nothing. A tap (not a drag) on clear chart puts a selection away; with nothing selected and a `Series.Root` mounted
+ * it selects the series; a tap on a study's line or band (a `Study.Line` or `Study.Band` with an `id`) selects that study.
+ * Escape, with the chart focused, clears the selection (a half-placed drawing or an armed tool take the first Escape).
+ * A press on a drawing is Drawings.Layer's, and a drag is the chart panning, so neither counts.
+ */
+declare function Layer(): import("react").JSX.Element;
+export interface SeriesRootProps {
+    /** The selection id of the series. Unique on the chart. */
+    id: string;
+    /** What the series is called: the button's name, the panel's label and the live-region text. */
+    label: string;
+    children?: ReactNode;
+}
+/**
+ * Says that a bar series exists, so a tap on clear chart can select it (with a Selection.Layer in the plot). It draws
+ * nothing. Put it above the chart and the Series.Select and Series.Options. The selected series shows
+ * `data-state='selected'` on its `Chart.Candles`.
+ */
+declare function SeriesRoot({ id, label, children }: SeriesRootProps): import("react").JSX.Element;
+/**
+ * A button that selects the series, and puts the selection away when pressed again: the keyboard and touch path to what
+ * a tap on clear chart does. `aria-pressed` carries the state. Its name is the series label unless you give a `label`
+ * or children.
+ */
+declare function Select({ className, icon, label, hideLabel, children }: NameProps & {
+    className?: string;
+    children?: ReactNode;
+}): import("react").JSX.Element;
+/**
+ * A headless panel for the series' options. It shows its children only while the series is selected. The primitives
+ * ship no option fields: put your own controls inside (an interval list, an instrument picker) and decide what a change
+ * means. `label` names the group; the default is the series label and "options".
+ */
+declare function Options({ className, label, children }: {
+    className?: string;
+    label?: string;
+    children?: ReactNode;
+}): import("react").JSX.Element | null;
+export { Root, Layer, SeriesRoot, Select, Options, useSelection };
+//# sourceMappingURL=SelectionParts.d.ts.map

package/dist/SelectionParts.js

@@ -0,0 +1,208 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
+import { buttonFace } from './accessible-name.js';
+import { useChart } from './ChartParts.js';
+import { SelectionContext, SeriesContext } from './selection-context.js';
+import { describeSelection, sameSelection, selectionAfterEscape, selectionAfterTap } from './core/selection.js';
+// Visually hidden, still announced. Inline so the live region works without a stylesheet.
+const HIDDEN = { position: 'absolute', width: 1, height: 1, margin: -1, padding: 0, overflow: 'hidden', clip: 'rect(0 0 0 0)', whiteSpace: 'nowrap', border: 0 };
+/** Holds the selection and announces changes. Wrap the Chart, the Drawings.Root and the series and study controls in it. */
+function Root({ selection, onSelectionChange, children }) {
+    const [inner, setInner] = useState(null);
+    const current = selection !== undefined ? selection : inner;
+    // `latest` is the selection as the host supplied it, plus any change requested in the event being handled, so two parts
+    // agreeing on one tap report once. It goes back to the rendered value as soon as the event is over: a controlled host
+    // that declines a request is never left with a selection it did not accept.
+    const latest = useRef(current);
+    const rendered = useRef(current);
+    latest.current = current;
+    rendered.current = current;
+    const select = useCallback((next) => {
+        if (sameSelection(latest.current, next))
+            return;
+        latest.current = next;
+        queueMicrotask(() => { latest.current = rendered.current; });
+        if (selection === undefined)
+            setInner(next);
+        onSelectionChange?.(next);
+    }, [selection, onSelectionChange]);
+    const currentRef = useCallback(() => latest.current, []);
+    const [series, setSeries] = useState(null);
+    const selectRef = useRef(select);
+    selectRef.current = select;
+    const mounted = useRef(null);
+    const registerSeries = useCallback((next) => {
+        mounted.current = next;
+        setSeries(next);
+        return () => {
+            if (mounted.current === next)
+                mounted.current = null;
+            setSeries((was) => (was && was.id === next.id ? null : was));
+            // A series that goes away cannot stay selected. A new label, or React replaying the effect, registers again in the
+            // same commit, so only a series still gone after that is removed.
+            queueMicrotask(() => {
+                const now = latest.current;
+                if (mounted.current?.id !== next.id && now && now.kind === 'series' && now.id === next.id)
+                    selectRef.current(null);
+            });
+        };
+    }, []);
+    const [names, setNames] = useState({});
+    const namesRef = useRef(names);
+    namesRef.current = names;
+    const setName = useCallback((kind, id, name) => {
+        setNames((was) => (was[kind]?.[id] === name ? was : { ...was, [kind]: { ...was[kind], [id]: name } }));
+        return () => { };
+    }, []);
+    const guard = useRef(null);
+    const value = useMemo(() => ({ selection: current, select, current: currentRef, series, registerSeries, setName, guard }), [current, select, currentRef, series, registerSeries, setName]);
+    const [status, setStatus] = useState('');
+    const seen = useRef(current === null ? '' : `${current.kind}:${current.id}`);
+    const usedId = useRef(false); // the last announcement had no name yet and said the id
+    const key = current === null ? '' : `${current.kind}:${current.id}`;
+    const nameNow = current === null ? undefined : names[current.kind]?.[current.id];
+    useEffect(() => {
+        if (seen.current === key && !(usedId.current && nameNow !== undefined))
+            return;
+        seen.current = key;
+        usedId.current = current !== null && nameNow === undefined;
+        setStatus(describeSelection(current, names));
+    }, [key, current, names, nameNow]);
+    return (_jsxs(SelectionContext.Provider, { value: value, children: [children, _jsx("span", { "data-part": "selection-status", role: "status", "aria-live": "polite", style: HIDDEN, children: status })] }));
+}
+function useSelection(part) {
+    const context = useContext(SelectionContext);
+    if (!context)
+        throw new Error(`${part} needs a Selection.Root above it.`);
+    return context;
+}
+const TAP_SLOP = 6;
+const TAP_MS = 600;
+/**
+ * The tap and Escape rules for the chart. Put it inside `Chart.Plot`, next to `Drawings.Layer` if there is one. It draws
+ * nothing. A tap (not a drag) on clear chart puts a selection away; with nothing selected and a `Series.Root` mounted
+ * it selects the series; a tap on a study's line or band (a `Study.Line` or `Study.Band` with an `id`) selects that study.
+ * Escape, with the chart focused, clears the selection (a half-placed drawing or an armed tool take the first Escape).
+ * A press on a drawing is Drawings.Layer's, and a drag is the chart panning, so neither counts.
+ */
+function Layer() {
+    const ctx = useSelection('Selection.Layer');
+    const chart = useChart('Selection.Layer');
+    const ref = useRef(null);
+    const live = useRef({ ctx, chart });
+    live.current = { ctx, chart };
+    useEffect(() => {
+        const svg = ref.current?.ownerSVGElement;
+        if (!svg)
+            return;
+        // `before` is the selection at the press: another listener on the same tap (Drawings.Layer putting a drawing away) may change it before the release.
+        let tap = null;
+        const down = new Set();
+        const onDown = (event) => {
+            if (event.isPrimary)
+                down.clear();
+            down.add(event.pointerId);
+            // A second finger is a pinch, not a tap.
+            if (down.size > 1) {
+                tap = null;
+                return;
+            }
+            if (event.button !== 0)
+                return;
+            const { ctx: c, chart: ch } = live.current;
+            const point = ch.toChart(event.clientX, event.clientY);
+            if (!point || point.x < 0 || point.x >= ch.frame.plotWidth || point.y < 0 || point.y >= ch.plotBottom)
+                return;
+            if (c.guard.current?.owns(event.clientX, event.clientY, event.pointerType))
+                return;
+            // A line of a study or of a series in a panel (data-select-id) is a hit; clear chart below the first panel is not the bar series'.
+            const hitEl = event.target?.closest?.("[data-part='study-hit'],[data-part='series-hit']");
+            const hitId = hitEl?.getAttribute('data-select-id');
+            const hit = hitId ? { kind: hitEl?.getAttribute('data-part') === 'series-hit' ? 'series' : 'study', id: hitId } : null;
+            tap = { pointerId: event.pointerId, x: event.clientX, y: event.clientY, at: event.timeStamp, hit, before: c.current(), inMain: point.y < ch.frame.plotHeight };
+        };
+        const onMove = (event) => {
+            if (tap && tap.pointerId === event.pointerId && Math.hypot(event.clientX - tap.x, event.clientY - tap.y) > TAP_SLOP)
+                tap = null;
+        };
+        const onUp = (event) => {
+            down.delete(event.pointerId);
+            if (!tap || tap.pointerId !== event.pointerId)
+                return;
+            const t = tap;
+            tap = null;
+            if (event.type !== 'pointerup' || Math.hypot(event.clientX - t.x, event.clientY - t.y) > TAP_SLOP || event.timeStamp - t.at >= TAP_MS)
+                return;
+            const { ctx: c } = live.current;
+            c.select(selectionAfterTap(t.before, t.hit, t.inMain ? c.series?.id ?? null : null));
+        };
+        const onKey = (event) => {
+            if (event.key !== 'Escape' || event.altKey || event.ctrlKey || event.metaKey || event.shiftKey)
+                return;
+            const { ctx: c } = live.current;
+            if (c.guard.current?.busy())
+                return;
+            c.select(selectionAfterEscape(c.current()));
+        };
+        svg.addEventListener('pointerdown', onDown);
+        svg.addEventListener('pointermove', onMove);
+        svg.addEventListener('pointerup', onUp);
+        svg.addEventListener('pointercancel', onUp);
+        svg.addEventListener('keydown', onKey);
+        return () => {
+            svg.removeEventListener('pointerdown', onDown);
+            svg.removeEventListener('pointermove', onMove);
+            svg.removeEventListener('pointerup', onUp);
+            svg.removeEventListener('pointercancel', onUp);
+            svg.removeEventListener('keydown', onKey);
+        };
+    }, []);
+    return _jsx("g", { ref: ref, "data-part": "selection-layer", "aria-hidden": "true" });
+}
+/**
+ * Says that a bar series exists, so a tap on clear chart can select it (with a Selection.Layer in the plot). It draws
+ * nothing. Put it above the chart and the Series.Select and Series.Options. The selected series shows
+ * `data-state='selected'` on its `Chart.Candles`.
+ */
+function SeriesRoot({ id, label, children }) {
+    const ctx = useSelection('Series.Root');
+    const { registerSeries, setName } = ctx;
+    useEffect(() => {
+        const undo = registerSeries({ id, label });
+        setName('series', id, label);
+        return undo;
+    }, [registerSeries, setName, id, label]);
+    const selected = ctx.selection !== null && ctx.selection.kind === 'series' && ctx.selection.id === id;
+    const value = useMemo(() => ({ id, label, selected }), [id, label, selected]);
+    return _jsx(SeriesContext.Provider, { value: value, children: children });
+}
+function useSeries(part) {
+    const context = useContext(SeriesContext);
+    if (!context)
+        throw new Error(`Series.${part} needs a Series.Root above it.`);
+    return context;
+}
+/**
+ * A button that selects the series, and puts the selection away when pressed again: the keyboard and touch path to what
+ * a tap on clear chart does. `aria-pressed` carries the state. Its name is the series label unless you give a `label`
+ * or children.
+ */
+function Select({ className, icon, label, hideLabel, children }) {
+    const ctx = useSelection('Series.Select');
+    const series = useSeries('Select');
+    const face = buttonFace(series.label, { icon, label, hideLabel, children });
+    return (_jsx("button", { type: "button", className: className, "data-mt": "", "data-touch-target": "", "data-part": "series-select", "data-state": series.selected ? 'selected' : undefined, "aria-label": face['aria-label'], "aria-pressed": series.selected, onClick: () => ctx.select(series.selected ? null : { kind: 'series', id: series.id }), children: face.content }));
+}
+/**
+ * A headless panel for the series' options. It shows its children only while the series is selected. The primitives
+ * ship no option fields: put your own controls inside (an interval list, an instrument picker) and decide what a change
+ * means. `label` names the group; the default is the series label and "options".
+ */
+function Options({ className, label, children }) {
+    const series = useSeries('Options');
+    if (!series.selected)
+        return null;
+    return (_jsx("div", { className: className, role: "group", "aria-label": label ?? `${series.label} options`, "data-mt": "", "data-part": "series-options", "data-series": series.id, children: children }));
+}
+export { Root, Layer, SeriesRoot, Select, Options, useSelection };

package/dist/Studies.d.ts

@@ -0,0 +1,9 @@
+import { Root, Line, Band, Legend } from './StudiesParts.js';
+export * from './StudiesParts.js';
+export declare const Study: {
+    Root: typeof Root;
+    Line: typeof Line;
+    Band: typeof Band;
+    Legend: typeof Legend;
+};
+//# sourceMappingURL=Studies.d.ts.map

package/dist/Studies.js

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

package/dist/StudiesParts.d.ts

@@ -0,0 +1,45 @@
+import { type ReactNode } from 'react';
+import { type SeriesPoint } from './core/series.js';
+/** Keeps the studies' names and values so the Legend can list them. Draws nothing. */
+declare function Root({ children }: {
+    children?: ReactNode;
+}): import("react").JSX.Element;
+export interface StudyLineProps {
+    /** The line on its own clock, placed on the bars by exact time. A bar with no point on it has no value there; a bar's gap kind (closed, missing, ...) is not drawn. */
+    points?: ReadonlyArray<SeriesPoint>;
+    /**
+     * One value per bar by position, null where the study has none. A study computed from these bars (`sma(bars, 20)`) is
+     * already by position. Give `points` for a series that comes from elsewhere. Neither given draws nothing.
+     * @deprecated Give `points` (`pointsFromValues(bars, sma(bars, 20))` makes them). `values` is removed in 0.0.7.
+     */
+    values?: ReadonlyArray<number | null>;
+    /** Shown in the Legend and carried as `data-study`. */
+    name: string;
+    /** Makes the study selectable (with a Selection.Root above): by a tap on the line and by its Legend button. Unique on the chart. */
+    id?: string;
+    className?: string;
+}
+declare function Line({ values: given, points, name, id, className }: StudyLineProps): import("react").JSX.Element | null;
+export interface StudyBandProps {
+    upper: ReadonlyArray<number | null>;
+    lower: ReadonlyArray<number | null>;
+    /** Shown in the Legend as "lower - upper" and carried as `data-study`. Without a name the band is not listed. */
+    name?: string;
+    /** Makes the study selectable (with a Selection.Root above): by a tap on the band and, when it has a name, by its Legend button. Unique on the chart. */
+    id?: string;
+    className?: string;
+}
+/** The space between two series, filled. It stops where either series has no value. */
+declare function Band({ upper: givenUpper, lower: givenLower, name, id, className }: StudyBandProps): import("react").JSX.Element | null;
+export interface StudyLegendProps {
+    className?: string;
+    /** Prints one value. Default: the chart's decimals. */
+    format?: (value: number) => string;
+}
+/**
+ * The studies and their values at the crosshair bar (the last bar in view while there is no crosshair). Put it outside
+ * the SVG. `data-active` is present while the values belong to a crosshair bar. A study with no value there shows a dash.
+ */
+declare function Legend({ className, format }: StudyLegendProps): import("react").JSX.Element;
+export { Root, Line, Band, Legend };
+//# sourceMappingURL=StudiesParts.d.ts.map

package/dist/StudiesParts.js

@@ -0,0 +1,153 @@
+'use client';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { createContext, useCallback, useContext, useEffect, useId, useMemo, useState } from 'react';
+import { useChart } from './ChartParts.js';
+import { resolveSeries } from './core/series.js';
+import { SelectionContext } from './selection-context.js';
+const RegistryContext = createContext(null);
+const EntriesContext = createContext(new Map());
+/** Keeps the studies' names and values so the Legend can list them. Draws nothing. */
+function Root({ children }) {
+    const [entries, setEntries] = useState(() => new Map());
+    const register = useCallback((id, entry) => {
+        setEntries((current) => {
+            const next = new Map(current);
+            next.set(id, entry);
+            return next;
+        });
+    }, []);
+    const unregister = useCallback((id) => {
+        setEntries((current) => {
+            if (!current.has(id))
+                return current;
+            const next = new Map(current);
+            next.delete(id);
+            return next;
+        });
+    }, []);
+    const registry = useMemo(() => ({ register, unregister }), [register, unregister]);
+    return (_jsx(RegistryContext.Provider, { value: registry, children: _jsx(EntriesContext.Provider, { value: entries, children: children }) }));
+}
+function useRegistration(name, series, selectId, problems) {
+    const registry = useContext(RegistryContext);
+    const id = useId();
+    useEffect(() => {
+        registry?.register(id, { name, series, selectId, problems });
+        return () => registry?.unregister(id);
+    }, [registry, id, name, series, selectId, problems]);
+}
+/** Wide enough for a finger: the transparent hit stroke is --mt-touch-target (44px) across. */
+const HIT_WIDTH = 44;
+/**
+ * Selection for a study with an `id`: whether it is selected, and the extra id the Legend needs. Without a Selection.Root
+ * above, or without an id, nothing is selectable and the study draws exactly as it did.
+ */
+function useStudySelection(id, name) {
+    const selection = useContext(SelectionContext);
+    const setName = selection?.setName;
+    useEffect(() => {
+        if (setName && id !== undefined && name)
+            setName('study', id, name);
+    }, [setName, id, name]);
+    const selectId = selection && id !== undefined ? id : undefined;
+    const sel = selection?.selection;
+    const selected = selectId !== undefined && !!sel && sel.kind === 'study' && sel.id === selectId;
+    return { selectId, selected };
+}
+const num = (n) => n.toFixed(2);
+/** One run of consecutive bars first..last, as SVG path segments. `pick` returns a point for a bar or null to break the run. */
+function runs(first, last, pick) {
+    const out = [];
+    let run = [];
+    for (let i = first; i <= last; i++) {
+        if (pick(i) === null) {
+            if (run.length)
+                out.push(run);
+            run = [];
+        }
+        else
+            run.push(i);
+    }
+    if (run.length)
+        out.push(run);
+    return out;
+}
+const valid = (v) => v !== null && v !== undefined && Number.isFinite(v);
+/** A line through the study's values in view. It lifts the pen at every null, so a warm-up gap stays a gap. */
+const NO_VALUES = [];
+function Line({ values: given, points, name, id, className }) {
+    const { frame, readoutId, bars } = useChart('Study.Line');
+    // Points are placed on the bars by exact time; a study's own values are already one per bar.
+    const resolved = useMemo(() => {
+        if (points === undefined) {
+            if (given !== undefined)
+                return { values: given, problems: [] };
+            return { values: NO_VALUES, problems: [`"${name}" has neither points nor values, so there is nothing to draw.`] };
+        }
+        const r = resolveSeries(bars.map((b) => b.timestamp), { id: id ?? name, label: name, points });
+        return { values: r.values, problems: r.problems };
+    }, [points, given, bars, id, name]);
+    const values = resolved.values;
+    const series = useMemo(() => [values], [values]);
+    const { selectId, selected } = useStudySelection(id, name);
+    useRegistration(name, series, selectId, resolved.problems);
+    let d = '';
+    for (const run of runs(frame.first, frame.last, (i) => (valid(values[i]) ? 0 : null))) {
+        if (run.length < 2)
+            continue;
+        d += run.map((i, k) => `${k === 0 ? 'M' : 'L'}${num(frame.x(i))},${num(frame.y(values[i]))}`).join('');
+    }
+    if (!d)
+        return null;
+    const line = _jsx("path", { className: className, "data-part": "study-line", "data-state": selected ? 'selected' : undefined, clipPath: `url(#${readoutId}-price)`, "data-study": name, d: d, fill: "none", "aria-hidden": "true" });
+    if (selectId === undefined)
+        return line;
+    // A wide transparent stroke on top, so a finger can hit a thin line. The Selection.Layer reads the tap from `data-select-id`.
+    return (_jsxs(_Fragment, { children: [line, _jsx("path", { "data-part": "study-hit", "data-select-id": selectId, clipPath: `url(#${readoutId}-price)`, d: d, fill: "none", stroke: "transparent", strokeWidth: HIT_WIDTH, strokeLinecap: "round", strokeLinejoin: "round", pointerEvents: "stroke", "aria-hidden": "true" })] }));
+}
+/** The space between two series, filled. It stops where either series has no value. */
+function Band({ upper: givenUpper, lower: givenLower, name = '', id, className }) {
+    const upper = givenUpper ?? NO_VALUES; // a side that is not computed yet leaves the band empty
+    const lower = givenLower ?? NO_VALUES;
+    const { frame, readoutId } = useChart('Study.Band');
+    const series = useMemo(() => [lower, upper], [lower, upper]);
+    const { selectId, selected } = useStudySelection(id, name);
+    useRegistration(name, series, selectId);
+    let d = '';
+    const both = (i) => (valid(upper[i]) && valid(lower[i]) ? 0 : null);
+    for (const run of runs(frame.first, frame.last, both)) {
+        if (run.length < 2)
+            continue;
+        const top = run.map((i, k) => `${k === 0 ? 'M' : 'L'}${num(frame.x(i))},${num(frame.y(upper[i]))}`).join('');
+        const bottom = [...run].reverse().map((i) => `L${num(frame.x(i))},${num(frame.y(lower[i]))}`).join('');
+        d += `${top}${bottom}Z`;
+    }
+    if (!d)
+        return null;
+    const band = _jsx("path", { className: className, "data-part": "study-band", "data-state": selected ? 'selected' : undefined, clipPath: `url(#${readoutId}-price)`, "data-study": name || undefined, d: d, "aria-hidden": "true" });
+    if (selectId === undefined)
+        return band;
+    return (_jsxs(_Fragment, { children: [band, _jsx("path", { "data-part": "study-hit", "data-select-id": selectId, clipPath: `url(#${readoutId}-price)`, d: d, fill: "transparent", stroke: "transparent", strokeWidth: HIT_WIDTH, strokeLinejoin: "round", pointerEvents: "all", "aria-hidden": "true" })] }));
+}
+/**
+ * The studies and their values at the crosshair bar (the last bar in view while there is no crosshair). Put it outside
+ * the SVG. `data-active` is present while the values belong to a crosshair bar. A study with no value there shows a dash.
+ */
+function Legend({ className, format }) {
+    const { active, frame, decimals } = useChart('Study.Legend');
+    const entries = useContext(EntriesContext);
+    const selection = useContext(SelectionContext);
+    const index = active ?? frame.last;
+    const text = (v) => (valid(v) ? (format ? format(v) : v.toFixed(decimals)) : '–');
+    const items = [];
+    entries.forEach((entry, id) => {
+        if (!entry.name)
+            return;
+        const selectId = selection ? entry.selectId : undefined;
+        const selected = selectId !== undefined && selection.selection?.kind === 'study' && selection.selection.id === selectId;
+        const name = _jsx("span", { "data-part": "study-name", children: entry.name });
+        items.push(_jsxs("li", { "data-part": "study-legend-item", "data-study": entry.name, "data-state": selected ? 'selected' : undefined, children: [selectId === undefined ? name : (_jsx("button", { type: "button", "data-mt": "", "data-touch-target": "", "data-part": "study-select", "aria-pressed": selected, onClick: () => selection.select(selected ? null : { kind: 'study', id: selectId }), children: name })), ' ', _jsx("span", { "data-part": "study-value", "data-mt-numeric": true, children: entry.series.map((s) => text(s[index])).join(' – ') }), (entry.problems ?? []).map((p) => _jsxs("span", { "data-part": "study-problem", role: "note", children: [" ", p] }, p))] }, id));
+    });
+    return _jsx("ul", { className: className, "data-part": "study-legend", "data-active": active !== null ? '' : undefined, "aria-label": "Study values", children: items });
+}
+export { Root, Line, Band, Legend };

package/dist/Submenu.d.ts

@@ -0,0 +1,7 @@
+import { List, SubmenuRoot, SubmenuTrigger } from './MenuParts.js';
+export declare const Submenu: {
+    Root: typeof SubmenuRoot;
+    Trigger: typeof SubmenuTrigger;
+    List: typeof List;
+};
+//# sourceMappingURL=Submenu.d.ts.map

package/dist/Submenu.js

@@ -0,0 +1,4 @@
+import { List, SubmenuRoot, SubmenuTrigger } from './MenuParts.js';
+// A submenu is a menu inside a menu. Its list and items are the Menu ones (Menu.List, Menu.Item); only the root and the
+// trigger differ. Built here, outside the client module, for the same reason as Menu.
+export const Submenu = { Root: SubmenuRoot, Trigger: SubmenuTrigger, List };