@pond-ts/charts 0.62.0 → 0.64.0

package/dist/chip.js

@@ -96,17 +96,74 @@ export function pointerStyle(side, color) {
     };
 }
 /**
- * CSS placing a value pill **on the axis gutter** at `side`: anchor its inner
- * edge at the plot boundary (`plotWidth`) and let it overflow outward across the
- * reserved gutter (the plot div doesn't clip), lifted with `zIndex` above the
- * sibling axis column (rendered later in the row) so it covers the tick behind
- * it. Shared by {@link YAxisIndicator}'s `placement='axis'` and the crosshair
- * cursor's per-series value pills, so both sit identically on the axis.
+ * CSS placing a value pill **on an axis gutter** at `side`: anchor its inner
+ * edge at that axis's inner edge — the plot boundary (`plotWidth`) plus the
+ * axis's own `offset` out into the gutter — and let it overflow outward (the
+ * plot div doesn't clip), lifted with `zIndex` above the sibling axis columns
+ * (rendered later in the row) so it covers the tick behind it. The one placement
+ * every on-axis pill goes through — the crosshair cursor's value pill, a
+ * `<Baseline indicator>`, and {@link YAxisIndicator} — so they cannot drift
+ * apart.
+ *
+ * `offset` is `0` for the innermost axis on a side (the single-axis case, and the
+ * behaviour before it existed) and the reserved widths of the axes nearer the
+ * plot for one further out — {@link RowFrame.axisOffsets}. Passing it is what
+ * puts the pill on the axis whose scale produced the number, rather than on
+ * whichever axis happens to sit against the plot. **`YAxisIndicator` does not
+ * pass it** and so still lands innermost: it takes an explicit `side` beside its
+ * `axis`, and what an offset should mean when those two disagree is unsettled
+ * (see `[PND-XHAIRAXIS]` in the charts plan).
+ *
+ * A pill is deliberately unclipped, so a long formatted value can overflow past
+ * the gutter it sits in — further out for an outer-axis pill, which has only its
+ * own column left before the container's edge. Sized-to-content and unclipped
+ * beats truncating a number, but a very wide readout on a narrow outer axis will
+ * spill outside the chart box.
  */
