@pond-ts/charts 0.37.0 → 0.38.0

package/CHANGELOG.md

@@ -8,7 +8,8 @@ The `@pond-ts` packages — `pond-ts`, `@pond-ts/react`, `@pond-ts/charts`, and
 them all. Pre-1.0: minor bumps may include new features and type-level changes;
 patch bumps are strictly additive.
 
-[Unreleased]: https://github.com/pjm17971/pond-ts/compare/v0.37.0...HEAD
+[Unreleased]: https://github.com/pjm17971/pond-ts/compare/v0.38.0...HEAD
+[0.38.0]: https://github.com/pjm17971/pond-ts/compare/v0.37.0...v0.38.0
 [0.37.0]: https://github.com/pjm17971/pond-ts/compare/v0.36.0...v0.37.0
 [0.36.0]: https://github.com/pjm17971/pond-ts/compare/v0.35.0...v0.36.0
 [0.35.0]: https://github.com/pjm17971/pond-ts/compare/v0.34.1...v0.35.0
@@ -33,6 +34,49 @@ patch bumps are strictly additive.
 [0.19.0]: https://github.com/pjm17971/pond-ts/compare/v0.18.0...v0.19.0
 [0.18.0]: https://github.com/pjm17971/pond-ts/compare/v0.17.1...v0.18.0
 
+## [0.38.0] — 2026-07-03
+
+A `@pond-ts/charts` release: **axis-edge value indicators + the crosshair
+cursor** — the ChartIQ / Yahoo-Finance price-tag family, driven by the Tidal
+terminal. `pond-ts`, `@pond-ts/react`, and `@pond-ts/fit` carry no code changes —
+republished in lock-step (peer ranges widen to `^0.38.0`).
+
+### Added
+
+- `@pond-ts/charts`: **`<YAxisIndicator>` + `createLiveValue`** — a value pill
+  pinned to a y-axis edge, decoupled from the series' last point. A `LiveValue`
+  `source` updates it at high frequency **without re-rendering the chart** (only
+  the subscribed pill repaints). Props: `value` / `source`, `axis`, `side`,
+  `color`, `format`, `line` (dashed guide), `pointer` (callout triangle).
+- `@pond-ts/charts`: **`cursor="crosshair"`** `CursorMode` — a synced vertical
+  line + per-series dots, each series' value pinned to its y-axis and the hovered
+  time pinned to the x-axis.
+- `@pond-ts/charts`: **`indicator`** opt-in on `<Baseline>` (a y-axis value pill)
+  and `<Marker>` (an x-axis time pill, with a connector down to the mark).
+- `@pond-ts/charts`: `<Baseline labelSide>` (`left` / `right`) + `labelPosition`
+  (`center` on the line / `above` it) for the near-line label chip.
+- `@pond-ts/charts`: `<Region edges>` (default `true`; `false` = shaded fill with
+  no side outlines).
+- `@pond-ts/charts`: `axisPillStyle`, `contrastText`, `pointerStyle` chip helpers
+  are exported.
+
+### Changed
+
+- `@pond-ts/charts`: axis indicator pills are **solid** (colour fill +
+  auto-contrast text), aligned to the tick-label row, and **always show the axis
+  coordinate** — never a custom label (a label stays the in-plot chip).
+- `@pond-ts/charts`: cursor flag / inline chips now have **square corners**; the
+  cursor **time** atop a flag stack renders as plain text (no chip background).
+- `@pond-ts/charts`: Storybook reorganized into a feature-axis reference tree with
+  systematic per-prop coverage (dev-only; stories are excluded from the package).
+
+### Fixed
+
+- `@pond-ts/charts`: the crosshair x-axis pill used the container's time formatter
+  (showing a raw number on a value axis) — it now uses the axis's own resolved
+  formatter, matching the ticks. The crosshair also no longer double-renders the
+  time (a stray per-row chip alongside the x-axis pill).
+
 ## [0.37.0] — 2026-07-02
 
 A `@pond-ts/charts` release: the axis wave — label, tick, and domain controls
@@ -110,7 +154,7 @@ lock-step (their `pond-ts` / `@pond-ts/react` peer ranges widen to `^0.35.0`).
   (`[6, 4]` dashed, `[2, 3]` ≈ dotted; omit or `[]` = solid) applied to the
   series stroke. Lets a theme set a **modeled / forecast** line (e.g. GARCH
   vol) apart from an observed one at a glance. Distinct from a `GapMode`'s
-  inferred gap-bridge dashing (which marks *missing data*, not the whole
+  inferred gap-bridge dashing (which marks _missing data_, not the whole
   line). Additive: existing themes are unaffected; a solid line never touches
   `setLineDash`. New `Charts/LineChart → LineStyles` story. (#313)
 
@@ -149,7 +193,7 @@ Tidal wire-format spike. `@pond-ts/react`, `@pond-ts/charts`, and
 - **`TimeSeries.fromColumns`** — the columnar (struct-of-arrays) ingress,
   the counterpart to `fromJSON`'s row-tuple shape. Accepts either a plain
   `number[]` or a `Float64Array` per column — one polymorphic door, so a
-  wire format only changes the *decoder*, not the ingest. `Float64Array`
+  wire format only changes the _decoder_, not the ingest. `Float64Array`
   columns are adopted directly (zero-copy); `number[]` columns are copied.
   A `null`/`undefined` cell or a non-finite value (`NaN`/`Infinity`) is a
   gap, identically across both input shapes. Enforces the same

package/dist/ChartRow.js

@@ -179,6 +179,14 @@ export function ChartRow({ height, cursor, children }) {
         }
         return map;
     }, [effectiveAxes]);
