@eifi1/ui-kit 0.54.0 → 0.55.0

package/src/components/chart.tsx

@@ -1,554 +0,0 @@
-// shadcn/ui chart kit — vendored (MIT) and adapted for this app:
-//  - Recharts 3 instead of 2
-//  - the original keys its styling off shadcn theme tokens (--muted-foreground,
-//    --border, bg-background …). This app has no shadcn token layer, so those
-//    are mapped onto this kit's own tokens (--text-muted, --border, --bg-surface
-//    …), which follow the active palette preset and flip with the theme by
-//    themselves — hence no `dark:` variants anywhere below.
-// The value on show is the *structure*: config-driven colors injected as CSS
-// vars, muted axis/grid styling, and a polished tooltip/legend — the things
-// that make shadcn charts read as "designed" rather than "default Recharts".
-import { createContext, useContext, useEffect, useId, useLayoutEffect, useRef, useState } from "react";
-import type { ComponentProps, CSSProperties, ReactNode, RefObject } from "react";
-import { Legend as RechartsLegend, ResponsiveContainer, Tooltip as RechartsTooltip } from "recharts";
-import { cn } from "../lib/cn";
-import { isRtl } from "../lib/direction";
-import { useFigureDescription } from "./chart-figure";
-import { TYPOGRAPHIC_MINUS } from "../lib/minus";
-
-export interface ChartSeriesConfig {
-  label: ReactNode;
-  color: string;
-}
-
-export type ChartConfig = Record<string, ChartSeriesConfig>;
-
-const ChartContext = createContext<ChartConfig | null>(null);
-
-export function useChart(): ChartConfig {
-  const ctx = useContext(ChartContext);
-  if (!ctx) throw new Error("useChart must be used within a <ChartContainer />");
-  return ctx;
-}
-
-interface ChartContainerProps extends ComponentProps<"div"> {
-  config: ChartConfig;
-  children: ComponentProps<typeof ResponsiveContainer>["children"];
-  /**
-   * What the chart SHOWS, in a sentence, as its accessible description (0.52): read through
-   * `aria-describedby`, after a caller's own ids, and drawn nowhere. Inside the root, so
-   * the chart stays the one element its parent lays out. Pair it with `role="figure"` and
-   * an `aria-label`, as `Treemap` and `SeriesChart` do.
-   */
-  description?: string;
-}
-
-/**
- * The shell every chart in the kit is drawn inside.
- *
- * **The plot is not mirrored in RTL.** An x axis is a number line or a timeline, and
- * both run left-to-right in Hebrew and Arabic charts as much as in English ones; a
- * time axis flipped to run right-to-left is the surprise, not the courtesy. So no
- * `reversed` on any axis, and the SVG is pinned to `direction: ltr` — without that it
- * inherits the page's `rtl`, which flips what `text-anchor: end` means, and the tick
- * labels of a left-hand y axis are drawn INTO the plot instead of beside it. Text
- * inside the SVG still shapes by its own script; only the anchoring is physical.
- * The HTML around the plot — legend, tooltip, the zoom reset button — follows the
- * page's direction like any other markup. A consumer who does want a mirrored
- * category axis passes `reversed` on its own `XAxis`.
- */
-export function ChartContainer({ id, className, children, config, description, ...props }: ChartContainerProps) {
-  const uid = useId();
-  const about = useFigureDescription(description, props["aria-describedby"]);
-  // The id is pasted into an UNQUOTED `[data-chart=…]` selector below, so it has to be
-  // a CSS identifier: one stray space or `#` and the browser discards the whole rule,
-  // taking every series colour with it — silently, because an invalid rule is not an
-  // error anywhere. `useId()` gives `:r0:`, and a consumer-supplied id gives whatever
-  // they typed, so both are filtered rather than just the colons.
-  const chartId = `chart-${(id ?? uid).replace(/[^A-Za-z0-9_-]/g, "")}`;
-  return (
-    <ChartContext.Provider value={config}>
-      <div
-        data-chart={chartId}
-        className={cn(
-          // touch-pan-y lets a vertical finger drag still scroll the page while
-          // a horizontal drag is handed to recharts for tooltip scrubbing,
-          // instead of the page scrolling underneath the gesture (feedback #292).
-          "flex w-full touch-pan-y justify-center text-xs",
-          // physical anchoring for the unmirrored plot (see the doc comment above)
-          "[&_.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-muted",
-          "[&_.recharts-cartesian-grid_line]:stroke-subtle/70",
-          // hairline hover cursor instead of the heavy default
-          "[&_.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",
-          "[&_.recharts-layer]:outline-none [&_.recharts-surface]:outline-none [&_.recharts-dot[stroke='#fff']]:stroke-transparent",
-          className,
-        )}
-        {...props}
-        aria-describedby={about.describedBy}
-      >
-        <ChartStyle id={chartId} config={config} />
-        <ResponsiveContainer width="100%" height="100%">
-          {children}
-        </ResponsiveContainer>
-        {about.node}
-      </div>
-    </ChartContext.Provider>
-  );
-}
-
-/**
- * A config key, which becomes the tail of a custom-property NAME.
- *
- * `dangerouslySetInnerHTML` means what it says: nothing below is escaped by React, and
- * a `ChartConfig` is not necessarily written by hand — kastlan builds one from category
- * rows in its database, so these keys are user data. A key containing `}` closes this
- * rule, and whatever follows it in that key becomes a NEW rule — one that applies to
- * the whole document rather than to this one chart.
- */
-const CSS_IDENT = /^[A-Za-z_][A-Za-z0-9_-]*$/;
-
-/**
- * A config colour, which becomes a declaration VALUE.
- *
- * Every form a palette actually produces: both hex spellings, the functional notations
- * — with the argument list restricted to the characters those functions can legally
- * contain, so no `;`, no `}` and no nested `url(` — and `var(--token)`, which is what
- * this kit's own `paletteFor`/`CHART_COLORS` return. `var()`'s optional FALLBACK is
- * deliberately not accepted: its second argument is an arbitrary value, i.e. the same
- * hole in a shape that looks safe.
- */
-const CSS_COLOR = /^(?:#[0-9a-fA-F]{3}|#[0-9a-fA-F]{6}|(?:rgba?|hsla?)\([0-9A-Za-z.,%/ -]*\)|var\(--[A-Za-z0-9_-]+\))$/;
-
-/**
- * The colour an entry is painted with, or `undefined` when the style block refuses it.
- *
- * The one gate both sides go through: {@link ChartStyle} emits exactly these, and the
- * legend and tooltip swatches show exactly these. They used to read `config[key].color`
- * directly, so an entry the style block had skipped still showed its configured colour
- * in the key — a swatch promising a colour the series was never painted in.
- */
-function paintedColor(key: string, entry: ChartSeriesConfig | undefined): string | undefined {
-  if (!entry?.color) return undefined;
-  return CSS_IDENT.test(key) && CSS_COLOR.test(entry.color) ? entry.color : undefined;
-}
-
-// Inject each series colour as a `--color-<key>` custom property scoped to this
-// chart, so chart JSX can refer to `var(--color-total)` and the legend/tooltip
-// stay in sync from one source of truth.
-function ChartStyle({ id, config }: { id: string; config: ChartConfig }) {
-  const entries = Object.entries(config).filter(([key, c]) => {
-    if (!c.color) return false;
-    // Skipping the entry costs that one series its `var(--color-…)` and leaves the rest
-    // of the chart painted; emitting it unchecked costs the page. The warning is so the
-    // consumer finds out from their console rather than from a colourless bar.
-    if (!CSS_IDENT.test(key)) {
-      console.warn(`[ui-kit] chart config key is not a CSS identifier, skipped: ${key}`);
-      return false;
-    }
-    if (!CSS_COLOR.test(c.color)) {
-      console.warn(`[ui-kit] chart config colour for "${key}" is not a colour, skipped: ${c.color}`);
-      return false;
-    }
-    return true;
-  });
-  if (!entries.length) return null;
-  const css = `[data-chart=${id}] {\n${entries.map(([key, c]) => `  --color-${key}: ${c.color};`).join("\n")}\n}`;
-  return <style dangerouslySetInnerHTML={{ __html: css }} />;
-}
-
-/**
- * recharts' `Tooltip`, with `filterNull` defaulting to **false**.
- *
- * recharts drops every payload entry whose value is `null`/`undefined` before the
- * content sees it, so the missing-value path {@link ChartTooltipContent} documents —
- * the em dash, `formatValue(undefined)` — never ran under the default: a series with a
- * gap at the cursor simply vanished from the tooltip, which reads as "this series does
- * not exist here" rather than "it has no value here". Kept, the entry prints "—".
- *
- * The other half of that filter — dropping series drawn with `hide` — is redone by
- * `ChartTooltipContent` itself (honouring `includeHidden`), so a legend toggle still
- * takes a series out of the tooltip. Pass `filterNull` to get recharts' behaviour back.
- */
-export function ChartTooltip(props: ComponentProps<typeof RechartsTooltip>) {
-  return <RechartsTooltip filterNull={false} {...props} />;
-}
-export const ChartLegend = RechartsLegend;
-
-interface TooltipPayloadItem {
-  dataKey?: string | number;
-  name?: string | number;
-  value?: number | string;
-  color?: string;
-  /** A series drawn with `hide` — dropped here, see {@link ChartTooltip}. */
-  hide?: boolean;
-  payload?: Record<string, unknown>;
-}
-
-/**
- * What a series has no value for at this point: a gap in a history, a projection that
- * has not happened yet, a field that did not exist at an earlier capture.
- *
- * An em dash rather than an empty cell, so the row still lines up with its siblings and
- * the reader can see that the series WAS asked and had nothing, rather than wondering
- * whether it was dropped. It is a mark, not a word, so there is nothing here to
- * translate and no label prop to resolve; a caller who wants words passes
- * `formatValue`, which is handed the `undefined` and decides.
- */
-const NO_VALUE = "—";
-
-/**
- * The number this payload item carries, or `undefined` when it carries none.
- *
- * This was `item.value ?? 0`, so every one of the absences above printed a confident
- * "0" that appears nowhere in the data — a fabricated figure in a tooltip, which is the
- * one place a reader goes to check an exact number. keksdose found it and wrapped the
- * component rather than trust it. `""` and a non-numeric string are the same absence
- * spelled differently (recharts hands a string value straight through from the data),
- * and are answered the same way.
- */
-function tooltipValue(value: number | string | undefined): number | undefined {
-  if (value == null || value === "") return undefined;
-  const n = typeof value === "string" ? Number(value) : value;
-  return Number.isFinite(n) ? n : undefined;
-}
-
-interface ChartTooltipContentProps {
-  active?: boolean;
-  payload?: TooltipPayloadItem[];
-  label?: string | number;
-  indicator?: "dot" | "line";
-  hideLabel?: boolean;
-  labelFormatter?: (label: string | number) => ReactNode;
-  /** Formats one series' value for display. NOT called when the series has no value at
-   *  this point — {@link ChartTooltipContentProps.formatValue} is the one that is. */
-  valueFormatter?: (value: number) => ReactNode;
-  /** Formats one series' value INCLUDING its absence: handed `undefined` for a gap, a
-   *  projection that has not happened yet, or a field that did not exist at an earlier
-   *  capture, and whatever it returns is rendered as-is. Only the caller knows whether
-   *  that absence reads as a dash, a "not yet" or a genuine zero, so this is how it
-   *  says. Supplying it wins over `valueFormatter` for every value.
-   *
-   *  It sits NEXT to `valueFormatter` rather than widening it because that prop's
-   *  parameter is contextually typed at every call site there is — `(v) => money(v)` —
-   *  so widening it to `number | undefined` is a compile error in all three consuming
-   *  apps, which is a breaking change this module does not get to make by itself. */
-  formatValue?: (value: number | undefined) => ReactNode;
-  /** Cursor position within the chart, injected by recharts. Used with
-   *  {@link boundaryRef} to decide whether to flip the tooltip. */
-  coordinate?: { x?: number; y?: number };
-  /** When set, the tooltip flips to the LEFT of the cursor if it would otherwise
-   *  spill past the right edge of this (usually horizontally-scrolling) container
-   *  — e.g. a wide chart whose rightmost bars sat off-screen (feedback #77). */
-  boundaryRef?: RefObject<HTMLElement | null>;
-  /** Injected by recharts: keep series drawn with `hide` in the tooltip. */
-  includeHidden?: boolean;
-  /**
-   * `"floating"` (the default): the box recharts moves with the cursor. `"readout"`: the
-   * same heading and values as a flat row for a FIXED place outside the plot — a
-   * `SeriesChart` whose `tooltip.placement` is `"above"`/`"below"` portals it there, so
-   * a finger on a phone no longer sits on the box it is trying to read (keksdose #359).
-   * No border, shadow, width cap or viewport nudge; the values flow in a grid whose
-   * column count depends on the row's width alone, so the row is the same height
-   * whatever is being pointed at — and, idle, it shows {@link idleKeys} with "—".
-   */
-  variant?: "floating" | "readout";
-  /** Readout only: the series to list while nothing is active, so the row keeps the
-   *  height it will have once something is. */
-  idleKeys?: readonly string[];
-  /** Readout only: the heading while nothing is active. Default "—". */
-  idleLabel?: ReactNode;
-}
-
-export function ChartTooltipContent({
-  active,
-  payload,
-  label,
-  indicator = "dot",
-  hideLabel = false,
-  labelFormatter,
-  valueFormatter,
-  formatValue,
-  coordinate,
-  boundaryRef,
-  includeHidden = false,
-  variant = "floating",
-  idleKeys,
-  idleLabel,
-}: ChartTooltipContentProps) {
-  const config = useChart();
-  const tipRef = useRef<HTMLDivElement>(null);
-  const readout = variant === "readout";
-  // `ChartTooltip` keeps null values (so they can print "—"), which also keeps the
-  // series a legend toggle switched off with `hide`; those go here instead.
-  const items = includeHidden ? payload : payload?.filter((item) => item.hide !== true);
-  const shown = Boolean(active && items?.length);
-  // Everything below that measures and moves the box is about a FLOATING one.
-  const visible = shown && !readout;
-  // Recharts anchors the tooltip at coordinate.x inside the full (scrolled) chart
-  // width; subtract the container's scrollLeft to get its on-screen x, then flip
-  // left if the tooltip's own width would run past the visible right edge.
-  //
-  // Both the cursor and the flip are PHYSICAL (the plot is never mirrored, see
-  // `ChartContainer`), but an RTL scroller counts `scrollLeft` from its right edge —
-  // 0 at the start, negative going left — so there the content's left edge sits
-  // `scrollWidth - clientWidth + scrollLeft` px to the left of the visible one.
-  //
-  // Measured in a layout effect (the DOM is not readable during render), so it commits
-  // before paint. `payload` and `label` are deps because they change the tooltip's own
-  // width, and recharts hands a fresh `payload` on every tooltip render, so a scroll
-  // followed by any re-render is re-measured just as it was when this ran in render.
-  const [flip, setFlip] = useState(false);
-  const x = coordinate?.x;
-  useLayoutEffect(() => {
-    const boundary = boundaryRef?.current;
-    if (!visible || !boundary || x == null) {
-      setFlip(false);
-      return;
-    }
-    const offset = isRtl(boundary)
-      ? boundary.scrollWidth - boundary.clientWidth + boundary.scrollLeft
-      : boundary.scrollLeft;
-    const visibleX = x - offset;
-    const tipWidth = tipRef.current?.offsetWidth ?? 160;
-    setFlip(visibleX + tipWidth + 12 > boundary.clientWidth);
-  }, [visible, x, boundaryRef, payload, label]);
-
-  // Whatever placed it — recharts' own rule or the boundary flip above — the box then
-  // clamps itself into the viewport, 8px off each edge. The width cap alone did not
-  // keep it on screen: on a 390px phone recharts opened a near-full-width tooltip to
-  // the RIGHT of a pointer 35% into the plot, and the values ran off the edge
-  // (lenkbank, on 0.15.2). Measured after placement, minus the shift it already has,
-  // so a re-measure never compounds; an unmeasured box (no layout) is left alone.
-  const [nudge, setNudge] = useState(0);
-  const nudgeRef = useRef(0);
-  // recharts slides its wrapper to each new position with a CSS transition, so the box
-  // measured on commit is still where it WAS; measure again once the slide ends.
-  const [settled, setSettled] = useState(0);
-  useEffect(() => {
-    const wrapper = tipRef.current?.closest<HTMLElement>(".recharts-tooltip-wrapper");
-    if (!visible || !wrapper) return;
-    const onEnd = () => setSettled((n) => n + 1);
-    wrapper.addEventListener("transitionend", onEnd);
-    return () => wrapper.removeEventListener("transitionend", onEnd);
-  }, [visible]);
-  useLayoutEffect(() => {
-    const el = tipRef.current;
-    if (!visible || !el) {
-      nudgeRef.current = 0;
-      setNudge(0);
-      return;
-    }
-    const rect = el.getBoundingClientRect();
-    if (rect.width === 0) return;
-    const margin = 8;
-    const viewport = document.documentElement.clientWidth || window.innerWidth;
-    const left = rect.left - nudgeRef.current;
-    const right = left + rect.width;
-    let next = 0;
-    if (right > viewport - margin) next = viewport - margin - right;
-    if (left + next < margin) next = margin - left;
-    if (next !== nudgeRef.current) {
-      nudgeRef.current = next;
-      setNudge(next);
-    }
-  }, [visible, x, payload, label, flip, settled]);
-  // One series' line — the floating box stacks them; the readout lays them in a grid,
-  // where a long name is cut rather than wrapped so every cell stays one line high.
-  const tooltipRow = (item: TooltipPayloadItem, i: number, inRow: boolean) => {
-    // Bars/lines/areas identify a series by dataKey; pies/treemaps key off
-    // `name` (the nameKey value). Prefer whichever the config knows.
-    const dk = item.dataKey != null ? String(item.dataKey) : undefined;
-    const nm = item.name != null ? String(item.name) : undefined;
-    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 : undefined;
-    // The data point's own `fill` before recharts' `item.color`: a treemap tile,
-    // or a bar with a per-cell colour, IS the colour the reader is pointing at,
-    // while `item.color` is the series-wide one — every tile's swatch came out
-    // `--chart-1` whatever colour the tile was.
-    const color = paintedColor(cfgKey, series) ?? fill ?? item.color ?? "var(--text-muted)";
-    const name = series?.label ?? nm ?? cfgKey;
-    const raw = tooltipValue(item.value);
-    let text: ReactNode;
-    // An idle readout cell has asked nothing yet, so there is no absence for
-    // `formatValue` to word — it is the bare mark.
-    if (inRow && !shown) text = NO_VALUE;
-    else if (formatValue) text = formatValue(raw);
-    else if (raw == null) text = NO_VALUE;
-    // The bare number's minus is U+2212, as every kit figure's (0.49, KIT-1).
-    else text = valueFormatter ? valueFormatter(raw) : String(raw).replace(/-/g, TYPOGRAPHIC_MINUS);
-    return (
-      <div
-        key={`${cfgKey}-${i}`}
-        // A readout cell is capped so a wide row does not push its value a column away
-        // from its name.
-        className={cn("flex items-center", inRow ? "min-w-0 max-w-[12rem] gap-1.5" : "gap-2")}
-      >
-        <span
-          className={cn("shrink-0 rounded-[2px]", indicator === "dot" ? "h-2.5 w-2.5 rounded-full" : "h-2.5 w-1")}
-          style={{ backgroundColor: color }}
-        />
-        <span className={cn("min-w-0 text-muted", inRow ? "truncate" : "break-words")}>{name}</span>
-        <span
-          data-private
-          // Isolated, so an RTL page does not turn "-26.6" into "26.6-": a figure has no
-          // strong direction of its own, and one formatted with an RTL mark keeps it.
-          dir="auto"
-          className="ms-auto shrink-0 whitespace-nowrap font-mono font-medium tabular-nums text-primary"
-        >
-          {text}
-        </span>
-      </div>
-    );
-  };
-
-  if (readout) {
-    // Idle, the row lists every series with no value — the same cells it will have, so
-    // nothing under it moves on the first tap.
-    const rows: TooltipPayloadItem[] = shown
-      ? items!
-      : (idleKeys ?? Object.keys(config)).map((key) => ({ dataKey: key }));
-    return (
-      <div className="text-xs" data-chart-readout={shown ? "active" : "idle"}>
-        {/* A full 24 px line: the zoom's reset button sits at the top corner of a chart
-            whose row is above it, and has to fit beside the heading, not over a value. */}
-        <div data-readout-heading className="truncate font-medium leading-6 text-primary">
-          {shown && !hideLabel && label != null
-            ? labelFormatter
-              ? labelFormatter(label)
-              : label
-            : (idleLabel ?? NO_VALUE)}
-        </div>
-        <div className="grid grid-cols-[repeat(auto-fill,minmax(9rem,1fr))] gap-x-4 gap-y-1">
-          {rows.map((item, i) => tooltipRow(item, i, true))}
-        </div>
-      </div>
-    );
-  }
-  if (!visible || !items) return null;
-  return (
-    <div
-      ref={tipRef}
-      style={
-        boundaryRef || nudge
-          ? {
-              transform: [
-                boundaryRef ? (flip ? "translateX(calc(-100% - 12px))" : "translateX(12px)") : "",
-                nudge ? `translateX(${nudge}px)` : "",
-              ]
-                .filter(Boolean)
-                .join(" "),
-            }
-          : undefined
-      }
-      // Capped at the viewport: six long series names (lenkbank's German motion
-      // labels) made the box wider than a 390px chart, and recharts, which keeps a box
-      // inside the plot only when it fits, let it run off the edge with the values cut.
-      // Names wrap inside the cap; the values never do.
-      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"
-    >
-      {!hideLabel && label != null && (
-        <div className="mb-1.5 font-medium text-primary">{labelFormatter ? labelFormatter(label) : label}</div>
-      )}
-      <div className="grid gap-1.5">{items.map((item, i) => tooltipRow(item, i, false))}</div>
-    </div>
-  );
-}
-
-interface LegendPayloadItem {
-  value?: string;
-  dataKey?: string | number;
-  color?: string;
-}
-
-interface ChartLegendContentProps {
-  payload?: LegendPayloadItem[];
-  onItemClick?: (key: string) => void;
-  /**
-   * TOGGLE mode (recommended): the series currently switched off. Each entry is a
-   * toggle button — pressed while its series is shown — and a hidden one is drawn
-   * faded with its label struck through. Several can be off at once; pair with
-   * `toggleHidden(hidden, key)` in `onItemClick` and `hide` on the chart's series.
-   */
-  hiddenKeys?: ReadonlySet<string> | readonly string[];
-  /**
-   * ISOLATE mode: the one series shown in full, every other entry dimmed. Kept for
-   * the charts built on it; a legend where each entry switches its own series is
-   * what readers expect from a legend, so prefer `hiddenKeys`.
-   */
-  activeKey?: string | null;
-}
-
-export function ChartLegendContent({ payload, onItemClick, hiddenKeys, activeKey }: ChartLegendContentProps) {
-  const hidden = hiddenKeys ? new Set(hiddenKeys) : null;
-  const config = useChart();
-  if (!payload?.length) return null;
-  return (
-    <div className="flex flex-wrap items-center justify-center gap-x-4 gap-y-1 pt-3">
-      {payload.map((item, i) => {
-        const dk = item.dataKey != null ? String(item.dataKey) : undefined;
-        const vv = item.value != null ? String(item.value) : undefined;
-        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 ?? "var(--text-muted)";
-        const label = series?.label ?? vv ?? cfgKey;
-        const off = hidden?.has(cfgKey) ?? false;
-        const dimmed = off || (activeKey != null && activeKey !== cfgKey);
-        // The label's cue, in a key and on a button alike: a hidden series struck through,
-        // and an entry an isolate legend dims in the muted ink — drawn still, so not struck.
-        // Only a toggle button had one, and a key or an isolate legend told an entry off by
-        // its 10px swatch at 40 % alone (0.52 code review, deep, charts, finding 9).
-        const cue = off ? "line-through" : dimmed ? "text-muted" : undefined;
-        const className = cn(
-          "flex items-center gap-1.5 text-secondary transition-opacity",
-          onItemClick ? "cursor-pointer hover:opacity-80" : "cursor-default",
-        );
-        // Only the swatch fades; the label keeps an ink of AA contrast (0.52, refactor audit
-        // 2026-10-30, DSP-9). The whole entry at 40 % put a switched-off label under 2:1,
-        // on a button that brings its series back and is named by nothing else.
-        const swatch = (
-          <span
-            aria-hidden
-            className={cn("h-2.5 w-2.5 shrink-0 rounded-[3px]", dimmed && "opacity-40")}
-            style={{ backgroundColor: color } as CSSProperties}
-          />
-        );
-        // A legend with no `onItemClick` is a KEY, not a control — and that is every
-        // legend in kastlan, where this rendered N focusable buttons per chart that did
-        // nothing when activated. A keyboard user paid the tab stops for all of them,
-        // and a screen reader announced each one as a button, promising an action there
-        // was none of. The interactive branch is unchanged.
-        return onItemClick ? (
-          <button
-            key={`${cfgKey}-${i}`}
-            type="button"
-            onClick={() => onItemClick(cfgKey)}
-            // Toggles report their state: in toggle mode pressed = the series is shown;
-            // in isolate mode pressed = the isolated one. With neither supplied the
-            // legend knows nothing about state, and a pressed="false" it cannot vouch
-            // for would lie — so it says nothing.
-            aria-pressed={hidden ? !off : activeKey === undefined ? undefined : activeKey === cfgKey}
-            className={className}
-          >
-            {swatch}
-            <span className={cue}>{label}</span>
-          </button>
-        ) : (
-          // On the entry, not round the label: the text is its own, so the key's DOM is the
-          // same with a cue as without. A line-through reaches the text only (the swatch
-          // holds none), and the ink colours no swatch.
-          <span key={`${cfgKey}-${i}`} className={cn(className, cue)}>
-            {swatch}
-            {label}
-          </span>
-        );
-      })}
-    </div>
-  );
-}