Reroute

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

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

"use client";

import * as React from "react";

import { cn } from "@/lib/utils";

/**
 * Keep:
 * - Every moving part animates by transform and opacity only, through WAAPI and inline styles the
 *   engine writes; React draws the first layout in `cqw` and never re-renders per frame.
 * - A turn's keyframes are sampled round the rim, and a tile crossing the far side gets two hidden
 *   frames at one offset, so nothing sweeps back across the wheel.
 * - The JS `bezier` curves match the WAAPI easings, so a new pick takes the wheel up mid-flight
 *   from exactly where it is.
 * - The cable lifts before the wheel turns and lowers `drop.lead` before the turn ends, following
 *   the new option in; comets run only while it's seated, on screen and on a visible tab.
 * - Under reduced motion there's no turning, cable or comets: the wheel jumps and the name
 *   cross-fades. The options stay a `radiogroup` whose live option holds the only tab stop.
 */
const TIMING = {
  /** How fast a reroute plays, as a multiple of the pace below (the `speed` prop). */
  speed: 1,
  // At the default pace; `speed` divides everything from here down to `dim`.
  /** The wheel turning, in ms: a one-step turn, more per extra step, and the cap. */
  turn: { base: 480, per: 120, max: 840 },
  /** A let-go wheel coming to rest, in ms. */
  settle: 380,
  /** After the cable starts to lift, before the wheel turns, in ms. */
  turnLag: 40,
  /** Before the turn ends, when the name rises in, in ms. */
  labelLead: 40,
  /** The cable pulling up into the hub, and the socket dimming with it, in ms. */
  lift: 150,
  /**
   * The cable lowering back in: ms it takes; ms before the turn ends that it starts, so it follows
   * the option in; share of the way through when it touches down.
   */
  drop: { duration: 440, lead: 300, seat: 0.82 },
  /** Once seated, in ms: the socket ring settling, and a pulse ringing out. */
  click: 320,
  pulse: 460,
  /** A failed request running back up, in ms, and ms before the wheel moves. */
  bounce: { duration: 260, lead: 200 },
  /** The socket flashing on a failure, in ms. */
  fail: 360,
  /** The name going out and coming in, in ms. */
  label: { out: 120, in: 240 },
  /** The name dimming when every option is down, in ms. */
  dim: 200,
  // Not paced.
  /** The name cross-fading under reduced motion, in ms. */
  crossFade: 160,
  /** Ms each comet takes to run down the cable (the `flowDuration` prop). */
  flowDuration: 1200,
  /** Between turns with `autoplay`, in ms. */
  autoplay: 2800,
  /** Each way of the hub's glow breathing, in ms, and its curve. */
  glow: { duration: 1800, easing: "ease-in-out" },
  /** Drag: ms of momentum on let-go; ms of motion read for speed. */
  drag: { carry: 140, window: 90 },
  /** After a drag, before a controlled wheel that didn't take the pick goes back, in ms. */
  revert: 60,
  /** Curves, as CSS easings. */
  inOut: "cubic-bezier(0.65, 0, 0.35, 1)", // turning: picks up and puts down with weight
  easeOut: "cubic-bezier(0.23, 1, 0.32, 1)", // settling, lifting, labels
  lower: "cubic-bezier(0.65, 0, 0.35, 1)", // the cable lowering: picks up slowly and lands soft, no snap
  /** `inOut` and `easeOut` as control points, to pick a turn up mid-flight. Keep them in step. */
  inOutCurve: [0.65, 0, 0.35, 1],
  easeOutCurve: [0.23, 1, 0.32, 1],
  /** The socket and the name fading out, as a CSS easing. */
  fade: "ease-out",
  /** The comets fading out and in, as a Tailwind class. */
  flowFade: "duration-300",
  /** A tile's border on hover, as a Tailwind class. */
  hover: "duration-150",
  /** A tile's icon dimming and its down dot showing, as a Tailwind class. */
  down: "duration-200",
} as const;

/* ─────────────────────────────────────────────────────────
 * REROUTE STORYBOARD
 *
 *  rest      your hub tile sits at the top, lit from behind. A cable
 *            runs down from it into a socket at the top of a wheel,
 *            and the live option sits in the socket. The others ride
 *            the rim either side, smaller (0.86, 0.72) and fainter
 *            the further round they are, and the rest wait out of
 *            sight past the edges (opacity 0.8, 0.5, then gone). Its name and detail sit under
 *            the socket
 *  flow      requests run down the cable as small comets, three at a
 *            time, 1.2s each, into the live option. They stop off
 *            screen and on a hidden tab
 *  pick      press an option (or arrow to it) and the cable lifts
 *            up into the hub (45% of its length, 150ms), the wheel turns
 *            the short way, every option gliding round the rim to
 *            its new place (480ms, +120ms a step, at most 840ms,
 *            in-out). 300ms before the turn ends the cable starts to
 *            lower back down, following the new one in (440ms, in-out:
 *            it picks up slowly and lands soft); once it's seated the socket ring
 *            settles from 1.08, a pulse rings out and the comets
 *            fade back in. The name under it rises in 6px
 *  down      an option in `down` dims and wears a dot. If it was
 *            live, its request bounces back up the cable and the
 *            socket flashes, then the wheel turns forward to the
 *            next healthy option, as above, ~200ms later
 *  recover   when the option you picked comes back, the wheel turns
 *            back to it. With every option down the cable waits up in
 *            the hub and the name dims to 0.4; the first one back gets
 *            the cable lowered into it
 *  drag      drag sideways on the wheel to spin it by hand, one step
 *            per ~arc gap; let go and it carries on with your speed
 *            for a moment, then settles on the nearest healthy
 *            option (380ms ease-out). A flick spins it further
 *  autoplay  turns to the next healthy option every 2.8s; it pauses
 *            under the pointer, while focused and off screen
 *  keys      the options are a radio group: Tab lands on the live
 *            one, ←/→ (or ↑/↓) pick the previous or next healthy one
 *  touch     a tap picks; a sideways swipe spins; vertical swipes
 *            scroll the page
 *  resize    the wheel is measured from the box: its radius is 0.72×
 *            the width, so the rim curves the same at any size
 *  reduced   no turning, no cable, no comets: the wheel jumps to the
 *            new option and the name cross-fades (160ms). Dragging
 *            still spins it, without the carry
 * ───────────────────────────────────────────────────────── */