-export function axisPillX(side, plotWidth) {
+export function axisPillX(side, plotWidth, offset = 0) {
+    const inner = plotWidth + offset;
     return side === 'right'
-        ? { left: `${plotWidth}px`, zIndex: 3 }
-        : { right: `${plotWidth}px`, zIndex: 3 };
+        ? { left: `${inner}px`, zIndex: 3 }
+        : { right: `${inner}px`, zIndex: 3 };
+}
+/**
+ * The **connector** for a pill placed further out than the innermost axis: a 1px
+ * bridge from the plot's `side` edge across `offset` px of gutter to the pill's
+ * inner edge, so the in-plot line and its pill read as one object rather than as
+ * a value floating in a gutter two columns away. The y-side twin of the
+ * crosshair's x-axis time connector, which exists for exactly this reason.
+ *
+ * The caller positions it vertically (`top` + a `translateY(-50%)`), at the
+ * **pill's** centre rather than the raw value's — the two agree except where the
+ * pill is clamped inside the row, and a connector attached to the pill is what
+ * sells them as one object.
+ *
+ * In the pill's own colour and above the axis column (`zIndex`, as the pill is),
+ * but at **half opacity** — unlike the x-axis time connector, which is solid.
+ * The difference is what each one crosses: the time connector runs over an empty
+ * strip, while this one runs over *another axis's tick labels* (measured: a
+ * connector at a value whose neighbouring axis has a tick at the same height
+ * overlaps that label's glyphs). Half opacity keeps the labels legible and reads
+ * the bridge as subordinate chrome — the weight the flag cursor's staffs already
+ * use for "this line only connects two things I have drawn".
+ *
+ * Only drawn when `offset > 0`: at offset `0` the pill already touches the plot
+ * edge where the line ends, so a connector would be zero-length ink over a tick
+ * label for nothing.
+ */
+export function axisPillConnector(side, plotWidth, offset, color) {
+    return {
+        position: 'absolute',
+        ...(side === 'right'
+            ? { left: `${plotWidth}px` }
+            : { right: `${plotWidth}px` }),
+        width: `${offset}px`,
+        height: '1px',
+        background: color,
+        opacity: 0.5,
+        pointerEvents: 'none',
+        zIndex: 3,
+    };
 }
 /** Gap (px) between a flag chip and its pole — the cursor staff or an annotation's
  *  line — so the chip floats just beside the pole rather than sitting on it. */

package/dist/context.d.ts

@@ -40,7 +40,27 @@ export interface LabelPlacement {
 export type ChartXScale = ScaleTime<number, number> | ScaleLinear<number, number> | ScaleLogarithmic<number, number> | ScaleSymLog<number, number> | TradingTimeScale | ScaleBand | ElapsedScale;
 export interface ContainerFrame {
     readonly timeRange: readonly [number, number];
+    /**
+     * The **declared** view — the container's `range` prop, normalized — as
+     * against {@link timeRange}, which is where gestures have moved it. The
+     * x-axis strip's double-click reset returns here.
+     *
+     * On a **controlled** chart (one passing `onTimeRangeChange`) the two are the
+     * same object of truth by construction: the consumer owns the view, so `range`
+     * *is* the panned view and there is no declared home to go back to. The reset
+     * is then a no-op, and a consumer who wants one holds their own home range and
+     * wires it through `onMouseEvent` — which is exactly the shape of that job.
+     */
+    readonly seedRange: readonly [number, number];
     readonly width: number;
+    /**
+     * Whether the container is managing vertical layout ([PND-HEIGHT]) — it was
+     * given a `height` (number or `'auto'`), renders as a flex column, and flex
+     * rows have real space to divide. `false` is the classic mode: rows declare
+     * pixel heights and the container's height is their sum. A `<ChartRow
+     * flex>` reads this to warn when mounted somewhere it can never resolve.
+     */
+    readonly managesHeight: boolean;
     readonly theme: ChartTheme;
     /** Plot width in px after the gutters — shared by every row. */
     readonly plotWidth: number;
@@ -427,6 +447,16 @@ export interface ContainerFrame {
      * the **aspect ratio** fixed. The x half stays in domain space, where
      * `bounds`, `minDuration` and the trading-calendar zoom maths live.
      */
+    /**
+     * Whether the **axis strips** take gestures, from `<ChartContainer axisPanZoom>`
+     * — resolved per dimension, and independent of the plot's own
+     * {@link zoomX}/{@link zoomY}. `x` gives the `<XAxis>` strip the canvas
+     * gesture (drag pans, wheel zooms); `y` makes each `<YAxis>` gutter scale its
+     * own axis. Both default to `false`, so a chart that doesn't ask keeps inert
+     * axes however interactive its plot is.
+     */
+    readonly axisPanZoomX: boolean;
+    readonly axisPanZoomY: boolean;
     /** Which axes the gestures own; pan follows zoom's degrees of freedom. */
     readonly zoomX: boolean;
     readonly zoomY: boolean;
@@ -792,7 +822,7 @@ export interface RowLayer {
      * chart. Layers whose hit target is already the drawn mark (stacks,
      * scatter, boxes, heat cells) ignore `mode`.
      */
-    hitTest?(px: number, py: number, xScale: (value: number) => number, yScale: (value: number) => number, mode?: 'hover' | 'select'): SelectInfo | null;
+    hitTest?(px: number, py: number, xScale: (value: number) => number, yScale: (value: number) => number, mode?: 'hover' | 'select', baseYScale?: (value: number) => number): SelectInfo | null;
     /**
      * Begin a **sweep session** over this layer's marks — `<MultiSelector>`'s
      * range query (interaction RFC A7.6/A7.7), the range analog of
@@ -866,8 +896,18 @@ export interface RowLayer {
      * {@link LayerDrawStats} (source/drawn counts + whether decimation engaged) so
      * the container can surface them via {@link ContainerProps.onDrawStats}; a
      * layer that returns `void` still contributes its measured `drawMs`.
-     */
-    draw(ctx: CanvasRenderingContext2D, xScale: (value: number) => number, yScale: (value: number) => number): LayerDrawStats | void;
+     *
+     * `baseYScale` is this axis's *declared* scale — resolved from `min`/`max`/
+     * auto-fit, before either the container's or this axis's own pan/zoom pixel
+     * transform narrows it (the same scale `row.baseYScales` exposes). A layer
+     * whose geometry depends on where the domain sits relative to a fixed value
+     * (a bar or stack resting on zero — see `resolveBarBaseline`) reads *that*
+     * domain for the decision, not `yScale`'s: the live scale is a *viewport*
+     * onto the axis, and a pan sliding that viewport away from zero must not
+     * relocate the bars' own baseline out from under them. Only bars currently
+     * use it; every other layer type ignores the extra argument.
+     */
+    draw(ctx: CanvasRenderingContext2D, xScale: (value: number) => number, yScale: (value: number) => number, baseYScale?: (value: number) => number): LayerDrawStats | void;
 }
 /**
  * A layer's per-drag **sweep session** ({@link RowLayer.beginSweep} — RFC
@@ -1356,15 +1396,24 @@ export type CursorSnapX = 'none' | 'sample' | 'sequence';
 /**
  * One resolved per-series measurement at the cursor — **finished numbers, not
  * raw materials** (interaction RFC A2.3): the sample's plot pixels, the axis it
- * scales against (id + side, so a pill can hug the right gutter), and its value
- * already formatted by that axis's formatter. A cursor slot draws these; it
- * never sees a scale, a format map, or an axis-side map.
+ * scales against (id + side + gutter offset + colour, so a pill can sit *on
+ * that* axis in *its* ink), and its value already formatted by that axis's
+ * formatter. A cursor slot draws these; it never sees a scale, a format map, or
+ * an axis-side map.
  */
 export interface ResolvedCursorSample {
     readonly px: number;
     readonly py: number;
     readonly axisId: string;
     readonly side: 'left' | 'right';
+    /** Distance in px from the plot's `side` edge to this axis's inner edge —
+     *  `0` for the innermost axis, the reserved widths of the axes between it and
+     *  the plot otherwise ({@link RowFrame.axisOffsets}). What lets an axis-edge
+     *  pill land on the axis that measured the value rather than the innermost. */
+    readonly axisOffset: number;
+    /** This axis's own `<YAxis color>`, or `undefined` for the theme's axis ink
+     *  ({@link RowFrame.axisColors}) — so an axis-edge pill matches its axis. */
+    readonly axisColor: string | undefined;
     readonly formatted: string;
     readonly color: string;
     readonly label: string;
@@ -1406,7 +1455,8 @@ export interface ResolvedCursorFrame {
     readonly flags: readonly ResolvedCursorFlag[];
     /**
      * The **raw pointer**'s y resolved against the row's default axis — position,
-     * formatted value, and axis side — or `null` when this row isn't hovered.
+     * formatted value, and that axis's placement (side + gutter offset + colour,
+     * as on {@link ResolvedCursorSample}) — or `null` when this row isn't hovered.
      * The free (non-snapping) crosshair reads this; it is resolved here because a
      * slot has no `yScale.invert` to do it itself.
      */
@@ -1414,6 +1464,8 @@ export interface ResolvedCursorFrame {
         readonly py: number;
         readonly formatted: string;
         readonly side: 'left' | 'right';
+        readonly axisOffset: number;
+        readonly axisColor: string | undefined;
     } | null;
     /** The range cursor's **band** under the pointer (bucket-snapped via the
      *  declared sequence, else the drag span), as clamped plot pixels; `null`
@@ -1661,6 +1713,11 @@ export interface AxisSpec {
      *  target; `undefined` derives the count from the row height (see
      *  {@link resolveYTickCount}). Ignored when {@link tickValues} is set. */
     readonly tickCount: number | undefined;
+    /** This axis's own ink (`<YAxis color>`), or `undefined` for the theme's.
+     *  Registered — not merely rendered — because the axis-edge chrome the row
+     *  and the cursor draw (the crosshair's value pill) has to match the axis it
+     *  sits on, and only the registry knows every axis. */
+    readonly color: string | undefined;
     /**
      * Declaration position among the row's children, injected by `ChartRow`. The
      * row sorts axes by this, so the **first declared** axis is the default
@@ -1689,6 +1746,52 @@ export interface RowFrame {
      */
     readonly topInset: number;
     readonly yScales: ReadonlyMap<string, YScale>;
+    /**
+     * Each axis's scale **before** any gesture transform — the domain it resolved
+     * to from `min`/`max`/`pad`/auto-fit, which is the space a controlled
+     * consumer's bounds live in.
+     *
+     * {@link yScales} carries the *visible* scales: the uniform
+     * {@link ContainerFrame.yTransform} and the axis's own
+     * {@link axisTransforms} entry have already narrowed them. A gutter gesture
+     * that reported values read off those and had them fed back as `min`/`max`
+     * would have the transforms applied a second time — the visible domain then
+     * diverges from every value the consumer was told.
+     */
+    readonly baseYScales: ReadonlyMap<string, YScale>;
+    /**
+     * **Per-axis** pixel zoom, keyed by axis id — what a drag on that axis's
+     * gutter produces, layered *under* the container's uniform
+     * {@link ContainerFrame.yTransform}. Identity (`{ k: 1, ty: 0 }`) for any axis
+     * nobody has grabbed, which is every axis until one is.
+     *
+     * The uniform transform exists precisely so a *plot* gesture never has to
+     * answer "which of this row's axes does a vertical drag own?" — see
+     * {@link ContainerFrame.yTransform}. Grabbing one gutter answers it by
+     * construction, and this is where that answer lives. Both are applied the same
+     * way (narrowing the domain to the window the transform makes visible), the
+     * uniform one first, so an axis carrying both reads as an ordinary axis over
+     * the doubly-narrowed window and nothing downstream knows either exists.
+     *
+     * Unlike the uniform transform this is **not** floored at `k ≥ 1`: that floor
+     * stops a plot gesture zooming every axis out past its natural fit into blank
+     * canvas, whereas squashing one axis you deliberately grabbed is the point of
+     * the gesture (and costs nothing — a `k < 1` widens the domain rather than
+     * exposing empty plot).
+     */
+    readonly axisTransforms: ReadonlyMap<string, {
+        readonly k: number;
+        readonly ty: number;
+    }>;
+    /**
+     * Set one axis's {@link axisTransforms} entry — the y counterpart of
+     * {@link ContainerFrame.applyRange}. Passing identity clears it (the
+     * double-click reset).
+     */
+    applyAxisTransform(id: string, next: {
+        k: number;
+        ty: number;
+    }): void;
     /** Value formatter per axis id (resolved from the axis's {@link AxisSpec.format}
      *  against its scale) — used by both the tick labels and the cursor readout, so
      *  a value reads identically in both. */
@@ -1705,6 +1808,30 @@ export interface RowFrame {
     /** The side each axis sits on, keyed by id — so an axis-edge overlay (the
      *  crosshair value pills) hugs the correct gutter. */
     readonly axisSides: ReadonlyMap<string, 'left' | 'right'>;
+    /**
+     * How far out in its gutter each axis sits, keyed by id: the px distance from
+     * the plot's edge to that axis's **inner** edge — `0` for the innermost axis
+     * on a side, the sum of the reserved widths of the axes between it and the
+     * plot for the ones beyond it (the slots of {@link ContainerFrame.leftSlots} /
+     * `rightSlots` it sits behind).
+     *
+     * The companion to {@link axisSides}: side alone puts an axis-edge pill on the
+     * *innermost* axis of that side, which is the wrong axis whenever a side
+     * carries more than one — the pill then reads as a value on a scale that never
+     * measured it. Together they place it on the axis that did.
+     *
+     * Keyed by id, so a **mirrored** id (one scale registered on both sides, or a
+     * duplicate) resolves to the **last declared** instance — the same winner
+     * {@link axisSides} picks, deliberately, so that side and offset always
+     * describe one axis. Picking them by different rules would pair one
+     * instance's gutter with another's column, which is exactly the mis-placement
+     * this map exists to remove.
+     */
+    readonly axisOffsets: ReadonlyMap<string, number>;
+    /** Each axis's own ink (`<YAxis color>`), keyed by id; an axis that sets none
+     *  is absent. The other half of matching an axis-edge pill to its axis (see
+     *  {@link axisOffsets}) — the pill takes this colour, else the theme's. */
+    readonly axisColors: ReadonlyMap<string, string>;
     /** This row's cursor-mode override, or `undefined` to inherit the container's
      *  default ({@link ContainerFrame.cursor}). */
     readonly cursor: CursorMode | undefined;

package/dist/cursors.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 import { useContext, useEffect, useMemo } from 'react';
 import { ContainerContext, RowContext, } from './context.js';
 import { renderBrushBand } from './brush.js';
-import { flagChipStyle, flagChipX, axisPillStyle, axisPillX } from './chip.js';
+import { flagChipStyle, flagChipX, axisPillStyle, axisPillX, axisPillConnector, } from './chip.js';
 import { useSlotKey } from './use-slot-key.js';
 import { isDev } from './dev.js';
 /**
@@ -188,6 +188,12 @@ function buildFlagCursor(o) {
  * sample nearest the pointer y in the hovered row — or the first sample when
  * nothing is hovered (a pinned tracker shows a reticle in every row); free
  * mode reads the container-resolved raw-pointer measurement.
+ *
+ * It carries the picked sample's **axis placement** (side + gutter offset +
+ * axis ink) as well as its value, because the reticle reads one series and its
+ * pill has to land on *that series' axis*: with two axes on a side, the value
+ * belongs to only one of the two scales, and a pill on the other one is a
+ * number pinned to a ruler that never measured it.
  */
 function crosshairPick(f, snap) {
     if (inBoundsX(f) === null)
@@ -204,7 +210,13 @@ function crosshairPick(f, snap) {
             ? f.samples[0]
             : null;
     return pick
-        ? { py: pick.py, formatted: pick.formatted, side: pick.side }
+        ? {
+            py: pick.py,
+            formatted: pick.formatted,
+            side: pick.side,
+            axisOffset: pick.axisOffset,
+            axisColor: pick.axisColor,
+        }
         : null;
 }
 /** `cursor="crosshair"` as a spec: the dashed reticle (renderPlot), the axis
@@ -223,17 +235,30 @@ function buildCrosshairCursor(o) {
                 const reticle = crosshairPick(f, o.snap);
                 return (_jsxs(_Fragment, { children: [_jsx("line", { x1: Math.round(x), y1: 0, x2: Math.round(x), y2: f.rowHeight, stroke: ink, strokeWidth: 1, strokeDasharray: "3 3", shapeRendering: "crispEdges" }), reticle && (_jsxs(_Fragment, { children: [_jsx("line", { x1: 0, y1: Math.round(reticle.py), x2: f.plotWidth, y2: Math.round(reticle.py), stroke: ink, strokeWidth: 1, strokeDasharray: "3 3", shapeRendering: "crispEdges" }), _jsx("circle", { cx: x, cy: reticle.py, r: 3, fill: ink, stroke: background, strokeWidth: background ? 1 : 0 })] }))] }));
             },
+            // The value pill goes **on the reticle's own axis**: its side, its offset
+            // out into that gutter (so a second axis on a side gets its own pill
+            // position rather than the innermost axis's), and its `<YAxis color>` when
+            // it has one — with several axes the pill's ink is what says which scale
+            // the number is on. An uncoloured axis keeps the cursor's own ink.
             renderYGutter: (f) => {
                 const reticle = crosshairPick(f, o.snap);
                 if (reticle === null)
                     return null;
                 const lh = chipLineHeight(f.theme);
-                return (_jsx("div", { style: {
-                        ...axisPillStyle(f.theme, cursorInk(f.theme)),
-                        top: `${Math.max(lh / 2, Math.min(f.rowHeight - lh / 2, reticle.py))}px`,
-                        transform: 'translateY(-50%)',
-                        ...axisPillX(reticle.side, f.plotWidth),
-                    }, children: reticle.formatted }));
+                const ink = reticle.axisColor ?? cursorInk(f.theme);
+                // Clamped inside the row like the y-tick labels; the connector shares it
+                // so the bridge always meets the pill it belongs to.
+                const top = Math.max(lh / 2, Math.min(f.rowHeight - lh / 2, reticle.py));
+                return (_jsxs(_Fragment, { children: [reticle.axisOffset > 0 && (_jsx("div", { style: {
+                                ...axisPillConnector(reticle.side, f.plotWidth, reticle.axisOffset, ink),
+                                top: `${top}px`,
+                                transform: 'translateY(-50%)',
+                            } })), _jsx("div", { style: {
+                                ...axisPillStyle(f.theme, ink),
+                                top: `${top}px`,
+                                transform: 'translateY(-50%)',
+                                ...axisPillX(reticle.side, f.plotWidth, reticle.axisOffset),
+                            }, children: reticle.formatted })] }));
             },
             ...(o.showTime
                 ? {

package/dist/domain.d.ts

@@ -29,6 +29,24 @@ import type { YScaleKind } from './context.js';
  * the *decades* spanned rather than of the difference.
  */
 export declare function resolveYDomain(min: number | undefined, max: number | undefined, extents: Iterable<readonly [number, number] | null>, pad?: number, scale?: YScaleKind): [number, number];
+/**
+ * The inverse of {@link resolveYDomain}'s `pad` — recover the bounds that, fed
+ * back in as `min`/`max`, re-pad to exactly the domain passed in.
+ *
+ * **Why this has to exist.** `pad` is applied *last*, and to explicit bounds too,
+ * so a scale's live domain is the **padded** one. Anything that reads a domain
+ * off the scale and hands it back as bounds (a y-gutter gesture reporting through
+ * `<YAxis onBoundsChange>`) would otherwise re-pad an already-padded domain and
+ * inflate it by `1 + 2·pad` on every report — compounding, so a padded axis
+ * walks outward a notch at a time under a gesture that should be zooming *in*.
+ *
+ * Both directions preserve the domain's centre, so this is the same arithmetic
+ * run backwards: in value space for linear / symlog, in log space for `'log'`
+ * (where `pad` is a fraction of the decades). A `pad` of `0` — the default — is
+ * the identity, and a log domain that is not strictly positive is returned
+ * untouched rather than taken through `log10`.
+ */
+export declare function unpadDomain(domain: readonly [number, number], pad?: number, scale?: YScaleKind): [number, number];
 /**
  * Does resolving this axis's domain need its layers' extents walked?
  * `yExtent()` is O(points) per layer, so the caller only pays it when a side

package/dist/domain.js

@@ -39,6 +39,39 @@ export function resolveYDomain(min, max, extents, pad = 0, scale = 'linear') {
     }
     return result;
 }
+/**
+ * The inverse of {@link resolveYDomain}'s `pad` — recover the bounds that, fed
+ * back in as `min`/`max`, re-pad to exactly the domain passed in.
+ *
+ * **Why this has to exist.** `pad` is applied *last*, and to explicit bounds too,
+ * so a scale's live domain is the **padded** one. Anything that reads a domain
+ * off the scale and hands it back as bounds (a y-gutter gesture reporting through
+ * `<YAxis onBoundsChange>`) would otherwise re-pad an already-padded domain and
+ * inflate it by `1 + 2·pad` on every report — compounding, so a padded axis
+ * walks outward a notch at a time under a gesture that should be zooming *in*.
+ *
+ * Both directions preserve the domain's centre, so this is the same arithmetic
+ * run backwards: in value space for linear / symlog, in log space for `'log'`
+ * (where `pad` is a fraction of the decades). A `pad` of `0` — the default — is
+ * the identity, and a log domain that is not strictly positive is returned
+ * untouched rather than taken through `log10`.
+ */
+export function unpadDomain(domain, pad = 0, scale = 'linear') {
+    const [lo, hi] = domain;
+    if (!pad)
+        return [lo, hi];
+    const shrink = 1 + 2 * pad;
+    if (scale === 'log') {
+        if (!(lo > 0) || !(hi > lo))
+            return [lo, hi];
+        const midLog = (Math.log10(lo) + Math.log10(hi)) / 2;
+        const halfLog = (Math.log10(hi) - Math.log10(lo)) / (2 * shrink);
+        return [10 ** (midLog - halfLog), 10 ** (midLog + halfLog)];
+    }
+    const mid = (lo + hi) / 2;
+    const half = (hi - lo) / (2 * shrink);
+    return [mid - half, mid + half];
+}
 /** Smallest positive value a log domain will fall back to when the data offers
  *  nothing positive at all. Arbitrary but finite — a log scale has no natural
  *  zero to anchor on, and `[0, 1]` (the linear empty-data domain) has no

package/dist/select.d.ts

@@ -17,5 +17,5 @@ import type { LayerEntry, SelectInfo } from './context.js';
  * dispatch in `Layers` unit-tests without a DOM. (Layers passes its sorted
  * z-stack, the shared `xScale`, and its `axisId → yScale` resolver.)
  */
-export declare function resolveSelection(entries: readonly LayerEntry[], px: number, py: number, xScale: (value: number) => number, yScaleFor: (axisId: string | undefined) => ((value: number) => number) | undefined, mode?: 'hover' | 'select'): SelectInfo | null;
+export declare function resolveSelection(entries: readonly LayerEntry[], px: number, py: number, xScale: (value: number) => number, yScaleFor: (axisId: string | undefined) => ((value: number) => number) | undefined, mode?: 'hover' | 'select', baseYScaleFor?: (axisId: string | undefined) => ((value: number) => number) | undefined): SelectInfo | null;
 //# sourceMappingURL=select.d.ts.map

package/dist/select.js

@@ -16,13 +16,18 @@
  * dispatch in `Layers` unit-tests without a DOM. (Layers passes its sorted
  * z-stack, the shared `xScale`, and its `axisId → yScale` resolver.)
  */
-export function resolveSelection(entries, px, py, xScale, yScaleFor, mode = 'hover') {
+export function resolveSelection(entries, px, py, xScale, yScaleFor, mode = 'hover', 
+// The axis's declared (pre-pan/zoom) scale — see `RowLayer.hitTest`. Kept
+// alongside `yScaleFor` rather than folded into it: most callers have no
+// base-scale lookup at hand (a bar-free row, a test harness), and every
+// layer but bars ignores the extra argument regardless.
+baseYScaleFor) {
     for (let i = entries.length - 1; i >= 0; i -= 1) {
         const entry = entries[i];
         const yScale = yScaleFor(entry.axisId);
         if (yScale === undefined)
             continue;
-        const hit = entry.layer.hitTest?.(px, py, xScale, yScale, mode);
+        const hit = entry.layer.hitTest?.(px, py, xScale, yScale, mode, baseYScaleFor?.(entry.axisId));
         if (hit)
             return hit;
     }

package/dist/tradingTimeScale.d.ts

@@ -170,7 +170,7 @@ export interface TradingTimeScale {
      * The **date bands** — the segmented second row of the stacked style. One
      * entry per next-coarser calendar period touching the domain (day bands
      * under intraday ticks, month bands under day ticks, year bands under
-     * month/quarter ticks), each `{ start, label, shaded }`: the period's start
+     * month/quarter ticks), each `{ start, label, showLabel, shaded }`: the period's start
      * instant (the first band's `start` may precede the domain — its label pins
      * at the left edge), the left-aligned label, and a stable zebra `shaded`
      * flag keyed to the band's calendar identity (pan/zoom-invariant). The
@@ -181,6 +181,16 @@ export interface TradingTimeScale {
     bands(count?: number): Array<{
         start: number;
         label: string;
+        /**
+         * Whether the renderer should DRAW `label`. `false` when this band's start
+         * was clamped onto a live instant a tick already labels — the text would
+         * collide, but the band itself must still be emitted, because each entry
+         * is a segment boundary (the next entry's `start` closes it) and carries
+         * that segment's `shaded` parity. Dropping the entry instead deletes the
+         * period from the row, letting the previous band stretch across it under
+         * the wrong identity and shading.
+         */
+        showLabel: boolean;
         shaded: boolean;
     }>;
     domain(): [number, number];

package/dist/tradingTimeScale.js

@@ -192,22 +192,68 @@ export function scaleTradingTime(provider) {
     scale.bands = (count = 10) => {
         if (!hasCalendar())
             return [];
-        const bg = bandGrainFor(resolved(count).granularity);
+        const { ticks, granularity } = resolved(count);
+        const bg = bandGrainFor(granularity);
         if (bg === undefined)
             return []; // year grain — nothing coarser to band
         const fmt = base.tickFormat(count, bandFormatFor(bg));
-        const out = [];
+        const tickSet = new Set(ticks);
+        // A band's raw calendar start is a date, not necessarily a LIVE instant —
+        // a month or day beginning on a collapsed weekend/holiday clamps onto the
+        // next live moment. `bandNext`/`clampUp` are both monotonic, so every raw
+        // start that clamps to the SAME live instant is a contiguous run (a
+        // holiday week's Sat/Sun/Mon all land on the same Tuesday) — collected
+        // here as `{ s, live }` candidates before any label is built, so a run
+        // can be resolved as one group rather than emitting (and then trying to
+        // retract) a label per member.
+        const candidates = [];
+        let s = bandStartOf(domain[0], bg);
         // First band starts at (or before) the domain start — the partial left
         // band whose label the renderer pins at x=0; step to each next period
         // start still inside the domain. Bounded loop as a runaway guard.
-        let s = bandStartOf(domain[0], bg);
         for (let i = 0; i < 100_000 && s < domain[1]; i++) {
+            candidates.push({ s, live: provider.clampUp(s) });
+            s = bandNext(s, bg);
+        }
+        const out = [];
+        for (let i = 0; i < candidates.length;) {
+            const live = candidates[i].live;
+            let j = i;
+            while (j < candidates.length && candidates[j].live === live)
+                j += 1;
+            // One label per run: prefer the member that is ITSELF live (so a
+            // Tuesday reopening after a collapsed weekend reads "Tue", not the
+            // Saturday whose raw start merely happened to clamp onto it) — a run
+            // with no live member (the whole period is inside the gap) falls back
+            // to the first, since there is no better candidate. (Every member of
+            // the group shares `live` by construction — the test is `c.s ===
+            // c.live`, i.e. THIS candidate needed no clamping at all.)
+            const rep = candidates.slice(i, j).find((c) => c.s === c.live) ?? candidates[i];
+            // The band's raw start routinely coincides with a tick that is ALSO
+            // legitimately live (a month band and a day tick both anchored on the
+            // 1st is the ordinary stacked-axis look) — that is not the bug. Only a
+            // representative that itself needed clamping, and whose landing spot a
+            // tick already labels, duplicates one; skip it rather than draw a
+            // second, colliding label over the tick's own.
+            const collides = rep.s !== live && tickSet.has(live);
+            // Emit the band either way. A collision suppresses only its TEXT — the
+            // entry is also this period's segment boundary (the next entry's
+            // `start` closes it) and owns its zebra parity, so skipping it deletes
+            // the period from the row rather than de-duplicating a label: the
+            // preceding band then runs on to the next surviving start under its own
+            // shading and name. (Aug 1 2026 is a Saturday, so the August band
+            // clamps onto Mon Aug 3, which is already a day tick — dropping it left
+            // July painted across the whole of August.)
             out.push({
-                start: s,
-                label: fmt(new Date(s)),
-                shaded: bandShaded(s, bg),
+                start: live,
+                // Formatted from the representative's own RAW start, not the
+                // clamped one — a genuinely-live rep reads its own date; a
+                // gap-only run's rep reads whichever raw date it fell back to.
+                label: fmt(new Date(rep.s)),
+                showLabel: !collides,
+                shaded: bandShaded(rep.s, bg),
             });
-            s = bandNext(s, bg);
+            i = j;
         }
         return out;
     };