@pond-ts/charts 0.31.0

package/dist/line.js

@@ -0,0 +1,88 @@
+import { line as d3line, curveLinear } from 'd3-shape';
+import { bridgeGaps, collectGapEdges, drawGapBridges, drawGapFades, drawGapSteps, DEFAULT_GAP_MODE, DEFAULT_GAP_CONNECTOR_OPACITY, } from './gaps.js';
+/**
+ * The y-scale's domain lower bound (the axis floor) in pixels — where the
+ * `step` / `fade` gap bridges drop to. The runtime `yScale` is a d3
+ * `ScaleLinear` (it carries `.domain()`); read the bound through a localized,
+ * documented shape rather than widening the draw contract to d3-scale. Falls
+ * back to `0` if the scale exposes no domain.
+ */
+export function baselinePxFromScale(yScale) {
+    const d = yScale.domain?.();
+    return yScale(d && d.length > 0 ? d[0] : 0);
+}
+/**
+ * The `[min, max]` of the **finite** values in `cs.y`, or `null` if none are
+ * finite. NaN (the gap signal) is ignored, so a coast doesn't drag the domain.
+ */
+export function yExtent(cs) {
+    let min = Infinity;
+    let max = -Infinity;
+    for (let i = 0; i < cs.length; i += 1) {
+        const v = cs.y[i];
+        if (Number.isFinite(v)) {
+            if (v < min)
+                min = v;
+            if (v > max)
+                max = v;
+        }
+    }
+    return min === Infinity ? null : [min, max];
+}
+/**
+ * Stroke a line for `cs`, mapping data→pixels through `xScale`/`yScale` and
+ * connecting points with `curve` (d3-shape; default linear).
+ *
+ * Built on d3-shape's `line()`. **Gap handling is driven by `gaps`** (a
+ * {@link GapMode}, default `'empty'`):
+ *
+ * - `'empty'` (default) — `.defined(Number.isFinite)`: a non-finite value ends
+ *   the current subpath and the next finite point starts a fresh one (`moveTo`,
+ *   not `lineTo`), so a coast reads as a break, not a `lineTo(NaN, …)` bridge
+ *   (`docs/rfcs/charts.md` trap #2).
+ * - `'none'` — interior gaps are linearly interpolated ({@link bridgeGaps}) so
+ *   the line bridges straight across (real `lineTo`s, robust to leading /
+ *   trailing gaps, which stay a break). The one non-honest mode.
+ * - `'dashed'` / `'step'` / `'fade'` — the **solid** segments break exactly as
+ *   in `'empty'`, then a second pass draws the inferred bridge across each
+ *   interior gap: a dashed straight line, a flat dashed line at the average of
+ *   the edge values, or estela's fade-to-baseline (the axis floor). `dashed` /
+ *   `step` are drawn faint (`gapConnectorOpacity`); the gap edges are collected
+ *   by one O(N) walk ({@link collectGapEdges}).
+ *
+ * The generator writes path ops to `ctx`; we bracket with `beginPath`/`stroke`.
+ * `cs.y` (a `Float64Array`) is the datum iterable — `y` reads the value, `x`
+ * reads `cs.x[i]` by index, so there's no per-point object allocation.
+ */
+export function drawLine(ctx, cs, xScale, yScale, style, curve = curveLinear, gaps = DEFAULT_GAP_MODE, gapConnectorOpacity = DEFAULT_GAP_CONNECTOR_OPACITY) {
+    // `none` interpolates interior gaps so the line bridges them; every other mode
+    // keeps NaN so d3 breaks the solid path (the inferred bridge, if any, is a
+    // separate overlay pass below).
+    const ys = gaps === 'none' ? bridgeGaps(cs.y, cs.length) : cs.y;
+    const gen = d3line()
+        .defined((v) => Number.isFinite(v))
+        .x((_, i) => xScale(cs.x[i]))
+        .y((v) => yScale(v))
+        .curve(curve)
+        .context(ctx);
+    ctx.beginPath();
+    gen(ys);
+    ctx.strokeStyle = style.color;
+    ctx.lineWidth = style.width;
+    ctx.stroke();
+    // Overlay bridges for the inferred-gap modes. `dashed` / `step` are faint
+    // dashed connectors (gapConnectorOpacity); only `fade` drops to the axis floor.
+    if (gaps === 'dashed' || gaps === 'step' || gaps === 'fade') {
+        const edges = collectGapEdges(cs.length, cs.x, (i) => cs.y[i], xScale, (i) => yScale(cs.y[i]));
+        if (gaps === 'dashed') {
+            drawGapBridges(ctx, edges, style.color, style.width, gapConnectorOpacity);
+        }
+        else if (gaps === 'step') {
+            drawGapSteps(ctx, edges, style.color, style.width, gapConnectorOpacity);
+        }
+        else {
+            drawGapFades(ctx, edges, baselinePxFromScale(yScale), style.color, style.width);
+        }
+    }
+}
+//# sourceMappingURL=line.js.map

