@pond-ts/charts 0.37.0 → 0.39.0

package/CHANGELOG.md

@@ -8,7 +8,9 @@ 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.39.0...HEAD
+[0.39.0]: https://github.com/pjm17971/pond-ts/compare/v0.38.0...v0.39.0
+[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 +35,104 @@ 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
 
+## [Unreleased]
+
+### Fixed
+
+- **Charts — click-to-select an annotation now works while `panZoom` is on.** A
+  _selectable but non-editable_ `<Region>` / `<Marker>` (one with no `onChange`)
+  lets its press bubble to the plot so a drag can pan _through_ it. The plot
+  captured the pointer on press to start the pan, and the browser then retargeted
+  the resulting `click` onto the plot (Pointer Events spec: a captured pointer's
+  compatibility mouse events fire on the capture target) — silently dropping the
+  mark's `onSelectAnnotation`. The plot now **defers** its pan pointer-capture
+  until the pointer actually moves past the drag slop, so a click (no drag) leaves
+  the pointer on the mark and its select fires, while a press-drag still pans
+  through and the tracker still hides once the pan commits. Resolves the
+  browser-dependent finding deferred from #308; adds
+  `e2e/annotations-panzoom.spec.ts`, the first real-pointer-event behavior e2e for
+  the annotation layer. (#309)
+
+## [0.39.0] — 2026-07-03
+
+A `@pond-ts/charts` release: the **crosshair reticle + annotation-layout** wave,
+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.39.0`).
+
+### Added
+
+- `@pond-ts/charts`: **`<ChartContainer crosshairSnap>`** (default `true`) — the
+  `cursor="crosshair"` reticle centres on the nearest data point; `false` gives a
+  **free** reticle whose horizontal line + value follow the pointer y
+  (`yScale.invert`), while the vertical line still snaps its x to the data grid
+  for a clean time readout.
+- `@pond-ts/charts`: **coincident marker labels merge** — labelled `<Marker>`s at
+  the same x fold into one chip (`"a, b, c"`) instead of stacking; their x-axis
+  indicator pills dedup to one.
+- `@pond-ts/charts`: **x-axis indicator pills lane-stack** when they'd overlap
+  (each connector lengthens to its lane).
+
+### Changed
+
+- `@pond-ts/charts`: **`cursor="crosshair"` is now a single reticle** — a
+  full-height dashed vertical + full-width dashed horizontal line + a centre dot +
+  one value pill, with the time pill connected to the vertical line. (Was
+  per-series dots + on-axis pills; the per-series readout stays on `flag` /
+  `inline`.)
+- `@pond-ts/charts`: top-flag **labels pack per row** — a label only contends with
+  labels in its own row's top space (a bottom-row label no longer dodges a
+  top-row one at the same x). A dragged mark is excluded from the pack, so static
+  marks hold their lanes as it crosses them (no phantom lane swaps). A marker's
+  staff now hangs from the top of its (stacked) flag.
+
+### Fixed
+
+- `@pond-ts/charts`: the crosshair x-axis pill and marker pills read the axis's
+  own formatter (a value-axis / off-boundary time no longer shows a raw number).
+
+## [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 +210,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 +249,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/ChartContainer.d.ts

@@ -82,6 +82,16 @@ export interface ChartContainerProps {
      * axis.
      */
     cursorTime?: boolean;
+    /**
+     * `cursor="crosshair"` reticle **y** snapping. **Default `true`** — the
+     * crosshair centres on the nearest **data point** (the horizontal line snaps to
+     * that sample's value). `false` — the horizontal line + centre follow the
+     * pointer **y** freely, the value read as `yScale.invert(pointerY)`. Either way
+     * the vertical line snaps its **x** to the data grid (so the time readout is
+     * clean), and both draw a full-height dashed vertical + full-width dashed
+     * horizontal line.
+     */
+    crosshairSnap?: boolean;
     /**
      * Enter **annotation-edit mode**: suppresses the data cursor and makes editable
      * annotations (those given an `onChange`) interactive — hovering one reveals its
@@ -145,5 +155,5 @@ export interface ChartContainerProps {
  * {@link TimeAxis} at the bottom, aligned under the plots. Y axes are per-row
  * (`<YAxis>`).
  */
-export declare function ChartContainer({ range, width, rowGap, showAxis, trackerPosition, onTrackerChanged, selected, onSelect, panZoom, onTimeRangeChange, minDuration, cursor, cursorTime, editAnnotations, creating, onCreate, onSelectAnnotation, onHoverAnnotation, onEditAnnotation, snap, timeFormat, theme, children, }: ChartContainerProps): import("react/jsx-runtime").JSX.Element;
+export declare function ChartContainer({ range, width, rowGap, showAxis, trackerPosition, onTrackerChanged, selected, onSelect, panZoom, onTimeRangeChange, minDuration, cursor, cursorTime, crosshairSnap, editAnnotations, creating, onCreate, onSelectAnnotation, onHoverAnnotation, onEditAnnotation, snap, timeFormat, theme, children, }: ChartContainerProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=ChartContainer.d.ts.map

package/dist/ChartContainer.js

@@ -31,7 +31,7 @@ function normalizeRange(range) {
  * {@link TimeAxis} at the bottom, aligned under the plots. Y axes are per-row
  * (`<YAxis>`).
  */
-export function ChartContainer({ range, width, rowGap = 0, showAxis = true, trackerPosition, onTrackerChanged, selected, onSelect, panZoom = false, onTimeRangeChange, minDuration = 1, cursor = DEFAULT_CURSOR_MODE, cursorTime = false, editAnnotations = false, creating = null, onCreate, onSelectAnnotation, onHoverAnnotation, onEditAnnotation, snap = true, timeFormat, theme, children, }) {
+export function ChartContainer({ range, width, rowGap = 0, showAxis = true, trackerPosition, onTrackerChanged, selected, onSelect, panZoom = false, onTimeRangeChange, minDuration = 1, cursor = DEFAULT_CURSOR_MODE, cursorTime = false, crosshairSnap = true, editAnnotations = false, creating = null, onCreate, onSelectAnnotation, onHoverAnnotation, onEditAnnotation, snap = true, timeFormat, theme, children, }) {
     // The explicit base domain from `range` (a tuple or a TimeRange). `undefined`
     // ⇒ auto-fit (resolved from the layers below). Pan/zoom seeds from it; `seed`
     // is the placeholder while auto-fitting.
@@ -77,6 +77,13 @@ export function ChartContainer({ range, width, rowGap = 0, showAxis = true, trac
     // still cursor stays put while a live window slides under it; a controlled
     // `trackerPosition` resolves to a pixel below.
     const [hoverX, setHoverX] = useState(null);
+    // The free-form crosshair also needs the pointer's y + which row (row-specific,
+    // unlike the shared x). One state object so a move updates both atomically.
+    const [hoverPoint, setHoverPoint] = useState(null);
+    const setHoverY = useCallback((y, rowKey) => setHoverPoint(y === null || rowKey === null ? null : { y, rowKey }), []);
+    // The actively-dragged annotation — excluded from the lane packers so static
+    // marks hold their lanes while it crosses them (see ContainerFrame.draggingKey).
+    const [draggingKey, setDragging] = useState(null);
     // Draw layers register as tracker sources; on hover we fan in their values at
     // the cursor and hand them out via onTrackerChanged (held in a ref so an
     // inline callback doesn't churn the frame). This powers a readout rendered
@@ -256,7 +263,7 @@ export function ChartContainer({ range, width, rowGap = 0, showAxis = true, trac
     }, [cursorX, xScale, sources, plotWidth]);
     // Pack overlapping top-flag labels (markers + regions) into stacked lanes so
     // close-in-x labels don't collide; chips read their lane back off the frame.
-    const labelLanes = useMemo(() => computeLabelLanes(annotations, (v) => xScale(v)), [annotations, xScale]);
+    const labelLanes = useMemo(() => computeLabelLanes(annotations, (v) => xScale(v), draggingKey), [annotations, xScale, draggingKey]);
     const frame = useMemo(() => ({
         timeRange: [d0, d1],
         width,
@@ -269,6 +276,12 @@ export function ChartContainer({ range, width, rowGap = 0, showAxis = true, trac
         rowGap,
         cursorX,
         setHoverX,
+        cursorY: hoverPoint?.y ?? null,
+        cursorRowKey: hoverPoint?.rowKey ?? null,
+        setHoverY,
+        crosshairSnap,
+        draggingKey,
+        setDragging,
         selected: selectedValue,
         select,
         hovered,
@@ -309,6 +322,11 @@ export function ChartContainer({ range, width, rowGap = 0, showAxis = true, trac
         rightGutter,
         rowGap,
         cursorX,
+        hoverPoint,
+        setHoverY,
+        crosshairSnap,
+        draggingKey,
+        setDragging,
         selectedValue,
         select,
         hovered,

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,
@@ -230,17 +234,23 @@ export function Layers({ children }) {
         if (!c.panZoom)
             return;
         const r = c.timeRange;
-        dragRef.current = { startX: e.clientX, startRange: [r[0], r[1]] };
-        c.setHoverX(null); // hide the tracker while panning
-        c.setHovered(null); // and drop any hover-highlight
-        // Capture so the pan continues outside the plot; an enhancement, not
-        // critical — guard the throw for synthetic / already-released pointers.
-        try {
-            e.currentTarget.setPointerCapture(e.pointerId);
-        }
-        catch {
-            /* ignore */
-        }
+        // Arm a potential pan: record the anchor, but DON'T capture the pointer or
+        // hide the tracker yet. Capturing on press retargets the eventual `click`
+        // to the plot (Pointer Events spec: a captured pointer's compatibility
+        // mouse events fire on the capture target) — which silently swallows a
+        // click-select on a *selectable but non-editable* mark, whose press bubbles
+        // up to here (its DragArea deliberately lets a non-edit press through so a
+        // pan can read past it). The pan commits — capture + hide tracker — only
+        // once the pointer moves past the slop (handlePointerMove); a press that
+        // stays put is a click, and leaving the pointer on the mark lets its
+        // onClick fire. Pan-through (drag starting on a non-editable mark) is
+        // unaffected: the first move past the slop still reaches this handler and
+        // captures then.
+        dragRef.current = {
+            startX: e.clientX,
+            startRange: [r[0], r[1]],
+            captured: false,
+        };
     }, []);
     const handlePointerMove = useCallback((e) => {
         const c = containerRef.current;
@@ -251,6 +261,16 @@ export function Layers({ children }) {
             c.setHoverX(px); // share the preview x so other rows draw a guide there
             return;
         }
+        // A pan is only live while a button is held. A move with no buttons means
+        // the press already ended without us seeing the pointerup — which the
+        // deferred-capture path allows: an uncommitted (sub-slop) potential-pan
+        // released *outside* the plot never captured, so its pointerup fires
+        // off-plot and never reaches handlePointerUp. Drop the stale dragRef here
+        // (and fall through to hover) so it can't fire a phantom pan on re-entry.
+        // A genuine pan-in-progress always has buttons !== 0, so this never cuts
+        // one short — including the press-leave-then-return-still-holding case.
+        if (dragRef.current && e.buttons === 0)
+            dragRef.current = null;
         const drag = dragRef.current;
         if (drag) {
             // Pan from the start range by the total drag — right → earlier (−dt).
@@ -259,21 +279,61 @@ export function Layers({ children }) {
             // the view nor shifts the scale the click then hit-tests against.
             if (Math.abs(dx) <= DRAG_SLOP)
                 return;
+            // First move past the slop ⇒ this is a real pan, not a click. Commit it
+            // now (deferred from press, see handlePointerDown): hide the tracker and
+            // claim the pointer so the pan keeps tracking outside the plot. Capturing
+            // here — after the click/select decision is already moot — is what keeps a
+            // tap-select on a non-editable mark working while a drag still pans.
+            if (!drag.captured) {
+                drag.captured = true;
+                c.setHoverX(null); // hide the tracker while panning
+                c.setHoverY(null, null);
+                c.setHovered(null); // and drop any hover-highlight
+                try {
+                    e.currentTarget.setPointerCapture(e.pointerId);
+                }
+                catch {
+                    /* ignore (synthetic / already-released pointer) */
+                }
+            }
             const span = drag.startRange[1] - drag.startRange[0];
             const dt = c.plotWidth > 0 ? -dx * (span / c.plotWidth) : 0;
             c.applyRange(panRange(drag.startRange, dt));
             return; // tracker suppressed during a pan
         }
         const rect = e.currentTarget.getBoundingClientRect();
-        const px = Math.max(0, Math.min(c.plotWidth, e.clientX - rect.left));
+        const r = rowRef.current;
+        const rawX = Math.max(0, Math.min(c.plotWidth, e.clientX - rect.left));
+        const py = Math.max(0, Math.min(r.height, e.clientY - rect.top));
+        // Crosshair with `crosshairSnap` (default): snap the shared vertical line to
+        // the nearest sample's x, so the reticle centres on a real data point (and
+        // stays aligned across rows on a shared grid). Free mode keeps the raw x.
+        // Crosshair always snaps the shared vertical line (and so the x-time pill)
+        // to the nearest sample's x — the reticle rides the data grid on x, giving a
+        // clean time readout (a raw pointer time formats to unreadable sub-second
+        // precision). `crosshairSnap` only governs the *y* (snap to the value vs a
+        // free horizontal line at the pointer). This is ChartIQ's model.
+        let px = rawX;
+        if ((r.cursor ?? c.cursor) === 'crosshair') {
+            const t = +c.xScale.invert(rawX);
+            for (const entry of r.layers) {
+                if (entry.layer.cursorFlag)
+                    continue;
+                const s = entry.layer.sampleAt(t)[0];
+                if (s !== undefined) {
+                    px = c.xScale(s.x);
+                    break;
+                }
+            }
+        }
         c.setHoverX(px);
+        c.setHoverY(py, r.rowKey);
         // Hover-highlight: hit-test the row's selectable layers (Bar) under the
         // pointer and set the hovered mark. Deduped in the container, so the data
         // canvas repaints only on a mark transition — not every move (the move just
         // slides the SVG cursor). A row with no selectable layer (line/area/band)
-        // resolves to null → a no-op.
-        const r = rowRef.current;
-        const hit = resolveSelection(r.layers, px, e.clientY - rect.top, c.xScale, (axisId) => r.yScales.get(axisId ?? r.defaultAxisId));
+        // resolves to null → a no-op. Uses the raw pointer, not the snapped x.
+        const hit = resolveSelection(r.layers, rawX, py, c.xScale, (axisId) => r.yScales.get(axisId ?? r.defaultAxisId));
         c.setHovered(hit);
     }, []);
     const handlePointerUp = useCallback((e) => {
@@ -319,13 +379,18 @@ export function Layers({ children }) {
             }
             return;
         }
-        if (dragRef.current) {
+        const drag = dragRef.current;
+        if (drag) {
             dragRef.current = null;
-            try {
-                e.currentTarget.releasePointerCapture(e.pointerId);
-            }
-            catch {
-                /* ignore */
+            // Only release if the pan actually committed + captured (a click never
+            // captured, so there's nothing to release).
+            if (drag.captured) {
+                try {
+                    e.currentTarget.releasePointerCapture(e.pointerId);
+                }
+                catch {
+                    /* ignore */
+                }
             }
         }
     }, []);
@@ -337,9 +402,11 @@ export function Layers({ children }) {
             drawFromRef.current = null;
             setDrawFrom(null);
             c.setHoverX(null);
+            c.setHoverY(null, null);
             return;
         }
         c.setHoverX(null);
+        c.setHoverY(null, null);
         c.setHovered(null);
     }, []);
     // Click selection: ignore the click that ends a drag/pan (moved past a few px),
@@ -403,9 +470,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
@@ -419,6 +490,48 @@ export function Layers({ children }) {
     const timeX = parts.chip === 'flag' && trackerSamples.length > 0
         ? trackerSamples[0].px
         : cursorX;
+    // Crosshair reticle (`chip: 'axis'`): a single centre for THIS row — the
+    // horizontal line + centre dot + value pill anchor to `center.py` (the vertical
+    // line is the shared `cursorX`, drawn in every row). Snap: the sample nearest
+    // the pointer y in the hovered row (or the first sample when nothing's hovered,
+    // e.g. a pinned demo — so every row shows a reticle then). Free: the raw pointer
+    // y in the hovered row, its value via `yScale.invert`. `null` ⇒ vertical only.
+    const cursorInBounds = cursorX !== null && cursorX >= 0 && cursorX <= plotWidth;
+    const reticle = (() => {
+        if (parts.chip !== 'axis' || !cursorInBounds)
+            return null;
+        const hoveredRow = container.cursorRowKey === row.rowKey;
+        const cy = container.cursorY;
+        if (container.crosshairSnap) {
+            if (trackerSamples.length === 0)
+                return null;
+            const pick = hoveredRow && cy !== null
+                ? trackerSamples.reduce((a, b) => Math.abs(b.py - cy) < Math.abs(a.py - cy) ? b : a)
+                : container.cursorRowKey === null
+                    ? trackerSamples[0]
+                    : null;
+            return pick
+                ? {
+                    py: pick.py,
+                    value: pick.value,
+                    format: pick.format,
+                    side: pick.side,
+                }
+                : null;
+        }
+        // Free reticle — the raw pointer y in the hovered row.
+        if (!hoveredRow || cy === null)
+            return null;
+        const ys = yScales.get(defaultAxisId);
+        if (ys === undefined)
+            return null;
+        return {
+            py: cy,
+            value: ys.invert(cy),
+            format: formats.get(defaultAxisId) ?? String,
+            side: axisSides.get(defaultAxisId) ?? 'left',
+        };
+    })();
     // Cross-row guide lines: the x-positions of annotations on the OTHER rows
     // (markers + region edges), so a mark on one row reads against this row's data +
     // the shared x axis. A mark's own row skips itself; baselines cast no vertical
@@ -491,9 +604,14 @@ 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' &&
+                            cursorX !== null &&
+                            cursorX >= 0 &&
+                            cursorX <= plotWidth && (_jsxs(_Fragment, { children: [_jsx("line", { x1: Math.round(cursorX), y1: 0, x2: Math.round(cursorX), y2: row.height, stroke: cursorColor, strokeWidth: 1, strokeDasharray: "3 3", shapeRendering: "crispEdges" }), reticle && (_jsxs(_Fragment, { children: [_jsx("line", { x1: 0, y1: Math.round(reticle.py), x2: plotWidth, y2: Math.round(reticle.py), stroke: cursorColor, strokeWidth: 1, strokeDasharray: "3 3", shapeRendering: "crispEdges" }), _jsx("circle", { cx: cursorX, cy: reticle.py, r: 3, fill: cursorColor, stroke: background, strokeWidth: background ? 1 : 0 })] }))] })), 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,7 +636,12 @@ export function Layers({ children }) {
                                 right: flip ? `${plotWidth - s.px + 8}px` : undefined,
                                 color: s.color,
                             }, children: s.format(s.value) }, i));
-                    }), parts.chip === 'flag' &&
+                    }), reticle && (_jsx("div", { style: {
+                        ...axisPillStyle(container.theme, cursorColor),
+                        top: `${Math.max(flagLineHeight / 2, Math.min(row.height - flagLineHeight / 2, reticle.py))}px`,
+                        transform: 'translateY(-50%)',
+                        ...axisPillX(reticle.side, plotWidth),
+                    }, children: reticle.format(reticle.value) })), parts.chip === 'flag' &&
                     cursorX !== null &&
                     trackerSamples.map((s, i) => (
                     // The flag flies from the top of its staff — chip top at the staff top