+    // Which side each axis sits on — so an axis-edge overlay (the crosshair's
+    // value pills) hugs the correct gutter without re-deriving from the specs.
+    const axisSides = useMemo(() => {
+        const map = new Map();
+        for (const ax of effectiveAxes)
+            map.set(ax.id, ax.side);
+        return map;
+    }, [effectiveAxes]);
     const frame = useMemo(() => ({
         height,
         cursor,
@@ -187,6 +195,7 @@ export function ChartRow({ height, cursor, children }) {
         yScales,
         formats,
         tickValues,
+        axisSides,
         defaultAxisId,
         axisSlots,
         registerAxis,
@@ -202,6 +211,7 @@ export function ChartRow({ height, cursor, children }) {
         yScales,
         formats,
         tickValues,
+        axisSides,
         defaultAxisId,
         axisSlots,
         registerAxis,

package/dist/Layers.js

@@ -5,7 +5,7 @@ import { drawGrid } from './grid.js';
 import { cursorParts } from './tracker.js';
 import { resolveSelection } from './select.js';
 import { panRange, zoomRange } from './viewport.js';
-import { flagChipStyle, flagChipX } from './chip.js';
+import { flagChipStyle, flagChipX, axisPillX, axisPillStyle } from './chip.js';
 import { ContainerContext, LayersContext, RowContext, } from './context.js';
 /** Gridline tick count — matches the axes (`YAxis`/`TimeAxis`) so they align. */
 const GRID_TICKS = 5;
@@ -49,7 +49,7 @@ export function Layers({ children }) {
     }), [row.registerLayer, row.unregisterLayer]);
     const background = container.theme.background;
     const { grid: gridColor, gridDash } = container.theme.axis;
-    const { layers, yScales, formats, defaultAxisId, tickValues } = row;
+    const { layers, yScales, formats, defaultAxisId, tickValues, axisSides } = row;
     // x geometry is shared and lives on the container (uniform across rows).
     const { xScale, plotWidth } = container;
     const draw = useCallback((ctx, w, h) => {
@@ -132,6 +132,8 @@ export function Layers({ children }) {
             // The chip uses this layer's axis formatter, so a readout value reads
             // exactly as the axis labels it.
             const fmt = formats.get(axisId) ?? String;
+            // Which gutter the crosshair value pill hugs (the axis's own side).
+            const side = axisSides.get(axisId) ?? 'left';
             for (const s of entry.layer.sampleAt(cursorTime)) {
                 out.push({
                     px: xScale(s.x),
@@ -139,6 +141,7 @@ export function Layers({ children }) {
                     value: s.value,
                     color: s.color,
                     format: fmt,
+                    side,
                 });
             }
         }
@@ -148,6 +151,7 @@ export function Layers({ children }) {
         layers,
         yScales,
         formats,
+        axisSides,
         xScale,
         defaultAxisId,
         parts.dots,
@@ -403,9 +407,13 @@ export function Layers({ children }) {
     // The time is shared across rows (one cursor, one time), so it shows **once**,
     // atop the first row — not repeated per row. (Gating it here also drops the
     // top-of-stack space reservation on the other rows, see `flagBase`.)
+    // Crosshair (`chip: 'axis'`) is excluded: it pins the time to the shared x-axis
+    // pill (`<XAxis>`), so a per-row chip here would double it (and land wrong on a
+    // stacked row).
     const showTime = showCursorTime &&
         cursorTime !== null &&
         (parts.line || parts.dots) &&
+        parts.chip !== 'axis' &&
         row.isFirstRow;
     // Flag geometry: each value flies as a flag from the top of its own staff — the
     // chip's top sits at `flagBase` (just below the time chip when shown) and the
@@ -491,9 +499,12 @@ export function Layers({ children }) {
                             cursorX >= 0 &&
                             cursorX <= plotWidth && (_jsx("line", { x1: Math.round(cursorX), y1: 0, x2: Math.round(cursorX), y2: row.height, stroke: cursorColor, strokeWidth: 1, shapeRendering: "crispEdges" })), parts.chip === 'flag' &&
                             trackerSamples.map((s, i) => s.py > flagBase ? (_jsx("line", { x1: s.px, y1: flagBase, x2: s.px, y2: s.py, stroke: cursorColor, strokeWidth: 1, opacity: 0.5 }, `staff-${i}`)) : null), parts.chip === 'flag' &&
-                            trackerFlags.map((f, i) => f.topPy > flagBase ? (_jsx("line", { x1: f.px, y1: flagBase, x2: f.px, y2: f.topPy, stroke: cursorColor, strokeWidth: 1, opacity: 0.5 }, `boxstaff-${i}`)) : null), parts.dots &&
+                            trackerFlags.map((f, i) => f.topPy > flagBase ? (_jsx("line", { x1: f.px, y1: flagBase, x2: f.px, y2: f.topPy, stroke: cursorColor, strokeWidth: 1, opacity: 0.5 }, `boxstaff-${i}`)) : null), parts.chip === 'axis' &&
+                            trackerSamples.map((s, i) => (_jsx("line", { x1: s.side === 'right' ? Math.round(s.px) : 0, y1: Math.round(s.py), x2: s.side === 'right' ? plotWidth : Math.round(s.px), y2: Math.round(s.py), stroke: s.color, strokeWidth: 1, opacity: 0.4, strokeDasharray: "3 3", shapeRendering: "crispEdges" }, `hconn-${i}`))), parts.dots &&
                             trackerSamples.map((s, i) => (_jsx("circle", { cx: s.px, cy: s.py, r: 3, fill: s.color, stroke: background, strokeWidth: background ? 1 : 0 }, `dot-${i}`)))] }), showTime && timeX !== null && cursorTime !== null && (_jsx("div", { style: {
                         ...chipStyle,
+                        background: 'transparent',
+                        padding: 0,
                         top: `${flagTop}px`,
                         left: timeX > plotWidth * LABEL_FLIP_FRACTION
                             ? undefined
@@ -518,6 +529,15 @@ export function Layers({ children }) {
                                 right: flip ? `${plotWidth - s.px + 8}px` : undefined,
                                 color: s.color,
                             }, children: s.format(s.value) }, i));
+                    }), parts.chip === 'axis' &&
+                    trackerSamples.map((s, i) => {
+                        const top = Math.max(flagLineHeight / 2, Math.min(row.height - flagLineHeight / 2, s.py));
+                        return (_jsx("div", { style: {
+                                ...axisPillStyle(container.theme, s.color),
+                                top: `${top}px`,
+                                transform: 'translateY(-50%)',
+                                ...axisPillX(s.side, plotWidth),
+                            }, children: s.format(s.value) }, `ytag-${i}`));
                     }), parts.chip === 'flag' &&
                     cursorX !== null &&
                     trackerSamples.map((s, i) => (

package/dist/XAxis.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment, useContext } from 'react';
 import { ContainerContext } from './context.js';
+import { axisPillStyle } from './chip.js';
 import { resolveAxisFormat, resolveTimeFormat, } from './format.js';
 /** Tick strip height (mark + value label) in CSS px. */
 const TICK_STRIP = 22;
@@ -23,6 +24,17 @@ export function XAxis({ format, label, side = 'bottom', height, ticks: customTic
         throw new Error('<XAxis> must be rendered inside a <ChartContainer>');
     }
     const { xScale, plotWidth, leftGutter, theme, formatTime, xKind } = container;
+    // The crosshair's x-time pill: when the container cursor is `'crosshair'` and a
+    // cursor is live in-bounds, pin the hovered time to this axis (covering the
+    // tick behind it), matching the on-axis y value pills the rows draw. Gated on
+    // the container default, so a per-row `cursor` override doesn't reach here.
+    const cursorX = container.cursorX;
+    const showCursorTag = container.cursor === 'crosshair' &&
+        cursorX !== null &&
+        cursorX >= 0 &&
+        cursorX <= plotWidth;
+    const cursorColor = theme.cursor ?? theme.axis.label;
+    const annotationColor = theme.annotation?.color ?? '#0d9488';
     // Tick formatter: an explicit `format` is resolved against the axis kind
     // (a time specifier through the time scale, a number specifier through the
     // value scale); otherwise the container's shared formatter — the one the
@@ -32,6 +44,18 @@ export function XAxis({ format, label, side = 'bottom', height, ticks: customTic
         : xKind === 'time'
             ? resolveTimeFormat(xScale, TICK_COUNT, format)
             : resolveAxisFormat(xScale, TICK_COUNT, format);
+    // Marker annotations that opted into an axis indicator (`<Marker indicator>`)
+    // pin their **time** to this shared x-axis — a pill at `at`, in the annotation
+    // colour, reading like a tick. An indicator always shows the axis coordinate
+    // (the formatted `at`), never the marker's custom label (that stays the in-plot
+    // chip). Skipped when off-plot.
+    const markerTags = container.annotations
+        .filter((a) => a.indicator && a.kind === 'marker' && a.xs[0] !== undefined)
+        .map((a) => {
+        const at = a.xs[0];
+        return { id: a.id ?? `marker-at-${at}`, x: xScale(at), text: fmt(at) };
+    })
+        .filter((t) => t.x >= 0 && t.x <= plotWidth);
     const placed = customTicks
         ? customTicks.map((t) => ({ x: xScale(t.at), label: t.label }))
         : xScale.ticks(TICK_COUNT).map((d) => ({
@@ -40,6 +64,9 @@ export function XAxis({ format, label, side = 'bottom', height, ticks: customTic
         }));
     const stripHeight = height ?? TICK_STRIP + (label ? LABEL_STRIP : 0);
     const onTop = side === 'top';
+    // Axis pills (marker / crosshair) sit at the same offset as the tick labels so
+    // they line up with their tick-label neighbours (matches `labelOffset` below).
+    const pillOffset = align === 'right' ? 2 : 6;
     return (_jsxs("div", { style: {
             position: 'relative',
             marginLeft: `${leftGutter}px`,
@@ -92,6 +119,26 @@ export function XAxis({ format, label, side = 'bottom', height, ticks: customTic
                     color: theme.axis.title?.color ?? theme.axis.label,
                     opacity: theme.axis.title?.opacity ?? 0.85,
                     whiteSpace: 'nowrap',
-                }, children: label }))] }));
+                }, children: label })), markerTags.map((t) => (_jsxs(Fragment, { children: [_jsx("div", { style: {
+                            position: 'absolute',
+                            left: `${t.x}px`,
+                            [onTop ? 'bottom' : 'top']: 0,
+                            width: '1px',
+                            height: `${pillOffset}px`,
+                            background: annotationColor,
+                            zIndex: 2,
+                        } }), _jsx("div", { style: {
+                            ...axisPillStyle(theme, annotationColor),
+                            left: `${t.x}px`,
+                            transform: 'translateX(-50%)',
+                            [onTop ? 'bottom' : 'top']: `${pillOffset}px`,
+                            zIndex: 2,
+                        }, children: t.text })] }, t.id))), showCursorTag && (_jsx("div", { style: {
+                    ...axisPillStyle(theme, cursorColor),
+                    left: `${cursorX}px`,
+                    transform: 'translateX(-50%)',
+                    [onTop ? 'bottom' : 'top']: `${pillOffset}px`,
+                    zIndex: 3,
+                }, children: fmt(+xScale.invert(cursorX)) }))] }));
 }
 //# sourceMappingURL=XAxis.js.map