package/dist/range.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Pixel x-span for a range/interval-keyed mark (a bar or a box) spanning
+ * `[beginMs, endMs]`, inset by `gapPx` total (half each side) so adjacent marks
+ * breathe. Returns `[x0, x1]` with `x0 <= x1`.
+ *
+ * The chart supplies the range — the key's `begin`/`end` for an interval series,
+ * or a derived width for a point-keyed one — plus the gap; this is just the math,
+ * so it unit-tests without a canvas. Shared by `BarChart` + `BoxPlot`.
+ *
+ * A span that the gap would invert (narrower than `minWidthPx` after the inset)
+ * collapses to a `minWidthPx` mark centred in the slot, so a too-thin bucket
+ * stays visible and the bar never flips inside-out.
+ */
+export declare function barSpanPx(beginMs: number, endMs: number, xScale: (value: number) => number, gapPx?: number, minWidthPx?: number): [number, number];
+//# sourceMappingURL=range.d.ts.map

package/dist/range.js

@@ -0,0 +1,27 @@
+/**
+ * Pixel x-span for a range/interval-keyed mark (a bar or a box) spanning
+ * `[beginMs, endMs]`, inset by `gapPx` total (half each side) so adjacent marks
+ * breathe. Returns `[x0, x1]` with `x0 <= x1`.
+ *
+ * The chart supplies the range — the key's `begin`/`end` for an interval series,
+ * or a derived width for a point-keyed one — plus the gap; this is just the math,
+ * so it unit-tests without a canvas. Shared by `BarChart` + `BoxPlot`.
+ *
+ * A span that the gap would invert (narrower than `minWidthPx` after the inset)
+ * collapses to a `minWidthPx` mark centred in the slot, so a too-thin bucket
+ * stays visible and the bar never flips inside-out.
+ */
+export function barSpanPx(beginMs, endMs, xScale, gapPx = 0, minWidthPx = 1) {
+    const a = xScale(beginMs);
+    const b = xScale(endMs);
+    const lo = Math.min(a, b);
+    const hi = Math.max(a, b);
+    const inset = gapPx / 2;
+    const x0 = lo + inset;
+    const x1 = hi - inset;
+    if (x1 - x0 >= minWidthPx)
+        return [x0, x1];
+    const mid = (lo + hi) / 2;
+    return [mid - minWidthPx / 2, mid + minWidthPx / 2];
+}
+//# sourceMappingURL=range.js.map

package/dist/scatter.d.ts

