@pond-ts/charts 0.57.0 → 0.58.0

package/dist/Layers.js

@@ -1,12 +1,15 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { Children, cloneElement, isValidElement, useCallback, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState, } from 'react';
+import { Children, Fragment, isValidElement, useCallback, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState, } from 'react';
 import { Canvas } from './Canvas.js';
 import { drawGrid, drawDividers, dividerAlphas, thinPixels } from './grid.js';
-import { cursorParts, bandRect, regionSpan } from './tracker.js';
+import { bandRect, regionSpan } from './tracker.js';
+import { effectiveCursorEntries, gestureOwner } from './cursors.js';
+import { renderBrushBand, renderBrushRect, resolveBrushClaim, resolveRangeDrag, warnSweepShadowsRangeDrag, } from './brush.js';
 import { resolveSelection } from './select.js';
+import { isDev } from './dev.js';
+import { useIndexedChildren } from './child-index.js';
 import { panRange, zoomRange, panRangeTrading, zoomRangeTrading, } from './viewport.js';
 import { yTickValues } from './yticks.js';
-import { flagChipStyle, flagChipX, axisPillX, axisPillStyle } from './chip.js';
 import { ContainerContext, CursorContext, LayersContext, RowContext, } from './context.js';
 /** Fallback **y**-gridline tick count, used only before the row publishes its
  *  resolved `tickCounts` (pre-registration). Normally the gridlines read the
@@ -46,9 +49,125 @@ const ZOOM_SENSITIVITY = 0.0015;
  *  it still selects. One threshold for both so a click never also nudges the pan
  *  (and never hit-tests against a shifted scale). */
 const DRAG_SLOP = 4;
