basalt-ui 1.27.0 → 1.28.0

package/src/charts/kinds/BandStrip.tsx

@@ -1,6 +1,8 @@
 import { Group } from '@visx/group'
 import { memo, useMemo } from 'react'
 import type { ReactNode } from 'react'
+import { assertRequiredProps } from '../../common/validate'
+import type { BasaltProps } from '../../common/props'
 import { VX, alpha } from '../../tokens'
 import type { ChartMargin } from '../../tokens'
 import type { CursorResolution } from '../cursor/resolve'
@@ -17,8 +19,10 @@ import {
 import { Crosshair } from '../primitives/Crosshair'
 import { HatchPattern, hatchFill, hatchSizeFor } from '../primitives/HatchPattern'
 import { HoverOverlay } from '../primitives/HoverOverlay'
+import type { ChartState } from '../primitives/ChartPending'
 import type { ChartLegendConfig, SeriesStyle } from '../series'
 import { fmtAxisDate } from '../utils/format'
+import { isDev } from '../../utils/is-dev'
 
 /**
  * A state a strip can draw. Extends `SeriesStyle` rather than `ChartSeries` because a band has no
@@ -78,7 +82,7 @@ export type BandSpan = {
   }
 }
 
-export type BandStripProps<T> = {
+export type BandStripProps<T> = BasaltProps & {
   data: readonly T[]
   /** Stable id — identifies this chart as the cursor's source. */
   chartId: string
@@ -110,8 +114,10 @@ export type BandStripProps<T> = {
   cursorResolution?: CursorResolution
   tooltip?: BandTooltipConfig<T> | false
   legend?: ChartLegendConfig | false
-  /** Colour of the absence hatch. Names a `series` entry, so absence is legended like any other
-   * state — a hatched band is the one mark a reader cannot decode from an axis. Default
+  /** Colour of the absence hatch, AND the state that is absent. Names a `series` entry, so absence
+   * is legended like any other state — a hatched band is the one mark a reader cannot decode from
+   * an axis. A slot in this state hatches across its whole width unless its own `absentFraction`
+   * says otherwise; a slot in any other state hatches only its `absentFraction`. Default
    * `VX.neutral`, unnamed. A key naming no `series` entry throws (a PROP, so a typo can only be a
    * wiring error) rather than falling back to the unnamed default. */
   absentState?: string
@@ -122,6 +128,9 @@ export type BandStripProps<T> = {
   ariaLabel?: string
   /** Forwarded to `ChartFrame` — see `ChartPending`'s JSDoc. */
   isPending?: boolean
+  /** The three "nothing to draw" states in one prop — pending → error → empty. See
+   * `ChartState`; `isPending` stays a supported alias for `state={{ pending: true }}`. */
+  state?: ChartState
 }
 
 const DEFAULT_MARKER_INSET = 6
@@ -142,13 +151,6 @@ const UNKNOWN_MARK = {
   strokeDasharray: '3 2',
 } as const
 
-/** The house dev gate (`src/provider`, `src/agent-chat` use the same expression): `basaltViteConfig`
- * defines `process.env.NODE_ENV`, so a production bundle constant-folds this to `false` and drops
- * the throw. Read per call, never hoisted to a module const, so a test can flip it. */
-function isDev(): boolean {
-  return process.env['NODE_ENV'] !== 'production'
-}
-
 /**
  * A `state` (or `marker.state`) naming no `series` entry.
  *
@@ -187,7 +189,12 @@ function formatBandValue<T>(style: BandStripSeries<T>, datum: T): string {
  * nothing measured, and a fact that must not be read off the ramp.
  */
 function BandStripInner<T>(props: BandStripProps<T>) {
-  const { series, chartId, height, fill, legend, ariaLabel, isPending } = props
+  // F-ERR-1: name the component and the prop. Without this a missing accessor surfaces
+  // from inside visx as `undefined is not a function`, which `BasaltErrorBoundary`
+  // swallows into a blank subtree that names nothing.
+  assertRequiredProps('BandStrip', props, ['data', 'getX', 'series', 'getBand'])
+  const { series, chartId, height, fill, legend, ariaLabel, isPending, state, className, style } =
+    props
 
   return (
     <ChartFrame
@@ -197,6 +204,9 @@ function BandStripInner<T>(props: BandStripProps<T>) {
       {...(fill !== undefined && { fill })}
       {...(ariaLabel !== undefined && { ariaLabel })}
       {...(isPending !== undefined && { isPending })}
+      {...(state !== undefined && { state })}
+      {...(className !== undefined && { className })}
+      {...(style !== undefined && { style })}
       legend={resolveLegend(legend)}
     >
       {(plot) => <BandStripPlot {...props} plot={plot} />}
@@ -279,7 +289,15 @@ function BandStripPlot<T>(props: BandStripPlotProps<T>) {
       // Clamped AND finite-checked. `foldedFrom` is carried by the consumer's datum, so a
       // 0/0 on an un-folded slot arrives here as NaN — which `Math.min`/`Math.max` propagate
       // straight into `width="NaN"`, a band that silently fails to paint.
-      const absent = clampFraction(span.absentFraction)
+      // A slot whose STATE is the absent one is absent in whole — `absentState` and
+      // `absentFraction` are two ways of saying the same thing, and gating the hatch on the
+      // fraction alone meant a strip declaring `absentState` painted a flat fill while the docs,
+      // the demo and its own `<pattern>` all promised hatching. An explicit `absentFraction` still
+      // wins: a partially-covered slot in the absent state says so itself.
+      const absent =
+        span.state === absentState
+          ? clampFraction(span.absentFraction ?? 1)
+          : clampFraction(span.absentFraction)
       const measuredWidth = bandWidth * (1 - absent)
       const hatchWidth = bandWidth - measuredWidth
       const markerKey = span.marker?.state ?? span.state
@@ -327,7 +345,7 @@ function BandStripPlot<T>(props: BandStripPlotProps<T>) {
       )
     })
     return out
-  }, [bands, getBand, getX, styleByKey, hidden, bandWidth, step, stripHeight, hatchId])
+  }, [bands, getBand, getX, styleByKey, hidden, bandWidth, step, stripHeight, hatchId, absentState])
 
   if (plotWidth <= 0 || bands.length === 0) return null
 