package/dist/annotations.d.ts

@@ -51,9 +51,16 @@ export interface MarkerProps {
     /** Make the marker **editable** (in edit mode): dragging its line reports the
      *  new `at` (controlled — wire it back to `at`). The whole line moves. */
     onChange?: (at: number) => void;
+    /** Also pin this marker's **time** to the **x-axis** as an on-axis pill (drawn
+     *  by `<XAxis>` at `at`, in the annotation colour) — the axis-edge counterpart
+     *  of the near-line chip. Default `false`. The pill always shows the formatted
+     *  `at` (the axis coordinate), never the custom `label` (which stays the
+     *  near-line chip) — an indicator reads like a tick. A connector links the
+     *  marker line to its pill. */
+    indicator?: boolean;
 }
 /** A vertical line at an x position (a time, a distance, a lap boundary). */
-export declare function Marker({ at, label, id, selected, selectable, hovered, editing, onChange, }: MarkerProps): import("react/jsx-runtime").JSX.Element;
+export declare function Marker({ at, label, id, selected, selectable, hovered, editing, onChange, indicator, }: MarkerProps): import("react/jsx-runtime").JSX.Element;
 export interface BaselineProps {
     /** y value in the linked axis's units. */
     value: number;
@@ -62,6 +69,11 @@ export interface BaselineProps {
     /** Chip label. Omit to format `value` with that axis's formatter; pass `false`
      *  (or `''`) to render **no label chip**. */
     label?: string | false;
+    /** Which side of the chart the near-line label chip sits. **Default `left`.** */
+    labelSide?: 'left' | 'right';
+    /** Where the label chip sits relative to the line: **`center`** (default) rides
+     *  on the line, vertically centred; `above` sits just on top of it. */
+    labelPosition?: 'center' | 'above';
     /** Stable consumer id — a click reports it via `onSelectAnnotation`. */
     id?: string;
     /** Controlled selection — brightens to the front (level 1). Handles are an
@@ -82,10 +94,16 @@ export interface BaselineProps {
     /** Make the baseline **editable** (in edit mode): dragging it vertically reports
      *  the new `value` (controlled — wire it back to `value`). */
     onChange?: (value: number) => void;
+    /** Also pin this baseline's **value** to its **y-axis** as an on-axis pill (in
+     *  the annotation colour) — the axis-edge counterpart of the near-line chip.
+     *  Default `false`. The pill always shows the formatted `value` (the axis
+     *  coordinate), never the custom `label` (which stays the near-line chip) — an
+     *  indicator reads like a tick. */
+    indicator?: boolean;
 }
 /** A horizontal line at a y value, scaled against one row axis (RTC's `Baseline`).
  *  Its label anchors at the left, at the line's height. */
-export declare function Baseline({ value, axis, label, id, selected, selectable, hovered, editing, onChange, }: BaselineProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function Baseline({ value, axis, label, labelSide, labelPosition, id, selected, selectable, hovered, editing, onChange, indicator, }: BaselineProps): import("react/jsx-runtime").JSX.Element | null;
 export interface RegionProps {
     /** Start x in axis units (time or value). */
     from: number;
@@ -122,8 +140,12 @@ export interface RegionProps {
         from: number;
         to: number;
     }) => void;
+    /** Draw the vertical **side outlines** at `from`/`to`. **Default `true`.**
+     *  `false` shades the span with no edge lines (fill only) — a soft highlight
+     *  band. Edit-mode resizing still works (the grab areas are invisible). */
+    edges?: boolean;
 }
 /** A shaded span over an x range — a lap, a zone, a selected interval. Its label
  *  flies as a flag off the left edge. */
-export declare function Region({ from, to, label, id, selected, selectable, hovered, editing, onChange, }: RegionProps): import("react/jsx-runtime").JSX.Element;
+export declare function Region({ from, to, label, id, selected, selectable, hovered, editing, onChange, edges, }: RegionProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=annotations.d.ts.map

package/dist/annotations.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useContext, useEffect, useMemo, useRef, useState, } from 'react';
 import { ContainerContext, RowContext, } from './context.js';
-import { flagChipStyle, flagChipX } from './chip.js';
+import { flagChipStyle, flagChipX, axisPillX, axisPillStyle } from './chip.js';
 import { useSlotKey } from './use-slot-key.js';
 /**
  * User-authored **annotations** — marks you place *on* a chart, in a register
@@ -114,7 +114,7 @@ function useAnnotationFrame(name) {
  *  other rows, order regions, and serve snap targets), keyed by the caller's stable
  *  per-instance slot key; unregister on unmount. `xs` should be memoised by the
  *  caller so the effect only re-runs when the position actually moves. */
-function useRegisterAnnotation(container, key, id, rowKey, kind, xs, selected, selectable, editing, label) {
+function useRegisterAnnotation(container, key, id, rowKey, kind, xs, selected, selectable, editing, label, indicator) {
     const { registerAnnotation, unregisterAnnotation } = container;
     useEffect(() => () => unregisterAnnotation(key), [unregisterAnnotation, key]);
     useEffect(() => {
@@ -128,6 +128,7 @@ function useRegisterAnnotation(container, key, id, rowKey, kind, xs, selected, s
             selectable,
             editing,
             label,
+            indicator,
         });
     }, [
         registerAnnotation,
@@ -140,6 +141,7 @@ function useRegisterAnnotation(container, key, id, rowKey, kind, xs, selected, s
         selectable,
         editing,
         label,
+        indicator,
     ]);
 }
 /** Vertical px between stacked label lanes. */
@@ -338,7 +340,7 @@ function DragArea({ x, y, w, h, cursor, editable, onHover, onSelect, onEdit, onD
         } }));
 }
 /** A vertical line at an x position (a time, a distance, a lap boundary). */
