@misoto22/design 0.5.0 → 0.6.0

package/dist/charts/lib/zoom.js

@@ -0,0 +1,314 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import {
+  startTransition,
+  useCallback,
+  useDeferredValue,
+  useEffect,
+  useId,
+  useMemo,
+  useRef,
+  useState
+} from "react";
+import { cn } from "../../lib/cn.js";
+const ZOOM_STEP = 0.5;
+const MIN_SPAN = 2;
+const DRAG_THRESHOLD = 8;
+function clamp(value, low, high) {
+  return Math.max(low, Math.min(value, high));
+}
+function clampWindow(range, total, minSpan = MIN_SPAN) {
+  const maxIndex = Math.max(0, total - 1);
+  if (maxIndex === 0) return { startIndex: 0, endIndex: 0 };
+  const limit = Math.min(minSpan, maxIndex);
+  let startIndex = clamp(Math.round(range.startIndex), 0, maxIndex);
+  let endIndex = clamp(Math.round(range.endIndex), 0, maxIndex);
+  if (endIndex < startIndex) [startIndex, endIndex] = [endIndex, startIndex];
+  if (endIndex - startIndex < limit) {
+    endIndex = Math.min(startIndex + limit, maxIndex);
+    startIndex = Math.max(0, endIndex - limit);
+  }
+  return { startIndex, endIndex };
+}
+function zoomWindow(range, total, factor, minSpan = MIN_SPAN, anchor) {
+  const maxIndex = Math.max(0, total - 1);
+  if (maxIndex === 0) return { startIndex: 0, endIndex: 0 };
+  const current = clampWindow(range, total, minSpan);
+  const span = current.endIndex - current.startIndex;
+  const limit = Math.min(minSpan, maxIndex);
+  const raw = span * factor;
+  const nextSpan = clamp(factor < 1 ? Math.floor(raw) : Math.ceil(raw), limit, maxIndex);
+  const pivot = clamp(anchor ?? (current.startIndex + current.endIndex) / 2, 0, maxIndex);
+  const ratio = span > 0 ? (pivot - current.startIndex) / span : 0.5;
+  const startIndex = clamp(Math.round(pivot - ratio * nextSpan), 0, maxIndex - nextSpan);
+  return { startIndex, endIndex: startIndex + nextSpan };
+}
+function panWindow(range, total, delta) {
+  const maxIndex = Math.max(0, total - 1);
+  if (maxIndex === 0) return { startIndex: 0, endIndex: 0 };
+  const current = clampWindow(range, total, 0);
+  const span = current.endIndex - current.startIndex;
+  const startIndex = clamp(current.startIndex + Math.round(delta), 0, maxIndex - span);
+  return { startIndex, endIndex: startIndex + span };
+}
+function useChartZoom({
+  data,
+  xDataKey,
+  minSpan = MIN_SPAN,
+  step = ZOOM_STEP,
+  onZoomChange
+}) {
+  const total = data.length;
+  const maxIndex = Math.max(0, total - 1);
+  const [range, setRange] = useState({ startIndex: 0, endIndex: maxIndex });
+  const committed = useRef(range);
+  useEffect(() => {
+    const whole = { startIndex: 0, endIndex: Math.max(0, data.length - 1) };
+    committed.current = whole;
+    setRange(whole);
+  }, [data.length]);
+  const commit = useCallback(
+    (next) => {
+      const clamped = clampWindow(next, total, minSpan);
+      const last = committed.current;
+      if (last.startIndex === clamped.startIndex && last.endIndex === clamped.endIndex) return;
+      committed.current = clamped;
+      setRange(clamped);
+      startTransition(() => onZoomChange?.(clamped));
+    },
+    [minSpan, onZoomChange, total]
+  );
+  const zoomIn = useCallback(
+    (anchor) => commit(zoomWindow(committed.current, total, step, minSpan, anchor)),
+    [commit, minSpan, step, total]
+  );
+  const zoomOut = useCallback(
+    (anchor) => commit(zoomWindow(committed.current, total, 1 / step, minSpan, anchor)),
+    [commit, minSpan, step, total]
+  );
+  const reset = useCallback(
+    () => commit({ startIndex: 0, endIndex: Math.max(0, total - 1) }),
+    [commit, total]
+  );
+  const panBy = useCallback(
+    (delta) => commit(panWindow(committed.current, total, delta)),
+    [commit, total]
+  );
+  const zoomTo = useCallback((next) => commit(next), [commit]);
+  const labelAt = useCallback(
+    (index) => {
+      if (!xDataKey) return String(index + 1);
+      const value = data[index]?.[xDataKey];
+      return value === null || value === void 0 ? String(index + 1) : String(value);
+    },
+    [data, xDataKey]
+  );
+  const deferred = useDeferredValue(range);
+  const visibleData = useMemo(
+    () => data.slice(deferred.startIndex, deferred.endIndex + 1),
+    [data, deferred.endIndex, deferred.startIndex]
+  );
+  const brushProps = useMemo(
+    () => ({ startIndex: range.startIndex, endIndex: range.endIndex, onChange: commit }),
+    [commit, range.endIndex, range.startIndex]
+  );
+  const isZoomed = range.startIndex > 0 || range.endIndex < maxIndex;
+  return useMemo(
+    () => ({
+      range,
+      visibleData,
+      isZoomed,
+      canZoomIn: range.endIndex - range.startIndex > Math.min(minSpan, maxIndex),
+      canZoomOut: isZoomed,
+      zoomIn,
+      zoomOut,
+      reset,
+      panBy,
+      zoomTo,
+      total,
+      labelAt,
+      brushProps
+    }),
+    [
+      brushProps,
+      isZoomed,
+      labelAt,
+      maxIndex,
+      minSpan,
+      panBy,
+      range,
+      reset,
+      total,
+      visibleData,
+      zoomIn,
+      zoomOut,
+      zoomTo
+    ]
+  );
+}
+function ChartZoomSurface({
+  zoom,
+  label,
+  enabled = true,
+  ref,
+  children
+}) {
+  const fallbackRef = useRef(null);
+  const surfaceRef = ref ?? fallbackRef;
+  const hintId = `chart-zoom-hint-${useId().replace(/:/g, "")}`;
+  const drag = useRef(null);
+  const [selection, setSelection] = useState(null);
+  const indexAt = useCallback(
+    (clientX) => {
+      const node = surfaceRef.current;
+      const box = node ? plotBox(node) : null;
+      if (!box) return void 0;
+      const fraction = clamp((clientX - box.left) / box.width, 0, 1);
+      return zoom.range.startIndex + fraction * (zoom.range.endIndex - zoom.range.startIndex);
+    },
+    [surfaceRef, zoom.range.endIndex, zoom.range.startIndex]
+  );
+  useEffect(() => {
+    const node = surfaceRef.current;
+    if (!node || !enabled) return;
+    const onWheel = (event) => {
+      if (!event.ctrlKey && !event.metaKey) return;
+      event.preventDefault();
+      const anchor = indexAt(event.clientX);
+      if (event.deltaY < 0) zoom.zoomIn(anchor);
+      else zoom.zoomOut(anchor);
+    };
+    node.addEventListener("wheel", onWheel, { passive: false });
+    return () => node.removeEventListener("wheel", onWheel);
+  }, [enabled, indexAt, surfaceRef, zoom]);
+  const onPointerDown = (event) => {
+    if (!enabled || event.button !== 0) return;
+    drag.current = { pointerId: event.pointerId, originX: event.clientX };
+  };
+  const onPointerMove = (event) => {
+    const state = drag.current;
+    if (!state || state.pointerId !== event.pointerId) return;
+    const travelled = Math.abs(event.clientX - state.originX);
+    if (travelled < DRAG_THRESHOLD) return;
+    const node = surfaceRef.current;
+    const box = node ? plotBox(node) : null;
+    if (!node || !box) return;
+    if (!node.hasPointerCapture(event.pointerId)) node.setPointerCapture(event.pointerId);
+    const from = Math.min(state.originX, event.clientX);
+    setSelection({ start: from - box.left, width: travelled });
+  };
+  const endDrag = (event) => {
+    const state = drag.current;
+    drag.current = null;
+    setSelection(null);
+    const node = surfaceRef.current;
+    if (node?.hasPointerCapture(event.pointerId)) node.releasePointerCapture(event.pointerId);
+    if (!state || Math.abs(event.clientX - state.originX) < DRAG_THRESHOLD) return;
+    const from = indexAt(Math.min(state.originX, event.clientX));
+    const to = indexAt(Math.max(state.originX, event.clientX));
+    if (from === void 0 || to === void 0) return;
+    zoom.zoomTo({ startIndex: Math.floor(from), endIndex: Math.ceil(to) });
+  };
+  const onKeyDown = (event) => {
+    if (!enabled) return;
+    const span = zoom.range.endIndex - zoom.range.startIndex;
+    switch (event.key) {
+      case "ArrowLeft":
+      case "ArrowDown":
+        zoom.panBy(-1);
+        break;
+      case "ArrowRight":
+      case "ArrowUp":
+        zoom.panBy(1);
+        break;
+      case "PageDown":
+        zoom.panBy(-Math.max(1, span));
+        break;
+      case "PageUp":
+        zoom.panBy(Math.max(1, span));
+        break;
+      case "Home":
+        zoom.panBy(-zoom.total);
+        break;
+      case "End":
+        zoom.panBy(zoom.total);
+        break;
+      case "+":
+      case "=":
+        zoom.zoomIn();
+        break;
+      case "-":
+      case "_":
+        zoom.zoomOut();
+        break;
+      case "0":
+        zoom.reset();
+        break;
+      default:
+        return;
+    }
+    event.preventDefault();
+  };
+  const shown = zoom.range.endIndex - zoom.range.startIndex + 1;
+  return /* @__PURE__ */ jsxs("div", { className: "flex min-h-0 w-full flex-1 flex-col", children: [
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref: surfaceRef,
+        role: "group",
+        "aria-label": `${label} \u2014 plot`,
+        "aria-describedby": enabled ? hintId : void 0,
+        tabIndex: enabled ? 0 : void 0,
+        onKeyDown,
+        onPointerDown,
+        onPointerMove,
+        onPointerUp: endDrag,
+        onPointerCancel: endDrag,
+        className: cn(
+          "relative flex min-h-0 w-full flex-1 flex-col rounded-(--radius-sm)",
+          // Vertical scrolling still belongs to the page; horizontal movement
+          // is the pan gesture, so the browser must not claim it first.
+          enabled && "touch-pan-y",
+          selection && "select-none"
+        ),
+        children: [
+          children,
+          selection && // Positioned with inline style rather than `start-`/`end-` classes,
+          // for the same reason the brush is: the axis being selected along is
+          // the DATA's, and a cartesian plot runs left-to-right under
+          // `dir="rtl"` too.
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              "aria-hidden": true,
+              className: "pointer-events-none absolute inset-y-0 z-(--z-rule) border-x border-(--rule-2) bg-(--ink)/8",
+              style: { left: selection.start, width: selection.width }
+            }
+          )
+        ]
+      }
+    ),
+    enabled && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("p", { id: hintId, className: "sr-only", children: "Arrow keys pan by one point, Page Up and Page Down by a screenful, Home and End jump to the ends. Plus and minus zoom, zero resets. Ctrl and the wheel zoom around the pointer, and dragging across the plot zooms to that span." }),
+      /* @__PURE__ */ jsx("p", { "aria-live": "polite", className: "sr-only", children: `Showing ${zoom.labelAt(zoom.range.startIndex)} to ${zoom.labelAt(
+        zoom.range.endIndex
+      )}, ${shown} of ${zoom.total} points` })
+    ] })
+  ] });
+}
+function plotBox(surface) {
+  const grid = surface.querySelector(".recharts-cartesian-grid");
+  const gridBox = grid?.getBoundingClientRect();
+  if (gridBox && gridBox.width > 0) return gridBox;
+  const svg = surface.querySelector("svg.recharts-surface");
+  const svgBox = svg?.getBoundingClientRect();
+  return svgBox && svgBox.width > 0 ? svgBox : null;
+}
+export {
+  ChartZoomSurface,
+  clampWindow,
+  panWindow,
+  useChartZoom,
+  zoomWindow
+};
+//# sourceMappingURL=zoom.js.map

