Throughline

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:
 * - Each ride is a Web Animation on the tile's transform, plus one on its glass's opacity, run
 *   linearly through `RIDE.samples` poses so tiles keep one pace off the main thread.
 * - Braking and releasing step a line's animations by hand through `currentTime`, one rAF per line
 *   with speed as u²; a line goes back to running on its own only at full speed.
 * - A hold starts from `pointermove` after the hover intent and lets go after the linger, so a sweep
 *   across, or a tile drifting under a still pointer, never stops a line.
 * - Off screen every line pauses where it is, and a rebuild (a resize, a new `duration`) puts each
 *   tile back at the place saved in `fracs`, so nothing jumps to a start.
 * - Reduced motion builds no rides: tiles sit full size at their `restingPoints`, and hover, focus
 *   and tap still show labels.
 */
const TIMING = {
  /** Seconds to ride a line as long as the box is wide (the `duration` prop). */
  duration: 26,
  /** The ride's easing between its sampled poses, so every tile keeps one pace. */
  ride: "linear",
  /** A held line slowing to a stop, in seconds (the `brakeDuration` prop). */
  brakeDuration: 0.3,
  /** The line getting back up to speed once let go, in seconds (the `releaseDuration` prop). */
  releaseDuration: 0.6,
  /** The pointer resting on a tile before its line stops, in ms. */
  intent: 100,
  /** After the pointer leaves, before the line moves again, in ms. */
  linger: 250,
  /** The first fade-in: its duration and curve as Tailwind classes, and ms between tiles. */
  enter: { fade: "duration-500 ease-out", stagger: 60 },
  /** A held tile turning upright and lifting, as Tailwind classes. */
  face: "duration-[240ms] ease-[cubic-bezier(0.23,1,0.32,1)]",
  /** The held tile's label rising in and dropping away, as Tailwind classes. */
  label: "duration-[180ms] ease-[cubic-bezier(0.23,1,0.32,1)]",
} as const;

/* ─────────────────────────────────────────────────────────
 * THROUGHLINE STORYBOARD
 *
 *  rest      dotted lines thread across the box, each running
 *            from one small square station to another, over (or
 *            under) whatever you put inside: a headline, a card.
 *            Glass tiles ride them, spaced evenly. A tile over a
 *            colored letter picks up its color through the glass
 *  ride      one steady pace, linear: a line as long as the box
 *            is wide takes `duration` (26s) end to end. Each line
 *            starts at its own point in the loop, so no two lines
 *            move in step
 *  launch    a tile slides out from under its station at 16% of
 *            its size and grows to full size over the first 14%
 *            of the line, turning slowly as it goes (7° over the
 *            whole ride). Over the last 14% it dives back into
 *            the far station, fading out in the last 4%
 *  view      on first paint the tiles fade in where they already
 *            are, 60ms apart, over 0.5s. Nothing jumps to a start
 *  brake     rest the pointer on a tile for 100ms and its whole
 *            line stops, like a cable car line: every tile on it
 *            slows to a stop in 0.3s (speed falls as (1 − t)²).
 *            A sweep across does nothing; a tile drifting under a
 *            still pointer does nothing. Other lines keep going
 *  face      the held tile turns upright and lifts to 1.08 in
 *            0.24s, and its label rises 6px under it in 0.18s
 *  release   0.25s after the pointer leaves, the line picks up
 *            speed again over 0.6s (t²) and the tile tilts back
 *  touch     a tap holds a tile like a hover; a second tap, or a
 *            tap anywhere else, lets it go
 *  keys      tiles with `href` are links: Tab reaches them, focus
 *            holds the line the same way, Enter follows the link
 *  sleep     off screen every line pauses where it is and goes on
 *            from there when it's back. The ride runs as Web
 *            Animations on transform, off the main thread
 *  resize    lines live in % of the box; on resize each ride is
 *            rebuilt for the new size and keeps its place
 *  reduced   nothing rides: the tiles sit full size, spread along
 *            their lines. Hover, focus and tap still show labels
 * ───────────────────────────────────────────────────────── */

