Sankey Chart

import { clsx, type ClassValue } from "clsx"
import { twMerge } from "tailwind-merge"

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}

"use client";

import { useEffect, useState } from "react";

/**
 * Returns true only on devices that have a true hover (mouse / trackpad).
 * Touch devices fire phantom `:hover` on tap that sticks until tap-elsewhere
 * — gate hover-only effects (scale lifts, magnetic pulls) behind this.
 */
export function useHoverCapable() {
  const [canHover, setCanHover] = useState(false);

  useEffect(() => {
    if (typeof window === "undefined" || !window.matchMedia) return;
    const mq = window.matchMedia("(hover: hover) and (pointer: fine)");
    const update = () => setCanHover(mq.matches);
    update();
    mq.addEventListener?.("change", update);
    return () => mq.removeEventListener?.("change", update);
  }, []);

  return canHover;
}

"use client";

import { useCallback, useLayoutEffect, useRef, useState } from "react";

/**
 * Where the keyboard or the pointer last moved to: the row's id, stamped with
 * the query it was placed under.
 */
type RowCursor = { id: string; query: string };

/** The cursor's row, or -1 once the query has moved on or the row has left. */
function indexOfCursor(
  rows: readonly { id: string }[],
  query: string,
  cursor: RowCursor | null,
) {
  if (cursor === null || cursor.query !== query) return -1;
  return rows.findIndex((row) => row.id === cursor.id);
}

/**
 * The highlighted row of a list whose rows can change under it.
 *
 * Which row is highlighted is resolved during render, never in a passive
 * effect: a passive effect runs after the commit, so a list that had just
 * changed would carry an `aria-activedescendant` naming a row that has left it,
 * and a key pressed in that window would commit the wrong row or nothing at
 * all.
 *
 * The cursor holds the row's id, not its position. A position alone cannot tell
 * a list that shrank from one that swapped its rows for a different set of the
 * same length, and the second case is the one that silently hands Enter to a
 * row the user never chose. A cursor whose row has left the list returns the
 * highlight to the first row rather than to the nearest surviving one: the row
 * the user aimed at is gone, and the first row is where a new query already
 * puts the highlight.
 *
 * Pass the query the list is filtered by. The cursor is stamped with it and
 * dropped when it changes, so a caller cannot forget to clear it — including a
 * caller whose query arrives as a prop and so never runs its own handler. Rows
 * that come back under a query that has moved on cannot revive it either.
 * `moveTo(null)` is for deliberate resets, such as reopening the list.
 *
 * Both callbacks keep one identity for the life of the component, and read the
 * rows and the query through a ref to do it. A caller will put them in an
 * effect's dependencies — the exhaustive-deps rule makes it — and a `moveTo`
 * rebuilt on every keystroke would re-run that effect on every keystroke.
 */
export function useRowCursor(rows: readonly { id: string }[], query: string) {
  const [cursor, setCursor] = useState<RowCursor | null>(null);
  // Written after commit, not during render: a render React discards or has not
  // finished still runs the component body, and an event handler that read this
  // in that window would stamp the cursor with a query the committed tree does
  // not have.
  const latest = useRef({ rows, query });
  useLayoutEffect(() => {
    latest.current = { rows, query };
  });

  const cursorRow = indexOfCursor(rows, query, cursor);
  // Cleared rather than ignored: React re-runs this render with the cursor
  // already gone, so rows that come back cannot revive a highlight the user has
  // stopped aiming at.
  if (cursor !== null && cursorRow < 0) setCursor(null);

  const moveTo = useCallback(
    (id: string | null) =>
      setCursor(id === null ? null : { id, query: latest.current.query }),
    [],
  );

  const moveActive = useCallback((direction: 1 | -1) => {
    const { rows: live, query: liveQuery } = latest.current;
    const last = live.length - 1;
    if (last < 0) return;
    // Steps from the row the cursor is really on, inside the update, so that
    // two keys landing in one batch move two rows rather than one.
    setCursor((current) => {
      const at = Math.max(indexOfCursor(live, liveQuery, current), 0);
      const next = Math.min(Math.max(at + direction, 0), last);
      return { id: live[next].id, query: liveQuery };
    });
  }, []);

  return { activeIndex: cursorRow < 0 ? 0 : cursorRow, moveTo, moveActive };
}

// Shared motion tokens. Easing curves mirror the CSS custom properties in
// globals.css; springs are the canonical physics used across components.
// Strong custom variants — defaults like `ease-in`/`ease-out` feel weak.

export const EASE_OUT = [0.16, 1, 0.3, 1] as const;
export const EASE_IN_OUT = [0.77, 0, 0.175, 1] as const;
export const EASE_DRAWER = [0.32, 0.72, 0, 1] as const;

/** CSS string form of EASE_OUT for inline style transitions. */
export const EASE_OUT_CSS = "cubic-bezier(0.16, 1, 0.3, 1)";

/** Press feedback on buttons and other tappable surfaces. */
export const SPRING_PRESS = {
  type: "spring",
  stiffness: 500,
  damping: 30,
  mass: 0.6,
} as const;

/** Content swaps — label/icon slots trading places inside a control. */
export const SPRING_SWAP = {
  type: "spring",
  stiffness: 460,
  damping: 30,
  mass: 0.55,
} as const;

/** Overlay panel entrances — modals and sheets summoned by pointer. */
export const SPRING_PANEL = {
  type: "spring",
  stiffness: 420,
  damping: 40,
  mass: 0.5,
} as const;

/** Shared-layout glides — pills, indicators and panels morphing between positions. */
export const SPRING_LAYOUT = {
  type: "spring",
  stiffness: 360,
  damping: 32,
  mass: 0.6,
} as const;

/** Cursor-follow physics for decorative mouse tracking (magnetic, tilt, dock). */
export const SPRING_MOUSE = {
  stiffness: 200,
  damping: 15,
  mass: 0.3,
} as const;

/** Dragged handles and fills (sliders) — critically damped `useSpring` config,
 * so the value follows the pointer butterily and never rebounds off an end. */
export const SPRING_GLIDE = {
  stiffness: 700,
  damping: 50,
  mass: 0.5,
} as const;

"use client";

import { type RefObject, useEffect } from "react";

/**
 * What the dismissing gesture does to the control it landed on.
 *
 * `"pass-through"` is the platform norm (native popover light-dismiss): the
 * tap closes the overlay *and* activates whatever was under it. Use
 * `"consume"` where the open overlay sits over or beside controls that would
 * be costly to trigger by accident — the dismissal then swallows the
 * activation too, so the gesture only closes.
 */
export type DismissBehavior = "pass-through" | "consume";

export interface DismissOptions {
  /** Default `"pass-through"`. */
  behavior?: DismissBehavior;
  /** Dismiss on Escape as well. Default true. */
  escape?: boolean;
  /** Return true for an outside target that should *not* dismiss. Must be stable. */
  ignore?: (target: Element) => boolean;
}

