@pond-ts/charts 0.55.0 → 0.56.2

package/CHANGELOG.md

@@ -8,7 +8,10 @@ The `@pond-ts` packages — `pond-ts`, `@pond-ts/react`, `@pond-ts/charts`,
 under a single `v*` tag, so this file covers them all. Pre-1.0: minor bumps may
 include new features and type-level changes; patch bumps are strictly additive.
 
-[Unreleased]: https://github.com/pond-ts/pond/compare/v0.55.0...HEAD
+[Unreleased]: https://github.com/pond-ts/pond/compare/v0.56.2...HEAD
+[0.56.2]: https://github.com/pond-ts/pond/compare/v0.56.1...v0.56.2
+[0.56.1]: https://github.com/pond-ts/pond/compare/v0.56.0...v0.56.1
+[0.56.0]: https://github.com/pond-ts/pond/compare/v0.55.0...v0.56.0
 [0.55.0]: https://github.com/pond-ts/pond/compare/v0.54.0...v0.55.0
 [0.54.0]: https://github.com/pond-ts/pond/compare/v0.53.1...v0.54.0
 [0.53.1]: https://github.com/pond-ts/pond/compare/v0.53.0...v0.53.1
@@ -56,6 +59,142 @@ include new features and type-level changes; patch bumps are strictly additive.
 
 ## [Unreleased]
 
