@eifi1/ui-kit 0.33.0 → 0.34.0

package/src/components/chart-zoom-core.tsx

@@ -0,0 +1,653 @@
+// Drag-to-zoom for cartesian charts — the HOC, the shared x window, and the arithmetic.
+// Lifted out of lenkbank, where every plot in the app is one `SeriesChart` and zoom is
+// therefore wired in exactly once.
+//
+// **Which axes a drag zooms is read off the drag itself.** A selection that is roughly
+// square is a box: the reader framed a REGION and means both axes. A long thin one is a
+// band, and its own direction says which: a wide flat drag means "this stretch of the
+// abscissa", a tall narrow one "this range of values". Asking with a modifier key
+// instead would be asking people to remember a convention for something they have
+// already drawn.
+//
+// Squareness is measured **in fractions of the plot**, not pixels. These charts are
+// three times wider than they are tall, so a pixel-square selection is a very wide
+// slice of the data and would read as a band to anybody looking at it.
+//
+// The zoom is VIEW state and lives here, never in a query or a store: it is where
+// somebody is looking, and a chart whose data reloads should not lose it. It is cleared
+// by the reset button, by a double click, and by nothing else.
+//
+// Everything with a decision in it is a pure exported function below (`zoomAxesFor`,
+// `selectionFromDrag`, `zoomAfter`, `zoomDomains`, `fitYToX`, `fitXToY`); the
+// components are plumbing between a pointer and those.
+//
+// The kit's own module (0.34, refactor audit 2026-10, API-6b): SeriesChart, its axes and
+// the facing pair import from here. ./chart-zoom is the public face — `SharedXZoom`, the
+// types, and until 0.35 the deprecated arithmetic and HOC, which no app imports.
+import { createContext, useContext, useEffect, useRef, useState } from "react";
+import type { ComponentType, Dispatch, ReactNode, SetStateAction } from "react";
+import {
+  usePlotArea,
+  useXAxisInverseScale,
+  useYAxisInverseScale,
+  type InverseScaleFunction,
+} from "recharts";
+import { X } from "lucide-react";
+import { cn } from "../lib/cn";
+import { FOCUS_RING } from "./focus-ring";
+import { useKitLabels, type LabelOverride } from "../i18n/kit-labels";
+import { DEFAULT_SERIES_CHART_LABELS, type SeriesChartLabels } from "./series-chart-labels";
+
+/** The y axis a series lands on when it names none — the single shared scale most
+ *  charts have. `SeriesChart` and the fit below agree on it by importing this. */
+export const DEFAULT_Y_AXIS = "y";
+
+/* ── The arithmetic ─────────────────────────────────────────────────────── */
+
+/**
+ * How square a selection has to be before it counts as a box: the shorter side
+ * against the longer, both as fractions of the plot. At 0.5 a selection twice as wide
+ * as it is tall is still a box and one three times as wide is a band.
+ */
+export const ZOOM_SQUARE_ENOUGH = 0.5;
+
+/** Below this a drag is a click that moved, not a selection. In fractions of the plot,
+ *  so it is the same gesture on a phone and on a wall display. */
+export const ZOOM_MIN_DRAG = 0.02;
+
+export type ZoomAxes = "both" | "x" | "y";
+
+/** Which axes a drag zooms — or `null` for a drag too small to mean one, or a plot
+ *  that has not been laid out yet. Direction does not matter; proportion does. */
+export function zoomAxesFor(
+  dx: number,
+  dy: number,
+  width: number,
+  height: number,
+  threshold: number = ZOOM_SQUARE_ENOUGH,
+  /** A chart that zooms ONE axis only (see {@link ZoomTarget.zoomAxes}): every drag is
+   *  a band along it, however it was drawn, and a drag with no extent along it is
+   *  nothing — a tall narrow drag over a bar chart names no stretch of the abscissa. */
+  only?: "x" | "y",
+): ZoomAxes | null {
+  if (!(width > 0) || !(height > 0)) return null;
+  const across = Math.abs(dx) / width;
+  const down = Math.abs(dy) / height;
+  if (only === "x") return across < ZOOM_MIN_DRAG ? null : "x";
+  if (only === "y") return down < ZOOM_MIN_DRAG ? null : "y";
+  if (across < ZOOM_MIN_DRAG && down < ZOOM_MIN_DRAG) return null;
+  const longer = Math.max(across, down);
+  const shorter = Math.min(across, down);
+  if (shorter / longer >= threshold) return "both";
+  return across > down ? "x" : "y";
+}
+
+/** What a drag chose, in DATA coordinates, and which axes it actually named — the
+ *  caller needs the second to know which of the two it may derive from the other. */
+export interface ZoomSelection {
+  which: ZoomAxes;
+  x?: [number, number];
+  /** One window per y axis, keyed by axis id: they are in different units. */
+  y: Record<string, [number, number]>;
+}
+
+/** A drag, in the chart's own pixel coordinates. */
+export interface ZoomDrag {
+  fromX: number;
+  fromY: number;
+  toX: number;
+  toY: number;
+}
+
+/** A pair as a domain, smallest first. Recharts wants an ascending domain whichever
+ *  way the drag went, and a y axis counts downward in pixels while its values count
+ *  upward — so both ends are read and sorted rather than one assumed to be low. */
+function ordered(a: number, b: number): [number, number] {
+  return a <= b ? [a, b] : [b, a];
+}
+
+/**
+ * A finished drag as a selection, or `null` when it selects nothing.
+ *
+ * `xInverse` and `yInverse(axisId)` are recharts' pixel→value functions; an axis whose
+ * function is missing, or whose ends come back non-finite, is left out rather than
+ * handed a NaN window.
+ */
+export function selectionFromDrag(
+  drag: ZoomDrag,
+  plot: { width: number; height: number },
+  xInverse: InverseScaleFunction | undefined,
+  yInverse: (axisId: string) => InverseScaleFunction | undefined,
+  axisIds: readonly string[],
+  only?: "x" | "y",
+): ZoomSelection | null {
+  const which = zoomAxesFor(
+    drag.toX - drag.fromX,
+    drag.toY - drag.fromY,
+    plot.width,
+    plot.height,
+    ZOOM_SQUARE_ENOUGH,
+    only,
+  );
+  if (!which) return null;
+  const next: ZoomSelection = { which, y: {} };
+  if (which !== "y" && xInverse) {
+    const from = Number(xInverse(drag.fromX));
+    const to = Number(xInverse(drag.toX));
+    if (Number.isFinite(from) && Number.isFinite(to)) next.x = ordered(from, to);
+  }
+  if (which !== "x") {
+    for (const id of axisIds) {
+      const inverse = yInverse(id);
+      if (!inverse) continue;
+      const from = Number(inverse(drag.fromY));
+      const to = Number(inverse(drag.toY));
+      if (Number.isFinite(from) && Number.isFinite(to)) next.y[id] = ordered(from, to);
+    }
+  }
+  return next.x || Object.keys(next.y).length ? next : null;
+}
+
+/** One row of a zoomable chart. Loose on purpose: a row also carries what the chart
+ *  does not plot — keksdose's `rawPeriod` for a drilldown, a label for a category axis —
+ *  and only the finite NUMBERS in it are ever read as samples. */
+export type ZoomRow = Readonly<Record<string, unknown>>;
+
+/** A series as the fit sees it. `stack` groups bars/areas drawn on top of each other
+ *  (recharts' `stackId`), whose extent is their SUM, not any one of them. */
+export interface ZoomFitSeries {
+  key: string;
+  axis?: string;
+  stack?: string;
+  /** Only `"line"` matters here: recharts cannot stack a line, so a line's `stack` is
+   *  ignored rather than summed into a height nothing on the chart reaches. */
+  type?: string;
+}
+
+/** What a band refit needs to know about the chart — a subset of `SeriesChart`'s own
+ *  props, so a chart hands its data straight over. */
+export interface ZoomFitSource {
+  rows: readonly ZoomRow[];
+  series: readonly ZoomFitSeries[];
+  axes: readonly { id: string }[];
+  xKey: string;
+}
+
+/** How much of a refitted span to leave as air, top and bottom. Without it the
+ *  highest sample sits exactly on the frame, where a line is half drawn and reads as
+ *  clipped rather than as the maximum. */
+const FIT_AIR = 0.05;
+
+/** A span with air around it — and a real span for a flat channel, which would
+ *  otherwise be a zero-height window recharts cannot scale. */
+function airy(low: number, high: number): [number, number] {
+  const span = high - low;
+  const air = span > 0 ? span * FIT_AIR : Math.max(Math.abs(high), 1) * FIT_AIR;
+  return [low - air, high + air];
+}
+
+/** A running low/high pair. A pair rather than an array to take `Math.min(...)` of:
+ *  the spread passes one argument per sample, and V8 faults past ~125,000 of them. */
+type Span = [number, number] | undefined;
+
+/** A pair widened by one value. A non-finite one is not a value — one NaN would
+ *  otherwise take the whole window with it. */
+function widen(span: Span, value: unknown): Span {
+  if (typeof value !== "number" || !Number.isFinite(value)) return span;
+  if (!span) return [value, value];
+  if (value < span[0]) span[0] = value;
+  else if (value > span[1]) span[1] = value;
+  return span;
+}
+
+/** Which series are measured on an axis. */
+function keysOn(source: ZoomFitSource, axisId: string): string[] {
+  return source.series
+    .filter((entry) => (entry.axis ?? DEFAULT_Y_AXIS) === axisId)
+    .map((entry) => entry.key);
+}
+
+/** A row's value as a sample, or 0 for a stack's missing layer — a stacked bar with no
+ *  value for one series draws the rest of the stack from where that one would end. */
+const layer = (value: unknown) => (typeof value === "number" && Number.isFinite(value) ? value : 0);
+
+/**
+ * The lowest and highest value an axis DRAWS over the rows whose abscissa is inside
+ * `window` (every row when there is none) — `undefined` when it draws nothing finite.
+ *
+ * Stack-aware, and that is why it exists: a stack of three bars reaches the SUM of
+ * them, and fitting the axis to the tallest single layer (what fitting on values did)
+ * cuts the top two thirds of every stack off. Positive and negative layers are summed
+ * apart, as recharts draws them under `stackOffset="sign"` — a month with 900 income
+ * and −300 expense stacks up to 900 and down to −300, not to 600. A stacked extent
+ * therefore always contains the zero its layers stand on.
+ *
+ * `SeriesChart` fits its axes with this and the zoom refits them with it, so the two
+ * cannot disagree about how tall a stack is.
+ */
+export function axisExtent(
+  source: ZoomFitSource,
+  axisId: string,
+  window?: readonly [number, number],
+): [number, number] | undefined {
+  const mine = source.series.filter((entry) => (entry.axis ?? DEFAULT_Y_AXIS) === axisId);
+  const loose: string[] = [];
+  const stacks = new Map<string, string[]>();
+  for (const entry of mine) {
+    if (entry.stack === undefined || entry.type === "line" || entry.type === undefined) {
+      loose.push(entry.key);
+    } else {
+      stacks.set(entry.stack, [...(stacks.get(entry.stack) ?? []), entry.key]);
+    }
+  }
+  let span: Span;
+  for (const row of source.rows) {
+    if (window) {
+      const at = row[source.xKey];
+      if (typeof at !== "number" || !(at >= window[0] && at <= window[1])) continue;
+    }
+    for (const key of loose) span = widen(span, row[key]);
+    for (const keys of stacks.values()) {
+      let up = 0;
+      let down = 0;
+      let any = false;
+      for (const key of keys) {
+        const value = layer(row[key]);
+        any ||= typeof row[key] === "number" && Number.isFinite(row[key]);
+        if (value >= 0) up += value;
+        else down += value;
+      }
+      if (!any) continue;
+      span = widen(widen(span, down), up);
+    }
+  }
+  return span;
+}
+
+/**
+ * Each y axis fitted to the samples inside an x window — what a band across x leaves
+ * the axes nobody dragged showing. Zoom into a tenth of a sweep and a y axis still
+ * scaled to the whole run draws that tenth as a flat line, which is the one thing the
+ * zoom was for; so the unnamed axes are refitted, which is what "zoom" means everywhere
+ * else.
+ *
+ * An axis with nothing inside the window is left OUT rather than collapsed: a window
+ * between two samples is one where the chart should keep drawing the line across.
+ */
+export function fitYToX(
+  source: ZoomFitSource,
+  window: readonly [number, number],
+): Record<string, [number, number]> {
+  const fitted: Record<string, [number, number]> = {};
+  for (const axis of source.axes) {
+    const span = axisExtent(source, axis.id, window);
+    if (span) fitted[axis.id] = airy(span[0], span[1]);
+  }
+  return fitted;
+}
+
+/**
+ * The x window that holds every sample inside a set of y windows — the other direction
+ * of the same idea. A channel crossing its band once gives a tight window; one that
+ * oscillates through it gives back most of the sweep, which is the truthful answer.
+ * `undefined` when no sample qualifies, rather than a guess.
+ */
+export function fitXToY(
+  source: ZoomFitSource,
+  windows: Readonly<Record<string, readonly [number, number]>>,
+): [number, number] | undefined {
+  let hits: Span;
+  for (const [axisId, [low, high]] of Object.entries(windows)) {
+    for (const key of keysOn(source, axisId)) {
+      for (const row of source.rows) {
+        const value = row[key];
+        if (typeof value === "number" && Number.isFinite(value) && value >= low && value <= high) {
+          hits = widen(hits, row[source.xKey]);
+        }
+      }
+    }
+  }
+  return hits ? airy(hits[0], hits[1]) : undefined;
+}
+
+/**
+ * What a chart remembers about its zoom: the x window, and the y windows the reader
+ * DRAGGED. `y: null` means "derive y from x" — the split is the whole design: what was
+ * dragged is kept, and what follows from it is recomputed on every render, so a band
+ * across x refits y here and in every chart sharing the window.
+ */
+export interface ZoomState {
+  x?: [number, number];
+  y: Record<string, [number, number]> | null;
+}
+
+export const NO_ZOOM: ZoomState = { x: undefined, y: null };
+
+/**
+ * The state after a selection. Two band drags COMPOSE rather than the second undoing
+ * the first: a band down y keeps the x window when the band holds no samples, and
+ * otherwise pulls x in to where they are.
+ */
+export function zoomAfter(
+  state: ZoomState,
+  selection: ZoomSelection,
+  source: ZoomFitSource,
+): ZoomState {
+  if (selection.which === "both") return { x: selection.x, y: selection.y };
+  // Leave y derived, so it fits itself to what is inside the new window.
+  if (selection.which === "x") return { x: selection.x, y: null };
+  return { x: fitXToY(source, selection.y) ?? state.x, y: selection.y };
+}
+
+/** The domains a chart draws for a state: the x window as is, and each y axis either
+ *  as dragged or fitted to the x window. `{}` means "fit your own data". */
+export function zoomDomains(
+  state: ZoomState,
+  source: ZoomFitSource,
+): { xDomain?: [number, number]; yDomains: Record<string, [number, number]> } {
+  return {
+    xDomain: state.x,
+    yDomains: state.y ?? (state.x ? fitYToX(source, state.x) : {}),
+  };
+}
+
+/* ── The components ─────────────────────────────────────────────────────── */
+
+/** What the wrapped chart is handed. It applies the domains to its own axes and renders
+ *  `layer` INSIDE the recharts chart, where recharts' hooks answer. */
+export interface ZoomBinding {
+  xDomain?: [number, number];
+  yDomains: Record<string, [number, number]>;
+  layer: ReactNode;
+}
+
+/**
+ * Which axes a chart lets a drag zoom. `"none"` draws no drag layer and no reset.
+ * A drag on a one-axis chart is always a band along that axis (see {@link zoomAxesFor}).
+ */
+export type ZoomAxesSetting = ZoomAxes | "none";
+
+/**
+ * The zoom a chart gets when it does not say, read off what its series ARE.
+ *
+ * - Only lines: `"both"` — lenkbank's measurement plots, unchanged.
+ * - Any area: `"x"`. An area's height is a length from zero, and a y window that cuts
+ *   the baseline off draws a band of 40 as three times one of 20 — so its y axis refits
+ *   to the x window (still from zero), and a drag never names a y range.
+ * - Any bar: `"none"`. A bar chart is a handful of periods read one bar at a time, and
+ *   in keksdose every one of them is CLICKED — to drill into a payee, a month, a budget
+ *   line — which a drag layer over the plot would swallow. A chart of many bars opts
+ *   back in with `zoomAxes: "x"`; a click then reports the period, not the bar.
+ */
+export function defaultZoomAxes(series: readonly { type?: string }[] | undefined): ZoomAxesSetting {
+  if (series?.some((entry) => entry.type === "bar")) return "none";
+  if (series?.some((entry) => entry.type === "area")) return "x";
+  return "both";
+}
+
+/** The props `withChartZoom` reads off the chart it wraps. */
+export interface ZoomTarget {
+  /** Default: the single axis {@link DEFAULT_Y_AXIS}. */
+  axes?: readonly { id: string; hide?: boolean }[];
+  /** The chart's own data, so a band can refit the axis it did not name. Optional: a
+   *  chart with nothing plotted has nothing to fit to. */
+  rows?: readonly ZoomRow[];
+  series?: readonly ZoomFitSeries[];
+  x?: { key?: string };
+  zoom?: ZoomBinding;
+  labels?: LabelOverride<SeriesChartLabels>;
+  /** Which axes a drag may zoom. Default: {@link defaultZoomAxes} of `series`. */
+  zoomAxes?: ZoomAxesSetting;
+}
+
+const SharedX = createContext<{
+  window?: [number, number];
+  set: Dispatch<SetStateAction<[number, number] | undefined>>;
+} | null>(null);
+
+/**
+ * One x window for several charts.
+ *
+ * A column of charts over one abscissa is one picture, and zooming one of them and not
+ * the rest turns it into several pictures of different things. Every zoomable chart
+ * inside this shares the x window: any drag in any of them moves all of them.
+ *
+ * **Only x.** The y axes stay each chart's own — they are in different units — and
+ * each refits its own y to what is inside the shared window.
+ */
+export function SharedXZoom({ children }: { children: ReactNode }) {
+  const [window, set] = useState<[number, number] | undefined>(undefined);
+  return <SharedX.Provider value={{ window, set }}>{children}</SharedX.Provider>;
+}
+
+/**
+ * Wrap a chart in drag-to-zoom.
+ *
+ * The chart receives a `zoom` binding: it applies `xDomain`/`yDomains` to its axes
+ * (with `allowDataOverflow`, so recharts clips to the window instead of widening it
+ * back out) and renders `layer` as a child of its recharts chart. A reset button
+ * appears over the chart's top end corner while it is zoomed — a real button, so the
+ * keyboard can undo what the pointer did.
+ */
+export function withChartZoom<P extends ZoomTarget>(Chart: ComponentType<P>) {
+  function Zoomable(props: P) {
+    const labels = useKitLabels("seriesChart", DEFAULT_SERIES_CHART_LABELS, props.labels);
+    const group = useContext(SharedX);
+    const [ownX, setOwnX] = useState<[number, number] | undefined>(undefined);
+    const [ownY, setOwnY] = useState<Record<string, [number, number]> | null>(null);
+    const xWindow = group ? group.window : ownX;
+    const setXWindow = group ? group.set : setOwnX;
+    const axes = props.axes ?? [{ id: DEFAULT_Y_AXIS }];
+    const setting = props.zoomAxes ?? defaultZoomAxes(props.series);
+    const only = setting === "x" || setting === "y" ? setting : undefined;
+
+    // Every axis, hidden ones included: a hidden axis still scales its lines, and a
+    // line whose axis did not refit is drawn as a flat streak inside the window.
+    const source: ZoomFitSource = {
+      rows: props.rows ?? [],
+      series: [...(props.series ?? [])],
+      axes: [...axes],
+      xKey: props.x?.key ?? "x",
+    };
+    const state: ZoomState = { x: xWindow, y: ownY };
+    const zoomed = xWindow !== undefined || ownY !== null;
+    // A chart handed no rows or no series draws its empty state, not a plot — and a
+    // "Reset zoom" floating over "No data" (every line toggled off while zoomed) offers
+    // to undo something the reader cannot see. The zoom itself is KEPT: it is where they
+    // were looking, and it applies again the moment a line comes back. Only an array
+    // that is there and empty counts; a chart that does not pass its data is not known
+    // to be empty.
+    const empty = props.rows?.length === 0 || props.series?.length === 0;
+
+    const clear = () => {
+      setXWindow(undefined);
+      setOwnY(null);
+    };
+
+    // Switched off, the chart still gets a binding — with no window and no layer — so a
+    // chart whose series change type mid-life is not remounted by a different tree.
+    if (setting === "none") {
+      return (
+        <div className="relative">
+          <Chart {...props} zoom={{ yDomains: {}, layer: null }} />
+        </div>
+      );
+    }
+
+    const binding: ZoomBinding = {
+      ...zoomDomains(state, source),
+      layer: (
+        <ZoomLayer
+          axisIds={axes.map((axis) => axis.id)}
+          only={only}
+          label={labels.zoomHint}
+          onZoom={(selection) => {
+            const next = zoomAfter(state, selection, source);
+            if (next.x !== xWindow) setXWindow(next.x);
+            setOwnY(next.y);
+          }}
+          onReset={clear}
+        />
+      ),
+    };
+
+    return (
+      <div className="relative">
+        <Chart {...props} zoom={binding} />
+        {zoomed && !empty && (
+          <button
+            type="button"
+            onClick={clear}
+            className={cn(
+              "absolute end-1 top-1 z-10 inline-flex items-center gap-1 rounded border border-subtle bg-surface/90 px-1.5 py-0.5 text-micro text-muted backdrop-blur transition-colors hover:text-primary",
+              FOCUS_RING,
+            )}
+          >
+            <X aria-hidden className="size-3" /> {labels.resetZoom}
+          </button>
+        )}
+      </div>
+    );
+  }
+  Zoomable.displayName = `withChartZoom(${Chart.displayName ?? Chart.name ?? "Chart"})`;
+  return Zoomable;
+}
+
+/**
+ * The part that lives INSIDE the recharts chart, where recharts will say where the plot
+ * is and what value a pixel is.
+ *
+ * A transparent rectangle over the plot area that reads the drag. It does NOT stop the
+ * event: recharts drives its tooltip from the same pointer move bubbling up to its own
+ * wrapper, so swallowing it here would trade the tooltip for the zoom.
+ */
+function ZoomLayer({
+  axisIds,
+  only,
+  label,
+  onZoom,
+  onReset,
+}: {
+  axisIds: string[];
+  only?: "x" | "y";
+  label: string;
+  onZoom: (selection: ZoomSelection) => void;
+  onReset: () => void;
+}) {
+  const plot = usePlotArea();
+  const xInverse = useXAxisInverseScale();
+  // One probe COMPONENT per axis rather than a hook in a loop: the number of axes
+  // changes as series are toggled, and a hook count that changes with the data is the
+  // one thing React will not forgive.
+  const [scales] = useState(() => new Map<string, InverseScaleFunction | undefined>());
+  const [drag, setDrag] = useState<ZoomDrag | null>(null);
+  // A finished drag is followed by a click on the same element, and a chart with an
+  // `onClick` (keksdose opens a drilldown on one) would read the zoom as a pick.
+  const draggedRef = useRef(false);
+
+  if (!plot || plot.width <= 0 || plot.height <= 0) return null;
+
+  const at = (event: { clientX: number; clientY: number; currentTarget: Element }) => {
+    // Against the overlay's own screen box, so padding around the container cannot
+    // shift every reading — plus the plot's offset, because the scales are in the
+    // chart's coordinates rather than the plot's.
+    const box = event.currentTarget.getBoundingClientRect();
+    return { x: event.clientX - box.left + plot.x, y: event.clientY - box.top + plot.y };
+  };
+
+  const finish = () => {
+    if (!drag) return;
+    setDrag(null);
+    const selection = selectionFromDrag(drag, plot, xInverse, (id) => scales.get(id), axisIds, only);
+    draggedRef.current = selection !== null;
+    if (selection) onZoom(selection);
+  };
+
+  // What the drag would do, shown while it is being made: a band paints the full width
+  // or height, so the reader sees it is about to let the other axis refit.
+  const which = drag
+    ? zoomAxesFor(
+        drag.toX - drag.fromX,
+        drag.toY - drag.fromY,
+        plot.width,
+        plot.height,
+        ZOOM_SQUARE_ENOUGH,
+        only,
+      )
+    : null;
+
+  return (
+    <g>
+      {axisIds.map((id) => (
+        <AxisProbe key={id} axisId={id} scales={scales} />
+      ))}
+      {drag && which && (
+        <rect
+          x={which === "y" ? plot.x : Math.min(drag.fromX, drag.toX)}
+          y={which === "x" ? plot.y : Math.min(drag.fromY, drag.toY)}
+          width={which === "y" ? plot.width : Math.abs(drag.toX - drag.fromX)}
+          height={which === "x" ? plot.height : Math.abs(drag.toY - drag.fromY)}
+          className="fill-[var(--brand)]/15 stroke-[var(--brand)]"
+          strokeDasharray="4 3"
+          pointerEvents="none"
+        />
+      )}
+      <rect
+        x={plot.x}
+        y={plot.y}
+        width={plot.width}
+        height={plot.height}
+        // `transparent`, not `none`: an unpainted shape takes no pointer events.
+        fill="transparent"
+        role="application"
+        aria-label={label}
+        style={{ cursor: "crosshair" }}
+        onPointerDown={(event) => {
+          if (event.button !== 0) return;
+          draggedRef.current = false;
+          const point = at(event);
+          // Best effort: capture keeps a drag alive past the plot's edge, but a
+          // pointer id the environment does not know throws — jsdom refuses them all —
+          // and a zoom that threw on pointer-down would be a chart nobody could click.
+          try {
+            event.currentTarget.setPointerCapture(event.pointerId);
+          } catch {
+            /* the drag still works; it just stops at the edge of the plot */
+          }
+          setDrag({ fromX: point.x, fromY: point.y, toX: point.x, toY: point.y });
+        }}
+        onPointerMove={(event) => {
+          if (!drag) return;
+          const point = at(event);
+          setDrag({ ...drag, toX: point.x, toY: point.y });
+        }}
+        onPointerUp={finish}
+        onPointerCancel={() => setDrag(null)}
+        onClick={(event) => {
+          if (!draggedRef.current) return;
+          draggedRef.current = false;
+          event.stopPropagation();
+        }}
+        onDoubleClick={onReset}
+      />
+    </g>
+  );
+}
+
+/** One axis's pixel→value function, parked where the pointer handler can reach it. */
+function AxisProbe({
+  axisId,
+  scales,
+}: {
+  axisId: string;
+  scales: Map<string, InverseScaleFunction | undefined>;
+}) {
+  const inverse = useYAxisInverseScale(axisId);
+  useEffect(() => {
+    scales.set(axisId, inverse);
+    return () => {
+      scales.delete(axisId);
+    };
+  }, [axisId, inverse, scales]);
+  return null;
+}