basalt-ui 1.41.0 → 2.0.1

package/src/charts/kinds/MultiLine.tsx

@@ -1,322 +0,0 @@
-import { LinePath } from '@visx/shape'
-import { memo, useCallback, useMemo } from 'react'
-import type { ReactNode } from 'react'
-import { assertRequiredProps } from '../../common/validate'
-import type { BasaltProps } from '../../common/props'
-import type { CursorResolution } from '../cursor/resolve'
-import type { CartesianTooltipConfig, AxisConfig, PlotContext } from '../primitives/CartesianChart'
-import { CartesianChart } from '../primitives/CartesianChart'
-import type { ResponsiveChartHeight } from '../primitives/ChartFrame'
-import type { XZoneSpec } from '../primitives/XZoneRects'
-import type { ZoneSpec } from '../primitives/ZoneRects'
-import type { ChartState } from '../primitives/ChartPending'
-import { curveFor, definedOn, LINE_OVERLAY_STROKE_WIDTH, toPlotPoint } from '../series'
-import type { ChartLegendConfig, ChartSeries } from '../series'
-import { VX } from '../../tokens'
-
-export type MultiLineProps<T> = BasaltProps & {
-  data: T[]
-  /** Height in px, or one per size step (`{ base, sm?, md?, lg? }`). Default 240. Forwarded
-   * unchanged; `ChartFrameProps.height` owns the law — steps resolve off the MEASURED width. */
-  height?: number | ResponsiveChartHeight
-  chartId: string
-  /** Extracts the x-axis category (date string) from a data point. */
-  getX: (d: T) => string
-  /** 1+ line series sharing the y-axis(es) — the single source of truth for color, dash, legend,
-   * and tooltip rows. A series opts into the right axis with `axis: 'right'`. */
-  series: ChartSeries<T>[]
-  /** Left y-axis. Collapses the old `yDomain` / `yAutoMaxFloor` / `yAutoMinCeil` / `yAutoPad` /
-   * `numTicksY` / `formatYTick` prop soup into one object. */
-  y?: AxisConfig<T>
-  /** Right y-axis. Passing it is what makes the chart dual-axis — the margin widens by
-   * measurement, and `axis: 'right'` series read against it. */
-  y2?: AxisConfig<T>
-  /** Horizontal value-range overlays (target zones), rendered behind the lines. */
-  zones?: ZoneSpec[]
-  /** Vertical x-range overlays (time windows), rendered behind the lines. Bounds are `getX`
-   * domain keys. */
-  xZones?: XZoneSpec[]
-  /** Horizontal reference lines. Solid by default; set dashed: true for a dashed line. */
-  refLines?: { value: number; color: string; dashed?: boolean }[]
-  /** Exact number of x ticks. Default: as many as fit. Ignored when `xTickValues` is set. */
-  xTicks?: number
-  /** Which domain keys get a tick, from the full key list and the resolved plot width. Takes
-   * precedence over `xTicks` — see `CartesianChartProps.xTickValues` for why a count is not
-   * always enough. */
-  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
-   * keyed by its Monday) — see `CursorResolution`.
-   */
-  cursorResolution?: CursorResolution
-  /** Tooltip config — `label` for a right-aligned header badge, `extraRows` for rows appended
-   * after the derived per-series rows. `false` disables the tooltip entirely. */
-  tooltip?: CartesianTooltipConfig<T> | false
-  /** Marker glyph for per-point markers. Default 'circle'. */
-  markerShape?: 'circle' | 'star'
-  /** Legend config forwarded to `CartesianChart`; `false` disables the legend (sparkline escape).
-   * Default `{ placement: 'bottom' }`. */
-  legend?: ChartLegendConfig | false
-  /** Accessible text alternative, forwarded to `CartesianChart` as `aria-label` (+ `role="group"`). */
-  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
-}
-
-const STAR_R = 6
-
-/** Five-point star path centered at (cx, cy) with outer radius r. */
-function starPath(cx: number, cy: number, r: number): string {
-  const inner = r * 0.4
-  const pts: string[] = []
-  for (let i = 0; i < 10; i++) {
-    const radius = i % 2 === 0 ? r : inner
-    const angle = (Math.PI / 5) * i - Math.PI / 2
-    pts.push(`${cx + radius * Math.cos(angle)},${cy + radius * Math.sin(angle)}`)
-  }
-  return `M${pts.join('L')}Z`
-}
-
-type LinePt<T> = { __d: T; __y: number | null }
-
-/**
- * Every row, in x order, with `__y: null` where the series reports no value. The null row STAYS in
- * the array: `ChartSeries.getValue` documents null as a line GAP, and dropping the row instead
- * makes `LinePath` join straight across a coverage hole — drawing a measurement that was never
- * taken. `defined` on the consuming shape is what turns it back into a gap. Reused by the lines
- * and the markers.
- */
-function seriesPoints<T>(series: ChartSeries<T>, data: readonly T[]): LinePt<T>[] {
-  return data.map((d) => ({ __d: d, __y: toPlotPoint(series.getValue(d)) }))
-}
-
-/**
- * N series sharing one or two y-axes, with optional zones/reference lines, per-point markers
- * (PR stars / status dots), a dashed companion line per series, legend-hover dimming, and a
- * shared-cursor tooltip. Generalizes the multi-line argo charts (e1RM trend, relative
- * progression, training load, fitness trends).
- *
- * Composes `CartesianChart` for measuring, scales, grid, axes, cursor, and tooltip — this kind
- * draws ONLY the marks (lines + per-point markers). `series` is the single array that drives the
- * plotted lines, the legend, and the tooltip rows.
- *
- * X-axis is built from the full `data` array so the calendar is preserved even when a series
- * has nulls; each series line BREAKS at a null point, leaving a real gap rather than interpolating
- * across it.
- */
-function MultiLineInner<T>(props: MultiLineProps<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('MultiLine', props, ['data', 'getX', 'series'])
-  const {
-    data,
-    chartId,
-    getX,
-    series,
-    y,
-    y2,
-    zones,
-    xZones,
-    refLines,
-    xTicks,
-    xTickValues,
-    formatX,
-    xLabelRotate,
-    cursorResolution,
-    tooltip,
-    markerShape = 'circle',
-    height,
-    legend,
-    ariaLabel,
-    isPending,
-    state,
-    className,
-    style,
-  } = props
-
-  // Default 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 all agree.
-  const styledSeries = useMemo<ChartSeries<T>[]>(
-    () => series.map((s) => ({ ...s, strokeWidth: s.strokeWidth ?? LINE_OVERLAY_STROKE_WIDTH })),
-    [series],
-  )
-
-  return (
-    <CartesianChart
-      data={data}
-      chartId={chartId}
-      getX={getX}
-      series={styledSeries}
-      {...(y !== undefined && { y })}
-      {...(y2 !== undefined && { y2 })}
-      {...(zones !== undefined && { zones })}
-      {...(xZones !== undefined && { xZones })}
-      {...(refLines !== undefined && { refLines })}
-      {...(xTicks !== undefined && { xTicks })}
-      {...(xTickValues !== undefined && { xTickValues })}
-      {...(formatX !== undefined && { formatX })}
-      {...(xLabelRotate !== undefined && { xLabelRotate })}
-      {...(cursorResolution !== undefined && { cursorResolution })}
-      {...(tooltip !== undefined && { tooltip })}
-      {...(height !== undefined && { height })}
-      {...(legend !== undefined && { legend })}
-      {...(ariaLabel !== undefined && { ariaLabel })}
-      {...(isPending !== undefined && { isPending })}
-      {...(state !== undefined && { state })}
-      {...(className !== undefined && { className })}
-      {...(style !== undefined && { style })}
-    >
-      {(ctx: PlotContext<T>) => <MultiLineMarks getX={getX} markerShape={markerShape} ctx={ctx} />}
-    </CartesianChart>
-  )
-}
-
-/** Draws lines + per-point markers for the visible series, dimming everything except the
- * legend-highlighted series (and its dashed companions, matched by `parent`). */
-function MultiLineMarks<T>({
-  getX,
-  markerShape,
-  ctx,
-}: {
-  getX: (d: T) => string
-  markerShape: 'circle' | 'star'
-  ctx: PlotContext<T>
-}) {
-  const { data, visible, xScale, yScale, y2Scale, highlighted } = ctx
-
-  // Memoized per (visible, data), NOT recomputed per render: the cursor is a shared store now, so
-  // every pointer frame re-renders every chart on the page. Without this, each frame walks the
-  // full series × data grid twice (lines, then markers) and allocates a fresh point array for
-  // each — the exact per-paint recompute the
-  // pre-rebuild kind memoized away.
-  const pointsBySeries = useMemo(() => {
-    const m = new Map<string, LinePt<T>[]>()
-    for (const s of visible) m.set(s.key, seriesPoints(s, data))
-    return m
-  }, [visible, data])
-
-  // A series stays at full opacity when nothing is highlighted, when it IS the highlighted series,
-  // or when it is a companion of the highlighted series (its `parent` matches). `useCallback`
-  // (rather than a plain function) gives both a stable identity across renders where `highlighted`/
-  // `y2Scale` haven't changed, so `markerNodes` below can depend on THEM rather than the raw
-  // scale/highlighted values a closure would otherwise hide from the deps array.
-  const dimOpacity = useCallback(
-    (s: ChartSeries<T>): number =>
-      highlighted === null || s.key === highlighted || s.parent === highlighted ? 1 : 0.25,
-    [highlighted],
-  )
-
-  const scaleFor = useCallback(
-    (s: ChartSeries<T>) => (s.axis === 'right' && y2Scale !== null ? y2Scale : yScale),
-    [y2Scale, yScale],
-  )
-
-  // Memoized for the same reason as `pointsBySeries` above — the shared cursor re-renders every
-  // mounted chart on every pointer frame, and this walks every visible series' points calling the
-  // consumer's `getMarker` each time otherwise.
-  const markerNodes = useMemo<ReactNode[]>(
-    () =>
-      visible.flatMap((s) => {
-        const getMarker = s.getMarker
-        if (!getMarker) return [] as ReactNode[]
-        const scale = scaleFor(s)
-        const op = dimOpacity(s)
-        const markers: ReactNode[] = []
-        for (const p of pointsBySeries.get(s.key) ?? []) {
-          // A null point is an absence: no dot, no marker — the same claim the line's `defined`
-          // makes by breaking there.
-          if (p.__y === null) continue
-          const m = getMarker(p.__d)
-          if (m === null) continue
-          const cx = xScale(getX(p.__d)) ?? 0
-          const cy = scale(p.__y)
-          // A non-positive value on a log axis (or any input a scale can't place) maps to NaN —
-          // skip the marker rather than paint one at `cy="NaN"`.
-          if (!Number.isFinite(cy)) continue
-          const color = m.color ?? s.color
-          const r = m.r ?? (markerShape === 'star' ? STAR_R : VX.dotR)
-          const ring = m.ring ?? true
-          const fillOpacity = (m.fillOpacity ?? 1) * op
-          markers.push(
-            markerShape === 'star' ? (
-              <path
-                key={`mk-${s.key}-${getX(p.__d)}`}
-                d={starPath(cx, cy, r)}
-                fill={color}
-                fillOpacity={fillOpacity}
-                {...(ring && { stroke: VX.dotStroke, strokeWidth: 1.5, strokeOpacity: op })}
-              />
-            ) : (
-              <circle
-                key={`mk-${s.key}-${getX(p.__d)}`}
-                cx={cx}
-                cy={cy}
-                r={r}
-                fill={color}
-                fillOpacity={fillOpacity}
-                {...(ring && { stroke: VX.dotStroke, strokeWidth: 2, strokeOpacity: op })}
-              />
-            ),
-          )
-        }
-        return markers
-      }),
-    [visible, pointsBySeries, xScale, getX, scaleFor, dimOpacity, markerShape],
-  )
-
-  return (
-    <>
-      {visible.map((s) => {
-        const pts = pointsBySeries.get(s.key) ?? []
-        // A series that measured nothing (the legend-only `getValue: () => null` idiom) draws no
-        // path at all, rather than an empty one.
-        if (!pts.some((p) => p.__y !== null)) return null
-        const scale = scaleFor(s)
-        return (
-          <LinePath<LinePt<T>>
-            key={`line-${s.key}`}
-            data={pts}
-            x={(p) => xScale(getX(p.__d)) ?? 0}
-            // Never reached with a null `__y`: d3's line generator calls the position accessors
-            // only for points `defined` accepted. The `NaN` floor is a type-level one, and it can
-            // never paint at zero the way a `?? 0` would.
-            y={(p) => scale(p.__y ?? NaN)}
-            // Two absences, one guard. A null value is a documented GAP (`ChartSeries.getValue`),
-            // and a non-positive value on a log axis maps to NaN via `scale(p.__y)` — `defined`
-            // breaks the line at both instead of interpolating across the hole (a coverage hole
-            // reading as a measured straight line) or emitting a NaN path command, which per SVG
-            // error handling blanks the ENTIRE polyline from that point on.
-            defined={definedOn(scale)}
-            stroke={s.color}
-            strokeWidth={s.strokeWidth ?? LINE_OVERLAY_STROKE_WIDTH}
-            strokeDasharray={s.dash === 'dashed' ? VX.dashArray : undefined}
-            strokeOpacity={dimOpacity(s) * (s.strokeOpacity ?? 1)}
-            curve={curveFor(s.curve)}
-          />
-        )
-      })}
-
-      {markerNodes}
-    </>
-  )
-}
-
-/**
- * Hand-memoized: React Compiler does not process the shipped dist, so the hot MultiLine kind is
- * wrapped in `React.memo` to retain the auto-memoization it had as source (parity with ZonedLine).
- */
-const MultiLineMemo = memo(MultiLineInner)
-// Without it every kind reads as `Memo` in React DevTools (audit A16) — a profiler flame
-// graph of nine identically-named nodes names nothing.
-MultiLineMemo.displayName = 'MultiLine'
-export const MultiLine = MultiLineMemo as typeof MultiLineInner