-export function Marker({ at, label, id, selected = false, selectable = true, hovered, editing = false, onChange, }) {
+export function Marker({ at, label, id, selected = false, selectable = true, hovered, editing = false, onChange, indicator = false, }) {
     const { container, row, ann } = useAnnotationFrame('Marker');
     const selfKey = useSlotKey();
     const { hovering, reportHover } = useAnnotationHover(container, id, hovered);
@@ -350,7 +352,7 @@ export function Marker({ at, label, id, selected = false, selectable = true, hov
     const xs = useMemo(() => [at], [at]);
     // `label === false` (or '') ⇒ no chip; omitted ⇒ auto-label off the x formatter.
     const text = label === false ? '' : (label ?? container.formatTime(at));
-    useRegisterAnnotation(container, selfKey, id, row.rowKey, 'marker', xs, selected, selectable, editing, text);
+    useRegisterAnnotation(container, selfKey, id, row.rowKey, 'marker', xs, selected, selectable, editing, text, indicator);
     // No select/edit while a create tool is armed — the chart is in draw mode then.
     const select = id !== undefined && container.creating === null
         ? () => container.onSelectAnnotation?.(id)
@@ -371,7 +373,7 @@ export function Marker({ at, label, id, selected = false, selectable = true, hov
 }
 /** A horizontal line at a y value, scaled against one row axis (RTC's `Baseline`).
  *  Its label anchors at the left, at the line's height. */
-export function Baseline({ value, axis, label, id, selected = false, selectable = true, hovered, editing = false, onChange, }) {
+export function Baseline({ value, axis, label, labelSide = 'left', labelPosition = 'center', id, selected = false, selectable = true, hovered, editing = false, onChange, indicator = false, }) {
     const { container, row, ann } = useAnnotationFrame('Baseline');
     const selfKey = useSlotKey();
     const { hovering, reportHover } = useAnnotationHover(container, id, hovered);
@@ -388,7 +390,7 @@ export function Baseline({ value, axis, label, id, selected = false, selectable
     // Baselines don't lane-pack (the label anchors at their y, not the top), so
     // this registered string is unused by `computeLabelLanes` — `|| ''` just
     // keeps it a string for `false`/'' (which mean "no label").
-    label || '');
+    label || '', indicator);
     // No select/edit while a create tool is armed — the chart is in draw mode then.
     const select = id !== undefined && container.creating === null
         ? () => container.onSelectAnnotation?.(id)
@@ -411,11 +413,27 @@ export function Baseline({ value, axis, label, id, selected = false, selectable
     const text = label === false ? '' : (label ?? (fmt ? fmt(value) : String(value)));
     // Handle pill near the right end (clears the left-anchored label).
     const handleX = w - 14;
-    return (_jsxs(_Fragment, { children: [_jsxs("svg", { width: w, height: row.height, style: overlayStyle, children: [_jsx("line", { x1: 0, y1: y, x2: w, y2: y, stroke: ann.color, strokeWidth: 1, opacity: opacity, shapeRendering: "crispEdges" }), showHandle && (_jsx(Pill, { cx: handleX, cy: y, w: HANDLE_LONG, h: HANDLE_SHORT, color: ann.color })), selectable && (_jsx(DragArea, { x: 0, y: y - HIT_PAD, w: w, h: 2 * HIT_PAD, cursor: editing ? 'ns-resize' : 'inherit', editable: editable, onHover: reportHover, onSelect: select, onEdit: edit, onDrag: (_px, py) => onChange?.(yScale.invert(py)) }))] }), text && (_jsx(Chip, { theme: container.theme, color: ann.color, style: { top: `${y}px`, left: '2px', transform: 'translateY(-50%)' }, children: text }))] }));
+    return (_jsxs(_Fragment, { children: [_jsxs("svg", { width: w, height: row.height, style: overlayStyle, children: [_jsx("line", { x1: 0, y1: y, x2: w, y2: y, stroke: ann.color, strokeWidth: 1, opacity: opacity, shapeRendering: "crispEdges" }), showHandle && (_jsx(Pill, { cx: handleX, cy: y, w: HANDLE_LONG, h: HANDLE_SHORT, color: ann.color })), selectable && (_jsx(DragArea, { x: 0, y: y - HIT_PAD, w: w, h: 2 * HIT_PAD, cursor: editing ? 'ns-resize' : 'inherit', editable: editable, onHover: reportHover, onSelect: select, onEdit: edit, onDrag: (_px, py) => onChange?.(yScale.invert(py)) }))] }), text && (_jsx(Chip, { theme: container.theme, color: ann.color, style: {
+                    top: `${y}px`,
+                    [labelSide === 'right' ? 'right' : 'left']: '2px',
+                    // `center` rides on the line; `above` sits its bottom edge on the line.
+                    transform: labelPosition === 'above'
+                        ? 'translateY(-100%)'
+                        : 'translateY(-50%)',
+                }, children: text })), indicator &&
+                (() => {
+                    const half = container.theme.font.size / 2 + 1;
+                    return (_jsx("div", { style: {
+                            ...axisPillStyle(container.theme, ann.color),
+                            top: `${Math.max(half, Math.min(row.height - half, y))}px`,
+                            transform: 'translateY(-50%)',
+                            ...axisPillX(row.axisSides.get(axisId) ?? 'left', w),
+                        }, children: fmt ? fmt(value) : String(value) }));
+                })()] }));
 }
 /** A shaded span over an x range — a lap, a zone, a selected interval. Its label
  *  flies as a flag off the left edge. */
-export function Region({ from, to, label, id, selected = false, selectable = true, hovered, editing = false, onChange, }) {
+export function Region({ from, to, label, id, selected = false, selectable = true, hovered, editing = false, onChange, edges = true, }) {
     const { container, row, ann } = useAnnotationFrame('Region');
     const selfKey = useSlotKey();
     const { hovering, reportHover } = useAnnotationHover(container, id, hovered);
@@ -429,7 +447,7 @@ export function Region({ from, to, label, id, selected = false, selectable = tru
     const text = label === false
         ? ''
         : (label ?? `${container.formatTime(from)}–${container.formatTime(to)}`);
-    useRegisterAnnotation(container, selfKey, id, row.rowKey, 'region', xs, selected, selectable, editing, text);
+    useRegisterAnnotation(container, selfKey, id, row.rowKey, 'region', xs, selected, selectable, editing, text, false);
     // No select/edit while a create tool is armed — the chart is in draw mode then.
     const select = id !== undefined && container.creating === null
         ? () => container.onSelectAnnotation?.(id)
@@ -460,7 +478,7 @@ export function Region({ from, to, label, id, selected = false, selectable = tru
     // region the other way instead of dead-ending at zero width.
     const edgeRef = useRef(null);
     const edge = (atX) => (_jsx("line", { x1: atX, y1: 0, x2: atX, y2: h, stroke: ann.color, strokeWidth: 1, opacity: edgeOpacity, shapeRendering: "crispEdges" }));
-    return (_jsxs(_Fragment, { children: [_jsxs("svg", { width: container.plotWidth, height: h, style: overlayStyle, children: [_jsx("rect", { x: left, y: 0, width: spanW, height: h, fill: ann.color, opacity: fillOpacity }), edge(xa), edge(xb), showHandles && (_jsxs(_Fragment, { children: [_jsx(Pill, { cx: xa, cy: h / 2, w: HANDLE_SHORT, h: HANDLE_LONG, color: ann.color }), _jsx(Pill, { cx: xb, cy: h / 2, w: HANDLE_SHORT, h: HANDLE_LONG, color: ann.color })] })), selectable && (_jsxs(_Fragment, { children: [_jsx(DragArea, { x: left, y: 0, w: spanW, h: h, cursor: editing ? 'grab' : 'inherit', editable: editable, onHover: reportHover, onSelect: select, onEdit: edit, onDragStart: (px) => {
+    return (_jsxs(_Fragment, { children: [_jsxs("svg", { width: container.plotWidth, height: h, style: overlayStyle, children: [_jsx("rect", { x: left, y: 0, width: spanW, height: h, fill: ann.color, opacity: fillOpacity }), edges && edge(xa), edges && edge(xb), showHandles && (_jsxs(_Fragment, { children: [_jsx(Pill, { cx: xa, cy: h / 2, w: HANDLE_SHORT, h: HANDLE_LONG, color: ann.color }), _jsx(Pill, { cx: xb, cy: h / 2, w: HANDLE_SHORT, h: HANDLE_LONG, color: ann.color })] })), selectable && (_jsxs(_Fragment, { children: [_jsx(DragArea, { x: left, y: 0, w: spanW, h: h, cursor: editing ? 'grab' : 'inherit', editable: editable, onHover: reportHover, onSelect: select, onEdit: edit, onDragStart: (px) => {
                                     dragRef.current = { from, to, startPx: px };
                                 }, onDrag: (px) => {
                                     const s = dragRef.current;

package/dist/chip.d.ts

@@ -13,6 +13,42 @@ import type { ChartTheme } from './theme.js';
  * contrasting chip background) — a token to settle before this ships.
  */
 export declare function flagChipStyle(theme: ChartTheme): CSSProperties;
+/**
+ * Pick a readable text colour (near-black or white) for text drawn **on top of**
+ * `bg`, by its sRGB relative luminance. Handles `#rgb`/`#rrggbb` (the theme
+ * palette); any other CSS colour falls back to white. So a saturated blue/red/
+ * teal pill gets white text, a pale turquoise pill gets dark text.
+ */
+export declare function contrastText(bg: string): string;
+/**
+ * The **axis indicator pill** look — a *solid* filled tag in `color` with
+ * auto-contrast text (the ChartIQ / Yahoo price-tag). Distinct from
+ * {@link flagChipStyle} (a light in-plot value chip): an on-axis indicator reads
+ * as a saturated pill covering the tick, not a floating readout. Note: it does
+ * **not** set `lineHeight` — it inherits `normal`, matching a bare tick label, so
+ * a pill anchored at the same offset lines up with its tick-label neighbours (a
+ * forced lineHeight would shift the text off the tick baseline). Shared by
+ * {@link YAxisIndicator}, the crosshair axis pills, and the Baseline/Marker
+ * `indicator` pills.
+ */
+export declare function axisPillStyle(theme: ChartTheme, color: string): CSSProperties;
+/**
+ * A small triangle on an axis pill's **plot-facing edge**, pointing into the
+ * plot at the value (the callout tab). For a `right`-side pill (extending right
+ * across the gutter) it sits on the pill's left edge pointing left; for a `left`
+ * pill, the mirror. Render as an absolutely-positioned child of the pill (the
+ * pill is itself absolute, so it's the containing block); colour matches the pill.
+ */
+export declare function pointerStyle(side: 'left' | 'right', color: string): CSSProperties;
+/**
+ * CSS placing a value pill **on the axis gutter** at `side`: anchor its inner
+ * edge at the plot boundary (`plotWidth`) and let it overflow outward across the
+ * reserved gutter (the plot div doesn't clip), lifted with `zIndex` above the
+ * sibling axis column (rendered later in the row) so it covers the tick behind
+ * it. Shared by {@link YAxisIndicator}'s `placement='axis'` and the crosshair
+ * cursor's per-series value pills, so both sit identically on the axis.
+ */
+export declare function axisPillX(side: 'left' | 'right', plotWidth: number): CSSProperties;
 /**
  * Horizontal placement for a flag chip beside a vertical pole at plot-x `x`:
  * `FLAG_GAP` to the right, flipping to the left near the right edge so it stays

package/dist/chip.js

@@ -14,7 +14,9 @@ export function flagChipStyle(theme) {
     return {
         position: 'absolute',
         background: theme.chip?.background,
-        borderRadius: '3px',
+        // Square corners — a flag is a filled panel behind the number, not a pill
+        // (the rounded pill is reserved for axis indicators, see `axisPillStyle`).
+        borderRadius: '0',
         padding: '0 4px',
         fontFamily: theme.font.family,
         fontSize: `${theme.font.size}px`,
@@ -24,6 +26,88 @@ export function flagChipStyle(theme) {
         lineHeight: 1.5,
     };
 }
+/**
+ * Pick a readable text colour (near-black or white) for text drawn **on top of**
+ * `bg`, by its sRGB relative luminance. Handles `#rgb`/`#rrggbb` (the theme
+ * palette); any other CSS colour falls back to white. So a saturated blue/red/
+ * teal pill gets white text, a pale turquoise pill gets dark text.
+ */
+export function contrastText(bg) {
+    const m = /^#?([0-9a-f]{3}|[0-9a-f]{6})$/i.exec(bg.trim());
+    const raw = m?.[1];
+    if (raw === undefined)
+        return '#ffffff';
+    const h = raw.length === 3
+        ? raw
+            .split('')
+            .map((c) => c + c)
+            .join('')
+        : raw;
+    const r = parseInt(h.slice(0, 2), 16) / 255;
+    const g = parseInt(h.slice(2, 4), 16) / 255;
+    const b = parseInt(h.slice(4, 6), 16) / 255;
+    const lum = 0.2126 * r + 0.7152 * g + 0.0722 * b;
+    return lum > 0.6 ? '#0b1220' : '#ffffff';
+}
+/**
+ * The **axis indicator pill** look — a *solid* filled tag in `color` with
+ * auto-contrast text (the ChartIQ / Yahoo price-tag). Distinct from
+ * {@link flagChipStyle} (a light in-plot value chip): an on-axis indicator reads
+ * as a saturated pill covering the tick, not a floating readout. Note: it does
+ * **not** set `lineHeight` — it inherits `normal`, matching a bare tick label, so
+ * a pill anchored at the same offset lines up with its tick-label neighbours (a
+ * forced lineHeight would shift the text off the tick baseline). Shared by
+ * {@link YAxisIndicator}, the crosshair axis pills, and the Baseline/Marker
+ * `indicator` pills.
+ */
+export function axisPillStyle(theme, color) {
+    return {
+        position: 'absolute',
+        background: color,
+        color: contrastText(color),
+        borderRadius: '3px',
+        padding: '0 4px',
+        fontFamily: theme.font.family,
+        fontSize: `${theme.font.size}px`,
+        fontVariantNumeric: 'tabular-nums',
+        whiteSpace: 'nowrap',
+        pointerEvents: 'none',
+    };
+}
+/**
+ * A small triangle on an axis pill's **plot-facing edge**, pointing into the
+ * plot at the value (the callout tab). For a `right`-side pill (extending right
+ * across the gutter) it sits on the pill's left edge pointing left; for a `left`
+ * pill, the mirror. Render as an absolutely-positioned child of the pill (the
+ * pill is itself absolute, so it's the containing block); colour matches the pill.
+ */
+export function pointerStyle(side, color) {
+    return {
+        position: 'absolute',
+        top: '50%',
+        transform: 'translateY(-50%)',
+        width: 0,
+        height: 0,
+        borderTop: '4px solid transparent',
+        borderBottom: '4px solid transparent',
+        ...(side === 'right'
+            ? { left: '-5px', borderRight: `5px solid ${color}` }
+            : { right: '-5px', borderLeft: `5px solid ${color}` }),
+    };
+}
+/**
+ * CSS placing a value pill **on the axis gutter** at `side`: anchor its inner
+ * edge at the plot boundary (`plotWidth`) and let it overflow outward across the
+ * reserved gutter (the plot div doesn't clip), lifted with `zIndex` above the
+ * sibling axis column (rendered later in the row) so it covers the tick behind
+ * it. Shared by {@link YAxisIndicator}'s `placement='axis'` and the crosshair
+ * cursor's per-series value pills, so both sit identically on the axis.
+ */
+export function axisPillX(side, plotWidth) {
+    return side === 'right'
+        ? { left: `${plotWidth}px`, zIndex: 3 }
+        : { right: `${plotWidth}px`, zIndex: 3 };
+}
 /** Gap (px) between a flag chip and its pole — the cursor staff or an annotation's
  *  line — so the chip floats just beside the pole rather than sitting on it. */
 const FLAG_GAP = 4;

package/dist/context.d.ts

@@ -233,6 +233,10 @@ export interface AnnotationSpec {
     /** The mark's resolved label text — used to pack overlapping top-flag labels
      *  (markers + regions) into stacked vertical lanes. */
     readonly label: string;
+    /** Whether this mark shows its value as an **axis-edge pill** — a marker on the
+     *  shared x-axis (drawn by `<XAxis>` at its `at`), a baseline on its y-axis
+     *  (drawn in place). Regions never set it. */
+    readonly indicator: boolean;
 }
 /**
  * A row's per-slot axis widths each side, **slot 0 nearest the plot** (so the
@@ -368,8 +372,12 @@ export interface TrackerInfo {
  * - `inline` — dots + a value chip beside each.
  * - `flag` — dots + value flags (a staffed flag from each point; the staff
  *   geometry lands in a later phase — for now flags stack at the top).
+ * - `crosshair` — the synced vertical line + a dot on each series, with each
+ *   series' value pinned to its y-axis edge (an on-axis pill) and the cursor
+ *   time pinned to the x-axis. The ChartIQ / trading-terminal readout. Values
+ *   snap to the series (the axis pills read like ticks), not the raw mouse Y.
  */
-export type CursorMode = 'none' | 'line' | 'point' | 'inline' | 'flag';
+export type CursorMode = 'none' | 'line' | 'point' | 'inline' | 'flag' | 'crosshair';
 /** A registered layer plus the axis id it draws against. */
 export interface LayerEntry {
     readonly layer: RowLayer;
@@ -431,6 +439,9 @@ export interface RowFrame {
      *  that set `<YAxis ticks>` — so `Layers` draws gridlines at the same positions
      *  the axis labels. Absent id ⇒ that axis auto-picks. */
     readonly tickValues: ReadonlyMap<string, readonly number[]>;
+    /** The side each axis sits on, keyed by id — so an axis-edge overlay (the
+     *  crosshair value pills) hugs the correct gutter. */
+    readonly axisSides: ReadonlyMap<string, 'left' | 'right'>;
     /** This row's cursor-mode override, or `undefined` to inherit the container's
      *  default ({@link ContainerFrame.cursor}). */
     readonly cursor: CursorMode | undefined;

package/dist/index.d.ts

@@ -45,6 +45,8 @@ export type { BarChartProps } from './BarChart.js';
 export { Region, Baseline, Marker } from './annotations.js';
 export type { RegionProps, BaselineProps, MarkerProps } from './annotations.js';
 export type { AnnotationKind, CreateSpec } from './context.js';
+export { YAxisIndicator, createLiveValue } from './indicators.js';
+export type { YAxisIndicatorProps, LiveValue } from './indicators.js';
 export { fromTimeSeries, bandFromTimeSeries, boxFromTimeSeries, barsFromTimeSeries, } from './data.js';
 export type { ChartSeries, BandSeries, BoxSeries, BoxColumns, BarSeries, } from './data.js';
 export type { RadiusEncoding, ColorEncoding } from './encoding.js';

package/dist/index.js

@@ -32,6 +32,9 @@ export { BarChart } from './BarChart.js';
 // Annotations — user-authored marks in the turquoise register (distinct from the
 // data): a shaded span, a horizontal value line, a vertical x line.
 export { Region, Baseline, Marker } from './annotations.js';
+// Axis indicators — a value pill pinned to an axis edge (the ChartIQ live tag).
+// `createLiveValue` is the high-frequency, isolated-repaint update path.
+export { YAxisIndicator, createLiveValue } from './indicators.js';
 export { fromTimeSeries, bandFromTimeSeries, boxFromTimeSeries, barsFromTimeSeries, } from './data.js';
 export { defaultTheme, estelaTheme } from './theme.js';
 // CSS-custom-property → ChartTheme bridge: build a theme from a design system's

package/dist/indicators.d.ts

@@ -0,0 +1,105 @@
+import { type AxisFormat } from './format.js';
+/**
+ * A **live scalar** an axis indicator subscribes to, pushed imperatively from
+ * outside React — a WebSocket `onmessage`, a `requestAnimationFrame` loop, a
+ * tick handler. Backed by `useSyncExternalStore` on the consuming indicator:
+ * calling {@link LiveValue.set} re-renders **only the indicators subscribed to
+ * this value** — never the chart tree, never a canvas repaint. This is the path
+ * for a value that ticks many times a second (a live last-price tag), set
+ * independently of the series' own last point.
+ *
+ * Create one with {@link createLiveValue} and pass it to
+ * `<YAxisIndicator source={…}>`.
+ */
+export interface LiveValue {
+    /** Push a new value. Re-renders subscribed indicators only; a no-op if the
+     *  value is unchanged. Safe to call from outside React at any frequency. */
+    set(value: number): void;
+    /** @internal Store subscribe, for `useSyncExternalStore`. */
+    subscribe(onStoreChange: () => void): () => void;
+    /** @internal Current value snapshot, for `useSyncExternalStore`. */
+    getSnapshot(): number;
+}
+/**
+ * Create a {@link LiveValue} seeded at `initial`. Hold the returned object,
+ * call `.set(v)` from your data source, and hand it to
+ * `<YAxisIndicator source={…}>` — the pill repositions and relabels on each
+ * `set` without re-rendering the chart.
+ *
+ * ```ts
+ * const price = createLiveValue(0);
+ * ws.onmessage = (e) => price.set(JSON.parse(e.data).last); // outside React
+ * // <YAxisIndicator source={price} color="#4af" format=",.2f" />
+ * ```
+ */
+export declare function createLiveValue(initial: number): LiveValue;
+export interface YAxisIndicatorProps {
+    /**
+     * A static value to pin the pill at. Pass this **or** {@link source}. Updating
+     * `value` re-renders with its parent — fine for an occasional change; for a
+     * high-frequency tick use `source` so only the pill repaints.
+     */
+    value?: number;
+    /**
+     * A {@link LiveValue} to subscribe to — the high-frequency path. `.set(v)`
+     * moves and relabels the pill **without re-rendering the chart**. Takes
+     * precedence over {@link value} if both are given.
+     */
+    source?: LiveValue;
+    /** Which `<YAxis>` (by id) to position against; omit for the row's default axis. */
+    axis?: string;
+    /**
+     * Which edge the pill hugs. Default `right` — the conventional side for a live
+     * value tag. (Independent of the linked axis's side; set it to match.)
+     */
+    side?: 'left' | 'right';
+    /**
+     * Pill hue — the colour of the series / value it tracks. Defaults to the axis
+     * label colour (`theme.axis.label`).
+     */
+    color?: string;
+    /**
+     * Value formatting: a d3 format specifier (e.g. `',.2f'`, `'.1%'`) or a
+     * `(value) => string`. Omit to use the linked axis's own formatter, so the pill
+     * reads exactly like a tick. Pass a specifier for finer precision than the
+     * tick-calibrated default (a live price usually wants `',.2f'`, not the
+     * coarser tick rounding). See {@link AxisFormat}.
+     *
+     * An indicator **always shows the axis value** — there is no label override. A
+     * name/annotation belongs on a `<Baseline label>`'s near-line chip, not on the
+     * axis pill (an axis pill reads like a tick).
+     */
+    format?: AxisFormat;
+    /**
+     * Draw a thin dashed guide line from the pill across the plot (the ChartIQ
+     * "price line"). Default `false`.
+     */
+    line?: boolean;
+    /**
+     * Add a small triangle on the pill's plot-facing edge, pointing **into** the
+     * plot at the value (a callout tab). Default `false`.
+     */
+    pointer?: boolean;
+}
+/**
+ * A **value pill pinned to a y-axis edge** — the ChartIQ / Yahoo-Finance live
+ * price tag. Positions at `yScale(value)` on the linked axis and renders a chip
+ * (the solid {@link axisPillStyle} pill) at the plot's `side` edge, optionally
+ * with a dashed guide line across the plot.
+ *
+ * Render it as a child of `<Layers>` (alongside the chart layers), so it shares
+ * the plot's coordinate space:
+ *
+ * ```tsx
+ * <Layers>
+ *   <LineChart series={price} axis="usd" />
+ *   <YAxisIndicator source={liveLast} axis="usd" color="#4af" format=",.2f" line />
+ * </Layers>
+ * ```
+ *
+ * The value is **decoupled from the series' last point** — feed it whatever the
+ * live feed reports. For high-frequency updates pass a {@link LiveValue}
+ * ({@link source}); `.set()` repaints only the pill.
+ */
+export declare function YAxisIndicator({ value, source, axis, side, color, format, line, pointer, }: YAxisIndicatorProps): import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=indicators.d.ts.map

package/dist/indicators.js

@@ -0,0 +1,114 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useContext, useSyncExternalStore } from 'react';
+import { ContainerContext, RowContext } from './context.js';
+import { axisPillStyle, axisPillX, pointerStyle } from './chip.js';
+import { resolveAxisFormat } from './format.js';
+/**
+ * Create a {@link LiveValue} seeded at `initial`. Hold the returned object,
+ * call `.set(v)` from your data source, and hand it to
+ * `<YAxisIndicator source={…}>` — the pill repositions and relabels on each
+ * `set` without re-rendering the chart.
+ *
+ * ```ts
+ * const price = createLiveValue(0);
+ * ws.onmessage = (e) => price.set(JSON.parse(e.data).last); // outside React
+ * // <YAxisIndicator source={price} color="#4af" format=",.2f" />
+ * ```
+ */
+export function createLiveValue(initial) {
+    let value = initial;
+    const listeners = new Set();
+    return {
+        set(v) {
+            // Skip a redundant notify — a repeated identical tick shouldn't wake the
+            // subscriber (getSnapshot must be stable between real changes anyway).
+            if (v === value)
+                return;
+            value = v;
+            for (const listener of listeners)
+                listener();
+        },
+        subscribe(onStoreChange) {
+            listeners.add(onStoreChange);
+            return () => {
+                listeners.delete(onStoreChange);
+            };
+        },
+        getSnapshot() {
+            return value;
+        },
+    };
+}
+const noopSubscribe = () => () => { };
+/** The full-plot overlay the guide line paints into — above the data canvas,
+ *  inert to the pointer (matches the annotations' `overlayStyle`). */
+const overlayStyle = {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    pointerEvents: 'none',
+};
+const TICK_COUNT = 5;
+/**
+ * A **value pill pinned to a y-axis edge** — the ChartIQ / Yahoo-Finance live
+ * price tag. Positions at `yScale(value)` on the linked axis and renders a chip
+ * (the solid {@link axisPillStyle} pill) at the plot's `side` edge, optionally
+ * with a dashed guide line across the plot.
+ *
+ * Render it as a child of `<Layers>` (alongside the chart layers), so it shares
+ * the plot's coordinate space:
+ *
+ * ```tsx
+ * <Layers>
+ *   <LineChart series={price} axis="usd" />
+ *   <YAxisIndicator source={liveLast} axis="usd" color="#4af" format=",.2f" line />
+ * </Layers>
+ * ```
+ *
+ * The value is **decoupled from the series' last point** — feed it whatever the
+ * live feed reports. For high-frequency updates pass a {@link LiveValue}
+ * ({@link source}); `.set()` repaints only the pill.
+ */
+export function YAxisIndicator({ value, source, axis, side = 'right', color, format, line = false, pointer = false, }) {
+    const container = useContext(ContainerContext);
+    if (container === null) {
+        throw new Error('<YAxisIndicator> must be rendered inside a <ChartContainer>');
+    }
+    const row = useContext(RowContext);
+    if (row === null) {
+        throw new Error('<YAxisIndicator> must be rendered inside a <ChartRow>');
+    }
+    // One unconditional hook that covers both paths: with a `source`, subscribe to
+    // its store (a `set` re-renders only this component); without one, a stable
+    // no-op subscribe + a snapshot that reads the static `value` prop (which
+    // re-renders with the parent). Either way `v` is the current value.
+    const v = useSyncExternalStore(source ? source.subscribe : noopSubscribe, source ? source.getSnapshot : () => value ?? NaN);
+    const { theme } = container;
+    const axisId = axis ?? row.defaultAxisId;
+    const yScale = row.yScales.get(axisId);
+    // Axis not resolved yet (a layer mounts before its <YAxis>), or no value fed —
+    // draw nothing rather than guess.
+    if (yScale === undefined || !Number.isFinite(v))
+        return null;
+    const resolvedColor = color ?? theme.axis.label;
+    // A caller `format` resolves against the scale (string specifier or fn);
+    // otherwise reuse the axis's own formatter so the pill reads like a tick.
+    const fmt = format
+        ? resolveAxisFormat(yScale, TICK_COUNT, format)
+        : row.formats.get(axisId);
+    // An indicator always shows the axis value (no label override — a name belongs
+    // on a Baseline's near-line chip, not the axis pill).
+    const text = fmt ? fmt(v) : String(v);
+    const rawY = yScale(v);
+    // Clamp the pill's centre so an off-scale value keeps it inside the row rather
+    // than half-overflowing the edge (matches the y-tick clamp, F-charts-6).
+    const half = theme.font.size / 2 + 1;
+    const top = Math.max(half, Math.min(row.height - half, rawY));
+    return (_jsxs(_Fragment, { children: [line && (_jsx("svg", { width: container.plotWidth, height: row.height, style: overlayStyle, children: _jsx("line", { x1: 0, y1: rawY, x2: container.plotWidth, y2: rawY, stroke: resolvedColor, strokeWidth: 1, opacity: 0.5, strokeDasharray: "3 3", shapeRendering: "crispEdges" }) })), _jsxs("div", { style: {
+                    ...axisPillStyle(theme, resolvedColor),
+                    top: `${top}px`,
+                    ...axisPillX(side, container.plotWidth),
+                    transform: 'translateY(-50%)',
+                }, children: [pointer && _jsx("span", { style: pointerStyle(side, resolvedColor) }), text] })] }));
+}
+//# sourceMappingURL=indicators.js.map

package/dist/tracker.d.ts

@@ -18,7 +18,7 @@ export declare const DEFAULT_CURSOR_MODE: CursorMode;
 export declare function cursorParts(mode: CursorMode): {
     readonly line: boolean;
     readonly dots: boolean;
-    readonly chip: 'none' | 'inline' | 'flag';
+    readonly chip: 'none' | 'inline' | 'flag' | 'axis';
 };
 /**
  * The crosshair's plot-pixel x from the tracker inputs. A controlled

package/dist/tracker.js

@@ -24,6 +24,10 @@ export function cursorParts(mode) {
             return { line: false, dots: true, chip: 'inline' };
         case 'flag':
             return { line: false, dots: true, chip: 'flag' };
+        case 'crosshair':
+            // Vertical line + per-series dots, values pinned to the axes (y pills in
+            // `Layers`, the x-time pill on `<XAxis>`).
+            return { line: true, dots: true, chip: 'axis' };
         case 'none':
             return { line: false, dots: false, chip: 'none' };
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pond-ts/charts",
-  "version": "0.37.0",
+  "version": "0.38.0",
   "private": false,
   "description": "Canvas-rendered, streaming-first time-series charts for pond-ts",
   "license": "MIT",
@@ -38,8 +38,8 @@
     "perf": "PERF_BENCH=1 playwright test perf.spec.ts --workers=1"
   },
   "peerDependencies": {
-    "@pond-ts/react": "^0.37.0",
-    "pond-ts": "^0.37.0",
+    "@pond-ts/react": "^0.38.0",
+    "pond-ts": "^0.38.0",
     "react": "^18.0.0 || ^19.0.0"
   },
   "devDependencies": {