/**
 * What every currently open dismiss scope counts as inside itself. A consumed
 * dismissal reads this to tell a stray gesture from one that belongs to an
 * overlay in front of it: overlays have no shared z-order to consult, but the
 * one the gesture landed in has said as much by registering it.
 */
const openScopes = new Set<(target: Element) => boolean>();

function claimedByAnotherScope(
  self: (target: Element) => boolean,
  target: Element,
) {
  for (const scope of openScopes) {
    if (scope !== self && scope(target)) return true;
  }
  return false;
}

// preventDefault on pointerdown does not suppress the click that follows, so
// consuming a gesture means swallowing that click itself. The swallower
// deliberately outlives the effect that installed it — the dismissal it
// belongs to has already unmounted or re-rendered by the time the click lands.
// It releases on that click, or on the next gesture if the pointer is dragged
// away and no click ever arrives, so it can never eat a later one. A keydown
// releases it too: a gesture that ends with neither a click nor a cancel would
// otherwise leave it armed, and the click Enter synthesizes on some focused
// control is not the one this dismissal was owed.
function consumeActivation(source: Event) {
  const swallow = (event: MouseEvent) => {
    event.preventDefault();
    event.stopPropagation();
    release();
  };
  const restart = (event: Event) => {
    if (event !== source) release();
  };
  const release = () => {
    window.removeEventListener("click", swallow, true);
    window.removeEventListener("pointerdown", restart, true);
    window.removeEventListener("pointercancel", restart, true);
    window.removeEventListener("keydown", release, true);
  };
  window.addEventListener("click", swallow, true);
  window.addEventListener("pointerdown", restart, true);
  window.addEventListener("pointercancel", restart, true);
  window.addEventListener("keydown", release, true);
}

/**
 * Close an open overlay on Escape or a pointerdown outside `ref`. Pass `null`
 * for `ref` when what counts as inside isn't one element, and say so with
 * `ignore` instead.
 *
 * The pointerdown listener is capture-phase: a bubble-phase one is blinded by
 * any handler in between that stops propagation, and an overlay cannot know
 * what it is layered over. `onDismiss` and `ignore` must be stable (wrap in
 * useCallback) so the listeners aren't re-bound every render while open.
 */
export function useDismiss(
  open: boolean,
  onDismiss: () => void,
  ref: RefObject<HTMLElement | SVGElement | null> | null,
  {
    behavior = "pass-through",
    escape: dismissOnEscape = true,
    ignore,
  }: DismissOptions = {},
) {
  useEffect(() => {
    if (!open) return;
    const inside = (target: Element) =>
      Boolean(ref?.current?.contains(target)) || Boolean(ignore?.(target));
    const onKey = (event: KeyboardEvent) => {
      if (dismissOnEscape && event.key === "Escape") onDismiss();
    };
    const onPointer = (event: PointerEvent) => {
      const target = event.target as Element | null;
      if (!target || inside(target)) return;
      // Outside this overlay, but inside one that is also open: the gesture is
      // that overlay's to answer, and swallowing its click from behind would
      // cost the user the control they actually aimed at.
      if (behavior === "consume" && !claimedByAnotherScope(inside, target)) {
        consumeActivation(event);
      }
      onDismiss();
    };
    openScopes.add(inside);
    window.addEventListener("keydown", onKey);
    window.addEventListener("pointerdown", onPointer, true);
    return () => {
      openScopes.delete(inside);
      window.removeEventListener("keydown", onKey);
      window.removeEventListener("pointerdown", onPointer, true);
    };
  }, [open, onDismiss, ref, behavior, dismissOnEscape, ignore]);
}

"use client";

import { useMemo, useRef } from "react";
import { isHoveringPointer } from "@/lib/touch";

interface BoundaryEvent {
  pointerId: number;
  pointerType: string;
  buttons: number;
}

export interface HoverGesture {
  /** True when this enter starts a hover: the pointer arrived resting, not pressing. */
  enter: (event: BoundaryEvent) => boolean;
  /** True when this leave ends a hover that entered as one. */
  leave: (event: BoundaryEvent) => boolean;
}

/**
 * Pairs a surface's enter with its leave, per pointer.
 *
 * `isHoveringPointer` answers the question the *enter* asks — is this pointer
 * resting on the surface or pressing it — and both boundary cases go wrong if
 * the leave is asked the same question again:
 *
 * - A pen with no hover never rests. It arrives in contact, taps, and the spec
 *   then requires its boundary events after `pointerup`, so the leave carries
 *   `buttons: 0` and reads as a mouse gliding off. Hover teardown then undid
 *   the tap — the panel the pen had just opened closed under it.
 * - A mouse pressed on the surface and dragged off leaves with `buttons: 1`.
 *   Skipping teardown there strands the surface open: the release happens
 *   outside, and no second leave ever comes.
 *
 * So the state a hover holds is released by the pointer that took it, whatever
 * the buttons say at the boundary, and a pointer that arrived in contact never
 * took it in the first place. Contact is the exception tracked here, not
 * hover: a leave from a pointer this surface never saw enter — mounted under
 * the cursor, say — still counts, since the alternative is state with no way
 * out.
 */
export function useHoverGesture(): HoverGesture {
  const contact = useRef(new Set<number>());

  return useMemo(
    () => ({
      enter: (event) => {
        if (isHoveringPointer(event)) {
          contact.current.delete(event.pointerId);
          return true;
        }
        contact.current.add(event.pointerId);
        return false;
      },
      leave: (event) => {
        const arrivedInContact = contact.current.delete(event.pointerId);
        return !arrivedInContact && event.pointerType !== "touch";
      },
    }),
    [],
  );
}

"use client";

import { useMemo, useRef } from "react";

/** What a pointerdown recorded, read back by the click that ends its gesture. */
export interface TapRecord<S> {
  /** Which input started the gesture. */
  pointerType: string;
  /** What the surface was showing when it started. */
  state: S;
}

export interface TapGesture<S> {
  /** Record the gesture a pointerdown starts, with the state it starts in. */
  start: (event: { pointerType: string }, state: S) => void;
  /** Read the record and clear it. `null` when no pointer is behind this click. */
  take: () => TapRecord<S> | null;
  /** Drop the record: this gesture will never spend it on a click. */
  drop: () => void;
}

/**
 * The pointer gesture behind a click, recorded where the click cannot report
 * it. A `click` carries no `pointerType` in the engines that matter, so the
 * `pointerdown` before it is the only thing that says which input activated
 * the control — and whether one did at all, since keyboard activation
 * synthesizes a click with no pointer behind it.
 *
 * State goes in with the record because a click reports that no better: a
 * browser that focuses a control on contact can open the very panel the tap
 * was meant to open, and reading "is it open" at click time then undoes it.
 * What the gesture started against is what it acts on.
 *
 * The record is spent by one click and dropped by everything else, because a
 * record that outlives its gesture is worse than none:
 *
 * - A scroll or an OS gesture takes the touch away — `pointercancel`, no click
 *   ever — and the finger would sit in the record until some later click.
 * - That later click is often `Enter` on a keyboard, which arrives with no
 *   pointerdown of its own and would inherit the abandoned finger. A keydown
 *   is the start of a keyboard activation and never part of a tap, so it drops
 *   the record too.
 *
 * Both ends have to be wired by the surface: `drop` on `onPointerCancel` and
 * on `onKeyDown`.
 */