@@ -0,0 +1,70 @@
+import type { ChartSeries } from './data.js';
+import type { Scale } from './line.js';
+import type { ScatterStyle } from './theme.js';
+import type { ResolvedEncoding } from './encoding.js';
+import type { SelectInfo } from './context.js';
+/**
+ * Index of the point in `cs` **nearest** `time` by `|x − time|`, restricted to
+ * finite points, or `-1` if none. `cs.x` is the sorted time axis, so a binary
+ * search finds the insertion point in O(log N); the two straddling rows are then
+ * the only nearest candidates — but either may be a gap (non-finite y), so we
+ * step outward from each until we find a real point and keep the closer.
+ *
+ * Ties go to the **earlier** point (strict `<` on the distance comparison),
+ * matching core's `nearest(select:'nearest')`. Used by the tracker's `sampleAt`
+ * so the readout snaps to a drawn mark (not a gap) — and reads everything by
+ * index, so the encoded colour at that row comes along for free.
+ */
+export declare function nearestIndex(cs: ChartSeries, time: number): number;
+/**
+ * The `[min, max]` of the **finite** plotted values — identical to a line's
+ * vertical extent (the marks sit at their values; radius is a pixel-space
+ * concern that doesn't widen the data domain). `null` if no point is finite.
+ * Mirrors `yExtent` so a scatter auto-fits its axis the same way a line does.
+ */
+export declare function scatterExtent(cs: ChartSeries): [number, number] | null;
+/**
+ * Draw the scatter: one filled, outlined circle per finite point, sized +
+ * coloured by `encoding` (data-driven radius / colour) over `style`. A gap
+ * (non-finite y) draws nothing — points are discrete, there is no path to break.
+ *
+ * The **selected** point (when `selected` matches this layer's `label` *and* a
+ * point's `begin` key) is restroked with the style's wider highlight ring after
+ * the base pass, so it lifts above its neighbours regardless of draw order.
+ * Matching on both key and label is what keeps two series sharing a timestamp
+ * from both lighting up (the container's selection contract).
+ *
+ * Each circle is its own `beginPath`/`arc`/`fill`/`stroke`; `save`/`restore`
+ * brackets the whole pass so fill/stroke state doesn't leak into later layers.
+ * Reads `cs.x`/`cs.y` by index — no per-point object allocation in the hot loop.
+ *
+ * @param keyAt   maps a row index to the point's stable key (its event `begin`),
+ *                for selection matching — the row's `x` is epoch ms, so this is
+ *                usually `(i) => cs.x[i]`.
+ * @param labelAt optional per-point text label; `undefined` ⇒ no labels drawn.
+ * @param font    `theme.font` (family + size) for label text.
+ * @param selected the container's current selection (or `null`).
+ * @param seriesLabel this layer's series identity (`as` ?? column) — the
+ *                `label` half of the selection match.
+ */
+export declare function drawScatter(ctx: CanvasRenderingContext2D, cs: ChartSeries, xScale: Scale, yScale: Scale, style: ScatterStyle, encoding: ResolvedEncoding, keyAt: (i: number) => number, labelAt: ((i: number) => string | undefined) | undefined, font: {
+    readonly family: string;
+    readonly size: number;
+}, selected: SelectInfo | null, seriesLabel: string): void;
+/**
+ * Hit-test plot-pixel `(qx, qy)` against the scatter's points — the topmost
+ * point whose circle contains the click, or `null`. "Topmost" = the
+ * last-drawn at that spot, so a later point drawn over an earlier one wins; we
+ * walk **backwards** and return the first containing point.
+ *
+ * A point's hit radius is its drawn radius (data-driven or base) — clicking the
+ * visible disc selects it. Distance is compared squared (no `sqrt` in the loop).
+ * Returns the point's {@link SelectInfo} with `key = keyAt(i)` (its event
+ * `begin`), the encoded fill colour (so the readout swatch matches the mark),
+ * and the series `label`.
+ *
+ * Pure: takes the same `xScale`/`yScale` the row hands to `draw`, so it
+ * unit-tests without a DOM (mirrors the `sampleAt` / `resolveSelection` split).
+ */
+export declare function hitTestScatter(cs: ChartSeries, qx: number, qy: number, xScale: Scale, yScale: Scale, encoding: ResolvedEncoding, keyAt: (i: number) => number, seriesLabel: string): SelectInfo | null;
+//# sourceMappingURL=scatter.d.ts.map

package/dist/scatter.js

