@pond-ts/charts 0.62.0 → 0.64.0

package/dist/ChartContainer.js

@@ -58,17 +58,24 @@ function normalizeRange(range) {
  * ChartContainerProps.width} and {@link AutoWidthContainer}.
  */
 export function ChartContainer(props) {
-    const { width } = props;
+    const { width, height } = props;
     // The measure pass is a *different component* rather than a branch inside
     // the resolved one, because the resolved container may not render at all
-    // until a width exists — and ~60 hooks cannot be conditional. Choosing the
-    // component by the prop's kind (number vs auto) means flipping a container
-    // between fixed and auto remounts it; that is a layout change, and a
-    // remount is the honest response to one.
-    if (typeof width === 'number') {
-        return _jsx(ResolvedChartContainer, { ...props, width: width });
+    // until its dimensions exist — and ~60 hooks cannot be conditional. Choosing
+    // the component by the props' kinds (number vs auto) means flipping between
+    // fixed and auto remounts; that is a layout change, and a remount is the
+    // honest response to one.
+    //
+    // The dimensions default differently, deliberately: an omitted `width`
+    // means `'auto'` (a chart must have a width, and filling is the sensible
+    // way to get one), while an omitted `height` means *unmanaged* — the
+    // classic mode where rows declare pixel heights and the container is their
+    // sum. `'auto'` height is opt-in because it changes who answers "how tall
+    // is a row".
+    if (typeof width === 'number' && height !== 'auto') {
+        return _jsx(ResolvedChartContainer, { ...props, width: width, height: height });
     }
-    return _jsx(AutoWidthContainer, { ...props });
+    return _jsx(AutoSizeContainer, { ...props });
 }
 /**
  * The `width="auto"` half: render a plain full-width box, measure it, and
@@ -88,24 +95,47 @@ export function ChartContainer(props) {
  *    never overflow its own measurement. A caller who wants a bordered frame
  *    puts it on a wrapper *outside* the container.
  */
-function AutoWidthContainer(props) {
+function AutoSizeContainer(props) {
     const boxRef = useRef(null);
-    const [measured, setMeasured] = useState(0);
+    const [measured, setMeasured] = useState({ width: 0, height: 0 });
+    // Which dimensions this instance is responsible for. A numeric width with
+    // height="auto" measures height only, and vice versa.
+    const needWidth = typeof props.width !== 'number';
+    const needHeight = props.height === 'auto';
+    // The needs, readable from the long-lived measure closure without going
+    // stale — `props.width` can legally flip number ↔ 'auto' without leaving
+    // this component (the dispatcher only remounts on the managed/unmanaged
+    // boundary).
+    const needsRef = useRef({ needWidth, needHeight });
+    needsRef.current = { needWidth, needHeight };
     useLayoutEffect(() => {
         const el = boxRef.current;
         if (el === null)
             return;
         const measure = () => setMeasured((prev) => {
-            const next = Math.round(el.getBoundingClientRect().width);
-            // **Latch the last non-zero width.** A box measures 0 whenever it is
-            // not laid out — most often because an ancestor went `display: none`
-            // (a tab switch, a collapsed accordion), which is a *hidden* chart,
-            // not a resized one. Writing that 0 through would unmount the resolved
-            // container and discard everything it owns: pan/zoom position,
-            // selection, hover, and every layer's memoized draw state, all
-            // rebuilt on the way back. Keeping the stale width holds the chart
-            // mounted through the hide, and the next real measurement corrects it.
-            return next > 0 ? next : prev;
+            const need = needsRef.current;
+            const r = el.getBoundingClientRect();
+            // **Latch the last non-zero value, per dimension.** A box measures 0
+            // whenever it is not laid out — most often because an ancestor went
+            // `display: none` (a tab switch, a collapsed accordion), which is a
+            // *hidden* chart, not a resized one. Writing that 0 through would
+            // unmount the resolved container and discard everything it owns:
+            // pan/zoom position, selection, hover, and every layer's memoized
+            // draw state, all rebuilt on the way back. Keeping the stale value
+            // holds the chart mounted through the hide, and the next real
+            // measurement corrects it.
+            const w = Math.round(r.width);
+            const h = Math.round(r.height);
+            // Track only the dimensions this instance is responsible for
+            // (Layer-2 review find): a width-only container that also stored
+            // height would re-render its whole tree on every *content*-height
+            // change — the classic splitter drag, an axis strip growing a band
+            // row — where the pre-[PND-HEIGHT] width-only measure bailed.
+            const width = need.needWidth && w > 0 ? w : prev.width;
+            const height = need.needHeight && h > 0 ? h : prev.height;
+            return width === prev.width && height === prev.height
+                ? prev
+                : { width, height };
         });
         measure();
         // Guarded rather than assumed: a non-browser render target (SSR, an older
@@ -117,10 +147,58 @@ function AutoWidthContainer(props) {
         ro.observe(el);
         return () => ro.disconnect();
     }, []);
-    return (_jsx("div", { ref: boxRef, style: { width: '100%' }, children: measured > 0 && _jsx(ResolvedChartContainer, { ...props, width: measured }) }));
+    const width = needWidth ? measured.width : props.width;
+    const height = needHeight
+        ? measured.height
+        : props.height;
+    const ready = width > 0 && (!needHeight || measured.height > 0);
+    // **A measured dimension that stays 0 is a standing deadlock, not a slow
+    // start** — the parent's size is content-derived and the chart is the
+    // content that would have given it one, so nothing will ever paint and
+    // nothing errors. Worse for height than width: a flex-*column* child's
+    // height defaults to `auto`, so there the deadlock is the default, not an
+    // edge case. Say so once, in dev, after layout has had ample time.
+    const warnedZeroRef = useRef(false);
+    useEffect(() => {
+        if (!isDev || ready || warnedZeroRef.current)
+            return;
+        const t = setTimeout(() => {
+            if (ready || warnedZeroRef.current)
+                return;
+            const el = boxRef.current;
+            if (el === null)
+                return;
+            const r = el.getBoundingClientRect();
+            const stuck = [
+                ...(needWidth && Math.round(r.width) === 0 ? ['width'] : []),
+                ...(needHeight && Math.round(r.height) === 0 ? ['height'] : []),
+            ];
+            if (stuck.length === 0)
+                return;
+            warnedZeroRef.current = true;
+            console.warn(`[pond-charts] <ChartContainer> measured ${stuck.join(' and ')} of 0 ` +
+                `and it has not changed — the chart will stay blank. The measured ` +
+                `box fills its parent, so the parent needs a definite ` +
+                `${stuck.join('/')} (a sized ancestor, a flex basis, or ` +
+                `\`min-${stuck[0]}: 0\` on a flex child); a parent sized by its ` +
+                `own content deadlocks, because the chart is that content.`);
+        }, ZERO_SIZE_WARNING_MS);
+        return () => clearTimeout(t);
+    }, [ready, needWidth, needHeight]);
+    return (_jsx("div", { ref: boxRef, style: {
+            width: '100%',
+            // Only claim the parent's height when asked to measure it: a
+            // width-only auto container must keep its intrinsic height (the rows'
+            // sum), or every pre-[PND-HEIGHT] consumer's layout changes.
+            ...(needHeight ? { height: '100%', minHeight: 0 } : {}),
+        }, children: ready && (_jsx(ResolvedChartContainer, { ...props, width: width, height: height })) }));
 }
+/** How long a measured dimension may stay 0 before the dev warning names the
+ *  deadlock (see {@link AutoSizeContainer}). Long enough for any real layout
+ *  pass; a chart legitimately gated this long is not painting anyway. */
+const ZERO_SIZE_WARNING_MS = 600;
 /** {@link ChartContainer} with its width resolved to a concrete pixel number. */
-function ResolvedChartContainer({ range, categories: categoriesProp, maxBandWidth, bandAlign = 'start', width, rowGap = 0, showAxis = true, trackerPosition, onTrackerChanged, onDrawStats, panZoom = false, bounds, onTimeRangeChange, minDuration = 1, cursor: cursorProp, cursorSequence: cursorSequenceProp, onRegionSelect, regionSelectModifier, cursorTime: cursorTimeProp, crosshairSnap: crosshairSnapProp, editAnnotations = false, creating = null, onCreate, onSelectAnnotation, onHoverAnnotation, onEditAnnotation, snap = true, timeFormat, cursorFormat: cursorFormatProp, origin, theme, discontinuities, calendar, spacing, xScale: xScaleKind = 'linear', grid = true, sessionDividers = 'none', children, }) {
+function ResolvedChartContainer({ range, categories: categoriesProp, maxBandWidth, bandAlign = 'start', width, height, rowGap = 0, showAxis = true, trackerPosition, onTrackerChanged, onDrawStats, panZoom = false, axisPanZoom = false, bounds, onTimeRangeChange, minDuration = 1, cursor: cursorProp, cursorSequence: cursorSequenceProp, onRegionSelect, regionSelectModifier, cursorTime: cursorTimeProp, crosshairSnap: crosshairSnapProp, editAnnotations = false, creating = null, onCreate, onSelectAnnotation, onHoverAnnotation, onEditAnnotation, snap = true, timeFormat, cursorFormat: cursorFormatProp, origin, theme, discontinuities, calendar, spacing, xScale: xScaleKind = 'linear', grid = true, sessionDividers = 'none', children, }) {
     // ── Legacy cursor props (deprecated) ───────────────────────────────────────
     // The string surface keeps working for one minor: the resolved mode is
     // synthesized into the equivalent mounted preset below (`<LegacyCursor>`),
@@ -128,6 +206,10 @@ function ResolvedChartContainer({ range, categories: categoriesProp, maxBandWidt
     // *explicitly* set (never on the defaults). Mounted cursor components in the
     // same scope override the shim. See docs/rfcs/interaction.md §9 / A4.4.
     const cursor = cursorProp ?? DEFAULT_CURSOR_MODE;
+    // [PND-HEIGHT] Whether this container owns vertical layout (see the
+    // `height` prop). Carried on the frame so a `<ChartRow flex>` can tell a
+    // home that can size it from one that never will.
+    const managesHeight = height !== undefined;
     // [PND-IGNITECAT] The declared slot list, normalized to `null` when absent
     // and held by **content** identity. An inline `categories={['a', 'b']}` is a
     // fresh array every render; keying the kind/scale memos off the raw prop
@@ -221,6 +303,11 @@ function ResolvedChartContainer({ range, categories: categoriesProp, maxBandWidt
         panZoom === 'panZoomX' ||
         panZoom === 'panZoomXY';
     const zoomY = panZoom === 'panZoomY' || panZoom === 'panZoomXY';
+    // Axis-strip gestures are their own opt-in (see `axisPanZoom`), so they are
+    // resolved from that prop alone — never from `panZoom`, which would make every
+    // already-interactive chart grow axis gestures on upgrade.
+    const axisPanZoomX = axisPanZoom === true || axisPanZoom === 'x' || axisPanZoom === 'xy';
+    const axisPanZoomY = axisPanZoom === true || axisPanZoom === 'y' || axisPanZoom === 'xy';
     const panX = zoomX || panZoom === 'pan';
     const panY = zoomY;
     const panEnabled = panX || panY;
@@ -244,7 +331,14 @@ function ResolvedChartContainer({ range, categories: categoriesProp, maxBandWidt
         const k = Math.max(1, next.k);
         setYTransform((prev) => prev.k === k && prev.ty === next.ty ? prev : { k, ty: next.ty });
     }, []);
-    const interactive = panEnabled || zoomEnabled;
+    // The x **strip**'s gestures move the same view the plot's do, so they must
+    // make the container own a view as well. Leaving `axisPanZoomX` out of this
+    // silently broke the headline combination — `axisPanZoom="x"` with the default
+    // `panZoom="none"`: `applyRange` wrote `internalRange` while `view` kept
+    // reading `seed`, so an uncontrolled strip captured the drag and drew nothing.
+    // (`axisPanZoomY` is absent on purpose: a gutter zoom is per-axis row state,
+    // not the shared x view.)
+    const interactive = panEnabled || zoomEnabled || axisPanZoomX;
     // The explicit base domain from `range` (a tuple or a TimeRange). `undefined`
     // ⇒ auto-fit (resolved from the layers below). Pan/zoom seeds from it; `seed`
     // is the placeholder while auto-fitting.
@@ -1210,6 +1304,11 @@ function ResolvedChartContainer({ range, categories: categoriesProp, maxBandWidt
     // it lives in `cursorFrame` below, [PND-HOVCTX] — but the tuple stays a memo
     // to hold the line for every other rebuild path.)
     const timeRangeTuple = useMemo(() => [d0, d1], [d0, d1]);
+    // The declared view (`range`), as against the gestured one above — the x
+    // strip's double-click reset target. Memoized on its endpoints for the same
+    // reason `timeRangeTuple` is: it sits on the frame, and a fresh tuple each
+    // render would re-identify it for every draw callback that reads the frame.
+    const seedRangeTuple = useMemo(() => [seed[0], seed[1]], [seed[0], seed[1]]);
     // The per-move cursor state, split into its own context so a mousemove
     // re-identifies only this small object — not the ~50-field frame below, which
     // stays stable across hovers so `YAxis` / `Bar` / `Box` don't re-render. See
@@ -1221,6 +1320,10 @@ function ResolvedChartContainer({ range, categories: categoriesProp, maxBandWidt
     }), [cursorX, hoverPoint]);
     const frame = useMemo(() => ({
         timeRange: timeRangeTuple,
+        seedRange: seedRangeTuple,
+        axisPanZoomX,
+        axisPanZoomY,
+        managesHeight,
         width,
         theme: theme ?? defaultTheme,
         plotWidth,
@@ -1302,6 +1405,10 @@ function ResolvedChartContainer({ range, categories: categoriesProp, maxBandWidt
         firstRowKey,
     }), [
         timeRangeTuple,
+        seedRangeTuple,
+        axisPanZoomX,
+        axisPanZoomY,
+        managesHeight,
         width,
         theme,
         plotWidth,
@@ -1385,13 +1492,33 @@ function ResolvedChartContainer({ range, categories: categoriesProp, maxBandWidt
                     // The 'line' default nobody asked for is IMPLICIT — the one cursor a
                     // <MultiSelector>'s resting block preview may replace with the
                     // brush band. An explicit `cursor` prop (any mode) still wins.
-                    implicit: cursorProp === undefined }), _jsxs("div", { style: { width: `${width}px` }, children: [_jsx("div", { style: {
+                    implicit: cursorProp === undefined }), _jsxs("div", { style: {
+                        width: `${width}px`,
+                        // [PND-HEIGHT] A managed height makes the outer box a flex
+                        // column: the rows block below flexes, the axis strip keeps its
+                        // natural height at the bottom, and CSS subtracts one from the
+                        // other. That subtraction being layout rather than arithmetic is
+                        // the feature — the strip's height varies with label, font size,
+                        // calendar bands and pill lanes, so no constant is correct.
+                        ...(height !== undefined
+                            ? {
+                                height: `${height}px`,
+                                display: 'flex',
+                                flexDirection: 'column',
+                            }
+                            : {}),
+                    }, children: [_jsx("div", { style: {
                                 display: 'flex',
                                 flexDirection: 'column',
                                 gap: `${rowGap}px`,
                                 // The positioned ancestor for overlay chrome (`<Legend>`): the
                                 // card anchors to the rows block, never the axis strip below.
                                 position: 'relative',
+                                // The rows block takes what the axis strip leaves. `minHeight:
+                                // 0` lets it shrink below its content — without it a flex
+                                // child's floor is its content and nothing can ever get
+                                // smaller.
+                                ...(height !== undefined ? { flex: '1 1 0%', minHeight: 0 } : {}),
                             }, children: children }), showAxis && _jsx(TimeAxis, {})] })] }) }));
 }
 //# sourceMappingURL=ChartContainer.js.map

package/dist/ChartRow.d.ts

@@ -1,8 +1,44 @@
 import { type ReactNode } from 'react';
 import { type CursorMode } from './context.js';
 export interface ChartRowProps {
-    /** Row height in CSS pixels. */
-    height: number;
+    /**
+     * Row height in CSS pixels — the **fixed** sizing mode. Omit it (or pass
+     * {@link flex}) to let the row share the container's remaining height
+     * instead; a bare `<ChartRow>` means `flex={1}`.
+     */
+    height?: number;
+    /**
+     * Share of the container's **remaining** height ([PND-HEIGHT]) — the
+     * CSS-flex sizing mode, and what an omitted `height` defaults to (`1`).
+     *
+     * The remainder is what CSS flex layout says it is: the container's height
+     * minus its axis strip, minus every fixed-`height` row, minus any non-row
+     * children you placed between rows (a draggable splitter), minus `rowGap`s.
+     * That is deliberate — the row's box is `flex: <n> 1 0`, so **the browser
+     * does the subtraction** and there is no strip-height constant for a caller
+     * to know, guess, or drift on (the reporting consumer had `20` and `24` in
+     * one codebase for a strip that is actually 22 — *when it is not showing a
+     * calendar band row or marker pills, which change it*). The row then reads
+     * back the height the layout gave it and builds its y-scales from that.
+     *
+     * Mixing modes is the point, not an edge case: a price row over a volume
+     * row is `<ChartRow flex={3}>` over `<ChartRow flex={1}>`; the splitter
+     * shape is one `flex` row that absorbs slack over one fixed row the drag
+     * resizes.
+     *
+     * **Needs a container that manages height** — `<ChartContainer
+     * height={number | 'auto'}>`. Inside a container with no height, a flex
+     * row's box has nothing to flex into, collapses to zero, and stays gated
+     * out; dev builds warn.
+     *
+     * A flex row's first useful paint waits for its first measurement — by
+     * **timing**, not a gate: the first render does execute children at height
+     * 0 (a 0-height canvas draws nothing), and the layout effect's synchronous
+     * setState delivers the real height before the browser paints. Like the
+     * container's `width="auto"`, it keeps its last non-zero height while
+     * hidden, so a `display: none` tab switch does not discard its scales.
+     */
+    flex?: number;
     /**
      * Cursor presentation for this row, overriding the container's default
      * ({@link ChartContainerProps.cursor}). Omit to inherit. See {@link CursorMode}.
@@ -32,5 +68,5 @@ export interface ChartRowProps {
  * Children lay out left-to-right in author order, so `<YAxis side="left"/>` goes
  * before `<Layers/>` and `<YAxis side="right"/>` after.
  */
-export declare function ChartRow({ height, cursor, children }: ChartRowProps): import("react/jsx-runtime").JSX.Element;
+export declare function ChartRow({ height: heightProp, flex, cursor, children, }: ChartRowProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=ChartRow.d.ts.map

package/dist/ChartRow.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Children, Fragment, isValidElement, useCallback, useContext, useEffect, useMemo, useRef, useState, } from 'react';
+import { Children, Fragment, isValidElement, useCallback, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState, } from 'react';
 import { scaleLinear, scaleLog, scaleSymlog } from 'd3-scale';
 import { isDev } from './dev.js';
 import { useIndexedChildren } from './child-index.js';
@@ -90,6 +90,11 @@ function axisSpecEqual(a, b) {
         a.labelPlacement === b.labelPlacement &&
         a.index === b.index &&
         a.tickCount === b.tickCount &&
+        // The axis-edge chrome drawn *by the row* wears this (the crosshair's value
+        // pill), so a swallowed colour change would leave the pill on the old ink
+        // while the axis's own labels repainted — the same silent-staleness the
+        // `linearWindow` note above warns about.
+        a.color === b.color &&
         Object.is(a.format, b.format) &&
         numberArraysEqual(a.tickValues, b.tickValues));
 }
@@ -134,11 +139,73 @@ const TOP_LABEL_HEADER = 16;
  * Children lay out left-to-right in author order, so `<YAxis side="left"/>` goes
  * before `<Layers/>` and `<YAxis side="right"/>` after.
  */
-export function ChartRow({ height, cursor, children }) {
+export function ChartRow({ height: heightProp, flex, cursor, children, }) {
     const container = useContext(ContainerContext);
     if (container === null) {
         throw new Error('<ChartRow> must be rendered inside a <ChartContainer>');
     }
+    // ── Sizing mode ([PND-HEIGHT]) ─────────────────────────────────────────────
+    // Fixed (`height` in px) or flex (`flex`, the default when neither is
+    // given). A flex row's box is sized by CSS (`flex: <n> 1 0` inside the
+    // container's column), and the row reads back what layout gave it — the
+    // browser subtracts the axis strip, fixed siblings, splitters and row gaps,
+    // so no caller (and no code here) ever knows what those cost.
+    const isFlex = heightProp === undefined;
+    const flexGrow = flex ?? 1;
+    const warnedSizingRef = useRef(false);
+    useEffect(() => {
+        if (!isDev || warnedSizingRef.current)
+            return;
+        if (heightProp !== undefined && flex !== undefined) {
+            // Both given is a contradiction, not a tiebreak: warn and honour
+            // `height` (the long-standing prop) so the chart renders
+            // deterministically.
+            warnedSizingRef.current = true;
+            console.warn(`[pond-charts] <ChartRow> got both height={${heightProp}} and ` +
+                `flex={${flex}} — they are alternative sizing modes. Using ` +
+                `height; drop one.`);
+        }
+    }, [heightProp, flex]);
+    const boxRef = useRef(null);
+    const [measured, setMeasured] = useState(0);
+    useLayoutEffect(() => {
+        if (!isFlex)
+            return;
+        const el = boxRef.current;
+        if (el === null)
+            return;
+        const measure = () => setMeasured((prev) => {
+            const next = Math.round(el.getBoundingClientRect().height);
+            // Latch the last non-zero height — a hidden row (display: none
+            // ancestor) is not a resized one, and writing 0 through would tear
+            // down its scales. Same rule as the container's width="auto".
+            return next > 0 ? next : prev;
+        });
+        measure();
+        if (typeof ResizeObserver === 'undefined')
+            return;
+        const ro = new ResizeObserver(measure);
+        ro.observe(el);
+        return () => ro.disconnect();
+    }, [isFlex]);
+    // A flex row inside a container that doesn't manage height has nothing to
+    // flex into: its box is 0 and stays 0, silently. That is a wiring error the
+    // consumer should hear about now, not a slow start to wait through.
+    const warnedNoHeightRef = useRef(false);
+    useEffect(() => {
+        if (!isDev ||
+            !isFlex ||
+            container.managesHeight ||
+            warnedNoHeightRef.current) {
+            return;
+        }
+        warnedNoHeightRef.current = true;
+        console.warn(`[pond-charts] <ChartRow flex> needs a container that manages height ` +
+            `— give <ChartContainer> a height ({number | 'auto'}). Inside a ` +
+            `container with no height this row's box collapses to 0 and never ` +
+            `paints.`);
+    }, [isFlex, container.managesHeight]);
+    const height = isFlex ? measured : heightProp;
     // Register on mount so the container can mark the first (topmost) row by
     // mount order — the shared cursor-time chip renders there only.
     const rowKey = useSlotKey();
@@ -165,6 +232,33 @@ export function ChartRow({ height, cursor, children }) {
     // min/max or series change silently rebind axes / reorder the z-stack.)
     const [axes, setAxes] = useState(() => new Map());
     const [layers, setLayers] = useState(() => new Map());
+    // Per-axis pixel zoom — a drag on one gutter (see `RowFrame.axisTransforms`).
+    // Empty until an axis is actually grabbed, so a chart with no axis gestures
+    // carries no extra state and the identity branch below skips the work.
+    // Filled by the scale memo below (see `baseYScales` on the frame).
+    const baseRef = useRef(new Map());
+    const [axisTransforms, setAxisTransforms] = useState(() => new Map());
+    const applyAxisTransform = useCallback((id, next) => {
+        setAxisTransforms((prev) => {
+            const cur = prev.get(id);
+            if (cur !== undefined && cur.k === next.k && cur.ty === next.ty) {
+                return prev; // no-op: don't re-render (a wheel notch at a clamp)
+            }
+            const map = new Map(prev);
+            // Identity is the absence of a transform, not an entry recording one —
+            // so the reset genuinely returns the axis to the un-grabbed state and
+            // the scale memo's fast path applies again.
+            if (next.k === 1 && next.ty === 0) {
+                if (cur === undefined)
+                    return prev;
+                map.delete(id);
+            }
+            else {
+                map.set(id, next);
+            }
+            return map;
+        });
+    }, []);
     // Registration is idempotent under value-equality: a `<YAxis>` re-fires its
     // register effect whenever its `spec` memo yields a fresh object — which an
     // inline `ticks={[]}` / `format` or a re-rendered parent does every render. If
@@ -234,6 +328,7 @@ export function ChartRow({ height, cursor, children }) {
                 format: undefined,
                 tickValues: undefined,
                 tickCount: undefined,
+                color: undefined,
                 index: 0,
             },
         ], [realAxes]);
@@ -278,6 +373,7 @@ export function ChartRow({ height, cursor, children }) {
     const { k: yk, ty: yty } = container.yTransform;
     const yScales = useMemo(() => {
         const map = new Map();
+        const bases = new Map();
         for (const ax of effectiveAxes) {
             const extents = needsExtents(ax)
                 ? layerList
@@ -315,14 +411,43 @@ export function ChartRow({ height, cursor, children }) {
             // each other in the first cut. Narrowing the domain means ticks, padding
             // and every downstream reader see an ordinary axis over the visible
             // window, and none of them need to know a transform exists.
-            if (yk !== 1 || yty !== 0) {
-                const at = (px) => +s.invert((px - yty) / yk);
+            //
+            // The **per-axis** transform (an axis-gutter drag) is applied the same
+            // way, immediately after — so a doubly-transformed axis is still just an
+            // ordinary axis over the doubly-narrowed window. Sequential rather than
+            // pre-composed on purpose: each step inverts through the scale it is
+            // actually narrowing, which is what keeps it correct on a log / symlog
+            // axis, where pixel→value is not affine and two composed `k`s would not
+            // land where two applications do.
+            const narrow = (k, ty) => {
+                const at = (px) => +s.invert((px - ty) / k);
                 s.domain([at(height), at(topHeader)]);
+            };
+            // Snapshot before either transform: `baseYScales` is the domain the axis
+            // RESOLVED to (bounds + pad + nice), which is the space a controlled
+            // consumer's `min`/`max` live in. Reading the transformed scale instead and
+            // handing those values back re-applies the transform on top of them.
+            bases.set(ax.id, s.copy());
+            if (yk !== 1 || yty !== 0)
+                narrow(yk, yty);
+            const own = axisTransforms.get(ax.id);
+            if (own !== undefined && (own.k !== 1 || own.ty !== 0)) {
+                narrow(own.k, own.ty);
             }
             map.set(ax.id, s);
         }
+        baseRef.current = bases;
         return map;
-    }, [effectiveAxes, layerList, height, defaultAxisId, topHeader, yk, yty]);
+    }, [
+        effectiveAxes,
+        layerList,
+        height,
+        defaultAxisId,
+        topHeader,
+        yk,
+        yty,
+        axisTransforms,
+    ]);
     // Dev-mode diagnostics for a `scale="log"` axis (see `logAxisWarning`). Three
     // things about *where* this sits are load-bearing, each of them a bug the
     // first version shipped:
@@ -451,6 +576,53 @@ export function ChartRow({ height, cursor, children }) {
             map.set(ax.id, ax.side);
         return map;
     }, [effectiveAxes]);
+    // How far out in its gutter each axis sits: the px from the plot's edge to the
+    // axis's inner edge, walking each side plot-outward and accumulating the
+    // *reserved* slot widths (what the axis boxes actually render at, so the
+    // offset lands on the axis and not between two of them). Side alone would put
+    // every pill on the innermost axis — the wrong scale as soon as a side carries
+    // two (see RowFrame.axisOffsets). Right axes are authored inner→outer, left
+    // axes outer→inner, so the left list walks in reverse.
+    //
+    // Resolved per **instance** first, then collapsed to ids by the same
+    // last-declared-wins rule `axisSides` uses — so for a mirrored id (one scale
+    // registered on both sides, or a duplicate) the side and the offset always
+    // come from the *same* axis. A different rule per map (say, keeping the
+    // smallest offset) can pair one instance's side with another's offset, which
+    // is the very "pill on an axis that didn't measure it" this fixes.
+    const axisOffsets = useMemo(() => {
+        const byInstance = new Map();
+        const walk = (side) => {
+            const inward = realEntries.filter(([, spec]) => spec.side === side);
+            if (side === 'left')
+                inward.reverse();
+            let offset = 0;
+            for (const [key, spec] of inward) {
+                byInstance.set(key, offset);
+                offset += axisSlots.get(key) ?? spec.width;
+            }
+        };
+        walk('right');
+        walk('left');
+        // realEntries is index-sorted, the order effectiveAxes (and so axisSides)
+        // walks — hence the same winner on a repeated id.
+        const map = new Map();
+        for (const [key, spec] of realEntries) {
+            map.set(spec.id, byInstance.get(key) ?? 0);
+        }
+        return map;
+    }, [realEntries, axisSlots]);
+    // Each axis's own ink (`<YAxis color>`) — the axis-edge pill that lands on an
+    // axis wears its colour, so with several axes the number says which scale it
+    // is on. Axes that set no colour are absent (the pill falls back to theme).
+    const axisColors = useMemo(() => {
+        const map = new Map();
+        for (const ax of effectiveAxes) {
+            if (ax.color !== undefined)
+                map.set(ax.id, ax.color);
+        }
+        return map;
+    }, [effectiveAxes]);
     const frame = useMemo(() => ({
         height,
         topInset: topHeader,
@@ -458,10 +630,15 @@ export function ChartRow({ height, cursor, children }) {
         isFirstRow,
         rowKey,
         yScales,
+        baseYScales: baseRef.current,
+        axisTransforms,
+        applyAxisTransform,
         formats,
         tickValues,
         tickCounts,
         axisSides,
+        axisOffsets,
+        axisColors,
         defaultAxisId,
         axisSlots,
         registerAxis,
@@ -476,10 +653,14 @@ export function ChartRow({ height, cursor, children }) {
         isFirstRow,
         rowKey,
         yScales,
+        axisTransforms,
+        applyAxisTransform,
         formats,
         tickValues,
         tickCounts,
         axisSides,
+        axisOffsets,
+        axisColors,
         defaultAxisId,
         axisSlots,
         registerAxis,
@@ -556,11 +737,17 @@ export function ChartRow({ height, cursor, children }) {
             "wrap the row's <Layers>, leaving each <YAxis> a direct child of the " +
             '<ChartRow>.');
     }, [axisInsideWrapper]);
-    return (_jsxs(RowContext.Provider, { value: frame, children: [cursor !== undefined && (_jsx(LegacyCursor, { mode: cursor, showTime: container.cursorTime, snap: container.crosshairSnap })), _jsxs("div", { style: {
+    return (_jsxs(RowContext.Provider, { value: frame, children: [cursor !== undefined && (_jsx(LegacyCursor, { mode: cursor, showTime: container.cursorTime, snap: container.crosshairSnap })), _jsxs("div", { ref: boxRef, style: {
                     display: 'flex',
                     flexDirection: 'row',
                     width: `${container.width}px`,
-                    height: `${height}px`,
+                    // Fixed rows keep their pixels; a flex row is sized by the
+                    // container's column layout and reads the result back
+                    // ([PND-HEIGHT]). `minHeight: 0` is what lets it actually shrink —
+                    // a flex child's default min-height is its content.
+                    ...(isFlex
+                        ? { flex: `${flexGrow} 1 0%`, minHeight: 0 }
+                        : { height: `${height}px` }),
                 }, children: [leftPad > 0 && _jsx("div", { style: { flex: `0 0 ${leftPad}px` } }), leftAxisEls, plotEls, rightAxisEls, rightPad > 0 && _jsx("div", { style: { flex: `0 0 ${rightPad}px` } })] })] }));
 }
 //# sourceMappingURL=ChartRow.js.map