package/src/charts/kinds/StackedArea.tsx

@@ -1,267 +0,0 @@
-import { AreaStack } from '@visx/shape'
-import { memo, useCallback, useMemo } from 'react'
-import { assertRequiredProps } from '../../common/validate'
-import type { BasaltProps } from '../../common/props'
-import type { CursorResolution } from '../cursor/resolve'
-import { CartesianChart } from '../primitives/CartesianChart'
-import type { AxisConfig, PlotContext } from '../primitives/CartesianChart'
-import type { ResponsiveChartHeight } from '../primitives/ChartFrame'
-import type { ChartState } from '../primitives/ChartPending'
-import { curveFor } from '../series'
-import type { ChartLegendConfig, ChartSeries } from '../series'
-
-export type StackedAreaProps<T> = BasaltProps & {
-  data: T[]
-  /** Height in px, or one per size step (`{ base, sm?, md?, lg? }`). Default 240. Forwarded
-   * unchanged; `ChartFrameProps.height` owns the law — steps resolve off the MEASURED width. */
-  height?: number | ResponsiveChartHeight
-  chartId: string
-  getX: (d: T) => string
-  /** The stacked bands, bottom to top — the single source of truth for color, legend, and tooltip
-   * rows. Typically `mark: 'area'` (rendered as a `bar`-shaped legend/tooltip swatch). */
-  series: ChartSeries<T>[]
-  /** Axis config for ticks/format/grid. `domain` defaults to the summed per-point stack total
-   * (padded ×1.1, or `autoMaxFloor` if higher) rather than a per-series max — the seam a stacked
-   * chart needs, since the plotted quantity is the cumulative band top, not any one series' own
-   * value. Pass a fixed tuple or your own function to override. No `scale` — stacking sums bar
-   * heights directly and a log axis has no additive zero to sum from. */
-  y?: Omit<AxisConfig<T>, 'scale'>
-  /** Exact number of x ticks. Default: as many as fit. Ignored when `xTickValues` is set. */
-  xTicks?: number
-  /** Which domain keys get a tick, from the full key list and the resolved plot width. Takes
-   * precedence over `xTicks` — see `CartesianChartProps.xTickValues` for why a count is not
-   * always enough. */
-  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
-   * keyed by its Monday) — see `CursorResolution`.
-   */
-  cursorResolution?: CursorResolution
-  /** Legend config forwarded to `CartesianChart`; `false` disables the legend (sparkline escape).
-   * Default `{ placement: 'bottom' }`. */
-  legend?: ChartLegendConfig | false
-  /** Accessible text alternative, forwarded as `aria-label` (+ `role="group"`). */
-  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
-}
-
-/**
- * A stack is only as dense as its sparsest band. A band's value is only meaningful as part of a
- * cumulative total, so a row where ANY visible band reports `null` has no total — every band gaps
- * across it. Reading the missing band as `0` instead would be a positive claim the quantity was
- * measured at zero, which is exactly the absence-as-data lie `ChartSeries.getValue`'s null
- * contract exists to prevent.
- */
-function rowIsDense<T>(d: T, bands: readonly ChartSeries<T>[]): boolean {
-  return bands.every((s) => s.getValue(d) !== null)
-}
-
-/**
- * Multi-series stacked-area chart with an optional derived legend (default on) and legend-hover
- * dimming. Each band's fillOpacity is dimmed when a different key is highlighted via the legend.
- *
- * **A stack is only as dense as its sparsest series.** A row where any VISIBLE band is null is
- * dropped from the stack entirely — the bands break across that x, the crosshair reports no
- * cumulative value there, and the axis domain ignores it. Toggling the sparse band off in the
- * legend closes the gap, because density is measured against the visible set. A chart that needs
- * a null band to read as zero must say so in its own `getValue`.
- *
- * Composes `CartesianChart` (`docs/CHARTS-SPEC.md` §2) — margin, scale, grid, axes, cursor, and
- * tooltip are the primitive's job. This file draws only the `AreaStack` bands.
- *
- * The tooltip must render top-to-bottom (matching the visual stack read from the top), but the
- * marks must stack bottom-to-top (matching `series`' own order) — the two can't share one order.
- * `CartesianChart`'s `series` prop drives BOTH the derived tooltip rows and legend, so `series` is
- * passed reversed to it (tooltip/legend read top-first); the marks then reverse `ctx.visible` back
- * to restore the original bottom-to-top stacking order for `AreaStack`'s `keys`.
- */
-function StackedAreaInner<T>(props: StackedAreaProps<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('StackedArea', props, ['data', 'getX', 'series'])
-  const {
-    data,
-    chartId,
-    getX,
-    series,
-    y,
-    xTicks,
-    xTickValues,
-    formatX,
-    xLabelRotate,
-    cursorResolution,
-    height,
-    legend,
-    ariaLabel,
-    isPending,
-    state,
-    className,
-    style,
-  } = props
-
-  // The stack sums band heights via `getValue` totals directly — a log axis has no additive zero
-  // to sum from (`docs/CHARTS-SPEC.md`'s null-gap + log contract, mirrored from `Bars`' own guard).
-  if (
-    process.env.NODE_ENV !== 'production' &&
-    (y as { scale?: string } | undefined)?.scale === 'log'
-  ) {
-    throw new Error(
-      'StackedArea: cannot use a log axis (y.scale: "log") — the stack sums band heights, ' +
-        'and a log axis has no additive zero to sum from.',
-    )
-  }
-
-  // The plotted quantity is the CUMULATIVE stack top, not any one series' value — the built-in
-  // 'auto' domain (per-series max) would clip a multi-band stack. Skipped when the caller already
-  // supplies a fixed tuple or their own domain function.
-  const yConfig = useMemo<AxisConfig<T>>(() => {
-    const base = y ?? {}
-    if (base.domain !== undefined && base.domain !== 'auto') return base
-    const pad = base.autoPad ?? 1.1
-    return {
-      ...base,
-      // Sums the VISIBLE bands only, so toggling one off in the legend shrinks the axis instead
-      // of leaving a permanent empty gap above the stack.
-      domain: (rows: readonly T[], visible: readonly ChartSeries<T>[]) => {
-        let maxTotal = 0
-        for (const d of rows) {
-          // A sparse row is not drawn, so it cannot set the axis top either.
-          if (!rowIsDense(d, visible)) continue
-          let total = 0
-          for (const s of visible) total += s.getValue(d) ?? 0
-          if (total > maxTotal) maxTotal = total
-        }
-        return [0, Math.max(maxTotal, base.autoMaxFloor ?? maxTotal) * pad]
-      },
-    }
-  }, [y])
-
-  // A stacked band's crosshair dot belongs at the CUMULATIVE band top — the edge the reader is
-  // tracking — not at the band's own raw value, which sits somewhere inside the fill.
-  const stackedCursorValue = useCallback(
-    (d: T, s: ChartSeries<T>, visible: readonly ChartSeries<T>[]): number | null => {
-      // No total on a sparse row — the bands gap there, so a dot would sit on nothing. The
-      // per-band tooltip rows keep skipping their own nulls (`deriveTooltipRows`), so a row the
-      // stack cannot draw never contributes a value anywhere.
-      if (!rowIsDense(d, visible)) return null
-      let total = 0
-      // `visible` arrives top-to-bottom (the `series.toReversed()` handed to the primitive);
-      // stacking accumulates bottom-up.
-      for (let i = visible.length - 1; i >= 0; i--) {
-        const band = visible[i] as ChartSeries<T>
-        total += band.getValue(d) ?? 0
-        if (band.key === s.key) return total
-      }
-      return null
-    },
-    [],
-  )
-
-  // Memoized: this array is `CartesianChart`'s `series` prop, and a fresh identity every render
-  // would bust every memo keyed on it inside the primitive (domains, tick labels, margin, visible).
-  const reversedSeries = useMemo(() => series.toReversed(), [series])
-
-  return (
-    <CartesianChart
-      data={data}
-      chartId={chartId}
-      getX={getX}
-      series={reversedSeries}
-      y={yConfig}
-      cursorValue={stackedCursorValue}
-      {...(xTicks !== undefined && { xTicks })}
-      {...(xTickValues !== undefined && { xTickValues })}
-      {...(formatX !== undefined && { formatX })}
-      {...(xLabelRotate !== undefined && { xLabelRotate })}
-      {...(cursorResolution !== undefined && { cursorResolution })}
-      {...(height !== undefined && { height })}
-      {...(legend !== undefined && { legend })}
-      {...(ariaLabel !== undefined && { ariaLabel })}
-      {...(isPending !== undefined && { isPending })}
-      {...(state !== undefined && { state })}
-      {...(className !== undefined && { className })}
-      {...(style !== undefined && { style })}
-    >
-      {(ctx) => <StackedAreaMarks getX={getX} ctx={ctx} />}
-    </CartesianChart>
-  )
-}
-
-/**
- * The bands. A component rather than an inline render-prop body so the stack bookkeeping can be
- * memoized: the cursor is a shared store, so every pointer frame re-renders every chart, and
- * rebuilding the key list + lookup Map + a copy of `data` per frame is pure waste.
- */
-function StackedAreaMarks<T>({ getX, ctx }: { getX: (d: T) => string; ctx: PlotContext<T> }) {
-  const { visible, xScale, yScale, highlighted } = ctx
-
-  // Restore bottom-to-top order for the actual stacking geometry (see the component doc above).
-  const { groups, seriesByKey } = useMemo(() => {
-    const stackOrder = visible.toReversed()
-    return {
-      groups: stackOrder.map((s) => s.key),
-      seriesByKey: new Map(stackOrder.map((s) => [s.key, s])),
-    }
-  }, [visible])
-
-  // `AreaStack` wants a mutable array; `ctx.data` is readonly. Copy once per data change.
-  const rows = useMemo(() => [...ctx.data], [ctx.data])
-
-  // `AreaStack` draws every band from ONE curve — the bands share their boundaries, so two curves
-  // would leave gaps and overlaps between them. `visible` is in `reversedSeries` order (top band
-  // first), so this resolves to the TOPMOST VISIBLE band that declares a `curve` — the last such
-  // entry in the caller's own `series` array. A band declaring none is skipped rather than read as
-  // the monotone default, and a HIDDEN one is never consulted, so a legend toggle can hand the
-  // stack to the next declarer down. `series.curve.test.tsx` pins all four halves of that.
-  const curve = curveFor(visible.find((s) => s.curve !== undefined)?.curve)
-
-  return (
-    <AreaStack<T, string>
-      data={rows}
-      keys={groups}
-      x={(d) => xScale(getX(d.data)) ?? 0}
-      y0={(d) => yScale(d[0]) ?? 0}
-      y1={(d) => yScale(d[1]) ?? 0}
-      // d3's stack layout needs a number per cell, so a null still enters the layout as 0 — but
-      // `defined` keeps that cell out of every band's PATH, so the zero is never drawn. Without it
-      // a missing band reads as a measured zero and the bands above it slide down onto it.
-      value={(d, key) => seriesByKey.get(key)?.getValue(d) ?? 0}
-      defined={(d) => rowIsDense(d.data, visible)}
-      curve={curve}
-    >
-      {({ stacks, path }) =>
-        stacks.map((stack) => (
-          <path
-            key={`stack-${stack.key}`}
-            d={path(stack) || ''}
-            fill={seriesByKey.get(stack.key)?.color}
-            stroke="transparent"
-            fillOpacity={highlighted === null || highlighted === stack.key ? 1 : 0.25}
-          />
-        ))
-      }
-    </AreaStack>
-  )
-}
-
-/**
- * Hand-memoized: React Compiler does not process the shipped dist, so we wrap the
- * hot stacked-area kind in `React.memo` to retain the auto-memoization it had as source
- * (parity with ZonedLine / Bars / MultiLine).
- */
-const StackedAreaMemo = memo(StackedAreaInner)
-// Without it every kind reads as `Memo` in React DevTools (audit A16) — a profiler flame
-// graph of nine identically-named nodes names nothing.
-StackedAreaMemo.displayName = 'StackedArea'
-export const StackedArea = StackedAreaMemo as typeof StackedAreaInner