@@ -454,4 +472,8 @@ function deriveBandRow<T>(
  * Hand-memoized: React Compiler does not process the shipped dist, so the hot kind is wrapped in
  * `React.memo` to retain the auto-memoization it had as source (parity with `DualPanel`).
  */
-export const BandStrip = memo(BandStripInner) as typeof BandStripInner
+const BandStripMemo = memo(BandStripInner)
+// Without it every kind reads as `Memo` in React DevTools (audit A16) — a profiler flame
+// graph of nine identically-named nodes names nothing.
+BandStripMemo.displayName = 'BandStrip'
+export const BandStrip = BandStripMemo as typeof BandStripInner

package/src/charts/kinds/Bars.tsx

@@ -1,15 +1,18 @@
-import { curveMonotoneX } from '@visx/curve'
 import { LinePath } from '@visx/shape'
 import { memo, useMemo } from 'react'
+import { assertRequiredProps } from '../../common/validate'
+import type { BasaltProps } from '../../common/props'
 import type { CursorResolution } from '../cursor/resolve'
 import { VX } from '../../tokens'
 import type { ChartMargin } from '../../tokens'
 import { CartesianChart } from '../primitives/CartesianChart'
 import type { AxisConfig, CartesianTooltipConfig, PlotContext } from '../primitives/CartesianChart'
 import type { ZoneSpec } from '../primitives/ZoneRects'
-import { LINE_OVERLAY_STROKE_WIDTH } from '../series'
-import type { ChartLegendConfig, ChartSeries } from '../series'
+import type { ChartState } from '../primitives/ChartPending'
+import { curveFor, LINE_OVERLAY_STROKE_WIDTH } from '../series'
+import type { ChartLegendConfig, ChartSeries, SeriesCurve } from '../series'
 import { padAutoLower } from '../utils/domain'
+import { isDev } from '../../utils/is-dev'
 
 /**
  * `T = unknown` is load-bearing, not a shortcut: it keeps a consumer's existing
@@ -48,6 +51,8 @@ export type BarsLine<T = unknown> = {
   tooltip?: boolean
   /** Dims the plotted stroke AND the legend swatch, never the tooltip row (`SeriesStyle.strokeOpacity`). */
   strokeOpacity?: number
+  /** Interpolation for this overlay. Default `'monotone'` — see `SeriesCurve`. */
+  curve?: SeriesCurve
 }
 
 /** @deprecated Use ZoneSpec from primitives/ZoneRects. Kept as an alias. */