-/** Past this fraction of the plot, a readout label flips left of its dot so it
- *  doesn't overflow the right edge. */
-const LABEL_FLIP_FRACTION = 0.85;
+/** Stable "no sweep in flight" identity for the span preview channel. */
+const EMPTY_SPANS = [];
+/**
+ * The topmost sweep-capable layer's fresh {@link SweepSession} (RFC §8's
+ * z-order rule — the same rule a click follows), or `null` when the row has
+ * none. **The one resolution** behind both the pointer-down sweep claim and
+ * the resting block preview, so what hover previews and what a drag captures
+ * cannot come from different layers.
+ */
+function beginTopmostSweep(c, r) {
+    for (let i = r.layers.length - 1; i >= 0; i -= 1) {
+        const entry = r.layers[i];
+        const ys = r.yScales.get(entry.axisId ?? r.defaultAxisId);
+        if (ys === undefined)
+            continue;
+        const s = entry.layer.beginSweep?.((v) => c.xScale(v), (v) => ys(v)) ?? null;
+        // The scale rides along because a `twoD` session's `update` takes its y
+        // window in the LAYER'S axis units, and only this loop knows which of the
+        // row's axes that is. Handing back the session alone would leave the
+        // gesture inverting pointer pixels through the default axis, which is a
+        // silent mis-cut exactly on a dual-axis row. The declared `sweepAxis`
+        // rides along for the same reason and from the same layer, so the gesture
+        // never has to re-derive which layer won the z-order race.
+        if (s !== null)
+            return { session: s, yScale: ys, axis: entry.layer.sweepAxis ?? 'x' };
+    }
+    return null;
+}
+/**
+ * Every **span-only** layer's session in the row ([PND-TRACESEL]) — a trace has
+ * a range but no marks, and every trace shares the same x window, so they are
+ * swept together rather than by z-order.
+ *
+ * Mark layers are untouched by this: topmost-wins still decides which of them
+ * claims a drag, because there you were pointing at marks and the topmost is
+ * the one you meant. A trace sweep points at nothing, so singling one out
+ * would be arbitrary to the reader.
+ *
+ * Built once per gesture, at the press, for the reason every session is: they
+ * snapshot the layer's arrays and nothing persists outside the drag.
+ */
+function beginSpanOnlySweeps(c, r) {
+    // **Topmost first**, matching `beginTopmostSweep`'s descending scan, so
+    // `spans[0]` is the same layer `span` reports (reviewer finding: ascending
+    // order made the documented `span === spans[0]` false on a two-trace row).
+    const out = [];
+    for (let i = r.layers.length - 1; i >= 0; i -= 1) {
+        const entry = r.layers[i];
+        const ys = r.yScales.get(entry.axisId ?? r.defaultAxisId);
+        if (ys === undefined)
+            continue;
+        const s = entry.layer.beginSweep?.((v) => c.xScale(v), (v) => ys(v)) ?? null;
+        if (s !== null && s.spanOnly === true)
+            out.push(s);
+    }
+    return out;
+}
+/**
+ * Does the topmost sweep-capable layer cut a **rect**? The render-time,
+ * session-free counterpart of {@link beginTopmostSweep} — same z-order rule,
+ * reading each layer's `sweepsRect` declaration, so the resting cursor and
+ * the gesture cannot disagree about which shape this row is.
+ */
+function topmostSweepsRect(layers) {
+    for (let i = layers.length - 1; i >= 0; i -= 1) {
+        const l = layers[i].layer;
+        if (l.beginSweep !== undefined)
+            return l.sweepsRect === true;
+    }
+    return false;
+}
+/**
+ * Does the topmost sweep-capable layer have a range but **no marks**? The
+ * render-time counterpart of {@link SweepSession.spanOnly}, read where
+ * {@link topmostSweepsRect} is and for the same reason: the resting state needs
+ * the fact and there is no session at rest.
+ */
+function topmostSweepSpanOnly(layers) {
+    for (let i = layers.length - 1; i >= 0; i -= 1) {
+        const l = layers[i];
+        if (l.layer.beginSweep !== undefined)
+            return l.layer.sweepSpanOnly === true;
+    }
+    return false;
+}
+/**
+ * Which screen axis the topmost sweep-capable layer cuts — the `sweepAxis`
+ * counterpart of {@link topmostSweepsRect}, same z-order rule and the same
+ * reason for existing: the resting state has to answer it with no session in
+ * hand. `'x'` for a row with nothing sweepable, which is what every caller
+ * wants for "not a transposed row".
+ */
+function topmostSweepAxis(layers) {
+    for (let i = layers.length - 1; i >= 0; i -= 1) {
+        const l = layers[i].layer;
+        if (l.beginSweep !== undefined)
+            return l.sweepAxis ?? 'x';
+    }
+    return 'x';
+}
+/** Same marks, by full identity — so a recomputed resting block can keep the
+ *  CACHED array's reference when nothing actually changed. The layer registry
+ *  re-identifies on every hover commit (the entries close over the hovered
+ *  set), so an identity-keyed cache alone would re-mint the block each move
+ *  and defeat the container's identity-based block dedup. O(block). */
+function sameHits(a, b) {
+    if (a.length !== b.length)
+        return false;
+    for (let i = 0; i < a.length; i += 1) {
+        const x = a[i];
+        const y = b[i];
+        if (x.id !== y.id ||
+            x.key !== y.key ||
+            x.label !== y.label ||
+            x.mark !== y.mark)
+            return false;
+    }
+    return true;
+}
 /**
  * The plot area of a {@link ChartRow}: a single `<canvas>` plus the draw-layer
  * registry. It is the boundary where the row's horizontal layout flips to
@@ -63,7 +182,11 @@ const LABEL_FLIP_FRACTION = 0.85;
  * others slots into place, not onto the top), and each layer keeps a stable,
  * id-keyed slot so a series/style update holds its position (no jump to the
  * front — the trap that bites live charts). Draw layers must be **direct
- * children** of `<Layers>` for the index to reach them.
+ * children** of `<Layers>` for the index to reach them — to group them
+ * conditionally, return a **keyed array**, not a `<>…</>`: a fragment takes no
+ * props, so the index stops there and the layers inside it all register at 0
+ * (dev warns about this, because a stable sort makes the resulting tie look
+ * correct until mount order and declaration order disagree).
  */
 export function Layers({ children }) {
     const container = useContext(ContainerContext);
@@ -288,19 +411,79 @@ export function Layers({ children }) {
     // pointer is over — syncs the cursor across every row for free. cursorX is a
     // *pixel*, so it stays put while a live window slides; the time + values under
     // it derive from the current xScale.
-    const { cursorTime: showCursorTime, formatTime } = container;
+    const { formatTime } = container;
     const { cursorX } = cursor;
-    // Cursor mode: the row's override, else the container default. One mode per
-    // row (the synced vertical line is shared across rows); each layer renders the
-    // mode in its own way. `parts` decomposes it into {line, dots, chip}.
+    // The cursors in effect for THIS row: its own mounts (the per-row override —
+    // a component mounted in the row, or the `<ChartRow cursor>` shim), else the
+    // container's. Each registered a spec whose slots this overlay renders; what
+    // the container must resolve per move is the union of their declared needs.
     // Editing suppresses the data cursor — the marks get the surface (hover/drag),
     // and a crosshair would just be noise. True in global edit mode *and* while a
     // single annotation is being edited (the double-click target).
     const editingActive = container.editAnnotations || container.annotations.some((a) => a.editing);
-    const parts = editingActive
-        ? cursorParts('none')
-        : cursorParts(row.cursor ?? container.cursor);
-    const cursorColor = container.theme.cursor ?? container.theme.axis.label;
+    // Paint-only mirror of "a <MultiSelector> sweep is live in THIS row"
+    // (declared here, ahead of the gesture machinery below, because the cursor
+    // resolution needs it). A live sweep suppresses the row's cursor slots the
+    // same way editing does: the gesture owns the surface, and the default
+    // line preset otherwise keeps painting its solid vertical rule at the raw
+    // pointer OVER the brush band — which reads as "a line", not as the region
+    // being swept (the §8.1 identical-pixels promise, broken by an overlay).
+    // The shared band still renders while suppressed — `sweeping && !wantsBand`
+    // below — from the same resolved frame, so the sweep looks exactly like a
+    // <RangeCursor> drag.
+    const [sweeping, setSweeping] = useState(false);
+    // The **resting block preview**: a `<MultiSelector>` in scope over a
+    // sweep-capable row changes the RESTING state, not just the drag — the grey
+    // band and the block-scoped hover are a preview of exactly what a drag
+    // begun here would select. Two halves, resolved here:
+    //
+    // - `blockPreview` — the fact ("this row previews blocks"). It also scopes
+    //   the resting hover to the snap block (handlePointerMove).
+    // - `restingBand` — the brush band is this row's resting CURSOR, replacing
+    //   the shim's un-asked-for `'line'` default. Any *explicitly chosen*
+    //   cursor still wins: a mounted component, or a legacy `cursor` string the
+    //   consumer actually set — both register non-`implicit` entries and keep
+    //   their own slots (a mounted `<RangeCursor>` already draws this same
+    //   band; a `<CrosshairCursor>` keeps its crosshair).
+    //
+    // Which of the two the row gets is the TOPMOST sweep-capable layer's
+    // business (§8's z-order rule again, and the same rule `beginTopmostSweep`
+    // follows) — but answered from the layer's `sweepsRect` declaration rather
+    // than by building a session, because at rest there is no drag to build one
+    // for.
+    const sweeps = container.hasMultiSelector(row.rowKey);
+    const rectPreview = sweeps && topmostSweepsRect(layers);
+    const sweepAxis = topmostSweepAxis(layers);
+    // A span-only row gets no resting block band either, and for the rect's
+    // reason: a trace has no blocks, so the band would preview a set the drag
+    // never takes. It would also collide with the committed span's own edge
+    // rules, putting two vertical marks a pixel apart on each boundary.
+    const blockPreview = sweeps &&
+        !rectPreview &&
+        !topmostSweepSpanOnly(layers) &&
+        layers.some((e) => e.layer.beginSweep !== undefined);
+    // The resting brush replaces the implicit cursor either way; only its SHAPE
+    // differs. A 2-D row gets no band: its snap block is a whole x column while
+    // a drag there captures a rect, so a band would advertise a set the gesture
+    // never selects (the same reason the block hover opts out).
+    const restingBrush = (blockPreview || rectPreview) &&
+        !editingActive &&
+        effectiveCursorEntries(container.cursors, row.rowKey).every((e) => e.implicit === true);
+    // …and a **transposed** row gets none yet: the resting block preview is
+    // resolved from the shared x buckets, so a y-cutting row would draw a band
+    // over a column its drag can never select. Suppressed rather than
+    // transposed — [PND-HSWEEP] carries the follow-up, and a missing preview is
+    // honest where a wrong one is not.
+    const restingBand = restingBrush && !rectPreview && sweepAxis === 'x';
+    const restingCross = restingBrush && rectPreview;
+    const cursorEntries = useMemo(() => editingActive || sweeping || restingBrush
+        ? []
+        : effectiveCursorEntries(container.cursors, row.rowKey), [editingActive, sweeping, restingBrush, container.cursors, row.rowKey]);
+    const wantsSamples = cursorEntries.some((e) => e.wants.samples);
+    const wantsFlags = cursorEntries.some((e) => e.wants.flags);
+    const wantsBand = cursorEntries.some((e) => e.wants.band);
+    const wantsPointer = cursorEntries.some((e) => e.wants.pointer);
+    const wantsTime = cursorEntries.some((e) => e.wants.time);
     // Only read a time when the cursor is within the plot. An out-of-bounds
     // controlled trackerPosition hides the cursor, so the dots + chips hide too —
     // gating cursorTime makes trackerSamples empty, which drives both the SVG marks
@@ -308,14 +491,15 @@ export function Layers({ children }) {
     const cursorTime = cursorX !== null && cursorX >= 0 && cursorX <= plotWidth
         ? +xScale.invert(cursorX)
         : null;
-    // Per-layer readout samples at the cursor time (nearest data point) — pixel
-    // position + value + colour. Drives the overlay dots and the DOM value labels;
-    // recomputes as the cursor moves or the window slides under it. Empty when not
-    // hovering, so the data canvas is never touched.
+    // Per-layer readout samples at the cursor time (nearest data point) —
+    // **finished measurements** (RFC A2.3): pixel position, axis id + side, and
+    // the value already formatted by that axis's formatter. Drives the cursor
+    // slots' dots and value labels; recomputes as the cursor moves or the window
+    // slides under it. Empty when not hovering — or when no effective cursor
+    // declared a need — so the data canvas is never touched and a line-only
+    // cursor never pays the per-layer walk.
     const trackerSamples = useMemo(() => {
-        // Only needed for the in-chart dots / chips; skip the per-layer walk when the
-        // mode shows neither (the off-chart readout fans in separately on the container).
-        if (cursorTime === null || (!parts.dots && parts.chip === 'none'))
+        if (cursorTime === null || !wantsSamples)
             return [];
         const out = [];
         for (const entry of layers) {
@@ -337,31 +521,30 @@ export function Layers({ children }) {
                 out.push({
                     px: xScale(s.x),
                     py: yScale(s.value),
-                    value: s.value,
-                    color: s.color,
-                    format: fmt,
+                    axisId,
                     side,
+                    formatted: fmt(s.value),
+                    color: s.color,
+                    label: s.label,
                 });
             }
         }
         return out;
     }, [
         cursorTime,
+        wantsSamples,
         layers,
         yScales,
         formats,
         axisSides,
         xScale,
         defaultAxisId,
-        parts.dots,
-        parts.chip,
     ]);
-    // Consolidated multi-value flags (BoxPlot) — one flag per such layer, only in
-    // `flag` mode: all the box's values on one chip, anchored at its top-centre
-    // (`px`, `topPy`). Rendered as one staff + one multi-line chip (vs the
-    // per-sample dots/chips above), the values each coloured to their box piece.
+    // Consolidated multi-value flags (BoxPlot) — one flag per such layer, wanted
+    // by the flag cursor only: all the box's values on one chip, anchored at its
+    // top-centre (`px`, `topPy`), each line formatted + coloured to its piece.
     const trackerFlags = useMemo(() => {
-        if (cursorTime === null || parts.chip !== 'flag')
+        if (cursorTime === null || !wantsFlags)
             return [];
         const out = [];
         for (const entry of layers) {
@@ -385,7 +568,7 @@ export function Layers({ children }) {
             });
         }
         return out;
-    }, [cursorTime, layers, yScales, formats, xScale, defaultAxisId, parts.chip]);
+    }, [cursorTime, wantsFlags, layers, yScales, formats, xScale, defaultAxisId]);
     // Pan/zoom + tracker share the plot's event surface. Container fields are read
     // through a ref so the handlers + the (once-attached) wheel listener always see
     // the latest frame without re-subscribing. Written after commit (not in render)
@@ -396,6 +579,20 @@ export function Layers({ children }) {
         containerRef.current = container;
     });
     const plotRef = useRef(null);
+    /**
+     * Clamp a 2-D pan offset so the zoomed content still covers the plot.
+     *
+     * The y counterpart of `bounds` on x. With `k ≥ 1` the transformed band
+     * `[k·0 + ty, k·height + ty]` is at least as tall as the plot, so it can cover
+     * it — but nothing stopped `ty` sliding until the data left the viewport, which
+     * showed up as an axis reading past the end of the record with blank canvas
+     * under it. Requiring both edges to stay outside the plot pins it.
+     */
+    function clampPanY(k, ty, height) {
+        const lo = height * (1 - k); // bottom edge at or below the plot bottom
+        const hi = 0; // top edge at or above the plot top
+        return Math.min(hi, Math.max(lo, ty));
+    }
     const dragRef = useRef(null);
     // Row read through a ref so the click handler hit-tests the latest layers +
     // y-scales without re-subscribing (same after-commit discipline as containerRef).