@@ -0,0 +1,213 @@
+/**
+ * Scatter geometry + the canvas draw — pure, like {@link drawLine} /
+ * {@link drawBand}, so the recording-mock tests assert the op sequence and the
+ * hit math without a browser.
+ *
+ * A scatter plots one mark per finite point at `(xScale(x), yScale(y))`, sized
+ * + coloured by the resolved {@link ResolvedEncoding} (data-driven radius /
+ * colour) over the style's base. All three of `drawScatter`, `scatterExtent`,
+ * and {@link hitTestScatter} are **O(N)** in the point count (a single pass; no
+ * spatial index — a chart row holds far fewer points than a dense line, and a
+ * click happens at human cadence). If a scatter ever needs 100k+ points this is
+ * the place to add a coarse x-bucket index; today the linear walk is the right
+ * tradeoff.
+ */
+/** A non-finite y (the gap signal) means "no point here" — skip it everywhere. */
+function isPoint(cs, i) {
+    return Number.isFinite(cs.y[i]);
+}
+/**
+ * Index of the point in `cs` **nearest** `time` by `|x − time|`, restricted to
+ * finite points, or `-1` if none. `cs.x` is the sorted time axis, so a binary
+ * search finds the insertion point in O(log N); the two straddling rows are then
+ * the only nearest candidates — but either may be a gap (non-finite y), so we
+ * step outward from each until we find a real point and keep the closer.
+ *
+ * Ties go to the **earlier** point (strict `<` on the distance comparison),
+ * matching core's `nearest(select:'nearest')`. Used by the tracker's `sampleAt`
+ * so the readout snaps to a drawn mark (not a gap) — and reads everything by
+ * index, so the encoded colour at that row comes along for free.
+ */
+export function nearestIndex(cs, time) {
+    const n = cs.length;
+    if (n === 0)
+        return -1;
+    // Binary search for the first index with x >= time.
+    let lo = 0;
+    let hi = n;
+    while (lo < hi) {
+        const mid = (lo + hi) >>> 1;
+        if (cs.x[mid] < time)
+            lo = mid + 1;
+        else
+            hi = mid;
+    }
+    // Candidates straddle `lo`: the row at `lo` (>= time) and `lo - 1` (< time).
+    // Either side may be a run of gaps, so scan outward for the nearest real point.
+    let best = -1;
+    let bestDist = Infinity;
+    // Walk right from lo for the first finite point.
+    for (let i = lo; i < n; i += 1) {
+        if (Number.isFinite(cs.y[i])) {
+            best = i;
+            bestDist = Math.abs(cs.x[i] - time);
+            break;
+        }
+    }
+    // Walk left from lo-1; take it only if strictly closer (ties → earlier index,
+    // which on the left side means this earlier point wins an equal distance).
+    for (let i = lo - 1; i >= 0; i -= 1) {
+        if (Number.isFinite(cs.y[i])) {
+            const d = Math.abs(cs.x[i] - time);
+            if (d <= bestDist) {
+                best = i;
+                bestDist = d;
+            }
+            break;
+        }
+    }
+    return best;
+}
+/**
+ * The `[min, max]` of the **finite** plotted values — identical to a line's
+ * vertical extent (the marks sit at their values; radius is a pixel-space
+ * concern that doesn't widen the data domain). `null` if no point is finite.
+ * Mirrors `yExtent` so a scatter auto-fits its axis the same way a line does.
+ */
+export function scatterExtent(cs) {
+    let min = Infinity;
+    let max = -Infinity;
+    for (let i = 0; i < cs.length; i += 1) {
+        const v = cs.y[i];
+        if (Number.isFinite(v)) {
+            if (v < min)
+                min = v;
+            if (v > max)
+                max = v;
+        }
+    }
+    return min === Infinity ? null : [min, max];
+}
+/**
+ * Draw the scatter: one filled, outlined circle per finite point, sized +
+ * coloured by `encoding` (data-driven radius / colour) over `style`. A gap
+ * (non-finite y) draws nothing — points are discrete, there is no path to break.
+ *
+ * The **selected** point (when `selected` matches this layer's `label` *and* a
+ * point's `begin` key) is restroked with the style's wider highlight ring after
+ * the base pass, so it lifts above its neighbours regardless of draw order.
+ * Matching on both key and label is what keeps two series sharing a timestamp
+ * from both lighting up (the container's selection contract).
+ *
+ * Each circle is its own `beginPath`/`arc`/`fill`/`stroke`; `save`/`restore`
+ * brackets the whole pass so fill/stroke state doesn't leak into later layers.
+ * Reads `cs.x`/`cs.y` by index — no per-point object allocation in the hot loop.
+ *
+ * @param keyAt   maps a row index to the point's stable key (its event `begin`),
+ *                for selection matching — the row's `x` is epoch ms, so this is
+ *                usually `(i) => cs.x[i]`.
+ * @param labelAt optional per-point text label; `undefined` ⇒ no labels drawn.
+ * @param font    `theme.font` (family + size) for label text.
+ * @param selected the container's current selection (or `null`).
+ * @param seriesLabel this layer's series identity (`as` ?? column) — the
+ *                `label` half of the selection match.
+ */
+export function drawScatter(ctx, cs, xScale, yScale, style, encoding, keyAt, labelAt, font, selected, seriesLabel) {
+    ctx.save();
+    // The selection only lights up a point of *this* series; resolve the key once.
+    const selectedKey = selected !== null && selected.label === seriesLabel ? selected.key : null;
+    let selPx = 0;
+    let selPy = 0;
+    let selR = 0;
+    let selHit = false;
+    for (let i = 0; i < cs.length; i += 1) {
+        if (!isPoint(cs, i))
+            continue;
+        const px = xScale(cs.x[i]);
+        const py = yScale(cs.y[i]);
+        const r = encoding.radiusAt(i);
+        ctx.beginPath();
+        ctx.arc(px, py, r, 0, Math.PI * 2);
+        ctx.fillStyle = encoding.colorAt(i);
+        ctx.fill();
+        if (style.outlineWidth > 0) {
+            ctx.lineWidth = style.outlineWidth;
+            ctx.strokeStyle = style.outline;
+            ctx.stroke();
+        }
+        // Defer the selected point's highlight ring to a second pass so it sits on
+        // top of any neighbour drawn after it.
+        if (selectedKey !== null && keyAt(i) === selectedKey) {
+            selPx = px;
+            selPy = py;
+            selR = r;
+            selHit = true;
+        }
+    }
+    // Highlight ring for the selected point (after the base pass — always on top).
+    if (selHit) {
+        ctx.beginPath();
+        ctx.arc(selPx, selPy, selR, 0, Math.PI * 2);
+        ctx.lineWidth = style.selectedWidth;
+        ctx.strokeStyle = style.selectedOutline;
+        ctx.stroke();
+    }
+    // Optional per-point labels, after all marks so text isn't overpainted.
+    if (labelAt !== undefined) {
+        ctx.fillStyle = style.label;
+        ctx.font = `${font.size}px ${font.family}`;
+        ctx.textBaseline = 'middle';
+        for (let i = 0; i < cs.length; i += 1) {
+            if (!isPoint(cs, i))
+                continue;
+            const text = labelAt(i);
+            if (text === undefined || text === '')
+                continue;
+            const px = xScale(cs.x[i]);
+            const py = yScale(cs.y[i]);
+            const r = encoding.radiusAt(i);
+            // Sit the label just right of the point (past its radius), vertically
+            // centred — simple, theme-styled placement.
+            ctx.fillText(text, px + r + LABEL_GAP, py);
+        }
+    }
+    ctx.restore();
+}
+/** Gap (px) between a point's edge and its label text. */
+const LABEL_GAP = 4;
+/**
+ * Hit-test plot-pixel `(qx, qy)` against the scatter's points — the topmost
+ * point whose circle contains the click, or `null`. "Topmost" = the
+ * last-drawn at that spot, so a later point drawn over an earlier one wins; we
+ * walk **backwards** and return the first containing point.
+ *
+ * A point's hit radius is its drawn radius (data-driven or base) — clicking the
+ * visible disc selects it. Distance is compared squared (no `sqrt` in the loop).
+ * Returns the point's {@link SelectInfo} with `key = keyAt(i)` (its event
+ * `begin`), the encoded fill colour (so the readout swatch matches the mark),
+ * and the series `label`.
+ *
+ * Pure: takes the same `xScale`/`yScale` the row hands to `draw`, so it
+ * unit-tests without a DOM (mirrors the `sampleAt` / `resolveSelection` split).
+ */
+export function hitTestScatter(cs, qx, qy, xScale, yScale, encoding, keyAt, seriesLabel) {
+    for (let i = cs.length - 1; i >= 0; i -= 1) {
+        if (!isPoint(cs, i))
+            continue;
+        const px = xScale(cs.x[i]);
+        const py = yScale(cs.y[i]);
+        const r = encoding.radiusAt(i);
+        const dx = qx - px;
+        const dy = qy - py;
+        if (dx * dx + dy * dy <= r * r) {
+            return {
+                key: keyAt(i),
+                value: cs.y[i],
+                color: encoding.colorAt(i),
+                label: seriesLabel,
+            };
+        }
+    }
+    return null;
+}
+//# sourceMappingURL=scatter.js.map