const RIDE = {
  samples: 120, // keyframes per ride; linear between them
  launch: 0.14, // share of a line over which a tile grows out of its station (and dives back in)
  far: 0.16, // a tile's scale at a station
  fade: 0.04, // share of the line at each end over which a tile fades
  tilt: 11, // deg, the largest resting tilt
  sway: 7, // deg a tile turns over its ride
  lift: 1.08, // scale of a held tile
} as const;

export type ThroughlinePoint = [x: number, y: number];

export interface ThroughlineLine {
  /** Where tiles leave from: `[x, y]` in % of the box. */
  from: ThroughlinePoint;
  /** Where they arrive: `[x, y]` in % of the box. */
  to: ThroughlinePoint;
  /** How far the line bows, as a share of its length. Positive bows it to the right of its direction (down, for a line running left to right). Default `0`. */
  bend?: number;
  /** Run this line and its tiles behind the content instead of over it. */
  behind?: boolean;
}

export interface ThroughlineItem {
  /** What the tile stands for. Shown under it when held, and read by screen readers. */
  label: string;
  /** What sits in the tile: an svg, a logo image, an avatar. It fills 56% of the tile (`--throughline-icon`). */
  icon: React.ReactNode;
  /** Which line it rides, by index. Items without one are dealt round the lines in order. */
  line?: number;
  /** Makes the tile a link, reachable with Tab. */
  href?: string;
  /** Classes for this tile, e.g. a solid dark tile instead of glass. */
  className?: string;
}

export interface ThroughlineProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children"> {
  /** The dotted lines, in % of the box. Tiles ride from `from` to `to`. */
  lines: ThroughlineLine[];
  /** The tiles. Each line spaces its own tiles evenly. */
  items: ThroughlineItem[];
  /** Seconds a tile takes to ride a line as long as the box is wide. Longer lines take longer, so every tile keeps one pace. */
  duration?: number;
  /** Brings every line to a stop (and back up to speed when it turns false). */
  paused?: boolean;
  /** Seconds a held line takes to slow to a stop. */
  brakeDuration?: number;
  /** Seconds a line takes to get back up to speed once it's let go. */
  releaseDuration?: number;
  /** Draws the small square stations at each end of a line. */
  stations?: boolean;
  /** What the lines thread through: a headline, a card, a whole hero. It sets the box's size. */
  children?: React.ReactNode;
}

const clamp01 = (v: number) => (v < 0 ? 0 : v > 1 ? 1 : v);
const fract = (v: number) => v - Math.floor(v);
/** A repeatable 0–1 number per index, so tilts and offsets survive a reload. */
const rand = (i: number) => fract(Math.sin(i * 127.1 + 311.7) * 43758.5453);

const REDUCED_QUERY = "(prefers-reduced-motion: reduce)";
const subscribeReduced = (onChange: () => void) => {
  const mq = window.matchMedia(REDUCED_QUERY);
  mq.addEventListener("change", onChange);
  return () => mq.removeEventListener("change", onChange);
};
/** Live, and false on the server and in the hydration render, so markup never mismatches. */
function usePrefersReducedMotion() {
  return React.useSyncExternalStore(
    subscribeReduced,
    () => window.matchMedia(REDUCED_QUERY).matches,
    () => false,
  );
}

/* ── Geometry ───────────────────────────────────────────── */

type Box = { w: number; h: number };
type Track = { len: number; at: (p: number) => [number, number] };

/** The quadratic's control point, in % of the box. */
function bendPoint({ from, to, bend = 0 }: ThroughlineLine): ThroughlinePoint {
  const [x0, y0] = from;
  const [x1, y1] = to;
  return [(x0 + x1) / 2 - (y1 - y0) * bend, (y0 + y1) / 2 + (x1 - x0) * bend];
}

