@pond-ts/charts 0.62.0 → 0.64.0

package/dist/YAxis.js

@@ -1,10 +1,24 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useContext, useEffect, useMemo } from 'react';
-import { ContainerContext, RowContext } from './context.js';
+import { useContext, useEffect, useMemo, useRef } from 'react';
+import { ContainerContext, RowContext, } from './context.js';
 import { resolveAxisFormat } from './format.js';
+import { unpadDomain } from './domain.js';
 import { useSlotKey } from './use-slot-key.js';
 import { tickValues } from './yticks.js';
 import { axisMouseProps, axisPointerPx, } from './axis-events.js';
+import { useAxisGestures } from './use-axis-gestures.js';
+/**
+ * Clamp on a gutter drag's own zoom factor. Unlike the container's uniform
+ * transform (floored at `k ≥ 1` so a plot gesture can't zoom every axis out into
+ * blank canvas) an axis you deliberately grabbed may squash as well as stretch —
+ * `k < 1` widens the domain, which costs nothing. The bounds exist only so a
+ * flick of the wheel can't strand the axis at a factor no further gesture can
+ * recover from.
+ */
+const MIN_AXIS_K = 0.02;
+const MAX_AXIS_K = 50;
+/** The un-grabbed transform — also what clears an axis's entry (see `ChartRow`). */
+const IDENTITY_TRANSFORM = { k: 1, ty: 0 };
 const DEFAULT_WIDTH = 50;
 /** Fallback tick count before the row has published its resolved count (the
  *  first render, pre-registration). The row's height-derived value takes over
@@ -17,8 +31,16 @@ const DEFAULT_TICK_COUNT = 5;
  * computes this axis's scale from the charts linked to it; the gutter then draws
  * tick marks + labels from that scale. Charts attach via `<LineChart axis="id">`
  * (default: the first axis).
+ *
+ * **Gestures.** With `<ChartContainer axisPanZoom="y">` (or `"xy"`) the gutter is
+ * grabbable: drag or wheel it to scale **this axis only**
+ * — a sibling axis on the other side, and every other row, hold still — and
+ * double-click to release it back to its fit. That per-axis scaling is what the
+ * plot's vertical gesture deliberately cannot do; see
+ * {@link RowFrame.axisTransforms}. Report it to a scale UI with
+ * {@link YAxisProps.onBoundsChange}.
  */