+## [0.56.2] — 2026-08-05
+
+### Fixed
+
+- **charts (tests only, no shipped change):** the log-axis rendered-label test
+  is no longer an exact-set assertion over every digit-bearing node in the
+  render tree. It passed on Node 22 and failed on CI's Node 18 with one extra
+  element, blocking the publish twice. The discrepancy is **unreproduced and
+  still open** — recorded as `[PND-LOGTICK-N18]` in `PND_CHARTS_PLAN.md` with
+  everything measured about it. The assertion now checks that every chosen tick
+  renders in order, which is the wiring this test exists to cover; the tick
+  _selection_ it was really about is pinned deterministically by the
+  `yTickValues` unit tests.
+
+## [0.56.1] — 2026-08-05
+
+### Fixed
+
+- **charts (tests only, no shipped change):** a log-axis test asserted on
+  rendered label _text_, parsing numbers back out of the DOM to infer scale
+  behaviour. It passed locally and failed in CI on a value it could not have
+  produced there, which blocked the v0.56.0 publish. The root cause was never
+  reproduced; rather than guess at it, the assertion now compares the rendered
+  labels against the ticks the axis is specified to draw, formatted through the
+  same formatter — deterministic regardless of locale, formatting or DOM
+  differences, and the numeric guarantee itself was already pinned directly by
+  the `yTickValues` unit tests. The published artifact is identical to what
+  v0.56.0 would have been.
+
+## [0.56.0] — 2026-08-05
+
+### Added
+
+- **charts:** **`<YAxis scale="log">` — a base-10 logarithmic y axis.** Every y
+  scale was `scaleLinear`, so data spanning orders of magnitude was
+  undrawable: on a linear axis everything below the top decade collapses onto
+  the baseline. Set `scale="log"` and the axis maps by ratio, ticking the
+  decades. `format` still formats the **value**, so a readout says `1.2 PB`
+  rather than its logarithm — the transform is in the scale, not in the data,
+  which is what keeps it transparent to every draw layer, annotation and
+  cursor readout.
+
+  A log domain cannot contain zero, and d3 maps a non-positive value to
+  **`NaN`** — a coordinate the canvas silently _drops_, which is why every
+  consequence below is about something failing invisibly rather than throwing.
+  So the axis is deliberate about it:
+  - **Domain policy matches the linear axis exactly.** Auto-fit takes the
+    smallest **positive** extent (one zero sample can't collapse the axis, and
+    a `BarChart` — whose extent always widens to include zero — can still share
+    it); a positive explicit `min`/`max` is honoured verbatim and never
+    discarded, with the _auto-fit_ side moving if the domain would otherwise
+    invert; a fully auto-fit domain is `.nice()`d out to whole powers of ten, so
+    the extremes get headroom instead of sitting clipped on the plot edge. A
+    non-positive bound has no position and is refused in favour of the data.
+    `pad` is applied multiplicatively, adding the same fraction of a decade at
+    both ends.
+  - **A value with no position on the axis renders as a gap.** Previously the
+    gap test was `Number.isFinite(value)`, and `0` is finite — so the coordinate
+    became `NaN`, the canvas dropped the path op without breaking the path, and
+    the two neighbours were joined by a straight line _over_ the missing data.
+    Lines, area fills and outlines, and band envelopes now all break there.
+  - **Layers that reach for a baseline rest on the axis floor.** `AreaChart`
+    resolves an out-of-domain `baseline` there (writing `baseline={0}` is
+    natural and correct on a linear axis), and a **stacked** bar layer starts
+    its first segment there — starting at zero made the bottom segment of every
+    stack both invisible and unhittable. Unchanged on a linear axis, where zero
+    clamped into the domain _is_ zero.
+  - **The dev-mode warning names only unambiguous mistakes**: a refused
+    `min`/`max`, negative data, or an axis with no positive data at all. It
+    deliberately says nothing about an extent of exactly `[0, hi]`, which a
+    line touching zero and a bar layer on strictly positive data both report
+    identically — warning there fired on _every_ bar chart on a log axis. It
+    warns once per distinct complaint rather than on every repaint.
+
+- **charts:** **pan and zoom now yield whole-millisecond view ranges.** A
+  wheel-zoom derives its range from pixel positions through `xScale.invert()`,
+  so the result was fractional by construction — an ordinary scroll produced
+  `1.7e12 + 0.37`. The epoch millisecond is this model's atomic unit and
+  consumers are entitled to assume it; one did, and a calendar `cursorSequence`
+  threw on a plain scroll. `zoomRange` / `panRange` round both ends, and never
+  collapse a positive span to zero width in doing so. (Core's fractional-instant
+  fix covers the same crash from the other side; this closes the class.)
+
+- **charts:** **`AreaStyle.flatFill` — stacked areas that read as slabs.** An
+  area's fill has always graded to transparent at the baseline, which is right
+  for the elevation form and wrong for a stack: every band showed the one
+  beneath it through the fade, so a stacked area was not really drawable. Set
+  `flatFill` and the fill is flat; omitted, the gradient is unchanged, so no
+  existing theme shifts. The docs theme's `seq1…seq8` area roles set it, since
+  stacking is what they exist for.
+
+- **docs theme:** **a sequential ramp — `seq1…seq8` — for charts with more
+  series than the categorical set has hues.** `--pond-viz-1…5` were, and
+  remain, the categorical set; a chart needing more slots (an eight-source
+  stack, a wall of climate stripes) now steps **tonally** through the brand
+  teal instead of introducing competing hues. Eight steps, evenly spaced
+  (~ΔL\* 9 in CIELAB), defined for light and dark, each mode's ramp containing
+  that mode's `--pond-viz-1` exactly. Exposed as `line` / `area` / `bar` theme
+  roles on `docsTheme` (Storybook) and the docs site's `useSiteChartTheme`,
+  and as an array from the site's `useSequentialRamp()`. Dev-only: the ramp
+  lives in the `docs-theme.fixture.ts` Storybook fixture and the website's
+  CSS, both excluded from the published `@pond-ts/charts` build — the library
+  still ships no palette.
+
+### Fixed
+
+- **core:** **a fractional epoch millisecond no longer crashes calendar
+  math.** `Temporal.Instant` refuses a non-integer epoch ms outright
+  (`epoch milliseconds must be an integer`), and `toPlainDateStart` passed
+  whatever it was given straight through — so realizing a `Sequence.calendar`
+  over a fractional range threw, and in a React app the exception unmounted the
+  page. A fraction is not a caller error: a chart's wheel-zoom derives its view
+  range from pixel positions via `xScale.invert()`, so an ordinary scroll
+  produces `1.7e12 + 0.37`. The instant is now floored to the millisecond
+  containing it — the epoch millisecond is this model's atomic unit and
+  calendar boundaries are themselves whole milliseconds, so the bucket
+  containing `t` and the one containing `t + 0.37` are necessarily the same,
+  and integer inputs are untouched. (`Math.floor`, not `Math.trunc`: pre-1970
+  they disagree, and `-5.5` lies inside the millisecond spanning `[-6, -5)`.)
+
+- **charts:** toggling **`<ChartContainer grid>`** now repaints immediately.
+  `Layers`' draw callback read `container.grid` but didn't depend on it, so
+  switching gridlines off changed nothing until an unrelated dependency moved —
+  in practice you had to pan or zoom a little to force the update. The same
+  omission covered `sessionDividers` and `xKind`.
+
+- **charts:** the log axis's dev-mode warning no longer requires **node's
+  ambient types**. It was guarded by a bare `process.env.NODE_ENV`, which
+  typechecks only when a tool happens to resolve `@types/node` from a parent
+  `node_modules` — so `tsc` inside the package passed while running the _same_
+  tsconfig from a consumer's directory failed with `TS2591: Cannot find name
+'process'`. That took out the docs site's TypeDoc step, and would equally hit
+  any consumer typechecking the package's sources. The guard now lives in
+  `src/dev.ts` behind a local declaration and a `typeof` check, so a browser
+  bundle with no `process` global doesn't throw at import either.
+
 ## [0.55.0] — 2026-08-04
 
 ### Added

package/dist/AreaChart.d.ts

@@ -102,6 +102,24 @@ type AreaChartSource<S extends SeriesSchema = SeriesSchema, VS extends ValueSeri
 };
 /** `<AreaChart>`'s props: the shared knobs plus one series-kind source shape. */
 export type AreaChartProps<S extends SeriesSchema = SeriesSchema, VS extends ValueSeriesSchema = ValueSeriesSchema> = AreaChartCommon<S, VS> & AreaChartSource<S, VS>;
+/** Read a d3 linear scale's domain lower bound (the axis floor) from the plain
+ *  `(value) => pixel` function the row hands to `draw`. The runtime object is a
+ *  d3 `ScaleLinear` (it carries `.domain()`); the {@link RowLayer} type narrows
+ *  it to the call signature, so this reads the bound through a localized,
+ *  documented shape rather than widening `drawArea`'s contract to d3-scale. */
+/**
+ * The area's baseline in **data** units: the caller's `baseline` when it has a
+ * finite position on this axis, else the axis floor.
+ *
+ * The fallback is not defensive padding — it's the log case. `baseline={0}` is
+ * the natural thing to write and is correct on a linear axis; on a log axis
+ * zero has no position at all — `scaleLog()(0)` is **`NaN`** (the `-Infinity`
+ * the log *transform* produces is then interpolated into the range, and
+ * `∞ − ∞` is what comes out) — and a single non-finite coordinate turns the
+ * whole filled path into nothing drawn at all. Resolving to the floor keeps the
+ * layer's meaning ("fill from the bottom") on both scale kinds.
+ */
+export declare function resolveAreaBaseline(baseline: number | undefined, yScale: (value: number) => number): number;
 /**
  * An area draw layer: fills between a value `column` and a `baseline`, with a
  * graded (gradient) shade — opaque at the line, transparent at the baseline —

package/dist/AreaChart.js

@@ -12,6 +12,24 @@ import { useSlotKey } from './use-slot-key.js';
  *  d3 `ScaleLinear` (it carries `.domain()`); the {@link RowLayer} type narrows
  *  it to the call signature, so this reads the bound through a localized,
  *  documented shape rather than widening `drawArea`'s contract to d3-scale. */
+/**
+ * The area's baseline in **data** units: the caller's `baseline` when it has a
+ * finite position on this axis, else the axis floor.
+ *
+ * The fallback is not defensive padding — it's the log case. `baseline={0}` is
+ * the natural thing to write and is correct on a linear axis; on a log axis
+ * zero has no position at all — `scaleLog()(0)` is **`NaN`** (the `-Infinity`
+ * the log *transform* produces is then interpolated into the range, and
+ * `∞ − ∞` is what comes out) — and a single non-finite coordinate turns the
+ * whole filled path into nothing drawn at all. Resolving to the floor keeps the
+ * layer's meaning ("fill from the bottom") on both scale kinds.
+ */
+export function resolveAreaBaseline(baseline, yScale) {
+    const floor = domainFloor(yScale);
+    if (baseline === undefined)
+        return floor;
+    return Number.isFinite(yScale(baseline)) ? baseline : floor;
+}
 function domainFloor(yScale) {
     const d = yScale.domain?.();
     return d && d.length > 0 ? d[0] : 0;
@@ -137,7 +155,12 @@ export function AreaChart({ series, column, readout, as: semantic, axis, baselin
             // Omitted baseline rests on the axis floor (resolved late from the
             // scale, so it tracks the auto-fit domain); a fixed baseline is used
             // verbatim.
-            baseline ?? domainFloor(yScale), curveFactory, gaps, gapConnectorOpacity, decimate),
+            // A log axis has no position for zero — or anything at or below
+            // it — so an explicit out-of-domain `baseline` would scale to
+            // `NaN` and poison every coordinate in the fill path. Fall back
+            // to the axis floor, which is exactly what an omitted baseline
+            // already resolves to.
+            resolveAreaBaseline(baseline, yScale), curveFactory, gaps, gapConnectorOpacity, decimate),
         },
         axisId: axis,
         index,

package/dist/ChartRow.js

@@ -1,7 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Children, cloneElement, isValidElement, useCallback, useContext, useEffect, useMemo, useState, } from 'react';
-import { scaleLinear } from 'd3-scale';
-import { resolveYDomain } from './domain.js';
+import { Children, cloneElement, isValidElement, useCallback, useContext, useEffect, useMemo, useRef, useState, } from 'react';
+import { scaleLinear, scaleLog } from 'd3-scale';
+import { isDev } from './dev.js';
+import { logAxisWarning, needsExtents, resolveYDomain } from './domain.js';
 import { resolveAxisFormat } from './format.js';
 import { resolveYTickCount } from './yticks.js';
 import { placeAxisSlots } from './slots.js';
@@ -39,6 +40,7 @@ function axisSpecEqual(a, b) {
     return (a.id === b.id &&
         a.side === b.side &&
         a.width === b.width &&
+        a.scale === b.scale &&
         // Object.is (not ===) so a degenerate NaN bound compares equal to itself and
         // doesn't re-register every render.
         Object.is(a.min, b.min) &&
@@ -171,6 +173,7 @@ export function ChartRow({ height, cursor, children }) {
                 id: IMPLICIT_AXIS_ID,
                 side: 'left',
                 width: 0,
+                scale: 'linear',
                 min: undefined,
                 max: undefined,
                 pad: 0,
@@ -222,20 +225,68 @@ export function ChartRow({ height, cursor, children }) {
     const yScales = useMemo(() => {
         const map = new Map();
         for (const ax of effectiveAxes) {
-            const extents = ax.min === undefined || ax.max === undefined
+            const extents = needsExtents(ax)
                 ? layerList
                     .filter((entry) => (entry.axisId ?? defaultAxisId) === ax.id)
                     .map((entry) => entry.layer.yExtent())
                 : [];
-            const [lo, hi] = resolveYDomain(ax.min, ax.max, extents, ax.pad);
+            const [lo, hi] = resolveYDomain(ax.min, ax.max, extents, ax.pad, ax.scale);
             // Reserve a header band at the top when any axis draws a `'top'` title,
             // so the title clears the top tick + plot (the whole row shifts down
             // uniformly, keeping stacked axes aligned). No top titles ⇒ range top 0,
             // so nothing changes for existing charts.
-            map.set(ax.id, scaleLinear().domain([lo, hi]).range([height, topHeader]));
+            // `scaleLog` and `scaleLinear` share the call/ticks/tickFormat/invert
+            // surface every consumer uses (see `YScale`), so choosing between them
+            // here is the whole of log support — no draw layer branches on it.
+            const base = ax.scale === 'log' ? scaleLog() : scaleLinear();
+            map.set(ax.id, base.domain([lo, hi]).range([height, topHeader]));
         }
         return map;
     }, [effectiveAxes, layerList, height, defaultAxisId, topHeader]);
+    // Dev-mode diagnostics for a `scale="log"` axis (see `logAxisWarning`). Three
+    // things about *where* this sits are load-bearing, each of them a bug the
+    // first version shipped:
+    //
+    //  - **An effect, not the scale memo.** Warning from inside `useMemo` is a
+    //    side effect in a function React may call speculatively — and does call
+    //    twice under StrictMode.
+    //  - **Deduplicated by message, in a ref.** The comment on the original said
+    //    "warn once per offending axis" and nothing implemented it, so a live
+    //    chart re-warned on every appended sample. Keying on the message (not a
+    //    bare "already warned" flag) still reports a *different* complaint if the
+    //    data changes shape.
+    //  - **`height` is not a dependency.** It is one for the scales, which is why
+    //    the warning must not ride along: a drag-resize would otherwise emit a
+    //    line per animation frame.
+    //
+    // Gated on `isDev` **and** on some axis actually being logarithmic, so a
+    // production build and every linear chart skip the extent walk entirely.
+    const warnedRef = useRef(new Map());
+    useEffect(() => {
+        if (!isDev || !effectiveAxes.some((ax) => ax.scale === 'log'))
+            return;
+        const warned = warnedRef.current;
+        for (const ax of effectiveAxes) {
+            // A linear axis in the same row has nothing to say and must not pay the
+            // O(points) walk below just because a sibling is logarithmic.
+            if (ax.scale !== 'log')
+                continue;
+            // Always walk the extents here, even for a fully-explicit domain the
+            // scale memo skips them for: data that cannot be drawn is worth saying so
+            // about whether or not it happened to constrain the bounds — and the
+            // both-explicit axis was exactly the case the first version stayed silent
+            // about.
+            const message = logAxisWarning(ax, layerList
+                .filter((entry) => (entry.axisId ?? defaultAxisId) === ax.id)
+                .map((entry) => entry.layer.yExtent()));
+            if (message === null)
+                warned.delete(ax.id);
+            else if (warned.get(ax.id) !== message) {
+                warned.set(ax.id, message);
+                console.warn(message);
+            }
+        }
+    }, [effectiveAxes, layerList, defaultAxisId]);
     // Resolved auto-tick count per axis — explicit `<YAxis tickCount>` else
     // height-derived (see resolveYTickCount). The single source the `<YAxis>`
     // labels, the readout formatter (below), and the `Layers` gridlines all read,

package/dist/Layers.js

@@ -5,6 +5,7 @@ import { drawGrid, drawDividers, dividerAlphas, thinPixels } from './grid.js';
 import { cursorParts, bandRect, regionSpan } from './tracker.js';
 import { resolveSelection } from './select.js';
 import { panRange, zoomRange, panRangeTrading, zoomRangeTrading, } from './viewport.js';
+import { yTickValues } from './yticks.js';
 import { flagChipStyle, flagChipX, axisPillX, axisPillStyle } from './chip.js';
 import { ContainerContext, CursorContext, LayersContext, RowContext, } from './context.js';
 /** Fallback **y**-gridline tick count, used only before the row publishes its
@@ -116,7 +117,7 @@ export function Layers({ children }) {
             // a gridline sits under every `<YAxis>` label and no more.
             const yCount = tickCounts.get(defaultAxisId) ?? GRID_TICKS;
             const yTicks = gridY && !(yIsCategory && explicitY === undefined)
-                ? (explicitY ?? gridY.ticks(yCount)).map((t) => gridY(t))
+                ? (explicitY ?? yTickValues(gridY, yCount)).map((t) => gridY(t))
                 : [];
             // On a calendar axis the verticals are the FULL grain populations —
             // every day in the month, every month in the year, every aligned
@@ -267,6 +268,18 @@ export function Layers({ children }) {
         // a full replot per mousemove.
         container.timeRange,
         container.reportDrawStats,
+        // Read inside `draw`, so they have to invalidate it. Omitting `grid` meant
+        // toggling `<ChartContainer grid>` changed nothing until some *other*
+        // dep moved — pan the plot a pixel and the gridlines you switched off
+        // finally vanished. All primitives, so no per-frame identity churn.
+        container.grid,
+        container.sessionDividers,
+        container.xKind,
+        // `container.theme` is read too. It is deliberately NOT listed: it is the
+        // caller's prop and an inline object literal would rebuild `draw` every
+        // render (a full replot per frame). The values `draw` actually takes from
+        // it — `background`, `gridColor`, `gridDash` — are extracted above and
+        // listed individually, so a theme swap still invalidates.
         row.rowKey,
     ]);
     // Interaction overlay: the cursor marks live on a DOM/SVG overlay above the

package/dist/YAxis.d.ts

@@ -20,6 +20,34 @@ export interface YAxisProps {
      *   that has headroom (auto-fit / padded) so it doesn't crowd the top tick.
      */
     labelPlacement?: 'rotated' | 'top';
+    /**
+     * Which scale the axis maps its domain through. **Default `'linear'`.**
+     *
+     * `'log'` gives a base-10 logarithmic axis — for data spanning orders of
+     * magnitude, where a linear axis flattens everything below the top decade
+     * onto the baseline. Ticks land on the decades, and `format` still formats
+     * the **value**, so a readout says `1.2 PB`, not its logarithm.
+     *
+     * A log domain cannot contain zero or negative numbers — d3 maps them to
+     * `NaN`, which has no position on the plot. So:
+     *
+     * - **Auto-fit ignores non-positive extents** when picking the low end (a
+     *   `BarChart`, whose extent always reaches zero so its bars can meet their
+     *   baseline, can therefore share the axis), and rounds the domain out to
+     *   whole powers of ten.
+     * - **An explicit `min`/`max` that is not positive is refused**, and that
+     *   side auto-fits instead. A positive bound is always honoured exactly; when
+     *   only one side is given and the domain would invert, the *auto* side moves
+     *   — the same policy a linear axis follows.
+     * - **Layers that fill to a baseline** (`AreaChart`, `BarChart`, a stacked
+     *   histogram) rest it on the bottom of the domain rather than on zero.
+     * - **A value with no position gaps the line**, rather than its neighbours
+     *   being joined straight across it.
+     *
+     * A dev-mode warning fires for the cases that are unambiguously a mistake: a
+     * refused bound, negative data, or an axis with no positive data at all.
+     */
+    scale?: 'linear' | 'log';
     /** Explicit domain bounds; omit to auto-fit the charts linked to this axis. */
     min?: number;
     max?: number;
@@ -100,5 +128,5 @@ export interface YAxisProps {
  * tick marks + labels from that scale. Charts attach via `<LineChart axis="id">`
  * (default: the first axis).
  */
-export declare function YAxis({ id, side, label, min, max, format, ticks, tickCount, pad, boundaryLabels, width, labelPlacement, color, index, }: YAxisProps): import("react/jsx-runtime").JSX.Element;
+export declare function YAxis({ id, side, label, scale, min, max, format, ticks, tickCount, pad, boundaryLabels, width, labelPlacement, color, index, }: YAxisProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=YAxis.d.ts.map

package/dist/YAxis.js

@@ -3,6 +3,7 @@ import { useContext, useEffect, useMemo } from 'react';
 import { ContainerContext, RowContext } from './context.js';
 import { resolveAxisFormat } from './format.js';
 import { useSlotKey } from './use-slot-key.js';
+import { yTickValues } from './yticks.js';
 const DEFAULT_WIDTH = 50;
 /** Fallback tick count before the row has published its resolved count (the
  *  first render, pre-registration). The row's height-derived value takes over
@@ -16,7 +17,7 @@ const DEFAULT_TICK_COUNT = 5;
  * tick marks + labels from that scale. Charts attach via `<LineChart axis="id">`
  * (default: the first axis).
  */
-export function YAxis({ id, side = 'left', label, min, max, format, ticks, tickCount, pad = 0, boundaryLabels = true, width = DEFAULT_WIDTH, labelPlacement = 'rotated', color, index = 0, }) {
+export function YAxis({ id, side = 'left', label, scale = 'linear', min, max, format, ticks, tickCount, pad = 0, boundaryLabels = true, width = DEFAULT_WIDTH, labelPlacement = 'rotated', color, index = 0, }) {
     const container = useContext(ContainerContext);
     if (container === null) {
         throw new Error('<YAxis> must be rendered inside a <ChartContainer>');
@@ -29,6 +30,7 @@ export function YAxis({ id, side = 'left', label, min, max, format, ticks, tickC
         id,
         side,
         width,
+        scale,
         min,
         max,
         pad,
@@ -41,6 +43,7 @@ export function YAxis({ id, side = 'left', label, min, max, format, ticks, tickC
         id,
         side,
         width,
+        scale,
         min,
         max,
         pad,
@@ -87,7 +90,7 @@ export function YAxis({ id, side = 'left', label, min, max, format, ticks, tickC
         ? ticks.map((t) => ({ value: t.at, label: t.label }))
         : layerCategories !== null
             ? layerCategories.map((label, i) => ({ value: i + 0.5, label }))
-            : (yScale ? yScale.ticks(count) : []).map((t) => ({
+            : (yScale ? yTickValues(yScale, count) : []).map((t) => ({
                 value: t,
                 label: fmt(t),
             }));

package/dist/area.js

@@ -1,6 +1,6 @@
 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 { bridgeGaps, collectGapEdges, drawGapBridges, drawGapFades, drawGapSteps, gapUnscalable, withAlpha, DEFAULT_GAP_MODE, DEFAULT_GAP_CONNECTOR_OPACITY, } from './gaps.js';
 import { cullChartSeries } from './culling.js';
 import { decimateM4Cached } from './decimate.js';
 import { affineOf } from './affine.js';
@@ -191,6 +191,15 @@ export function drawArea(ctx, cs, xScale, yScale, style, baselineValue, curve =
     else {
         cs = cullChartSeries(source, xScale);
     }
+    // Values with no position on the y scale (zero / negative on a log axis)
+    // become ordinary NaN gaps, so the fill and outline break at them rather than
+    // bridging over a dropped `lineTo(x, NaN)`. Deliberately **after** the
+    // gradient above: that reads the pre-cull buffer, whose finite extent is
+    // memoized per `Float64Array` ([PND-GRADX]), and a fresh array here would miss
+    // that cache on every frame. A no-op on an affine (linear) y scale.
+    const scaledY = gapUnscalable(cs.y, cs.length, yScale);
+    if (scaledY !== cs.y)
+        cs = { ...cs, y: scaledY };
     // `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).