package/dist/charts/lib/zoom.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/charts/lib/zoom.tsx"],"sourcesContent":["'use client'\n\nimport {\n  startTransition,\n  useCallback,\n  useDeferredValue,\n  useEffect,\n  useId,\n  useMemo,\n  useRef,\n  useState,\n  type KeyboardEvent,\n  type PointerEvent as ReactPointerEvent,\n  type ReactNode,\n  type RefObject,\n} from 'react'\nimport { cn } from '../../lib/cn'\nimport type { ChartBrushRange } from './brush'\n\n/**\n * How far a single zoom step closes the window. Half is the step every map and\n * every chart toolbar has trained readers to expect from a `+`.\n */\nconst ZOOM_STEP = 0.5\n\n/** The fewest rows a zoom will leave on screen — the brush's floor, so the two agree. */\nconst MIN_SPAN = 2\n\n/**\n * How far the pointer has to travel before a press counts as a region\n * selection. Below this it is a click on the plot, which belongs to the tooltip\n * and to a series' own `isClickable`.\n */\nconst DRAG_THRESHOLD = 8\n\nfunction clamp(value: number, low: number, high: number): number {\n  return Math.max(low, Math.min(value, high))\n}\n\n/**\n * A range pulled back inside the data, with the minimum span enforced.\n *\n * Every other function here ends by calling this, so an inverted range, an\n * index past the end and a window narrower than `minSpan` all have exactly one\n * definition of what they become.\n */\nexport function clampWindow(\n  range: ChartBrushRange,\n  total: number,\n  minSpan: number = MIN_SPAN,\n): ChartBrushRange {\n  const maxIndex = Math.max(0, total - 1)\n  if (maxIndex === 0) return { startIndex: 0, endIndex: 0 }\n\n  const limit = Math.min(minSpan, maxIndex)\n  let startIndex = clamp(Math.round(range.startIndex), 0, maxIndex)\n  let endIndex = clamp(Math.round(range.endIndex), 0, maxIndex)\n  if (endIndex < startIndex) [startIndex, endIndex] = [endIndex, startIndex]\n\n  if (endIndex - startIndex < limit) {\n    endIndex = Math.min(startIndex + limit, maxIndex)\n    startIndex = Math.max(0, endIndex - limit)\n  }\n\n  return { startIndex, endIndex }\n}\n\n/**\n * The window after one zoom step.\n *\n * `factor` below 1 closes the window and above 1 opens it. `anchor` is the row\n * index that must stay where it is on screen — the pointer's row for a wheel\n * zoom, the window's own centre for a button — because a zoom that re-centres\n * is a zoom that loses the point the reader was looking at.\n *\n * The span is floored when closing and ceiled when opening rather than rounded\n * in both directions, so a step always moves: rounding leaves a three-row\n * window stuck at three when the step is a half.\n */\nexport function zoomWindow(\n  range: ChartBrushRange,\n  total: number,\n  factor: number,\n  minSpan: number = MIN_SPAN,\n  anchor?: number,\n): ChartBrushRange {\n  const maxIndex = Math.max(0, total - 1)\n  if (maxIndex === 0) return { startIndex: 0, endIndex: 0 }\n\n  const current = clampWindow(range, total, minSpan)\n  const span = current.endIndex - current.startIndex\n  const limit = Math.min(minSpan, maxIndex)\n  const raw = span * factor\n  const nextSpan = clamp(factor < 1 ? Math.floor(raw) : Math.ceil(raw), limit, maxIndex)\n\n  const pivot = clamp(anchor ?? (current.startIndex + current.endIndex) / 2, 0, maxIndex)\n  // Where the pivot sits across the window, 0 at the start and 1 at the end.\n  // Holding that fraction is what keeps the anchored row under the pointer.\n  const ratio = span > 0 ? (pivot - current.startIndex) / span : 0.5\n  const startIndex = clamp(Math.round(pivot - ratio * nextSpan), 0, maxIndex - nextSpan)\n\n  return { startIndex, endIndex: startIndex + nextSpan }\n}\n\n/**\n * The window slid along by `delta` rows, keeping its span.\n *\n * At either end it stops rather than shrinking. A pan that narrowed itself\n * against the edge would change the scale under the reader, which is a\n * different gesture from the one they made.\n */\nexport function panWindow(range: ChartBrushRange, total: number, delta: number): ChartBrushRange {\n  const maxIndex = Math.max(0, total - 1)\n  if (maxIndex === 0) return { startIndex: 0, endIndex: 0 }\n\n  const current = clampWindow(range, total, 0)\n  const span = current.endIndex - current.startIndex\n  const startIndex = clamp(current.startIndex + Math.round(delta), 0, maxIndex - span)\n\n  return { startIndex, endIndex: startIndex + span }\n}\n\nexport interface ChartZoomOptions<TData extends Record<string, unknown>> {\n  /** The whole dataset. The window is expressed as indexes into it. */\n  data: TData[]\n  /** The row field behind a row's name, used by the spoken window description. */\n  xDataKey?: keyof TData & string\n  /** The fewest rows a zoom will leave on screen. */\n  minSpan?: number\n  /** The fraction of the window one zoom step keeps. */\n  step?: number\n  /** Fires whenever the window changes, from any of the four inputs. */\n  onZoomChange?: (range: ChartBrushRange) => void\n}\n\nexport interface ChartZoom<TData extends Record<string, unknown> = Record<string, unknown>> {\n  /** The rows on screen, as indexes into the whole dataset. */\n  range: ChartBrushRange\n  /** The rows the plot should draw. */\n  visibleData: TData[]\n  /** Whether anything is hidden — what \"reset zoom\" is enabled by. */\n  isZoomed: boolean\n  canZoomIn: boolean\n  canZoomOut: boolean\n  /** Closes the window one step around `anchor`, or around its own centre. */\n  zoomIn: (anchor?: number) => void\n  /** Opens the window one step around `anchor`, or around its own centre. */\n  zoomOut: (anchor?: number) => void\n  /** Back to the whole dataset. */\n  reset: () => void\n  /** Slides the window by a number of rows, keeping its span. */\n  panBy: (delta: number) => void\n  /** Jumps straight to a window — what a drag across the plot commits. */\n  zoomTo: (range: ChartBrushRange) => void\n  /** How many rows there are in total. */\n  total: number\n  /** A row's name, for an announcement or a label. */\n  labelAt: (index: number) => string\n  /** Spread onto `<ChartBrush>` to make it a controlled view of this window. */\n  brushProps: {\n    startIndex: number\n    endIndex: number\n    onChange: (range: ChartBrushRange) => void\n  }\n}\n\n/**\n * A windowed view of a chart's rows, driven by the toolbar, the wheel, a drag\n * across the plot, and the keyboard.\n *\n * ## How this composes with `<Chart.Brush>`\n *\n * They are two views of ONE window, not two windows. This hook owns\n * `{ startIndex, endIndex }`; the brush is rendered controlled from it through\n * `brushProps` and reports back through the same commit path the toolbar\n * buttons use. So dragging a brush handle moves the toolbar's idea of the\n * window, \"reset zoom\" snaps the handles back to the full range, and neither\n * part has to know the other exists.\n *\n * The alternative — a zoom window layered on top of a brushed slice — was\n * rejected because it needs a composition rule (\"zoom is relative to the\n * brush\") that nobody can predict from the call site, and because it makes\n * reset ambiguous: reset the zoom, the brush, or both.\n *\n * This is a superset of `useChartBrush`, so a chart that can carry a toolbar\n * uses it in place of that hook rather than running the two side by side.\n *\n * @example\n * const zoom = useChartZoom({ data, xDataKey: 'month' })\n * <ChartBrush data={data} config={config} {...zoom.brushProps} />\n */\nexport function useChartZoom<TData extends Record<string, unknown>>({\n  data,\n  xDataKey,\n  minSpan = MIN_SPAN,\n  step = ZOOM_STEP,\n  onZoomChange,\n}: ChartZoomOptions<TData>): ChartZoom<TData> {\n  const total = data.length\n  const maxIndex = Math.max(0, total - 1)\n\n  const [range, setRange] = useState<ChartBrushRange>({ startIndex: 0, endIndex: maxIndex })\n\n  // The committed window, mirrored in a ref so the commands below can stay\n  // stable across renders. The wheel listener is attached natively and would\n  // otherwise be torn down and re-attached on every step.\n  const committed = useRef(range)\n\n  useEffect(() => {\n    const whole = { startIndex: 0, endIndex: Math.max(0, data.length - 1) }\n    committed.current = whole\n    setRange(whole)\n  }, [data.length])\n\n  const commit = useCallback(\n    (next: ChartBrushRange) => {\n      const clamped = clampWindow(next, total, minSpan)\n      const last = committed.current\n      if (last.startIndex === clamped.startIndex && last.endIndex === clamped.endIndex) return\n\n      committed.current = clamped\n      setRange(clamped)\n      // The control that moved has to keep up with the pointer; the plot does\n      // not. Deferring lets React drop intermediate windows during a drag.\n      startTransition(() => onZoomChange?.(clamped))\n    },\n    [minSpan, onZoomChange, total],\n  )\n\n  const zoomIn = useCallback(\n    (anchor?: number) => commit(zoomWindow(committed.current, total, step, minSpan, anchor)),\n    [commit, minSpan, step, total],\n  )\n\n  const zoomOut = useCallback(\n    (anchor?: number) => commit(zoomWindow(committed.current, total, 1 / step, minSpan, anchor)),\n    [commit, minSpan, step, total],\n  )\n\n  const reset = useCallback(\n    () => commit({ startIndex: 0, endIndex: Math.max(0, total - 1) }),\n    [commit, total],\n  )\n\n  const panBy = useCallback(\n    (delta: number) => commit(panWindow(committed.current, total, delta)),\n    [commit, total],\n  )\n\n  const zoomTo = useCallback((next: ChartBrushRange) => commit(next), [commit])\n\n  const labelAt = useCallback(\n    (index: number) => {\n      if (!xDataKey) return String(index + 1)\n      const value = data[index]?.[xDataKey]\n      return value === null || value === undefined ? String(index + 1) : String(value)\n    },\n    [data, xDataKey],\n  )\n\n  // The slice runs on a deferred copy of the window, so the control that moved\n  // re-renders at pointer cadence and the plot at whatever it can manage.\n  const deferred = useDeferredValue(range)\n  const visibleData = useMemo(\n    () => data.slice(deferred.startIndex, deferred.endIndex + 1),\n    [data, deferred.endIndex, deferred.startIndex],\n  )\n\n  const brushProps = useMemo(\n    () => ({ startIndex: range.startIndex, endIndex: range.endIndex, onChange: commit }),\n    [commit, range.endIndex, range.startIndex],\n  )\n\n  const isZoomed = range.startIndex > 0 || range.endIndex < maxIndex\n\n  return useMemo(\n    () => ({\n      range,\n      visibleData,\n      isZoomed,\n      canZoomIn: range.endIndex - range.startIndex > Math.min(minSpan, maxIndex),\n      canZoomOut: isZoomed,\n      zoomIn,\n      zoomOut,\n      reset,\n      panBy,\n      zoomTo,\n      total,\n      labelAt,\n      brushProps,\n    }),\n    [\n      brushProps,\n      isZoomed,\n      labelAt,\n      maxIndex,\n      minSpan,\n      panBy,\n      range,\n      reset,\n      total,\n      visibleData,\n      zoomIn,\n      zoomOut,\n      zoomTo,\n    ],\n  )\n}\n\nexport interface ChartZoomSurfaceProps {\n  /** The window this surface drives. */\n  zoom: ChartZoom\n  /** Names the region for a screen reader — pass the figure's title. */\n  label: string\n  /**\n   * Off leaves the plot inert while the toolbar buttons keep working. Use it\n   * for a chart whose only control is export.\n   */\n  enabled?: boolean\n  /** The plot's box, handed out because the PNG export needs the measured one. */\n  ref?: RefObject<HTMLDivElement | null>\n  children: ReactNode\n}\n\n/**\n * The plot, made zoomable and pannable by pointer AND by keyboard.\n *\n * The keyboard half is not a nicety. A chart whose only zoom is a drag gesture\n * is a chart a keyboard user can watch and cannot operate, which is the exact\n * failure the brush was rewritten to fix — so the surface is focusable, carries\n * its instructions in an `aria-describedby` note, and announces the window it\n * moved to through a polite live region.\n *\n * Arrow keys pan by a row, `PageUp`/`PageDown` by a screenful, `Home`/`End`\n * jump to the ends, `+`/`-` zoom and `0` resets. `ArrowLeft` means EARLIER in\n * every writing direction, matching the brush: the rendering engine lays a\n * cartesian plot out left-to-right whatever `dir` says, so mirroring the keys\n * would put \"earlier\" on the side the data does not run to.\n *\n * The wheel is deliberately gated behind Ctrl or Cmd. A chart that swallowed a\n * plain wheel event traps the page's scroll under the pointer, which is the\n * single most complained-about behaviour in an embedded map.\n */\nexport function ChartZoomSurface({\n  zoom,\n  label,\n  enabled = true,\n  ref,\n  children,\n}: ChartZoomSurfaceProps) {\n  const fallbackRef = useRef<HTMLDivElement>(null)\n  const surfaceRef = ref ?? fallbackRef\n  const hintId = `chart-zoom-hint-${useId().replace(/:/g, '')}`\n\n  const drag = useRef<{ pointerId: number; originX: number } | null>(null)\n  const [selection, setSelection] = useState<{ start: number; width: number } | null>(null)\n\n  /** The row index under a client x, read from the plot's own measured box. */\n  const indexAt = useCallback(\n    (clientX: number): number | undefined => {\n      const node = surfaceRef.current\n      const box = node ? plotBox(node) : null\n      if (!box) return undefined\n      const fraction = clamp((clientX - box.left) / box.width, 0, 1)\n      return zoom.range.startIndex + fraction * (zoom.range.endIndex - zoom.range.startIndex)\n    },\n    [surfaceRef, zoom.range.endIndex, zoom.range.startIndex],\n  )\n\n  useEffect(() => {\n    const node = surfaceRef.current\n    if (!node || !enabled) return\n\n    // Attached natively rather than through `onWheel`, because React registers\n    // its wheel listener passively — `preventDefault` from a React handler is a\n    // console warning and a page that zooms anyway.\n    const onWheel = (event: WheelEvent) => {\n      if (!event.ctrlKey && !event.metaKey) return\n      event.preventDefault()\n      const anchor = indexAt(event.clientX)\n      if (event.deltaY < 0) zoom.zoomIn(anchor)\n      else zoom.zoomOut(anchor)\n    }\n\n    node.addEventListener('wheel', onWheel, { passive: false })\n    return () => node.removeEventListener('wheel', onWheel)\n  }, [enabled, indexAt, surfaceRef, zoom])\n\n  const onPointerDown = (event: ReactPointerEvent<HTMLDivElement>) => {\n    if (!enabled || event.button !== 0) return\n    // No `preventDefault` here on purpose: it would cancel the compatibility\n    // mouse events the tooltip and a mark's own click handler run on.\n    drag.current = { pointerId: event.pointerId, originX: event.clientX }\n  }\n\n  const onPointerMove = (event: ReactPointerEvent<HTMLDivElement>) => {\n    const state = drag.current\n    if (!state || state.pointerId !== event.pointerId) return\n\n    const travelled = Math.abs(event.clientX - state.originX)\n    if (travelled < DRAG_THRESHOLD) return\n\n    const node = surfaceRef.current\n    const box = node ? plotBox(node) : null\n    if (!node || !box) return\n\n    if (!node.hasPointerCapture(event.pointerId)) node.setPointerCapture(event.pointerId)\n\n    const from = Math.min(state.originX, event.clientX)\n    setSelection({ start: from - box.left, width: travelled })\n  }\n\n  const endDrag = (event: ReactPointerEvent<HTMLDivElement>) => {\n    const state = drag.current\n    drag.current = null\n    setSelection(null)\n\n    const node = surfaceRef.current\n    if (node?.hasPointerCapture(event.pointerId)) node.releasePointerCapture(event.pointerId)\n    if (!state || Math.abs(event.clientX - state.originX) < DRAG_THRESHOLD) return\n\n    const from = indexAt(Math.min(state.originX, event.clientX))\n    const to = indexAt(Math.max(state.originX, event.clientX))\n    if (from === undefined || to === undefined) return\n\n    zoom.zoomTo({ startIndex: Math.floor(from), endIndex: Math.ceil(to) })\n  }\n\n  const onKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {\n    if (!enabled) return\n    const span = zoom.range.endIndex - zoom.range.startIndex\n\n    switch (event.key) {\n      case 'ArrowLeft':\n      case 'ArrowDown':\n        zoom.panBy(-1)\n        break\n      case 'ArrowRight':\n      case 'ArrowUp':\n        zoom.panBy(1)\n        break\n      case 'PageDown':\n        zoom.panBy(-Math.max(1, span))\n        break\n      case 'PageUp':\n        zoom.panBy(Math.max(1, span))\n        break\n      case 'Home':\n        zoom.panBy(-zoom.total)\n        break\n      case 'End':\n        zoom.panBy(zoom.total)\n        break\n      case '+':\n      case '=':\n        zoom.zoomIn()\n        break\n      case '-':\n      case '_':\n        zoom.zoomOut()\n        break\n      case '0':\n        zoom.reset()\n        break\n      default:\n        return\n    }\n\n    event.preventDefault()\n  }\n\n  const shown = zoom.range.endIndex - zoom.range.startIndex + 1\n\n  return (\n    <div className=\"flex min-h-0 w-full flex-1 flex-col\">\n      <div\n        ref={surfaceRef}\n        role=\"group\"\n        aria-label={`${label} — plot`}\n        aria-describedby={enabled ? hintId : undefined}\n        tabIndex={enabled ? 0 : undefined}\n        onKeyDown={onKeyDown}\n        onPointerDown={onPointerDown}\n        onPointerMove={onPointerMove}\n        onPointerUp={endDrag}\n        onPointerCancel={endDrag}\n        className={cn(\n          'relative flex min-h-0 w-full flex-1 flex-col rounded-(--radius-sm)',\n          // Vertical scrolling still belongs to the page; horizontal movement\n          // is the pan gesture, so the browser must not claim it first.\n          enabled && 'touch-pan-y',\n          selection && 'select-none',\n        )}\n      >\n        {children}\n\n        {selection && (\n          // Positioned with inline style rather than `start-`/`end-` classes,\n          // for the same reason the brush is: the axis being selected along is\n          // the DATA's, and a cartesian plot runs left-to-right under\n          // `dir=\"rtl\"` too.\n          <div\n            aria-hidden\n            className=\"pointer-events-none absolute inset-y-0 z-(--z-rule) border-x border-(--rule-2) bg-(--ink)/8\"\n            style={{ left: selection.start, width: selection.width }}\n          />\n        )}\n      </div>\n\n      {enabled && (\n        <>\n          <p id={hintId} className=\"sr-only\">\n            Arrow keys pan by one point, Page Up and Page Down by a screenful, Home and End jump to\n            the ends. Plus and minus zoom, zero resets. Ctrl and the wheel zoom around the pointer,\n            and dragging across the plot zooms to that span.\n          </p>\n          <p aria-live=\"polite\" className=\"sr-only\">\n            {`Showing ${zoom.labelAt(zoom.range.startIndex)} to ${zoom.labelAt(\n              zoom.range.endIndex,\n            )}, ${shown} of ${zoom.total} points`}\n          </p>\n        </>\n      )}\n    </div>\n  )\n}\n\n/**\n * The measured box of the PLOT, not of the wrapper around it.\n *\n * The wrapper carries the toolbar row and the brush footer, and the plot's own\n * `<svg>` carries the axis gutter, so mapping a pointer through either is off\n * by enough to feel wrong at the ends of a drag. The grid is the one element\n * whose box IS the plot area, so it is tried first; the surface is the fallback\n * for a chart composed without `<Chart.Grid>`.\n */\nfunction plotBox(surface: HTMLElement): DOMRect | null {\n  const grid = surface.querySelector('.recharts-cartesian-grid')\n  const gridBox = grid?.getBoundingClientRect()\n  if (gridBox && gridBox.width > 0) return gridBox\n\n  const svg = surface.querySelector('svg.recharts-surface')\n  const svgBox = svg?.getBoundingClientRect()\n  return svgBox && svgBox.width > 0 ? svgBox : null\n}\n"],"mappings":"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","names":[]}

package/dist/semantic.css

@@ -82,6 +82,25 @@
      rather than the semantic token (which inverts). */
   --photo-scrim: #101010;
 
+  /* ─── Data ─────────────────────────────────────────────────────────────
+     What a chart is allowed to read. The series ramp itself stays a
+     primitive — a chart names a SERIES by index, and an index has no role to
+     alias — but everything around the marks does have one, and naming it here
+     is what keeps a chart from reaching for --rule or --ink directly.
+
+     --chart-cursor is deliberately heavier than --chart-grid: the crosshair
+     has to be findable against the grid it crosses, and at hairline weight on
+     a dashed grid it was not. */
+  --chart-surface: var(--paper);
+  --chart-grid: var(--rule);
+  --chart-cursor: var(--rule-2);
+  --chart-axis: var(--ink-3-aa);
+  --chart-track: var(--series-track);
+  /* The decorative plate behind the plot — a dot field, a hatch, a grid of
+     plus marks. One step quieter than the grid, because it sits BEHIND data
+     and must never compete with it for the same read. */
+  --chart-pattern: var(--rule);
+
   /* ─── Depth ────────────────────────────────────────────────────────────
      Law 2 — a box-shadow is never blurred. The system has no elevation ramp;
      depth is a hard offset in ink, applied per component. These three resolve