const WHEEL = {
  radius: 0.72, // the wheel's radius, as a share of the box width
  step: 18.5, // degrees between options round the rim: neighbours at ±0.23 of the width, the next ones fading at ±0.43
  shrink: 0.14, // scale lost per step away from the socket
  shown: 2.6, // steps from the socket before an option is fully out of sight
  lift: { by: 45 }, // % of its length the cable pulls up into the hub
  click: { from: 1.08, pulse: 1.28 }, // once seated: the socket ring settles from 1.08 and a pulse rings out to 1.28
  label: { rise: 6 }, // px
  flow: { count: 3 }, // comets on the cable
  drag: { slop: 6 }, // px before a press becomes a drag
} as const;

const REDUCED = "(prefers-reduced-motion: reduce)";

/** Evaluates a CSS cubic-bezier, so a turn can be picked up mid-flight from exactly where it is. */
function bezier(x1: number, y1: number, x2: number, y2: number) {
  const cx = 3 * x1;
  const bx = 3 * (x2 - x1) - cx;
  const ax = 1 - cx - bx;
  const cy = 3 * y1;
  const by = 3 * (y2 - y1) - cy;
  const ay = 1 - cy - by;
  const sx = (t: number) => ((ax * t + bx) * t + cx) * t;
  const dx = (t: number) => (3 * ax * t + 2 * bx) * t + cx;
  return (x: number) => {
    if (x <= 0) return 0;
    if (x >= 1) return 1;
    let t = x;
    for (let i = 0; i < 8; i++) {
      const e = sx(t) - x;
      if (Math.abs(e) < 1e-5) break;
      const d = dx(t);
      if (Math.abs(d) < 1e-6) break;
      t = Math.min(1, Math.max(0, t - e / d));
    }
    return ((ay * t + by) * t + cy) * t;
  };
}

const IN_OUT = bezier(...TIMING.inOutCurve);
const EASE_OUT = bezier(...TIMING.easeOutCurve);

const mod = (n: number, m: number) => ((n % m) + m) % m;

/** Where an option sits for a slot (0 is the socket), on a wheel of `count`. */
function pose(slot: number, count: number) {
  const a = (slot * WHEEL.step * Math.PI) / 180;
  const d = Math.abs(slot);
  const near = d <= 1 ? 1 - 0.2 * d : d <= 2 ? 0.8 - 0.3 * (d - 1) : Math.max(0, 0.5 * (1 - (d - 2) / (WHEEL.shown - 2)));
  // On a short wheel the wrap point is close; fade out before it so nothing pops.
  const wrap = Math.min(1, Math.max(0, (count / 2 - d) / 0.5));
  return {
    x: Math.sin(a) * WHEEL.radius, // share of the width
    y: (1 - Math.cos(a)) * WHEEL.radius,
    scale: 1 - WHEEL.shrink * Math.min(d, 3),
    opacity: count === 1 ? 1 : near * wrap,
  };
}

/** Wraps a slot into [-count/2, count/2). */
const wrapSlot = (s: number, count: number) => mod(s + count / 2, count) - count / 2;

const subscribeReduced = (onChange: () => void) => {
  const query = window.matchMedia(REDUCED);
  query.addEventListener("change", onChange);
  return () => query.removeEventListener("change", onChange);
};

/** prefers-reduced-motion, false on the server and in the hydration render. */
function usePrefersReducedMotion() {
  return React.useSyncExternalStore(
    subscribeReduced,
    () => window.matchMedia(REDUCED).matches,
    () => false,
  );
}

export interface RerouteItem {
  /** Stable key for the option. */
  id: string;
  /** Its name, shown under the socket while it's live and announced to screen readers. */
  name: string;
  /** Its mark: an inline SVG or an `<img>`, centered on the tile. */
  icon: React.ReactNode;
  /** A short line under the name while it's live, such as a latency or a region. */
  detail?: string;
}

/** Why the live option changed: a pick (press, keys, drag), autoplay, an outage, or the picked option coming back. */
export type RerouteReason = "pick" | "autoplay" | "failover" | "recover";

export interface RerouteProps
  extends Omit<React.HTMLAttributes<HTMLDivElement>, "defaultValue" | "onChange"> {
  /** The options round the wheel, in order. The one after the live option sits to its right. */
  items: RerouteItem[];
  /** What sits in the hub tile at the top: your mark, drawn in white on the accent. */
  hub?: React.ReactNode;
  /** The option you want routed to, when you control it. If it's down, the wheel sits on the next healthy one until it's back. */
  value?: string;
  /** The option routed to first, when you don't control it. Defaults to the first item. */
  defaultValue?: string;
  /** Called when the visitor picks an option, or autoplay moves on. */
  onValueChange?: (id: string) => void;
  /** Ids of options that are down. They dim and are skipped; if the live one goes down, the wheel reroutes to the next healthy option. */
  down?: string[];
  /** Called whenever the live option changes, with why. `null` when every option is down. */
  onRoute?: (id: string | null, reason: RerouteReason) => void;
  /** Turn to the next healthy option on a timer: `true` for every 2.8s, or a number of ms. Defaults to false. */
  autoplay?: boolean | number;
  /** Run requests down the cable as little comets. Defaults to true. */
  flow?: boolean;
  /** Ms each comet takes to run down the cable. Defaults to 1200. */
  flowDuration?: number;
  /** How fast a reroute plays, as a multiple of the default pace: the cable lifting and dropping back in, the wheel turning, the click, a bounce and the name changing. `2` is twice as fast. Defaults to 1. */
  speed?: number;
  /** Accessible name for the group of options. Defaults to "Route". */
  label?: string;
}