package/dist/select.d.ts

@@ -0,0 +1,13 @@
+import type { LayerEntry, SelectInfo } from './context.js';
+/**
+ * Resolve a click at plot-pixel `(px, py)` to the selected mark, or `null`.
+ * Walks the row's layers **top-down** (reverse z-order — the topmost mark wins,
+ * matching what the user sees) and returns the first `hitTest` hit. A layer with
+ * no `hitTest` (line / band / area) or no resolvable y-scale is skipped.
+ *
+ * Pure, given the row's `xScale` and a per-axis y-scale lookup — so the click
+ * dispatch in `Layers` unit-tests without a DOM. (Layers passes its sorted
+ * z-stack, the shared `xScale`, and its `axisId → yScale` resolver.)
+ */
+export declare function resolveSelection(entries: readonly LayerEntry[], px: number, py: number, xScale: (value: number) => number, yScaleFor: (axisId: string | undefined) => ((value: number) => number) | undefined): SelectInfo | null;
+//# sourceMappingURL=select.d.ts.map

package/dist/select.js

@@ -0,0 +1,23 @@
+/**
+ * Resolve a click at plot-pixel `(px, py)` to the selected mark, or `null`.
+ * Walks the row's layers **top-down** (reverse z-order — the topmost mark wins,
+ * matching what the user sees) and returns the first `hitTest` hit. A layer with
+ * no `hitTest` (line / band / area) or no resolvable y-scale is skipped.
+ *
+ * Pure, given the row's `xScale` and a per-axis y-scale lookup — so the click
+ * dispatch in `Layers` unit-tests without a DOM. (Layers passes its sorted
+ * z-stack, the shared `xScale`, and its `axisId → yScale` resolver.)
+ */
+export function resolveSelection(entries, px, py, xScale, yScaleFor) {
+    for (let i = entries.length - 1; i >= 0; i -= 1) {
+        const entry = entries[i];
+        const yScale = yScaleFor(entry.axisId);
+        if (yScale === undefined)
+            continue;
+        const hit = entry.layer.hitTest?.(px, py, xScale, yScale);
+        if (hit)
+            return hit;
+    }
+    return null;
+}
+//# sourceMappingURL=select.js.map