@@ -61,7 +66,7 @@ export type BarsRefLine = {
   axisSide?: 'left' | 'right'
 }
 
-export type BarsProps<T> = {
+export type BarsProps<T> = BasaltProps & {
   data: T[]
   /** Fixed height in pixels, forwarded to `CartesianChart`. Default 240. */
   height?: number
@@ -115,6 +120,9 @@ export type BarsProps<T> = {
   xTickValues?: (keys: readonly string[], xMax: number) => readonly string[]
   /** X tick label formatter. Default `fmtAxisDate` (DD.MM). */
   formatX?: (key: string) => string
+  /** Tilt the x tick labels 45° or 90°, or `0` to opt out of the phone tier's auto-rotation —
+   * see `CartesianChartProps.xLabelRotate`. */
+  xLabelRotate?: 0 | 45 | 90
   /**
    * How a sibling chart's broadcast cursor key resolves against this chart's points. Default
    * `'nearest'`. Pass `'leading'` when `getX` returns a bucket's leading edge (a weekly series
@@ -133,6 +141,9 @@ export type BarsProps<T> = {
   ariaLabel?: string
   /** Forwarded to `CartesianChart` — see `ChartPending`'s JSDoc for the three-state rationale. */
   isPending?: boolean
+  /** The three "nothing to draw" states in one prop — pending → error → empty. See
+   * `ChartState`; `isPending` stays a supported alias for `state={{ pending: true }}`. */
+  state?: ChartState
 }
 
 /**
@@ -148,6 +159,10 @@ export type BarsProps<T> = {
  * with per-bar nulls (nulls become visual gaps, not domain holes).
  */
 function BarsInner<T>(props: BarsProps<T>) {
+  // F-ERR-1: name the component and the prop. Without this a missing accessor surfaces
+  // from inside visx as `undefined is not a function`, which `BasaltErrorBoundary`
+  // swallows into a blank subtree that names nothing.
+  assertRequiredProps('Bars', props, ['data', 'getX', 'getValue', 'positiveBars'])
   const {
     data,
     height,
@@ -167,14 +182,28 @@ function BarsInner<T>(props: BarsProps<T>) {
     xTicks,
     xTickValues,
     formatX,
+    xLabelRotate,
     cursorResolution,
     tooltip,
     margin,
     legend,
     ariaLabel,
     isPending,
+    state,
+    className,
+    style,
   } = props
 
+  // Stacking sums bar heights via `posOffset`/`negOffset` in yScale units directly — a log axis
+  // has no additive zero, so a stacked total is meaningless on it (`docs/CHARTS-SPEC.md`'s null-gap
+  // + log contract). `grouped` bars only ever read one bar's own scaled value, so they're unaffected.
+  if (isDev() && barLayout === 'stacked' && y?.scale === 'log') {
+    throw new Error(
+      'Bars: stacked bars cannot use a log axis (y.scale: "log") — the stack sums bar heights, ' +
+        "and a log axis has no additive zero to sum from. Use barLayout: 'grouped' instead.",
+    )
+  }
+
   const barSeries = useMemo<ChartSeries<T>[]>(
     () =>
       [...positiveBars, ...negativeBars].map((b) => ({
@@ -287,6 +316,7 @@ function BarsInner<T>(props: BarsProps<T>) {
       {...(xTicks !== undefined && { xTicks })}
       {...(xTickValues !== undefined && { xTickValues })}
       {...(formatX !== undefined && { formatX })}
+      {...(xLabelRotate !== undefined && { xLabelRotate })}
       {...(cursorResolution !== undefined && { cursorResolution })}
       {...(zones !== undefined && { zones })}
       {...(mappedRefLines !== undefined && { refLines: mappedRefLines })}
@@ -296,6 +326,9 @@ function BarsInner<T>(props: BarsProps<T>) {
       {...(margin !== undefined && { margin })}
       {...(ariaLabel !== undefined && { ariaLabel })}
       {...(isPending !== undefined && { isPending })}
+      {...(state !== undefined && { state })}
+      {...(className !== undefined && { className })}
+      {...(style !== undefined && { style })}
     >
       {(ctx) => (
         <BarsMarks
@@ -368,14 +401,27 @@ function BarsMarks<T>({
     const scaleForSide = (side: 'left' | 'right' | undefined) =>
       side === 'right' && y2Scale ? y2Scale : yScale
     const dim = (key: string) => (highlighted === null || highlighted === key ? 1 : 0.15)
+    // The y a bar grows FROM. `scale(0)` is `-Infinity` on a log axis — which has no zero — so
+    // every grouped bar's height came out NaN and the bars silently vanished; the fallback is the
+    // axis' own domain floor, which the log-domain law keeps positive. On a linear axis the same
+    // expression still resolves to `scale(0)` for any domain reaching zero, and pins the bar to
+    // the visible floor rather than to a zero drawn off the bottom of the plot when it does not.
+    const baselineFor = (scale: typeof yScale) => {
+      const floor = scale.domain()[0] ?? 0
+      const at = scale(Math.max(floor, 0))
+      return Number.isFinite(at) ? at : scale(floor)
+    }
 
     const groupWidth = Math.max((xMax / Math.max(rows.length, 1)) * barWidthRatio, 2)
-    const totalWeight =
-      barLayout === 'grouped' ? positiveBars.reduce((s, b) => s + (b.weight ?? 1), 0) || 1 : 1
-    const groupedBarWidths =
-      barLayout === 'grouped'
-        ? positiveBars.map((b) => Math.max(groupWidth * ((b.weight ?? 1) / totalWeight), 1))
-        : []
+    // Tiled across the bars that are actually DRAWN. Derived from the full `positiveBars` instead,
+    // a legend toggle left a hole in the slot where the hidden bar used to sit and never re-tiled
+    // the survivors across the same width.
+    const groupedBars =
+      barLayout === 'grouped' ? positiveBars.filter((b) => !hidden.has(b.key)) : []
+    const totalWeight = groupedBars.reduce((s, b) => s + (b.weight ?? 1), 0) || 1
+    const groupedBarWidths = groupedBars.map((b) =>
+      Math.max(groupWidth * ((b.weight ?? 1) / totalWeight), 1),
+    )
     const groupedBarOffsets: number[] = []
     let cursor = 0
     for (const w of groupedBarWidths) {
@@ -428,19 +474,20 @@ function BarsMarks<T>({
           negOffset = top
         }
       } else {
-        positiveBars.forEach((b, i) => {
-          if (hidden.has(b.key)) return
+        groupedBars.forEach((b, i) => {
           const v = getValue(d, b.key)
           if (v === null || Number.isNaN(v) || v <= 0) return
           const scale = scaleForSide(b.axisSide)
           const yTop = scale(v)
-          const yBottom = scale(0)
+          const yBottom = baselineFor(scale)
           rects.push({
             key: `${getX(d)}-${b.key}`,
             x: groupLeft + (groupedBarOffsets[i] ?? 0),
             y: yTop,
             width: groupedBarWidths[i] ?? 0,
-            height: yBottom - yTop,
+            // A value below a caller-pinned domain floor sits under the baseline; SVG rejects a
+            // negative height outright, so it clamps to nothing drawn.
+            height: Math.max(yBottom - yTop, 0),
             fill: b.color,
             fillOpacity: (barOpacity?.(d, b.key) ?? 0.85) * dim(b.key),
           })
@@ -521,7 +568,7 @@ function BarsMarks<T>({
             strokeWidth={ln.strokeWidth ?? LINE_OVERLAY_STROKE_WIDTH}
             strokeDasharray={ln.dashed ? VX.dashArray : undefined}
             strokeOpacity={dim(ln.key) * (ln.strokeOpacity ?? 1)}
-            curve={curveMonotoneX}
+            curve={curveFor(ln.curve)}
           />
         )
       })}
@@ -537,4 +584,8 @@ function BarsMarks<T>({
  * Hand-memoized: React Compiler does not process the shipped dist, so we wrap the
  * hot bars kind in `React.memo` to retain the auto-memoization it had as source.
  */
-export const Bars = memo(BarsInner) as typeof BarsInner
+const BarsMemo = memo(BarsInner)
+// Without it every kind reads as `Memo` in React DevTools (audit A16) — a profiler flame
+// graph of nine identically-named nodes names nothing.
+BarsMemo.displayName = 'Bars'
+export const Bars = BarsMemo as typeof BarsInner

package/src/charts/kinds/Donut.tsx

@@ -2,8 +2,11 @@ import { Group } from '@visx/group'
 import { Pie } from '@visx/shape'
 import { memo, useMemo, useState } from 'react'
 import type { PointerEvent, ReactNode } from 'react'
+import { assertRequiredProps } from '../../common/validate'
+import type { BasaltProps } from '../../common/props'
 import { ChartTooltipFloat, TooltipBody, TooltipRow } from '../primitives/ChartTooltip'
 import { ChartFrame } from '../primitives/ChartFrame'
+import type { ChartState } from '../primitives/ChartPending'
 import { VX } from '../../tokens'
 import type { SeriesStyle } from '../series'
 import type { SeriesKey } from '../../register'
@@ -15,7 +18,7 @@ import type { SeriesKey } from '../../register'
  */
 export type DonutDatum<K extends string = SeriesKey> = { key: K; value: number }
 
-export type DonutProps<K extends string = SeriesKey> = {
+export type DonutProps<K extends string = SeriesKey> = BasaltProps & {
   data: DonutDatum<K>[]
   /** Fixed height in pixels, forwarded to the internal `ChartFrame`. Default 240. */
   height?: number
@@ -54,6 +57,9 @@ export type DonutProps<K extends string = SeriesKey> = {
   ariaLabel?: string
   /** Forwarded to `ChartFrame` — see `ChartPending`'s JSDoc for the three-state rationale. */
   isPending?: boolean
+  /** The three "nothing to draw" states in one prop — pending → error → empty. See
+   * `ChartState`; `isPending` stays a supported alias for `state={{ pending: true }}`. */
+  state?: ChartState
 }
 
 /**
@@ -66,7 +72,21 @@ export type DonutProps<K extends string = SeriesKey> = {
  * category sync (donut ↔ bar, via a generalized key) is a distinct, deliberately deferred feature.
  */
 function DonutInner<K extends string = SeriesKey>(props: DonutProps<K>) {
-  const { data, height, colorForKey, seriesLabel = (k) => k, ariaLabel, isPending } = props
+  // F-ERR-1: name the component and the prop. Without this a missing accessor surfaces
+  // from inside visx as `undefined is not a function`, which `BasaltErrorBoundary`
+  // swallows into a blank subtree that names nothing.
+  assertRequiredProps('Donut', props, ['data', 'colorForKey'])
+  const {
+    data,
+    height,
+    colorForKey,
+    seriesLabel = (k) => k,
+    ariaLabel,
+    isPending,
+    state,
+    className,
+    style,
+  } = props
 
   const series: SeriesStyle[] = data.map((d) => ({
     key: d.key,
@@ -81,6 +101,9 @@ function DonutInner<K extends string = SeriesKey>(props: DonutProps<K>) {
       {...(height !== undefined && { height })}
       {...(ariaLabel !== undefined && { ariaLabel })}
       {...(isPending !== undefined && { isPending })}
+      {...(state !== undefined && { state })}
+      {...(className !== undefined && { className })}
+      {...(style !== undefined && { style })}
     >
       {(plot) => <DonutPlot {...props} plot={plot} />}
     </ChartFrame>
@@ -245,4 +268,8 @@ function DonutPlot<K extends string = SeriesKey>(props: DonutPlotProps<K>) {
  * Hand-memoized: React Compiler does not process the shipped dist, so we wrap the
  * hot donut kind in `React.memo` to retain the auto-memoization it had as source.
  */
-export const Donut = memo(DonutInner) as typeof DonutInner
+const DonutMemo = memo(DonutInner)
+// Without it every kind reads as `Memo` in React DevTools (audit A16) — a profiler flame
+// graph of nine identically-named nodes names nothing.
+DonutMemo.displayName = 'Donut'
+export const Donut = DonutMemo as typeof DonutInner

package/src/charts/kinds/DualPanel.tsx

@@ -1,4 +1,3 @@
-import { curveMonotoneX } from '@visx/curve'
 import { GridRows } from '@visx/grid'
 import { Group } from '@visx/group'
 import { scaleLinear, scalePoint } from '@visx/scale'
@@ -6,6 +5,8 @@ import { Bar, LinePath } from '@visx/shape'
 import { Threshold } from '@visx/threshold'
 import { memo, useMemo, useRef } from 'react'
 import type { ReactNode } from 'react'
+import { assertRequiredProps } from '../../common/validate'
+import type { BasaltProps } from '../../common/props'
 import { AxisBottomDate, AxisLeftNumeric } from '../primitives/Axes'
 import {
   ChartTooltipFloat,
@@ -18,16 +19,17 @@ import { Crosshair, SeriesDot } from '../primitives/Crosshair'
 import { HoverOverlay } from '../primitives/HoverOverlay'
 import { ZoneRects } from '../primitives/ZoneRects'
 import type { ZoneSpec } from '../primitives/ZoneRects'
+import type { ChartState } from '../primitives/ChartPending'
 import type { CursorResolution } from '../cursor/resolve'
 import { useChartCursor } from '../hooks/useChartCursor'
 import { autoMargin, probeAxisLabels } from '../layout/auto-margin'
-import { deriveTooltipRows, LINE_OVERLAY_STROKE_WIDTH } from '../series'
+import { curveFor, deriveTooltipRows, LINE_OVERLAY_STROKE_WIDTH } from '../series'
 import type { ChartLegendConfig, ChartSeries, SeriesStyle } from '../series'
 import { VX } from '../../tokens'
 import { fmtAxisDate } from '../utils/format'
-import { smartTicks } from '../utils/ticks'
+import { smartTicks, xLabelPxFor } from '../utils/ticks'
 
-export type DualPanelProps<T> = {
+export type DualPanelProps<T> = BasaltProps & {
   data: T[]
   /** Fixed height in pixels, forwarded to the internal `ChartFrame`. Default 240. */
   height?: number
@@ -98,6 +100,9 @@ export type DualPanelProps<T> = {
   ariaLabel?: string
   /** Forwarded to `ChartFrame` — see `ChartPending`'s JSDoc for the three-state rationale. */
   isPending?: boolean
+  /** The three "nothing to draw" states in one prop — pending → error → empty. See
+   * `ChartState`; `isPending` stays a supported alias for `state={{ pending: true }}`. */
+  state?: ChartState
 }
 
 const PANE_GAP = 12
@@ -115,8 +120,23 @@ const PANE_GAP = 12
  * when a series has nulls; lines/bars skip null points (visual gaps).
  */
 function DualPanelInner<T>(props: DualPanelProps<T>) {
-  const { series, chartId, height, barLabel, barColorPositive, legend, ariaLabel, isPending } =
-    props
+  // F-ERR-1: name the component and the prop. Without this a missing accessor surfaces
+  // from inside visx as `undefined is not a function`, which `BasaltErrorBoundary`
+  // swallows into a blank subtree that names nothing.
+  assertRequiredProps('DualPanel', props, ['data', 'getX', 'series', 'getBar'])
+  const {
+    series,
+    chartId,
+    height,
+    barLabel,
+    barColorPositive,
+    legend,
+    ariaLabel,
+    isPending,
+    state,
+    className,
+    style,
+  } = props
 
   // Default the top-pane line overlays to the redesign's 1.9px stroke (docs/DESIGN-SPEC.md §5) —
   // applied once here so the plotted line, the derived legend swatch, and the derived tooltip row
@@ -144,6 +164,9 @@ function DualPanelInner<T>(props: DualPanelProps<T>) {
       {...(height !== undefined && { height })}
       {...(ariaLabel !== undefined && { ariaLabel })}
       {...(isPending !== undefined && { isPending })}
+      {...(state !== undefined && { state })}
+      {...(className !== undefined && { className })}
+      {...(style !== undefined && { style })}
       legend={resolveLegend(legend)}
     >
       {(plot) => <DualPanelPlot {...props} series={styledSeries} plot={plot} />}
@@ -319,7 +342,15 @@ function DualPanelPlot<T>(props: DualPanelPlotProps<T>) {
     ...(cursorResolution !== undefined && { resolution: cursorResolution }),
   })
 
-  const tickValues = useMemo(() => smartTicks(data.map(getX), xMax), [data, xMax, getX])
+  // The horizontal room one x tick label needs, from the SAME formatted set `xLabelsAll` measured
+  // for the bottom gutter — same measured-spacing law `CartesianChart` applies
+  // (`docs/CHARTS-SPEC.md` §1).
+  const xLabelPx = useMemo(() => xLabelPxFor(xLabelsAll), [xLabelsAll])
+
+  const tickValues = useMemo(
+    () => smartTicks(data.map(getX), xMax, xLabelPx),
+    [data, xMax, getX, xLabelPx],
+  )
 
   const barWidth = data.length > 0 ? Math.max((xMax / data.length) * 0.6, 2) : 2
 
@@ -383,6 +414,17 @@ function DualPanelPlot<T>(props: DualPanelPlotProps<T>) {
     return out
   }, [data, fillBetween, visibleSeries])
 
+  // The fill reads the FROM line's curve — same law as ZonedLine's "one curve for all shapes
+  // drawn from one series", extended to the two lines a fill spans: the band takes its shape from
+  // the line it hugs on the low side.
+  const fillCurve = useMemo(
+    () =>
+      curveFor(
+        fillBetween ? visibleSeries.find((s) => s.key === fillBetween.from)?.curve : undefined,
+      ),
+    [fillBetween, visibleSeries],
+  )
+
   type LinePt = { __d: T; __y: number }
   // Per-line valid points, computed once per (data, visibleSeries) — not re-walked inside the
   // render map every paint (parity with MultiLine's seriesPts).
@@ -468,7 +510,7 @@ function DualPanelPlot<T>(props: DualPanelPlotProps<T>) {
               y1={(p) => topYScale(p.__to)}
               clipAboveTo={0}
               clipBelowTo={topH}
-              curve={curveMonotoneX}
+              curve={fillCurve}
               belowAreaProps={{ fill: fillBetween.fill }}
               aboveAreaProps={{ fill: fillBetween.fill }}
             />
@@ -499,7 +541,7 @@ function DualPanelPlot<T>(props: DualPanelPlotProps<T>) {
                 strokeWidth={s.strokeWidth ?? VX.lineWidth}
                 strokeDasharray={s.dash === 'dashed' ? VX.dashArray : undefined}
                 strokeOpacity={s.strokeOpacity ?? 1}
-                curve={curveMonotoneX}
+                curve={curveFor(s.curve)}
               />
             )
           })}
@@ -665,4 +707,8 @@ function DualPanelPlot<T>(props: DualPanelPlotProps<T>) {
  * Hand-memoized: React Compiler does not process the shipped dist, so the hot DualPanel kind is
  * wrapped in `React.memo` to retain the auto-memoization it had as source (parity with ZonedLine).
  */
-export const DualPanel = memo(DualPanelInner) as typeof DualPanelInner
+const DualPanelMemo = memo(DualPanelInner)
+// Without it every kind reads as `Memo` in React DevTools (audit A16) — a profiler flame
+// graph of nine identically-named nodes names nothing.
+DualPanelMemo.displayName = 'DualPanel'
+export const DualPanel = DualPanelMemo as typeof DualPanelInner