-export function YAxis({ id, side = 'left', label, scale = 'linear', linearWindow, min, max, format, ticks, tickCount, pad = 0, boundaryLabels = true, width = DEFAULT_WIDTH, hide = false, labelPlacement = 'rotated', color, onMouseEvent, index = 0, }) {
+export function YAxis({ id, side = 'left', label, scale = 'linear', linearWindow, min, max, format, ticks, tickCount, pad = 0, boundaryLabels = true, width = DEFAULT_WIDTH, hide = false, labelPlacement = 'rotated', color, onMouseEvent, onBoundsChange, zeroAnchored = false, index = 0, }) {
     const container = useContext(ContainerContext);
     if (container === null) {
         throw new Error('<YAxis> must be rendered inside a <ChartContainer>');
@@ -44,6 +66,7 @@ export function YAxis({ id, side = 'left', label, scale = 'linear', linearWindow
         format,
         tickValues: ticks?.map((t) => t.at),
         tickCount,
+        color,
         index,
     }), [
         id,
@@ -59,6 +82,7 @@ export function YAxis({ id, side = 'left', label, scale = 'linear', linearWindow
         format,
         ticks,
         tickCount,
+        color,
         index,
     ]);
     // A stable per-instance slot (see useSlotKey) keeps this axis in a fixed
@@ -66,13 +90,241 @@ export function YAxis({ id, side = 'left', label, scale = 'linear', linearWindow
     // re-appending (which would move the first axis behind a later one and
     // silently rebind the row's default-axis charts).
     const slot = useSlotKey();
-    const { registerAxis, unregisterAxis } = row;
+    const { registerAxis, unregisterAxis, applyAxisTransform } = row;
     // Unregister on unmount only (deps are stable, so cleanup never runs early).
-    useEffect(() => () => unregisterAxis(slot), [unregisterAxis, slot]);
+    useEffect(() => () => {
+        unregisterAxis(slot);
+        // Drop any gutter zoom with the axis. The row keys transforms by axis id
+        // (as it keys scales), so an entry left behind would be inherited by a
+        // later axis that happens to reuse the id.
+        applyAxisTransform(id, IDENTITY_TRANSFORM);
+    }, [unregisterAxis, slot, applyAxisTransform, id]);
     // Register on mount + update in place on every spec change — no reorder.
     useEffect(() => {
         registerAxis(slot, spec);
     }, [registerAxis, slot, spec]);
+    // The transform this axis held at the last press — an UNCONTROLLED pan is
+    // anchored on it (see `onPan`), the same way the x strip anchors on
+    // `container.timeRange`.
+    const panStartRef = useRef(null);
+    // The base scale at the last press, for a CONTROLLED pan. Snapshotted for the
+    // same reason: a controlled consumer writes `min`/`max` back after every
+    // move, so `row.baseYScales` on the *next* move already reflects this drag's
+    // own effect — reading it fresh would compose the total delta onto a base
+    // that has already moved, doubling every step's shift.
+    const panBaseRef = useRef(null);
+    // Drag pans, wheel zooms **this** axis, double-click releases it back to the
+    // row's own fit — the same gesture vocabulary the x strip uses, so a gutter
+    // and the canvas agree on what a drag does. Enabled by the container's
+    // `panZoom` zoom-y degree of freedom. The gesture writes this axis's entry in
+    // `row.axisTransforms`, so only the gutter you grabbed moves — the sibling
+    // axis, and every other row, hold still (see `RowFrame.axisTransforms` for
+    // why that needs its own transform).
+    const gestures = useAxisGestures({
+        axis: 'y',
+        // Gated on `<ChartContainer axisPanZoom>` (its `'y'` / `'xy'` values) — the
+        // axis opt-in, deliberately independent of the plot's `panZoom`. That is what
+        // lets the canonical setup work — an auto-fitting y on a chart whose *x* is
+        // panned and zoomed — without either inheriting gestures silently or opting
+        // the plot into vertical drags (a different feature: the uniform 2-D
+        // transform a scatter or heat map wants).
+        //
+        // `zeroAnchored` drops the drag entirely: a pan slides the whole pixel
+        // window, which is exactly the baseline movement it exists to forbid.
+        // Wheel stays live — `onZoom` below overrides the pivot to `0`'s own
+        // pixel, so a notch narrows the axis around the baseline instead.
+        drag: !zeroAnchored && container.axisPanZoomY ? 'pan' : 'none',
+        wheel: container.axisPanZoomY,
+        // Snapshot the transform (uncontrolled) or the base scale (controlled) at
+        // press: the pan is re-derived from one of these on every move (the x
+        // strip's own approach), so a long drag can't accumulate rounding — and,
+        // for the controlled path, can't compose the total delta onto a base that
+        // this same drag's own previous move already shifted.
+        onDragStart: () => {
+            panStartRef.current = row.axisTransforms.get(id) ?? IDENTITY_TRANSFORM;
+            panBaseRef.current = row.baseYScales.get(id) ?? null;
+        },
+        onPan: (totalDeltaPx) => {
+            if (onBoundsChange !== undefined) {
+                // **Controlled**: shift the pixel window by the drag, same pixel-space
+                // inversion `onZoom` uses so the maths stays correct on `log` and
+                // `symlog` — a pan is just a zoom with every pixel shifted by the same
+                // amount rather than scaled about a pivot. Read from the *press-time*
+                // base, not the live one: `min`/`max` come back through this axis's own
+                // props after every move, so the live base already carries however far
+                // this drag has gone so far, and re-deriving the total delta against it
+                // would double-apply everything already reported.
+                const base = panBaseRef.current;
+                if (base === null)
+                    return;
+                const [r0, r1] = base.range();
+                // `totalDeltaPx` is a SCREEN delta, but `base` is the pre-transform
+                // scale, and the two pixel spaces differ by the container's `k` (and
+                // this axis's own, if it carries one). Translating `base` by a screen
+                // delta therefore pans by `k`× too much whenever the plot's own y zoom
+                // is engaged — the grabbed value outruns the cursor. Both transforms
+                // are applied in *pixel* space (`narrow` inverts `(px - ty) / k`), so
+                // the base↔screen relation is exactly affine for every scale kind and
+                // the correction is a plain division — no per-scale special-casing.
+                // The division is exact on `log` and `symlog` too; end-to-end
+                // tracking on `symlog` still drifts, because `symlogConstant` is
+                // derived from the domain and so the knee moves as the domain pans.
+                // That is pre-existing and independent of this correction — the
+                // sibling zoom test already documents it as "knee drift".
+                //
+                // `ownK` is 1 in the ordinary controlled path: `applyAxisTransform`
+                // is only ever called from the UNCONTROLLED branches, so a controlled
+                // axis carries no transform of its own. It is composed here for the
+                // one window where that is false — a consumer that pans uncontrolled
+                // and then supplies `onBoundsChange`, leaving a stale axis transform
+                // until the next reset. No test covers that window.
+                //
+                // Sibling of the pivot-space bugs in `onZoom`; invisible at
+                // `k === 1`, which is every test that does not first zoom the plot.
+                const ownK = panStartRef.current?.k ?? 1;
+                const pixelK = container.yTransform.k * ownK;
+                const deltaBasePx = Number.isFinite(pixelK) && pixelK !== 0
+                    ? totalDeltaPx / pixelK
+                    : totalDeltaPx;
+                const at = (px) => +base.invert(px - deltaBasePx);
+                const next = [at(r0), at(r1)];
+                if (!Number.isFinite(next[0]) || !Number.isFinite(next[1]))
+                    return;
+                if (next[0] === next[1])
+                    return;
+                onBoundsChange(unpadDomain(next, pad, scale));
+                return;
+            }
+            // **Uncontrolled**: shift this axis's own pixel transform. Anchored on
+            // the press's `panStartRef`, not the live `row.axisTransforms` value —
+            // reading that fresh on every move would double-apply everything moved
+            // so far this drag.
+            const start = panStartRef.current ?? IDENTITY_TRANSFORM;
+            applyAxisTransform(id, { k: start.k, ty: start.ty + totalDeltaPx });
+        },
+        onZoom: (factor, wheelPivotPx) => {
+            // `zeroAnchored` substitutes the wheel's own pointer pixel for wherever
+            // `0` currently renders — read off the LIVE scale (post pan/zoom, both
+            // the container's and this axis's own), which is the pixel a viewer
+            // actually sees the baseline sitting at right now. Falls back to the
+            // pointer if `0` has no position at all (a log axis, which never
+            // admits it — `scaleLog()(0)` is `NaN`) rather than silently doing
+            // nothing.
+            // Used by the UNCONTROLLED branch below, which composes its transform in
+            // live pixel space. The controlled branch re-reads `0` off `baseYScales`
+            // instead — see there.
+            const zeroPx = row.yScales.get(id)?.(0);
+            const pivotPx = zeroAnchored && zeroPx !== undefined && Number.isFinite(zeroPx)
+                ? zeroPx
+                : wheelPivotPx;
+            // Read the scale at gesture time, not from the render that built this
+            // closure — a wheel notch mid-stream must compose onto what is drawn now.
+            if (onBoundsChange !== undefined) {
+                // **Controlled**: report the bounds the gesture reached and draw nothing
+                // ourselves — `min`/`max` coming back is what moves the axis.
+                //
+                // Computed by inverting through the scale in **pixel** space, not by
+                // affine arithmetic on its domain. That is what makes it correct on every
+                // scale kind: `log` and `symlog` are not affine in value space, so
+                // zooming their domain numerically drifts the grabbed pixel (visibly, on
+                // symlog, whose knee is re-derived from the domain each time) and can
+                // overflow to `[0, Infinity]` on a hard log zoom-out.
+                //
+                // Read from `baseYScales` — the axis's *resolved* scale, before the
+                // container's uniform `yTransform` and this axis's own transform. The
+                // consumer's `min`/`max` live in that space, so reporting a value read
+                // off the visible scale would have the transforms applied to it twice.
+                const base = row.baseYScales.get(id);
+                if (base === undefined)
+                    return;
+                // `pivotPx` above was read off the LIVE scale — the pixel a viewer
+                // sees, which is right for the uncontrolled branch because it composes
+                // a transform in that same space. Here the inversion happens in
+                // `base`'s pixel space, and the two differ by the container's own
+                // `yTransform`, so `0` has to be re-read there. Mixing them lets the
+                // baseline drift a few px per notch whenever the plot's y pan/zoom is
+                // active (`panZoom="panZoomY"` / `"panZoomXY"`) — precisely the motion
+                // `zeroAnchored` exists to forbid, and invisible without a plot-level
+                // y zoom, where the two spaces coincide.
+                const baseZeroPx = zeroAnchored ? base(0) : undefined;
+                // The fallback — and the ordinary, non-`zeroAnchored` case — is the
+                // pointer's own pixel, which is a SCREEN pixel and needs the same
+                // change of space. (#678 corrected only the `zeroAnchored` pivot,
+                // leaving the plain controlled wheel pivoting about the wrong point
+                // under a plot y zoom; the pan in this same file had the mirror
+                // defect on its delta. Three faces of one root cause: a screen-space
+                // pixel used where `base`'s pixel space is meant.) `ty` matters here
+                // because a pivot is an absolute position, not a delta.
+                const ownK = panStartRef.current?.k ?? 1;
+                const pixelK = container.yTransform.k * ownK;
+                const pixelTy = container.yTransform.ty;
+                const toBasePx = (screenPx) => Number.isFinite(pixelK) && pixelK !== 0
+                    ? (screenPx - pixelTy) / pixelK
+                    : screenPx;
+                const controlledPivotPx = baseZeroPx !== undefined && Number.isFinite(baseZeroPx)
+                    ? baseZeroPx
+                    : toBasePx(wheelPivotPx);
+                const [r0, r1] = base.range();
+                const lo = Math.min(r0, r1);
+                const hi = Math.max(r0, r1);
+                // Clamp into the scale's own range, not the gutter box: a
+                // `labelPlacement="top"` row reserves a header, so a press up there would
+                // otherwise pivot about a value the axis never draws.
+                const pivot = Math.max(lo, Math.min(hi, controlledPivotPx));
+                // `factor` scales the visible span, so the pixel window scales by its
+                // reciprocal about the pivot.
+                const at = (px) => +base.invert(pivot + (px - pivot) * factor);
+                const next = [at(r0), at(r1)];
+                // Orientation is preserved rather than required: `resolveYDomain` keeps
+                // an explicit `[max, min]` as a deliberate axis flip, and rejecting
+                // descending results would have made adding this callback silently
+                // disable the gesture on a flipped axis.
+                if (!Number.isFinite(next[0]) || !Number.isFinite(next[1]))
+                    return;
+                if (next[0] === next[1])
+                    return;
+                // `pad` is applied last and to explicit bounds too, so the resolved
+                // domain already includes it; handing that back would re-pad it and
+                // inflate the axis by `1 + 2·pad` per notch (see `unpadDomain`).
+                onBoundsChange(unpadDomain(next, pad, scale));
+                return;
+            }
+            // **Uncontrolled**: hold the zoom ourselves as this axis's own pixel
+            // transform. Read at gesture time for the same reason the scale is: two
+            // wheel notches inside one frame both see the render-scope value, so the
+            // second would compose onto the first's *input* and the notch be lost.
+            const own = row.axisTransforms.get(id) ?? IDENTITY_TRANSFORM;
+            // Same range clamp as the controlled path: keep the pivot on the scale.
+            const visible = row.yScales.get(id);
+            const vr = (visible?.range() ?? [0, 0]);
+            const pivot = Math.max(Math.min(vr[0], vr[1]), Math.min(Math.max(vr[0], vr[1]), pivotPx));
+            // `factor` scales the domain span, so its reciprocal is the pixel-space
+            // zoom — the relationship the plot's wheel handler uses.
+            const z = 1 / factor;
+            const nk = Math.min(MAX_AXIS_K, Math.max(MIN_AXIS_K, own.k * z));
+            // Re-derive the zoom the clamp actually allowed, so a gesture held at a
+            // limit stops moving the pivot too (rather than sliding the axis).
+            const zEff = own.k === 0 ? 1 : nk / own.k;
+            applyAxisTransform(id, {
+                k: nk,
+                // Zoom about the grabbed pixel: p' = pivot + (p − pivot)·z, expanded
+                // through the existing transform p = ty + k·base. No pan clamp here —
+                // the plot's exists to stop zoomed content sliding off the canvas, and
+                // this transform is applied by narrowing the domain, so there is no
+                // canvas to leave.
+                ty: pivot * (1 - zEff) + own.ty * zEff,
+            });
+        },
+        // Back to auto: `null` tells a controlled consumer to drop its override (the
+        // same thing their "manual → auto" toggle does), and an uncontrolled axis
+        // drops its own transform.
+        onReset: () => {
+            if (onBoundsChange !== undefined)
+                onBoundsChange(null);
+            else
+                applyAxisTransform(id, IDENTITY_TRANSFORM);
+        },
+    });
     // `hide`: everything above still runs — the axis is registered, so its scale
     // exists and layers bind to it — and everything below (the gutter chrome)
     // does not. Placed after the last hook so the early return can't change hook
@@ -133,6 +385,9 @@ export function YAxis({ id, side = 'left', label, scale = 'linear', linearWindow
     // and the event is dropped. A categorical row labels by slot, matching its
     // ticks; every other row reads this axis's own tick format.
     const mouse = axisMouseProps(onMouseEvent, 'y', id, (event) => {
+        // See the x strip's: a zoom drag's trailing click is not a click on a value.
+        if (event.type === 'click' && gestures.consumeDrag())
+            return null;
         if (!yScale)
             return null;
         // Clamp on the **scale's** range, not the box: a row with a
@@ -151,7 +406,14 @@ export function YAxis({ id, side = 'left', label, scale = 'linear', linearWindow
                 : fmt(value),
         };
     });
-    return (_jsx("div", { "data-axis": "y", "data-axis-id": id, ...mouse, style: {
+    return (_jsx("div", { "data-axis": "y", "data-axis-id": id, ref: gestures.ref, ...gestures.props, ...mouse, 
+        // See the x strip's: two `onDoubleClick`s meet here (the reset and the
+        // consumer's report) and a spread would silently drop one.
+        onDoubleClick: (e) => {
+            mouse.onDoubleClick?.(e);
+            gestures.props.onDoubleClick?.();
+        }, style: {
+            ...gestures.style,
             flex: `0 0 ${slotWidth}px`,
             display: 'flex',
             justifyContent: side === 'left' ? 'flex-end' : 'flex-start',

package/dist/annotations.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useContext, useEffect, useMemo, useRef, useState, } from 'react';
 import { ContainerContext, RowContext, } from './context.js';
-import { flagChipStyle, flagChipX, axisPillX, axisPillStyle } from './chip.js';
+import { flagChipStyle, flagChipX, axisPillX, axisPillStyle, axisPillConnector, } from './chip.js';
 import { useSlotKey } from './use-slot-key.js';
 /**
  * User-authored **annotations** — marks you place *on* a chart, in a register
@@ -569,12 +569,19 @@ export function Baseline({ value, axis, label, labelSide = 'left', labelPosition
                 }, children: text })), indicator &&
                 (() => {
                     const half = container.theme.font.size / 2 + 1;
-                    return (_jsx("div", { style: {
-                            ...axisPillStyle(container.theme, ann.color),
-                            top: `${Math.max(half, Math.min(row.height - half, y))}px`,
-                            transform: 'translateY(-50%)',
-                            ...axisPillX(row.axisSides.get(axisId) ?? 'left', w),
-                        }, children: fmt ? fmt(value) : String(value) }));
+                    const side = row.axisSides.get(axisId) ?? 'left';
+                    const offset = row.axisOffsets.get(axisId) ?? 0;
+                    const top = `${Math.max(half, Math.min(row.height - half, y))}px`;
+                    return (_jsxs(_Fragment, { children: [offset > 0 && (_jsx("div", { style: {
+                                    ...axisPillConnector(side, w, offset, ann.color),
+                                    top,
+                                    transform: 'translateY(-50%)',
+                                } })), _jsx("div", { style: {
+                                    ...axisPillStyle(container.theme, ann.color),
+                                    top,
+                                    transform: 'translateY(-50%)',
+                                    ...axisPillX(side, w, offset),
+                                }, children: fmt ? fmt(value) : String(value) })] }));
                 })()] }));
 }
 /**

package/dist/bars.d.ts

@@ -38,12 +38,25 @@ export declare function barExtent(cs: BarSeries): [number, number] | null;
  * - When the domain sits entirely below `0`: the bars hang from the **axis top**
  *   (`0` clamped down into the domain) — the symmetric case.
  *
- * I.e. `0` clamped into `[floor, top]`. The domain bounds come from the plain
- * `(value) => pixel` scale the row hands `draw`/`hitTest`; the runtime object is
- * a d3 `ScaleLinear` carrying `.domain()`, read through a localized shape rather
- * than widening the contract to d3-scale (same approach as `AreaChart`).
+ * I.e. `0` clamped into `[floor, top]`. The domain bounds come from `baseScale`
+ * when the caller has one — the axis's *declared* domain, resolved from
+ * `min`/`max`/auto-fit before any pan/zoom pixel transform narrows it — else
+ * from `yScale` itself. The runtime object is a d3 `ScaleLinear` carrying
+ * `.domain()`, read through a localized shape rather than widening the
+ * contract to d3-scale (same approach as `AreaChart`).
+ *
+ * **Reading `yScale` alone is the bug this parameter exists to avoid.** `yScale`
+ * is the *viewport* onto the axis — a gutter drag or wheel notch slides it
+ * without moving any bar's actual value. But a bare `yScale.domain()` read
+ * can't tell "the axis was deliberately configured to exclude zero" apart
+ * from "the current pan happens to have scrolled zero out of view" — so once
+ * a pan pushed the floor above zero, every bar's rendered top silently became
+ * `yScale(baseline)` instead of `yScale(value)`, reading as a bar's value
+ * changing under a gesture that never touched the data. `baseScale` is the
+ * declared domain, immune to that transform, so a transient pan can never
+ * relocate the baseline — only an author's own `<YAxis min>` can.
  */
-export declare function resolveBarBaseline(yScale: Scale): number;
+export declare function resolveBarBaseline(yScale: Scale, baseScale?: Scale): number;
 /**
  * The pixel rect of bar `i` — `[x0, x1, yTop, yBottom]`, with `x0 <= x1` and
  * `yTop <= yBottom` — or `null` for a gap (non-finite value). The x-span comes
@@ -442,7 +455,7 @@ export declare function stackBinExtent(ss: StackedBarSeries): [number, number] |
  * `0` into the domain, so this returns exactly `0` and the geometry is
  * unchanged.
  */
-export declare function stackBase(orientation: Orientation, xScale: Scale, yScale: Scale): number;
+export declare function stackBase(orientation: Orientation, xScale: Scale, yScale: Scale, baseYScale?: Scale): number;
 /**
  * The pixel rect `[x0, x1, yTop, yBottom]` (ascending on both axes) of bin `b`'s
  * segment `g`, stacked so it sits atop `cumBefore` (the summed value of the
@@ -475,7 +488,7 @@ export declare function segmentRect(ss: StackedBarSeries, b: number, g: number,
  *
  * O(N·G) over bins × groups, one fill (+ optional stroke) per drawn segment.
  */
-export declare function drawStacks(ctx: CanvasRenderingContext2D, ss: StackedBarSeries, orientation: Orientation, xScale: Scale, yScale: Scale, style: StackStyle, gapPx: number, minSpanPx: number, seriesId: string | undefined, selection: readonly StackMark[], hover: readonly StackMark[], banding?: BandLadder, spans?: readonly SpanSelection[]): void;
+export declare function drawStacks(ctx: CanvasRenderingContext2D, ss: StackedBarSeries, orientation: Orientation, xScale: Scale, yScale: Scale, style: StackStyle, gapPx: number, minSpanPx: number, seriesId: string | undefined, selection: readonly StackMark[], hover: readonly StackMark[], banding?: BandLadder, spans?: readonly SpanSelection[], baseYScale?: Scale): void;
 /**
  * Hit-test plot-pixel `(px, py)` against `ss`'s stacked segments — the **first**
  * segment whose rect contains the point, or `null`. The geometry is
@@ -491,5 +504,5 @@ export declare function stackAt(ss: StackedBarSeries, px: number, py: number, or
 /** Must match the draw's cap ([PND-BARWIDTH]) — this function's whole
  *  contract is that its rect is the drawn rect, so a cap applied to one and
  *  not the other silently drifts the hit target off the ink. */
-maxSpanPx?: number): [bin: number, group: number, begin: number, name: string, value: number] | null;
+maxSpanPx?: number, baseYScale?: Scale): [bin: number, group: number, begin: number, name: string, value: number] | null;
 //# sourceMappingURL=bars.d.ts.map

package/dist/bars.js

@@ -49,13 +49,26 @@ export function barExtent(cs) {
  * - When the domain sits entirely below `0`: the bars hang from the **axis top**
  *   (`0` clamped down into the domain) — the symmetric case.
  *
- * I.e. `0` clamped into `[floor, top]`. The domain bounds come from the plain
- * `(value) => pixel` scale the row hands `draw`/`hitTest`; the runtime object is
- * a d3 `ScaleLinear` carrying `.domain()`, read through a localized shape rather
- * than widening the contract to d3-scale (same approach as `AreaChart`).
+ * I.e. `0` clamped into `[floor, top]`. The domain bounds come from `baseScale`
+ * when the caller has one — the axis's *declared* domain, resolved from
+ * `min`/`max`/auto-fit before any pan/zoom pixel transform narrows it — else
+ * from `yScale` itself. The runtime object is a d3 `ScaleLinear` carrying
+ * `.domain()`, read through a localized shape rather than widening the
+ * contract to d3-scale (same approach as `AreaChart`).
+ *
+ * **Reading `yScale` alone is the bug this parameter exists to avoid.** `yScale`
+ * is the *viewport* onto the axis — a gutter drag or wheel notch slides it
+ * without moving any bar's actual value. But a bare `yScale.domain()` read
+ * can't tell "the axis was deliberately configured to exclude zero" apart
+ * from "the current pan happens to have scrolled zero out of view" — so once
+ * a pan pushed the floor above zero, every bar's rendered top silently became
+ * `yScale(baseline)` instead of `yScale(value)`, reading as a bar's value
+ * changing under a gesture that never touched the data. `baseScale` is the
+ * declared domain, immune to that transform, so a transient pan can never
+ * relocate the baseline — only an author's own `<YAxis min>` can.
  */
-export function resolveBarBaseline(yScale) {
-    const d = yScale.domain?.();
+export function resolveBarBaseline(yScale, baseScale) {
+    const d = (baseScale ?? yScale).domain?.();
     if (!d || d.length === 0)
         return 0;
     const floor = Math.min(d[0], d[d.length - 1]);
@@ -759,8 +772,14 @@ export function stackBinExtent(ss) {
  * `0` into the domain, so this returns exactly `0` and the geometry is
  * unchanged.
  */
-export function stackBase(orientation, xScale, yScale) {
-    return resolveBarBaseline(orientation === 'vertical' ? yScale : xScale);
+export function stackBase(orientation, xScale, yScale, 
+// The y axis's declared (pre-pan/zoom) scale — see `resolveBarBaseline`.
+// Vertical only: a horizontal stack's baseline lives on `xScale`, and x has
+// no equivalent "declared, pre-transform" scale to read yet ([PND-XBASE]).
+baseYScale) {
+    return orientation === 'vertical'
+        ? resolveBarBaseline(yScale, baseYScale)
+        : resolveBarBaseline(xScale);
 }
 /**
  * The pixel rect `[x0, x1, yTop, yBottom]` (ascending on both axes) of bin `b`'s
@@ -833,9 +852,12 @@ export function drawStacks(ctx, ss, orientation, xScale, yScale, style, gapPx, m
 // value against `y` when present, and its group against `rows` when present
 // (the group is this layer's label channel, so `rows` stays testable per
 // segment where `drawBars`' constant label lets the component resolve it).
-spans = NO_SPANS) {
+spans = NO_SPANS, 
+// The y axis's declared (pre-pan/zoom) scale — see `resolveBarBaseline` /
+// `stackBase`.
+baseYScale) {
     const G = ss.groups.length;
-    const base = stackBase(orientation, xScale, yScale);
+    const base = stackBase(orientation, xScale, yScale, baseYScale);
     // Threshold banding applies to a **plain** bar only. `G === 1` is exactly the
     // categorical / horizontal single-value bar (`categoryStack` builds a
     // one-group series); a genuine multi-group stack has no defined banding —
@@ -1015,9 +1037,13 @@ export function stackAt(ss, px, py, orientation, xScale, yScale, gapPx, minSpanP
 /** Must match the draw's cap ([PND-BARWIDTH]) — this function's whole
  *  contract is that its rect is the drawn rect, so a cap applied to one and
  *  not the other silently drifts the hit target off the ink. */
-maxSpanPx) {
+maxSpanPx, 
+// The y axis's declared (pre-pan/zoom) scale — see `resolveBarBaseline` /
+// `stackBase`. Kept in sync with `drawStacks`' own so a hit rect never
+// drifts from the drawn one under a live gutter pan.
+baseYScale) {
     const G = ss.groups.length;
-    const base = stackBase(orientation, xScale, yScale);
+    const base = stackBase(orientation, xScale, yScale, baseYScale);
     for (let b = 0; b < ss.length; b += 1) {
         // The same two accumulators `drawStacks` keeps — they must agree exactly or
         // the hit rect drifts from the drawn one.

package/dist/chip.d.ts

@@ -41,14 +41,57 @@ export declare function axisPillStyle(theme: ChartTheme, color: string): CSSProp
  */
 export declare function pointerStyle(side: 'left' | 'right', color: string): CSSProperties;
 /**
- * CSS placing a value pill **on the axis gutter** at `side`: anchor its inner
- * edge at the plot boundary (`plotWidth`) and let it overflow outward across the
- * reserved gutter (the plot div doesn't clip), lifted with `zIndex` above the
- * sibling axis column (rendered later in the row) so it covers the tick behind
- * it. Shared by {@link YAxisIndicator}'s `placement='axis'` and the crosshair
- * cursor's per-series value pills, so both sit identically on the axis.
+ * 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 declare function axisPillX(side: 'left' | 'right', plotWidth: number, offset?: number): CSSProperties;
+/**
+ * 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 declare function axisPillX(side: 'left' | 'right', plotWidth: number): CSSProperties;
+export declare function axisPillConnector(side: 'left' | 'right', plotWidth: number, offset: number, color: string): CSSProperties;
 /**
  * Horizontal placement for a flag chip beside a vertical pole at plot-x `x`:
  * `FLAG_GAP` to the right, flipping to the left near the right edge so it stays