@pond-ts/charts 0.50.0 → 0.51.0

package/dist/Layers.js

@@ -6,7 +6,7 @@ import { cursorParts, bandRect, regionSpan } from './tracker.js';
 import { resolveSelection } from './select.js';
 import { panRange, zoomRange, panRangeTrading, zoomRangeTrading, } from './viewport.js';
 import { flagChipStyle, flagChipX, axisPillX, axisPillStyle } from './chip.js';
-import { ContainerContext, LayersContext, RowContext, } from './context.js';
+import { ContainerContext, CursorContext, LayersContext, RowContext, } from './context.js';
 /** Fallback **y**-gridline tick count, used only before the row publishes its
  *  resolved `tickCounts` (pre-registration). Normally the gridlines read the
  *  default axis's resolved count from `row.tickCounts` — the same value the
@@ -69,6 +69,9 @@ export function Layers({ children }) {
     if (container === null) {
         throw new Error('<Layers> must be rendered inside a <ChartContainer>');
     }
+    // Per-move cursor state (own context, so this overlay re-renders on hover
+    // without re-identifying the container frame — [PND-HOVCTX]).
+    const cursor = useContext(CursorContext);
     const row = useContext(RowContext);
     if (row === null) {
         throw new Error('<Layers> must be rendered inside a <ChartRow>');
@@ -204,11 +207,40 @@ export function Layers({ children }) {
                 drawDividers(ctx, thinPixels(bx, MIN_DIVIDER_PX), h, dividerColor);
             }
         }
-        for (const entry of layers) {
-            const yScale = yScales.get(entry.axisId ?? defaultAxisId);
-            if (yScale === undefined)
-                continue;
-            entry.layer.draw(ctx, xScale, yScale);
+        // Draw the layers. When a draw-stats consumer is subscribed
+        // (`reportDrawStats` defined), time each layer and collect its reported
+        // {@link LayerDrawStats}; otherwise the plain loop with zero timing
+        // overhead. Fires one {@link DrawStatsFrame} per repaint of THIS row.
+        const report = container.reportDrawStats;
+        if (report === undefined) {
+            for (const entry of layers) {
+                const yScale = yScales.get(entry.axisId ?? defaultAxisId);
+                if (yScale === undefined)
+                    continue;
+                entry.layer.draw(ctx, xScale, yScale);
+            }
+        }
+        else {
+            const infos = [];
+            let totalDrawMs = 0;
+            for (const entry of layers) {
+                const yScale = yScales.get(entry.axisId ?? defaultAxisId);
+                if (yScale === undefined)
+                    continue;
+                const t0 = performance.now();
+                const stats = entry.layer.draw(ctx, xScale, yScale);
+                const drawMs = performance.now() - t0;
+                totalDrawMs += drawMs;
+                infos.push({
+                    as: entry.layer.as,
+                    index: entry.index,
+                    drawMs,
+                    sourceCount: stats?.sourceCount,
+                    drawnCount: stats?.drawnCount,
+                    decimated: stats?.decimated,
+                });
+            }
+            report({ rowKey: row.rowKey, layers: infos, totalDrawMs });
         }
     }, [
         layers,
@@ -222,7 +254,13 @@ export function Layers({ children }) {
         gridColor,
         gridDash,
         container.discontinuities,
+        // Identity-stable across cursor moves (memoized tuple in ChartContainer;
+        // e2e `hover sweep never repaints the data canvas` pins this). A fresh
+        // array per frame rebuild here would re-fire the Canvas draw effect —
+        // a full replot per mousemove.
         container.timeRange,
+        container.reportDrawStats,
+        row.rowKey,
     ]);
     // Interaction overlay: the cursor marks live on a DOM/SVG overlay above the
     // data, so hovering never repaints the data canvas (whose `draw` doesn't depend
@@ -230,7 +268,8 @@ export function Layers({ children }) {
     // pointer is over — syncs the cursor across every row for free. cursorX is a
     // *pixel*, so it stays put while a live window slides; the time + values under
     // it derive from the current xScale.
-    const { cursorX, cursorTime: showCursorTime, formatTime } = container;
+    const { cursorTime: showCursorTime, formatTime } = container;
+    const { cursorX } = cursor;
     // Cursor mode: the row's override, else the container default. One mode per
     // row (the synced vertical line is shared across rows); each layer renders the
     // mode in its own way. `parts` decomposes it into {line, dots, chip}.
@@ -392,7 +431,7 @@ export function Layers({ children }) {
         if (c.cursor === 'region' &&
             c.onRegionSelect &&
             (c.xKind === 'time' || c.xKind === 'value')) {
-            const needsShift = c.regionSelectModifier === 'shift' && c.panZoom;
+            const needsShift = c.regionSelectModifier === 'shift' && c.panEnabled;
             if (!needsShift || e.shiftKey) {
                 const px = Math.max(0, Math.min(c.plotWidth, e.clientX - e.currentTarget.getBoundingClientRect().left));
                 regionAnchorRef.current = +c.xScale.invert(px);
@@ -408,7 +447,7 @@ export function Layers({ children }) {
             }
             // Modifier required but not held → fall through to pan.
         }
-        if (!c.panZoom || c.xKind === 'category')
+        if (!c.panEnabled || c.xKind === 'category')
             return;
         const r = c.timeRange;
         // Arm a potential pan: record the anchor, but DON'T capture the pointer or
@@ -663,7 +702,7 @@ export function Layers({ children }) {
             return;
         const onWheel = (e) => {
             const c = containerRef.current;
-            if (!c.panZoom || c.xKind === 'category')
+            if (!c.zoomEnabled || c.xKind === 'category')
                 return;
             e.preventDefault();
             const rect = el.getBoundingClientRect();
@@ -724,14 +763,14 @@ export function Layers({ children }) {
     const reticle = (() => {
         if (parts.chip !== 'axis' || !cursorInBounds)
             return null;
-        const hoveredRow = container.cursorRowKey === row.rowKey;
-        const cy = container.cursorY;
+        const hoveredRow = cursor.cursorRowKey === row.rowKey;
+        const cy = cursor.cursorY;
         if (container.crosshairSnap) {
             if (trackerSamples.length === 0)
                 return null;
             const pick = hoveredRow && cy !== null
                 ? trackerSamples.reduce((a, b) => Math.abs(b.py - cy) < Math.abs(a.py - cy) ? b : a)
-                : container.cursorRowKey === null
+                : cursor.cursorRowKey === null
                     ? trackerSamples[0]
                     : null;
             return pick
@@ -824,7 +863,7 @@ export function Layers({ children }) {
                     ? `inset 0 0 0 1px ${guideColor}`
                     : undefined,
                 // Let pan/zoom own touch gestures (no native scroll) when enabled.
-                touchAction: container.panZoom ? 'none' : 'auto',
+                touchAction: container.panEnabled || container.zoomEnabled ? 'none' : 'auto',
             }, onPointerMove: handlePointerMove, onPointerDown: handlePointerDown, onPointerUp: handlePointerUp, onPointerCancel: handlePointerUp, onPointerLeave: handlePointerLeave, onClick: handleClick, children: [_jsx(Canvas, { width: plotWidth, height: row.height, draw: draw }), guideXs.length > 0 && (_jsx("svg", { width: plotWidth, height: row.height, style: {
                         position: 'absolute',
                         top: 0,

package/dist/Legend.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useContext } from 'react';
-import { ContainerContext, RowContext } from './context.js';
+import { ContainerContext, CursorContext, RowContext } from './context.js';
 import { buildChartLegend } from './useChartLegend.js';
 import { defaultTheme } from './theme.js';
 /** One 20×12 swatch glyph, drawn from the layer's resolved style. */
