Morphing chartNew

'use client';/* ───────────────────────────────────────────────────────── * MORPHING CHART: one set of points, three shapes * *   bars → line    each bar condenses up into a bead on its *                  value; a thread is strung through the beads *                  from the left and they melt into it as it passes *   line → bars    the thread is pulled out to the right; each *                  bead swells back as the tail leaves it and drips *                  a stick to the axis that lands and spreads *   line → area    the fill pours down from the line, left to *                  right; back to line, it drains up into it *   bars → area    the bars widen until they touch and fade to a *                  wash; the steps they make melt into the curve *   scrub          drag the switch's thumb and the morph follows *                  your finger, frame by frame; let go and it runs *                  on to the nearer shape. Asking for the shape it *                  came from mid-morph runs it back from there *   data           new values: every mark eases to its new height a *                  beat after its neighbour and the scale rolls *   hover          bars dim but the one you're on; on the line and *                  the area a bead slides along the curve to the *                  point, and the figure and its label roll to it * * The plot is one tab stop: arrow keys read each point, and the * shape switch is a radio group. Every figure is also in a table * for screen readers. * ───────────────────────────────────────────────────────── */import * as React from 'react';import { NumberRoll } from './number-roll';import { TextMorph } from './text-morph';import { EASE_OUT, releaseVelocity, samplePointer, useInteractionReducedMotion, type PointerSample } from './ui-interaction-motion';import { CHART_SHAPES, type ChartShape, useChartMorph } from './use-chart-morph';export type { ChartShape };export interface MorphingChartProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {  title?: string;  /** Under the figure, e.g. "Last 12 months". */  caption?: string;  /** Along the bottom, one per value. */  labels: string[];  /** In the readout when a point is read, e.g. "October 2026". Defaults to labels. */  titles?: string[];  values: number[];  shape?: ChartShape;  defaultShape?: ChartShape;  onShapeChange?: (shape: ChartShape) => void;  format?: Intl.NumberFormatOptions;  locales?: string | string[];}const THROW = 'cubic-bezier(0.34,1.36,0.64,1)';const TOP = 10;const LABELS = 24;const STEPS = 4;const FOCUS = 'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/40';const SHAPE_LABELS: Record<ChartShape, string> = { bars: 'Bars', line: 'Line', area: 'Area' };function niceTop(value: number) {  if (value <= 0) return STEPS;  const raw = value / STEPS;  const mag = 10 ** Math.floor(Math.log10(raw));  const step = [1, 1.5, 2, 2.5, 3, 4, 5, 6, 8, 10].map((m) => m * mag).find((s) => s >= raw) ?? 10 * mag;  return step * STEPS;}export function MorphingChart({  title = 'Revenue',  caption,  labels,  titles,  values,  shape: shapeProp,  defaultShape = 'bars',  onShapeChange,  format,  locales,  className = '',  ...props}: MorphingChartProps) {  const reduced = useInteractionReducedMotion();  const id = React.useId().replace(/[^\w-]/g, '');  const n = labels.length;  const [ownShape, setOwnShape] = React.useState<ChartShape>(defaultShape);  const shape = shapeProp ?? ownShape;  const morph = useChartMorph({ count: n, shape, reduced });  const engine = React.useRef(morph);  engine.current = morph;  // The engine owns the wash from the first frame on; React only writes the starting value.  const [firstWash] = React.useState(() => shape === 'area');  const [visible, setVisible] = React.useState(false);  const [size, setSize] = React.useState({ width: 0, height: 0 });  const [active, setActive] = React.useState<number | null>(null);  const [keyboard, setKeyboard] = React.useState(false);  const [dragging, setDragging] = React.useState(false);  const rootRef = React.useRef<HTMLDivElement>(null);  const chartRef = React.useRef<HTMLDivElement>(null);  const plotRef = React.useRef<HTMLDivElement>(null);  const trackRef = React.useRef<HTMLDivElement>(null);  const thumbRef = React.useRef<HTMLSpanElement>(null);  const chipRefs = React.useRef<(HTMLButtonElement | null)[]>([]);  const placed = React.useRef(false);  const drag = React.useRef<{ id: number; x: number; from: number; p: number; near: number; moved: boolean; samples: PointerSample[] } | null>(null);  const swallowClick = React.useRef(false);  const clean = React.useMemo(() => labels.map((_, i) => Math.max(0, values[i] ?? 0)), [labels, values]);  const max = niceTop(Math.max(0, ...clean));  const total = clean.reduce((s, v) => s + v, 0);  // Measure the plot: its width from the card, its height from the --plot variable the container sets.  React.useLayoutEffect(() => {    const plot = plotRef.current, chart = chartRef.current;    if (!plot || !chart) return;    const measure = () =>      setSize((s) => {        const width = plot.offsetWidth, height = chart.offsetHeight - LABELS;        return width === s.width && height === s.height ? s : { width, height };      });    measure();    const observer = new ResizeObserver(measure);    observer.observe(plot);    observer.observe(chart);    return () => observer.disconnect();  }, []);  React.useLayoutEffect(() => {    if (size.width && size.height) engine.current.layout({ width: size.width, height: size.height, top: TOP });  }, [size]);  // Arrive once on screen: every mark rises from the axis.  React.useEffect(() => {    const el = rootRef.current;    if (!el) return;    const observer = new IntersectionObserver(([entry]) => {      if (entry.isIntersecting) { setVisible(true); observer.disconnect(); }    }, { rootMargin: '0px 0px -10% 0px' });    observer.observe(el);    return () => observer.disconnect();  }, []);  const arrived = React.useRef(false);  const dataKey = `${clean.join(',')}|${max}`;  React.useLayoutEffect(() => {    if (!visible || !size.width) {      engine.current.data(clean.map(() => 0), max, { animate: false });      return;    }    engine.current.data(clean, max, { animate: true, from: arrived.current ? undefined : 0 });    arrived.current = true;    // eslint-disable-next-line react-hooks/exhaustive-deps  }, [dataKey, visible, size.width > 0]);  const firstShape = React.useRef(true);  React.useEffect(() => {    if (firstShape.current) { firstShape.current = false; return; }    engine.current.shape(shape);  }, [shape]);  React.useEffect(() => engine.current.point(active), [active]);  // The thumb: equal segments, so it only ever translates. Written directly so a drag can carry it.  const geo = React.useRef({ left: 0, step: 0 });  const placeThumb = React.useCallback((p: number, animate: boolean) => {    const el = thumbRef.current, a = chipRefs.current[0], b = chipRefs.current[1];    if (!el || !a || !b) return;    geo.current = { left: a.offsetLeft, step: b.offsetLeft - a.offsetLeft };    el.style.width = `${a.offsetWidth}px`;    el.style.transition = animate && !reduced ? `translate 460ms ${THROW}` : 'none';    el.style.translate = `${geo.current.left + p * geo.current.step}px 0`;  }, [reduced]);  React.useLayoutEffect(() => {    if (drag.current?.moved) return;    placeThumb(CHART_SHAPES.indexOf(shape), placed.current);    placed.current = true;  }, [shape, placeThumb]);  const shapeNow = React.useRef(shape);  shapeNow.current = shape;  React.useLayoutEffect(() => {    const track = trackRef.current;    if (!track) return;    // The segments resize when the card crosses its breakpoint; the first call (on observe) is skipped.    let first = true;    const observer = new ResizeObserver(() => {      if (first) { first = false; return; }      if (!drag.current?.moved) placeThumb(CHART_SHAPES.indexOf(shapeNow.current), false);    });    observer.observe(track);    return () => observer.disconnect();  }, [placeThumb]);  const choose = (next: ChartShape) => {    if (next === shape) return;    if (shapeProp === undefined) setOwnShape(next);    onShapeChange?.(next);  };  // Scrub: drag the thumb and the morph is held at the frame under it. Nothing is measured or rendered  // per move: the segments are measured when the drag starts, and the thumb and the chart are written directly.  const tint = (near: number | null) =>    chipRefs.current.forEach((chip, k) => {      if (chip) chip.style.color = near === null ? '' : k === near ? 'var(--foreground)' : 'var(--muted-foreground)';    });  const onTrackPointerDown = (e: React.PointerEvent) => {    if (e.button !== 0 || reduced) return;    const chip = (e.target as Element).closest('[role="radio"]');    const from = engine.current.position();    if (!chip || chip.getAttribute('aria-checked') !== 'true' || from === null) return;    drag.current = { id: e.pointerId, x: e.clientX, from, p: from, near: Math.round(from), moved: false, samples: [] };  };  const onTrackPointerMove = (e: React.PointerEvent) => {    const d = drag.current, thumb = thumbRef.current;    if (!d || d.id !== e.pointerId || !thumb) return;    const dx = e.clientX - d.x;    if (!d.moved) {      if (Math.abs(dx) < 4) return;      d.moved = true;      try { trackRef.current?.setPointerCapture(e.pointerId); } catch {}      placeThumb(d.from, false);      setDragging(true);    }    const { left, step } = geo.current;    d.p = Math.max(0, Math.min(CHART_SHAPES.length - 1, d.from + dx / (step || 1)));    samplePointer(d.samples, d.p, e.timeStamp);    engine.current.scrub(d.p);    thumb.style.translate = `${left + d.p * step}px 0`;    if (Math.round(d.p) !== d.near) tint((d.near = Math.round(d.p)));  };  const onTrackPointerUp = (e: React.PointerEvent) => {    const d = drag.current;    if (!d || d.id !== e.pointerId) return;    drag.current = null;    if (!d.moved) return;    // The click that follows this release isn't a choice; if none comes, stop waiting for it.    swallowClick.current = true;    window.setTimeout(() => { swallowClick.current = false; }, 0);    setDragging(false);    // Run on to the nearer neighbour, or the one it was flung toward.    const lo = Math.min(CHART_SHAPES.length - 2, Math.floor(d.p));    const ahead = d.p + releaseVelocity(d.samples, e.timeStamp) * 160;    const target = CHART_SHAPES[ahead - lo >= 0.5 ? lo + 1 : lo];    engine.current.release(target);    tint(null);    placeThumb(CHART_SHAPES.indexOf(target), true);    choose(target);  };  const band = n ? size.width / n : 0;  const pointAt = (clientX: number) => {    const r = plotRef.current?.getBoundingClientRect();    if (!r || !n) return null;    return Math.min(n - 1, Math.max(0, Math.floor(((clientX - r.left) / r.width) * n)));  };  const onKeyDown = (e: React.KeyboardEvent) => {    if (!n) return;    const from = active ?? n - 1;    const moves: Record<string, number> = { ArrowLeft: from - 1, ArrowRight: from + 1, Home: 0, End: n - 1 };    if (e.key === 'Escape') return setActive(null);    if (!(e.key in moves)) return;    e.preventDefault();    setKeyboard(true);    setActive(Math.min(n - 1, Math.max(0, active === null ? from : moves[e.key])));  };  const fmt = (v: number) => new Intl.NumberFormat(locales, format).format(v);  const name = (i: number) => titles?.[i] ?? labels[i];  const scaleFormat: Intl.NumberFormatOptions = { ...format, notation: 'compact', minimumFractionDigits: 0, maximumFractionDigits: 1 };  const every = size.width && n ? Math.max(1, Math.ceil(38 / (size.width / n))) : 1;  const label = (i: number) => active === i || ((n - 1 - i) % every === 0 && (active === null || every === 1 || Math.abs(i - active) >= every));  return (    <div ref={rootRef} className={`@container w-full rounded-[22px] bg-background text-foreground shadow-[0_0_0_1px_var(--border)] ${className}`} {...props}>      <div className="p-4 @md:p-5 [--gutter:30px] @md:[--gutter:40px] [--plot:150px] @md:[--plot:190px]">        <div className="flex flex-wrap items-center justify-between gap-x-3 gap-y-2">          <p className="text-[12px] text-muted-foreground @md:text-[13px]">            <TextMorph>{title}</TextMorph>          </p>          <div            ref={trackRef}            role="radiogroup"            aria-label="Chart shape"            onPointerDown={onTrackPointerDown}            onPointerMove={onTrackPointerMove}            onPointerUp={onTrackPointerUp}            onPointerCancel={onTrackPointerUp}            onClickCapture={(e) => {              if (!swallowClick.current) return;              swallowClick.current = false;              e.stopPropagation();            }}            className={`relative -my-1 inline-grid shrink-0 touch-pan-y select-none auto-cols-fr grid-flow-col rounded-full bg-muted p-0.5 ${dragging ? 'cursor-grabbing' : ''}`}          >            <span ref={thumbRef} aria-hidden="true" className="absolute inset-y-0.5 left-0 rounded-full bg-background shadow-[0_0_0_1px_var(--border)]" style={{ willChange: 'translate' }} />            {CHART_SHAPES.map((s, i) => {              const selected = s === shape;              return (                <button                  key={s}                  ref={(el) => { chipRefs.current[i] = el; }}                  type="button"                  role="radio"                  aria-checked={selected}                  tabIndex={selected ? 0 : -1}                  onClick={() => choose(s)}                  onKeyDown={(e) => {                    if (e.key !== 'ArrowRight' && e.key !== 'ArrowLeft') return;                    e.preventDefault();                    const next = (i + (e.key === 'ArrowRight' ? 1 : -1) + CHART_SHAPES.length) % CHART_SHAPES.length;                    choose(CHART_SHAPES[next]);                    chipRefs.current[next]?.focus();                  }}                  className={`relative flex h-6 items-center justify-center gap-1 whitespace-nowrap rounded-full px-2 text-[11.5px] font-medium transition-colors duration-300 @md:h-7 @md:gap-1.5 @md:px-3 @md:text-[12.5px] ${FOCUS} ${                    selected ? `text-foreground ${dragging ? 'cursor-grabbing' : 'cursor-grab'}` : 'cursor-pointer text-muted-foreground hover:text-foreground'                  }`}                >                  <ShapeGlyph shape={s} />                  {SHAPE_LABELS[s]}                </button>              );            })}          </div>        </div>        <p className="mt-0.5 text-[22px] font-medium leading-tight tracking-[-0.03em] @md:text-[26px]">          <NumberRoll value={visible ? (active !== null ? clean[active] : total) : 0} format={format} locales={locales} duration={active !== null ? 600 : 1000} />        </p>        <p className="mt-1 whitespace-nowrap text-[11.5px] text-muted-foreground @md:text-[12.5px]">          <TextMorph>{active !== null ? name(active) : (caption ?? ' ')}</TextMorph>        </p>        <div ref={chartRef} className="relative mt-4 @md:mt-5" style={{ height: `calc(var(--plot) + ${LABELS}px)` }}>          {Array.from({ length: STEPS + 1 }, (_, k) => 1 - k / STEPS).map((f) => (            <div key={f} aria-hidden="true" className="absolute inset-x-0" style={{ top: TOP + (size.height - TOP) * (1 - f) }}>              <span className="absolute left-0 top-0 -translate-y-1/2 text-[10px] leading-none tabular-nums text-muted-foreground/80" style={{ width: 'calc(var(--gutter) - 8px)', textAlign: 'right' }}>                <NumberRoll value={visible ? max * f : 0} format={scaleFormat} locales={locales} duration={700} />              </span>              <div className="border-t border-border" style={{ marginLeft: 'var(--gutter)' }} />            </div>          ))}          <div            ref={plotRef}            role="group"            tabIndex={0}            aria-label={`${title}. Use the arrow keys to read each point.`}            onKeyDown={onKeyDown}            onBlur={() => keyboard && (setActive(null), setKeyboard(false))}            onPointerMove={(e) => { setKeyboard(false); setActive(pointAt(e.clientX)); }}            onPointerDown={(e) => setActive(pointAt(e.clientX))}            onPointerLeave={(e) => e.pointerType === 'mouse' && setActive(null)}            onPointerUp={(e) => e.pointerType !== 'mouse' && setActive(null)}            onPointerCancel={() => setActive(null)}            className={`absolute inset-y-0 right-0 touch-pan-y select-none rounded-lg ${FOCUS}`}            style={{ left: 'var(--gutter)' }}          >            <svg aria-hidden="true" width={size.width} height={size.height} className="absolute left-0 top-0 overflow-visible will-change-transform">              <defs>                <linearGradient id={`${id}-wash`} gradientUnits="userSpaceOnUse" x1="0" y1={TOP} x2="0" y2={size.height || 1}>                  <stop ref={(el) => { morph.stops.current[0] = el; }} offset="0" stopColor="var(--chart-1, var(--primary))" stopOpacity={firstWash ? 0.22 : 1} />                  <stop ref={(el) => { morph.stops.current[1] = el; }} offset="1" stopColor="var(--chart-1, var(--primary))" stopOpacity={firstWash ? 0.03 : 1} />                </linearGradient>              </defs>              <path ref={morph.area} fill={`url(#${id}-wash)`} />              <g ref={morph.columnGroup} data-wash={`url(#${id}-wash)`} fill="var(--chart-1, var(--primary))">                {labels.map((l, i) => (                  <path                    key={`${l}-${i}`}                    ref={(el) => { morph.columns.current[i] = el; }}                    style={{ opacity: active === null || active === i || shape !== 'bars' ? 1 : 0.32, transition: reduced ? 'none' : `opacity 220ms ${EASE_OUT}` }}                  />                ))}              </g>              <path ref={morph.line} fill="none" stroke="var(--chart-1, var(--primary))" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" />            </svg>            {/* The hover bead and its hairline: the engine slides them along the curve. */}            <div ref={morph.rule} aria-hidden="true" className="pointer-events-none absolute left-0 top-0 w-px bg-border opacity-0" style={{ height: size.height, transition: reduced ? 'none' : `opacity 200ms ${EASE_OUT}` }} />            <div              ref={morph.bead}              aria-hidden="true"              className="pointer-events-none absolute left-0 top-0 size-[9px] rounded-full bg-background opacity-0 shadow-[inset_0_0_0_2px_var(--chart-1,var(--primary))]"              style={{ scale: 0.4, willChange: 'translate', transition: reduced ? 'none' : `opacity 200ms ${EASE_OUT}, scale 280ms ${THROW}` }}            />            {labels.map((l, i) => (              <span                key={`${l}-${i}`}                aria-hidden="true"                className="absolute -translate-x-1/2 whitespace-nowrap text-[10px] leading-none tabular-nums transition-[opacity,color] duration-300"                style={{ left: band * (i + 0.5), top: size.height + 9, opacity: label(i) ? 1 : 0, color: active === i ? 'var(--foreground)' : 'var(--muted-foreground)' }}              >                {l}              </span>            ))}          </div>        </div>      </div>      <table className="sr-only">        <caption>{title}{caption ? `, ${caption}` : ''}</caption>        <tbody>          {labels.map((l, i) => (            <tr key={`${l}-${i}`}><th scope="row">{name(i)}</th><td>{fmt(clean[i])}</td></tr>          ))}        </tbody>      </table>      <p className="sr-only" aria-live="polite">{keyboard && active !== null ? `${name(active)}: ${fmt(clean[active])}` : ''}</p>    </div>  );}/** A small drawing of each shape for the switch. */function ShapeGlyph({ shape }: { shape: ChartShape }) {  return (    <svg aria-hidden="true" viewBox="0 0 14 14" className="size-3.5" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">      {shape === 'bars' && <path d="M3 12V7M7 12V3M11 12V8" />}      {shape === 'line' && <path d="M2 10.5 5.5 6l3 2.5L12 3.5" />}      {shape === 'area' && <><path d="M2 10 5.5 6l3 2.5L12 4v8H2Z" fill="currentColor" fillOpacity="0.25" stroke="none" /><path d="M2 10 5.5 6l3 2.5L12 4" /></>}    </svg>  );}

'use client';import * as React from 'react';/* * The morphing chart's engine. Bars, beads, the line and the area are four drawings of the same * points, so a change of shape is a choreography over shared geometry, never a cross-fade: * *   bars → line    each bar condenses up into a bead on its value; a thread is strung through the *                  beads from the left, and each bead melts into it as the thread passes *   line → bars    the thread is pulled out to the right; each bead swells back as the tail leaves *                  it and drips a stick to the axis, which lands and spreads into its bar *   line → area    the fill pours down from the line to the axis, left to right *   area → line    it drains back up into the line *   bars → area    the bars widen until they touch and fade to the wash; the steps they make melt *                  into the curve and the thread runs along the top *   area → bars    the curve sets into steps, which part into bars and fill in * * Every change is a tape: a pose that is a pure function of time. One frame loop plays it forward * or backward (asking for the shape it came from runs it back from where it is), and a finger can * hold it at any frame (scrub). Changes of data and the hover bead ride the same loop, which writes * path data and transforms straight to the DOM and sleeps when nothing moves. */export type ChartShape = 'bars' | 'line' | 'area';export type ChartLayout = { width: number; height: number; top: number };/** The shapes in the switch's order: scrubbing runs along this axis. */export const CHART_SHAPES: ChartShape[] = ['bars', 'line', 'area'];const DOT = 7;const STROKE = 2;const WASH_TOP = 0.22;const WASH_BOTTOM = 0.03;const SAMPLES = 10;const BEAD_TAU = 70;/** How far a bar bulges before it pinches (as a share of the pinch), and how high a bead hops as it closes. */const BULGE = 0.18;const HOP = 2.2;const clamp01 = (n: number) => Math.max(0, Math.min(1, n));const lerp = (a: number, b: number, t: number) => a + (b - a) * t;const inOut = (t: number) => (t < 0.5 ? 4 * t * t * t : 1 - (-2 * t + 2) ** 3 / 2);/** The time at which inOut reaches y. */const inOutAt = (y: number) => (y < 0.5 ? Math.cbrt(y / 4) : 1 - Math.cbrt(2 * (1 - y)) / 2);const out = (t: number) => 1 - (1 - t) ** 3;const r2 = (n: number) => Math.round(n * 100) / 100;/** Tangents of a monotone cubic through the points: smooth, never overshooting a value. */function tangents(xs: number[], ys: number[]) {  const n = xs.length;  if (n < 2) return xs.map(() => 0);  const m: number[] = [];  for (let i = 0; i < n - 1; i++) m.push((ys[i + 1] - ys[i]) / (xs[i + 1] - xs[i] || 1));  const t = [m[0]];  for (let i = 1; i < n - 1; i++) t.push(m[i - 1] * m[i] <= 0 ? 0 : (m[i - 1] + m[i]) / 2);  t.push(m[n - 2]);  for (let i = 0; i < n - 1; i++) {    if (m[i] === 0) { t[i] = 0; t[i + 1] = 0; continue; }    const a = t[i] / m[i], b = t[i + 1] / m[i], s = a * a + b * b;    if (s > 9) { const k = 3 / Math.sqrt(s); t[i] = k * a * m[i]; t[i + 1] = k * b * m[i]; }  }  return t;}type Pt = [number, number];const mix = (p: Pt, q: Pt, s: number): Pt => [lerp(p[0], q[0], s), lerp(p[1], q[1], s)];/** The piece of a cubic between s0 and s1 (de Casteljau twice). */function piece(p0: Pt, p1: Pt, p2: Pt, p3: Pt, s0: number, s1: number): [Pt, Pt, Pt, Pt] {  // Keep [0, s1].  const a = mix(p0, p1, s1), b = mix(p1, p2, s1), c = mix(p2, p3, s1), ab = mix(a, b, s1), bc = mix(b, c, s1), e = mix(ab, bc, s1);  if (s0 <= 0) return [p0, a, ab, e];  // Of that, keep [s0 / s1, 1].  const u = s0 / s1;  const f = mix(p0, a, u), g = mix(a, ab, u), h = mix(ab, e, u), fg = mix(f, g, u), gh = mix(g, h, u);  return [mix(fg, gh, u), gh, h, e];}/** * The curve between two x positions. Each segment's control points sit at thirds in x, so x runs * linearly with the curve's parameter and a cut at any x is exact. */function curveBetween(xs: number[], ys: number[], t: number[], xa: number, xb: number) {  let d = '';  for (let i = 0; i < xs.length - 1; i++) {    const h = xs[i + 1] - xs[i];    if (xs[i + 1] <= xa || xs[i] >= xb || h <= 0) continue;    const s0 = clamp01((xa - xs[i]) / h), s1 = clamp01((xb - xs[i]) / h);    if (s1 - s0 < 1e-4) continue;    const dx = h / 3;    const [q0, q1, q2, q3] = piece([xs[i], ys[i]], [xs[i] + dx, ys[i] + t[i] * dx], [xs[i + 1] - dx, ys[i + 1] - t[i + 1] * dx], [xs[i + 1], ys[i + 1]], s0, s1);    if (!d) d = `M${r2(q0[0])},${r2(q0[1])}`;    d += `C${r2(q1[0])},${r2(q1[1])} ${r2(q2[0])},${r2(q2[1])} ${r2(q3[0])},${r2(q3[1])}`;  }  return d;}/** The same curve, evaluated at x (cubic Hermite on the segment). */function curveAt(xs: number[], ys: number[], t: number[], x: number) {  const n = xs.length;  if (n === 1) return ys[0];  let i = Math.min(n - 2, Math.max(0, Math.floor(((x - xs[0]) / (xs[n - 1] - xs[0] || 1)) * (n - 1))));  while (i > 0 && x < xs[i]) i--;  while (i < n - 2 && x > xs[i + 1]) i++;  const h = xs[i + 1] - xs[i] || 1, s = clamp01((x - xs[i]) / h);  const h00 = 2 * s ** 3 - 3 * s ** 2 + 1, h10 = s ** 3 - 2 * s ** 2 + s, h01 = -2 * s ** 3 + 3 * s ** 2, h11 = s ** 3 - s ** 2;  return h00 * ys[i] + h10 * h * t[i] + h01 * ys[i + 1] + h11 * h * t[i + 1];}/** A box with its own top and bottom corner radii. */function box(l: number, t: number, r: number, b: number, rt: number, rb: number) {  const w = r - l, h = b - t;  if (w <= 0.01 || h <= 0.01) return '';  rt = Math.max(0, Math.min(rt, w / 2, h / 2));  rb = Math.max(0, Math.min(rb, w / 2, h - rt));  return `M${r2(l)},${r2(t + rt)}A${r2(rt)},${r2(rt)} 0 0 1 ${r2(l + rt)},${r2(t)}H${r2(r - rt)}A${r2(rt)},${r2(rt)} 0 0 1 ${r2(r)},${r2(t + rt)}V${r2(b - rb)}A${r2(rb)},${r2(rb)} 0 0 1 ${r2(r - rb)},${r2(b)}H${r2(l + rb)}A${r2(rb)},${r2(rb)} 0 0 1 ${r2(l)},${r2(b - rb)}Z`;}type Route = { from: ChartShape; to: ChartShape; t: number; dir: 1 | -1 };type Pose = {  /** Per point: widened into a step (merge), condensed into a bead (dot), melted into the thread (zip). */  m: Float32Array; d: Float32Array; z: Float32Array;  cols: boolean;  /** 0 solid, 1 the area's fading gradient. */  wash: number;  areaOn: boolean;  /** The area's top edge: 0 the curve, 1 steps. */  step: number;  /** The thread is drawn between these fractions of the x range. */  ta: number; tb: number;  /** How far the area's floor has poured: 'full', or pouring in / draining out at time t. */  pour: 'full' | 'in' | 'out'; pourT: number;};const poseFor = (n: number): Pose => ({  m: new Float32Array(n), d: new Float32Array(n), z: new Float32Array(n),  cols: true, wash: 0, areaOn: false, step: 0, ta: 0, tb: 0, pour: 'full', pourT: 0,});/** Timings shared by the tapes; the stagger shrinks with more points so a sweep stays under ~300ms. */function timing(n: number) {  const stag = n > 1 ? Math.min(28, 300 / (n - 1)) : 0;  const spread = (n - 1) * stag;  const condense = 460;  const threadIn = condense * 0.9;  const sweep = Math.max(420, spread * 1.25 + 90);  const melt = 260;  const pull = Math.max(380, spread * 1.1 + 120);  const drip = 540;  const widen = 380;  const swap = widen + spread * 0.5;  return { stag, spread, condense, threadIn, sweep, melt, pull, drip, widen, swap };}export function routeDuration(from: ChartShape, to: ChartShape, n: number) {  const k = timing(n);  switch (`${from}>${to}`) {    case 'bars>line': return k.threadIn + k.sweep + 40 + k.melt;    case 'line>bars': return k.pull + 40 + k.drip;    case 'line>area': return 760;    case 'area>line': return 620;    case 'bars>area': return k.swap + 620;    case 'area>bars': return 380 + 480 + k.spread * 0.6;    default: return 0;  }}/** The resting pose of a shape. */function settle(P: Pose, s: ChartShape) {  P.m.fill(s === 'area' ? 1 : 0);  P.d.fill(s === 'line' ? 1 : 0);  P.z.fill(s === 'line' ? 1 : 0);  P.cols = s !== 'area';  P.wash = s === 'area' ? 1 : 0;  P.areaOn = s === 'area';  P.step = 0;  P.ta = 0; P.tb = s === 'bars' ? 0 : 1;  P.pour = 'full'; P.pourT = 0;}/** The pose of a tape at time t. Every field is set, so the tape can run either way or be held. */function pose(P: Pose, from: ChartShape, to: ChartShape, t: number, n: number) {  const k = timing(n);  const u = (i: number) => (n > 1 ? i / (n - 1) : 0);  settle(P, from);  switch (`${from}>${to}`) {    case 'bars>line': {      // The thread's tip eases across; each bead melts once the tip has passed it.      const tip = inOut(clamp01((t - k.threadIn) / k.sweep));      for (let i = 0; i < n; i++) {        P.d[i] = clamp01((t - i * k.stag) / k.condense);        P.z[i] = clamp01((t - (k.threadIn + k.sweep * inOutAt(u(i)) + 40)) / k.melt);      }      P.ta = 0; P.tb = tip;      return;    }    case 'line>bars': {      // The tail is pulled to the right; each bead swells just before it's left, then drips its bar.      const tail = inOut(clamp01(t / k.pull));      for (let i = 0; i < n; i++) {        const leave = k.pull * inOutAt(u(i));        P.z[i] = 1 - out(clamp01((t - Math.max(0, leave - 140)) / 200));        P.d[i] = 1 - clamp01((t - leave - 40) / k.drip);      }      P.ta = tail; P.tb = 1;      return;    }    case 'line>area': {      P.cols = false; P.areaOn = t > 0; P.wash = 1; P.ta = 0; P.tb = 1;      P.pour = 'in'; P.pourT = t;      return;    }    case 'area>line': {      const end = routeDuration('area', 'line', n);      P.cols = false; P.areaOn = t < end; P.wash = 1; P.ta = 0; P.tb = 1;      P.pour = 'out'; P.pourT = t;      return;    }    case 'bars>area': {      for (let i = 0; i < n; i++) P.m[i] = out(clamp01((t - i * k.stag * 0.5) / k.widen));      P.wash = out(clamp01(t / k.swap));      if (t < k.swap) { P.step = 1; return; }      P.cols = false; P.areaOn = true;      P.step = 1 - inOut(clamp01((t - k.swap) / 460));      P.ta = 0; P.tb = inOut(clamp01((t - k.swap - 160) / 440));      return;    }    case 'area>bars': {      P.step = inOut(clamp01(t / 380));      P.ta = out(clamp01(t / 260)); P.tb = 1;      if (t < 380) return;      P.areaOn = false; P.cols = true;      for (let i = 0; i < n; i++) P.m[i] = 1 - out(clamp01((t - 380 - i * k.stag * 0.6) / 480));      P.wash = 1 - out(clamp01((t - 380) / (480 + k.spread * 0.6)));      return;    }  }}export function useChartMorph({ count, shape, reduced, barWidth = 24 }: { count: number; shape: ChartShape; reduced: boolean; barWidth?: number }) {  const columns = React.useRef<(SVGPathElement | null)[]>([]);  const columnGroup = React.useRef<SVGGElement>(null);  const area = React.useRef<SVGPathElement>(null);  const line = React.useRef<SVGPathElement>(null);  const stops = React.useRef<(SVGStopElement | null)[]>([]);  const bead = React.useRef<HTMLDivElement>(null);  const rule = React.useRef<HTMLDivElement>(null);  const st = React.useRef<{    layout: ChartLayout; pose: Pose; shown: ChartShape; route: Route | null; queued: ChartShape | null; held: boolean;    vals: Float32Array; from: Float32Array; to: Float32Array; dataT0: number; delay: number; max: number; maxFrom: number; maxTo: number;    point: number | null; beadX: number; beadOn: boolean; last: number; n: number;  } | null>(null);  if (!st.current) {    const P = poseFor(count);    settle(P, shape);    st.current = {      layout: { width: 0, height: 0, top: 10 }, pose: P, shown: shape, route: null, queued: null, held: false,      vals: new Float32Array(count), from: new Float32Array(count), to: new Float32Array(count), dataT0: -1, delay: 25, max: 1, maxFrom: 1, maxTo: 1,      point: null, beadX: 0, beadOn: false, last: 0, n: count,    };  }  const S = st.current;  if (S.pose.m.length !== count) {    const keep = (a: Float32Array) => Float32Array.from({ length: count }, (_, i) => a[i] ?? a[a.length - 1] ?? 0);    S.vals = keep(S.vals); S.from = keep(S.from); S.to = keep(S.to);    if (S.route) S.shown = S.route.dir > 0 ? S.route.to : S.route.from;    S.pose = poseFor(count);    settle(S.pose, S.shown);    S.route = null; S.queued = null; S.held = false;    S.point = S.point !== null && S.point < count ? S.point : null;  }  S.n = count;  const frame = React.useRef(0);  const still = React.useRef(reduced);  still.current = reduced;  const paint = (dt = 0) => {    const P = S.pose, n = S.n;    const { width: W, height: H, top } = S.layout;    if (!W || !H || !n) return;    const band = W / n;    const bw = Math.min(barWidth, band * 0.56);    const xs = Array.from({ length: n }, (_, i) => band * (i + 0.5));    const max = S.max || 1;    const ys = Array.from(S.vals, (v) => top + (H - top) * (1 - Math.max(0, v) / max));    const x0 = xs[0], xN = xs[n - 1];    const tg = tangents(xs, ys);    const near = (x: number) => ys[Math.max(0, Math.min(n - 1, Math.round((x - x0) / band)))];    // Columns: bars, steps on their way to the area, or beads.    const g = columnGroup.current;    if (g) g.style.display = P.cols ? '' : 'none';    if (P.cols) {      for (let i = 0; i < n; i++) {        const el = columns.current[i];        if (!el) continue;        const x = xs[i], yt = ys[i], mi = P.m[i], di = P.d[i], zi = P.z[i];        let l = lerp(x - bw / 2, n > 1 ? Math.max(x0, x - band / 2) : x - band / 2, mi);        let r = lerp(x + bw / 2, n > 1 ? Math.min(xN, x + band / 2) : x + band / 2, mi);        // Condensing: the bar bulges a touch, pinches to a stick, then the stick retracts up into a bead        // on the value, which hops as it closes. Run backward, the same curves make a drip that lifts        // off, falls, and spreads past its width as it lands.        const ps = clamp01(di / 0.45), ls = clamp01((di - 0.3) / 0.7);        const pinch = inOut(ps) - BULGE * Math.sin(Math.PI * clamp01(ps / 0.45)), lift = inOut(ls);        const hop = HOP * Math.sin(Math.PI * clamp01((ls - 0.72) / 0.28));        const cx = (l + r) / 2, w = lerp(r - l, DOT, pinch);        l = cx - w / 2; r = cx + w / 2;        let t = yt - (DOT / 2) * lift - hop, b = lerp(H, yt + DOT / 2, lift) - hop;        // Melting: the bead shrinks to the thread's thickness, under it, and goes.        if (zi > 0) {          if (zi >= 1) { el.setAttribute('d', ''); continue; }          const k = lerp(1, STROKE / DOT, out(zi)), cy = (t + b) / 2, hw = (r - l) / 2, hh = (b - t) / 2;          l = cx - hw * k; r = cx + hw * k; t = cy - hh * k; b = cy + hh * k;        }        const rt = lerp(4 * (1 - mi), DOT / 2, Math.max(0, pinch));        const rb = (DOT / 2) * lift;        el.setAttribute('d', box(l, t, r, b, rt, rb));      }    }    // The wash: solid for bars, a fading gradient for the area. Columns paint with a plain fill until it starts.    const washing = P.wash > 0.001 ? '1' : '';    if (g && g.dataset.washing !== washing) {      g.dataset.washing = washing;      g.setAttribute('fill', washing ? (g.dataset.wash ?? '') : 'var(--chart-1, var(--primary))');    }    const [s0, s1] = stops.current;    if (s0) s0.setAttribute('stop-opacity', String(r2(lerp(1, WASH_TOP, P.wash))));    if (s1) s1.setAttribute('stop-opacity', String(r2(lerp(1, WASH_BOTTOM, P.wash))));    // The area: a top edge between the curve and steps, a floor that pours down to the axis.    const a = area.current;    if (a) {      a.style.display = P.areaOn && n > 1 ? '' : 'none';      if (P.areaOn && n > 1) {        if (P.step < 0.001 && P.pour === 'full') {          a.setAttribute('d', `${curveBetween(xs, ys, tg, x0, xN)}L${r2(xN)},${H}L${r2(x0)},${H}Z`);        } else {          const px: number[] = [];          for (let i = 0; i < n - 1; i++) {            for (let k = 0; k < SAMPLES; k++) px.push(xs[i] + (k / SAMPLES) * band);            const mid = xs[i] + band / 2;            px.push(mid - 0.01, mid + 0.01);          }          px.push(xN);          px.sort((p, q) => p - q);          const tops = px.map((x) => lerp(curveAt(xs, ys, tg, x), near(x), P.step));          const floor = (x: number) => {            const v = (x - x0) / (xN - x0 || 1);            if (P.pour === 'full') return 1;            if (P.pour === 'in') return out(clamp01((P.pourT - v * 300) / 460));            return 1 - inOut(clamp01((P.pourT - v * 240) / 380));          };          let d = `M${r2(px[0])},${r2(tops[0])}`;          for (let k = 1; k < px.length; k++) d += `L${r2(px[k])},${r2(tops[k])}`;          if (P.pour === 'full') d += `L${r2(xN)},${H}L${r2(x0)},${H}Z`;          else {            for (let k = px.length - 1; k >= 0; k--) d += `L${r2(px[k])},${r2(lerp(tops[k], H, floor(px[k])))}`;            d += 'Z';          }          a.setAttribute('d', d);        }      }    }    // The thread: the curve cut exactly between its tail and its tip.    const ln = line.current;    if (ln) {      const xa = lerp(x0, xN, P.ta), xb = lerp(x0, xN, P.tb);      const on = n > 1 && xb - xa > 0.5;      ln.style.display = on ? '' : 'none';      if (on) ln.setAttribute('d', curveBetween(xs, ys, tg, xa, xb));    }    // The hover bead slides along the thread (it follows the curve, not a straight line), with a hairline under it.    const bd = bead.current, rl = rule.current;    if (bd && rl) {      const showing = S.point !== null && n > 1 && (P.areaOn || P.tb - P.ta > 0.98);      if (S.point !== null) {        const target = xs[S.point];        S.beadX = !S.beadOn || still.current ? target : lerp(target, S.beadX, Math.exp(-dt / BEAD_TAU));        if (Math.abs(S.beadX - target) < 0.05) S.beadX = target;      }      if (showing !== S.beadOn) {        S.beadOn = showing;        bd.style.opacity = rl.style.opacity = showing ? '1' : '0';        bd.style.scale = showing ? '1' : '0.4';      }      const x = S.beadX, y = lerp(curveAt(xs, ys, tg, x), near(x), P.step);      bd.style.translate = `${r2(x - 4.5)}px ${r2(y - 4.5)}px`;      rl.style.translate = `${r2(x - 0.5)}px 0`;    }  };  const tick = (now: number) => {    frame.current = 0;    const dt = S.last ? Math.min(64, now - S.last) : 16;    S.last = now;    let moving = false;    // Data: each value eases to its new height, a little after its left neighbour.    if (S.dataT0 >= 0) {      const t = now - S.dataT0;      let done = true;      for (let i = 0; i < S.n; i++) {        const k = out(clamp01((t - i * S.delay) / 650));        if (k < 1) done = false;        S.vals[i] = lerp(S.from[i], S.to[i], k);      }      S.max = lerp(S.maxFrom, S.maxTo, out(clamp01(t / 650)));      if (done) { S.dataT0 = -1; S.max = S.maxTo; } else moving = true;    }    // Shape: play the tape the way it's heading; land, then take any shape asked for meanwhile.    const R = S.route;    if (R && !S.held) {      const end = routeDuration(R.from, R.to, S.n);      R.t = Math.max(0, Math.min(end, R.t + dt * R.dir));      if ((R.dir > 0 && R.t >= end) || (R.dir < 0 && R.t <= 0)) {        S.shown = R.dir > 0 ? R.to : R.from;        settle(S.pose, S.shown);        S.route = null;        const next = S.queued;        S.queued = null;        if (next && next !== S.shown) { S.route = { from: S.shown, to: next, t: 0, dir: 1 }; moving = true; }      } else {        pose(S.pose, R.from, R.to, R.t, S.n);        moving = true;      }    }    // The bead: eases toward its point.    if (S.point !== null && S.beadOn && Math.abs(S.beadX - (S.layout.width / S.n) * (S.point + 0.5)) > 0.05) moving = true;    paint(dt);    if (moving) frame.current = requestAnimationFrame(tick);    else S.last = 0;  };  const kick = () => {    if (!frame.current) frame.current = requestAnimationFrame(tick);  };  React.useEffect(() => () => { cancelAnimationFrame(frame.current); frame.current = 0; }, []);  /**   * Where the shape is on the switch's axis (0 bars, 1 line, 2 area). Null while a tape that isn't   * on that axis runs (line → bars, area → line, bars ↔ area are their own choreographies).   */  const position = () => {    const R = S.route;    if (!R) return CHART_SHAPES.indexOf(S.shown);    const along = R.t / (routeDuration(R.from, R.to, count) || 1);    if (R.from === 'bars' && R.to === 'line') return along;    if (R.from === 'line' && R.to === 'area') return 1 + along;    return null;  };  const shapeTo = (next: ChartShape) => {    const R = S.route;    if (still.current) {      S.route = null; S.queued = null; S.held = false;      S.shown = next;      settle(S.pose, next);      paint();      return;    }    if (R) {      S.held = false;      if (next === R.to) { R.dir = 1; S.queued = null; }      else if (next === R.from) { R.dir = -1; S.queued = null; }      else S.queued = next;      kick();      return;    }    if (next === S.shown) return;    S.route = { from: S.shown, to: next, t: 0, dir: 1 };    kick();  };  return {    columns, columnGroup, area, line, stops, bead, rule,    /** The plot's size changed: redraw where everything is. */    layout(next: ChartLayout) {      if (S.layout.width === next.width && S.layout.height === next.height && S.layout.top === next.top) return;      S.layout = next;      paint();    },    /** New values (and scale); from the values on screen, or from `from` for the first arrival. */    data(values: number[], max: number, opts: { animate: boolean; from?: number }) {      for (let i = 0; i < count; i++) {        S.from[i] = opts.from ?? S.vals[i];        S.to[i] = values[i] ?? 0;      }      S.maxFrom = opts.from !== undefined ? max : S.max;      S.maxTo = max;      if (!opts.animate || still.current) {        S.vals.set(S.to);        S.max = max;        S.dataT0 = -1;        paint();        return;      }      S.delay = count > 1 ? Math.min(40, 420 / (count - 1)) : 0;      S.dataT0 = performance.now();      kick();    },    /** Head for a shape: run the tape on, run it back if that's where it came from, or queue behind it. */    shape: shapeTo,    position,    /** Hold the tape at a point on the shape axis, 0 (bars) to 2 (area), between neighbours. */    scrub(p: number) {      if (still.current) return;      p = Math.max(0, Math.min(CHART_SHAPES.length - 1, p));      const i = Math.min(CHART_SHAPES.length - 2, Math.floor(p));      const from = CHART_SHAPES[i], to = CHART_SHAPES[i + 1];      S.queued = null;      S.held = true;      S.route = { from, to, t: (p - i) * routeDuration(from, to, count), dir: 1 };      pose(S.pose, from, to, S.route.t, count);      paint();    },    /** Let go of the tape: it runs on to `target`, one of the two shapes either side of it. */    release(target: ChartShape) {      const R = S.route;      S.held = false;      if (!R || still.current) return shapeTo(target);      if (target === R.from) R.dir = -1;      else if (target === R.to) R.dir = 1;      else S.queued = target;      kick();    },    /** The point the bead sits on, or null to hide it. */    point(i: number | null) {      if (i === S.point) return;      S.point = i;      kick();    },  };}