/** A line in pixels, walked by distance so tiles keep one speed round the bend. */
function makeTrack(line: ThroughlineLine, { w, h }: Box): Track {
  const [cx, cy] = bendPoint(line);
  const x0 = (line.from[0] * w) / 100;
  const y0 = (line.from[1] * h) / 100;
  const x1 = (line.to[0] * w) / 100;
  const y1 = (line.to[1] * h) / 100;
  const qx = (cx * w) / 100;
  const qy = (cy * h) / 100;
  const point = (t: number): [number, number] => {
    const u = 1 - t;
    return [u * u * x0 + 2 * u * t * qx + t * t * x1, u * u * y0 + 2 * u * t * qy + t * t * y1];
  };
  const steps = 240;
  const acc = new Float64Array(steps + 1);
  let [px, py] = point(0);
  for (let i = 1; i <= steps; i++) {
    const [x, y] = point(i / steps);
    acc[i] = acc[i - 1] + Math.hypot(x - px, y - py);
    px = x;
    py = y;
  }
  const len = acc[steps];
  const at = (p: number) => {
    const target = clamp01(p) * len;
    let lo = 0;
    let hi = steps;
    while (hi - lo > 1) {
      const mid = (lo + hi) >> 1;
      if (acc[mid] < target) lo = mid;
      else hi = mid;
    }
    const span = acc[hi] - acc[lo] || 1;
    return point((lo + (target - acc[lo]) / span) / steps);
  };
  return { len, at };
}

/** Grows out of a station fast and settles; dives back in the same way. */
function scaleAt(p: number) {
  const e = Math.min(p, 1 - p) / RIDE.launch;
  if (e >= 1) return 1;
  return RIDE.far + (1 - RIDE.far) * (1 - (1 - e) ** 3);
}

type Pose = { x: number; y: number; rotate: number; scale: number };

const poseCss = ({ x, y, rotate, scale }: Pose) =>
  `translate(${x.toFixed(2)}px, ${y.toFixed(2)}px) rotate(${rotate.toFixed(2)}deg) scale(${scale.toFixed(4)})`;

/* ── Riders ─────────────────────────────────────────────── */

type Seat = { line: number; phase: number; tilt: number; sway: number };

/** Deals items onto lines and spaces each line's tiles evenly, from a different start per line. */
function seat(items: ThroughlineItem[], lineCount: number): Seat[] {
  if (lineCount === 0) return [];
  const lineOf = items.map((item, i) => ((item.line ?? i) % lineCount + lineCount) % lineCount);
  const counts = new Array<number>(lineCount).fill(0);
  const order = lineOf.map((l) => counts[l]++);
  return lineOf.map((line, i) => ({
    line,
    phase: fract(order[i] / counts[line] + rand(line + 1)),
    tilt: (rand(i * 7 + 3) * 2 - 1) * RIDE.tilt,
    sway: rand(i * 13 + 5) > 0.5 ? 1 : -1,
  }));
}

function poseAt(track: Track, s: Seat, p: number): Pose {
  const [x, y] = track.at(p);
  return { x, y, rotate: s.tilt + RIDE.sway * s.sway * (p - 0.5), scale: scaleAt(p) };
}

/**
 * Where the tiles sit when nothing rides: full size, evenly spaced along the
 * middle of each line, with each line's spacing slid to keep its tiles as far
 * as it can from tiles already placed, so they don't pile up where lines cross.
 */
function restingPoints(seats: Seat[], tracks: Track[]) {
  const points = new Array<number>(seats.length).fill(0.5);
  const placed: [number, number][] = [];
  tracks.forEach((track, line) => {
    const mine = seats.map((s, i) => (s.line === line ? i : -1)).filter((i) => i >= 0);
    if (mine.length === 0) return;
    let best: number[] = [];
    let bestGap = -1;
    for (let k = 0; k < 24; k++) {
      const ps = mine.map((_, j) => 0.14 + 0.72 * fract(k / 24 / mine.length + j / mine.length));
      let gap = Infinity;
      for (const p of ps) {
        const [x, y] = track.at(p);
        for (const [px, py] of placed) gap = Math.min(gap, Math.hypot(x - px, y - py));
      }
      if (gap > bestGap) {
        bestGap = gap;
        best = ps;
      }
    }
    mine.forEach((i, j) => {
      points[i] = best[j];
      placed.push(track.at(best[j]));
    });
  });
  return points;
}

type Rider = {
  index: number;
  seat: Seat;
  track: Track;
  ms: number; // one ride, in ms
  move: Animation;
  fade: Animation;
};

type Lane = {
  riders: Rider[];
  u: number; // throttle, 0–1; speed is u²
  raf: number;
  last: number;
  native: boolean; // running on its own (off the main thread) rather than stepped
};

const timeOf = (a: Animation) => Number(a.currentTime ?? 0);