package/dist/slots.d.ts

@@ -0,0 +1,48 @@
+/**
+ * Per-slot gutter math, shared by {@link ChartContainer} (reserve) and
+ * {@link ChartRow} (place). A "slot" is one axis column on a side; slots are
+ * indexed **from the plot outward** — slot 0 is the axis nearest the plot. Each
+ * row contributes a list of its axis widths for one side in slot order (slot 0
+ * first). Kept pure + free of React so the column-alignment rule is unit-tested
+ * directly.
+ */
+/**
+ * The reserved width of each slot: the max any row needs in that slot. A row
+ * with fewer axes simply has no entry for the outer slots, contributing nothing
+ * there — so `leftSlots[i]` is `max` over the rows that *have* a slot `i`.
+ *
+ * The sum is the side's total gutter; the plot starts after the left sum and
+ * ends before the right sum, identically on every row.
+ */
+export declare function maxSlotWidths(rows: readonly (readonly number[])[]): number[];
+/** Sum of an array of widths (a side's total gutter). */
+export declare function sum(widths: readonly number[]): number;
+/** A row axis as the layout sees it: its per-instance slot **key** + width. */
+export interface SlotAxis {
+    /** Stable per-instance key (the `useSlotKey` symbol), NOT the data id. */
+    readonly key: symbol;
+    readonly width: number;
+}
+/** What {@link placeAxisSlots} computes for one row. */
+export interface AxisSlotPlacement {
+    /** Axis instance key → its reserved slot width (that column's max across rows). */
+    readonly axisSlots: ReadonlyMap<symbol, number>;
+    /** Width of the outer slots this row lacks — padded so its plot stays aligned. */
+    readonly leftPad: number;
+    readonly rightPad: number;
+}
+/**
+ * Place a row's real axes into the container's reserved slots (slot 0 nearest the
+ * plot). `leftAxes` are in author order (outer→inner), so the i-th sits in slot
+ * `len-1-i`; `rightAxes` are author order (inner→outer), so the j-th sits in slot
+ * `j`. Each axis's reserved width is its slot's max (falling back to its own
+ * width until the container has reserved); a row with fewer axes than the widest
+ * pads the outer slots it lacks — so a no-axis row pads the whole gutter and its
+ * plot still left-aligns.
+ *
+ * Keyed by **instance** (the `key` symbol), not the data `id`: two axes can share
+ * an id (a left/right mirror of one scale, or a duplicate) yet must keep distinct
+ * slots, or the rendered gutter would not match what the container reserved.
+ */
+export declare function placeAxisSlots(leftAxes: readonly SlotAxis[], rightAxes: readonly SlotAxis[], leftSlots: readonly number[], rightSlots: readonly number[]): AxisSlotPlacement;
+//# sourceMappingURL=slots.d.ts.map