@@ -83,6 +83,7 @@ function placementStyle(placement, leftGutter, rightGutter) {
  */
 export function Legend({ placement = 'top-right', items, onRowClick, onRowHover, theme: themeProp, }) {
     const container = useContext(ContainerContext);
+    const cursor = useContext(CursorContext);
     if (container === null && items === undefined) {
         throw new Error('<Legend> must be inside a <ChartContainer> (or be given explicit `items`)');
     }
@@ -99,7 +100,9 @@ export function Legend({ placement = 'top-right', items, onRowClick, onRowHover,
     // The shared headless core (also `useChartLegend`'s) — rows + the id-gated
     // hover/select verbs — so the built-in card and a custom-rendered legend
     // can never disagree. `null` in standalone `items` mode (no chart to sync).
-    const legend = container !== null ? buildChartLegend(container, row?.rowKey) : null;
+    const legend = container !== null
+        ? buildChartLegend(container, cursor, row?.rowKey)
+        : null;
     // The card renders a flat item list — `rows` is grouped by chart row, so
     // flatten it (a scoped legend has one group anyway).
     const entries = items ?? legend.rows.flatMap((r) => r.items);

package/dist/LineChart.js

@@ -50,6 +50,7 @@ export function LineChart({ series, column, as: semantic, axis, curve, gaps = DE
     }, [sessionBreaks, container.discontinuities, cs]);
     const entry = useMemo(() => ({
         layer: {
+            as: semantic,
             yExtent: () => yExtent(cs),
             // The container infers the shared x scale's kind + auto-fit domain from
             // its layers: a ValueSeries plots on a value axis, a TimeSeries on time.

package/dist/ScatterChart.js

@@ -95,6 +95,7 @@ export function ScatterChart({ series, column, as: semantic, id, axis, radius, c
     const keyAt = useMemo(() => (i) => cs.x[i], [cs]);
     const entry = useMemo(() => ({
         layer: {
+            as: semantic,
             yExtent: () => scatterExtent(cs),
             // The container infers the shared x scale's kind + auto-fit domain from
             // its layers: a ValueSeries scatters on a value axis, a TimeSeries on time.

package/dist/XAxis.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment, useContext } from 'react';
 import { scaleLinear } from 'd3-scale';
 import { derivedTicks } from './derivedTicks.js';
-import { ContainerContext } from './context.js';
+import { ContainerContext, CursorContext } from './context.js';
 import { axisPillStyle } from './chip.js';
 import { resolveAxisFormat, resolveTimeFormat, } from './format.js';
 /** Tick strip height (mark + value label) in CSS px. */
@@ -60,6 +60,7 @@ export function XAxis({ format, label, side = 'bottom', height, ticks: customTic
     if (container === null) {
         throw new Error('<XAxis> must be rendered inside a <ChartContainer>');
     }
+    const cursor = useContext(CursorContext);
     // `xTickCount` is the container's shared x-side count — the same value the x
     // gridlines and `formatTime` use, so labels and grid stay on the same instants
     // (width-derived on a trading-time axis).
@@ -68,7 +69,7 @@ export function XAxis({ format, label, side = 'bottom', height, ticks: customTic
     // cursor is live in-bounds, pin the hovered time to this axis (covering the
     // tick behind it), matching the on-axis y value pills the rows draw. Gated on
     // the container default, so a per-row `cursor` override doesn't reach here.
-    const cursorX = container.cursorX;
+    const cursorX = cursor.cursorX;
     const showCursorTag = container.cursor === 'crosshair' &&
         cursorX !== null &&
         cursorX >= 0 &&

package/dist/affine.d.ts

@@ -0,0 +1,41 @@
+/**
+ * Affine-scale fast path (charts perf, [PND-AFFINE]). A chart's continuous
+ * scales — `scaleLinear` (value axis, every y axis), `scaleTime`, and the
+ * **gap-free** `scaleTradingTime(identityProvider())` (the default continuous
+ * time axis) — map data→pixels by a single `px = k·v + b`. The per-point draw
+ * loops in `drawLine` / `drawArea` can then multiply-add inline over the typed
+ * arrays instead of paying a d3-scale closure call (deinterpolate → interpolate)
+ * per point — the ~37% of stroke-bound frame self-time the 2026-07 external
+ * bench profile attributed to `scale()` (see
+ * `docs/notes/charts-bench-vs-scichart-suite-2026-07.md`, finding 1).
+ *
+ * The affine coefficients are recovered from the scale's own domain/range
+ * endpoints, then **verified affine** by probing interior points: a scale that
+ * deviates (a `scaleTradingTime` with *collapsed* gaps, or a future
+ * log/pow/sqrt axis) is rejected — the caller falls back to the exact d3-scale
+ * path — while a genuinely affine scale (including a gap-free trading axis) is
+ * accepted and reproduced to floating-point precision. The verification is what
+ * keeps the fast path a pure optimization: it never draws a non-affine scale as
+ * a straight line.
+ */
+import type { Scale } from './line.js';
+/** Coefficients of an affine pixel map `px = k·value + b`. */
+export interface Affine {
+    readonly k: number;
+    readonly b: number;
+}
+/**
+ * The affine coefficients `{ k, b }` with `scale(v) === k·v + b` for all `v`, or
+ * `null` when the scale is not affine over its domain (a real-gap
+ * `scaleTradingTime`, a non-linear axis) or exposes no numeric domain/range (a
+ * bare `(v) => v` test stub, a `scaleBand` category axis). `null` ⇒ the caller
+ * keeps the d3-scale path.
+ *
+ * Recovered from the domain/range endpoints (`k` from the two extremes, `b`
+ * pinning the low end), then verified at {@link PROBE_FRACTIONS}. Every probe
+ * must map finite and within {@link PROBE_EPSILON} of the reconstruction — so a
+ * scale that returns non-numbers for an interior value (a `scaleBand`) or bends
+ * away from the endpoint line (trading gaps, log) is rejected.
+ */
+export declare function affineOf(scale: Scale): Affine | null;
+//# sourceMappingURL=affine.d.ts.map

package/dist/affine.js

@@ -0,0 +1,77 @@
+/**
+ * Affine-scale fast path (charts perf, [PND-AFFINE]). A chart's continuous
+ * scales — `scaleLinear` (value axis, every y axis), `scaleTime`, and the
+ * **gap-free** `scaleTradingTime(identityProvider())` (the default continuous
+ * time axis) — map data→pixels by a single `px = k·v + b`. The per-point draw
+ * loops in `drawLine` / `drawArea` can then multiply-add inline over the typed
+ * arrays instead of paying a d3-scale closure call (deinterpolate → interpolate)
+ * per point — the ~37% of stroke-bound frame self-time the 2026-07 external
+ * bench profile attributed to `scale()` (see
+ * `docs/notes/charts-bench-vs-scichart-suite-2026-07.md`, finding 1).
+ *
+ * The affine coefficients are recovered from the scale's own domain/range
+ * endpoints, then **verified affine** by probing interior points: a scale that
+ * deviates (a `scaleTradingTime` with *collapsed* gaps, or a future
+ * log/pow/sqrt axis) is rejected — the caller falls back to the exact d3-scale
+ * path — while a genuinely affine scale (including a gap-free trading axis) is
+ * accepted and reproduced to floating-point precision. The verification is what
+ * keeps the fast path a pure optimization: it never draws a non-affine scale as
+ * a straight line.
+ */
+/**
+ * Irregular interior sample fractions for the affinity probe. Deliberately not
+ * `[0.25, 0.5, 0.75]` — a piecewise-linear scale (trading time) can have
+ * breakpoints that a symmetric, round-fraction probe set slips between; the
+ * jittered spread makes a false "affine" verdict on a real-gap scale
+ * astronomically unlikely (and the e2e visual-regression layer is the backstop,
+ * the same net that guards M4).
+ */
+const PROBE_FRACTIONS = [0.1213, 0.2857, 0.4391, 0.6137, 0.7649, 0.8831];
+/**
+ * Pixel tolerance for the affinity probe. Far below a sub-pixel (so a real
+ * non-affine deviation — a collapsed trading gap or a log curve is many pixels)
+ * yet far above the float-reconstruction noise of `k·v + b` on wide domains
+ * (~1e-9 px), so an exactly-affine scale is never rejected.
+ */
+const PROBE_EPSILON = 1e-3;
+/**
+ * The affine coefficients `{ k, b }` with `scale(v) === k·v + b` for all `v`, or
+ * `null` when the scale is not affine over its domain (a real-gap
+ * `scaleTradingTime`, a non-linear axis) or exposes no numeric domain/range (a
+ * bare `(v) => v` test stub, a `scaleBand` category axis). `null` ⇒ the caller
+ * keeps the d3-scale path.
+ *
+ * Recovered from the domain/range endpoints (`k` from the two extremes, `b`
+ * pinning the low end), then verified at {@link PROBE_FRACTIONS}. Every probe
+ * must map finite and within {@link PROBE_EPSILON} of the reconstruction — so a
+ * scale that returns non-numbers for an interior value (a `scaleBand`) or bends
+ * away from the endpoint line (trading gaps, log) is rejected.
+ */
+export function affineOf(scale) {
+    const s = scale;
+    const d = s.domain?.();
+    const r = s.range?.();
+    if (d === undefined || r === undefined || d.length < 2 || r.length < 2) {
+        return null;
+    }
+    const lo = +d[0];
+    const hi = +d[d.length - 1];
+    if (!Number.isFinite(lo) || !Number.isFinite(hi) || lo === hi)
+        return null;
+    const pLo = scale(lo);
+    const pHi = scale(hi);
+    if (!Number.isFinite(pLo) || !Number.isFinite(pHi))
+        return null;
+    const k = (pHi - pLo) / (hi - lo);
+    const b = pLo - k * lo;
+    const span = hi - lo;
+    for (const t of PROBE_FRACTIONS) {
+        const v = lo + t * span;
+        const p = scale(v);
+        if (!Number.isFinite(p) || Math.abs(p - (k * v + b)) > PROBE_EPSILON) {
+            return null;
+        }
+    }
+    return { k, b };
+}
+//# sourceMappingURL=affine.js.map

package/dist/area.d.ts

@@ -1,9 +1,27 @@
 import { type CurveFactory } from 'd3-shape';
 import type { ChartSeries } from './data.js';
-import type { Scale } from './line.js';
+import { type Scale } from './line.js';
 import type { AreaStyle } from './theme.js';
+import type { LayerDrawStats } from './context.js';
 import { type GapMode } from './gaps.js';
 import { type DecimateOption } from './decimate.js';
+import { type Affine } from './affine.js';
+export declare function columnFiniteExtent(y: Float64Array, length: number): readonly [number, number] | null;
+/**
+ * Fill the area between an affine-mapped value polyline and a constant baseline
+ * pixel — the [PND-AFFINE] fast path for {@link drawArea}'s fill, the counterpart
+ * to {@link strokeAffinePolyline} for its outline. Emits one **independent closed
+ * polygon per finite run** (matching `d3.area`'s `.defined(Number.isFinite)`
+ * segmentation for a linear curve + constant `y0`): per run `[a, b)`,
+ * `moveTo(top_a)` → `lineTo(top…)` along the value edge → `lineTo(x_{b-1}, base)`
+ * → `lineTo(x_a, base)` → `closePath`. That is the same filled region `d3.area`
+ * draws — its flat backward baseline edge only adds collinear interior vertices,
+ * which don't change the fill — without the per-point `scale()` / d3-shape
+ * closures. A signed value edge crossing the baseline stays one polygon (no NaN),
+ * filled correctly on both sides. The caller brackets `beginPath`/`fill`;
+ * `xs`/`ys` are aligned index-for-index.
+ */
+export declare function fillAffineArea(ctx: CanvasRenderingContext2D, xs: Float64Array, ys: Float64Array, baselinePx: number, ax: Affine, ay: Affine): void;
 /**
  * The `[min, max]` vertical extent an area occupies — the finite values of
  * `cs.y` widened to include `baseline`, since the fill spans from each value to
@@ -51,5 +69,5 @@ export declare function areaExtent(cs: ChartSeries, baseline: number | undefined
  * bracketed by `save`/`restore` so they don't leak into later layers. Gap edges
  * are collected by one O(N) walk ({@link collectGapEdges}).
  */
-export declare function drawArea(ctx: CanvasRenderingContext2D, cs: ChartSeries, xScale: Scale, yScale: Scale, style: AreaStyle, baselineValue: number, curve?: CurveFactory, gaps?: GapMode, gapConnectorOpacity?: number, decimate?: DecimateOption): void;
+export declare function drawArea(ctx: CanvasRenderingContext2D, cs: ChartSeries, xScale: Scale, yScale: Scale, style: AreaStyle, baselineValue: number, curve?: CurveFactory, gaps?: GapMode, gapConnectorOpacity?: number, decimate?: DecimateOption): LayerDrawStats;
 //# sourceMappingURL=area.d.ts.map

package/dist/area.js

@@ -1,7 +1,90 @@
 import { area as d3area, curveLinear } from 'd3-shape';
+import { strokeAffinePolyline } from './line.js';
 import { bridgeGaps, collectGapEdges, drawGapBridges, drawGapFades, drawGapSteps, withAlpha, DEFAULT_GAP_MODE, DEFAULT_GAP_CONNECTOR_OPACITY, } from './gaps.js';
 import { cullChartSeries } from './culling.js';
-import { decimateM4 } from './decimate.js';
+import { decimateM4Cached } from './decimate.js';
+import { affineOf } from './affine.js';
+/**
+ * Per-buffer cache of a column's finite `[min, max]` value extent ([PND-GRADX]).
+ * The area fill gradient spans the **full** series' vertical pixel extent (so a
+ * culled/zoomed view still shades identically — see {@link buildGradient}), which
+ * previously meant an O(N) min/max walk on **every** repaint, including each
+ * y-zoom / y-autorange frame where the data hasn't changed (the 2026-07 bench
+ * profile's mountain@1M ceiling; see
+ * `docs/notes/charts-bench-vs-scichart-suite-2026-07.md`, finding 2).
+ *
+ * The extent is a pure function of the value buffer, so it is memoized on the
+ * `y` `Float64Array` (immutable by the {@link ChartSeries} contract): a y-zoom /
+ * pan reuses the same buffer → cache hit (no walk); a live re-materialization
+ * mints a new buffer → recompute once. The `WeakMap` evicts with the buffer, so
+ * there is no leak. Callers pass the full-series `length` (the buffer's logical
+ * length); a `subarray` view is never the cache key here (the gradient reads the
+ * pre-cull full series).
+ *
+ * NaN (the gap signal) is ignored — matching {@link areaExtent} / `yExtent` — so
+ * a coast doesn't drag the span. `null` when nothing is finite (the caller then
+ * falls back to a flat fill).
+ */
+const columnExtentCache = new WeakMap();
+export function columnFiniteExtent(y, length) {
+    const cached = columnExtentCache.get(y);
+    if (cached !== undefined)
+        return cached;
+    let min = Infinity;
+    let max = -Infinity;
+    for (let i = 0; i < length; i += 1) {
+        const v = y[i];
+        if (Number.isFinite(v)) {
+            if (v < min)
+                min = v;
+            if (v > max)
+                max = v;
+        }
+    }
+    const extent = min === Infinity ? null : [min, max];
+    columnExtentCache.set(y, extent);
+    return extent;
+}
+/**
+ * Fill the area between an affine-mapped value polyline and a constant baseline
+ * pixel — the [PND-AFFINE] fast path for {@link drawArea}'s fill, the counterpart
+ * to {@link strokeAffinePolyline} for its outline. Emits one **independent closed
+ * polygon per finite run** (matching `d3.area`'s `.defined(Number.isFinite)`
+ * segmentation for a linear curve + constant `y0`): per run `[a, b)`,
+ * `moveTo(top_a)` → `lineTo(top…)` along the value edge → `lineTo(x_{b-1}, base)`
+ * → `lineTo(x_a, base)` → `closePath`. That is the same filled region `d3.area`
+ * draws — its flat backward baseline edge only adds collinear interior vertices,
+ * which don't change the fill — without the per-point `scale()` / d3-shape
+ * closures. A signed value edge crossing the baseline stays one polygon (no NaN),
+ * filled correctly on both sides. The caller brackets `beginPath`/`fill`;
+ * `xs`/`ys` are aligned index-for-index.
+ */
+export function fillAffineArea(ctx, xs, ys, baselinePx, ax, ay) {
+    const n = ys.length;
+    let runStart = -1; // index of the current finite run's first point, or -1
+    for (let j = 0; j <= n; j += 1) {
+        const finite = j < n && Number.isFinite(ys[j]);
+        if (finite) {
+            const px = ax.k * xs[j] + ax.b;
+            const py = ay.k * ys[j] + ay.b;
+            if (runStart < 0) {
+                runStart = j;
+                ctx.moveTo(px, py);
+            }
+            else {
+                ctx.lineTo(px, py);
+            }
+        }
+        else if (runStart >= 0) {
+            // Close the run: drop to the baseline under the last point, run flat back
+            // to the first point's x, close. (j-1 is the run's last finite index.)
+            ctx.lineTo(ax.k * xs[j - 1] + ax.b, baselinePx);
+            ctx.lineTo(ax.k * xs[runStart] + ax.b, baselinePx);
+            ctx.closePath();
+            runStart = -1;
+        }
+    }
+}
 /**
  * The `[min, max]` vertical extent an area occupies — the finite values of
  * `cs.y` widened to include `baseline`, since the fill spans from each value to
@@ -73,41 +156,51 @@ export function areaExtent(cs, baseline) {
  * are collected by one O(N) walk ({@link collectGapEdges}).
  */
 export function drawArea(ctx, cs, xScale, yScale, style, baselineValue, curve = curveLinear, gaps = DEFAULT_GAP_MODE, gapConnectorOpacity = DEFAULT_GAP_CONNECTOR_OPACITY, decimate = true) {
+    const sourceCount = cs.length; // pre-cull, pre-decimation (for draw stats)
     const baselinePx = yScale(baselineValue);
     // The fill gradient's vertical extent is computed from the **full** series (a
     // vertical, position-anchored gradient spanning the data's whole pixel extent)
     // so viewport culling stays behavior-neutral: the culled path below paints the
-    // exact same visible pixels under the same gradient. This is a cheap O(N)
-    // min/max scan; the expensive per-point path work (fill + outline) culls. (Cull
-    // the region too and the shade would drift under pan as off-screen extrema
-    // enter/leave — a visible change culling must not make.)
-    const fullYs = gaps === 'none' ? bridgeGaps(cs.y, cs.length) : cs.y;
-    const fill = buildGradient(ctx, fullYs, cs.length, yScale, baselinePx, style);
-    // Viewport culling (Phase 2): the path, outline, and gap bridges walk the
-    // visible slice (+1 entry/exit point) only. A no-op — the same `cs` back — when
-    // fully in view or `xScale` has no domain (a test stub), keeping that hot path
-    // byte-identical.
-    cs = cullChartSeries(cs, xScale);
-    // M4 decimation (Phase 3): the outline is a line, so the same {@link decimateM4}
-    // pre-pass shrinks the fill + outline + gap-bridge work to O(plot width) once
-    // dense — with the §2.2 gap-edge union so every gap mode composes. The gradient
-    // above is over the FULL series, so the decimated fill paints identical pixels
-    // under it. Gated off a smoothing `curve`; a no-op on a sparse slice / test scale.
+    // exact same visible pixels under the same gradient. (Cull the region too and
+    // the shade would drift under pan as off-screen extrema enter/leave — a visible
+    // change culling must not make.) [PND-GRADX]: the value extent is memoized per
+    // column buffer ({@link columnFiniteExtent}), so a y-zoom / pan frame reuses it
+    // instead of re-walking O(N) — the mountain@1M ceiling the bench profile
+    // flagged. A `'none'` bridge only fills interior gaps with interpolated values
+    // that stay within the finite extent, so the plain extent is exact for it too.
+    const fill = buildGradient(ctx, columnFiniteExtent(cs.y, cs.length), yScale, baselinePx, style);
+    // Clip `cs` to what draws. **Decimated** (linear curve, `decimate !== false`):
+    // cull to the visible slice, then the same {@link decimateM4} pre-pass shrinks
+    // the fill + outline + gap-bridge work to O(plot width) once dense (the §2.2
+    // gap-edge union so every gap mode composes; the FULL-series gradient above
+    // paints identical pixels under the decimated fill). Cull + decimate are
+    // **memoized per source** ({@link decimateM4Cached}) so a y-zoom / y-autorange
+    // frame reuses the prior polyline instead of re-binning O(N) — the decimation
+    // output never reads the y-scale (finding 3). **Full-resolution** (a smoothing
+    // curve, or `decimate === false`): just cull the visible slice (+1 entry/exit
+    // point); a no-op — the same `cs` back — when fully in view or `xScale` has no
+    // domain (a test stub), keeping that hot path byte-identical.
+    const source = cs; // pre-cull source — the decimation cache key ([PND-DECKEY])
+    let decimated = false;
     if (decimate !== false && curve === curveLinear) {
         const k = typeof decimate === 'object' ? decimate.threshold : undefined;
-        cs = decimateM4(cs, xScale, ctx, k);
+        const r = decimateM4Cached(source, xScale, ctx, k);
+        cs = r.series;
+        decimated = r.decimated;
+    }
+    else {
+        cs = cullChartSeries(source, xScale);
     }
     // `none` interpolates interior gaps so the fill + outline bridge them; every
     // other mode keeps NaN so d3 breaks both (the inferred line bridge, if any, is
     // a separate overlay pass below).
     const ys = gaps === 'none' ? bridgeGaps(cs.y, cs.length) : cs.y;
-    const gen = d3area()
-        .defined((v) => Number.isFinite(v))
-        .x((_, i) => xScale(cs.x[i]))
-        .y0(() => baselinePx)
-        .y1((v) => yScale(v))
-        .curve(curve)
-        .context(ctx);
+    // [PND-AFFINE] fast path: with a linear curve and both scales affine, draw the
+    // fill polygon + outline with inline multiply-add over the typed arrays, past
+    // the per-point d3-scale + d3-shape closures (finding 1/2). A smoothing curve
+    // or a non-affine (real-gap trading) x scale keeps the exact d3-area path.
+    const ax = curve === curveLinear ? affineOf(xScale) : null;
+    const ay = ax !== null ? affineOf(yScale) : null;
     ctx.save();
     // The fill: a vertical gradient anchored at the baseline pixel, opaque at the
     // line and transparent at the baseline (see buildGradient — handles both the
@@ -116,16 +209,32 @@ export function drawArea(ctx, cs, xScale, yScale, style, baselineValue, curve =
     ctx.fillStyle = fill;
     ctx.globalAlpha = style.fillOpacity;
     ctx.beginPath();
-    gen(ys);
+    // The d3-area generator (slow path only) — also the source of the outline line.
+    let outline = null;
+    if (ax !== null && ay !== null) {
+        fillAffineArea(ctx, cs.x, ys, baselinePx, ax, ay);
+    }
+    else {
+        const gen = d3area()
+            .defined((v) => Number.isFinite(v))
+            .x((_, i) => xScale(cs.x[i]))
+            .y0(() => baselinePx)
+            .y1((v) => yScale(v))
+            .curve(curve)
+            .context(ctx);
+        gen(ys);
+        outline = gen.lineY1();
+    }
     ctx.fill();
     ctx.restore();
-    // The outline on top: the area's top edge as a line (`lineY1` inherits the
-    // area's `defined`, `curve`, and `context`, so it breaks at the same gaps),
-    // at full opacity over the graded fill.
-    const outline = gen.lineY1();
+    // The outline on top: the area's top edge as a line (breaks at the same gaps
+    // as the fill), at full opacity over the graded fill.
     ctx.save();
     ctx.beginPath();
-    outline(ys);
+    if (outline !== null)
+        outline(ys);
+    else
+        strokeAffinePolyline(ctx, cs.x, ys, ax, ay);
     ctx.strokeStyle = style.color;
     ctx.lineWidth = style.width;
     ctx.stroke();
@@ -145,6 +254,7 @@ export function drawArea(ctx, cs, xScale, yScale, style, baselineValue, curve =
             drawGapFades(ctx, edges, baselinePx, style.color, style.width);
         }
     }
+    return { sourceCount, drawnCount: cs.length, decimated };
 }
 /**
  * A vertical `CanvasGradient` for the fill, spanning the drawn region's pixel
@@ -164,21 +274,17 @@ export function drawArea(ctx, cs, xScale, yScale, style, baselineValue, curve =
  * finite point, or values exactly on the baseline) — a zero-height gradient
  * would paint nothing.
  */
-function buildGradient(ctx, ys, length, yScale, baselinePx, style) {
-    let topPx = Infinity; // smallest pixel y (highest on screen)
-    let bottomPx = -Infinity; // largest pixel y (lowest on screen)
-    for (let i = 0; i < length; i += 1) {
-        const v = ys[i];
-        if (!Number.isFinite(v))
-            continue;
-        const py = yScale(v);
-        if (py < topPx)
-            topPx = py;
-        if (py > bottomPx)
-            bottomPx = py;
-    }
-    if (topPx === Infinity)
+function buildGradient(ctx, valueExtent, yScale, baselinePx, style) {
+    if (valueExtent === null)
         return style.fill; // no finite values (caller no-ops)
+    // The pixel extent is the two value extremes mapped through the (monotonic,
+    // always-`scaleLinear`) y scale; min/max them so the result is flip-agnostic,
+    // exactly as the former per-point pixel scan produced. [PND-GRADX] moved the
+    // O(N) walk into the memoized {@link columnFiniteExtent}.
+    const pa = yScale(valueExtent[0]);
+    const pb = yScale(valueExtent[1]);
+    const topPx = Math.min(pa, pb); // smallest pixel y (highest on screen)
+    const bottomPx = Math.max(pa, pb); // largest pixel y (lowest on screen)
     // The drawn region runs from the topmost of {values, baseline} to the
     // bottommost — the fill reaches the baseline, so include it.
     const regionTop = Math.min(topPx, baselinePx);

package/dist/band.d.ts

@@ -2,6 +2,7 @@ import { type CurveFactory } from 'd3-shape';
 import type { BandSeries } from './data.js';
 import type { Scale } from './line.js';
 import type { BandStyle } from './theme.js';
+import type { LayerDrawStats } from './context.js';
 import { type DecimateOption } from './decimate.js';
 /**
  * The `[min, max]` vertical extent of the **drawn** band — the lowest `lower`
@@ -28,5 +29,5 @@ export declare function bandExtent(band: BandSeries): [number, number] | null;
  * index, so there's no per-point object allocation. `globalAlpha` carries the
  * opacity and is restored so it doesn't leak into later layers.
  */
-export declare function drawBand(ctx: CanvasRenderingContext2D, band: BandSeries, xScale: Scale, yScale: Scale, style: BandStyle, curve?: CurveFactory, decimate?: DecimateOption): void;
+export declare function drawBand(ctx: CanvasRenderingContext2D, band: BandSeries, xScale: Scale, yScale: Scale, style: BandStyle, curve?: CurveFactory, decimate?: DecimateOption): LayerDrawStats;
 //# sourceMappingURL=band.d.ts.map