/* ── Throughline ────────────────────────────────────────── */

type Held = { index: number; x: number; y: number; rotate: number; scale: number };

export function Throughline({
  lines,
  items,
  duration = TIMING.duration,
  paused = false,
  brakeDuration = TIMING.brakeDuration,
  releaseDuration = TIMING.releaseDuration,
  stations = true,
  className,
  children,
  style,
  ...props
}: ThroughlineProps) {
  const reduced = usePrefersReducedMotion();
  const rootRef = React.useRef<HTMLDivElement>(null);
  const outerRefs = React.useRef<(HTMLElement | null)[]>([]);
  const glassRefs = React.useRef<(HTMLElement | null)[]>([]);
  const [box, setBox] = React.useState<Box | null>(null);
  const [held, setHeld] = React.useState<Held | null>(null);
  const [shownLabel, setShownLabel] = React.useState<Held | null>(null);

  const seats = React.useMemo(() => seat(items, lines.length), [items, lines.length]);
  const tracks = React.useMemo(() => (box ? lines.map((l) => makeTrack(l, box)) : null), [lines, box]);
  const rest = React.useMemo(() => (reduced && tracks ? restingPoints(seats, tracks) : null), [reduced, seats, tracks]);

  // The controller lives across renders; handlers reach it through this ref.
  const ctl = React.useRef<{
    hold: (i: number) => Held | null;
    letGo: (i: number) => void;
    drive: () => void;
  } | null>(null);
  const holds = React.useRef(new Set<number>());
  const pausedRef = React.useRef(paused);
  const brakeRef = React.useRef({ brake: brakeDuration, release: releaseDuration });
  const fracs = React.useRef(new Map<number, number>());

  // Size of the box, in pixels.
  React.useLayoutEffect(() => {
    const root = rootRef.current;
    if (!root) return;
    const measure = () => {
      const w = root.clientWidth;
      const h = root.clientHeight;
      setBox((b) => (b && Math.abs(b.w - w) < 0.5 && Math.abs(b.h - h) < 0.5 ? b : { w, h }));
    };
    measure();
    const ro = new ResizeObserver(measure);
    ro.observe(root);
    return () => ro.disconnect();
  }, []);

  // A stable key for the ride geometry, so inline `lines` / `items` arrays don't rebuild every render.
  const geometry = box && tracks ? `${box.w}x${box.h}|${JSON.stringify(lines)}|${seats.map((s) => s.line).join()}` : "";

  // Build the rides: one transform animation per tile, one opacity animation on its glass.
  React.useEffect(() => {
    const root = rootRef.current;
    if (!root || !box || !tracks || reduced) {
      ctl.current = null;
      return;
    }
    const saved = fracs.current;
    const lanes: Lane[] = lines.map(() => ({ riders: [], u: 1, raf: 0, last: 0, native: true }));
    const riders: (Rider | null)[] = seats.map((s, i) => {
      const outer = outerRefs.current[i];
      const glass = glassRefs.current[i];
      const track = tracks[s.line];
      if (!outer || !glass || !track || track.len < 1) return null;
      const ms = ((duration * track.len) / box.w) * 1000;
      const frames: Keyframe[] = [];
      for (let k = 0; k <= RIDE.samples; k++) {
        const p = k / RIDE.samples;
        frames.push({ offset: p, transform: poseCss(poseAt(track, s, p)) });
      }
      const timing: KeyframeAnimationOptions = { duration: ms, iterations: Infinity, easing: TIMING.ride };
      const move = outer.animate(frames, timing);
      const fade = glass.animate(
        [
          { offset: 0, opacity: 0 },
          { offset: RIDE.fade, opacity: 1 },
          { offset: 1 - RIDE.fade, opacity: 1 },
          { offset: 1, opacity: 0 },
        ],
        timing,
      );
      move.currentTime = fade.currentTime = (saved.get(i) ?? s.phase) * ms;
      const rider = { index: i, seat: s, track, ms, move, fade };
      lanes[s.line].riders.push(rider);
      return rider;
    });

    let visible = true;
    const want = (lane: Lane) =>
      !pausedRef.current && lane.riders.every((r) => !holds.current.has(r.index)) ? 1 : 0;
    const setNative = (lane: Lane, on: boolean) => {
      lane.native = on;
      for (const r of lane.riders) {
        if (on) {
          r.move.play();
          r.fade.play();
        } else {
          r.move.pause();
          r.fade.pause();
        }
      }
    };
    // While a line brakes or picks up speed, its tiles are stepped by hand.
    const step = (lane: Lane) => (now: number) => {
      const dt = Math.min(0.05, (now - lane.last) / 1000);
      lane.last = now;
      const target = want(lane);
      lane.u =
        target > lane.u
          ? Math.min(target, lane.u + dt / brakeRef.current.release)
          : Math.max(target, lane.u - dt / brakeRef.current.brake);
      const ahead = dt * lane.u * lane.u * 1000;
      for (const r of lane.riders) {
        r.move.currentTime = timeOf(r.move) + ahead;
        r.fade.currentTime = timeOf(r.fade) + ahead;
      }
      if (lane.u === target) {
        lane.raf = 0;
        if (target === 1) setNative(lane, true);
        return;
      }
      lane.raf = requestAnimationFrame(step(lane));
    };
    const drive = () => {
      if (!visible) return;
      for (const lane of lanes) {
        if (lane.raf || lane.u === want(lane)) continue;
        if (lane.native) setNative(lane, false);
        lane.last = performance.now();
        lane.raf = requestAnimationFrame(step(lane));
      }
    };
    const sleep = (asleep: boolean) => {
      visible = !asleep;
      for (const lane of lanes) {
        cancelAnimationFrame(lane.raf);
        lane.raf = 0;
        lane.u = asleep ? lane.u : want(lane);
        setNative(lane, !asleep && lane.u === 1);
      }
    };
    lanes.forEach((lane) => {
      lane.u = want(lane);
      if (lane.u === 0) setNative(lane, false);
    });

    const hold = (i: number): Held | null => {
      const r = riders[i];
      if (!r) return null;
      const lane = lanes[r.seat.line];
      // Where it will come to rest: the brake covers u³ · brake / 3 of the ride.
      const moving = visible && (lane.native || lane.raf !== 0);
      const ahead = moving ? ((lane.u ** 3 * brakeRef.current.brake) / 3) * 1000 : 0;
      const p = fract((timeOf(r.move) + ahead) / r.ms);
      holds.current.add(i);
      drive();
      return { index: i, ...poseAt(r.track, r.seat, p) };
    };
    const letGo = (i: number) => {
      holds.current.delete(i);
      drive();
    };
    ctl.current = { hold, letGo, drive };

    const io = new IntersectionObserver(([entry]) => sleep(!entry.isIntersecting));
    io.observe(root);

    return () => {
      io.disconnect();
      ctl.current = null;
      riders.forEach((r, i) => {
        if (!r) return;
        saved.set(i, fract(timeOf(r.move) / r.ms));
        r.move.cancel();
        r.fade.cancel();
      });
      lanes.forEach((lane) => cancelAnimationFrame(lane.raf));
    };
    // `geometry` stands in for box, tracks, lines and seats.
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [geometry, duration, reduced]);

  React.useEffect(() => {
    pausedRef.current = paused;
    ctl.current?.drive();
  }, [paused]);

  React.useEffect(() => {
    brakeRef.current = { brake: Math.max(0.01, brakeDuration), release: Math.max(0.01, releaseDuration) };
  }, [brakeDuration, releaseDuration]);

  // Hold and let go, with an intent delay on the way in and a linger on the way out.
  const engaged = React.useRef(new Set<number>());
  const intents = React.useRef(new Map<number, number>());
  const lingers = React.useRef(new Map<number, number>());
  const touchHeld = React.useRef<number | null>(null);

  const cancel = (timers: Map<number, number>, i: number) => {
    window.clearTimeout(timers.get(i));
    timers.delete(i);
  };

  const engage = React.useCallback(
    (i: number) => {
      cancel(intents.current, i);
      cancel(lingers.current, i);
      engaged.current.add(i);
      let pose: Held | null = null;
      if (ctl.current) {
        pose = ctl.current.hold(i);
      } else if (tracks && rest && seats[i]) {
        // Reduced motion: the tile is already still.
        const s = seats[i];
        pose = { index: i, ...poseAt(tracks[s.line], s, rest[i]), scale: 1 };
      }
      if (pose) {
        setHeld(pose);
        setShownLabel(pose);
      }
    },
    [tracks, seats, rest],
  );

  const disengage = React.useCallback((i: number) => {
    cancel(intents.current, i);
    if (!engaged.current.delete(i)) return;
    setHeld((h) => (h?.index === i ? null : h));
    cancel(lingers.current, i);
    lingers.current.set(
      i,
      window.setTimeout(() => {
        lingers.current.delete(i);
        ctl.current?.letGo(i);
      }, TIMING.linger),
    );
  }, []);

  // A tap elsewhere lets go of a tile held by touch.
  React.useEffect(() => {
    const onDown = (e: PointerEvent) => {
      const i = touchHeld.current;
      if (i === null) return;
      const tile = outerRefs.current[i];
      if (tile && e.target instanceof Node && tile.contains(e.target)) return;
      touchHeld.current = null;
      disengage(i);
    };
    document.addEventListener("pointerdown", onDown);
    return () => document.removeEventListener("pointerdown", onDown);
  }, [disengage]);

  React.useEffect(() => {
    const pending = [intents.current, lingers.current];
    return () => pending.forEach((timers) => timers.forEach((id) => window.clearTimeout(id)));
  }, []);

  const ready = box !== null;
  const plain = items.filter((item) => !item.href);

  const renderLayer = (behind: boolean) => {
    const layerLines = lines.map((l, i) => ({ l, i })).filter(({ l }) => !!l.behind === behind);
    if (layerLines.length === 0) return null;
    const onLayer = new Set(layerLines.map(({ i }) => i));
    return (
      <div
        className={cn("pointer-events-none absolute inset-0", behind ? "z-0" : "z-20")}
        data-throughline-layer={behind ? "behind" : "front"}
      >
        {box && (
          <svg
            aria-hidden
            viewBox={`0 0 ${box.w} ${box.h}`}
            className="absolute inset-0 size-full overflow-visible"
            fill="none"
          >
            {layerLines.map(({ l, i }) => {
              const [cx, cy] = bendPoint(l);
              const sx = box.w / 100;
              const sy = box.h / 100;
              return (
                <path
                  key={i}
                  d={`M ${l.from[0] * sx} ${l.from[1] * sy} Q ${cx * sx} ${cy * sy} ${l.to[0] * sx} ${l.to[1] * sy}`}
                  stroke="var(--throughline-line)"
                  strokeWidth={1.75}
                  strokeLinecap="round"
                  strokeDasharray="0 6"
                />
              );
            })}
          </svg>
        )}

        {items.map((item, i) => {
          const s = seats[i];
          if (!s || !onLayer.has(s.line)) return null;
          const isHeld = held?.index === i;
          const still = tracks && rest ? poseAt(tracks[s.line], s, rest[i]) : null;
          const Tag = item.href ? "a" : "span";
          return (
            <span
              key={i}
              ref={(el) => {
                outerRefs.current[i] = el;
              }}
              className="absolute left-0 top-0 size-0 will-change-transform"
              style={still ? { transform: poseCss({ ...still, scale: 1 }) } : undefined}
            >
              <span
                className={cn(
                  `absolute size-(--throughline-tile) transition-transform ${TIMING.face} will-change-transform motion-reduce:transition-none`,
                  "left-[calc(var(--throughline-tile)/-2)] top-[calc(var(--throughline-tile)/-2)]",
                )}
                style={isHeld ? { transform: `rotate(${(-held.rotate).toFixed(2)}deg) scale(${RIDE.lift})` } : undefined}
              >
                <Tag
                  ref={(el: HTMLElement | null) => {
                    glassRefs.current[i] = el;
                  }}
                  {...(item.href
                    ? { href: item.href, "aria-label": item.label }
                    : { "aria-hidden": true })}
                  className={cn(
                    "pointer-events-auto flex size-full items-center justify-center rounded-[28%]",
                    "border border-white/70 bg-white/35 backdrop-blur-[5px] backdrop-saturate-[1.8]",
                    "shadow-[0_14px_30px_-14px_rgb(20_16_40/0.45),inset_0_1px_0_rgb(255_255_255/0.75)]",
                    "dark:border-white/15 dark:bg-white/[0.07] dark:shadow-[0_14px_30px_-14px_rgb(0_0_0/0.8),inset_0_1px_0_rgb(255_255_255/0.14)]",
                    "focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-current",
                    `transition-[filter] ${TIMING.enter.fade}`,
                    ready ? "filter-none" : "[filter:opacity(0)]",
                    item.className,
                  )}
                  style={{ transitionDelay: `${i * TIMING.enter.stagger}ms` }}
                  onPointerMove={(e: React.PointerEvent) => {
                    if (e.pointerType !== "mouse" || engaged.current.has(i) || intents.current.has(i)) return;
                    // Back on it before the line moved off: hold again at once.
                    if (lingers.current.has(i)) engage(i);
                    else intents.current.set(i, window.setTimeout(() => engage(i), TIMING.intent));
                  }}
                  onPointerLeave={(e: React.PointerEvent) => {
                    if (e.pointerType === "mouse") disengage(i);
                  }}
                  onPointerDown={(e: React.PointerEvent) => {
                    if (e.pointerType === "mouse") return;
                    if (touchHeld.current === i) {
                      touchHeld.current = null;
                      disengage(i);
                      return;
                    }
                    if (touchHeld.current !== null) disengage(touchHeld.current);
                    touchHeld.current = i;
                    engage(i);
                  }}
                  onFocus={item.href ? () => engage(i) : undefined}
                  onBlur={item.href ? () => disengage(i) : undefined}
                >
                  <span className="pointer-events-none flex size-(--throughline-icon) items-center justify-center *:size-full *:object-contain">
                    {item.icon}
                  </span>
                </Tag>
              </span>
            </span>
          );
        })}

        {stations &&
          layerLines.map(({ l, i }) =>
            [l.from, l.to].map(([x, y], end) => (
              <span
                key={`${i}-${end}`}
                aria-hidden
                className="absolute size-[7px] -translate-x-1/2 -translate-y-1/2 rounded-[2px] bg-(--throughline-station) shadow-[0_0_0_3px_var(--throughline-station-ring)]"
                style={{ left: `${x}%`, top: `${y}%` }}
              />
            )),
          )}
      </div>
    );
  };

  const label = shownLabel ? items[shownLabel.index]?.label : undefined;

  return (
    <div
      ref={rootRef}
      className={cn(
        "@container/throughline relative isolate overflow-x-clip",
        "[--throughline-tile:clamp(2rem,6.5cqi,4.5rem)] [--throughline-icon:56%]",
        "[--throughline-line:color-mix(in_oklab,currentColor_42%,transparent)]",
        "[--throughline-station:currentColor]",
        "[--throughline-station-ring:color-mix(in_oklab,currentColor_14%,transparent)]",
        className,
      )}
      style={style}
      {...props}
    >
      {renderLayer(true)}
      <div className="relative z-10">{children}</div>
      {renderLayer(false)}

      <div
        aria-hidden
        className="pointer-events-none absolute left-0 top-0 z-30"
        style={
          shownLabel
            ? {
                transform: `translate(${shownLabel.x.toFixed(1)}px, ${shownLabel.y.toFixed(1)}px)`,
                ["--throughline-held" as string]: shownLabel.scale * RIDE.lift,
              }
            : undefined
        }
      >
        <span
          className={cn(
            "absolute left-0 top-[calc(var(--throughline-tile)*var(--throughline-held,1)/2+10px)] -translate-x-1/2 whitespace-nowrap rounded-full px-2.5 py-1.5 text-xs font-medium leading-none",
            "bg-zinc-950 text-white shadow-[0_6px_16px_-6px_rgb(0_0_0/0.4)] dark:bg-white dark:text-zinc-950",
            `transition-[opacity,translate] ${TIMING.label} will-change-[opacity,translate]`,
            held ? "translate-y-0 opacity-100" : "translate-y-1.5 opacity-0",
          )}
          onTransitionEnd={() => {
            if (!held) setShownLabel(null);
          }}
        >
          {label}
        </span>
      </div>

      {plain.length > 0 && (
        <ul className="sr-only">
          {plain.map((item, i) => (
            <li key={i}>{item.label}</li>
          ))}
        </ul>
      )}
    </div>
  );
}