@eifi1/ui-kit 0.54.0 → 0.55.0

package/src/components/series-chart.tsx

@@ -1,1906 +0,0 @@
-// The measurement plot: series against a swept numeric abscissa, any number of y axes,
-// dash patterns, vertical spans, and drag-to-zoom. Lifted out of lenkbank, where every
-// chart on every screen is this one arrangement of the kit's shell — so the arrangement
-// lives here once instead of as thirteen hand-assembled copies drifting apart.
-//
-// Built on `ChartContainer` + `ChartTooltipContent`, so it themes with the rest of the
-// chart kit: series default to the `--chart-N` ramp, axis text and grid take the
-// shell's tokens. It stays domain-free — every unit, title and number format is the
-// caller's, and the few words it can say itself are the `seriesChart` label namespace.
-//
-// **Every series may keep its own scale.** Position runs in millimetres and jerk in
-// hundreds of thousands of them per second cubed; on one axis the position line is
-// flat against the bottom. Normalising each series to its peak makes the y axis mean
-// nothing, so a caller declares an axis per incomparable channel instead, and may hide
-// all but the ones worth a column of numbers.
-//
-// Charts are drawn left-to-right in every writing direction — an abscissa is a number
-// line, not text — so `orientation` below is physical, and only the HTML chrome (the
-// reset button) is placed by logical side.
-//
-// **Bars, areas and periods too (0.8.0).** keksdose drew five money charts in raw
-// recharts — net worth, investments, income/expense, grouped payees, stacked categories
-// — each re-deciding the grid, the tooltip, the axis width and the "—" for a gap. They
-// are the same arrangement with a different mark, so a series now says `type: "bar" |
-// "area"` (and `stack`), and the abscissa may be a row of PERIODS (`x.type:
-// "category"`) or real dates (`x.type: "time"`) instead of a number the app had to
-// invent. What each of those does to the zoom is decided in one place,
-// `defaultZoomAxes` in `chart-zoom-core.tsx`.
-//
-// **An axis budget (0.15.1).** Every visible axis reserves its band, and four of them
-// leave a phone nothing to plot. A chart draws at most `maxVisibleAxes`, and — on its
-// own, when it is too narrow for the ones it has — one a side; the rest go hidden,
-// still scaling their lines, and their series say the unit the title no longer does.
-// The rule is `series-chart-budget.ts`.
-//
-// **A row budget (0.34, KS U2).** Opt-in: `maxRows` thins a long table to at most that
-// many rows before recharts sees it, by ENVELOPE — each bucket's lowest and highest row
-// of every drawn series — never by stride, which aliases a fast tone into a slow wave.
-// A zoom thins the window on show, so it draws more detail, not the same rows larger.
-// The rule is `series-chart-thin.ts`.
-import { useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
-import type { KeyboardEvent, ReactNode, RefObject } from "react";
-import {
-  Area,
-  Bar,
-  CartesianGrid,
-  ComposedChart,
-  Label,
-  Line,
-  ReferenceDot,
-  ReferenceLine,
-  Rectangle,
-  XAxis,
-  YAxis,
-  usePlotArea,
-  useXAxisScale,
-  type BarShapeProps,
-} from "recharts";
-import { ChartContainer, ChartTooltip, ChartTooltipContent, type ChartConfig } from "./chart";
-import { useFigureDescription } from "./chart-figure";
-import { rovingTarget } from "../lib/direction";
-import {
-  DEFAULT_Y_AXIS,
-  axisExtent,
-  withChartZoom,
-  type ZoomAxesSetting,
-  type ZoomBinding,
-  type ZoomFitSource,
-} from "./chart-zoom-core";
-import { STEP_DASH, strokeDash, type LegendEntry } from "./toggle-legend";
-import { DEFAULT_SERIES_CHART_LABELS, type SeriesChartLabels } from "./series-chart-labels";
-import {
-  categoryTicks,
-  integerTicks,
-  niceTicks,
-  tickTarget,
-  timeTicksWithUnit,
-  type TimeTickUnit,
-} from "./series-chart-ticks";
-// The tick module stays internal; the one type of it a public prop names is re-exported.
-export type { TimeTickUnit } from "./series-chart-ticks";
-import { autoAxisBudget, axisUnit, budgetedAxes, type SeriesChartAxisBudget } from "./series-chart-budget";
-import { thinnedRows } from "./series-chart-thin";
-// The rule stays internal, like the ticks; the one type a public prop names is re-exported.
-export type { SeriesChartAxisBudget } from "./series-chart-budget";
-import {
-  AXIS_TITLE_OFFSET,
-  MIN_TICK_GAP,
-  TIME_TICK_FORMAT,
-  anchoredBand,
-  axisBandWidth,
-  extend,
-  finite,
-  padBand,
-  resolveTicks,
-  soleSeriesColor,
-  tiltedTickBand,
-  xModel,
-  type XModel,
-} from "./series-chart-axes";
-// The pure axis and series helpers live in series-chart-axes.ts (MOD-9); their public
-// names are still this module's, so `/chart` and the barrel export them as before.
-export {
-  AXIS_TICK_WIDTH,
-  AXIS_TITLE_STRIP,
-  anchoredBand,
-  axisBandWidth,
-  mergeSeries,
-  oneAxis,
-  padBand,
-  paddedDomain,
-  seriesKey,
-  soleSeriesColor,
-  visibleSeries,
-} from "./series-chart-axes";
-export type { SeriesSource } from "./series-chart-axes";
-import { paletteFor } from "../theme/chart-palette";
-import {
-  useKitChartTooltipPlacement,
-  useKitLabels,
-  useKitLocale,
-  type ChartTooltipPlacement,
-  type LabelOverride,
-} from "../i18n/kit-labels";
-import { useBreakpoint } from "../hooks/use-breakpoint";
-import { useTextSize } from "../theme/text-size";
-import { chartHeightProps, type ChartHeight } from "./chart-height";
-import { useChartEdge, useEdgesInForce } from "./chart-edge";
-import { cn } from "../lib/cn";
-import { formatWithMinus } from "../lib/minus";
-
-/**
- * One line, area or bar run of a {@link SeriesChart}.
- *
- * `TRow` is the chart's row type (0.53, keksdose after 0.52), and only `dot` reads it: its
- * `point.row` is that type. Without a type argument a series is what it was, and a chart
- * of typed rows still takes it — see {@link SeriesChartProps}.
- */
-export interface SeriesChartSeries<TRow extends object = object> {
-  /** The row key this line reads — and the `--color-<key>` it is painted with, so it
-   *  must be a CSS identifier. Build keys out of data with {@link seriesKey}. */
-  key: string;
-  label: ReactNode;
-  /** Any CSS colour the chart shell accepts (hex, rgb/hsl, `var(--token)`). Default:
-   *  the kit's categorical ramp by position, `paletteFor(index)`. */
-  color?: string;
-  /** Marks the PAIRED line of a pair — the return stroke against the out-stroke, the
-   *  reference against the measurement. Shorthand for `dash: 1`. */
-  dashed?: boolean;
-  /** Which of {@link STROKE_PATTERNS} this line takes, for charts where the stroke says
-   *  WHICH QUANTITY and the colour says WHICH MEASUREMENT.
-   *
-   *  Or an SVG `stroke-dasharray` string of the caller's own, for a pattern the five do
-   *  not have: keksdose's `"4 3"`, a tighter dash than the ladder's `"5 4"` that its
-   *  hand-drawn recharts lines used before the kit. The legend
-   *  entry ({@link seriesLegendEntries}) carries the same string, so it draws the same
-   *  pattern. */
-  dash?: number | string;
-  /** `stepAfter`, for a whole-number channel that jumps rather than travels — a
-   *  straight line between index 0 and index 1 draws an index of 0.5, which does not
-   *  exist. Drawn in the {@link STEP_DASH} pattern, whatever `dash` says. */
-  step?: boolean;
-  /** Which of `axes` this line is measured on. Default: `"y"`, the single one. */
-  axis?: string;
-  /**
-   * The mark. `"line"` (the default) is what every chart before 0.8.0 drew. `"bar"` and
-   * `"area"` are read as a LENGTH from zero, so the axis they stand on always includes
-   * zero (see `SeriesChartAxis.includeZero`) and the zoom treats them differently (see
-   * `defaultZoomAxes`). Bars without a `stack` stand side by side in each slot — the
-   * grouped bars of keksdose's payee report.
-   */
-  type?: SeriesChartType;
-  /**
-   * Bars or areas with the same `stack` are drawn on top of each other and the axis is
-   * fitted to their SUM (positive and negative layers apart, like recharts'
-   * `stackOffset="sign"`). keksdose's spending-by-category area. Ignored on a line:
-   * recharts cannot stack one.
-   */
-  stack?: string;
-  /**
-   * Marks on the line's (or area's) points. `true` rings every sample — the price
-   * history, where a shop has a value only on the days somebody shopped there and the
-   * dots are the only thing saying which points were MEASURED. A function decides per
-   * point: `true` for the default dot, `false`/`null` for none, or any SVG node drawn
-   * as-is at `point.cx`/`point.cy` — a buy/sell marker on keksdose's paper price.
-   * Never called for a point with no value. Bars have no points, and ignore it.
-   * `point.row` is the caller's own row, typed as the chart's rows are (0.53).
-   */
-  dot?: boolean | ((point: SeriesChartPoint<TRow>) => ReactNode);
-  /** Line (or area outline) weight in px. Default 2, or 1.5 for a `step`. keksdose
-   *  draws the subject of a chart at 2.5 and the reference it is read against at 1.5. */
-  strokeWidth?: number;
-  /** `"linear"` for a line that must not look smoothed — keksdose's cash-buffer
-   *  PROJECTION, a straight extrapolation that a monotone curve would dress up as data.
-   *  Default `"monotone"`; `step` wins over both. */
-  curve?: "monotone" | "linear";
-  /** An area's or bar's fill opacity. Default: 1 for a bar, 0.55 for a stacked area
-   *  (the layers must stay tellable apart where they meet) and 0.2 for a single one. */
-  fillOpacity?: number;
-  /**
-   * The dot that follows the pointer along a line or an area. `false` takes it off a
-   * series that is not a measurement — keksdose's cash-buffer PROJECTION, where a hover
-   * ring on the extrapolated line reads as a sampled value (`cash-buffer-chart.tsx`).
-   * `{ r }` sets its radius. Default: recharts' dot. Bars have none, and ignore it.
-   */
-  activeDot?: boolean | { r?: number };
-  /**
-   * The shortest a bar of this series is drawn, in px — recharts' `minPointSize`. A
-   * zero or a value too small to see keeps a visible stub, so an empty slot still reads
-   * as a slot with a value rather than a gap: keksdose's weekday pattern, where a
-   * Sunday with no spending drew a 2% stub by hand. Only the DRAWING changes: the axis
-   * is fitted to the values, and the tooltip, the keyboard stops and every accessible
-   * name still say 0. A hole (no value in the row) stays a hole. Overrides the chart's
-   * {@link SeriesChartProps.minBarLength}; `0` turns it off for this series. Meant for
-   * unstacked bars — in a `stack` the stub is drawn over the layer above it. Lines and
-   * areas ignore it.
-   */
-  minBarLength?: number;
-}
-
-/** What a series draws. See {@link SeriesChartSeries.type}. */
-export type SeriesChartType = "line" | "bar" | "area";
-
-/** One point of a series, as a `dot` function is handed it. `TRow` is the chart's row
- *  type (0.53); without one, `row` is a {@link SeriesChartRow}, as before. */
-export interface SeriesChartPoint<TRow extends object = object> {
-  /** The series' key. */
-  key: string;
-  /** The row's position in `rows`. */
-  index: number;
-  /** The caller's own row, with everything the chart did not plot still in it: the very
-   *  object in `rows`, typed as `rows` is. */
-  row: SeriesChartRowOf<TRow>;
-  /** The abscissa in the caller's terms: the number, the category, or (time) a Date. */
-  x: SeriesChartXValue;
-  value: number;
-  /** Where the point is drawn, in the chart's pixels. */
-  cx: number;
-  cy: number;
-  /** The series' paint, `var(--color-<key>)`. */
-  color: string;
-}
-
-/** A row of a series chart: one abscissa value and the series' values at it. Anything
- *  else in it (a raw ISO period for a drilldown) rides along untouched and is handed
- *  back in {@link SeriesChartPoint.row} and {@link SeriesChartHit.row} — typed as the
- *  caller's rows are since 0.53, and as this where their type names no keys. */
-export type SeriesChartRow = Readonly<Record<string, unknown>>;
-
-/**
- * The row a hit or a point hands back, for a chart whose rows are `TRow[]` (0.53, keksdose
- * after 0.52): `TRow` itself, so a drilldown reads `hit.row.rawPeriod` as the string it
- * is. A {@link SeriesChartRow} where `TRow` names no keys — `object`, the default, which
- * keeps `SeriesChartHit` and `SeriesChartPoint` without a type argument what they were, and
- * the `object[]` rows an app passes today; `{}`; and `any` or `never` (`rows={[]}`), which
- * are both assignable to `null` while no object type is.
- *
- * Both tests take `TRow` in the CHECKED position, never in the `extends` one, so TypeScript
- * measures every type below as covariant in it (`SeriesChartSeries`, through `dot`'s
- * parameter, contravariant) and relates two of them by their type arguments alone: a
- * `SeriesChartHit<Month>` is a `SeriesChartHit`, and a handler or a series typed without an
- * argument fits a chart of `Month` rows, though an interface has no index signature and is
- * not, field by field, a `SeriesChartRow`. Written `object extends TRow ?`, the type is
- * invariant and both of those stop type-checking.
- */
-type SeriesChartRowOf<TRow> = [TRow] extends [null]
-  ? SeriesChartRow
-  : [keyof TRow] extends [never]
-    ? SeriesChartRow
-    : TRow;
-
-/** An abscissa value: a number (`x.type: "number"`), a category (a string, a number or
- *  a Date standing for a period), or a time (a Date, epoch ms or an ISO string). */
-export type SeriesChartXValue = number | string | Date;
-
-/** Ticks a caller decides — a list, or a function of the domain on show, so a zoom
- *  window gets ticks from the same rule instead of none. */
-export type SeriesChartTickValues<T> = readonly T[] | ((domain: [number, number]) => readonly T[] | undefined);
-
-interface SeriesChartAxisShape {
-  id: string;
-  /**
-   * Which side of the plot the ticks stand on. Left unless said otherwise — and said
-   * otherwise for the right-hand chart of a FACING pair (see `facingAxes`), whose
-   * scales go on the outside so neither column of numbers stands between two pictures
-   * being compared.
-   */
-  orientation?: "left" | "right";
-  /** Tints the ticks — and the title too, when exactly one series is measured on this
-   *  axis (see {@link soleSeriesColor}). */
-  color?: string;
-  /** What the TICKS need, in px. The title's strip is added on top. Default 48. */
-  width?: number;
-  /**
-   * The unit, bare — `"mm/s"`. The title says it while the axis is drawn; when it is not
-   * (`hide`, or over the chart's axis budget — see {@link SeriesChartProps.maxVisibleAxes})
-   * the series on it say it instead, as "Velocity (mm/s)": in the tooltip of a chart
-   * whose budget hid the axis, and in the legend {@link seriesLegendEntries} builds when
-   * handed the axes. Default: the parenthesised tail of `title` ("Load (N)" → "N").
-   * `""` for a quantity with no unit whose title merely ends in brackets.
-   */
-  unit?: string;
-  /**
-   * Pin the scale instead of fitting it to this chart's data. For a ROW of charts
-   * read against each other: auto-fitted, a 200 N loop and a 2000 N one draw the
-   * identical picture, and the comparison the layout promises is the one it fails.
-   */
-  domain?: [number, number];
-  /** A tick, formatted — as a BARE number. The unit is said once, in the title; the
-   *  tooltip gets it from `valueFormat`. Default: `Intl.NumberFormat` in the kit's
-   *  locale, up to two fraction digits. */
-  format?: (value: number) => string;
-  /**
-   * The tick values, instead of the round ones the chart picks. For a grid the DATA
-   * dictates — keksdose's price axes tick on whole cents (`pricePaddedDomain`), where a
-   * 1/2/5 ladder would print €1.25 under a formatter that can only say €1.3. Values
-   * outside the domain on show are dropped; a function is asked again for every zoom
-   * window, so the cent grid can refine with it.
-   */
-  tickValues?: SeriesChartTickValues<number>;
-  /**
-   * Keep zero inside the fitted band. On by default for an axis carrying a bar or an
-   * area — their length IS the value, and a truncated baseline draws 40 as three times
-   * 20 — and off for lines, whose shape is the point (a stock price anchored at zero is
-   * a hairline). A pinned `domain` is left alone either way.
-   */
-  includeZero?: boolean;
-  /**
-   * Tick only on whole numbers — the y counterpart of `SeriesChartX.integerTicks`, and
-   * what keksdose's user-count axis (`metrics-panel.tsx`, `wholeTicks`) and its runway
-   * in days (`cash-buffer-chart.tsx`, `wholeDayTicks`) each wrote by hand: a band of
-   * [0, 3.1] users is ticked 0 1 2 3, not 0 0.5 1 … 3, and a short runway is not ticked
-   * 0 / 0.5 / 1 under a rounding formatter that prints "1" twice. A (zoom) window that
-   * holds no whole number falls back to the ordinary ticks rather than to none.
-   *
-   * AUTOMATIC by default — on when every value this axis carries is a whole number
-   * (counts), because that is where a half tick is a value no sample can have, and it
-   * changes nothing on a span wider than about eight, which already ticks on whole
-   * steps. `true` forces it over fractional data (days of runway computed as 43.7);
-   * `false` keeps fractional ticks for a continuous quantity that merely happens to be
-   * whole in this sample. `tickValues` wins over either.
-   */
-  integerTicks?: boolean;
-}
-
-/**
- * A y axis — and a VISIBLE one says what it measures.
- *
- * A union rather than an optional field, so the rule is the type's: a column of numbers
- * whose quantity and unit are not written down is a column somebody reads as whatever
- * they expected. `title: ""` is the explicit opt-out (the right-hand chart of a facing
- * pair, whose neighbour already said it). A HIDDEN axis scales its lines and draws
- * nothing, so there is nowhere for a title to go.
- */
-export type SeriesChartAxis = SeriesChartAxisShape & ({ title: string; hide?: false } | { title?: string; hide: true });
-
-/**
- * What a tick or the tooltip heading of the abscissa is handed besides its position —
- * the value in the caller's own terms, which on a category or time axis is not the
- * number the plot runs on.
- */
-export interface SeriesChartXTick {
-  /** The number itself, the row's category, or (time) a Date. */
-  value: SeriesChartXValue;
-  /** The slot, on a category axis: the row's index in `rows`. */
-  index?: number;
-  /** On a time axis: what one step of the ticks on show is, so a label can say as much
-   *  as it means — a month start as "Mar 26", a midnight as "14 Mar". */
-  unit?: TimeTickUnit;
-}
-
-export interface SeriesChartX {
-  /**
-   * What the abscissa is.
-   *
-   * - `"number"` (the default) — a number line, and all a chart before 0.8.0 could draw.
-   * - `"category"` — PERIODS or names, one evenly spaced slot per row, in row order:
-   *   keksdose's months, quarters and budget categories, which it used to hand recharts
-   *   preformatted. The values stay the caller's own — `"2026-05"`, a Date for the
-   *   month, a category name — and need not be sortable, unique or numeric. The plot
-   *   runs on the slot INDEX, which is what lets it zoom: a drag across the third to the
-   *   ninth month shows those months, a tick on each whole slot and the bars clipped at
-   *   the edge. What else zooms depends on the MARKS, not the axis — see `zoomAxes`.
-   * - `"time"` — real TIME: a Date, epoch ms or an ISO string per row, placed by when
-   *   it happened. keksdose's price history and cash buffer, where a slot per row would
-   *   draw two receipts a day apart and two five months apart the same width. Ticks fall
-   *   on calendar boundaries (midnights, Mondays, month and quarter starts, new years)
-   *   in local time; a date-only ISO string is LOCAL midnight, not the UTC one
-   *   `new Date("2026-05-01")` gives, which lands on the previous day west of Greenwich.
-   *   Zooms like a number line.
-   */
-  type?: "number" | "category" | "time";
-  /** Row key of the abscissa. Default `"x"`, which is what {@link mergeSeries} writes. */
-  key?: string;
-  /** What the abscissa is, with its unit. Drawn under the axis. */
-  title?: string;
-  /**
-   * A tick, formatted — bare, like the y axes'.
-   *
-   * `value` is the POSITION on the number line the plot runs on — the number itself,
-   * epoch ms, or the slot index — so the one-argument formatters every chart before
-   * 0.8.0 passes keep their meaning, and a time axis' `(ms) => …` is the tickFormatter
-   * keksdose already has. The caller's own value (the category, the Date) is `tick.value`.
-   * Default: the kit's number format; a category as is (a number formatted, a Date as a
-   * medium date); a time as much of the date as the tick step means.
-   */
-  format?: (value: number, tick: SeriesChartXTick) => string;
-  /**
-   * Whether this chart prints the abscissa's ticks. On by default; off for every chart
-   * of a stack sharing one x window but the bottom one, which prints them for all. It
-   * costs no alignment: the x mapping is decided by the margins and the y bands.
-   */
-  ticks?: boolean;
-  /** The tooltip's heading. Default: `format` — or, on a time axis, a medium date (with
-   *  the time for hourly data), since a tick's "Mar 26" is not which day it was. */
-  label?: (value: number, tick: SeriesChartXTick) => ReactNode;
-  /** The ticks instead of the automatic ones, in the caller's terms: numbers, the
-   *  categories to label, or instants. See `SeriesChartAxis.tickValues`. */
-  tickValues?: SeriesChartTickValues<SeriesChartXValue>;
-  /**
-   * Tilt the tick labels by this many degrees — negative rises to the right. For long
-   * category names that do not fit side by side: keksdose's budget performance draws its
-   * categories at −45° (`budget-performance-tab.tsx`). The label is anchored by its END
-   * for a negative angle and its START for a positive one, so it hangs off the tick
-   * instead of being centred across it; the anchor is physical, like the plot (see
-   * `ChartContainer`), so it is the same in RTL. The band under the axis grows to the
-   * rotated height of the longest label on show, estimated from its length (at most
-   * 120 px × the text size's scale, past which a label is clipped). Default 0.
-   */
-  tickAngle?: number;
-  /**
-   * On a `"number"` axis, tick only on whole numbers: a step of 1 at the least, so a
-   * five-point index series reads 0 1 2 3 4 rather than 0 0.5 1 … 4 — ticks at
-   * positions no row can have (keksdose's short step series). A zoom window that holds
-   * no whole number falls back to the ordinary ticks rather than to none.
-   *
-   * AUTOMATIC by default — on when every row's x is a whole number — because that is
-   * exactly the case the half ticks are wrong in, and it changes nothing elsewhere: a
-   * span wider than about eight already ticks on whole steps. `false` for a continuous
-   * quantity that merely happens to be sampled on whole numbers (1 Hz steps) and whose
-   * zoom should still be ruled in fractions; `true` to force it over rows that are not.
-   * Ignored on category (already one tick per slot) and time axes.
-   */
-  integerTicks?: boolean;
-}
-
-/** Where the tooltip goes — see {@link SeriesChartTooltip.placement}. */
-export type SeriesChartTooltipPlacement = ChartTooltipPlacement;
-
-/**
- * The placement a chart actually uses: its own, else the provider's, else `"cursor"`;
- * `"auto"` is `"above"` on a phone (`phone`: below `sm`) and `"cursor"` from `sm` up.
- */
-export function resolveTooltipPlacement(
-  own: SeriesChartTooltipPlacement | undefined,
-  fromProvider: SeriesChartTooltipPlacement | undefined,
-  phone: boolean,
-): "cursor" | "above" | "below" {
-  const wanted = own ?? fromProvider ?? "cursor";
-  return wanted === "auto" ? (phone ? "above" : "cursor") : wanted;
-}
-
-/** Room for the tooltip beyond the chart — see {@link SeriesChartProps.tooltip}. */
-export interface SeriesChartTooltip {
-  /**
-   * Where the values under the pointer are shown (keksdose #359: on a phone the box
-   * sat under the finger, on the very data it was reporting).
-   * - `"cursor"` (the default): the floating box that follows the pointer.
-   * - `"above"` / `"below"`: a READOUT row — the same heading and values, flat — in
-   *   room reserved over or under the plot from the first render, so nothing jumps on
-   *   the first tap. It follows hover, a tap and the keyboard's stops; the cursor line
-   *   and the active dot stay on the plot, and no box floats. Idle, it lists the series
-   *   with "—" under the x axis' title. The row is taken out of the chart's `height`
-   *   (the plot gets shorter, the page around it does not move).
-   * - `"auto"`: `"above"` below Tailwind's `sm` (640 px), `"cursor"` from there up.
-   *
-   * Default: the provider's `chartTooltipPlacement`, else `"cursor"`.
-   *
-   * The row is deliberately NOT an `aria-live` region: scrubbing a line announces a
-   * value per pixel of travel. A keyboard reader already hears each stop's name
-   * ("period — series: value") from the stop itself, and the row stays in the
-   * document for a screen reader to read on its way past.
-   */
-  placement?: SeriesChartTooltipPlacement;
-  /** Let the tooltip run past the chart's own box on that axis instead of recharts
-   *  clamping it inside. Default: `{ x: true }` when `boundary` is set, else neither. */
-  allowEscapeViewBox?: { x?: boolean; y?: boolean };
-  /**
-   * The element that actually CLIPS the chart — usually a horizontal-scroll wrapper
-   * around a chart wider than the card. The tooltip then flips to the left of the cursor
-   * when it would spill past that element's visible right edge (see
-   * `ChartTooltipContent`'s `boundaryRef`), rather than against the wide chart's far edge
-   * the reader has not scrolled to. keksdose's budget performance, which keeps a scroll
-   * wrapper and a per-category `minWidth` (`budget-performance-tab.tsx`).
-   */
-  boundary?: RefObject<HTMLElement | null>;
-}
-
-/**
- * A vertical segment in data coordinates — two y at one x, which a row-per-abscissa
- * chart structurally cannot draw. For CLOSING a shape the series already drew: the
- * turnarounds of a hysteresis loop, where the abscissa stands still while the value
- * falls from one branch to the other.
- */
-export interface SeriesChartSpan {
-  /** Distinct within the chart. */
-  key: string;
-  /** Which y axis `from`/`to` are measured on. Default `"y"`. */
-  axis?: string;
-  x: number;
-  from: number;
-  to: number;
-  /** Default: `var(--text-muted)`. */
-  color?: string;
-}
-
-/** The colours a reference or a marker can take by name — the kit's semantic tokens,
- *  so a threshold reads the same on every chart and flips with the theme. */
-export type SeriesChartTone =
-  "muted" | "brand" | "income" | "expense" | "net" | "success" | "warning" | "danger" | "info";
-
-const TONE_COLOR: Record<SeriesChartTone, string> = {
-  muted: "var(--text-muted)",
-  brand: "var(--brand)",
-  income: "var(--money-income)",
-  expense: "var(--money-expense)",
-  net: "var(--money-net)",
-  success: "var(--success)",
-  warning: "var(--warning)",
-  danger: "var(--danger)",
-  info: "var(--info)",
-};
-
-/**
- * A line across the whole plot at one value: a threshold, a target, an event.
- *
- * keksdose's cash buffer draws "one month of runway" across at y = 30 and the projected
- * depletion date down at its x. Unlike a {@link SeriesChartSpan}, which closes a shape
- * in data coordinates, a reference spans the plot, whatever the zoom.
- *
- * A reference is part of the FITTED band: one outside the data widens the axis to show
- * it, because a threshold the reader cannot see is not a threshold. A pinned domain or a
- * zoom window does not widen — there it is discarded when outside, like a span.
- */
-export interface SeriesChartReference {
-  /** Distinct within the chart. Default: its position in the list. */
-  key?: string;
-  /** `"x"` for a vertical line at an abscissa, otherwise the id of the y axis the value
-   *  is measured on. Default `"y"`, the single one — so no y axis may be called `"x"`. */
-  axis?: string;
-  /** An abscissa in the x axis' own terms (a category, a Date) for `axis: "x"`, a
-   *  number on that axis otherwise. A category the rows do not have draws nothing. */
-  value: SeriesChartXValue;
-  /** Written along the line, inside the plot at its top-left. SVG text: a string. */
-  label?: string;
-  /** Default `"muted"`. `color` wins over it. */
-  tone?: SeriesChartTone;
-  color?: string;
-  /** Which of `STROKE_PATTERNS`. Default 1, dashed: a reference is not data, and a
-   *  solid line reads as a series nobody put in the legend. */
-  dash?: number;
-}
-
-/**
- * A single labelled point — today's figure on keksdose's cash buffer, the month the
- * projection runs dry. For a mark on EVERY sample, or on the samples that meet a test,
- * use the series' `dot` instead; a marker is for a point that is a fact of its own.
- * Fitted like a reference: it widens the band it would otherwise fall outside of.
- */
-export interface SeriesChartMarker {
-  /** Distinct within the chart. Default: its position in the list. */
-  key?: string;
-  /** In the x axis' own terms, like a reference's `value`. */
-  x: SeriesChartXValue;
-  y: number;
-  /** The y axis `y` is measured on. Default `"y"`. */
-  axis?: string;
-  /** Written above the point. */
-  label?: string;
-  /** Default `"brand"`. `color` wins over it. */
-  tone?: SeriesChartTone;
-  color?: string;
-  /** Radius in px. Default 4.5. */
-  r?: number;
-}
-
-/** What a click on the plot picked. `TRow` is the chart's row type (0.53); without one,
- *  `row` is a {@link SeriesChartRow}, as before. */
-export interface SeriesChartHit<TRow extends object = object> {
-  /** The row's position in `rows`. */
-  index: number;
-  /** The caller's own row — with its `rawPeriod`, id or whatever the drilldown needs: the
-   *  very object in `rows`, typed as `rows` is, so it is read without a cast. */
-  row: SeriesChartRowOf<TRow>;
-  x: SeriesChartXValue;
-  /** The series, when the click landed ON a bar. A click anywhere else picks the slot
-   *  (the period), not a series. */
-  key?: string;
-}
-
-/**
- * The props of {@link SeriesChart} and {@link StaticSeriesChart}, for rows of type `TRow`.
- *
- * `TRow` is inferred from `rows` (0.53, keksdose after 0.52), and what the chart hands back
- * — `hit.row` in `onPointClick`, `point.row` in a series' `dot` — is that type, so a
- * drilldown reads its own fields without narrowing an `unknown`. Without a type argument,
- * `SeriesChartProps` is what it was: any object is a row, and a row comes back as a
- * {@link SeriesChartRow}. So is `ComponentProps<typeof SeriesChart>`, which reads the
- * constraint, `object`. A series, a handler or a `dot` typed without an argument fits a
- * chart of typed rows too.
- */
-export interface SeriesChartProps<TRow extends object = object> {
-  /**
-   * One row per abscissa value. A missing key is a hole (see `connectNulls`).
-   *
-   * Any object (0.52, refactor audit 2026-10-30, API-2): an `interface` has no index
-   * signature, so a typed sweep did not fit `SeriesChartRow` and Kurvenschmiede cast its
-   * Ackermann rows `as unknown as Record<string, number>[]`. The chart reads the keys
-   * `series` and `x` name, and hands the row back typed as these are (0.53).
-   */
-  rows: readonly TRow[];
-  series: readonly SeriesChartSeries<TRow>[];
-  /** Default: one untitled axis, `"y"`. */
-  axes?: readonly SeriesChartAxis[];
-  x?: SeriesChartX;
-  /** A value in the tooltip, where a number stands on its own and needs its unit.
-   *  Default: `Intl.NumberFormat` in the kit's locale. */
-  valueFormat?: (value: number) => string;
-  /**
-   * The chart's height: a CSS length, a Tailwind height class, or px. Default `h-72`
-   * (18rem). The empty state takes it too, so a chart losing its last line does not
-   * relayout the page under it.
-   *
-   * - **A CSS length** (0.32) — `"20rem"`, `"min(20rem, 60dvh)"` — set inline. The form
-   *   for a height that should grow with the text size and still stop at the screen
-   *   (docs/text-size-harmonization.md §10.10): `min(30rem, 60dvh)` is 480 px at Normal
-   *   on a desktop and never more than 60 % of a phone at Extra large, where a scaled
-   *   480 px would be 720.
-   * - **A Tailwind class** — `"h-72"`, `"h-64 md:h-80"` — as before.
-   * - **A number** is px, set inline, and does NOT follow the text size: kept for a
-   *   height the caller holds as a number (keksdose's report charts take
-   *   `height = 260` as a prop). Prefer `"16.25rem"`, or a `min()` with a viewport cap.
-   */
-  height?: ChartHeight;
-  /** Bridge holes left by sources sampled on different grids. See {@link mergeSeries}. */
-  connectNulls?: boolean;
-  /** Shown, centred at the chart's height, instead of an empty chart. Default: the
-   *  `seriesChart.empty` label. `null` shows nothing. */
-  empty?: ReactNode;
-  /**
-   * Milliseconds for a line to draw itself in. Off by default: a chart beside a live
-   * editor re-renders on every keystroke, and an animation restarted mid-flight reads
-   * as the curve twitching. Turn it on where series come and go by choice.
-   */
-  animationMs?: number;
-  spans?: readonly SeriesChartSpan[];
-  /** Lines across the plot at one value. */
-  references?: readonly SeriesChartReference[];
-  /** Single labelled points. */
-  markers?: readonly SeriesChartMarker[];
-  /**
-   * Which axes a drag may zoom: `"both"`, `"x"`, `"y"` or `"none"`. Default: read off
-   * the marks — see `defaultZoomAxes` (lines both, areas x, bars none). An axis carrying
-   * bars or areas never takes a DRAGGED y window: it refits to the x window, from zero.
-   * Ignored by `StaticSeriesChart`, which does not zoom.
-   */
-  zoomAxes?: ZoomAxesSetting;
-  /**
-   * A click on the plot: the slot under the pointer, and the series when it landed on a
-   * bar. keksdose's drilldowns — a payee's month, a budget line, a spending category.
-   * A drag that zoomed is not a click.
-   *
-   * The keyboard's stops are there either way (0.52, DSP-5): one per bar, or per slot of
-   * a chart without bars, named "period — series: value", behind ONE tab stop. With this
-   * they are buttons that Enter and Space activate; without, images to read.
-   */
-  onPointClick?: (hit: SeriesChartHit<TRow>) => void;
-  /** Where the tooltip may go: for a chart inside a scroll wrapper. See
-   *  {@link SeriesChartTooltip}. */
-  tooltip?: SeriesChartTooltip;
-  /**
-   * The most y axes the chart DRAWS: a total, or `{ left, right }` per side. Axes over it
-   * are drawn as `hide: true` ones are — they still scale their lines and the zoom still
-   * refits them, but they draw no ticks or title and reserve no width — in declaration
-   * order, so the first axis of each side is the last to go (`series-chart-budget.ts`).
-   * The series on a hidden axis say its unit instead (see {@link SeriesChartAxis.unit}).
-   * Default: no cap — only the automatic one of `axisBudget`.
-   */
-  maxVisibleAxes?: SeriesChartAxisBudget;
-  /**
-   * `"auto"` (the default): a chart so narrow that its axes' bands would leave the plot
-   * under 160 px (`MIN_PLOT_WIDTH`, × the text size's scale) draws ONE axis a side —
-   * lenkbank's four-axis curve plot on a phone, whose plot was 10 px wide. And a chart
-   * with an axis on EACH side that one a side still leaves too narrow (0.32: at 150 % a
-   * 390 px phone's plot kept about 80 px between its two bands) drops the right-hand,
-   * secondary axis too. Measured on the chart's own box (`ResizeObserver`), and applied
-   * on top of `maxVisibleAxes`. Either way the series on an axis it hid say the axis'
-   * unit in the tooltip and the readout ("Rack load (N)"), and in a legend built by
-   * {@link seriesLegendEntries} with `onAxisBudget`'s ids.
-   *
-   * On by default because it cannot touch a layout that works: it needs a plot that
-   * would otherwise be under 160 px — a four-axis chart below about 440 px at Normal, a
-   * two-left-axis one below about 300, a one-a-side one below about 290 — and the
-   * left-hand axis always stays. A chart with one axis (each chart of a facing pair,
-   * every single-axis chart) is never budgeted, at any width. `"off"` keeps every
-   * declared axis whatever the width: for a stack of multi-axis charts that must keep
-   * identical bands, or a caller budgeting itself. Without layout (jsdom, SSR) nothing is
-   * measured and nothing is hidden.
-   */
-  axisBudget?: "auto" | "off";
-  /**
-   * The ids of the axes the budget hid (not those declared `hide`), every time that set
-   * changes — for a legend that says their units: pass it to {@link seriesLegendEntries}
-   * as `budgeted`. Called after the render that hid them; empty once the chart is wide
-   * again.
-   */
-  onAxisBudget?: (hidden: readonly string[]) => void;
-  /** Supplied by `withChartZoom` and by nothing else. */
-  zoom?: ZoomBinding;
-  /** Per-chart strings over `<UiKitProvider labels={{ seriesChart }}>`. */
-  labels?: LabelOverride<SeriesChartLabels>;
-  /** BCP 47 tag for the default number formats. Default: the provider's. */
-  locale?: string;
-  /**
-   * The chart's name. The chart is a `role="figure"` (0.52, refactor audit 2026-10-30,
-   * DSP-5), and a figure is found and told apart by its name — "Net worth", "Load over
-   * travel". Its values are read stop by stop (see {@link SeriesChartProps.onPointClick}).
-   */
-  "aria-label"?: string;
-  /**
-   * What the picture SHOWS, in a sentence — "Spending rose 12 % in May, led by rent." —
-   * the figure's accessible description: a line, an area and a ruler are nothing a screen
-   * reader can say. Followed, on a zoomable chart, by the drag gesture (`zoomHint`). Not
-   * drawn; a caption the eye should read too belongs in the page.
-   */
-  description?: string;
-  /** Onto the chart's root (`ChartContainer`) — e.g. an app's own grid ink. */
-  className?: string;
-  /** The shortest bar drawn, in px, for every bar series that does not set its own
-   *  {@link SeriesChartSeries.minBarLength}. Drawing only: domain, tooltip and names
-   *  keep the real value. Default: none — a zero draws nothing. */
-  minBarLength?: number;
-  /**
-   * The most rows the chart hands recharts (0.34, KS U2). A longer table is THINNED, by
-   * envelope: cut into buckets, and from each the row where each drawn series is lowest
-   * and the row where it is highest, plus each series' first and last sample — so every
-   * line still reaches every peak and dip the table has, and a tone faster than the
-   * buckets draws as the band it fills, never as the slow wave a stride would alias it
-   * into. Nothing is averaged or invented; every point drawn is one of `rows`. There is
-   * no stride option, on purpose.
-   *
-   * Opt-in. Default: none — every row is drawn, as before. Kurvenschmiede draws 2000 for
-   * a 200-second profile at 1 kHz; a few thousand is about what a plot's pixels can show.
-   *
-   * - **Zoom** thins the window on show (with one row past each edge), so zooming in
-   *   draws more of the samples there — all of them, once the window holds fewer than
-   *   `maxRows` — rather than the same rows larger. That needs an abscissa that never
-   *   decreases; where it doubles back (a loop against position) the whole table is
-   *   thinned once, and the abscissa is enveloped too, so the path's turning points stay.
-   * - **Fitting** is not thinned: the axes, the zoom's refit and the automatic whole
-   *   ticks read every row, so a pinned or fitted band is the same either way.
-   * - **Indices** stay the caller's: a `dot` function's `point.index` and a click's
-   *   `hit.index` are positions in `rows`, not in the rows drawn.
-   * - **A category axis** (`x.type: "category"`) is never thinned: a slot is a period, and
-   *   a period left out is a gap. Meant for lines and areas; stacked layers are each
-   *   enveloped on their own.
-   *
-   * The budget is a cap for any `maxRows` of at least 2 + 4 × the drawn series (the
-   * fewest rows an envelope can be drawn with); a smaller one is raised to that.
-   */
-  maxRows?: number;
-}
-
-/** A series' name with its unit after it: "Velocity (mm/s)" — unless the name already
- *  ends with it. lenkbank's motion series carry "(mm/s)" in their label for the desktop
- *  tooltip, where every axis is drawn; the budget then read "… (mm/s) (mm/s)" (0.15.1).
- *  A label that says its unit keeps saying it once, whichever of the two an app chose. */
-function withUnit(label: ReactNode, unit: string | undefined): ReactNode {
-  if (!unit) return label;
-  if (typeof label === "string" || typeof label === "number") {
-    const text = String(label);
-    return text.trimEnd().endsWith(`(${unit})`) ? label : `${text} (${unit})`;
-  }
-  return (
-    <>
-      {label} ({unit})
-    </>
-  );
-}
-
-/** Where a legend learns which axes are not drawn — see {@link seriesLegendEntries}. */
-export interface SeriesLegendAxes {
-  /** The chart's axes. A series on one that is `hide`, or `budgeted`, says its unit. */
-  axes?: readonly SeriesChartAxis[];
-  /** What the chart's `onAxisBudget` last said. */
-  budgeted?: readonly string[];
-}
-
-/**
- * The `ToggleLegend` entries for a chart's FULL series list — colours resolved the way
- * the chart resolves them, and a stroke mark for a line drawn in a pattern (dashed,
- * step) so the key promises the stroke the plot draws. A bar or an area is a swatch.
- * Pair with {@link visibleSeries} for the chart itself.
- *
- * Handed the chart's `axes` (and the `budgeted` ids its `onAxisBudget` reports), a
- * series whose axis is not drawn says the unit that axis would have: "Velocity (mm/s)"
- * — see {@link SeriesChartAxis.unit}. Without them, the labels are as given.
- */
-export function seriesLegendEntries<TRow extends object>(
-  // Generic only so a typed list fits (0.53): `SeriesChartSeries<Month>` is not a
-  // `SeriesChartSeries`, whose `dot` would be handed rows that are not `Month`s.
-  series: readonly SeriesChartSeries<TRow>[],
-  { axes, budgeted }: SeriesLegendAxes = {},
-): LegendEntry[] {
-  const undrawn = new Map<string, string | undefined>();
-  for (const axis of axes ?? []) {
-    if (axis.hide || budgeted?.includes(axis.id)) undrawn.set(axis.id, axisUnit(axis));
-  }
-  return series.map((entry, index) => {
-    // A custom dash array goes to the legend as it is, so the swatch draws what the plot does.
-    const own = entry.dash ?? (entry.dashed ? 1 : 0);
-    const dash = entry.step ? STEP_DASH : own;
-    const line = (entry.type ?? "line") === "line";
-    return {
-      key: entry.key,
-      label: withUnit(entry.label, undrawn.get(entry.axis ?? DEFAULT_Y_AXIS)),
-      color: entry.color ?? paletteFor(index),
-      ...(line && dash !== 0 ? { marker: "stroke" as const, dash } : {}),
-    };
-  });
-}
-
-/** The number format every default falls back to. */
-function useDefaultFormat(localeProp: string | undefined): (value: number) => string {
-  const locale = useKitLocale(localeProp);
-  return useMemo(() => {
-    const format = new Intl.NumberFormat(locale, { maximumFractionDigits: 2 });
-    // U+2212 on a negative tick and in the tooltip (0.49, KIT-1).
-    return (value: number) => formatWithMinus(format, value);
-  }, [locale]);
-}
-
-/** The Y-axis list a chart draws when the caller gave none. */
-const ONE_UNTITLED_AXIS: SeriesChartAxis[] = [{ id: DEFAULT_Y_AXIS, title: "" }];
-
-/** The two numbers every mark type needs to agree on for the chart to read as one. */
-const LINE_WIDTH = 2;
-const STEP_WIDTH = 1.5;
-
-/** Bars round their FREE end only, and a stacked bar has none but the top layer's —
- *  which recharts cannot tell apart per cell, so stacks stay square. */
-const BAR_RADIUS: [number, number, number, number] = [3, 3, 0, 0];
-
-/**
- * One keyboard stop: a bar, or (a chart with no bars) a whole slot. `from`/`to` bound its
- * slot on the plotted number line — half way to each neighbour, or to the edge of the
- * window on show.
- */
-interface PointStop {
-  index: number;
-  /** The bar's series; absent for a slot. */
-  key?: string;
-  from: number;
-  to: number;
-  /** The accessible name: where it is and what it says. Asked only of a stop that is
-   *  drawn — see {@link ALL_STOPS_UP_TO}. */
-  name: () => string;
-}
-
-/**
- * Up to this many stops, every one is drawn; past it, only the roving one, its two
- * neighbours and the two ends (0.52, DSP-5) — every stop is still reached, by the arrows,
- * Home and End. Since every chart has stops, a measurement chart has one per row:
- * Kurvenschmiede draws 2000-row profiles (`maxRows`), and 2000 named `<rect>`s, each
- * named through `Intl` on every render, are a DOM and an accessibility tree nobody walks
- * one by one. A year of months, or of weeks, stays whole for browse mode.
- */
-const ALL_STOPS_UP_TO = 100;
-
-/**
- * The shape of a series whose bar has keyboard focus: recharts' own rectangle, with an
- * outline on the one bar at `index` — drawn at the bar's exact geometry, which an
- * overlay could only guess at. Not `activeBar`: that follows the tooltip's active index,
- * which recharts stops taking from `defaultIndex` once a pointer has hovered the chart.
- */
-function focusedBarShape(index: number) {
-  return function FocusedBar(props: BarShapeProps) {
-    const focused = props.originalDataIndex === index;
-    return <Rectangle {...props} {...(focused ? { stroke: "var(--text-primary)", strokeWidth: 2 } : {})} />;
-  };
-}
-
-/** A marker label's size in px at Normal — the one place both the text and its width
- *  estimate read it from. × the text size's scale where it is drawn (§10.10). */
-const MARKER_LABEL_SIZE = 11;
-
-/** A reference line's label, in px at Normal, × the scale likewise. */
-const REFERENCE_LABEL_SIZE = 10;
-
-/**
- * A marker's label, centred over its point but clamped inside the plot. recharts'
- * `position: "top"` centres on the point no matter where it is, so a marker near the
- * plot's end (the last sample, a projection's end point) had half its label cut off by
- * the card — "over the c" on a phone. The width is measured once drawn; the first
- * frame (and a DOM without layout) uses a 0.6em-per-character estimate, which errs wide.
- */
-function MarkerLabel({ viewBox, value }: { viewBox?: { x?: number; y?: number; width?: number }; value?: ReactNode }) {
-  const plot = usePlotArea();
-  const ref = useRef<SVGTextElement>(null);
-  const [measured, setMeasured] = useState<number>();
-  const fontSize = MARKER_LABEL_SIZE * useTextSize().scale;
-  const text = value == null ? "" : String(value);
-  useLayoutEffect(() => {
-    const el = ref.current;
-    if (!el || typeof el.getComputedTextLength !== "function") return;
-    const w = el.getComputedTextLength();
-    if (w > 0 && w !== measured) setMeasured(w);
-  }, [text, measured, fontSize]);
-  if (!viewBox || viewBox.x == null || viewBox.y == null || text === "") return null;
-  const cx = viewBox.x + (viewBox.width ?? 0) / 2;
-  const half = (measured ?? text.length * fontSize * 0.6) / 2;
-  // The start clamp applied last: a label wider than the plot keeps its start on screen.
-  const x = plot ? Math.max(plot.x + half, Math.min(cx, plot.x + plot.width - half)) : cx;
-  return (
-    <text
-      ref={ref}
-      x={x}
-      y={viewBox.y - 5}
-      textAnchor="middle"
-      fontSize={fontSize}
-      fontWeight={600}
-      fill="var(--text-primary)"
-      className="recharts-label"
-    >
-      {text}
-    </text>
-  );
-}
-
-/**
- * The keyboard's way onto a chart: one focusable `<rect>` per bar, or per slot when there
- * are no bars, laid over the plot INSIDE the recharts chart, where the x scale answers.
- *
- * keksdose drew its weekday pattern as seven real `<button>`s (spending-tab.tsx) because
- * a recharts bar is reachable by nothing but the pointer. This is that, for every chart:
- *
- * - ONE tab stop (roving `tabIndex`): Tab moves past the chart, not through 30 bars.
- * - ←/→ step through the stops in order, ↑/↓ between the bars of one slot, Home/End.
- * - Each is named "period — series: value".
- * - With `onPointClick` (`onPick`) each is a `role="button"`, and ↵ and Space report the
- *   stop as a click would — with the series for a bar. Without (0.52, refactor audit
- *   2026-10-30, DSP-5) each is a `role="img"` to read, as PieChart's slices are: before,
- *   such a chart was recharts' unnamed `role="application"` stop, whose arrows moved a
- *   tooltip nothing announced.
- *
- * The stops take NO pointer events, so the drag-to-zoom layer, the tooltip and the
- * pointer's own clicks underneath behave exactly as they did. Focus is shown by the
- * slot tinted and, for a bar, its own outline (`focusedBarShape`) — and by the tooltip,
- * which recharts' own pointer is stood on the stop for (`pointAt`).
- */
-function PointKeys({
-  stops,
-  current,
-  label,
-  onFocusStop,
-  onBlurStops,
-  onPick,
-}: {
-  stops: readonly PointStop[];
-  current: number;
-  label: string;
-  onFocusStop: (at: number) => void;
-  onBlurStops: () => void;
-  onPick?: (stop: PointStop) => void;
-}) {
-  const plot = usePlotArea();
-  const scale = useXAxisScale();
-  const refs = useRef<(SVGRectElement | null)[]>([]);
-  if (!plot || !scale || plot.width <= 0 || plot.height <= 0) return null;
-
-  const onKeyDown = (at: number) => (event: KeyboardEvent<SVGRectElement>) => {
-    const stop = stops[at];
-    // ↑/↓ stay in the slot: the next or previous bar of the same period. The stops are
-    // in slot order, so a slot's bars are neighbours. ←/→, Home and End as Treemap's tiles
-    // take them (0.52 code review, deep, charts, finding 14): → is the next stop in any
-    // page, since the plot runs left to right in an RTL one too (see `ChartContainer`).
-    const inSlot = (step: 1 | -1) => (stops[at + step]?.index === stop.index ? at + step : at);
-    const target =
-      event.key === "ArrowDown"
-        ? inSlot(1)
-        : event.key === "ArrowUp"
-          ? inSlot(-1)
-          : rovingTarget(event.key, "ltr", at, stops.length, false);
-    if (target !== undefined) {
-      event.preventDefault();
-      refs.current[target]?.focus();
-    } else if (onPick && (event.key === "Enter" || event.key === " ")) {
-      event.preventDefault();
-      onPick(stop);
-    }
-  };
-
-  const left = plot.x;
-  const right = plot.x + plot.width;
-  const middle = plot.y + plot.height / 2;
-  // Every target an arrow, Home or End can name from the roving stop — see ALL_STOPS_UP_TO.
-  const drawn =
-    stops.length <= ALL_STOPS_UP_TO ? undefined : new Set([0, current - 1, current, current + 1, stops.length - 1]);
-  return (
-    <g role="group" aria-label={label}>
-      {stops.map((stop, at) => {
-        if (drawn && !drawn.has(at)) return null;
-        // An edge with no neighbour runs to the plot's edge.
-        const a = finite(scale(stop.from)) ?? left;
-        const b = finite(scale(stop.to)) ?? right;
-        const x0 = Math.max(left, Math.min(a, b));
-        const x1 = Math.min(right, Math.max(a, b));
-        return (
-          <rect
-            key={`${stop.index}:${stop.key ?? ""}`}
-            ref={(node) => {
-              refs.current[at] = node;
-            }}
-            role={onPick ? "button" : "img"}
-            tabIndex={at === current ? 0 : -1}
-            aria-label={stop.name()}
-            data-point-key={stop.key}
-            x={x0}
-            y={plot.y}
-            width={Math.max(0, x1 - x0)}
-            height={plot.height}
-            fill="transparent"
-            // Focus only: the pointer's drag, hover and click belong to what is below.
-            pointerEvents="none"
-            strokeWidth={2}
-            className={cn(
-              "outline-none focus-visible:fill-[var(--brand)]/10",
-              // A bar outlines ITSELF (see `FOCUSED_BAR`); a slot has nothing else to.
-              stop.key === undefined && "focus-visible:stroke-[var(--brand)]",
-            )}
-            onFocus={(event) => {
-              onFocusStop(at);
-              pointAt(event.currentTarget, (x0 + x1) / 2, middle);
-            }}
-            onBlur={(event) => {
-              onBlurStops();
-              // On to another stop: that one stands the pointer on itself. (`refs` holds a
-              // null for every stop not drawn, so a blur to nowhere is no stop.)
-              const next = event.relatedTarget as SVGRectElement | null;
-              if (!next || !refs.current.includes(next)) {
-                pointAt(event.currentTarget, left - 1, middle);
-              }
-            }}
-            onKeyDown={onKeyDown(at)}
-          />
-        );
-      })}
-    </g>
-  );
-}
-
-/**
- * Stands recharts' pointer at (`x`, `y`) in the chart's own px, as a mouse moved there
- * would — what the keyboard's stops show their tooltip by (0.52 code review, deep, charts,
- * finding 4). Their `defaultIndex` alone moved it only until a pointer had hovered the
- * chart: recharts reads it no more once a hover has an index, and a mouse that has left
- * keeps its index. After one hover the arrows moved the tint, and the tooltip, the one
- * place the value is drawn, stayed where the mouse had left it. recharts' own keyboard
- * layer, which these stops replaced (DSP-5), drove the tooltip through its own state.
- *
- * A point off the plot (`x` left of it) takes the pointer off the chart: recharts hides
- * its tooltip there, through the same frame-throttled path a pending move takes, so a
- * blur right after a focus is never overtaken by it. recharts reads the pointer against
- * its wrapper's box, scaled as the box is drawn (`getRelativeCoordinate`); the point is
- * put back into that box.
- */
-function pointAt(within: Element, x: number, y: number) {
-  const wrapper = within.closest<HTMLElement>(".recharts-wrapper");
-  if (!wrapper) return;
-  const box = wrapper.getBoundingClientRect();
-  const scaleX = wrapper.offsetWidth > 0 ? box.width / wrapper.offsetWidth : 1;
-  const scaleY = wrapper.offsetHeight > 0 ? box.height / wrapper.offsetHeight : 1;
-  wrapper.dispatchEvent(
-    new MouseEvent("mousemove", { bubbles: true, clientX: box.left + x * scaleX, clientY: box.top + y * scaleY }),
-  );
-}
-
-interface PlotProps extends Omit<SeriesChartProps, "rows" | "x"> {
-  /** The rows AS PLOTTED — what the zoom fits on. The caller's are `model.source`. */
-  rows: readonly SeriesChartRow[];
-  /** What the zoom fits on: the plotted key. */
-  x: { key: string };
-  model: XModel;
-  xAxis: SeriesChartX;
-}
-
-/** The chart proper, over an abscissa already reduced to numbers (see {@link XModel}). */
-function SeriesPlot({
-  model,
-  xAxis,
-  series,
-  axes = ONE_UNTITLED_AXIS,
-  valueFormat,
-  height = "h-72",
-  connectNulls,
-  empty,
-  animationMs = 0,
-  spans,
-  references,
-  markers,
-  onPointClick,
-  tooltip,
-  zoom,
-  labels: labelsProp,
-  locale: localeProp,
-  className,
-  minBarLength,
-  maxVisibleAxes,
-  axisBudget = "auto",
-  onAxisBudget,
-  maxRows,
-  "aria-label": ariaLabel,
-  description,
-}: PlotProps) {
-  const labels = useKitLabels("seriesChart", DEFAULT_SERIES_CHART_LABELS, labelsProp);
-  const locale = useKitLocale(localeProp);
-  const number = useDefaultFormat(localeProp);
-  // The text size (docs/text-size-harmonization.md §3.2, §4, §10.10): the axis bands, the
-  // tick spacing and the labels drawn in px grow with it — the tick text is `text-xs` and
-  // grows by itself — and the axes aim at three ticks instead of five from Large up.
-  // Strokes, dashes and the grid stay px.
-  const { scale } = useTextSize();
-  const edgeFor = useChartEdge();
-  // The tiles' rule (0.52, DSP-18, Marcel's decision 3): the ink edge under More contrast
-  // only — at Standard it fell on 5 of 8 hues in light and on 2 in dark, the unevenness
-  // #642 took off the tiles.
-  const edges = useEdgesInForce("auto");
-  const ticksAim = tickTarget(scale);
-  const grow = (px: number) => (scale === 1 ? px : Math.round(px * scale));
-  // The keyboard stops' roving tab stop, and the one that has focus (see `PointKeys`).
-  // Up here, above the empty state's early return, like every hook.
-  const [keyStop, setKeyStop] = useState(0);
-  const [keyFocus, setKeyFocus] = useState<number | undefined>(undefined);
-  // Where the tooltip goes, and — off the plot — the row it is portalled into.
-  // Below `sm` (`max-sm:`, at the text size in force) — where `"auto"` takes the tooltip
-  // off the plot. Narrower than the phone layout on purpose: a tablet's plot is wide
-  // enough that the box beside the finger leaves the data in view; a phone's is not.
-  const phone = useBreakpoint("max-sm", false);
-  const placement = resolveTooltipPlacement(tooltip?.placement, useKitChartTooltipPlacement(), phone);
-  const [readout, setReadout] = useState<HTMLDivElement | null>(null);
-
-  // The chart's own width, for the automatic axis budget. Its box, not the plot's: the
-  // box does not change when an axis is hidden, so the rule cannot oscillate. Nothing
-  // measured (jsdom, the first frame) is no automatic budget.
-  const [box, setBox] = useState<HTMLDivElement | null>(null);
-  const [width, setWidth] = useState<number | undefined>(undefined);
-  useLayoutEffect(() => {
-    if (!box || axisBudget === "off" || typeof ResizeObserver === "undefined") return;
-    const measure = () => setWidth(box.getBoundingClientRect().width || undefined);
-    measure();
-    const observer = new ResizeObserver(measure);
-    observer.observe(box);
-    return () => observer.disconnect();
-  }, [box, axisBudget]);
-  // The caller's cap first, then — on what is left — the automatic one.
-  const capped = budgetedAxes(axes, maxVisibleAxes);
-  const afterCap = capped.length
-    ? axes.map((axis) => (capped.includes(axis.id) ? { ...axis, hide: true as const } : axis))
-    : axes;
-  const auto =
-    axisBudget === "off"
-      ? []
-      : budgetedAxes(
-          afterCap,
-          autoAxisBudget(afterCap, width, (axis) => axisBandWidth(axis.width, Boolean(axis.title), scale), scale),
-        );
-  const budgeted = [...capped, ...auto];
-  const budgetKey = budgeted.join("\n");
-
-  // The rows drawn under `maxRows` (KS U2, `series-chart-thin.ts`): their indices into
-  // the caller's rows, or `undefined` for all of them. Up here, above the empty state's
-  // early return, like every hook; worked out again only when the rows, the series
-  // drawn, the budget or the x window change — not on every render of a drag.
-  const thinKeys = series.map((entry) => entry.key).join("\n");
-  const [windowFrom, windowTo] = zoom?.xDomain ?? [undefined, undefined];
-  const thin = useMemo(() => {
-    if (model.kind === "category" || maxRows === undefined) return undefined;
-    const keys = thinKeys ? thinKeys.split("\n") : [];
-    const window: [number, number] | undefined =
-      windowFrom !== undefined && windowTo !== undefined ? [windowFrom, windowTo] : undefined;
-    const kept = thinnedRows(model.rows, model.plotKey, keys, maxRows, window);
-    if (!kept) return undefined;
-    return {
-      kept,
-      plotted: kept.map((index) => model.rows[index]),
-      source: kept.map((index) => model.source[index]),
-    };
-  }, [model, thinKeys, maxRows, windowFrom, windowTo]);
-
-  // Reported when the SET changes, not on every render — an inline callback is a new
-  // function each time, and the guard keeps it from being called again for nothing.
-  const reported = useRef("");
-  useEffect(() => {
-    if (budgetKey === reported.current) return;
-    reported.current = budgetKey;
-    onAxisBudget?.(budgetKey ? budgetKey.split("\n") : []);
-  }, [budgetKey, onAxisBudget]);
-
-  // A number or a CSS length is set inline; any other string is a class. Either way the
-  // one value sizes both the chart and its empty state.
-  const { className: heightClass, style: heightStyle } = chartHeightProps(height);
-
-  // A named figure, described by the caller's sentence and — where a drag zooms — the
-  // gesture (0.52, refactor audit 2026-10-30, DSP-5). The hint used to be the name of the
-  // zoom layer's rect, a `role="application"` that could not take focus. The description
-  // is `hidden`: read through `aria-describedby`, never twice in browse mode.
-  const drawable = model.source.length > 0 && series.length > 0;
-  const spoken = [description, drawable && zoom?.layer ? labels.zoomHint : undefined].filter(Boolean).join(" ");
-  // Inside the root, not after it as a sibling: a StaticSeriesChart then stopped being its
-  // parent's last child, and a stack's `space-y-*` / `divide-y` gave it a margin or a rule
-  // it never had (0.52 code review, deep, charts, findings 7 and 14 — Treemap's copy of this
-  // went the same way). The plot's root is `ChartContainer`, which takes the sentence itself.
-  const about = useFigureDescription(spoken || undefined);
-  const figure = { role: "figure", "aria-label": ariaLabel, "aria-describedby": about.describedBy } as const;
-
-  // The empty state takes the chart's own height and is centred in it: a chart that
-  // shrank to its "nothing to draw" sentence moved everything under it up the page
-  // the moment a legend entry was switched off.
-  if (!drawable) {
-    return (
-      <div
-        {...figure}
-        className={cn("flex w-full items-center justify-center px-2 text-center", heightClass)}
-        style={heightStyle}
-      >
-        {empty !== undefined ? empty : <p className="text-xs text-muted">{labels.empty}</p>}
-        {about.node}
-      </div>
-    );
-  }
-
-  const x = xAxis;
-  const xKey = model.plotKey;
-  // What is DRAWN — the thinned rows under `maxRows`, else the caller's — and what is
-  // FITTED: every row, so a band, a whole-number tick and the zoom's refit are the same
-  // with a budget as without one.
-  const plotted = thin?.plotted ?? model.rows;
-  const rows = thin?.source ?? model.source;
-  const allPlotted = model.rows;
-  /** A drawn row's position in the CALLER's rows, which dots and hits report. */
-  const origin = (index: number) => thin?.kept[index] ?? index;
-  // What the budget took off the chart: an axis drawn as `hide` — and its unit, which
-  // the tooltip names now that no title says it. Axes the caller hid keep their series'
-  // labels as given, as they always did.
-  const drawnAxes = budgeted.length
-    ? axes.map((axis) => (budgeted.includes(axis.id) ? { ...axis, hide: true as const } : axis))
-    : axes;
-  const lostUnit = new Map(axes.filter((axis) => budgeted.includes(axis.id)).map((axis) => [axis.id, axisUnit(axis)]));
-  const config: ChartConfig = Object.fromEntries(
-    series.map((entry, index) => [
-      entry.key,
-      {
-        label: withUnit(entry.label, lostUnit.get(entry.axis ?? DEFAULT_Y_AXIS)),
-        color: entry.color ?? paletteFor(index),
-      },
-    ]),
-  );
-  const visible = drawnAxes.filter((axis) => !axis.hide);
-  // The grid hangs its horizontal rules off ONE y axis, and recharts looks for the one
-  // whose id is its own default (`0`). Every axis here is named, so without saying
-  // which, it finds none and draws no horizontal rules at all. The first visible axis,
-  // because those are the ticks a reader puts a ruler on.
-  const gridAxis = (visible[0] ?? drawnAxes[0])?.id ?? DEFAULT_Y_AXIS;
-  const onLeft = visible.some((axis) => (axis.orientation ?? "left") === "left");
-  const onRight = visible.some((axis) => axis.orientation === "right");
-  // The margins are what is left once the axes have their bands: an axis band IS the
-  // gutter on its side, so a margin beside one is a second gutter. What remains is the
-  // overhang of the first/last x tick where no y axis covers it.
-  const margin = {
-    // Room for a marker's label over a point at the top of the band.
-    top: markers?.some((marker) => marker.label) ? grow(22) : 8,
-    // The first and last x tick's overhang: text, so it grows with it.
-    right: onRight ? 0 : grow(10),
-    left: onLeft ? 0 : grow(10),
-    // Under the ticks, not under the whole axis: whatever comes next owns the gap.
-    bottom: x.title ? grow(18) : 2,
-  };
-
-  const refs = references ?? [];
-  const xRefs = refs.filter((ref) => ref.axis === "x");
-  const yRefs = refs.filter((ref) => ref.axis !== "x");
-  const xPos = (value: SeriesChartXValue) => model.position(value);
-
-  // Fitted with air around it, unless the reader has zoomed or the caller pinned it.
-  // Ticks are the round values INSIDE whichever domain that is (see
-  // `series-chart-ticks.ts`), so a zoom window still gets round numbers, just finer.
-  // A category axis is its slots, each half a slot of air either side — room for a
-  // bar, and the tick under the middle of it.
-  const fittedX: [number, number] | undefined =
-    zoom?.xDomain ??
-    (model.kind === "category"
-      ? [-0.5, rows.length - 0.5]
-      : padBand(
-          ...(extend(undefined, [
-            ...allPlotted.map((row) => finite(row[xKey])),
-            ...xRefs.map((ref) => xPos(ref.value)),
-            ...(markers ?? []).map((marker) => xPos(marker.x)),
-          ]) ?? [Infinity, -Infinity]),
-        ));
-
-  const timeUnit = model.kind === "time" ? timeTicksWithUnit(fittedX, ticksAim) : undefined;
-  // Whole-number ticks on a number line whose rows are all whole numbers — see
-  // `SeriesChartX.integerTicks`.
-  const integerX =
-    model.kind === "number" &&
-    (x.integerTicks ??
-      allPlotted.every((row) => {
-        const value = finite(row[xKey]);
-        return value === undefined || Number.isInteger(value);
-      }));
-  const xTicks =
-    resolveTicks(x.tickValues, fittedX, xPos) ??
-    (model.kind === "category"
-      ? categoryTicks(fittedX, rows.length)
-      : model.kind === "time"
-        ? timeUnit?.ticks
-        : integerX
-          ? (integerTicks(fittedX, ticksAim) ?? niceTicks(fittedX, ticksAim))
-          : niceTicks(fittedX, ticksAim));
-
-  // Ticks and the tooltip heading, back in the caller's terms.
-  const timeFormat = new Intl.DateTimeFormat(locale, TIME_TICK_FORMAT[timeUnit?.unit ?? "day"]);
-  const dateFormat = new Intl.DateTimeFormat(locale, {
-    dateStyle: "medium",
-    ...(timeUnit?.unit === "hour" ? { timeStyle: "short" } : {}),
-  });
-  const categoryText = (value: SeriesChartXValue) =>
-    value instanceof Date ? dateFormat.format(value) : typeof value === "number" ? number(value) : String(value ?? "");
-  const tickAt = (position: number): SeriesChartXTick => ({
-    value: model.valueAt(position),
-    ...(model.kind === "category" ? { index: Math.round(position) } : {}),
-    ...(timeUnit ? { unit: timeUnit.unit } : {}),
-  });
-  const defaultFormat = (position: number, tick: SeriesChartXTick) =>
-    model.kind === "category"
-      ? categoryText(tick.value)
-      : model.kind === "time"
-        ? timeFormat.format(position)
-        : number(position);
-  const format = x.format ?? defaultFormat;
-  const xFormat = (position: number) => format(position, tickAt(position));
-  const label = x.label ?? (model.kind === "time" ? (position: number) => dateFormat.format(position) : format);
-  const xLabel = (position: number) => label(position, tickAt(position));
-
-  const tickAngle = x.ticks === false ? 0 : (x.tickAngle ?? 0);
-  const tickBand = tiltedTickBand(
-    (xTicks ?? []).map((tick) => xFormat(tick)),
-    tickAngle,
-    scale,
-  );
-
-  const source: ZoomFitSource = {
-    rows: allPlotted,
-    series,
-    axes,
-    xKey,
-  };
-  // An axis a bar or an area stands on is read from zero (see `includeZero`).
-  const anchored = (axis: SeriesChartAxis) =>
-    axis.includeZero ??
-    series.some((entry) => (entry.axis ?? DEFAULT_Y_AXIS) === axis.id && (entry.type ?? "line") !== "line");
-  // Whole-number ticks on an axis whose values are all whole — see
-  // `SeriesChartAxis.integerTicks`. A stack of whole layers sums to a whole number, so
-  // the layers are enough to look at.
-  const wholeOnly = (axis: SeriesChartAxis) =>
-    axis.integerTicks ??
-    series
-      .filter((entry) => (entry.axis ?? DEFAULT_Y_AXIS) === axis.id)
-      .every((entry) =>
-        allPlotted.every((row) => {
-          const value = finite(row[entry.key]);
-          return value === undefined || Number.isInteger(value);
-        }),
-      );
-  const onAxis = (axisId: string) => (ref: { axis?: string }) => (ref.axis ?? DEFAULT_Y_AXIS) === axisId;
-  const fittedY = (axis: SeriesChartAxis): [number, number] | undefined => {
-    const own = [
-      ...yRefs.filter(onAxis(axis.id)).map((ref) => finite(ref.value)),
-      ...(markers ?? []).filter(onAxis(axis.id)).map((marker) => finite(marker.y)),
-    ];
-    if (anchored(axis)) {
-      // Never a dragged y window: refitted to the x window, still from zero.
-      if (zoom?.xDomain) return anchoredBand(axisExtent(source, axis.id, zoom.xDomain)) ?? axis.domain;
-      return axis.domain ?? anchoredBand(extend(axisExtent(source, axis.id), own));
-    }
-    return (
-      zoom?.yDomains[axis.id] ??
-      axis.domain ??
-      padBand(...(extend(axisExtent(source, axis.id), own) ?? [Infinity, -Infinity]))
-    );
-  };
-
-  // The abscissa of a row in the caller's terms: a category is its slot, which is
-  // its index; a time or a number is read back from where it was plotted.
-  const xOf = (index: number): SeriesChartXValue =>
-    model.kind === "category"
-      ? (rows[index][model.sourceKey] as SeriesChartXValue)
-      : model.valueAt(finite(plotted[index][xKey]) ?? NaN);
-  const hitAt = (index: number, key?: string): SeriesChartHit | undefined => {
-    const row = rows[index];
-    return row ? { index: origin(index), row, x: xOf(index), key } : undefined;
-  };
-
-  // The keyboard stops — every bar with a value, slot by slot; or, with no bars, every
-  // slot with any value. Only what is inside the window on show. Named on demand: past
-  // ALL_STOPS_UP_TO only five are drawn, and naming is a date and a number format each.
-  const stops: PointStop[] = [];
-  {
-    const valueText = valueFormat ?? number;
-    const nameOf = (entry: SeriesChartSeries) =>
-      typeof entry.label === "string" || typeof entry.label === "number" ? String(entry.label) : entry.key;
-    const cellText = (entry: SeriesChartSeries, value: number) => {
-      const name = nameOf(entry);
-      return name ? `${name}: ${valueText(value)}` : valueText(value);
-    };
-    const bars = series.filter((entry) => entry.type === "bar");
-    const [low, high] = fittedX ?? [-Infinity, Infinity];
-    const placed = plotted
-      .map((row, index) => ({ index, at: model.kind === "category" ? index : finite(row[xKey]) }))
-      .filter(
-        (slot): slot is { index: number; at: number } => slot.at !== undefined && slot.at >= low && slot.at <= high,
-      )
-      .sort((a, b) => a.at - b.at);
-    placed.forEach(({ index, at }, k) => {
-      const from = k > 0 ? (placed[k - 1].at + at) / 2 : low;
-      const to = k < placed.length - 1 ? (placed[k + 1].at + at) / 2 : high;
-      // The heading the tooltip would give it, when that is text; else the tick.
-      const where = () => {
-        const heading = xLabel(at);
-        return typeof heading === "string" && heading ? heading : xFormat(at);
-      };
-      const valued = (bars.length ? bars : series)
-        .map((entry) => ({ entry, value: finite(rows[index]?.[entry.key]) }))
-        .filter((cell): cell is { entry: SeriesChartSeries; value: number } => cell.value !== undefined);
-      if (bars.length) {
-        for (const { entry, value } of valued) {
-          stops.push({ index, key: entry.key, from, to, name: () => `${where()} — ${cellText(entry, value)}` });
-        }
-      } else if (valued.length) {
-        stops.push({
-          index,
-          from,
-          to,
-          name: () => `${where()} — ${valued.map(({ entry, value }) => cellText(entry, value)).join(", ")}`,
-        });
-      }
-    });
-  }
-  const focusedStop = keyFocus === undefined ? undefined : stops[keyFocus];
-
-  const dotFor = (entry: SeriesChartSeries) => {
-    const want = entry.dot;
-    if (!want) return false;
-    const color = `var(--color-${entry.key})`;
-    return (props: { cx?: number; cy?: number; index: number }) => {
-      const { cx, cy, index } = props;
-      const value = finite(rows[index]?.[entry.key]);
-      if (value === undefined || !Number.isFinite(cx) || !Number.isFinite(cy)) return <g />;
-      const point: SeriesChartPoint = {
-        key: entry.key,
-        index: origin(index),
-        row: rows[index],
-        x: xOf(index),
-        value,
-        cx: cx!,
-        cy: cy!,
-        color,
-      };
-      const drawn = want === true ? true : want(point);
-      if (drawn === true) {
-        return (
-          <circle
-            className="recharts-dot"
-            cx={cx}
-            cy={cy}
-            r={3}
-            fill={color}
-            // Ringed in the surface, so a dot on a crossing line still reads as a dot.
-            stroke="var(--bg-surface)"
-            strokeWidth={1.5}
-          />
-        );
-      }
-      if (drawn === false || drawn == null) return <g />;
-      return <g>{drawn}</g>;
-    };
-  };
-
-  const animation = {
-    isAnimationActive: animationMs > 0,
-    animationDuration: animationMs,
-    animationEasing: "ease-out" as const,
-  };
-
-  const inRow = placement !== "cursor";
-  const chart = (
-    <ChartContainer
-      {...(inRow ? {} : { role: "figure", "aria-label": ariaLabel, description: spoken || undefined })}
-      ref={setBox}
-      data-axis-budget={budgeted.length ? budgetKey.replace(/\n/g, " ") : undefined}
-      // "drawn/all" while `maxRows` thins: what a reader of the DOM (a test, a bug
-      // report) needs to know the picture is an envelope.
-      data-thinned={thin ? `${thin.kept.length}/${allPlotted.length}` : undefined}
-      config={config}
-      className={cn(
-        "w-full",
-        // With a readout the chart's height is the whole block's, and the plot takes
-        // what the row leaves.
-        inRow ? "min-h-0 flex-1" : heightClass,
-        className,
-        onPointClick && "cursor-pointer",
-      )}
-      style={inRow ? undefined : heightStyle}
-    >
-      <ComposedChart
-        data={plotted as Record<string, unknown>[]}
-        margin={margin}
-        // Positive and negative layers stacked apart, as `axisExtent` fits them — a
-        // month's expenses hang below the axis instead of eating into its income.
-        stackOffset="sign"
-        // recharts' own keyboard layer makes the whole surface an unnamed
-        // `role="application"` tab stop whose arrows move a tooltip nothing announces —
-        // a second stop beside `PointKeys`, which every chart has since 0.52 (DSP-5).
-        accessibilityLayer={false}
-        onClick={
-          onPointClick
-            ? (state) => {
-                const index = Number(state?.activeTooltipIndex ?? state?.activeIndex);
-                const hit = Number.isInteger(index) ? hitAt(index) : undefined;
-                if (hit) onPointClick(hit);
-              }
-            : undefined
-        }
-      >
-        {/* Both ways: a measurement plot is read by putting a ruler on it, and a
-            horizontal-only grid answers half of those questions. */}
-        <CartesianGrid yAxisId={gridAxis} />
-        <XAxis
-          dataKey={xKey}
-          // Numeric, not categorical: a measured sweep is unevenly spaced, and a
-          // category axis would straighten exactly the curvature the chart is for.
-          // A category chart is numeric too — on the slot index — which is what lets
-          // it zoom and keeps its ticks under the middle of each bar group.
-          type="number"
-          domain={fittedX ?? ["dataMin", "dataMax"]}
-          ticks={xTicks}
-          // Clip the lines to a zoom window instead of recharts widening it back out.
-          allowDataOverflow={zoom?.xDomain !== undefined || model.kind === "category"}
-          tickLine={false}
-          axisLine={false}
-          minTickGap={grow(MIN_TICK_GAP)}
-          // Where the ticks crowd, drop every Nth rather than recharts' default
-          // `preserveEnd`, which drops whichever single tick collides: a phone's whole-week
-          // axis came out 2 4 6 8 _ 12, a doubled gap that reads as a missing week. Every
-          // other tick, keeping the last, gives 4 8 12 — still an even ruler.
-          interval="equidistantPreserveEnd"
-          tick={x.ticks === false ? false : undefined}
-          {...(tickAngle ? { angle: tickAngle, textAnchor: tickAngle < 0 ? "end" : "start" } : {})}
-          // With neither ticks nor title there is nothing to reserve the band for, and
-          // recharts' own 30 px would leave a gap under every chart of a stack.
-          height={x.ticks === false && !x.title ? 4 : tickBand}
-          tickFormatter={(value: number) => xFormat(Number(value))}
-        >
-          {x.title && (
-            <Label value={x.title} position="insideBottom" offset={-grow(12)} className="fill-muted text-caption" />
-          )}
-        </XAxis>
-        {drawnAxes.map((axis) => {
-          const domain = fittedY(axis);
-          const zoomed = anchored(axis) ? zoom?.xDomain !== undefined : zoom?.yDomains[axis.id] !== undefined;
-          return (
-            <YAxis
-              key={axis.id}
-              yAxisId={axis.id}
-              hide={axis.hide}
-              domain={domain}
-              ticks={
-                resolveTicks(axis.tickValues, domain, finite) ??
-                (wholeOnly(axis)
-                  ? (integerTicks(domain, ticksAim) ?? niceTicks(domain, ticksAim))
-                  : niceTicks(domain, ticksAim))
-              }
-              allowDataOverflow={zoomed}
-              orientation={axis.orientation ?? "left"}
-              // Nothing for a hidden axis. An axis that turns hidden on a MOUNTED chart —
-              // what the budget does on every resize across its threshold — kept its old
-              // width in recharts' stacking of that side, and pushed the axes still drawn
-              // off the chart's edge. A zero width leaves nothing stale to count.
-              width={axis.hide ? 0 : axisBandWidth(axis.width, Boolean(axis.title), scale)}
-              tickLine={false}
-              axisLine={false}
-              tickFormatter={axis.format ?? number}
-              // With an axis per channel the tint is the only thing saying which
-              // numbers belong to which line.
-              tick={axis.color ? { fill: axis.color } : undefined}
-            >
-              {axis.title && !axis.hide && (
-                <Label
-                  value={axis.title}
-                  // Rotated so both sides read upward from the bottom of their axis.
-                  angle={axis.orientation === "right" ? 90 : -90}
-                  position={axis.orientation === "right" ? "insideRight" : "insideLeft"}
-                  // Inline, so a sole series' colour beats the class's neutral fill —
-                  // and absent for a shared axis, so the class draws it.
-                  style={{ textAnchor: "middle", fill: soleSeriesColor(axis, series) }}
-                  offset={grow(AXIS_TITLE_OFFSET)}
-                  className="fill-muted text-caption"
-                />
-              )}
-            </YAxis>
-          );
-        })}
-        {inRow ? (
-          // Not before the row exists: without its own portal recharts would float this
-          // content over the plot for the first frame.
-          readout && (
-            <ChartTooltip
-              portal={readout}
-              // recharts hides an inactive tooltip; the row shows its idle state instead.
-              wrapperStyle={{ visibility: "visible" }}
-              defaultIndex={focusedStop?.index}
-              content={
-                <ChartTooltipContent
-                  variant="readout"
-                  idleKeys={series.map((entry) => entry.key)}
-                  idleLabel={x.title || undefined}
-                  labelFormatter={(value) => xLabel(Number(value))}
-                  valueFormatter={valueFormat ?? number}
-                />
-              }
-            />
-          )
-        ) : (
-          <ChartTooltip
-            {...(tooltip?.allowEscapeViewBox || tooltip?.boundary
-              ? { allowEscapeViewBox: tooltip.allowEscapeViewBox ?? { x: true } }
-              : {})}
-            // The content shifts itself 12 px off the cursor (or flips) against the
-            // boundary; recharts' own offset on top would double it.
-            {...(tooltip?.boundary ? { offset: 0 } : {})}
-            // The keyboard's stop shows its tooltip as the pointer's would.
-            defaultIndex={focusedStop?.index}
-            content={
-              <ChartTooltipContent
-                labelFormatter={(value) => xLabel(Number(value))}
-                valueFormatter={valueFormat ?? number}
-                boundaryRef={tooltip?.boundary}
-              />
-            }
-          />
-        )}
-        {series.map((entry) => {
-          const type = entry.type ?? "line";
-          const yAxisId = entry.axis ?? DEFAULT_Y_AXIS;
-          const color = `var(--color-${entry.key})`;
-          // Under More contrast, a filled mark in a hue under 3:1 against the ground gets
-          // a 1px ink edge (WCAG 1.4.11, anyplot's rule) — measured on the colour the
-          // config paints. At Standard none does (see `edges`).
-          const edge = edges === "contrast" ? edgeFor(config[entry.key]?.color) : undefined;
-          const own = entry.dash ?? (entry.dashed ? 1 : 0);
-          const dash = entry.step ? strokeDash(STEP_DASH) : typeof own === "string" ? own : strokeDash(own);
-          const curve = entry.step ? "stepAfter" : (entry.curve ?? "monotone");
-          const width = entry.strokeWidth ?? (entry.step ? STEP_WIDTH : LINE_WIDTH);
-          if (type === "bar") {
-            const stub = entry.minBarLength ?? minBarLength;
-            return (
-              <Bar
-                key={entry.key}
-                yAxisId={yAxisId}
-                dataKey={entry.key}
-                stackId={entry.stack}
-                fill={color}
-                fillOpacity={entry.fillOpacity}
-                {...(edge ? { stroke: edge, strokeWidth: 1 } : {})}
-                radius={entry.stack === undefined ? BAR_RADIUS : 0}
-                // Read off the row rather than recharts' `value`: in a stack that is the
-                // layer's running top, which a hole has too — and a hole gets no stub.
-                {...(stub
-                  ? {
-                      minPointSize: (_value: unknown, index: number) =>
-                        finite(plotted[index]?.[entry.key]) === undefined ? 0 : stub,
-                    }
-                  : {})}
-                // Only the focused stop's series swaps its shape, and only for as long
-                // as it has focus: every other bar keeps recharts' own.
-                {...(focusedStop?.key === entry.key ? { shape: focusedBarShape(focusedStop.index) } : {})}
-                onClick={
-                  onPointClick
-                    ? (_bar, index, event) => {
-                        // The plot's own click would report the same slot again,
-                        // without the series.
-                        event.stopPropagation();
-                        const hit = hitAt(index, entry.key);
-                        if (hit) onPointClick(hit);
-                      }
-                    : undefined
-                }
-                {...animation}
-              />
-            );
-          }
-          if (type === "area") {
-            return (
-              <Area
-                key={entry.key}
-                yAxisId={yAxisId}
-                type={curve}
-                dataKey={entry.key}
-                stackId={entry.stack}
-                // The edge replaces the hue on the area's outline only; the fill keeps it,
-                // and the outline its width (0.52, DSP-18: it was 1px, whatever
-                // `strokeWidth` said).
-                stroke={edge ?? color}
-                strokeWidth={width}
-                strokeDasharray={dash}
-                fill={color}
-                fillOpacity={entry.fillOpacity ?? (entry.stack !== undefined ? 0.55 : 0.2)}
-                dot={dotFor(entry)}
-                {...(entry.activeDot !== undefined ? { activeDot: entry.activeDot } : {})}
-                connectNulls={connectNulls}
-                {...animation}
-              />
-            );
-          }
-          return (
-            <Line
-              key={entry.key}
-              yAxisId={yAxisId}
-              type={curve}
-              dataKey={entry.key}
-              stroke={color}
-              strokeWidth={width}
-              strokeDasharray={dash}
-              dot={dotFor(entry)}
-              {...(entry.activeDot !== undefined ? { activeDot: entry.activeDot } : {})}
-              connectNulls={connectNulls}
-              {...animation}
-            />
-          );
-        })}
-        {spans?.map((span) => (
-          <ReferenceLine
-            key={span.key}
-            yAxisId={span.axis ?? DEFAULT_Y_AXIS}
-            segment={[
-              { x: span.x, y: span.from },
-              { x: span.x, y: span.to },
-            ]}
-            stroke={span.color ?? "var(--text-muted)"}
-            strokeWidth={2}
-            // Discarded rather than clamped when zoomed past: a span clamped to the
-            // window's edge draws a vertical line at an abscissa it never stood at.
-            ifOverflow="discard"
-          />
-        ))}
-        {refs.map((ref, index) => {
-          const vertical = ref.axis === "x";
-          const at = vertical ? xPos(ref.value) : finite(ref.value);
-          if (at === undefined) return null;
-          const color = ref.color ?? TONE_COLOR[ref.tone ?? "muted"];
-          return (
-            <ReferenceLine
-              key={ref.key ?? `reference-${index}`}
-              // A vertical line still needs a y axis to be drawn against, and every
-              // axis here is named — the grid's is always there.
-              yAxisId={vertical ? gridAxis : (ref.axis ?? DEFAULT_Y_AXIS)}
-              {...(vertical ? { x: at } : { y: at })}
-              stroke={color}
-              strokeWidth={1}
-              strokeDasharray={strokeDash(ref.dash ?? 1)}
-              ifOverflow="discard"
-              label={
-                ref.label
-                  ? {
-                      value: ref.label,
-                      position: "insideTopLeft",
-                      fontSize: REFERENCE_LABEL_SIZE * scale,
-                      fill: color,
-                    }
-                  : undefined
-              }
-            />
-          );
-        })}
-        {markers?.map((marker, index) => {
-          const at = xPos(marker.x);
-          if (at === undefined || finite(marker.y) === undefined) return null;
-          const color = marker.color ?? TONE_COLOR[marker.tone ?? "brand"];
-          return (
-            <ReferenceDot
-              key={marker.key ?? `marker-${index}`}
-              yAxisId={marker.axis ?? DEFAULT_Y_AXIS}
-              x={at}
-              y={marker.y}
-              r={marker.r ?? 4.5}
-              fill={color}
-              stroke="var(--bg-surface)"
-              strokeWidth={1.5}
-              ifOverflow="discard"
-              label={marker.label ? { value: marker.label, position: "top", content: <MarkerLabel /> } : undefined}
-            />
-          );
-        })}
-        {stops.length > 0 && (
-          <PointKeys
-            stops={stops}
-            current={Math.min(keyStop, stops.length - 1)}
-            label={labels.points}
-            onFocusStop={(at) => {
-              setKeyStop(at);
-              setKeyFocus(at);
-            }}
-            onBlurStops={() => setKeyFocus(undefined)}
-            onPick={
-              onPointClick
-                ? (stop) => {
-                    const hit = hitAt(stop.index, stop.key);
-                    if (hit) onPointClick(hit);
-                  }
-                : undefined
-            }
-          />
-        )}
-        {zoom?.layer}
-      </ComposedChart>
-    </ChartContainer>
-  );
-  if (!inRow) return chart;
-  // The row's own box, reserved from the first render: its idle state has the cells the
-  // active one will, so the first tap fills it in rather than pushing the plot down.
-  const row = (
-    <div
-      ref={setReadout}
-      data-tooltip-readout={placement}
-      className={cn(
-        "shrink-0",
-        // Above, the heading line shares the top corner with the zoom's reset button.
-        placement === "above" ? "pb-2 [&_[data-readout-heading]]:pe-32" : "pt-2",
-      )}
-    />
-  );
-  return (
-    <div {...figure} className={cn("flex w-full flex-col", heightClass)} style={heightStyle}>
-      {placement === "above" && row}
-      {chart}
-      {placement === "below" && row}
-      {about.node}
-    </div>
-  );
-}
-
-const ZoomablePlot = withChartZoom(SeriesPlot);
-
-/**
- * The caller's props, with the abscissa reduced to numbers for the plot and the zoom.
- * The reduction is kept while the rows and the two settings it reads stay the same — a
- * category or time chart otherwise re-maps every row on every render, and `maxRows`'
- * envelope would be worked out again with it.
- */
-function usePlotProps<TRow extends object>(typed: SeriesChartProps<TRow>): PlotProps {
-  // `TRow` types only what the caller is handed back, and that is its own row objects,
-  // untouched (0.53): the plot reads them as the `object` rows they are. Through `unknown`
-  // because the two are not comparable for an unresolved `TRow`: `SeriesChartSeries` is
-  // contravariant in it (its `dot` is handed rows) and `rows` covariant.
-  const props = typed as unknown as SeriesChartProps;
-  const x = props.x ?? {};
-  const { rows } = props;
-  const { type, key } = x;
-  // Read by key, so any object is a row (API-2); `SeriesChartRow` is how the plot reads it.
-  const model = useMemo(() => xModel(rows as readonly SeriesChartRow[], { type, key }), [rows, type, key]);
-  return { ...props, rows: model.rows, x: { key: model.plotKey }, model, xAxis: x };
-}
-
-/**
- * {@link SeriesChart} without the zoom: the same picture, no drag layer, no reset
- * button. For a thumbnail, a print view, or a chart the consumer wraps in its own
- * interaction.
- */
-export function StaticSeriesChart<TRow extends object = object>(props: SeriesChartProps<TRow>) {
-  return <SeriesPlot {...usePlotProps(props)} />;
-}
-
-/**
- * The series chart, zoomable. Drag across the plot to zoom (the drag's shape picks the
- * axes), double-click or press the reset button to go back; wrap several in
- * `SharedXZoom` to move their x windows together. Which axes zoom depends on the marks
- * — see {@link SeriesChartProps.zoomAxes}.
- *
- * Generic in its rows (0.53): `hit.row` and a `dot`'s `point.row` are typed as `rows` is —
- * see {@link SeriesChartProps}. A plain function, so the generic survives: a `memo` or a
- * `forwardRef` around it would read `TRow` as its constraint.
- */
-export function SeriesChart<TRow extends object = object>(props: SeriesChartProps<TRow>) {
-  // The zoom fits the PLOTTED rows — slot indices and epoch ms, not the caller's labels.
-  return <ZoomablePlot {...usePlotProps(props)} />;
-}