@@ -411,20 +608,266 @@ export function Layers({ children }) {
     const [createPt, setCreatePt] = useState(null);
     const [drawFrom, setDrawFrom] = useState(null);
     const drawFromRef = useRef(null);
-    // The region-select drag anchor, mirrored for the gesture handlers (the same
-    // ref+state discipline as `drawFromRef`): the container's `regionAnchor`
-    // STATE is only how the rows paint the band; the gesture logic must never
-    // read it back, because a batched pointer stream (automation, jsdom, a very
-    // fast flick under load) delivers down→up before the down's setState commits
-    // — the up would see `regionAnchor === null`, silently drop the select, and
-    // the late-committing anchor would then stick (#508 item 7). Trusted
-    // human-paced input hides this (React flushes trusted discrete events
-    // synchronously); the ref is correct under both.
-    const regionAnchorRef = useRef(null);
+    // The live range-drag session — the anchor (axis units) plus the release
+    // sink the brush claim resolved at press — mirrored for the gesture
+    // handlers (the same ref+state discipline as `drawFromRef`): the
+    // container's `regionAnchor` STATE is only how the rows paint the band; the
+    // gesture logic must never read it back, because a batched pointer stream
+    // (automation, jsdom, a very fast flick under load) delivers down→up before
+    // the down's setState commits — the up would see `regionAnchor === null`,
+    // silently drop the select, and the late-committing anchor would then stick
+    // (#508 item 7). Trusted human-paced input hides this (React flushes
+    // trusted discrete events synchronously); the ref is correct under both.
+    // The release sink rides the ref too, so what fires is what the press
+    // resolved — a `<RangeCursor onDragRelease>` or the legacy `onRegionSelect`.
+    const rangeDragRef = useRef(null);
+    // The live sweep session (a mounted <MultiSelector> — RFC §8 / A7.7): the
+    // anchor + the topmost capable layer's per-drag session + the container's
+    // preview/commit sinks, resolved at press. Same ref-not-state discipline as
+    // `rangeDragRef` (the gesture must never read a state mirror that may not
+    // have committed — #508 item 7). `committed` arms past DRAG_SLOP, mirroring
+    // pan's deferred capture, so a click stays a click and selects one mark
+    // (§8.1: movement separates the two, not a modifier). The live preview is
+    // **coalesced to animation frames** (RFC A1.4): pointermove only records
+    // `pendingT` and schedules `raf`; the frame re-cuts the session and, only
+    // when the covered set changed, lights the hits through plural `hovered`.
+    //
+    // A `twoD` session (a scatter, a heat map) tracks the pointer's **y**
+    // alongside its x — `anchorPy` / `pendingPy` in plot pixels, inverted
+    // through the sweeping layer's own axis at cut time. Pixels rather than
+    // axis units because the pixel is what both consumers want: the session
+    // wants it inverted, the rect wants it drawn, and carrying axis units would
+    // mean mapping back through the scale to paint.
+    const sweepRef = useRef(null);
+    // The live 2-D brush rect, in plot pixels — row-local because a rect's y
+    // only means anything against the axis it was measured on (see
+    // `ResolvedCursorFrame.rect`). The 1-D band stays container state.
+    const [sweepRect, setSweepRect] = useState(null);
+    // The live **transposed** band, in this row's plot pixels — a `sweepAxis:
+    // 'y'` cut (a horizontal bar). Row-local for the rect's reason: a y interval
+    // only means anything against the axis that measured it, so the container's
+    // shared `regionAnchor` (how every row draws the x band) is the wrong home.
+    const [sweepBandY, setSweepBandY] = useState(null);
+    // (`sweeping` — the paint-only mirror of "a sweep is live" — is declared up
+    // with the cursor resolution, which it suppresses. It also renders the
+    // shared brush band from this row: §8.1 — one renderer either way, so the
+    // two visuals cannot drift.)
+    // The resting block preview's per-block cache: the materialised hits of the
+    // snap block the pointer is in, keyed on the block extent AND the row's
+    // layer registry identity (a data / selection change re-registers layers,
+    // which must invalidate the cached marks). One small session per block
+    // TRANSITION, nothing per move — and the stable `hits` array is what makes
+    // the container's identity-based block dedup work.
+    const restingBlockRef = useRef(null);
+    // A1.5's arbitration, surfaced: warn once when a press found both claimants.
+    const warnedSweepShadowRef = useRef(false);
+    /**
+     * One re-cut of the live sweep at the recorded pointer: the x window
+     * bucket-snapped through the shared `cursorBuckets` (freeform without),
+     * and — for a `twoD` layer — the y window inverted through the sweeping
+     * layer's own axis, plus the brush rect that goes with it. Returns whether
+     * the covered set changed (the session's delta gate).
+     *
+     * Shared by the frame flush and the release, so the final cut is the same
+     * cut, and the release cannot capture a different set than the preview the
+     * user let go of.
+     */
+    const cutSweep = useCallback((sw, c) => {
+        if (sw.pendingT === null)
+            return false;
+        // ── The transposed cut (`sweepAxis: 'y'`) — a horizontal bar. ──
+        // The window comes from the pointer's y through the sweeping layer's own
+        // axis, and NOT through `cursorBuckets`: the shared bin channel carries
+        // the *value* axis here (`binIntervals` is published vertical-only), so
+        // snapping the window against it would snap bins to value edges.
+        //
+        // The band is then read back off `session.extent()` — the
+        // snapped-outward run the session already computed — rather than agreed
+        // with separately. Same move `snappedRect()` made for the rect, and the
+        // stronger version of it: the band is *derived* from the cut, so it
+        // cannot promise a different set than release delivers. With nothing
+        // covered there is no extent, and the raw drag is what to show.
+        // The **live span preview** for span-only layers ([PND-TRACESEL]): a
+        // trace has no marks, so plural `hovered` carries nothing for it and the
+        // thing that wants lighting is the portion inside the window. Published
+        // every cut, from the same sessions the release will read, so the
+        // preview cannot promise a different picture than the commit delivers.
+        const publishPreview = () => {
+            // **Bail out when nothing needs it.** Reviewer finding: this ran every
+            // raf frame of every sweep and minted a fresh array even with zero
+            // span-only layers, and `previewSpans` sits in the container frame
+            // memos — so a plain MARK-layer sweep re-rendered per frame where the
+            // session's `changed` gate used to suppress it. That is an A8.1-class
+            // regression on a path this PR was not supposed to touch.
+            if (sw.spanOnly.length === 0)
+                return;
+            const spans = [];
+            for (const s of sw.spanOnly) {
+                const ext = s.extent();
+                if (ext !== null)
+                    spans.push({ kind: 'span', id: s.id, x: ext });
+            }
+            c.setPreviewSpans(spans);
+        };
+        if (sw.axis === 'y') {
+            const a = +sw.yScale.invert(sw.anchorPy);
+            const b = +sw.yScale.invert(sw.pendingPy);
+            const changed = sw.session.update(Math.min(a, b), Math.max(a, b));
+            for (const s of sw.spanOnly)
+                s.update(Math.min(a, b), Math.max(a, b));
+            publishPreview();
+            const ext = sw.session.extent();
+            setSweepBandY(ext === null
+                ? { y0: sw.anchorPy, y1: sw.pendingPy }
+                : { y0: sw.yScale(ext[0]), y1: sw.yScale(ext[1]) });
+            return changed;
+        }
+        const span = regionSpan(c.cursorBuckets ?? [], sw.anchor, sw.pendingT);
+        if (span === null)
+            return false;
+        if (sw.session.twoD !== true) {
+            const changed = sw.session.update(span.start, span.end);
+            // Every span-only layer takes the same window. These are sessions of
+            // their own — including one for the claimant when it is a trace — so
+            // there is nothing to skip.
+            for (const s of sw.spanOnly)
+                s.update(span.start, span.end);
+            publishPreview();
+            return changed;
+        }
+        const changed = sw.session.update(span.start, span.end, +sw.yScale.invert(sw.anchorPy), +sw.yScale.invert(sw.pendingPy));
+        // The rect tracks the pointer every frame, gate or no gate: the covered
+        // set is unchanged for a move within one heat-map cell, and a brush that
+        // only redrew when the set changed would visibly stick between cells.
+        //
+        // **A snapping layer draws the rect it is going to take**, not the one
+        // the pointer traced — otherwise the preview promises a different set
+        // than the release delivers. The corners keep the drag's own diagonal
+        // either way, so the two crosshairs stay on the ends the user is
+        // holding rather than jumping to a fixed pair of corners.
+        const snapped = sw.session.snappedRect?.() ?? null;
+        const clampX = (v) => Math.max(0, Math.min(c.plotWidth, v));
+        const forwardX = sw.anchor <= sw.pendingT;
+        const forwardY = sw.anchorPy <= sw.pendingPy;
+        if (snapped !== null) {
+            const xa = clampX(c.xScale(snapped.x[0]));
+            const xb = clampX(c.xScale(snapped.x[1]));
+            const ya = sw.yScale(snapped.y[0]);
+            const yb = sw.yScale(snapped.y[1]);
+            const yLo = Math.min(ya, yb);
+            const yHi = Math.max(ya, yb);
+            setSweepRect({
+                x0: forwardX ? Math.min(xa, xb) : Math.max(xa, xb),
+                x1: forwardX ? Math.max(xa, xb) : Math.min(xa, xb),
+                y0: forwardY ? yLo : yHi,
+                y1: forwardY ? yHi : yLo,
+            });
+            return changed;
+        }
+        const xa = clampX(c.xScale(span.start));
+        const xb = clampX(c.xScale(span.end));
+        setSweepRect({
+            x0: forwardX ? xa : xb,
+            x1: forwardX ? xb : xa,
+            y0: sw.anchorPy,
+            y1: sw.pendingPy,
+        });
+        return changed;
+    }, []);
+    /** Re-cut the sweep to the latest pointer and light the changed preview. */
+    const flushSweep = useCallback(() => {
+        const sw = sweepRef.current;
+        if (sw === null || !sw.committed)
+            return;
+        if (cutSweep(sw, containerRef.current))
+            // A brush that is drawing the SNAPPED region already outlines exactly
+            // what will be taken, so lighting each covered mark on top of it is
+            // redundant — and on a heat map actively worse (see `preview`). Tested
+            // on the answer, not on whether the method exists: `sweep2D` always
+            // defines it and returns `null` for a layer that does not snap.
+            sw.gesture.preview(sw.session.hits(), (sw.session.snappedRect?.() ?? null) === null);
+    }, [cutSweep]);
+    const scheduleSweepFrame = useCallback(() => {
+        const sw = sweepRef.current;
+        if (sw === null || sw.raf !== 0)
+            return;
+        sw.raf = requestAnimationFrame(() => {
+            sw.raf = 0;
+            flushSweep();
+        });
+    }, [flushSweep]);
+    /** Drop a live sweep without committing (leave / lost buttons / unmount). */
+    const cancelSweep = useCallback(() => {
+        const sw = sweepRef.current;
+        if (sw === null)
+            return;
+        sweepRef.current = null;
+        if (sw.raf !== 0)
+            cancelAnimationFrame(sw.raf);
+        if (sw.committed) {
+            setSweeping(false);
+            setSweepRect(null);
+            setSweepBandY(null);
+            containerRef.current.setRegionAnchor(null);
+            containerRef.current.setPreviewSpans(EMPTY_SPANS);
+            sw.gesture.preview([]); // un-light the preview; nothing commits
+        }
+    }, []);
+    // A sweep interrupted by unmount must not leave the preview lit.
+    useEffect(() => cancelSweep, [cancelSweep]);
     const handlePointerDown = useCallback((e) => {
         clickStartRef.current = { x: e.clientX, y: e.clientY };
         const c = containerRef.current;
-        if (c.creating !== null) {
+        const r = rowRef.current;
+        // The sweep's two resolved facts (RFC §8): a <MultiSelector> in scope
+        // (the container arbitrates, registry stays private), and a
+        // sweep-capable layer in THIS row — topmost wins, the z-order rule a
+        // click already follows. Both must hold for the sweep to claim; a
+        // selector over a row of untagged/lines-only layers deliberately claims
+        // nothing (Q8's identity-gates-interactivity, range form).
+        const sweepGesture = c.resolveSweep(r.rowKey);
+        const swept = sweepGesture !== null ? beginTopmostSweep(c, r) : null;
+        const drag = resolveRangeDrag(c, gestureOwner(effectiveCursorEntries(c.cursors, r.rowKey)));
+        // ONE brush recognizer arbitrates every drag claim — annotation-create,
+        // the sweep, the range drag (component or legacy), pan — in a
+        // documented order (RFC A1.5 / A2.7; see brush.tsx). This handler only
+        // routes.
+        const claim = resolveBrushClaim({
+            creating: c.creating !== null,
+            sweep: swept !== null,
+            drag,
+            shiftKey: e.shiftKey,
+            panEnabled: c.panEnabled,
+            // As with the wheel: a category x has nothing to pan, but a y-panning
+            // mode still has work to do.
+            canPan: (c.panX && c.xKind !== 'category') || c.panY,
+        });
+        // Sweep (a mounted <MultiSelector> over a sweepable row): record the
+        // press, but arm NOTHING yet — no capture, no anchor, no preview. The
+        // gesture commits on the first move past DRAG_SLOP (handlePointerMove);
+        // a press that stays put remains a click and selects one mark (§8.1).
+        if (claim.kind === 'sweep') {
+            if (isDev && drag !== null)
+                warnSweepShadowsRangeDrag(warnedSweepShadowRef);
+            const box = e.currentTarget.getBoundingClientRect();
+            const px = Math.max(0, Math.min(c.plotWidth, e.clientX - box.left));
+            const py = Math.max(0, Math.min(r.height, e.clientY - box.top));
+            sweepRef.current = {
+                anchor: +c.xScale.invert(px),
+                anchorPy: py,
+                session: swept.session,
+                yScale: swept.yScale,
+                axis: swept.axis,
+                spanOnly: beginSpanOnlySweeps(c, r),
+                gesture: sweepGesture,
+                committed: false,
+                raf: 0,
+                pendingT: null,
+                pendingPy: py,
+            };
+            return;
+        }
+        if (claim.kind === 'create') {
             // Armed: a region presses to fix its start edge; a line just tracks until
             // release. Capture so the draw can continue outside the plot.
             if (c.creating === 'region') {
@@ -440,36 +883,29 @@ export function Layers({ children }) {
             }
             return;
         }
-        // Region-cursor drag-select (opt-in via `onRegionSelect`): anchor the
-        // selection at the press; the band then extends as the pointer moves (bucket
-        // by bucket with a sequence, freeform without), and release commits the span.
-        // Works on a continuous x axis — time **or** value (a category axis is
-        // excluded; its ordinal-slot select is a different gesture). A
-        // `regionSelectModifier` (only while `panZoom` is on) gates it behind the key
-        // so plain drag can still pan; otherwise it preempts pan (returns before the
-        // pan is armed below).
-        if (c.cursor === 'region' &&
-            c.onRegionSelect &&
-            (c.xKind === 'time' || c.xKind === 'value')) {
-            const needsShift = c.regionSelectModifier === 'shift' && c.panEnabled;
-            if (!needsShift || e.shiftKey) {
-                const px = Math.max(0, Math.min(c.plotWidth, e.clientX - e.currentTarget.getBoundingClientRect().left));
-                regionAnchorRef.current = +c.xScale.invert(px);
-                c.setRegionAnchor(regionAnchorRef.current); // paint-only mirror
-                c.setHoverX(px);
-                try {
-                    e.currentTarget.setPointerCapture(e.pointerId);
-                }
-                catch {
-                    /* ignore */
-                }
-                return;
+        // Range drag (a drag-enabled <RangeCursor>, or the legacy
+        // `cursor="region"` + `onRegionSelect`): anchor the selection at the
+        // press; the band then extends as the pointer moves (bucket by bucket
+        // with a sequence, freeform without), and release commits the span to
+        // whichever sink the claim resolved. Continuous x only, and gated
+        // behind the drag modifier while pan is on — all decided in the claim.
+        if (claim.kind === 'range') {
+            const px = Math.max(0, Math.min(c.plotWidth, e.clientX - e.currentTarget.getBoundingClientRect().left));
+            const anchor = +c.xScale.invert(px);
+            rangeDragRef.current = { anchor, release: claim.drag.release };
+            c.setRegionAnchor(anchor); // paint-only mirror
+            c.setHoverX(px);
+            try {
+                e.currentTarget.setPointerCapture(e.pointerId);
+            }
+            catch {
+                /* ignore */
             }
-            // Modifier required but not held → fall through to pan.
+            return;
         }
-        if (!c.panEnabled || c.xKind === 'category')
+        if (claim.kind === 'none')
             return;
-        const r = c.timeRange;
+        const tr = c.timeRange;
         // 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
@@ -484,7 +920,9 @@ export function Layers({ children }) {
         // captures then.
         dragRef.current = {
             startX: e.clientX,
-            startRange: [r[0], r[1]],
+            startY: e.clientY,
+            startRange: [tr[0], tr[1]],
+            startTy: c.yTransform.ty,
             captured: false,
         };
     }, []);
@@ -497,14 +935,88 @@ export function Layers({ children }) {
             c.setHoverX(px); // share the preview x so other rows draw a guide there
             return;
         }
-        // Region drag in progress: just track the pointer x (the band spans from the
+        // Range drag in progress: just track the pointer x (the band spans from the
         // anchor bucket to here); no pan, no hover hit-test. Gesture truth is the
-        // ref — the state mirror may not have committed yet (see regionAnchorRef).
-        if (regionAnchorRef.current !== null) {
+        // ref — the state mirror may not have committed yet (see rangeDragRef).
+        if (rangeDragRef.current !== null) {
             const rect = e.currentTarget.getBoundingClientRect();
             c.setHoverX(Math.max(0, Math.min(c.plotWidth, e.clientX - rect.left)));
             return;
         }
+        // A pressed <MultiSelector> sweep. Below the slop it is still a
+        // potential click (same deferral as pan — see the dragRef branch); past
+        // it the sweep commits: capture, anchor the band, and from then on each
+        // move records the pointer and schedules one animation frame — the
+        // session re-cut + preview run there, not per event (RFC A1.4).
+        const sw = sweepRef.current;
+        if (sw !== null) {
+            // Lost buttons ⇒ the press ended off-plot without a pointerup here
+            // (the sub-slop path never captured) — drop it, as dragRef does.
+            if (e.buttons === 0) {
+                cancelSweep();
+            }
+            else {
+                const rect = e.currentTarget.getBoundingClientRect();
+                const px = Math.max(0, Math.min(c.plotWidth, e.clientX - rect.left));
+                const py = Math.max(0, Math.min(rowRef.current.height, e.clientY - rect.top));
+                const twoD = sw.session.twoD === true;
+                let justCommitted = false;
+                if (!sw.committed) {
+                    const start = clickStartRef.current;
+                    if (start === null)
+                        return;
+                    // The slop lives on whatever the gesture actually cuts, so the
+                    // wobble it forgives is the one that carries no meaning:
+                    //  - an x band — |dx|, so a vertical wobble under a still x is a
+                    //    click;
+                    //  - a **y** band (`sweepAxis: 'y'`, a horizontal bar) — |dy|, the
+                    //    mirror image, and measuring |dx| there would make the whole
+                    //    gesture unstartable;
+                    //  - a `twoD` rect — the DISTANCE, since both axes carry meaning
+                    //    and a straight-down drag is a legitimate rect.
+                    const dx = e.clientX - start.x;
+                    const dy = e.clientY - start.y;
+                    const moved = twoD
+                        ? Math.hypot(dx, dy)
+                        : Math.abs(sw.axis === 'y' ? dy : dx);
+                    if (moved <= DRAG_SLOP)
+                        return;
+                    sw.committed = true;
+                    justCommitted = true;
+                    setSweeping(true);
+                    // A `twoD` sweep paints its own row-local rect instead, and a y
+                    // band its own row-local band, for the same reason: the
+                    // container's anchor is how EVERY row draws the x band, and
+                    // anything measured against this row's y axis means nothing in
+                    // the others.
+                    if (!twoD && sw.axis === 'x')
+                        c.setRegionAnchor(sw.anchor); // paint-only mirror
+                    c.setHovered(null, rowRef.current.rowKey); // plural preview owns hover now
+                    try {
+                        e.currentTarget.setPointerCapture(e.pointerId);
+                    }
+                    catch {
+                        /* ignore */
+                    }
+                }
+                c.setHoverX(px);
+                if (twoD)
+                    c.setHoverY(py, rowRef.current.rowKey);
+                sw.pendingT = +c.xScale.invert(px);
+                sw.pendingPy = py;
+                // The move that COMMITS the sweep cuts synchronously: the band and
+                // the covered marks appear in the same event turn, so a
+                // bucket-snapped sweep lights its whole first bucket from the
+                // moment the drag starts — not an animation frame later, with the
+                // single-mark hover already cleared and nothing lit in between.
+                // Every later move stays frame-coalesced (RFC A1.4).
+                if (justCommitted)
+                    flushSweep();
+                else
+                    scheduleSweepFrame();
+                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
@@ -519,9 +1031,14 @@ export function Layers({ children }) {
         if (drag) {
             // Pan from the start range by the total drag — right → earlier (−dt).
             const dx = e.clientX - drag.startX;
+            const dy = e.clientY - drag.startY;
             // Don't pan until past the slop, so a click's 1–4px jitter neither moves
-            // the view nor shifts the scale the click then hit-tests against.
-            if (Math.abs(dx) <= DRAG_SLOP)
+            // the view nor shifts the scale the click then hit-tests against. In 2-D
+            // the slop is on the *distance*, so a purely vertical drag arms it too.
+            // With y in play the slop is on the DISTANCE, so a purely vertical drag
+            // arms it; x-only keeps the horizontal-only test it always had.
+            const moved = c.panY ? Math.hypot(dx, dy) : Math.abs(dx);
+            if (moved <= 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
@@ -532,7 +1049,7 @@ export function Layers({ children }) {
                 drag.captured = true;
                 c.setHoverX(null); // hide the tracker while panning
                 c.setHoverY(null, null);
-                c.setHovered(null); // and drop any hover-highlight
+                c.setHovered(null, rowRef.current.rowKey); // drop any hover-highlight
                 try {
                     e.currentTarget.setPointerCapture(e.pointerId);
                 }
@@ -540,6 +1057,18 @@ export function Layers({ children }) {
                     /* ignore (synthetic / already-released pointer) */
                 }
             }
+            // 2-D pan is a straight pixel shift of the y transform — no domain
+            // maths, because the transform is already in pixel space.
+            if (c.panY)
+                c.applyYTransform({
+                    k: c.yTransform.k,
+                    ty: clampPanY(c.yTransform.k, drag.startTy + dy, rowRef.current.height),
+                });
+            // A category x has no continuous domain to pan; the y half above is the
+            // whole gesture for a horizontal heat map. (Recomputed rather than
+            // carried on the drag: this is a different closure from the press.)
+            if (!c.panX || c.xKind === 'category')
+                return;
             if (c.discontinuities) {
                 // Trading-time axis: pan by an equal amount of *trading* time so the
                 // drag feels uniform across collapsed gaps (a raw-ms shift jumps).
@@ -557,18 +1086,21 @@ export function Layers({ children }) {
         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.
+        // The declared x-snap, resolved BY the container (RFC A2.3): the hovered
+        // row's gesture-owning cursor (its innermost mount — A2.5) declares
+        // `snapX`, and `'sample'` snaps 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). The crosshair declares it
+        // unconditionally — x always rides the data grid for a clean time
+        // readout; its `snap` prop only governs the *y* (ChartIQ's model). A
+        // cursor component could never do this itself: it has neither the
+        // layers nor the right to write the shared cursorX.
         let px = rawX;
-        if ((r.cursor ?? c.cursor) === 'crosshair') {
+        const owner = gestureOwner(effectiveCursorEntries(c.cursors, r.rowKey));
+        if (owner?.spec.snapX === 'sample') {
             const t = +c.xScale.invert(rawX);
-            for (const entry of r.layers) {
+            for (let i = r.layers.length - 1; i >= 0; i -= 1) {
+                const entry = r.layers[i];
                 if (entry.layer.cursorFlag)
                     continue;
                 const s = entry.layer.sampleAt(t)[0];
@@ -586,18 +1118,148 @@ export function Layers({ children }) {
         // slides the SVG cursor). A row with no selectable layer (line/area/band)
         // 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);
+        // The resting BLOCK preview (a mounted <MultiSelector>): hover lights
+        // every mark in the snap block under the pointer — exactly the set a
+        // drag begun and released here would select, from exactly the sweep's
+        // own machinery (the shared snap buckets through `regionSpan`, the
+        // topmost layer's session), so the preview and a drag cannot disagree.
+        // Cached per block (and per layer registry), so within-block moves
+        // re-materialise nothing and hand the container the SAME array back —
+        // its identity is the block-level hover dedup.
+        let block;
+        if (c.hasMultiSelector(r.rowKey)) {
+            const span = regionSpan(c.cursorBuckets ?? [], +c.xScale.invert(rawX));
+            if (span !== null) {
+                const cached = restingBlockRef.current;
+                if (cached !== null &&
+                    cached.layers === r.layers &&
+                    cached.start === span.start &&
+                    cached.end === span.end) {
+                    block = cached.hits;
+                }
+                else {
+                    const session = beginTopmostSweep(c, r)?.session ?? null;
+                    // A `twoD` layer has no resting block. Its snap block is a whole
+                    // x column, and a drag there captures a RECT — so lighting the
+                    // column at rest would preview a set the gesture never selects,
+                    // which is the exact lie the resting preview exists to avoid.
+                    // Rest falls back to the single-mark hover (the `hit` below).
+                    if (session !== null && session.twoD !== true) {
+                        session.update(span.start, span.end);
+                        let hits = session.hits();
+                        // Same block, same marks after a registry re-identification
+                        // (every hover commit re-registers the layers): keep the CACHED
+                        // array's reference, or the identity-based block dedup would
+                        // re-fire on every within-block move.
+                        if (cached !== null &&
+                            cached.start === span.start &&
+                            cached.end === span.end &&
+                            sameHits(cached.hits, hits))
+                            hits = cached.hits;
+                        restingBlockRef.current = {
+                            layers: r.layers,
+                            start: span.start,
+                            end: span.end,
+                            hits,
+                        };
+                        block = hits;
+                    }
+                }
+                // An all-gap block owns no membership (A7.6's "holes own no
+                // membership") — fall back to the plain single-mark hover.
+                if (block !== undefined && block.length === 0)
+                    block = undefined;
+            }
+        }
+        // The row key scopes which `<Selector>`s hear it (a row's own mounts, else
+        // the container's) — the hover *highlight* is unscoped container state.
+        c.setHovered(hit, r.rowKey, block);
     }, []);
     const handlePointerUp = useCallback((e) => {
         const c = containerRef.current;
-        // End a region drag: commit the anchor→pointer span as a one-shot range,
-        // then clear the anchor (the cursor reverts to the single-bucket highlight).
-        // The anchor is read from the ref, never the state mirror — under a batched
-        // pointer stream the state hasn't committed yet and the select would be
-        // silently dropped (and the anchor stuck). See regionAnchorRef.
-        if (regionAnchorRef.current !== null) {
-            const anchor = regionAnchorRef.current;
-            regionAnchorRef.current = null;
+        // End a sweep: one final synchronous re-cut at the release pointer (the
+        // last move's animation frame may not have run), then commit
+        // `(hits, modifiers, spans)` to the <MultiSelector>s the press resolved
+        // (RFC A5.2). The hits ARE the materialised preview — `session.hits()`
+        // reads the same cached array the last preview lit, never a fresh range
+        // query (A7.7) — and the span is the covered marks' snapped-outward
+        // extent (A7.6's edge rule), `null` when the sweep covered nothing (the
+        // swept-empty analog of a deselect click). A sub-slop press never
+        // committed: it stays a click, and the click handler selects one mark.
+        const sw = sweepRef.current;
+        if (sw !== null) {
+            sweepRef.current = null;
+            if (sw.raf !== 0)
+                cancelAnimationFrame(sw.raf);
+            if (!sw.committed)
+                return; // a click — handleClick owns it
+            const box = e.currentTarget.getBoundingClientRect();
+            sw.pendingT = +c.xScale.invert(Math.max(0, Math.min(c.plotWidth, e.clientX - box.left)));
+            sw.pendingPy = Math.max(0, Math.min(rowRef.current.height, e.clientY - box.top));
+            cutSweep(sw, c);
+            setSweeping(false);
+            setSweepRect(null);
+            setSweepBandY(null);
+            // The preview hands over to the committed selection here. A layer that
+            // was previewed and is now selected sees no visual change, which is the
+            // point: release must not repaint what it already promised.
+            c.setPreviewSpans(EMPTY_SPANS);
+            c.setRegionAnchor(null); // the band reverts, as the range drag's does
+            try {
+                e.currentTarget.releasePointerCapture(e.pointerId);
+            }
+            catch {
+                /* ignore */
+            }
+            const extent = sw.session.extent();
+            const modifiers = {
+                additive: e.metaKey || e.ctrlKey,
+                ctrlKey: e.ctrlKey,
+                metaKey: e.metaKey,
+                shiftKey: e.shiftKey,
+                altKey: e.altKey,
+            };
+            // A `twoD` layer's span carries the second dimension too — a scatter's
+            // continuous `y` window, a heat map's ordinal `rows` — so replaying
+            // the descriptor through `spanMatchesAny` reproduces the rect, not
+            // the whole column under it. The session names its own channel; the
+            // gesture never guesses which one a layer uses.
+            const channels = sw.session.twoD === true ? (sw.session.extent2D?.() ?? null) : null;
+            // Every span this gesture produced, and the claimant's comes first —
+            // on a mark-layer row it is the only one. A trace sweep adds one per span-only layer, because they
+            // all share the x window and z-order means nothing to the reader there
+            // ([PND-TRACESEL]).
+            const claimed = extent === null
+                ? null
+                : { kind: 'span', id: sw.session.id, x: extent, ...channels };
+            // `sw.spanOnly` is the authoritative set for span-only layers — and it
+            // holds a session for EVERY one of them, including the claimant when
+            // the claimant is a trace. Those are freshly built, so they are never
+            // the same object as `sw.session`: prepending the claimant
+            // unconditionally reported the topmost trace twice. Prepend it only
+            // when it is a mark layer, which `spanOnly` does not cover.
+            const all = [];
+            if (claimed !== null && sw.session.spanOnly !== true)
+                all.push(claimed);
+            for (const s of sw.spanOnly) {
+                const ext = s.extent();
+                if (ext !== null)
+                    all.push({ kind: 'span', id: s.id, x: ext });
+            }
+            sw.gesture.commit(sw.session.hits(), modifiers, all);
+            return;
+        }
+        // End a range drag: commit the anchor→pointer span as a one-shot range —
+        // to the sink the press resolved (`<RangeCursor onDragRelease>`'s
+        // `{ x: [lo, hi] }`, or the legacy `onRegionSelect` bare pair) — then
+        // clear the anchor: the cursor **reverts** to the single-bucket
+        // highlight (it does not keep the range). The anchor is read from the
+        // ref, never the state mirror — under a batched pointer stream the
+        // state hasn't committed yet and the select would be silently dropped
+        // (and the anchor stuck). See rangeDragRef.
+        if (rangeDragRef.current !== null) {
+            const { anchor, release } = rangeDragRef.current;
+            rangeDragRef.current = null;
             const px = Math.max(0, Math.min(c.plotWidth, e.clientX - e.currentTarget.getBoundingClientRect().left));
             const span = regionSpan(c.cursorBuckets ?? [], anchor, +c.xScale.invert(px));
             c.setRegionAnchor(null);
@@ -608,7 +1270,7 @@ export function Layers({ children }) {
                 /* ignore */
             }
             if (span)
-                c.onRegionSelect?.([span.start, span.end]);
+                release(span.start, span.end);
             return;
         }
         if (c.creating !== null) {
@@ -678,15 +1340,17 @@ export function Layers({ children }) {
             c.setHoverY(null, null);
             return;
         }
-        // Cancel a region-drag on leave (no commit) — a safety net for the rare case
+        // Cancel a range-drag on leave (no commit) — a safety net for the rare case
         // where the pointer capture didn't take, so the anchor can't get stuck.
-        regionAnchorRef.current = null;
+        rangeDragRef.current = null;
+        // Same net for a sweep: no commit, preview un-lit, band cleared.
+        cancelSweep();
         if (c.regionAnchor !== null)
             c.setRegionAnchor(null);
         c.setHoverX(null);
         c.setHoverY(null, null);
-        c.setHovered(null);
-    }, []);
+        c.setHovered(null, rowRef.current.rowKey);
+    }, [cancelSweep]);
     // Click selection: ignore the click that ends a drag/pan (moved past a few px),
     // else hit-test the row's layers top-down and select — or clear on a miss.
     const handleClick = useCallback((e) => {
@@ -710,8 +1374,70 @@ export function Layers({ children }) {
         }
         const r = rowRef.current;
         const rect = e.currentTarget.getBoundingClientRect();
-        const hit = resolveSelection(r.layers, e.clientX - rect.left, e.clientY - rect.top, c.xScale, (axisId) => r.yScales.get(axisId ?? r.defaultAxisId));
-        c.select(hit);
+        // 'select', not 'hover': a click must be able to resolve to NO mark —
+        // that null is the deselect signal (the empty commit) — so layers whose
+        // hover target is generous (a bar's full-height slot) narrow it here.
+        const hit = resolveSelection(r.layers, e.clientX - rect.left, e.clientY - rect.top, c.xScale, (axisId) => r.yScales.get(axisId ?? r.defaultAxisId), 'select');
+        const modifiers = {
+            additive: e.metaKey || e.ctrlKey,
+            ctrlKey: e.ctrlKey,
+            metaKey: e.metaKey,
+            shiftKey: e.shiftKey,
+            altKey: e.altKey,
+        };
+        // **A click commits the block it previewed.** Under a mounted
+        // `<MultiSelector>` the resting preview lights the whole snap block a
+        // gesture begun here would select (the band + every covered mark); a click
+        // that then selected only the mark under the pointer would make that
+        // preview a lie for the gesture most people try first. So the click
+        // commits the same block, through the same session the drag uses — one
+        // code path, so rest, click and sweep cannot disagree.
+        //
+        // **Only when a `sequence` was declared** (`gesture.snapped`). With none,
+        // the block is the single bin under the pointer and this falls through to
+        // the one-mark `select` below unchanged — which is what keeps a click
+        // distinguishable from a sweep by its `null` span (RFC §8: a click is a
+        // click). A `sequence` is an explicit declaration that selection happens
+        // in bucket units, and *that* is what earns the wider commit.
+        //
+        // The test has to be the declaration rather than "the block covers more
+        // than one mark", which is what it was first written as. A **stack**'s bin
+        // holds one mark per group, so the mark-count test fired on an ordinary
+        // unsnapped click and swallowed the whole bin instead of the clicked
+        // segment — found walking `MultiSelector/Stacked/ClickStillSelectsOne`.
+        if (hit !== null && c.hasMultiSelector(r.rowKey)) {
+            const px = e.clientX - rect.left;
+            const span = regionSpan(c.cursorBuckets ?? [], +c.xScale.invert(px));
+            const gesture = span === null ? null : c.resolveSweep(r.rowKey);
+            if (span !== null && gesture !== null && gesture.snapped) {
+                const session = beginTopmostSweep(c, r)?.session ?? null;
+                // …and for the same reason, a `twoD` layer's click stays a click on
+                // the mark under the pointer. The block it would otherwise commit is
+                // the column, which is not what the rect gesture next to it captures.
+                if (session !== null && session.twoD !== true) {
+                    session.update(span.start, span.end);
+                    const hits = session.hits();
+                    const extent = session.extent();
+                    if (hits.length > 0 && extent !== null) {
+                        const one = {
+                            kind: 'span',
+                            id: session.id,
+                            x: extent,
+                        };
+                        gesture.commit(hits, modifiers, [one]);
+                        return;
+                    }
+                }
+            }
+        }
+        // Report the modifiers the click carried ([PND-MULTISEL]). The library
+        // applies no policy to them; a consumer implements ⌘/Ctrl-adds itself,
+        // which it could not do at all while the click arrived as a bare hit.
+        //
+        // Passing the row key marks this as a **plot gesture**, which the container
+        // gates on a mounted `<Selector>` (interaction RFC §7.1): with none in
+        // scope this whole click is inert, deliberately.
+        c.select(hit, modifiers, r.rowKey);
     }, []);
     // Wheel-zoom — a native non-passive listener so `preventDefault` works (React's
     // onWheel is passive). Attached once; no-ops (and lets the page scroll) when
@@ -722,116 +1448,173 @@ export function Layers({ children }) {
             return;
         const onWheel = (e) => {
             const c = containerRef.current;
-            if (!c.zoomEnabled || c.xKind === 'category')
+            if (!c.zoomEnabled)
+                return;
+            // A category x axis has no continuous domain to zoom. That rules out the x
+            // half, but not the y half — which is why `panZoomY` is what a horizontal
+            // heat map (categories on x, bins on y) wants, and why `panZoomXY` would
+            // be a lie there.
+            const doX = c.zoomX && c.xKind !== 'category';
+            if (!doX && !c.zoomY)
                 return;
             e.preventDefault();
             const rect = el.getBoundingClientRect();
             const localX = Math.max(0, Math.min(c.plotWidth, e.clientX - rect.left));
             const pivot = +c.xScale.invert(localX);
-            const factor = Math.exp(e.deltaY * ZOOM_SENSITIVITY);
-            c.applyRange(c.discontinuities
+            let factor = Math.exp(e.deltaY * ZOOM_SENSITIVITY);
+            const nextRange = (f) => c.discontinuities
                 ? // minDuration is the zoom-in floor; on a trading-time axis it caps
-                    // the minimum visible *trading* time (ms of open-market time) rather
-                    // than wall-clock ms — the sensible meaning for this axis.
-                    zoomRangeTrading(c.timeRange, pivot, factor, c.discontinuities, c.minDuration)
-                : zoomRange(c.timeRange, pivot, factor, c.minDuration));
+                    // the minimum visible *trading* time (ms of open-market time)
+                    // rather than wall-clock ms — the sensible meaning for this axis.
+                    zoomRangeTrading(c.timeRange, pivot, f, c.discontinuities, c.minDuration)
+                : zoomRange(c.timeRange, pivot, f, c.minDuration);
+            // ── The aspect lock has to be NEGOTIATED, not asserted ────────────────
+            // Both axes zooming by "the same factor" only holds the ratio while both
+            // can actually take that factor. Each has its own limit — y cannot zoom
+            // out past its natural fit (`k >= 1`), x cannot zoom in past
+            // `minDuration` — and if either clamps on its own, the other carries on
+            // and the picture shears. That is visible as soon as you zoom out to an
+            // edge: y stops at `k = 1` and x keeps widening.
+            //
+            // So agree one factor first: cap it at what y can take, then ask x what
+            // it would actually do with that and adopt the answer.
+            const both = doX && c.zoomY;
+            let range = null;
+            if (doX) {
+                if (both)
+                    factor = Math.min(factor, c.yTransform.k);
+                range = nextRange(factor);
+                const span = c.timeRange[1] - c.timeRange[0];
+                if (both && span > 0)
+                    factor = (range[1] - range[0]) / span;
+            }
+            if (c.zoomY) {
+                // `factor` scales the DOMAIN span, so factor > 1 is zoom *out*; the
+                // pixel-space zoom is its reciprocal. One factor for both axes is what
+                // fixes the aspect ratio.
+                const z = 1 / factor;
+                const localY = e.clientY - rect.top;
+                const { k, ty } = c.yTransform;
+                // Zoom about the cursor: p' = localY + (p − localY)·z, expanded through
+                // the existing transform p = ty + k·base.
+                const nk = Math.max(1, k * z);
+                c.applyYTransform({
+                    k: nk,
+                    ty: clampPanY(nk, localY * (1 - z) + ty * z, rowRef.current.height),
+                });
+            }
+            if (range !== null)
+                c.applyRange(range);
         };
         el.addEventListener('wheel', onWheel, { passive: false });
         return () => el.removeEventListener('wheel', onWheel);
     }, []);
-    // Cursor presentation is a DOM/SVG overlay (no cursor canvas): an SVG holds the
-    // line / dots / flag staffs; these value chips (DOM, crisp text) sit beside each
-    // dot ('inline', clamped within the row) or stack at the top of the flag staff
-    // ('flag'). line / point / none draw no chips — surface values off-chart.
-    const flagLineHeight = container.theme.font.size + 5;
-    // Cursor chips share the annotation label look (filled, no outline) — one
-    // source of truth so a flag and a placed label read as the same object.
-    const chipStyle = flagChipStyle(container.theme);
-    // Show the cursor's time atop the readout (opt-in via `cursorTime`), whenever
-    // the cursor is active (any mode that draws marks). A single chip at the cursor
-    // x, top of the row; for `flag` it sits above the value chips (which shift down).
-    // 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
-    // staff drops from there to the dot. (Chips share that top and spread by x, so
-    // near-coincident flags can overlap — a de-overlap heuristic is a follow-up.)
-    const flagTop = 2;
-    const flagBase = flagTop + (showTime ? flagLineHeight : 0);
-    // The cursor-time chip caps the readout. In `flag` mode it tops the flag stack,
-    // so anchor it to the stack's x (the nearest sample's point) so time + flag +
-    // staff + dot read as one column; otherwise it labels the cursor line at cursorX.
-    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)
+    // ── The resolved cursor frame (RFC A2.3) — finished measurements for the
+    // effective cursors' render slots. Everything below is *resolution*: the
+    // slots (in cursors.tsx, or eventually user-authored) only draw.
+    // The raw pointer's y resolved against the row's default axis — the free
+    // (non-snapping) crosshair's centre. Only in the hovered row, and only when
+    // an effective cursor declared the need; a slot has no `yScale.invert` of
+    // its own, which is exactly why this is resolved here.
+    const pointer = useMemo(() => {
+        if (!wantsPointer)
             return null;
-        const hoveredRow = cursor.cursorRowKey === row.rowKey;
-        const cy = cursor.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)
-                : cursor.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)
+        if (cursor.cursorRowKey !== row.rowKey || cursor.cursorY === null)
             return null;
         const ys = yScales.get(defaultAxisId);
         if (ys === undefined)
             return null;
+        const fmt = formats.get(defaultAxisId) ?? String;
         return {
-            py: cy,
-            value: ys.invert(cy),
-            format: formats.get(defaultAxisId) ?? String,
+            py: cursor.cursorY,
+            formatted: fmt(ys.invert(cursor.cursorY)),
             side: axisSides.get(defaultAxisId) ?? 'left',
         };
-    })();
-    // `region` cursor (continuous x axis — time or value): shade the span under the
-    // pointer. With a `cursorSequence` (time axis only) the band snaps to the bucket
-    // (and extends bucket by bucket under a drag); with none — always the case on a
-    // value axis — it's the **freeform** case: a bare hover draws a plain line
-    // (`regionLine`), a drag shades the raw `[anchor, pointer]`. Edges map through
-    // `xScale`, so on a trading-time axis the band crops to live time.
-    const regionActive = parts.band && (container.xKind === 'time' || container.xKind === 'value');
-    const band = regionActive && cursorTime !== null
+    }, [
+        wantsPointer,
+        cursor.cursorRowKey,
+        cursor.cursorY,
+        row.rowKey,
+        yScales,
+        formats,
+        axisSides,
+        defaultAxisId,
+    ]);
+    // The in-plot cursor time, readout-formatted — the `showTime` presets' chip
+    // text. The time is shared across rows (one cursor, one time), so the chip
+    // itself shows once, atop the first row; formatting is skipped entirely when
+    // no effective cursor wants it.
+    const formattedTime = wantsTime && cursorTime !== null
+        ? (container.formatReadout ?? formatTime)(cursorTime)
+        : null;
+    // The range cursor's band (continuous x axis — time or value): shade the
+    // span under the pointer. With snap buckets (a sequence / a histogram's
+    // bins) the band snaps to the bucket (and extends bucket by bucket under a
+    // legacy drag); with none it's the **freeform** case — a bare hover draws a
+    // plain line (`bandLine`), a drag shades the raw `[anchor, pointer]`. Edges
+    // map through `xScale`, so on a trading-time axis the band crops to live time.
+    // A live <MultiSelector> sweep shades the same band — and so does its
+    // RESTING state (`restingBand`): the band over the snap block under the
+    // pointer is the row's resting cursor, previewing the block a drag would
+    // select. Neither is gated to a continuous axis: the marks currency is what
+    // folds the category axis into the gesture (RFC §8 / A4.2 — nobody sees a
+    // numeric range), and the band maps slot units through the shared band
+    // scale like any other span.
+    // A 2-D sweep paints `sweepRect` instead, so it must not ALSO shade a band:
+    // `sweeping` alone would resolve one from the pointer's bucket, and the row
+    // would carry a full-height column under the rect the drag is drawing.
+    // A y sweep paints `sweepBandY`, so — exactly as with the rect — it must
+    // not ALSO shade an x band: `sweeping` alone would resolve one from the
+    // pointer's bucket and lay a full-height column across the horizontal band
+    // the drag is actually drawing.
+    const bandActive = (wantsBand &&
+        (container.xKind === 'time' || container.xKind === 'value')) ||
+        (sweeping && sweepRect === null && sweepBandY === null) ||
+        restingBand;
+    const band = bandActive && cursorTime !== null
         ? bandRect(container.cursorBuckets ?? [], cursorTime, (v) => xScale(v), plotWidth, container.regionAnchor ?? undefined)
         : null;
-    // Degenerate region cursor (no sequence, not mid-drag): a plain vertical line.
-    const regionLine = regionActive &&
+    // Degenerate range cursor (no buckets, not mid-drag): a plain vertical
+    // line. Deliberately NOT extended to `restingBand` — the resting preview is
+    // "a region-like cursor, not a line", so with no snap block under the
+    // pointer it shows nothing rather than degenerating to the rule it exists
+    // to replace.
+    // A drag owns the band's extent exactly while an anchor is set — the range
+    // drag sets it on pointerdown, the sweep when it crosses `DRAG_SLOP` (so a
+    // click never flashes the edges on its way to committing a block).
+    // A y band's anchor is row-local, so the container's `regionAnchor` says
+    // nothing about it — its own presence is the drag (it is set only past the
+    // slop, and cleared on release).
+    const bandDragging = container.regionAnchor !== null || sweepBandY !== null;
+    const bandLine = wantsBand &&
+        (container.xKind === 'time' || container.xKind === 'value') &&
+        !sweeping &&
         container.cursorBuckets === undefined &&
         container.regionAnchor === null &&
         cursorX !== null &&
         cursorX >= 0 &&
         cursorX <= plotWidth;
+    const cursorRenderFrame = {
+        cursorX,
+        cursorY: cursor.cursorY,
+        rowKey: row.rowKey,
+        hoveredRowKey: cursor.cursorRowKey,
+        samples: trackerSamples,
+        flags: trackerFlags,
+        pointer,
+        band,
+        bandY: sweepBandY,
+        bandLine,
+        bandDragging,
+        rect: sweepRect,
+        restingCross,
+        formattedTime,
+        plotWidth,
+        rowHeight: row.height,
+        isFirstRow: row.isFirstRow,
+        theme: container.theme,
+        xAxis: null,
+    };
     // 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
@@ -866,9 +1649,45 @@ export function Layers({ children }) {
     }
     // Inject each draw layer's JSX position so it registers its declaration order
     // (z-stack: lower index at the back), independent of mount timing.
-    const indexedChildren = Children.map(children, (child, index) => isValidElement(child)
-        ? cloneElement(child, { index })
-        : child);
+    const indexedChildren = useIndexedChildren(children, '<Layers>', 'the draw layers inside it all register at 0 and their z-stacking falls ' +
+        'back to mount order');
+    // The non-fragment half of the same trap, and the mirror of `<ChartRow>`'s
+    // axis check: a draw layer nested inside ANY element child of `<Layers>`
+    // never receives the injected index, so the z-stack silently falls back to
+    // mount order. `<Selector>`/`<MultiSelector>` made this reachable when they
+    // gained `children` (RFC A10.1) — they belong *outside* `<Layers>`, wrapping
+    // it — and being real elements they slip past the fragment warning. No draw
+    // layer takes element children of its own, so "a child that has element
+    // children" is a sound signal here. (Codex finding on #638.)
+    let wrapperChild = false;
+    if (isDev) {
+        for (const child of Children.toArray(children)) {
+            if (!isValidElement(child) || child.type === Fragment)
+                continue;
+            const nested = child.props.children;
+            if (nested === undefined)
+                continue;
+            for (const g of Children.toArray(nested)) {
+                if (isValidElement(g)) {
+                    wrapperChild = true;
+                    break;
+                }
+            }
+            if (wrapperChild)
+                break;
+        }
+    }
+    const warnedWrapperRef = useRef(false);
+    useEffect(() => {
+        if (!isDev || !wrapperChild || warnedWrapperRef.current)
+            return;
+        warnedWrapperRef.current = true;
+        console.warn('[pond-charts] a child of <Layers> wraps other elements, so any draw ' +
+            'layer inside it never receives the injected z-order index and the ' +
+            'stack falls back to mount order. Draw layers must be direct children ' +
+            'of <Layers>; a <Selector>/<MultiSelector> belongs outside it, ' +
+            'wrapping the <Layers> (or the whole <ChartRow>).');
+    }, [wrapperChild]);
     return (_jsx(LayersContext.Provider, { value: registry, children: _jsxs("div", { ref: plotRef, style: {
                 position: 'relative',
                 width: `${plotWidth}px`,
@@ -899,66 +1718,8 @@ export function Layers({ children }) {
                         top: 0,
                         left: 0,
                         pointerEvents: 'none',
-                    }, children: [band !== null && (_jsx("rect", { x: band.x0, y: 0, width: band.x1 - band.x0, height: row.height, fill: cursorColor, opacity: 0.12 })), regionLine && cursorX !== null && (_jsx("line", { x1: Math.round(cursorX), y1: 0, x2: Math.round(cursorX), y2: row.height, stroke: cursorColor, strokeWidth: 1, shapeRendering: "crispEdges" })), parts.line &&
-                            cursorX !== null &&
-                            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.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
-                            : `${timeX + 4}px`,
-                        right: timeX > plotWidth * LABEL_FLIP_FRACTION
-                            ? `${plotWidth - timeX + 4}px`
-                            : undefined,
-                        color: cursorColor,
-                    }, children: (container.formatReadout ?? formatTime)(cursorTime) })), parts.chip === 'inline' &&
-                    trackerSamples.map((s, i) => {
-                        // Flip the chip left of its dot near the right edge so it stays in-plot.
-                        const flip = s.px > plotWidth * LABEL_FLIP_FRACTION;
-                        // Clamp within the row so a chip near the top/bottom isn't clipped by
-                        // (or spilling into) the neighbouring row. Chip-vs-chip de-overlap is
-                        // a later refinement; this keeps each chip inside its own row.
-                        const top = Math.max(flagLineHeight / 2, Math.min(row.height - flagLineHeight / 2, s.py));
-                        return (_jsx("div", { style: {
-                                ...chipStyle,
-                                top: `${top}px`,
-                                transform: 'translateY(-50%)',
-                                left: flip ? undefined : `${s.px + 8}px`,
-                                right: flip ? `${plotWidth - s.px + 8}px` : undefined,
-                                color: s.color,
-                            }, children: s.format(s.value) }, i));
-                    }), 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
-                    // (`flagBase`), beside the pole at the point's x (shared `flagChipX`).
-                    _jsx("div", { style: {
-                            ...chipStyle,
-                            top: `${flagBase}px`,
-                            ...flagChipX(s.px, plotWidth),
-                            color: s.color,
-                        }, children: s.format(s.value) }, i))), parts.chip === 'flag' &&
-                    trackerFlags.map((f, i) => (_jsx("div", { style: {
-                            ...chipStyle,
-                            top: `${flagBase}px`,
-                            ...flagChipX(f.px, plotWidth),
-                            display: 'flex',
-                            flexDirection: 'row',
-                            gap: '6px',
-                        }, children: f.lines.map((l, j) => (_jsx("span", { style: { color: l.color }, children: l.text }, j))) }, `boxflag-${i}`)))] }) }));
+                    }, children: [cursorEntries.map((e, i) => e.spec.renderPlot ? (_jsx(Fragment, { children: e.spec.renderPlot(cursorRenderFrame) }, `cursor-plot-${i}`)) : null), (sweeping || restingBand) &&
+                            !wantsBand &&
+                            renderBrushBand(cursorRenderFrame), renderBrushRect(cursorRenderFrame)] }), cursorEntries.map((e, i) => e.spec.renderPlotHtml ? (_jsx(Fragment, { children: e.spec.renderPlotHtml(cursorRenderFrame) }, `cursor-html-${i}`)) : null), cursorEntries.map((e, i) => e.spec.renderYGutter ? (_jsx(Fragment, { children: e.spec.renderYGutter(cursorRenderFrame) }, `cursor-gutter-${i}`)) : null)] }) }));
 }
 //# sourceMappingURL=Layers.js.map