@@ -277,20 +286,42 @@ export function drawArea(ctx, cs, xScale, yScale, style, baselineValue, curve =
 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);
-    const regionBottom = Math.max(bottomPx, baselinePx);
-    if (regionBottom - regionTop < 1e-6)
-        return style.fill; // degenerate height
+    // Stacked areas opt out of the grade entirely: a band that fades to
+    // transparent at the baseline shows every band beneath it (see AreaStyle).
+    if (style.flatFill === true)
+        return style.fill;
+    // The pixel extent is the two value extremes mapped through the (monotonic)
+    // 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}.
+    //
+    // **An extreme with no position on the scale is dropped**, not min/maxed in.
+    // `valueExtent` is the data's own `[min, max]`, and on a **log** axis a
+    // non-positive extreme — a series that touches zero, which is the ordinary
+    // shape of traffic or storage data — maps to `NaN`. `Math.min(NaN, pb)` is
+    // `NaN`, `NaN` propagates to the height, and `NaN < 1e-6` is **false**, so the
+    // degenerate guard below waved it through to `createLinearGradient(0, NaN, 0,
+    // NaN)` — which throws `IndexSizeError` on a real canvas and takes the whole
+    // chart down. The region is seeded from the baseline pixel (always in-domain,
+    // via `resolveAreaBaseline`) and widened only by extremes that have a
+    // position, so the grade still spans the part of the series that draws.
+    let regionTop = baselinePx;
+    let regionBottom = baselinePx;
+    const widen = (px) => {
+        if (!Number.isFinite(px))
+            return;
+        if (px < regionTop)
+            regionTop = px;
+        if (px > regionBottom)
+            regionBottom = px;
+    };
+    widen(yScale(valueExtent[0]));
+    widen(yScale(valueExtent[1]));
+    // `!(… >= 1e-6)` rather than `< 1e-6`, so a non-finite height — a baseline
+    // that somehow has no position either, leaving nothing finite to anchor on —
+    // falls back to the flat fill instead of reaching the gradient calls.
+    if (!(regionBottom - regionTop >= 1e-6))
+        return style.fill; // degenerate
     const opaque = style.fill;
     const transparent = withAlpha(style.fill, 0);
     const grad = ctx.createLinearGradient(0, regionTop, 0, regionBottom);