package/dist/slots.js

@@ -0,0 +1,64 @@
+/**
+ * Per-slot gutter math, shared by {@link ChartContainer} (reserve) and
+ * {@link ChartRow} (place). A "slot" is one axis column on a side; slots are
+ * indexed **from the plot outward** — slot 0 is the axis nearest the plot. Each
+ * row contributes a list of its axis widths for one side in slot order (slot 0
+ * first). Kept pure + free of React so the column-alignment rule is unit-tested
+ * directly.
+ */
+/**
+ * The reserved width of each slot: the max any row needs in that slot. A row
+ * with fewer axes simply has no entry for the outer slots, contributing nothing
+ * there — so `leftSlots[i]` is `max` over the rows that *have* a slot `i`.
+ *
+ * The sum is the side's total gutter; the plot starts after the left sum and
+ * ends before the right sum, identically on every row.
+ */
+export function maxSlotWidths(rows) {
+    const len = rows.reduce((m, r) => Math.max(m, r.length), 0);
+    const slots = new Array(len).fill(0);
+    for (const row of rows) {
+        for (let i = 0; i < row.length; i++) {
+            slots[i] = Math.max(slots[i], row[i]);
+        }
+    }
+    return slots;
+}
+/** Sum of an array of widths (a side's total gutter). */
+export function sum(widths) {
+    let total = 0;
+    for (const w of widths)
+        total += w;
+    return total;
+}
+/**
+ * Place a row's real axes into the container's reserved slots (slot 0 nearest the
+ * plot). `leftAxes` are in author order (outer→inner), so the i-th sits in slot
+ * `len-1-i`; `rightAxes` are author order (inner→outer), so the j-th sits in slot
+ * `j`. Each axis's reserved width is its slot's max (falling back to its own
+ * width until the container has reserved); a row with fewer axes than the widest
+ * pads the outer slots it lacks — so a no-axis row pads the whole gutter and its
+ * plot still left-aligns.
+ *
+ * Keyed by **instance** (the `key` symbol), not the data `id`: two axes can share
+ * an id (a left/right mirror of one scale, or a duplicate) yet must keep distinct
+ * slots, or the rendered gutter would not match what the container reserved.
+ */
+export function placeAxisSlots(leftAxes, rightAxes, leftSlots, rightSlots) {
+    const axisSlots = new Map();
+    leftAxes.forEach((ax, i) => {
+        axisSlots.set(ax.key, leftSlots[leftAxes.length - 1 - i] ?? ax.width);
+    });
+    rightAxes.forEach((ax, j) => {
+        axisSlots.set(ax.key, rightSlots[j] ?? ax.width);
+    });
+    let leftPad = 0;
+    for (let i = leftAxes.length; i < leftSlots.length; i++)
+        leftPad += leftSlots[i] ?? 0;
+    let rightPad = 0;
+    for (let j = rightAxes.length; j < rightSlots.length; j++) {
+        rightPad += rightSlots[j] ?? 0;
+    }
+    return { axisSlots, leftPad, rightPad };
+}
+//# sourceMappingURL=slots.js.map