@pond-ts/charts 0.49.0 → 0.51.0

package/dist/ChartContainer.js

@@ -4,10 +4,11 @@ import { scaleLinear } from 'd3-scale';
 import { identityProvider, scaleTradingTime, } from './tradingTimeScale.js';
 import { scaleBand } from './bandScale.js';
 import { Sequence } from 'pond-ts';
-import { ContainerContext, } from './context.js';
+import { ContainerContext, CursorContext, } from './context.js';
 import { maxSlotWidths, sum } from './slots.js';
 import { computeLabelLanes } from './annotations.js';
 import { resolveCursorX, DEFAULT_CURSOR_MODE } from './tracker.js';
+import { clampToBounds } from './viewport.js';
 import { resolveAxisFormat, resolveTimeFormat, } from './format.js';
 import { TimeAxis } from './TimeAxis.js';
 import { defaultTheme } from './theme.js';
@@ -43,7 +44,15 @@ function normalizeRange(range) {
  * {@link TimeAxis} at the bottom, aligned under the plots. Y axes are per-row
  * (`<YAxis>`).
  */
-export function ChartContainer({ range, width, rowGap = 0, showAxis = true, trackerPosition, onTrackerChanged, selected, onSelect, hovered, onHover, panZoom = false, onTimeRangeChange, minDuration = 1, cursor = DEFAULT_CURSOR_MODE, cursorSequence, onRegionSelect, regionSelectModifier, cursorTime = false, crosshairSnap = true, editAnnotations = false, creating = null, onCreate, onSelectAnnotation, onHoverAnnotation, onEditAnnotation, snap = true, timeFormat, cursorFormat, theme, discontinuities, calendar, spacing, grid = true, sessionDividers = 'none', children, }) {
+export function ChartContainer({ range, width, rowGap = 0, showAxis = true, trackerPosition, onTrackerChanged, onDrawStats, selected, onSelect, hovered, onHover, panZoom = false, bounds, onTimeRangeChange, minDuration = 1, cursor = DEFAULT_CURSOR_MODE, cursorSequence, onRegionSelect, regionSelectModifier, cursorTime = false, crosshairSnap = true, editAnnotations = false, creating = null, onCreate, onSelectAnnotation, onHoverAnnotation, onEditAnnotation, snap = true, timeFormat, cursorFormat, theme, discontinuities, calendar, spacing, grid = true, sessionDividers = 'none', children, }) {
+    // Normalize the `panZoom` mode (boolean shorthand or the three-way string)
+    // into the two gesture flags the event surface reads. `true` ⇒ both; `'pan'`
+    // ⇒ drag only; `false`/`'none'` ⇒ neither. Zoom implies pan (there is no
+    // zoom-without-pan mode), so `interactive` (holds an internal view) tracks
+    // whichever is on.
+    const panEnabled = panZoom === true || panZoom === 'pan' || panZoom === 'panZoom';
+    const zoomEnabled = panZoom === true || panZoom === 'panZoom';
+    const interactive = panEnabled || zoomEnabled;
     // 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.
@@ -57,7 +66,7 @@ export function ChartContainer({ range, width, rowGap = 0, showAxis = true, trac
         seed[0],
         seed[1],
     ]);
-    const uncontrolled = panZoom && onTimeRangeChange === undefined;
+    const uncontrolled = interactive && onTimeRangeChange === undefined;
     // While the internal view isn't in use (not uncontrolled), keep it synced to
     // the prop — so *entering* uncontrolled pan/zoom (toggling panZoom on, or a
     // controlled→uncontrolled switch) starts from the current range, not the
@@ -78,12 +87,20 @@ export function ChartContainer({ range, width, rowGap = 0, showAxis = true, trac
     useLayoutEffect(() => {
         onRangeRef.current = onTimeRangeChange;
     });
+    // Latest `bounds` in a ref too, so `applyRange` clamps to the current extent
+    // while staying identity-stable (it's a frame field + a gesture callback dep).
+    const boundsRef = useRef(bounds);
+    useLayoutEffect(() => {
+        boundsRef.current = bounds;
+    });
     const applyRange = useCallback((range) => {
+        const b = boundsRef.current;
+        const next = b ? clampToBounds(range, b) : range;
         const cb = onRangeRef.current;
         if (cb)
-            cb(range);
+            cb(next);
         else
-            setInternalRange(range);
+            setInternalRange(next);
     }, []);
     // Cross-row tracker. We store the cursor's plot-pixel x (not a timestamp), so a
     // still cursor stays put while a live window slides under it; a controlled
@@ -222,6 +239,18 @@ export function ChartContainer({ range, width, rowGap = 0, showAxis = true, trac
     }, [sources]);
     const onTrackerRef = useRef(onTrackerChanged);
     onTrackerRef.current = onTrackerChanged;
+    // Draw-stats sink: hold the latest `onDrawStats` in a ref and expose a *stable*
+    // reporter that reads it, so an inline arrow doesn't re-identify the context
+    // (which would thrash every row's draw memo). The reporter is `undefined` when
+    // there's no subscriber — the signal for `Layers` to skip per-layer timing
+    // entirely (zero overhead when unused). Its identity flips only when the
+    // presence of `onDrawStats` toggles, not on every render.
+    const onDrawStatsRef = useRef(onDrawStats);
+    onDrawStatsRef.current = onDrawStats;
+    const hasDrawStats = onDrawStats !== undefined;
+    const reportDrawStats = useMemo(() => hasDrawStats
+        ? (frame) => onDrawStatsRef.current?.(frame)
+        : undefined, [hasDrawStats]);
     // Selection: controlled (`selected` prop) or uncontrolled (internal). A click
     // on a selectable layer calls `select()` after hit-testing; `onSelect` notifies
     // in both modes, the internal state is managed only when uncontrolled. The full
@@ -531,8 +560,28 @@ export function ChartContainer({ range, width, rowGap = 0, showAxis = true, trac
     // Pack overlapping top-flag labels (markers + regions) into stacked lanes so
     // close-in-x labels don't collide; chips read their lane back off the frame.
     const labelLanes = useMemo(() => computeLabelLanes(annotations, (v) => xScale(v), draggingKey, plotWidth), [annotations, xScale, draggingKey]);
+    // The frame's `[d0, d1]` tuple, identity-stable on the endpoints. The frame
+    // memo rebuilds whenever any of its (many) fields change — a `hovered`
+    // transition, a selection, an annotation edit, a range change — so an inline
+    // `[d0, d1]` literal there would mint a fresh array on any such rebuild, and
+    // every draw callback listing `container.timeRange` in its deps (Layers'
+    // data-canvas draw) would read that as a domain change and replot the row
+    // canvas. Memoizing on the endpoints keeps the draw stable across those
+    // unrelated rebuilds. (Cursor *position* no longer rebuilds the frame at all —
+    // 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 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
+    // [PND-HOVCTX] / {@link CursorContext}.
+    const cursorFrame = useMemo(() => ({
+        cursorX,
+        cursorY: hoverPoint?.y ?? null,
+        cursorRowKey: hoverPoint?.rowKey ?? null,
+    }), [cursorX, hoverPoint]);
     const frame = useMemo(() => ({
-        timeRange: [d0, d1],
+        timeRange: timeRangeTuple,
         width,
         theme: theme ?? defaultTheme,
         plotWidth,
@@ -541,16 +590,14 @@ export function ChartContainer({ range, width, rowGap = 0, showAxis = true, trac
         leftGutter,
         rightGutter,
         rowGap,
-        cursorX,
         setHoverX,
-        cursorY: hoverPoint?.y ?? null,
-        cursorRowKey: hoverPoint?.rowKey ?? null,
         setHoverY,
         crosshairSnap,
         cursorBuckets,
         regionAnchor,
         setRegionAnchor,
         onRegionSelect,
+        reportDrawStats,
         regionSelectModifier,
         draggingKey,
         setDragging,
@@ -588,15 +635,15 @@ export function ChartContainer({ range, width, rowGap = 0, showAxis = true, trac
         discontinuities: xDiscontinuities,
         grid,
         sessionDividers,
-        panZoom,
+        panEnabled,
+        zoomEnabled,
         minDuration,
         applyRange,
         registerGutter,
         registerRow,
         firstRowKey,
     }), [
-        d0,
-        d1,
+        timeRangeTuple,
         width,
         theme,
         plotWidth,
@@ -605,14 +652,13 @@ export function ChartContainer({ range, width, rowGap = 0, showAxis = true, trac
         leftGutter,
         rightGutter,
         rowGap,
-        cursorX,
-        hoverPoint,
         setHoverY,
         crosshairSnap,
         cursorBuckets,
         regionAnchor,
         setRegionAnchor,
         onRegionSelect,
+        reportDrawStats,
         regionSelectModifier,
         draggingKey,
         setDragging,
@@ -650,20 +696,21 @@ export function ChartContainer({ range, width, rowGap = 0, showAxis = true, trac
         xDiscontinuities,
         grid,
         sessionDividers,
-        panZoom,
+        panEnabled,
+        zoomEnabled,
         minDuration,
         applyRange,
         registerGutter,
         registerRow,
         firstRowKey,
     ]);
-    return (_jsx(ContainerContext.Provider, { value: frame, children: _jsxs("div", { style: { width: `${width}px` }, 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',
-                    }, children: children }), showAxis && _jsx(TimeAxis, {})] }) }));
+    return (_jsx(ContainerContext.Provider, { value: frame, children: _jsx(CursorContext.Provider, { value: cursorFrame, children: _jsxs("div", { style: { width: `${width}px` }, 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',
+                        }, children: children }), showAxis && _jsx(TimeAxis, {})] }) }) }));
 }
 //# sourceMappingURL=ChartContainer.js.map

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