package/dist/band.js

@@ -1,6 +1,7 @@
 import { area as d3area, curveLinear } from 'd3-shape';
 import { cullBandSeries } from './culling.js';
 import { decimateBand } from './decimate.js';
+import { gapUnscalable } from './gaps.js';
 /**
  * The `[min, max]` vertical extent of the **drawn** band — the lowest `lower`
  * and highest `upper` over samples where both edges are finite — or `null` if
@@ -60,6 +61,18 @@ export function drawBand(ctx, band, xScale, yScale, style, curve = curveLinear,
         band = decimateBand(band, xScale, ctx, k);
         decimated = band !== before;
     }
+    // An edge with no position on the y scale becomes an ordinary NaN gap, so the
+    // envelope breaks there rather than emitting dropped path ops that stitch the
+    // neighbouring samples together. A `lower` of `0` is the common shape — a band
+    // measured from nothing — and on a log axis zero has no position, so without
+    // this the fill silently spanned the samples it could not draw. Gapping either
+    // edge gaps the sample, which is already the band's contract: a sample counts
+    // only where **both** edges do. A no-op on an affine (linear) y scale.
+    const gapLower = gapUnscalable(band.lower, band.length, yScale);
+    const gapUpper = gapUnscalable(band.upper, band.length, yScale);
+    if (gapLower !== band.lower || gapUpper !== band.upper) {
+        band = { ...band, lower: gapLower, upper: gapUpper };
+    }
     const gen = d3area()
         .defined((_, i) => Number.isFinite(band.lower[i]) && Number.isFinite(band.upper[i]))
         .x((_, i) => xScale(band.x[i]))

package/dist/bars.d.ts

@@ -251,6 +251,22 @@ export declare function stackValueExtent(ss: StackedBarSeries): [number, number]
  * the x auto-fit for a vertical histogram, the y auto-fit for a horizontal one.
  */
 export declare function stackBinExtent(ss: StackedBarSeries): [number, number] | null;