export function useTapGesture<S>(): TapGesture<S> {
  const record = useRef<TapRecord<S> | null>(null);

  return useMemo(
    () => ({
      start: (event, state) => {
        record.current = { pointerType: event.pointerType, state };
      },
      take: () => {
        const spent = record.current;
        record.current = null;
        return spent;
      },
      drop: () => {
        record.current = null;
      },
    }),
    [],
  );
}

// Shared touch primitives. iOS and iPadOS run their own gestures on top of the
// page — the long-press selection callout and the selection it drags in with
// it — and they win: once the platform claims a touch it cancels ours
// mid-gesture, so a press-and-hold or a drag simply dies. Surfaces that own
// their gesture have to opt out.
//
// What the two classes below cover, precisely:
// - `-webkit-touch-callout: none` stops iOS's long-press callout. WebKit-only:
//   it is not a property other engines have, so it is inert everywhere else.
// - `user-select: none` stops the long-press selection on every engine,
//   Android included, and stops a drag from painting a selection under the
//   cursor. It is inherited, so it reaches every descendant — which is why the
//   two classes differ only in whether they apply it unconditionally.
// What neither covers:
// - Chrome for Android's long-press menu on a link or an image. No CSS
//   suppresses it; a gesture surface that wraps one needs its own
//   `onContextMenu` with `preventDefault()`.
// - The native drag of an `<img>` or `<a>` descendant. `-webkit-user-drag` is
//   not inherited and plain divs and buttons are not drag sources, so setting
//   it on the surface does nothing — the child itself needs `draggable={false}`.

/**
 * Classes for a surface that *is* the control: a thumb, a drum, a stage, a
 * handle, a hold button. Selection is suppressed on every input, because a
 * drag that highlights the control's own label is wrong on a mouse too.
 * Compose with `touch-none` when the surface also owns the scroll axis — leave
 * it off when the page must still scroll from there.
 */
export const TOUCH_GESTURE_CLASS = "select-none [-webkit-touch-callout:none]";

/**
 * The same opt-out for a gesture surface that wraps content the consumer owns:
 * a scroller, a context-menu trigger, a sheet header, a list row. Selection is
 * suppressed only where the platform runs its own press gestures — a coarse
 * pointer — so a mouse user can still select and copy that content. If the
 * gesture itself would paint a selection under the cursor, add `select-none`
 * for the duration of the gesture rather than reaching for
 * `TOUCH_GESTURE_CLASS`.
 *
 * `pointer: coarse` describes the *primary* pointer and nothing else, so a
 * hybrid machine reads it wrong in both directions: a tablet with a mouse
 * plugged in keeps touch as primary and loses mouse selection, and a laptop
 * with a touchscreen keeps the mouse as primary and leaves selection live
 * under a finger. No media query can answer per interaction — the query is
 * about the device, and the question is about the gesture in progress. The
 * default stays here because it is right on the machines that are one thing or
 * the other, and losing a selection is a nuisance; where the miss costs a
 * *gesture* instead, the surface pairs it with `holdSelection` on the press.
 */
export const TOUCH_GESTURE_CONTENT_CLASS =
  "[-webkit-touch-callout:none] pointer-coarse:select-none";

/**
 * Suppress selection on `element` for as long as a gesture is running on it,
 * whatever the primary pointer of the machine happens to be. Returns the
 * release. Inline, so it wins over the class above and is gone again the
 * moment the gesture ends.
 *
 * For the press gestures a native selection would otherwise steal — a
 * long-press that opens a menu. Elsewhere prefer the classes: a surface that
 * takes selection away for the whole session is a surface whose text nobody
 * can copy.
 */
export function holdSelection(element: HTMLElement) {
  element.style.setProperty("user-select", "none");
  element.style.setProperty("-webkit-user-select", "none");
  return () => {
    element.style.removeProperty("user-select");
    element.style.removeProperty("-webkit-user-select");
  };
}

/**
 * Pointer capture, best effort. WebKit throws `NotFoundError` when the pointer
 * is already gone by the time the handler runs — routine on iOS, where the
 * system can claim the touch first — and an uncaught throw takes the rest of
 * the handler, the gesture included, down with it. Touch pointers carry
 * implicit capture anyway, so losing it is never fatal.
 */
export function capturePointer(element: Element, pointerId: number) {
  try {
    element.setPointerCapture(pointerId);
  } catch {
    // Pointer is no longer active — implicit capture still applies on touch.
  }
}

/** Release a capture taken with `capturePointer`, ignoring a stale pointer. */
export function releasePointer(element: Element, pointerId: number) {
  try {
    if (element.hasPointerCapture(pointerId)) {
      element.releasePointerCapture(pointerId);
    }
  } catch {
    // Capture was already dropped by the browser.
  }
}

/**
 * Whether this event came from a pointer that is *hovering*: not a touch, and
 * not currently pressed. Which input the user is holding right now is not
 * something a device capability can answer — a touchscreen laptop hovers and
 * taps, and iPadOS reports a fine hovering pointer for a finger — so both
 * paths stay live and each handler branches on the event it was given.
 *
 * A pen resting on the glass is making contact, not hovering: `buttons` is the
 * tell, and it sends a pen tap down the same route a finger takes.
 *
 * This answers what an *enter* asks. A leave is the other half of a pair and
 * has to be read against the enter that started it — `useHoverGesture` in
 * `lib/hooks/use-hover-gesture` does that, and hover surfaces should use it
 * rather than asking this question twice.
 */
export const isHoveringPointer = (event: {
  pointerType: string;
  buttons: number;
}) => event.pointerType !== "touch" && event.buttons === 0;

"use client";
// beui.dev/charts/sankey-chart

import { cn } from "@/lib/utils";
import { SankeyContext, type SankeyChartProps, useSankeyModel } from "./sankey-chart/context";
import { SankeyChartPlot } from "./sankey-chart/plot";
import { SankeyChartTooltip } from "./sankey-chart/tooltip";

/**
 * Weighted flows between nodes, laid out in columns from sources to outcomes.
 * Compose Plot and Tooltip, or omit children for the complete chart.
 *
 * ```tsx
 * <SankeyChart nodes={nodes} links={links} formatValue={usd}>
 *   <SankeyChartPlot />
 *   <SankeyChartTooltip />
 * </SankeyChart>
 * ```
 */