/* ── Glyph ────────────────────────────────────────────────── */
// The hub's default mark: a request splitting two ways.

function HubGlyph() {
  return (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden>
      <path d="M12 4v6" />
      <path d="M12 10c0 4-6 3-6 8M12 10c0 4 6 3 6 8" />
      <circle cx="12" cy="4" r="1.6" fill="currentColor" stroke="none" />
    </svg>
  );
}

/* ── Reroute ──────────────────────────────────────────────── */

export function Reroute({
  items,
  hub,
  value,
  defaultValue,
  onValueChange,
  down,
  onRoute,
  autoplay = false,
  flow = true,
  flowDuration = TIMING.flowDuration,
  speed = TIMING.speed,
  label = "Route",
  className,
  onKeyDown,
  ...props
}: RerouteProps) {
  const reduced = usePrefersReducedMotion();
  const count = items.length;
  const itemKey = items.map((i) => i.id).join("\u0000");
  const downKey = (down ?? []).join("\u0000");
  const downSet = React.useMemo(() => new Set(downKey ? downKey.split("\u0000") : []), [downKey]);

  const [inner, setInner] = React.useState(() => defaultValue ?? items[0]?.id);
  const preferred = value ?? inner;
  const preferredIndex = Math.max(0, items.findIndex((i) => i.id === preferred));

  // The live option: the preferred one, or the next healthy one round the wheel.
  let liveIndex = -1;
  for (let k = 0; k < count; k++) {
    const i = (preferredIndex + k) % count;
    if (!downSet.has(items[i].id)) {
      liveIndex = i;
      break;
    }
  }
  const liveId = liveIndex >= 0 ? items[liveIndex].id : null;

  // The first render places the wheel in CSS (cqw), so the server draws the rest layout.
  const [initialLive] = React.useState(() => Math.max(0, liveIndex));
  const [shown, setShown] = React.useState(() => Math.max(0, liveIndex));
  const [message, setMessage] = React.useState("");
  const [inView, setInView] = React.useState(false);
  const [held, setHeld] = React.useState(false); // pointer over it or focus inside: autoplay waits

  const rootRef = React.useRef<HTMLDivElement>(null);
  const wheelRef = React.useRef<HTMLDivElement>(null);
  const cableRef = React.useRef<HTMLDivElement>(null);
  const flowRef = React.useRef<HTMLDivElement>(null);
  const bounceRef = React.useRef<HTMLSpanElement>(null);
  const socketRef = React.useRef<HTMLSpanElement>(null);
  const pulseRef = React.useRef<HTMLSpanElement>(null);
  const failRef = React.useRef<HTMLSpanElement>(null);
  const glowRef = React.useRef<HTMLSpanElement>(null);
  const labelRef = React.useRef<HTMLDivElement>(null);
  const tileEls = React.useRef(new Map<string, HTMLButtonElement>());
  const engine = React.useRef<{
    route: (index: number, reason: RerouteReason) => void;
    sleep: (asleep: boolean) => void;
    reflow: () => void;
  } | null>(null);

  const latest = React.useRef<{
    items: RerouteItem[];
    downSet: Set<string>;
    liveIndex: number;
    flow: boolean;
    flowMs: number;
    speed: number;
    pick: (id: string, reason?: RerouteReason) => void;
  }>({ items, downSet, liveIndex, flow, flowMs: flowDuration, speed, pick: () => {} });
  const pendingReason = React.useRef<RerouteReason | null>(null);
  const focusAfter = React.useRef<string | null>(null);

  const pick = React.useCallback(
    (id: string, reason: RerouteReason = "pick") => {
      pendingReason.current = reason;
      if (value === undefined) setInner(id);
      onValueChange?.(id);
    },
    [value, onValueChange],
  );

  React.useLayoutEffect(() => {
    latest.current = {
      items,
      downSet,
      liveIndex,
      flow,
      flowMs: Math.max(100, flowDuration),
      speed: Math.max(0.05, speed),
      pick,
    };
  });

  /* The engine: owns every transform on the wheel, the cable and the socket. */
  React.useEffect(() => {
    const root = rootRef.current;
    const wheel = wheelRef.current;
    const cable = cableRef.current;
    const flowEl = flowRef.current;
    const bounce = bounceRef.current;
    const socket = socketRef.current;
    const pulse = pulseRef.current;
    const fail = failRef.current;
    const glow = glowRef.current;
    const labelEl = labelRef.current;
    if (!root || !wheel || !cable || !flowEl || !bounce || !socket || !pulse || !fail || !glow || !labelEl) return;
    const ids = itemKey ? itemKey.split("\u0000") : [];
    const n = ids.length;
    if (!n) return;

    const start = Math.max(0, latest.current.liveIndex);
    let width = root.clientWidth;
    let measured = false;
    let offset = start; // steps the wheel has turned; option k sits at slot k - offset
    let goalOffset = start; // where the current turn ends
    let turn: { from: number; to: number; start: number; duration: number; ease: (x: number) => number } | null = null;
    let plugged = true;
    let seated = true; // the cable has landed: comets may run
    let asleep = true;
    let target = start; // the option the wheel is heading for
    let lastAnnounced = start;
    const timers = new Set<number>();
    const tileAnims = new Map<string, Animation>();
    let flowAnims: Animation[] = [];
    let glowAnim: Animation | null = null;
    let cableAnim: Animation | null = null;

    const later = (fn: () => void, ms: number) => {
      const id = window.setTimeout(() => {
        timers.delete(id);
        fn();
      }, ms);
      timers.add(id);
    };
    /** A reroute's ms at the current `speed`. */
    const paced = (ms: number) => ms / latest.current.speed;
    const clearLater = () => {
      timers.forEach((id) => window.clearTimeout(id));
      timers.clear();
    };

    const transformFor = (p: ReturnType<typeof pose>) =>
      `translate(${(p.x * width).toFixed(2)}px, ${(p.y * width).toFixed(2)}px) scale(${p.scale.toFixed(4)})`;

    const now = () => performance.now();
    const current = () => {
      if (!turn) return offset;
      const p = (now() - turn.start) / turn.duration;
      if (p >= 1) {
        // Finished, even if the timer that clears it was cancelled.
        offset = turn.to;
        turn = null;
        return offset;
      }
      return turn.from + (turn.to - turn.from) * turn.ease(p);
    };
    /** A turn or a queued step is still under way. */
    const busy = () => {
      current(); // clears a turn that has run out
      return timers.size > 0 || turn !== null;
    };

    /** Puts every option at its place for `at`, with no animation. */
    const place = (at: number) => {
      ids.forEach((id, k) => {
        const el = tileEls.current.get(id);
        if (!el) return;
        tileAnims.get(id)?.cancel();
        tileAnims.delete(id);
        const s = wrapSlot(k - at, n);
        const p = pose(s, n);
        el.style.transform = transformFor(p);
        el.style.opacity = String(p.opacity);
        el.style.zIndex = String(10 - Math.round(Math.abs(s)));
        el.style.pointerEvents = p.opacity < 0.05 ? "none" : "";
      });
    };

    const freeze = () => {
      const at = current();
      turn = null;
      offset = at;
      place(at);
    };

    /** Glides the wheel from where it is to `to`, round the rim. */
    const turnTo = (to: number, duration: number, easing: string, ease: (x: number) => number) => {
      const from = current();
      freeze();
      const delta = to - from;
      if (Math.abs(delta) < 1e-4) {
        offset = to;
        place(to);
        return;
      }
      turn = { from, to, start: now(), duration, ease };
      const samples = Math.max(2, Math.ceil(Math.abs(delta) * 10));
      ids.forEach((id, k) => {
        const el = tileEls.current.get(id);
        if (!el) return;
        const frames: Keyframe[] = [];
        let prev: number | null = null;
        let seen = false;
        for (let j = 0; j <= samples; j++) {
          const u = j / samples;
          const raw = k - (from + delta * u);
          const s = wrapSlot(raw, n);
          // Crossing the far side of the wheel: two frames at the same offset, both out of sight.
          if (prev !== null && Math.abs(s - prev) > n / 2) {
            const edge = prev > 0 ? n / 2 - 1e-3 : -n / 2;
            const back = prev > 0 ? -n / 2 : n / 2 - 1e-3;
            const pu = (j - 0.5) / samples;
            frames.push({ offset: pu, transform: transformFor(pose(edge, n)), opacity: 0 });
            frames.push({ offset: pu, transform: transformFor(pose(back, n)), opacity: 0 });
          }
          const p = pose(s, n);
          if (p.opacity > 0.01) seen = true;
          frames.push({ offset: u, transform: transformFor(p), opacity: p.opacity });
          prev = s;
        }
        const end = pose(wrapSlot(k - to, n), n);
        el.style.transform = transformFor(end);
        el.style.opacity = String(end.opacity);
        el.style.zIndex = String(10 - Math.round(Math.abs(wrapSlot(k - to, n))));
        el.style.pointerEvents = end.opacity < 0.05 ? "none" : "";
        if (!seen) return; // out of sight the whole way: just move it
        const anim = el.animate(frames, { duration, easing });
        tileAnims.set(id, anim);
        anim.onfinish = () => {
          if (tileAnims.get(id) === anim) {
            anim.cancel();
            tileAnims.delete(id);
          }
        };
      });
      offset = to;
      later(() => {
        if (turn && turn.to === to) turn = null;
      }, duration);
    };

    /* Cable, comets, socket */

    /** How far the cable is pulled up right now, in % of its length (0 is plugged in). */
    const cableLift = () => {
      const m = getComputedStyle(cable).transform;
      const v = m && m !== "none" ? m.match(/matrix\(([^)]+)\)/) : null;
      const ty = v ? Number(v[1].split(",")[5]) : 0;
      return cable.clientHeight ? (ty / cable.clientHeight) * 100 : 0;
    };

    const animateCable = (frames: number[], offsets: number[] | null, duration: number, easing: string) => {
      const from = cableLift();
      cableAnim?.cancel();
      const kf: Keyframe[] = [
        { transform: `translateY(${from}%)` },
        ...frames.map((f, i) => ({ transform: `translateY(${f}%)`, offset: offsets?.[i] })),
      ];
      kf[kf.length - 1].offset = 1;
      cable.style.transform = `translateY(${frames[frames.length - 1]}%)`;
      cableAnim = cable.animate(kf, { duration, easing });
    };

    let flowMs = latest.current.flowMs;
    const startFlow = () => {
      flowAnims.forEach((a) => a.cancel());
      flowAnims = [];
      flowMs = latest.current.flowMs;
      const length = cable.clientHeight;
      Array.from(flowEl.children).forEach((child, i) => {
        const anim = (child as HTMLElement).animate(
          [
            { transform: "translateY(-12px)", opacity: 0 },
            { opacity: 1, offset: 0.18 },
            { opacity: 1, offset: 0.8 },
            { transform: `translateY(${length - 12}px)`, opacity: 0 },
          ],
          { duration: flowMs, iterations: Infinity, delay: -(i * flowMs) / WHEEL.flow.count },
        );
        flowAnims.push(anim);
      });
      syncFlow();
    };

    const syncFlow = () => {
      const on = plugged && seated && !asleep && latest.current.flow && !reduced && latest.current.liveIndex >= 0;
      flowAnims.forEach((a) => (on ? a.play() : a.pause()));
      flowEl.style.opacity = on ? "1" : "0";
      if (glowAnim) {
        if (asleep || reduced) glowAnim.pause();
        else glowAnim.play();
      }
    };

    const unplug = () => {
      if (!plugged) return;
      plugged = false;
      seated = false;
      syncFlow();
      if (reduced) return;
      animateCable([-WHEEL.lift.by], null, paced(TIMING.lift), TIMING.easeOut);
      socket.animate([{ opacity: 1 }, { opacity: 0.25 }], { duration: paced(TIMING.lift), easing: TIMING.fade, fill: "forwards" });
    };

    /** The cable lands: the socket clicks and the comets come back. */
    const seat = () => {
      seated = true;
      socket.getAnimations().forEach((a) => a.cancel());
      socket.animate(
        [
          { transform: `scale(${WHEEL.click.from})`, opacity: 0.4 },
          { transform: "scale(1)", opacity: 1 },
        ],
        { duration: paced(TIMING.click), easing: TIMING.easeOut },
      );
      pulse.animate(
        [
          { transform: "scale(1)", opacity: 0.5 },
          { transform: `scale(${WHEEL.click.pulse})`, opacity: 0 },
        ],
        { duration: paced(TIMING.pulse), easing: TIMING.easeOut },
      );
      syncFlow();
    };

    /** Lowers the cable back into the socket, from wherever it is. */
    const plug = () => {
      if (plugged) return;
      plugged = true;
      if (reduced) {
        seated = true;
        syncFlow();
        return;
      }
      const drop = paced(TIMING.drop.duration);
      animateCable([0], null, drop, TIMING.lower);
      // The in-out curve has covered ~98% of the way by 82%: seat it there, as it touches down.
      later(seat, Math.round(drop * TIMING.drop.seat));
    };

    const labelOut = () => {
      labelEl.getAnimations().forEach((a) => a.cancel());
      labelEl.style.opacity = "0";
      labelEl.animate([{ opacity: 1 }, { opacity: 0 }], { duration: paced(TIMING.label.out), easing: TIMING.fade });
    };
    const labelIn = (index: number, reason: RerouteReason | null) => {
      setShown(index);
      const item = latest.current.items[index];
      if (item && reason) {
        const prev = latest.current.items[mod(Math.round(lastAnnounced), n)];
        setMessage(
          reason === "failover" && prev && prev.id !== item.id
            ? `${prev.name} is down. Rerouted to ${item.name}.`
            : reason === "recover"
              ? `${item.name} is back. Routing to ${item.name}.`
              : `Routing to ${item.name}.`,
        );
      }
      lastAnnounced = index;
      labelEl.getAnimations().forEach((a) => a.cancel());
      labelEl.style.opacity = "1";
      labelEl.animate(
        reduced
          ? [{ opacity: 0 }, { opacity: 1 }]
          : [
              { opacity: 0, transform: `translateY(${WHEEL.label.rise}px)` },
              { opacity: 1, transform: "translateY(0)" },
            ],
        { duration: reduced ? TIMING.crossFade : paced(TIMING.label.in), easing: TIMING.easeOut },
      );
    };
    const fault = () => {
      if (reduced) return;
      const length = cable.clientHeight;
      bounce.animate(
        [
          { transform: `translateY(${length - 14}px)`, opacity: 1 },
          { transform: `translateY(${length * 0.4}px)`, opacity: 0 },
        ],
        { duration: paced(TIMING.bounce.duration), easing: TIMING.easeOut },
      );
      fail.animate(
        [
          { transform: "scale(1)", opacity: 0.9 },
          { transform: "scale(1.08)", opacity: 0 },
        ],
        { duration: paced(TIMING.fail), easing: TIMING.easeOut },
      );
    };

    /** Takes the wheel to option `index`, for `reason`. */
    const route = (index: number, reason: RerouteReason, settle?: number) => {
      // Already on its way there (a pick echoing back from the parent): leave it be.
      if (index === target && settle === undefined && (reason === "pick" || reason === "autoplay") && busy()) return;
      clearLater();
      if (index < 0) {
        // Nothing healthy: lift the cable, dim the name and wait.
        if (reason === "failover") fault();
        later(unplug, reason === "failover" ? paced(TIMING.bounce.lead) : 0);
        labelEl.getAnimations().forEach((a) => a.cancel());
        labelEl.animate([{ opacity: labelEl.style.opacity || "1" }, { opacity: 0.4 }], { duration: paced(TIMING.dim), easing: TIMING.fade });
        labelEl.style.opacity = "0.4";
        setMessage("Every option is down.");
        return;
      }
      const at = current();
      let goal: number;
      if (settle !== undefined) goal = settle;
      else {
        const forward = mod(index - at, n);
        const back = forward - n;
        const forwardOnly = reason === "failover" || reason === "autoplay";
        goal = Math.round(at + (forwardOnly || Math.abs(forward) <= Math.abs(back) ? forward : back));
      }
      target = index;
      goalOffset = goal;
      if (Math.abs(goal - at) < 1e-3 && plugged) {
        offset = goal;
        return;
      }
      if (reduced) {
        turn = null;
        offset = goal;
        place(goal);
        plugged = true;
        seated = true;
        syncFlow();
        labelIn(index, reason);
        return;
      }
      const lead = reason === "failover" ? paced(TIMING.bounce.lead) : 0;
      if (reason === "failover") fault();
      const steps = Math.max(1, Math.ceil(Math.abs(goal - at) - 1e-3));
      const duration = paced(
        settle !== undefined ? TIMING.settle : Math.min(TIMING.turn.max, TIMING.turn.base + TIMING.turn.per * (steps - 1)),
      );
      const go = () => {
        unplug();
        labelOut();
        later(
          () => {
            if (settle !== undefined) turnTo(goal, duration, TIMING.easeOut, EASE_OUT);
            else turnTo(goal, duration, TIMING.inOut, IN_OUT);
            later(plug, Math.max(0, duration - paced(TIMING.drop.lead)));
            later(() => labelIn(index, reason), Math.max(0, duration - paced(TIMING.labelLead)));
          },
          plugged ? paced(TIMING.turnLag) : 0,
        );
      };
      if (lead) later(go, lead);
      else go();
    };

    /* Drag to spin */

    let drag: { id: number; x: number; from: number; moved: boolean; samples: { t: number; at: number }[] } | null = null;
    let raf = 0;
    let dragAt = 0;
    let suppressClick = false;

    const stepPx = () => width * WHEEL.radius * ((WHEEL.step * Math.PI) / 180);

    const onPointerDown = (e: PointerEvent) => {
      if (e.button !== 0 || n < 2) return;
      drag = { id: e.pointerId, x: e.clientX, from: current(), moved: false, samples: [] };
    };
    const onPointerMove = (e: PointerEvent) => {
      if (!drag || e.pointerId !== drag.id) return;
      const dx = e.clientX - drag.x;
      if (!drag.moved) {
        if (Math.abs(dx) < WHEEL.drag.slop) return;
        drag.moved = true;
        clearLater();
        freeze();
        drag.from = offset;
        drag.x = e.clientX;
        unplug();
        labelOut();
        wheel.setPointerCapture(e.pointerId);
        return;
      }
      dragAt = drag.from - dx / stepPx();
      const t = now();
      drag.samples.push({ t, at: dragAt });
      while (drag.samples.length > 2 && t - drag.samples[0].t > TIMING.drag.window) drag.samples.shift();
      if (!raf)
        raf = requestAnimationFrame(() => {
          raf = 0;
          offset = dragAt;
          place(dragAt);
        });
    };
    const onPointerUp = (e: PointerEvent) => {
      if (!drag || e.pointerId !== drag.id) return;
      const d = drag;
      drag = null;
      if (!d.moved) return;
      suppressClick = true;
      later(() => (suppressClick = false), 0);
      if (raf) cancelAnimationFrame(raf);
      raf = 0;
      offset = dragAt;
      place(dragAt);
      const first = d.samples[0];
      const last = d.samples[d.samples.length - 1];
      const speed = first && last && last.t > first.t ? (last.at - first.at) / (last.t - first.t) : 0;
      const carry = reduced ? 0 : speed * TIMING.drag.carry;
      let goal = Math.round(dragAt + carry);
      const dir = Math.sign(carry || goal - d.from || 1);
      // Skip options that are down, carrying on the way it was spun.
      const { items: list, downSet: off } = latest.current;
      for (let k = 0; k < n && off.has(list[mod(goal, n)]?.id); k++) goal += dir;
      if (off.has(list[mod(goal, n)]?.id)) {
        route(latest.current.liveIndex, "pick");
        return;
      }
      const index = mod(goal, n);
      route(index, "pick", goal);
      if (index !== latest.current.liveIndex) latest.current.pick(list[index].id);
      // A controlled wheel that didn't take the pick goes back to the live option.
      later(() => {
        if (latest.current.liveIndex !== target) route(latest.current.liveIndex, "pick");
      }, TIMING.revert);
    };
    const onClickCapture = (e: MouseEvent) => {
      if (suppressClick) {
        e.stopPropagation();
        e.preventDefault();
      }
    };

    wheel.addEventListener("pointerdown", onPointerDown);
    wheel.addEventListener("pointermove", onPointerMove);
    wheel.addEventListener("pointerup", onPointerUp);
    wheel.addEventListener("pointercancel", onPointerUp);
    wheel.addEventListener("click", onClickCapture, true);

    /* Size, sleep */

    // A new width snaps everything to where it was heading: the turn's keyframes are in px.
    const ro = new ResizeObserver(() => {
      const w = root.clientWidth;
      if (!w || (measured && Math.abs(w - width) < 0.5)) return;
      const settled = measured && (turn !== null || !plugged);
      measured = true;
      width = w;
      if (settled) {
        clearLater();
        turn = null;
        offset = goalOffset;
        cableAnim?.cancel();
        cable.style.transform = "";
        socket.getAnimations().forEach((a) => a.cancel());
        plugged = latest.current.liveIndex >= 0;
        seated = plugged;
        setShown(mod(Math.round(goalOffset), n));
        labelEl.getAnimations().forEach((a) => a.cancel());
        labelEl.style.opacity = plugged ? "1" : "0.4";
      }
      place(offset);
      startFlow();
    });
    ro.observe(root);

    if (!reduced) {
      glowAnim = glow.animate([{ opacity: 0.5 }, { opacity: 1 }], {
        duration: TIMING.glow.duration,
        iterations: Infinity,
        direction: "alternate",
        easing: TIMING.glow.easing,
      });
    } else glow.style.opacity = "0.8";

    place(offset);
    startFlow();

    engine.current = {
      route,
      sleep: (value) => {
        asleep = value;
        syncFlow();
      },
      reflow: () => {
        if (latest.current.flowMs !== flowMs) startFlow();
      },
    };

    return () => {
      engine.current = null;
      clearLater();
      ro.disconnect();
      if (raf) cancelAnimationFrame(raf);
      tileAnims.forEach((a) => a.cancel());
      flowAnims.forEach((a) => a.cancel());
      glowAnim?.cancel();
      cableAnim?.cancel();
      wheel.removeEventListener("pointerdown", onPointerDown);
      wheel.removeEventListener("pointermove", onPointerMove);
      wheel.removeEventListener("pointerup", onPointerUp);
      wheel.removeEventListener("pointercancel", onPointerUp);
      wheel.removeEventListener("click", onClickCapture, true);
    };
  }, [itemKey, reduced]);

  // A new `flowDuration` restarts the comets at the new pace.
  React.useEffect(() => {
    engine.current?.reflow();
  }, [flowDuration]);

  /* Route on every change of the live option, and say why. */
  const prev = React.useRef<{ live: number; preferred: number } | null>(null);
  React.useLayoutEffect(() => {
    const before = prev.current;
    prev.current = { live: liveIndex, preferred: preferredIndex };
    if (!before) return;
    if (before.live === liveIndex) {
      pendingReason.current = null;
      return;
    }
    let reason: RerouteReason;
    if (pendingReason.current) reason = pendingReason.current;
    else if (before.live < 0 && liveIndex >= 0) reason = "recover";
    else if (before.live >= 0 && downSet.has(items[before.live]?.id)) reason = "failover";
    else if (liveIndex === preferredIndex && before.live !== before.preferred) reason = "recover";
    else reason = liveIndex < 0 ? "failover" : "pick";
    pendingReason.current = null;
    engine.current?.route(liveIndex, reason);
    onRoute?.(liveId, reason);
    if (focusAfter.current) {
      const el = tileEls.current.get(focusAfter.current);
      focusAfter.current = null;
      el?.focus({ preventScroll: true });
    }
  }, [liveIndex, preferredIndex, downSet, items, liveId, onRoute]);

  /* Sleep off screen and on a hidden tab. */
  React.useEffect(() => {
    const root = rootRef.current;
    if (!root) return;
    let visible = false;
    const sync = () => {
      const awake = visible && document.visibilityState === "visible";
      engine.current?.sleep(!awake);
      setInView(awake);
    };
    const io = new IntersectionObserver(([entry]) => {
      visible = entry.isIntersecting;
      sync();
    });
    io.observe(root);
    document.addEventListener("visibilitychange", sync);
    return () => {
      io.disconnect();
      document.removeEventListener("visibilitychange", sync);
    };
  }, [itemKey, reduced]);

  /* Autoplay */
  const every = autoplay === true ? TIMING.autoplay : autoplay === false ? 0 : autoplay;
  React.useEffect(() => {
    if (!every || reduced || !inView || held || liveIndex < 0 || count < 2) return;
    const id = window.setTimeout(() => {
      const { items: list, downSet: off, liveIndex: live, pick: go } = latest.current;
      for (let k = 1; k < list.length; k++) {
        const next = list[(live + k) % list.length];
        if (!off.has(next.id)) {
          go(next.id, "autoplay");
          return;
        }
      }
    }, every);
    return () => window.clearTimeout(id);
  }, [every, reduced, inView, held, liveIndex, count, downKey]);

  const step = (dir: 1 | -1) => {
    if (liveIndex < 0) return;
    for (let k = 1; k < count; k++) {
      const next = items[mod(liveIndex + dir * k, count)];
      if (!downSet.has(next.id)) {
        focusAfter.current = next.id;
        pick(next.id);
        return;
      }
    }
  };

  const shownItem = items[shown] ?? items[0];

  return (
    <div
      ref={rootRef}
      className={cn(
        "@container/reroute relative w-full select-none",
        "[--reroute-accent:#ff3b1f] [--reroute-down:#18181b] dark:[--reroute-accent:#ff5a3c] dark:[--reroute-down:#e4e4e7]",
        className,
      )}
      onPointerEnter={(e) => e.pointerType === "mouse" && setHeld(true)}
      onPointerLeave={(e) => e.pointerType === "mouse" && setHeld(false)}
      onFocus={() => setHeld(true)}
      onBlur={(e) => {
        if (!e.currentTarget.contains(e.relatedTarget as Node)) setHeld(false);
      }}
      onKeyDown={(e) => {
        onKeyDown?.(e);
        if (e.defaultPrevented) return;
        if (e.key === "ArrowRight" || e.key === "ArrowDown") {
          e.preventDefault();
          step(1);
        } else if (e.key === "ArrowLeft" || e.key === "ArrowUp") {
          e.preventDefault();
          step(-1);
        }
      }}
      {...props}
    >
      <div
        className={cn(
          "relative h-[var(--reroute-height,clamp(15rem,54cqw,21rem))] w-full overflow-x-clip",
          "[--t:clamp(3rem,11cqw,4rem)] [--l:clamp(2.5rem,11cqw,4.5rem)]",
          "[--apex:calc(0.5rem+var(--t)+var(--l)+5px+var(--t)/2)]",
        )}
      >
        {/* The hub, its glow and the cable */}
        <span
          ref={glowRef}
          aria-hidden
          className="pointer-events-none absolute left-1/2 top-[calc(0.5rem+var(--t)/2)] size-[calc(var(--t)*3.2)] -translate-x-1/2 -translate-y-1/2 rounded-full bg-[radial-gradient(closest-side,color-mix(in_oklab,var(--reroute-accent)_34%,transparent),transparent)] will-change-[opacity]"
        />
        <div
          aria-hidden
          className="absolute left-1/2 top-2 z-20 grid size-[var(--t)] -translate-x-1/2 place-items-center rounded-[calc(var(--t)*0.3)] bg-[linear-gradient(180deg,color-mix(in_oklab,var(--reroute-accent),white_16%),var(--reroute-accent))] text-white shadow-[inset_0_1px_0_rgba(255,255,255,0.35),0_8px_20px_-6px_color-mix(in_oklab,var(--reroute-accent)_60%,transparent)] [&_svg]:size-[46%]"
        >
          {hub ?? <HubGlyph />}
        </div>
        <div
          ref={cableRef}
          aria-hidden
          className="absolute left-[calc(50%-0.5px)] top-[calc(0.5rem+var(--t))] z-10 h-[var(--l)] w-px bg-[color-mix(in_oklab,var(--reroute-accent)_45%,transparent)] will-change-transform"
        >
          <span className="absolute -bottom-px left-1/2 h-1.5 w-[5px] -translate-x-1/2 rounded-[2px] bg-[var(--reroute-accent)]" />
          <div ref={flowRef} className={`absolute inset-x-0 top-0 h-0 transition-opacity ${TIMING.flowFade}`}>
            {Array.from({ length: WHEEL.flow.count }, (_, i) => (
              <span
                key={i}
                className="absolute left-1/2 top-0 h-3 w-[3px] -translate-x-1/2 rounded-full bg-[linear-gradient(to_bottom,transparent,var(--reroute-accent))] opacity-0 will-change-transform"
              />
            ))}
          </div>
          <span
            ref={bounceRef}
            className="absolute left-1/2 top-0 h-3 w-[3px] -translate-x-1/2 rounded-full bg-[linear-gradient(to_top,transparent,var(--reroute-down))] opacity-0 will-change-transform"
          />
        </div>

        {/* The wheel */}
        <div
          ref={wheelRef}
          className="absolute inset-0 touch-pan-y"
          style={{
            maskImage:
              "linear-gradient(to right, transparent, #000 13%, #000 87%, transparent), linear-gradient(to bottom, #000 72%, transparent)",
            WebkitMaskImage:
              "linear-gradient(to right, transparent, #000 13%, #000 87%, transparent), linear-gradient(to bottom, #000 72%, transparent)",
            maskComposite: "intersect",
            WebkitMaskComposite: "source-in",
          }}
        >
          <span
            aria-hidden
            className="pointer-events-none absolute left-[calc(50%-72cqw)] top-[var(--apex)] size-[144cqw] rounded-full border border-zinc-950/[0.08] dark:border-white/10"
          />
          <span
            aria-hidden
            className="pointer-events-none absolute left-[calc(50%-72cqw+var(--t)*0.9)] top-[calc(var(--apex)+var(--t)*0.9)] size-[calc(144cqw-var(--t)*1.8)] rounded-full border border-dashed border-zinc-950/[0.06] dark:border-white/[0.07]"
          />
          <div role="radiogroup" aria-label={label} className="absolute inset-0">
            {items.map((item, k) => {
              const s = wrapSlot(k - initialLive, count);
              const p = pose(s, count);
              const isDown = downSet.has(item.id);
              const isLive = k === liveIndex;
              return (
                <button
                  key={item.id}
                  ref={(el) => {
                    if (el) tileEls.current.set(item.id, el);
                    else tileEls.current.delete(item.id);
                  }}
                  type="button"
                  role="radio"
                  aria-checked={isLive}
                  aria-disabled={isDown || undefined}
                  aria-label={isDown ? `${item.name} (down)` : item.name}
                  tabIndex={isLive || (liveIndex < 0 && k === 0) ? 0 : -1}
                  data-down={isDown || undefined}
                  data-live={isLive || undefined}
                  onClick={() => {
                    if (isDown || isLive) return;
                    pick(item.id);
                  }}
                  className={cn(
                    "group/tile absolute left-[calc(50%-var(--t)/2)] top-[calc(var(--apex)-var(--t)/2)] grid size-[var(--t)] place-items-center rounded-[calc(var(--t)*0.28)] will-change-[transform,opacity]",
                    "border border-zinc-950/[0.08] bg-white text-zinc-950 shadow-[0_1px_2px_rgba(0,0,0,0.05),0_6px_16px_-8px_rgba(0,0,0,0.12)] dark:border-white/10 dark:bg-zinc-900 dark:text-white",
                    "outline-offset-4 outline-[var(--reroute-accent)] focus-visible:outline-2",
                    `transition-[border-color] ${TIMING.hover} [@media(hover:hover)]:hover:border-zinc-950/20 dark:[@media(hover:hover)]:hover:border-white/25`,
                    isDown ? "cursor-not-allowed" : isLive ? "cursor-default" : "cursor-pointer",
                  )}
                  style={{
                    transform: `translate(calc(${p.x.toFixed(4)} * 100cqw), calc(${p.y.toFixed(4)} * 100cqw)) scale(${p.scale.toFixed(4)})`,
                    opacity: p.opacity,
                    zIndex: 10 - Math.round(Math.abs(s)),
                  }}
                >
                  <span
                    className={cn(
                      `grid size-[46%] place-items-center transition-opacity ${TIMING.down} [&>*]:max-h-full [&>*]:max-w-full`,
                      isDown && "opacity-30 grayscale",
                    )}
                  >
                    {item.icon}
                  </span>
                  <span
                    aria-hidden
                    className={cn(
                      `absolute -right-1 -top-1 size-2.5 rounded-full bg-[var(--reroute-down)] ring-2 ring-white transition-[opacity,scale] ${TIMING.down} dark:ring-zinc-900`,
                      isDown ? "scale-100 opacity-100" : "scale-50 opacity-0",
                    )}
                  />
                </button>
              );
            })}
          </div>
        </div>

        {/* The socket: fixed at the top of the wheel, the options turn through it */}
        <span
          aria-hidden
          className="pointer-events-none absolute left-1/2 top-[var(--apex)] z-30 size-[calc(var(--t)+10px)] -translate-x-1/2 -translate-y-1/2"
        >
          <span
            ref={socketRef}
            className="absolute inset-0 rounded-[calc(var(--t)*0.28+5px)] border-[1.5px] border-[var(--reroute-accent)] shadow-[0_0_0_4px_color-mix(in_oklab,var(--reroute-accent)_10%,transparent),0_10px_28px_-8px_color-mix(in_oklab,var(--reroute-accent)_45%,transparent)] will-change-[transform,opacity]"
          />
          <span
            ref={pulseRef}
            className="absolute inset-0 rounded-[calc(var(--t)*0.28+5px)] border border-[var(--reroute-accent)] opacity-0 will-change-[transform,opacity]"
          />
          <span
            ref={failRef}
            className="absolute -inset-[3px] rounded-[calc(var(--t)*0.28+8px)] border-2 border-[var(--reroute-down)] opacity-0 will-change-[transform,opacity]"
          />
        </span>

        {/* What's live */}
        <div
          ref={labelRef}
          aria-hidden
          className="pointer-events-none absolute left-1/2 top-[calc(var(--apex)+var(--t)/2+16px)] z-30 w-[min(calc(86cqw-var(--t)*0.72-1rem),17rem)] -translate-x-1/2 text-center will-change-[transform,opacity]"
        >
          {liveIndex >= 0 || shownItem ? (
            <>
              <div className="truncate text-[13px] font-medium leading-5 tracking-tight text-zinc-950 dark:text-white">
                {shownItem?.name}
              </div>
              {shownItem?.detail ? (
                <div className="truncate font-mono text-[11px] leading-4 tabular-nums text-zinc-500 dark:text-zinc-400">
                  {shownItem.detail}
                </div>
              ) : null}
            </>
          ) : null}
        </div>
      </div>
      <p className="sr-only" aria-live="polite">
        {message}
      </p>
    </div>
  );
}