@eifi1/ui-kit 0.33.1 → 0.35.0

package/dist/components/chart-zoom.js

@@ -1,334 +1,6 @@
 "use client";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { createContext, useContext, useEffect, useRef, useState } from "react";
-import {
-  usePlotArea,
-  useXAxisInverseScale,
-  useYAxisInverseScale
-} from "recharts";
-import { X } from "lucide-react";
-import { cn } from "../lib/cn.js";
-import { FOCUS_RING } from "./focus-ring.js";
-import { useKitLabels } from "../i18n/kit-labels.js";
-import { DEFAULT_SERIES_CHART_LABELS } from "./series-chart-labels.js";
-const DEFAULT_Y_AXIS = "y";
-const ZOOM_SQUARE_ENOUGH = 0.5;
-const ZOOM_MIN_DRAG = 0.02;
-function zoomAxesFor(dx, dy, width, height, threshold = ZOOM_SQUARE_ENOUGH, only) {
-  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";
-}
-function ordered(a, b) {
-  return a <= b ? [a, b] : [b, a];
-}
-function selectionFromDrag(drag, plot, xInverse, yInverse, axisIds, only) {
-  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 = { 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;
-}
-const FIT_AIR = 0.05;
-function airy(low, high) {
-  const span = high - low;
-  const air = span > 0 ? span * FIT_AIR : Math.max(Math.abs(high), 1) * FIT_AIR;
-  return [low - air, high + air];
-}
-function widen(span, value) {
-  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;
-}
-function keysOn(source, axisId) {
-  return source.series.filter((entry) => (entry.axis ?? DEFAULT_Y_AXIS) === axisId).map((entry) => entry.key);
-}
-const layer = (value) => typeof value === "number" && Number.isFinite(value) ? value : 0;
-function axisExtent(source, axisId, window) {
-  const mine = source.series.filter((entry) => (entry.axis ?? DEFAULT_Y_AXIS) === axisId);
-  const loose = [];
-  const stacks = /* @__PURE__ */ new Map();
-  for (const entry of mine) {
-    if (entry.stack === void 0 || entry.type === "line" || entry.type === void 0) {
-      loose.push(entry.key);
-    } else {
-      stacks.set(entry.stack, [...stacks.get(entry.stack) ?? [], entry.key]);
-    }
-  }
-  let 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;
-}
-function fitYToX(source, window) {
-  const fitted = {};
-  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;
-}
-function fitXToY(source, windows) {
-  let hits;
-  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]) : void 0;
-}
-const NO_ZOOM = { x: void 0, y: null };
-function zoomAfter(state, selection, source) {
-  if (selection.which === "both") return { x: selection.x, y: selection.y };
-  if (selection.which === "x") return { x: selection.x, y: null };
-  return { x: fitXToY(source, selection.y) ?? state.x, y: selection.y };
-}
-function zoomDomains(state, source) {
-  return {
-    xDomain: state.x,
-    yDomains: state.y ?? (state.x ? fitYToX(source, state.x) : {})
-  };
-}
-function defaultZoomAxes(series) {
-  if (series?.some((entry) => entry.type === "bar")) return "none";
-  if (series?.some((entry) => entry.type === "area")) return "x";
-  return "both";
-}
-const SharedX = createContext(null);
-function SharedXZoom({ children }) {
-  const [window, set] = useState(void 0);
-  return /* @__PURE__ */ jsx(SharedX.Provider, { value: { window, set }, children });
-}
-function withChartZoom(Chart) {
-  function Zoomable(props) {
-    const labels = useKitLabels("seriesChart", DEFAULT_SERIES_CHART_LABELS, props.labels);
-    const group = useContext(SharedX);
-    const [ownX, setOwnX] = useState(void 0);
-    const [ownY, setOwnY] = useState(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 : void 0;
-    const source = {
-      rows: props.rows ?? [],
-      series: [...props.series ?? []],
-      axes: [...axes],
-      xKey: props.x?.key ?? "x"
-    };
-    const state = { x: xWindow, y: ownY };
-    const zoomed = xWindow !== void 0 || ownY !== null;
-    const empty = props.rows?.length === 0 || props.series?.length === 0;
-    const clear = () => {
-      setXWindow(void 0);
-      setOwnY(null);
-    };
-    if (setting === "none") {
-      return /* @__PURE__ */ jsx("div", { className: "relative", children: /* @__PURE__ */ jsx(Chart, { ...props, zoom: { yDomains: {}, layer: null } }) });
-    }
-    const binding = {
-      ...zoomDomains(state, source),
-      layer: /* @__PURE__ */ jsx(
-        ZoomLayer,
-        {
-          axisIds: axes.map((axis) => axis.id),
-          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 /* @__PURE__ */ jsxs("div", { className: "relative", children: [
-      /* @__PURE__ */ jsx(Chart, { ...props, zoom: binding }),
-      zoomed && !empty && /* @__PURE__ */ jsxs(
-        "button",
-        {
-          type: "button",
-          onClick: clear,
-          className: cn(
-            "absolute end-1 top-1 z-10 inline-flex items-center gap-1 rounded border border-[var(--border)] bg-[var(--bg-surface)]/90 px-1.5 py-0.5 text-micro text-[var(--text-muted)] backdrop-blur transition-colors hover:text-[var(--text-primary)]",
-            FOCUS_RING
-          ),
-          children: [
-            /* @__PURE__ */ jsx(X, { "aria-hidden": true, className: "size-3" }),
-            " ",
-            labels.resetZoom
-          ]
-        }
-      )
-    ] });
-  }
-  Zoomable.displayName = `withChartZoom(${Chart.displayName ?? Chart.name ?? "Chart"})`;
-  return Zoomable;
-}
-function ZoomLayer({
-  axisIds,
-  only,
-  label,
-  onZoom,
-  onReset
-}) {
-  const plot = usePlotArea();
-  const xInverse = useXAxisInverseScale();
-  const [scales] = useState(() => /* @__PURE__ */ new Map());
-  const [drag, setDrag] = useState(null);
-  const draggedRef = useRef(false);
-  if (!plot || plot.width <= 0 || plot.height <= 0) return null;
-  const at = (event) => {
-    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);
-  };
-  const which = drag ? zoomAxesFor(
-    drag.toX - drag.fromX,
-    drag.toY - drag.fromY,
-    plot.width,
-    plot.height,
-    ZOOM_SQUARE_ENOUGH,
-    only
-  ) : null;
-  return /* @__PURE__ */ jsxs("g", { children: [
-    axisIds.map((id) => /* @__PURE__ */ jsx(AxisProbe, { axisId: id, scales }, id)),
-    drag && which && /* @__PURE__ */ jsx(
-      "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"
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      "rect",
-      {
-        x: plot.x,
-        y: plot.y,
-        width: plot.width,
-        height: plot.height,
-        fill: "transparent",
-        role: "application",
-        "aria-label": label,
-        style: { cursor: "crosshair" },
-        onPointerDown: (event) => {
-          if (event.button !== 0) return;
-          draggedRef.current = false;
-          const point = at(event);
-          try {
-            event.currentTarget.setPointerCapture(event.pointerId);
-          } catch {
-          }
-          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
-      }
-    )
-  ] });
-}
-function AxisProbe({
-  axisId,
-  scales
-}) {
-  const inverse = useYAxisInverseScale(axisId);
-  useEffect(() => {
-    scales.set(axisId, inverse);
-    return () => {
-      scales.delete(axisId);
-    };
-  }, [axisId, inverse, scales]);
-  return null;
-}
+import { SharedXZoom } from "./chart-zoom-core.js";
 export {
-  DEFAULT_Y_AXIS,
-  NO_ZOOM,
-  SharedXZoom,
-  ZOOM_MIN_DRAG,
-  ZOOM_SQUARE_ENOUGH,
-  axisExtent,
-  defaultZoomAxes,
-  fitXToY,
-  fitYToX,
-  selectionFromDrag,
-  withChartZoom,
-  zoomAfter,
-  zoomAxesFor,
-  zoomDomains
+  SharedXZoom
 };
 //# sourceMappingURL=chart-zoom.js.map

package/dist/components/chart-zoom.js.map

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

package/dist/components/chart.d.ts

@@ -1,14 +1,11 @@
-import * as recharts from 'recharts';
-import { ResponsiveContainer, Tooltip } from 'recharts';
-import * as react from 'react';
-import { ReactNode, ComponentProps, RefObject } from 'react';
-
-interface ChartSeriesConfig {
+import type { ComponentProps, ReactNode, RefObject } from "react";
+import { ResponsiveContainer, Tooltip as RechartsTooltip } from "recharts";
+export interface ChartSeriesConfig {
     label: ReactNode;
     color: string;
 }
-type ChartConfig = Record<string, ChartSeriesConfig>;
-declare function useChart(): ChartConfig;
+export type ChartConfig = Record<string, ChartSeriesConfig>;
+export declare function useChart(): ChartConfig;
 interface ChartContainerProps extends ComponentProps<"div"> {
     config: ChartConfig;
     children: ComponentProps<typeof ResponsiveContainer>["children"];
@@ -27,7 +24,7 @@ interface ChartContainerProps extends ComponentProps<"div"> {
  * page's direction like any other markup. A consumer who does want a mirrored
  * category axis passes `reversed` on its own `XAxis`.
  */
-declare function ChartContainer({ id, className, children, config, ...props }: ChartContainerProps): react.JSX.Element;
+export declare function ChartContainer({ id, className, children, config, ...props }: ChartContainerProps): import("react").JSX.Element;
 /**
  * recharts' `Tooltip`, with `filterNull` defaulting to **false**.
  *
@@ -41,8 +38,8 @@ declare function ChartContainer({ id, className, children, config, ...props }: C
  * `ChartTooltipContent` itself (honouring `includeHidden`), so a legend toggle still
  * takes a series out of the tooltip. Pass `filterNull` to get recharts' behaviour back.
  */
-declare function ChartTooltip(props: ComponentProps<typeof Tooltip>): react.JSX.Element;
-declare const ChartLegend: react.MemoExoticComponent<(outsideProps: recharts.LegendProps) => React.ReactPortal | null>;
+export declare function ChartTooltip(props: ComponentProps<typeof RechartsTooltip>): import("react").JSX.Element;
+export declare const ChartLegend: import("react").MemoExoticComponent<(outsideProps: import("recharts").LegendProps) => React.ReactPortal | null>;
 interface TooltipPayloadItem {
     dataKey?: string | number;
     name?: string | number;
@@ -101,7 +98,7 @@ interface ChartTooltipContentProps {
     /** Readout only: the heading while nothing is active. Default "—". */
     idleLabel?: ReactNode;
 }
-declare function ChartTooltipContent({ active, payload, label, indicator, hideLabel, labelFormatter, valueFormatter, formatValue, coordinate, boundaryRef, includeHidden, variant, idleKeys, idleLabel, }: ChartTooltipContentProps): react.JSX.Element | null;
+export declare function ChartTooltipContent({ active, payload, label, indicator, hideLabel, labelFormatter, valueFormatter, formatValue, coordinate, boundaryRef, includeHidden, variant, idleKeys, idleLabel, }: ChartTooltipContentProps): import("react").JSX.Element | null;
 interface LegendPayloadItem {
     value?: string;
     dataKey?: string | number;
@@ -124,6 +121,5 @@ interface ChartLegendContentProps {
      */
     activeKey?: string | null;
 }
-declare function ChartLegendContent({ payload, onItemClick, hiddenKeys, activeKey, }: ChartLegendContentProps): react.JSX.Element | null;
-
-export { type ChartConfig, ChartContainer, ChartLegend, ChartLegendContent, type ChartSeriesConfig, ChartTooltip, ChartTooltipContent, useChart };
+export declare function ChartLegendContent({ payload, onItemClick, hiddenKeys, activeKey, }: ChartLegendContentProps): import("react").JSX.Element | null;
+export {};

package/dist/components/chart.js

@@ -30,10 +30,10 @@ function ChartContainer({ id, className, children, config, ...props }) {
         "[&_.recharts-surface]:[direction:ltr]",
         // muted axis labels + gridlines; one class each, since the tokens
         // already carry the light/dark values
-        "[&_.recharts-cartesian-axis-tick_text]:fill-[var(--text-muted)]",
-        "[&_.recharts-cartesian-grid_line]:stroke-[var(--border)]/70",
+        "[&_.recharts-cartesian-axis-tick_text]:fill-muted",
+        "[&_.recharts-cartesian-grid_line]:stroke-subtle/70",
         // hairline hover cursor instead of the heavy default
-        "[&_.recharts-curve.recharts-tooltip-cursor]:stroke-[var(--border-strong)]",
+        "[&_.recharts-curve.recharts-tooltip-cursor]:stroke-strong",
         "[&_.recharts-rectangle.recharts-tooltip-cursor]:fill-[var(--bg-hover)]",
         // kill the focus outlines & white sector strokes Recharts adds
         "[&_.recharts-sector]:outline-none [&_.recharts-sector[stroke='#fff']]:stroke-transparent",
@@ -155,7 +155,7 @@ function ChartTooltipContent({
     const cfgKey = dk && config[dk] ? dk : nm && config[nm] ? nm : dk ?? nm ?? String(i);
     const series = config[cfgKey];
     const fill = typeof item.payload?.fill === "string" ? item.payload.fill : void 0;
-    const color = paintedColor(cfgKey, series) ?? fill ?? item.color ?? "#64748b";
+    const color = paintedColor(cfgKey, series) ?? fill ?? item.color ?? "var(--text-muted)";
     const name = series?.label ?? nm ?? cfgKey;
     const raw = tooltipValue(item.value);
     let text;
@@ -181,7 +181,7 @@ function ChartTooltipContent({
           /* @__PURE__ */ jsx(
             "span",
             {
-              className: cn("min-w-0 text-[var(--text-muted)]", inRow ? "truncate" : "break-words"),
+              className: cn("min-w-0 text-muted", inRow ? "truncate" : "break-words"),
               children: name
             }
           ),
@@ -190,7 +190,7 @@ function ChartTooltipContent({
             {
               "data-private": true,
               dir: "auto",
-              className: "ms-auto shrink-0 whitespace-nowrap font-mono font-medium tabular-nums text-[var(--text-primary)]",
+              className: "ms-auto shrink-0 whitespace-nowrap font-mono font-medium tabular-nums text-primary",
               children: text
             }
           )
@@ -202,7 +202,7 @@ function ChartTooltipContent({
   if (readout) {
     const rows = shown ? items : (idleKeys ?? Object.keys(config)).map((key) => ({ dataKey: key }));
     return /* @__PURE__ */ jsxs("div", { className: "text-xs", "data-chart-readout": shown ? "active" : "idle", children: [
-      /* @__PURE__ */ jsx("div", { "data-readout-heading": true, className: "truncate font-medium leading-6 text-[var(--text-primary)]", children: shown && !hideLabel && label != null ? labelFormatter ? labelFormatter(label) : label : idleLabel ?? NO_VALUE }),
+      /* @__PURE__ */ jsx("div", { "data-readout-heading": true, className: "truncate font-medium leading-6 text-primary", children: shown && !hideLabel && label != null ? labelFormatter ? labelFormatter(label) : label : idleLabel ?? NO_VALUE }),
       /* @__PURE__ */ jsx("div", { className: "grid grid-cols-[repeat(auto-fill,minmax(9rem,1fr))] gap-x-4 gap-y-1", children: rows.map((item, i) => tooltipRow(item, i, true)) })
     ] });
   }
@@ -217,9 +217,9 @@ function ChartTooltipContent({
           nudge ? `translateX(${nudge}px)` : ""
         ].filter(Boolean).join(" ")
       } : void 0,
-      className: "min-w-[9rem] max-w-[min(20rem,calc(100vw-2rem))] rounded-lg border border-[var(--border)] bg-[var(--bg-surface)] px-2.5 py-2 text-xs shadow-xl",
+      className: "min-w-[9rem] max-w-[min(20rem,calc(100vw-2rem))] rounded-lg border border-subtle bg-surface px-2.5 py-2 text-xs shadow-xl",
       children: [
-        !hideLabel && label != null && /* @__PURE__ */ jsx("div", { className: "mb-1.5 font-medium text-[var(--text-primary)]", children: labelFormatter ? labelFormatter(label) : label }),
+        !hideLabel && label != null && /* @__PURE__ */ jsx("div", { className: "mb-1.5 font-medium text-primary", children: labelFormatter ? labelFormatter(label) : label }),
         /* @__PURE__ */ jsx("div", { className: "grid gap-1.5", children: items.map((item, i) => tooltipRow(item, i, false)) })
       ]
     }
@@ -239,12 +239,12 @@ function ChartLegendContent({
     const vv = item.value != null ? String(item.value) : void 0;
     const cfgKey = dk && config[dk] ? dk : vv && config[vv] ? vv : dk ?? vv ?? String(i);
     const series = config[cfgKey];
-    const color = paintedColor(cfgKey, series) ?? item.color ?? "#64748b";
+    const color = paintedColor(cfgKey, series) ?? item.color ?? "var(--text-muted)";
     const label = series?.label ?? vv ?? cfgKey;
     const off = hidden?.has(cfgKey) ?? false;
     const dimmed = off || activeKey != null && activeKey !== cfgKey;
     const className = cn(
-      "flex items-center gap-1.5 text-[var(--text-secondary)] transition-opacity",
+      "flex items-center gap-1.5 text-secondary transition-opacity",
       onItemClick ? "cursor-pointer hover:opacity-80" : "cursor-default",
       dimmed && "opacity-40"
     );