export function SankeyChart({
  nodes,
  links,
  label,
  formatValue,
  colors,
  nodeWidth,
  nodePadding,
  activeId,
  defaultActiveId,
  onActiveChange,
  className,
  children,
  ...props
}: SankeyChartProps) {
  const model = useSankeyModel({
    nodes,
    links,
    label,
    formatValue,
    colors,
    nodeWidth,
    nodePadding,
    activeId,
    defaultActiveId,
    onActiveChange,
  });
  return (
    <SankeyContext.Provider value={model}>
      <section
        aria-label={model.label}
        {...props}
        data-slot="sankey-chart"
        className={cn("w-full min-w-0", className)}
      >
        {children === undefined ? (
          <>
            <SankeyChartPlot />
            <SankeyChartTooltip />
          </>
        ) : (
          children
        )}
        <div className="sr-only">
          <table>
            <caption>{model.label} data</caption>
            <thead>
              <tr>
                <th scope="col">Flow</th>
                <th scope="col">Value</th>
                <th scope="col">Share of source</th>
              </tr>
            </thead>
            <tbody>
              {model.flows.map((flow) => (
                <tr key={flow.id}>
                  <th scope="row">
                    {flow.source} to {flow.target}
                  </th>
                  <td>{model.formatValue(flow.value)}</td>
                  <td>{flow.share ? `${(flow.share * 100).toFixed(1)}%` : ""}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </section>
    </SankeyContext.Provider>
  );
}

export {
  type SankeyActive,
  type SankeyChartProps,
  useSankeyChart,
} from "./sankey-chart/context";
export type {
  PlacedLink as SankeyPlacedLink,
  PlacedNode as SankeyPlacedNode,
  SankeyLink,
  SankeyNode,
} from "./sankey-chart/model";
export { SankeyChartPlot, type SankeyChartPlotProps } from "./sankey-chart/plot";
export { SankeyChartTooltip, type SankeyChartTooltipProps } from "./sankey-chart/tooltip";

"use client";

import { useReducedMotion } from "motion/react";
import {
  type ComponentProps,
  createContext,
  useCallback,
  useContext,
  useEffect,
  useId,
  useLayoutEffect,
  useMemo,
  useRef,
  useState,
} from "react";
import { useHoverCapable } from "@/lib/hooks/use-hover-capable";
import { useRowCursor } from "@/lib/hooks/use-row-cursor";
import {
  cleanSankey,
  layoutSankey,
  type PlacedLink,
  type PlacedNode,
  SANKEY_COLORS,
  type SankeyLink,
  type SankeyNode,
} from "./model";

export interface SankeyChartProps extends ComponentProps<"section"> {
  nodes: readonly SankeyNode[];
  /** Weighted flows between node ids. Links that would close a loop are left out. */
  links: readonly SankeyLink[];
  label?: string;
  formatValue?: (value: number) => string;
  /** Palette for nodes without their own color, in node order. */
  colors?: readonly string[];
  /** Node bar width in px. */
  nodeWidth?: number;
  /** Space between nodes in a column, in px. */
  nodePadding?: number;
  /** Highlighted node or link id. Controlled. Link ids default to `source:target`. */
  activeId?: string | null;
  defaultActiveId?: string | null;
  onActiveChange?: (id: string | null) => void;
}

export type SankeyActive =
  | { type: "node"; node: PlacedNode }
  | { type: "link"; link: PlacedLink };

const defaultFormat = (value: number) =>
  value.toLocaleString("en-US", { maximumFractionDigits: 2 });

export function useSankeyModel({
  nodes,
  links,
  label = "Sankey chart",
  formatValue = defaultFormat,
  colors = SANKEY_COLORS,
  nodeWidth = 12,
  nodePadding = 16,
  activeId,
  defaultActiveId = null,
  onActiveChange,
}: SankeyChartProps) {
  const data = useMemo(() => cleanSankey(nodes, links), [nodes, links]);
  useEffect(() => {
    if (process.env.NODE_ENV === "production") return;
    const { invalid, cycle } = data.dropped;
    if (invalid.length || cycle.length)
      console.warn(
        `SankeyChart left out ${invalid.length} invalid and ${cycle.length} loop-closing link(s).`,
        { invalid, cycle },
      );
  }, [data]);

  const [size, setSize] = useState({ width: 640, height: 320 });
  // A resize re-lays the chart at once; only a data change springs. The
  // render that commits a new size carries `resized`, so its transitions are
  // instant; the follow-up render has the same targets and starts nothing.
  const sizeKey = `${size.width}x${size.height}`;
  const [settledSize, setSettledSize] = useState(sizeKey);
  const resized = settledSize !== sizeKey;
  useLayoutEffect(() => {
    if (resized) setSettledSize(sizeKey);
  }, [resized, sizeKey]);

  const layout = useMemo(
    () =>
      layoutSankey(data, {
        width: size.width,
        height: size.height,
        nodeWidth,
        nodePadding,
        colors,
      }),
    [data, size, nodeWidth, nodePadding, colors],
  );
  const cursor = useRowCursor(layout.nodes, "");

  const [internalId, setInternalId] = useState(defaultActiveId);
  const requestedId = activeId === undefined ? internalId : activeId;
  // Resolved during render by id: a node or link that left the data clears.
  const node = layout.nodes.find((n) => n.id === requestedId);
  const link = node ? undefined : layout.links.find((l) => l.id === requestedId);
  const active: SankeyActive | null = node
    ? { type: "node", node }
    : link
      ? { type: "link", link }
      : null;
  if (activeId === undefined && internalId !== null && !active) setInternalId(null);

  const latest = useRef({ activeId, requestedId, onActiveChange });
  useLayoutEffect(() => {
    latest.current = { activeId, requestedId, onActiveChange };
  });
  const setActive = useCallback((id: string | null) => {
    const current = latest.current;
    if (current.activeId === undefined) setInternalId(id);
    if (current.requestedId !== id) current.onActiveChange?.(id);
  }, []);

  const [tooltipOpen, setTooltipOpen] = useState(false);
  const plotRef = useRef<HTMLDivElement>(null);
  const buttons = useRef(new Map<string, HTMLButtonElement>());
  const registerButton = useCallback((id: string, element: HTMLButtonElement | null) => {
    if (element) buttons.current.set(id, element);
    else buttons.current.delete(id);
  }, []);

  // Every drawable flow for the exact-data table, with shares from the
  // cleaned data so the table does not wait on a measured size.
  const totals = new Map<string, number>();
  for (const l of data.links) {
    totals.set(l.source, (totals.get(l.source) ?? 0) + l.value);
  }
  const incoming = new Map<string, number>();
  for (const l of data.links) incoming.set(l.target, (incoming.get(l.target) ?? 0) + l.value);
  const labels = new Map(data.nodes.map((n) => [n.id, n.label]));
  const flows = data.links.map((l) => {
    const sourceValue = Math.max(totals.get(l.source) ?? 0, incoming.get(l.source) ?? 0);
    return {
      id: l.id ?? `${l.source}:${l.target}`,
      source: labels.get(l.source) ?? l.source,
      target: labels.get(l.target) ?? l.target,
      value: l.value,
      share: sourceValue ? l.value / sourceValue : 0,
    };
  });
  const empty = !data.links.length ? (nodes.length ? "No flows to show" : "No sankey data") : null;

  return {
    ...layout,
    flows,
    empty,
    resized,
    size,
    setSize,
    nodeWidth,
    label,
    formatValue,
    active,
    setActive,
    cursor,
    tooltipOpen,
    setTooltipOpen,
    tooltipId: useId(),
    gradientId: useId(),
    plotRef,
    buttons,
    registerButton,
    reduce: useReducedMotion() ?? false,
    canHover: useHoverCapable(),
  };
}

export type SankeyModel = ReturnType<typeof useSankeyModel>;
export const SankeyContext = createContext<SankeyModel | null>(null);

export function useSankeyChart() {
  const model = useContext(SankeyContext);
  if (!model) throw new Error("Sankey chart parts must be rendered inside SankeyChart.");
  return model;
}

/** Whether a node or link is part of what is highlighted. */
export function emphasis(active: SankeyActive | null) {
  const node = (n: PlacedNode) => {
    if (!active) return true;
    if (active.type === "link") return active.link.source === n || active.link.target === n;
    if (active.node === n) return true;
    return false;
  };
  const link = (l: PlacedLink) => {
    if (!active) return true;
    if (active.type === "link") return active.link === l;
    return l.source === active.node || l.target === active.node;
  };
  return { node, link };
}

export interface SankeyNode {
  id: string;
  label: string;
  /** Any CSS color. Defaults to the palette, in node order. */
  color?: string;
  description?: string;
}

export interface SankeyLink {
  /** Defaults to `${source}:${target}`. */
  id?: string;
  source: string;
  target: string;
  /** Positive value. Zero, negative and invalid values are left out. */
  value: number;
}

export type PlacedNode = Required<Pick<SankeyNode, "id" | "label" | "color">> & {
  description?: string;
  /** Larger of the node's incoming and outgoing totals. */
  value: number;
  inValue: number;
  outValue: number;
  /** Column, counted from the sources. */
  depth: number;
  x0: number;
  x1: number;
  y0: number;
  y1: number;
};

export type PlacedLink = {
  id: string;
  source: PlacedNode;
  target: PlacedNode;
  value: number;
  /** Share of the source node's value, from 0 to 1. */
  share: number;
  /** Band thickness. */
  width: number;
  /** Centerline ends: leaving the source and arriving at the target. */
  x0: number;
  y0: number;
  x1: number;
  y1: number;
  /** Centerline cubic path; stroke it at `width`. */
  path: string;
};

export const SANKEY_COLORS = [
  "#1d4ed8",
  "#7c3aed",
  "#0f766e",
  "#b45309",
  "#be123c",
  "#475569",
] as const;

/** Relaxation passes; more settles crossings further at a small cost. */
const ITERATIONS = 6;

export const linkId = (link: SankeyLink) => link.id ?? `${link.source}:${link.target}`;

export type SankeyData = {
  nodes: SankeyNode[];
  links: SankeyLink[];
  /** Links left out, by reason, for the development warning. */
  dropped: { invalid: SankeyLink[]; cycle: SankeyLink[] };
};

/**
 * Cleans consumer data once per change, not per resize:
 * - repeated node ids keep the first node;
 * - links to unknown nodes, self links and non-positive or non-finite values
 *   are dropped;
 * - unnamed links between the same pair are summed into one band, while a
 *   repeated explicit id keeps the first link;
 * - a link closing a cycle is dropped: one whose target is still on the
 *   depth-first path that reached its source, so the first-listed direction
 *   of a loop survives.
 */
export function cleanSankey(
  nodes: readonly SankeyNode[],
  links: readonly SankeyLink[],
): SankeyData {
  const byId = new Map<string, SankeyNode>();
  for (const node of nodes) if (!byId.has(node.id)) byId.set(node.id, node);
  const unique = [...byId.values()];

  const invalid: SankeyLink[] = [];
  const merged = new Map<string, SankeyLink>();
  for (const link of links) {
    const ok =
      byId.has(link.source) &&
      byId.has(link.target) &&
      link.source !== link.target &&
      Number.isFinite(link.value) &&
      link.value > 0;
    if (!ok) {
      invalid.push(link);
      continue;
    }
    const id = linkId(link);
    const existing = merged.get(id);
    if (!existing) merged.set(id, { ...link, id });
    else if (link.id === undefined && existing.source === link.source && existing.target === link.target)
      existing.value += link.value;
    else invalid.push(link);
  }
  const valid = [...merged.values()];

  const outgoing = new Map<string, SankeyLink[]>();
  for (const link of valid) {
    outgoing.set(link.source, [...(outgoing.get(link.source) ?? []), link]);
  }
  const state = new Map<string, "open" | "done">();
  const back = new Set<SankeyLink>();
  // Iterative depth-first search, so a very long chain cannot overflow the stack.
  for (const root of unique) {
    if (state.has(root.id)) continue;
    const stack: { id: string; next: number }[] = [{ id: root.id, next: 0 }];
    state.set(root.id, "open");
    while (stack.length) {
      const frame = stack[stack.length - 1];
      const edges = outgoing.get(frame.id) ?? [];
      if (frame.next >= edges.length) {
        state.set(frame.id, "done");
        stack.pop();
        continue;
      }
      const link = edges[frame.next++];
      const seen = state.get(link.target);
      if (seen === "open") back.add(link);
      else if (seen === undefined) {
        state.set(link.target, "open");
        stack.push({ id: link.target, next: 0 });
      }
    }
  }
  return {
    nodes: unique,
    links: valid.filter((link) => !back.has(link)),
    dropped: { invalid, cycle: valid.filter((link) => back.has(link)) },
  };
}

/**
 * Lays nodes out in columns by their longest path from a source, with sinks
 * pushed to the last column, then sizes them to their value and relaxes each
 * column toward its neighbours to shorten the links. Each column keeps the
 * order the nodes were given in, so order them to avoid crossings.
 */
export function layoutSankey(
  { nodes, links: kept }: SankeyData,
  {
    width,
    height,
    nodeWidth,
    nodePadding,
    colors,
  }: {
    width: number;
    height: number;
    nodeWidth: number;
    nodePadding: number;
    colors: readonly string[];
  },
) {
  const inValue = new Map<string, number>();
  const outValue = new Map<string, number>();
  for (const link of kept) {
    outValue.set(link.source, (outValue.get(link.source) ?? 0) + link.value);
    inValue.set(link.target, (inValue.get(link.target) ?? 0) + link.value);
  }

  // Longest-path depth over the acyclic links, in topological order.
  const indegree = new Map<string, number>();
  for (const link of kept) indegree.set(link.target, (indegree.get(link.target) ?? 0) + 1);
  const depth = new Map<string, number>();
  const queue = nodes.filter((node) => !indegree.get(node.id)).map((node) => node.id);
  for (const id of queue) depth.set(id, 0);
  for (let i = 0; i < queue.length; i++) {
    const id = queue[i];
    for (const link of kept) {
      if (link.source !== id) continue;
      depth.set(link.target, Math.max(depth.get(link.target) ?? 0, (depth.get(id) ?? 0) + 1));
      const left = (indegree.get(link.target) ?? 0) - 1;
      indegree.set(link.target, left);
      if (left === 0) queue.push(link.target);
    }
  }

  const linked = nodes.filter((node) => inValue.has(node.id) || outValue.has(node.id));
  if (!linked.length || width <= 0 || height <= 0) {
    return { nodes: [] as PlacedNode[], links: [] as PlacedLink[], columns: 0, step: 0 };
  }
  const maxDepth = Math.max(0, ...linked.map((node) => depth.get(node.id) ?? 0));
  const columns = maxDepth + 1;
  const step = columns > 1 ? (width - nodeWidth) / (columns - 1) : 0;

  const placed: PlacedNode[] = linked.map((node) => {
    const index = nodes.indexOf(node);
    const value = Math.max(inValue.get(node.id) ?? 0, outValue.get(node.id) ?? 0);
    // Sinks sit in the last column, so every outcome lines up on the right.
    const d = outValue.has(node.id) ? (depth.get(node.id) ?? 0) : maxDepth;
    return {
      id: node.id,
      label: node.label,
      description: node.description,
      color: node.color ?? colors[index % colors.length],
      value,
      inValue: inValue.get(node.id) ?? 0,
      outValue: outValue.get(node.id) ?? 0,
      depth: d,
      x0: d * step,
      x1: d * step + nodeWidth,
      y0: 0,
      y1: 0,
    };
  });
  const byId = new Map(placed.map((node) => [node.id, node]));
  const byColumn = Array.from({ length: columns }, (_, d) =>
    placed.filter((node) => node.depth === d),
  );

  // One scale for every column: the fullest column fills the height.
  const padding = Math.min(
    nodePadding,
    ...byColumn.map((column) =>
      column.length > 1 ? (height * 0.5) / (column.length - 1) : nodePadding,
    ),
  );
  const ky = Math.min(
    ...byColumn
      .filter((column) => column.length)
      .map(
        (column) =>
          (height - (column.length - 1) * padding) /
          column.reduce((sum, node) => sum + node.value, 0),
      ),
  );
  for (const column of byColumn) {
    let y = 0;
    for (const node of column) {
      node.y0 = y;
      node.y1 = y + node.value * ky;
      y = node.y1 + padding;
    }
    // Center columns shorter than the fullest one.
    const offset = (height - (y - padding)) / 2;
    for (const node of column) {
      node.y0 += offset;
      node.y1 += offset;
    }
  }

  // Columns keep the order nodes were given in, so the same data in a new
  // period morphs in place instead of swapping nodes past each other.
  // Relaxation only moves a node within the room its neighbours leave.
  const resolve = (column: PlacedNode[]) => {
    let y = 0;
    for (const node of column) {
      const dy = y - node.y0;
      if (dy > 0) {
        node.y0 += dy;
        node.y1 += dy;
      }
      y = node.y1 + padding;
    }
    y = height;
    for (let i = column.length - 1; i >= 0; i--) {
      const node = column[i];
      const dy = node.y1 - y;
      if (dy > 0) {
        node.y0 -= dy;
        node.y1 -= dy;
      }
      y = node.y0 - padding;
    }
  };
  const center = (node: PlacedNode) => (node.y0 + node.y1) / 2;
  const relax = (column: PlacedNode[], alpha: number, side: "source" | "target") => {
    for (const node of column) {
      let weighted = 0;
      let total = 0;
      for (const link of kept) {
        const self = side === "source" ? link.target : link.source;
        if (self !== node.id) continue;
        const other = byId.get(side === "source" ? link.source : link.target);
        if (!other) continue;
        weighted += center(other) * link.value;
        total += link.value;
      }
      if (!total) continue;
      const dy = (weighted / total - center(node)) * alpha;
      node.y0 += dy;
      node.y1 += dy;
    }
    resolve(column);
  };
  for (let i = 0; i < ITERATIONS; i++) {
    const alpha = 0.99 ** i;
    for (let d = 1; d < columns; d++) relax(byColumn[d], alpha, "source");
    for (let d = columns - 2; d >= 0; d--) relax(byColumn[d], alpha, "target");
  }

  // Stack each node's links in the order of the nodes they reach, so bands
  // leave and arrive without crossing at the node.
  const placedLinks = kept.map((link) => ({
    link,
    source: byId.get(link.source) as PlacedNode,
    target: byId.get(link.target) as PlacedNode,
    sy: 0,
    ty: 0,
  }));
  for (const node of placed) {
    let sy = node.y0;
    for (const entry of placedLinks
      .filter((entry) => entry.source === node)
      .sort((a, b) => a.target.y0 - b.target.y0)) {
      entry.sy = sy;
      sy += entry.link.value * ky;
    }
    let ty = node.y0;
    for (const entry of placedLinks
      .filter((entry) => entry.target === node)
      .sort((a, b) => a.source.y0 - b.source.y0)) {
      entry.ty = ty;
      ty += entry.link.value * ky;
    }
  }

  const result: PlacedLink[] = placedLinks.map(({ link, source, target, sy, ty }) => {
    const w = link.value * ky;
    const x0 = source.x1;
    const x1 = target.x0;
    const y0 = sy + w / 2;
    const y1 = ty + w / 2;
    const xm = (x0 + x1) / 2;
    return {
      id: linkId(link),
      source,
      target,
      value: link.value,
      share: source.value ? link.value / source.value : 0,
      width: w,
      x0,
      y0,
      x1,
      y1,
      path: `M ${x0} ${y0} C ${xm} ${y0} ${xm} ${y1} ${x1} ${y1}`,
    };
  });

  // Reading order for keyboard focus: column by column, top to bottom.
  const ordered = byColumn.flat();
  return { nodes: ordered, links: result, columns, step };
}

"use client";

/* Links draw in from left to right once the plot scrolls into view, a column
 * at a time, then nodes fade up at their full size. When the data changes,
 * links and nodes spring to their new geometry; a resize re-lays them at
 * once. Hovering or focusing a node lights it, its flows and the nodes they
 * reach; hovering a flow lights that flow and its two ends; everything else
 * fades. Reduced motion: the chart appears in place and changes without
 * easing. */

import { motion, useInView } from "motion/react";
import {
  type KeyboardEvent,
  type PointerEvent,
  useCallback,
  useEffect,
  useLayoutEffect,
  useRef,
  useState,
} from "react";
import { EASE_OUT, SPRING_LAYOUT } from "@/lib/ease";
import { cn } from "@/lib/utils";
import { emphasis, useSankeyChart } from "./context";
import type { PlacedNode } from "./model";

// Link draw-in: each column starts this long after the one before it.
const COLUMN_DELAY = 0.12;
const DRAW_DURATION = 0.7;
// Nodes shorter than this keep their name in the tooltip and table only.
const MIN_LABEL_HEIGHT = 12;
// Gap between a node bar and its label, in px.
const LABEL_GAP = 8;
// Average glyph width of the 12px label face, for fitting labels to a column.
const LABEL_CHAR_WIDTH = 6.6;
// Pointer target around each node bar, and its smallest height (WCAG 2.5.8).
const HIT_SLOP = 4;
const MIN_HIT = 24;
// Flows thinner than this still get this much hover target.
const MIN_LINK_HIT = 8;

export interface SankeyChartPlotProps {
  /** Sets the plot height; default 20rem. The layout follows its measured size. */
  className?: string;
  /** Show each node's value under its label when there is room. */
  showValues?: boolean;
}

/** Fits a label to `room` px, ending in an ellipsis; null when nothing fits. */
function fit(label: string, room: number) {
  const chars = Math.floor(room / LABEL_CHAR_WIDTH);
  if (chars >= label.length) return label;
  if (chars < 4) return null;
  return `${label.slice(0, chars - 1).trimEnd()}…`;
}

export function SankeyChartPlot({ className, showValues = true }: SankeyChartPlotProps) {
  const {
    nodes,
    links,
    columns,
    step,
    nodeWidth,
    size,
    setSize,
    resized,
    active,
    setActive,
    cursor,
    tooltipOpen,
    setTooltipOpen,
    tooltipId,
    gradientId,
    plotRef,
    buttons,
    registerButton,
    formatValue,
    label,
    empty,
    reduce,
    canHover,
  } = useSankeyChart();
  const inView = useInView(plotRef, { once: true, amount: 0.3 });
  const shown = reduce || inView;
  const [entered, setEntered] = useState(false);
  const focusedId = useRef<string | null>(null);
  // useId output can hold characters that break a url(#…) reference.
  const gradient = gradientId.replace(/[^\w-]/g, "");

  useLayoutEffect(() => {
    const plot = plotRef.current;
    if (!plot) return;
    const measure = () => {
      const { width, height } = plot.getBoundingClientRect();
      if (width > 0 && height > 0)
        setSize((s) => (s.width === width && s.height === height ? s : { width, height }));
    };
    measure();
    const observer = new ResizeObserver(measure);
    observer.observe(plot);
    return () => observer.disconnect();
  }, [plotRef, setSize]);

  // A focused node that leaves the data hands focus to the tab stop, so
  // keyboard users are not dropped to the top of the page.
  useLayoutEffect(() => {
    const id = focusedId.current;
    if (!id || nodes.some((node) => node.id === id)) return;
    focusedId.current = null;
    const lost = document.activeElement;
    if (lost === document.body || !plotRef.current?.contains(lost)) {
      const replacement = nodes[Math.max(cursor.activeIndex, 0)];
      if (replacement) buttons.current.get(replacement.id)?.focus();
      else plotRef.current?.focus();
    }
  }, [nodes, cursor.activeIndex, buttons, plotRef]);

  // A tap or click elsewhere dismisses what a tap opened; touch has no hover
  // to leave, so the tooltip would otherwise stay up.
  useEffect(() => {
    if (!tooltipOpen) return;
    const dismiss = (event: globalThis.PointerEvent) => {
      if (plotRef.current?.contains(event.target as Node)) return;
      setTooltipOpen(false);
      setActive(null);
    };
    document.addEventListener("pointerdown", dismiss);
    return () => document.removeEventListener("pointerdown", dismiss);
  }, [tooltipOpen, plotRef, setTooltipOpen, setActive]);

  // A node with any flow to or from the highlighted node lights up with it.
  const lit = emphasis(active);
  const neighbours = new Set<PlacedNode>();
  if (active?.type === "node") {
    for (const link of links) {
      if (link.source === active.node) neighbours.add(link.target);
      if (link.target === active.node) neighbours.add(link.source);
    }
  }
  const nodeLit = (node: PlacedNode) => lit.node(node) || neighbours.has(node);

  const tabStop = nodes[Math.max(cursor.activeIndex, 0)]?.id;
  const ref = useCallback(
    (id: string) => (element: HTMLButtonElement | null) => registerButton(id, element),
    [registerButton],
  );

  const onKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {
    const target = event.target;
    if (!(target instanceof HTMLButtonElement)) return;
    const current = nodes.find((node) => node.id === target.dataset.sankeyNode);
    if (!current) return;
    if (event.key === "Escape") {
      if (!tooltipOpen) return;
      event.preventDefault();
      setTooltipOpen(false);
      return;
    }
    const center = (node: PlacedNode) => (node.y0 + node.y1) / 2;
    const column = (depth: number) => nodes.filter((node) => node.depth === depth);
    let next: PlacedNode | undefined;
    if (event.key === "Home") next = nodes[0];
    else if (event.key === "End") next = nodes[nodes.length - 1];
    else if (event.key === "ArrowUp" || event.key === "ArrowDown") {
      const same = column(current.depth);
      next = same[same.indexOf(current) + (event.key === "ArrowUp" ? -1 : 1)];
    } else if (event.key === "ArrowLeft" || event.key === "ArrowRight") {
      // Nearest node by height in the next populated column that way.
      const dir = event.key === "ArrowLeft" ? -1 : 1;
      for (let d = current.depth + dir; d >= 0 && d < columns && !next; d += dir) {
        next = column(d).reduce<PlacedNode | undefined>(
          (best, node) =>
            !best ||
            Math.abs(center(node) - center(current)) < Math.abs(center(best) - center(current))
              ? node
              : best,
          undefined,
        );
      }
    } else return;
    event.preventDefault();
    setTooltipOpen(true);
    if (next && next !== current) buttons.current.get(next.id)?.focus();
    else setActive(current.id);
  };

  // Enter alone can be skipped when the pointer jumps straight from one part
  // to another, so moves claim the highlight too; same-value updates bail out.
  // A touch only claims it while pressed, so a scroll does not leave it lit.
  const point = (event: PointerEvent<Element>, id: string) => {
    if (event.pointerType === "touch" ? event.buttons !== 1 : !canHover) return;
    setActive(id);
    setTooltipOpen(true);
  };
  const press = (id: string) => {
    setActive(id);
    setTooltipOpen(true);
  };

  const geometry = reduce || resized ? { duration: 0 } : SPRING_LAYOUT;
  const linkOpacity = (lightUp: boolean) => (active ? (lightUp ? 0.6 : 0.08) : 0.32);
  // Room for a label between its node and the next column's nodes.
  const labelRoom = columns > 1 ? step - nodeWidth - LABEL_GAP * 2 : size.width;
  // Thin flows' hit paths go on top, so a thick neighbour cannot bury them.
  const hitOrder = [...links].sort((a, b) => b.width - a.width);

  return (
    // Scrolls sideways under 32rem. The padding, cancelled by the margin,
    // holds the node hit areas and focus rings that reach past the plot, so
    // the scroller never clips them or scrolls vertically.
    <div className="-m-2 overflow-x-auto overflow-y-hidden p-2">
      {/* biome-ignore lint/a11y/useSemanticElements: This group is a chart, not a collection of form fields. */}
      <div
        ref={plotRef}
        role="group"
        aria-label={`${label} nodes`}
        tabIndex={-1}
        data-slot="sankey-chart-plot"
        className={cn("relative h-80 w-full min-w-[32rem] outline-none", className)}
        onKeyDown={onKeyDown}
        onFocus={(event) => {
          if (event.target instanceof HTMLButtonElement)
            focusedId.current = event.target.dataset.sankeyNode ?? null;
        }}
        onBlur={(event) => {
          if (event.currentTarget.contains(event.relatedTarget)) return;
          focusedId.current = null;
          setTooltipOpen(false);
          setActive(null);
        }}
        onPointerLeave={(event) => {
          // A lifted finger leaves too; touch dismisses by tapping elsewhere.
          if (event.pointerType === "touch") return;
          setTooltipOpen(false);
          setActive(null);
        }}
      >
        <svg
          width={size.width}
          height={size.height}
          viewBox={`0 0 ${size.width} ${size.height}`}
          aria-hidden="true"
          className="absolute inset-0 overflow-visible"
        >
          <defs>
            {links.map((link, i) => (
              <linearGradient
                key={link.id}
                id={`${gradient}-${i}`}
                gradientUnits="userSpaceOnUse"
                x1={link.x0}
                x2={link.x1}
              >
                <stop offset="0%" stopColor={link.source.color} />
                <stop offset="100%" stopColor={link.target.color} />
              </linearGradient>
            ))}
          </defs>
          <g fill="none" pointerEvents="none">
            {links.map((link, i) => (
              <motion.path
                key={link.id}
                stroke={`url(#${gradient}-${i})`}
                strokeWidth={Math.max(1, link.width)}
                initial={reduce ? false : { d: link.path, pathLength: 0, opacity: 0.32 }}
                animate={
                  shown
                    ? { d: link.path, pathLength: 1, opacity: linkOpacity(lit.link(link)) }
                    : undefined
                }
                transition={
                  reduce
                    ? { duration: 0 }
                    : {
                        d: geometry,
                        pathLength: {
                          duration: DRAW_DURATION,
                          ease: EASE_OUT,
                          delay: entered ? 0 : link.source.depth * COLUMN_DELAY,
                        },
                        opacity: { duration: 0.16, ease: EASE_OUT },
                      }
                }
                onAnimationComplete={() => setEntered(true)}
              />
            ))}
          </g>
          {/* Static hit paths own hover: never animated, at least MIN_LINK_HIT
              wide, and on the final geometry so the target never drifts. */}
          <g fill="none" stroke="transparent">
            {hitOrder.map((link) => (
              <path
                key={link.id}
                d={link.path}
                strokeWidth={Math.max(MIN_LINK_HIT, link.width)}
                pointerEvents={shown ? "stroke" : "none"}
                className="cursor-pointer"
                onPointerEnter={(event) => point(event, link.id)}
                onPointerMove={(event) => point(event, link.id)}
                onPointerDown={() => press(link.id)}
              />
            ))}
          </g>
          <g pointerEvents="none">
            {nodes.map((node) => (
              <motion.rect
                key={node.id}
                x={node.x0}
                width={node.x1 - node.x0}
                rx={2}
                fill={node.color}
                initial={reduce ? false : { y: node.y0, height: node.y1 - node.y0, opacity: 0 }}
                animate={
                  shown
                    ? {
                        y: node.y0,
                        height: Math.max(1, node.y1 - node.y0),
                        opacity: nodeLit(node) ? 1 : 0.3,
                      }
                    : undefined
                }
                transition={
                  reduce
                    ? { duration: 0 }
                    : {
                        y: geometry,
                        height: geometry,
                        opacity: {
                          duration: entered ? 0.16 : 0.3,
                          ease: EASE_OUT,
                          delay: entered ? 0 : 0.1 + node.depth * COLUMN_DELAY,
                        },
                      }
                }
              />
            ))}
          </g>
          <g className="text-xs" pointerEvents="none">
            {nodes.map((node) => {
              const h = node.y1 - node.y0;
              if (h < MIN_LABEL_HEIGHT) return null;
              const text = fit(node.label, labelRoom);
              if (!text) return null;
              const last = columns > 1 && node.depth === columns - 1;
              const x = last ? node.x0 - LABEL_GAP : node.x1 + LABEL_GAP;
              const value = formatValue(node.value);
              const twoLines =
                showValues &&
                h >= MIN_LABEL_HEIGHT * 2.4 &&
                value.length * LABEL_CHAR_WIDTH <= labelRoom;
              return (
                <motion.text
                  key={node.id}
                  x={x}
                  textAnchor={last ? "end" : "start"}
                  dominantBaseline="middle"
                  // A halo in the page colour keeps labels readable over the bands.
                  className="fill-foreground stroke-background [paint-order:stroke]"
                  strokeWidth={3}
                  strokeLinejoin="round"
                  initial={reduce ? false : { y: (node.y0 + node.y1) / 2, opacity: 0 }}
                  animate={
                    shown
                      ? { y: (node.y0 + node.y1) / 2, opacity: nodeLit(node) ? 1 : 0.35 }
                      : undefined
                  }
                  transition={
                    reduce
                      ? { duration: 0 }
                      : {
                          y: geometry,
                          opacity: {
                            duration: 0.2,
                            ease: EASE_OUT,
                            delay: entered ? 0 : 0.2 + node.depth * COLUMN_DELAY,
                          },
                        }
                  }
                >
                  <tspan x={x} dy={twoLines ? "-0.6em" : 0} className="font-medium">
                    {text}
                  </tspan>
                  {twoLines ? (
                    <tspan x={x} dy="1.2em" className="fill-muted-foreground tabular-nums">
                      {value}
                    </tspan>
                  ) : null}
                </motion.text>
              );
            })}
          </g>
        </svg>
        {nodes.map((node) => {
          const selected = tooltipOpen && active?.type === "node" && active.node === node;
          const h = Math.max(1, node.y1 - node.y0);
          const hit = Math.max(MIN_HIT, h + HIT_SLOP * 2);
          return (
            <button
              key={node.id}
              ref={ref(node.id)}
              type="button"
              data-sankey-node={node.id}
              tabIndex={node.id === tabStop ? 0 : -1}
              aria-label={[
                node.label,
                formatValue(node.value),
                node.inValue && node.outValue
                  ? `in ${formatValue(node.inValue)}, out ${formatValue(node.outValue)}`
                  : null,
                node.description,
              ]
                .filter(Boolean)
                .join(". ")}
              aria-describedby={selected ? tooltipId : undefined}
              className="absolute rounded-sm outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background"
              style={{
                left: node.x0 - HIT_SLOP,
                // Centered on the bar, so a sliver of a node still gets a full target.
                top: node.y0 + h / 2 - hit / 2,
                width: node.x1 - node.x0 + HIT_SLOP * 2,
                height: hit,
                pointerEvents: shown ? "auto" : "none",
              }}
              onPointerEnter={(event) => point(event, node.id)}
              onPointerMove={(event) => point(event, node.id)}
              onPointerDown={() => press(node.id)}
              onFocus={() => {
                cursor.moveTo(node.id);
                setActive(node.id);
                setTooltipOpen(true);
              }}
            />
          );
        })}
        {empty ? (
          <p className="flex h-full items-center justify-center text-sm text-muted-foreground">
            {empty}
          </p>
        ) : null}
      </div>
    </div>
  );
}