+/**
+ * The value a stack's **first** segment rests on, in data units — the same
+ * `0`-clamped-into-the-domain rule {@link resolveBarBaseline} applies to a plain
+ * bar, read off whichever scale carries the stacked value (`yScale` when the
+ * bars grow up, `xScale` when they grow right).
+ *
+ * Both stack walks used to start at a literal `0`, which is right only while the
+ * domain contains zero — and a **log** domain never can. `yScale(0)` on a log
+ * scale is `NaN`, `fillRect` with a `NaN` argument is a silent canvas no-op, and
+ * the same rect feeds {@link stackAt} — so the bottom segment of every stack
+ * both vanished *and* became unhittable, with nothing to see but a stack that
+ * starts one segment up. The linear case is unaffected: the value extents pull
+ * `0` into the domain, so this returns exactly `0` and the geometry is
+ * unchanged.
+ */
+export declare function stackBase(orientation: Orientation, xScale: Scale, yScale: Scale): number;
 /**
  * The pixel rect `[x0, x1, yTop, yBottom]` (ascending on both axes) of bin `b`'s
  * segment `g`, stacked so it sits atop `cumBefore` (the summed value of the

package/dist/bars.js

@@ -435,6 +435,24 @@ export function stackBinExtent(ss) {
         return null;
     return [ss.begin[0], ss.end[ss.length - 1]];
 }
+/**
+ * The value a stack's **first** segment rests on, in data units — the same
+ * `0`-clamped-into-the-domain rule {@link resolveBarBaseline} applies to a plain
+ * bar, read off whichever scale carries the stacked value (`yScale` when the
+ * bars grow up, `xScale` when they grow right).
+ *
+ * Both stack walks used to start at a literal `0`, which is right only while the
+ * domain contains zero — and a **log** domain never can. `yScale(0)` on a log
+ * scale is `NaN`, `fillRect` with a `NaN` argument is a silent canvas no-op, and
+ * the same rect feeds {@link stackAt} — so the bottom segment of every stack
+ * both vanished *and* became unhittable, with nothing to see but a stack that
+ * starts one segment up. The linear case is unaffected: the value extents pull
+ * `0` into the domain, so this returns exactly `0` and the geometry is
+ * unchanged.
+ */
+export function stackBase(orientation, xScale, yScale) {
+    return resolveBarBaseline(orientation === 'vertical' ? yScale : xScale);
+}
 /**
  * The pixel rect `[x0, x1, yTop, yBottom]` (ascending on both axes) of bin `b`'s
  * segment `g`, stacked so it sits atop `cumBefore` (the summed value of the
@@ -491,10 +509,11 @@ export function segmentRect(ss, b, g, orientation, xScale, yScale, cumBefore, ga
  */
 export function drawStacks(ctx, ss, orientation, xScale, yScale, style, gapPx, minSpanPx, seriesId, selection, hover) {
     const G = ss.groups.length;
+    const base = stackBase(orientation, xScale, yScale);
     ctx.save();
     ctx.globalAlpha = style.opacity;
     for (let b = 0; b < ss.length; b += 1) {
-        let cum = 0;
+        let cum = base;
         for (let g = 0; g < G; g += 1) {
             const rect = segmentRect(ss, b, g, orientation, xScale, yScale, cum, gapPx, minSpanPx);
             const v = ss.values[b * G + g];
@@ -543,8 +562,9 @@ export function drawStacks(ctx, ss, orientation, xScale, yScale, style, gapPx, m
  */
 export function stackAt(ss, px, py, orientation, xScale, yScale, gapPx, minSpanPx) {
     const G = ss.groups.length;
+    const base = stackBase(orientation, xScale, yScale);
     for (let b = 0; b < ss.length; b += 1) {
-        let cum = 0;
+        let cum = base;
         for (let g = 0; g < G; g += 1) {
             const rect = segmentRect(ss, b, g, orientation, xScale, yScale, cum, gapPx, minSpanPx);
             const v = ss.values[b * G + g];