@eifi1/ui-kit 0.51.7 → 0.53.0

package/src/components/series-chart.tsx

@@ -57,6 +57,8 @@ import {
   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,
@@ -123,11 +125,18 @@ import {
 import { useBreakpoint } from "../hooks/use-breakpoint";
 import { useTextSize } from "../theme/text-size";
 import { chartHeightProps, type ChartHeight } from "./chart-height";
-import { useChartEdge } from "./chart-edge";
+import { useChartEdge, useEdgesInForce } from "./chart-edge";
 import { cn } from "../lib/cn";
 import { formatWithMinus } from "../lib/minus";
 
-export interface SeriesChartSeries {
+/**
+ * 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;
@@ -175,8 +184,9 @@ export interface SeriesChartSeries {
    * 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) => ReactNode);
+  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;
@@ -211,14 +221,16 @@ export interface SeriesChartSeries {
 /** 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. */
-export interface SeriesChartPoint {
+/** 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. */
-  row: SeriesChartRow;
+  /** 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;
@@ -231,9 +243,32 @@ export interface SeriesChartPoint {
 
 /** 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}. */
+ *  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;
@@ -549,24 +584,44 @@ export interface SeriesChartMarker {
   r?: number;
 }
 
-/** What a click on the plot picked. */
-export interface SeriesChartHit {
+/** 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. */
-  row: SeriesChartRow;
+  /** 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;
 }
 
-export interface SeriesChartProps {
-  /** One row per abscissa value. A missing key is a hole (see `connectNulls`). */
-  rows: readonly SeriesChartRow[];
-  series: SeriesChartSeries[];
+/**
+ * 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?: SeriesChartAxis[];
+  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. */
@@ -598,11 +653,11 @@ export interface SeriesChartProps {
    * as the curve twitching. Turn it on where series come and go by choice.
    */
   animationMs?: number;
-  spans?: SeriesChartSpan[];
+  spans?: readonly SeriesChartSpan[];
   /** Lines across the plot at one value. */
-  references?: SeriesChartReference[];
+  references?: readonly SeriesChartReference[];
   /** Single labelled points. */
-  markers?: SeriesChartMarker[];
+  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
@@ -614,8 +669,12 @@ export interface SeriesChartProps {
    * 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) => void;
+  onPointClick?: (hit: SeriesChartHit<TRow>) => void;
   /** Where the tooltip may go: for a chart inside a scroll wrapper. See
    *  {@link SeriesChartTooltip}. */
   tooltip?: SeriesChartTooltip;
@@ -662,6 +721,19 @@ export interface SeriesChartProps {
   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
@@ -734,8 +806,10 @@ export interface SeriesLegendAxes {
  * 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(
-  series: readonly SeriesChartSeries[],
+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>();
@@ -778,9 +852,9 @@ const STEP_WIDTH = 1.5;
 const BAR_RADIUS: [number, number, number, number] = [3, 3, 0, 0];
 
 /**
- * One keyboard stop of a clickable chart: 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.
+ * 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;
@@ -788,10 +862,21 @@ interface PointStop {
   key?: string;
   from: number;
   to: number;
-  /** The accessible name: where it is and what it says. */
-  name: string;
+  /** 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
@@ -853,23 +938,25 @@ function MarkerLabel({ viewBox, value }: { viewBox?: { x?: number; y?: number; w
 }
 
 /**
- * The keyboard's way onto a clickable chart (`onPointClick`): 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.
+ * 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.
- * - ↵ and Space report the stop as a click would — with the series for a bar.
- * - Each is a `role="button"` named "period — series: value".
+ * - 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,
- * moved to the stop through `defaultIndex`, which recharts honours until a pointer has
- * hovered the chart.
+ * which recharts' own pointer is stood on the stop for (`pointAt`).
  */
 function PointKeys({
   stops,
@@ -884,40 +971,30 @@ function PointKeys({
   label: string;
   onFocusStop: (at: number) => void;
   onBlurStops: () => void;
-  onPick: (stop: PointStop) => 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 move = (at: number) => {
-    const next = Math.max(0, Math.min(stops.length - 1, at));
-    refs.current[next]?.focus();
-  };
   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.
+    // 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 === "ArrowRight"
-        ? at + 1
-        : event.key === "ArrowLeft"
-          ? at - 1
-          : event.key === "ArrowDown"
-            ? inSlot(1)
-            : event.key === "ArrowUp"
-              ? inSlot(-1)
-              : event.key === "Home"
-                ? 0
-                : event.key === "End"
-                  ? stops.length - 1
-                  : undefined;
+      event.key === "ArrowDown"
+        ? inSlot(1)
+        : event.key === "ArrowUp"
+          ? inSlot(-1)
+          : rovingTarget(event.key, "ltr", at, stops.length, false);
     if (target !== undefined) {
       event.preventDefault();
-      move(target);
-    } else if (event.key === "Enter" || event.key === " ") {
+      refs.current[target]?.focus();
+    } else if (onPick && (event.key === "Enter" || event.key === " ")) {
       event.preventDefault();
       onPick(stop);
     }
@@ -925,9 +1002,14 @@ function PointKeys({
 
   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;
@@ -939,9 +1021,9 @@ function PointKeys({
             ref={(node) => {
               refs.current[at] = node;
             }}
-            role="button"
+            role={onPick ? "button" : "img"}
             tabIndex={at === current ? 0 : -1}
-            aria-label={stop.name}
+            aria-label={stop.name()}
             data-point-key={stop.key}
             x={x0}
             y={plot.y}
@@ -956,8 +1038,19 @@ function PointKeys({
               // A bar outlines ITSELF (see `FOCUSED_BAR`); a slot has nothing else to.
               stop.key === undefined && "focus-visible:stroke-[var(--brand)]",
             )}
-            onFocus={() => onFocusStop(at)}
-            onBlur={onBlurStops}
+            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)}
           />
         );
@@ -966,6 +1059,32 @@ function PointKeys({
   );
 }
 
+/**
+ * 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[];
@@ -1000,6 +1119,8 @@ function SeriesPlot({
   axisBudget = "auto",
   onAxisBudget,
   maxRows,
+  "aria-label": ariaLabel,
+  description,
 }: PlotProps) {
   const labels = useKitLabels("seriesChart", DEFAULT_SERIES_CHART_LABELS, labelsProp);
   const locale = useKitLocale(localeProp);
@@ -1010,6 +1131,10 @@ function SeriesPlot({
   // 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`).
@@ -1085,13 +1210,31 @@ function SeriesPlot({
   // 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 (!model.source.length || !series.length) {
+  if (!drawable) {
     return (
-      <div className={cn("flex w-full items-center justify-center px-2 text-center", heightClass)} style={heightStyle}>
+      <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>
     );
   }
@@ -1268,14 +1411,15 @@ function SeriesPlot({
     return row ? { index: origin(index), row, x: xOf(index), key } : undefined;
   };
 
-  // The keyboard stops of a clickable chart — 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.
+  // 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[] = [];
-  if (onPointClick) {
+  {
     const valueText = valueFormat ?? number;
     const nameOf = (entry: SeriesChartSeries) =>
       typeof entry.label === "string" || typeof entry.label === "number" ? String(entry.label) : entry.key;
-    const said = (entry: SeriesChartSeries, value: number) => {
+    const cellText = (entry: SeriesChartSeries, value: number) => {
       const name = nameOf(entry);
       return name ? `${name}: ${valueText(value)}` : valueText(value);
     };
@@ -1291,21 +1435,23 @@ function SeriesPlot({
       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 heading = xLabel(at);
-      const where = typeof heading === "string" && heading ? heading : xFormat(at);
+      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} — ${said(entry, value)}` });
+          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 }) => said(entry, value)).join(", ")}`,
+          name: () => `${where()} — ${valued.map(({ entry, value }) => cellText(entry, value)).join(", ")}`,
         });
       }
     });
@@ -1359,6 +1505,7 @@ function SeriesPlot({
   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
@@ -1381,9 +1528,10 @@ function SeriesPlot({
         // 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 a tab stop whose arrows
-        // move the tooltip — a second stop beside `PointKeys`, and one ↵ does nothing on.
-        accessibilityLayer={!onPointClick}
+        // 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) => {
@@ -1515,9 +1663,10 @@ function SeriesPlot({
           const type = entry.type ?? "line";
           const yAxisId = entry.axis ?? DEFAULT_Y_AXIS;
           const color = `var(--color-${entry.key})`;
-          // 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.
-          const edge = edgeFor(config[entry.key]?.color);
+          // 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");
@@ -1568,9 +1717,11 @@ function SeriesPlot({
                 type={curve}
                 dataKey={entry.key}
                 stackId={entry.stack}
-                // The edge replaces the hue on the area's outline only; the fill keeps it.
+                // 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={edge ? 1 : width}
+                strokeWidth={width}
                 strokeDasharray={dash}
                 fill={color}
                 fillOpacity={entry.fillOpacity ?? (entry.stack !== undefined ? 0.55 : 0.2)}
@@ -1670,10 +1821,14 @@ function SeriesPlot({
               setKeyFocus(at);
             }}
             onBlurStops={() => setKeyFocus(undefined)}
-            onPick={(stop) => {
-              const hit = hitAt(stop.index, stop.key);
-              if (hit) onPointClick?.(hit);
-            }}
+            onPick={
+              onPointClick
+                ? (stop) => {
+                    const hit = hitAt(stop.index, stop.key);
+                    if (hit) onPointClick(hit);
+                  }
+                : undefined
+            }
           />
         )}
         {zoom?.layer}
@@ -1695,10 +1850,11 @@ function SeriesPlot({
     />
   );
   return (
-    <div className={cn("flex w-full flex-col", heightClass)} style={heightStyle}>
+    <div {...figure} className={cn("flex w-full flex-col", heightClass)} style={heightStyle}>
       {placement === "above" && row}
       {chart}
       {placement === "below" && row}
+      {about.node}
     </div>
   );
 }
@@ -1711,11 +1867,17 @@ const ZoomablePlot = withChartZoom(SeriesPlot);
  * category or time chart otherwise re-maps every row on every render, and `maxRows`'
  * envelope would be worked out again with it.
  */
-function usePlotProps(props: SeriesChartProps): PlotProps {
+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;
-  const model = useMemo(() => xModel(rows, { type, key }), [rows, type, key]);
+  // 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 };
 }
 
@@ -1724,7 +1886,7 @@ function usePlotProps(props: SeriesChartProps): PlotProps {
  * button. For a thumbnail, a print view, or a chart the consumer wraps in its own
  * interaction.
  */
-export function StaticSeriesChart(props: SeriesChartProps) {
+export function StaticSeriesChart<TRow extends object = object>(props: SeriesChartProps<TRow>) {
   return <SeriesPlot {...usePlotProps(props)} />;
 }
 
@@ -1733,8 +1895,12 @@ export function StaticSeriesChart(props: SeriesChartProps) {
  * 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(props: SeriesChartProps) {
+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)} />;
 }

package/src/components/share-card.tsx

@@ -4,7 +4,7 @@ import { Trash2, UserPlus, UsersRound } from "lucide-react";
 
 import { useKitLabels, useKitLocale, type LabelOverride } from "../i18n/kit-labels";
 import { cn } from "../lib/cn";
-import { foldForSearch } from "../lib/text-match";
+import { matchesSearch, searchWords } from "../lib/text-match";
 import { AlertBanner } from "./alert-banner";
 import { Autocomplete } from "./autocomplete";
 import type { ComboOption } from "./combobox-core";
@@ -368,11 +368,11 @@ export function SharePanel({
   // The completion is a convenience, not a search: an address that matches nobody is
   // the ordinary case (somebody new), so no "No results" box opens over the field —
   // and over its error. The same narrowing Autocomplete applies, asked first — folded as
-  // every kit list folds (DUP-5).
-  const needle = foldForSearch((target ? "" : email).trim(), locale);
-  const offers =
-    needle !== "" &&
-    options.some((o) => [o.label, o.sublabel ?? ""].some((s) => foldForSearch(s, locale).includes(needle)));
+  // every kit list folds (DUP-5), and word by word as its list matches since 0.51.4
+  // (refactor audit 2026-10-30, DUP-4): "weber jonas" kept the list shut over a
+  // candidate the list itself would have shown.
+  const words = searchWords(target ? "" : email, locale);
+  const offers = words.length > 0 && options.some((o) => matchesSearch(words, [o.label, o.sublabel], locale));
 
   const captionNode = typeof caption === "function" ? caption(target) : caption;
   const shownError = error ?? failure;