Launch Dock

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 {
  animate,
  motion,
  useInView,
  useMotionValue,
  useReducedMotion,
  type AnimationPlaybackControls,
} from "motion/react";

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

/**
 * Keep:
 * - Windows animate only transform and opacity, as hardware animations on their own layers, and
 *   closing animates opacity alone; nothing repaints mid-flight.
 * - The open window never moves: it dissolves in place under the new one (z-index 2 over 1), which
 *   is opaque from its first frame behind the icon, so two windows never cross or blend.
 * - A pick measures its icon before any state changes, so the launch's first frame never waits on
 *   layout.
 * - A launch turns round from wherever it is: a window still dissolving comes back in place instead
 *   of growing from its icon again.
 * - Closed windows stay mounted, `hidden` and `inert`, as tabpanels of a tablist with a roving
 *   `tabIndex`, so their content and state survive a switch.
 */
const TIMING = {
  /** A window growing up out of its icon, in seconds (the `duration` prop) and its curve. */
  launch: { duration: 0.3, ease: [0.22, 1, 0.36, 1] },
  /** The open one fading where it is, under the new one, at the default `duration`. */
  dissolve: { duration: 0.22, ease: "linear" },
  /** An icon rising under the pointer. */
  lift: { type: "spring", visualDuration: 0.25, bounce: 0.2 },
  /** And dipping while it's pressed. */
  press: { type: "spring", visualDuration: 0.12, bounce: 0 },
  /** The label and the dot moving between icons. */
  glide: { type: "spring", visualDuration: 0.26, bounce: 0 },
  /** The label appearing, in seconds. */
  show: { duration: 0.15, ease: [0.22, 1, 0.36, 1] },
  /** And going, in seconds. */
  hide: { duration: 0.12, ease: [0.22, 1, 0.36, 1] },
  /** Windows crossfading under reduced motion, in seconds. */
  fade: { duration: 0.2, ease: [0.22, 1, 0.36, 1] },
  /** The label waiting after the pointer leaves an icon, in ms. */
  leave: 120,
  /** The label staying over a tapped icon, in ms. */
  touchLabel: 1200,
  /** Each app staying up when `autoplay` is `true`, in ms. */
  autoplay: 4500,
} as const;

/* ─────────────────────────────────────────────────────────
 * LAUNCH DOCK STORYBOARD
 *
 *  rest      a window over a dock of rounded icons. The open app's
 *            window sits under the dock with its lower edge fading out
 *            behind it, and a 4px dot marks its icon
 *  hover     under a mouse the icon you're on rises 6px and grows to
 *            1.1 on a quick spring with a little give. One label hangs
 *            over the dock and glides from icon to icon, its width
 *            following the name; it shows at once and waits 120ms
 *            before it goes
 *  launch    pick an icon and, on the same frame, its window starts
 *            growing up out of it: from a copy small enough to hide
 *            behind the icon to full size in 0.3s on a strong ease-out,
 *            so most of the growth is over in the first 0.1s. It's
 *            opaque from the first frame (it starts hidden behind the
 *            icon), so two apps never blend, and the dot slides across
 *  dissolve  the open window doesn't move: it dissolves where it is
 *            (0.22s) while the new one grows over it, so nothing crosses
 *            and the stage is never empty
 *  smooth    windows move by transform and opacity only, as hardware
 *            animations on their own layers: nothing repaints while
 *            they fly, and a busy page can't stall them. The icons are
 *            measured at the click, before anything else happens
 *  autoplay  with autoplay the dot stretches into a 14px bar that fills
 *            while an app is up (4.5s each), then the next one
 *            launches. A pointer over the dock, focus inside it, a
 *            hidden tab or the dock out of view pauses it; picking an
 *            app stops it for good
 *  again     a launch turns round from wherever it is: click back fast
 *            and a dissolving window comes back in place, never queues
 *  touch     a tap launches, and the label shows over the tapped icon
 *            for 1.2s, since there's no hover to show it
 *  keys      the dock is a tablist. Tab lands on the open app, the
 *            arrows move along and launch, Home and End jump to the
 *            ends, and Tab carries on into the window, its tabpanel
 *  reduced   nothing flies or rises: windows crossfade in 0.2s, the
 *            label fades, and autoplay stays off
 * ───────────────────────────────────────────────────────── */

const DOCK = {
  tuck: 0.9, // share of the icon a window's smallest copy fills, so it hides behind it
  rise: 6, // px an icon rises under the pointer
  grow: 1.1, // scale it grows to
  dip: 0.92, // scale while it's pressed
  feather: 0.28, // share of the window's height that fades out behind the dock
  dot: 4, // px; the open app's dot
  bar: 14, // px; the dot while autoplay counts down
  labelPad: 20, // px of padding around the label's text
} as const;

// The window's corners at rest, per frame.
const RADIUS = { window: 12, card: 20, none: 0 } as const;
const AT_REST = "translate(0px, 0px) scale(1)";
const DEFAULT_SIZE: [number, number] = [960, 600];

const clamp = (value: number, min: number, max: number) => Math.min(max, Math.max(min, value));

export interface LaunchDockItem {
  /** A unique id. `value` and `onValueChange` use it. */
  id: string;
  /** The app's name: the label over the dock, the window's title and the icon's accessible name. */
  label: string;
  /** The dock icon. It's clipped to a rounded square, so a full-bleed `<img>` or SVG tile both work. */
  icon: React.ReactNode;
  /** What the window shows. It's laid out at `windowSize` and scaled down to fit, like a screenshot. */
  content: React.ReactNode;
  /** The window's title bar text, when it should say more than the label: a domain, a file name. */
  title?: React.ReactNode;
}

export interface LaunchDockProps
  extends Omit<React.HTMLAttributes<HTMLDivElement>, "defaultValue" | "onChange" | "children"> {
  /** The apps, in dock order. */
  items: LaunchDockItem[];
  /** The open app's id, when you control it. */
  value?: string;
  /** The app that's open at first. Defaults to the first one. */
  defaultValue?: string;
  /** Called with an app's id whenever it launches, and why: the visitor picked it, or autoplay moved on. */
  onValueChange?: (id: string, reason: "pick" | "autoplay") => void;
  /** Launch the next app on its own every 4.5s until the visitor picks one. A number sets the time in ms. */
  autoplay?: boolean | number;
  /** The size each window's content is laid out at, in px. Narrower containers scale it down to fit. */
  windowSize?: [number, number];
  /** What the content sits in: a desktop window with a title bar, a plain card, or nothing at all. */
  frame?: "window" | "card" | "none";
  /** Fade the window's lower edge out behind the dock. Turn it off to keep all of the content in view; the dock then sits under the window. */
  fade?: boolean;
  /** Seconds a window takes to grow up out of its icon. The open one dissolves in proportion, so it's gone just before the new one lands. */
  duration?: number;
  /** The scale an icon grows to under the pointer. `1` keeps it still but for the rise. */
  hoverScale?: number;
  /** The dock's accessible name. */
  dockLabel?: string;
  /** Classes for the dock's surface: its fill, ring and shadow. */
  trayClassName?: string;
  /** Classes for each window's surface: its fill, ring and corners. */
  windowClassName?: string;
}

/** Where a window hides behind its icon, as the transform that puts it there (origin top left). */
type Docked = string;

/* ── TitleBar ───────────────────────────────────────────── */

// The window's chrome: three lights and a centered title. Purely drawn; the lights don't act.
const BAR = "h-7 @[30rem]/launch-dock:h-9";

function TitleBar({ title }: { title: React.ReactNode }) {
  return (
    <div
      className={cn(
        BAR,
        "relative flex shrink-0 items-center border-b border-zinc-950/[0.06] bg-zinc-50/90 px-3 dark:border-white/[0.06] dark:bg-white/[0.04] @[30rem]/launch-dock:px-3.5",
      )}
    >
      <div aria-hidden className="flex gap-1.5 @[30rem]/launch-dock:gap-2">
        <span className="size-2.5 rounded-full bg-[#ff5f57] ring-1 ring-black/10 ring-inset @[30rem]/launch-dock:size-3" />
        <span className="size-2.5 rounded-full bg-[#febc2e] ring-1 ring-black/10 ring-inset @[30rem]/launch-dock:size-3" />
        <span className="size-2.5 rounded-full bg-[#28c840] ring-1 ring-black/10 ring-inset @[30rem]/launch-dock:size-3" />
      </div>
      <div className="pointer-events-none absolute inset-x-16 truncate text-center text-[11px] font-medium text-zinc-500 @[30rem]/launch-dock:inset-x-20 @[30rem]/launch-dock:text-xs dark:text-zinc-400">
        {title}
      </div>
    </div>
  );
}

/* ── DockWindow ─────────────────────────────────────────── */

// One app's window. It stays mounted, so its images load early and its state survives, and is
// hidden while closed. Opening animates only its transform and opacity, closing only its opacity,
// and both run as hardware animations: the window is rastered once, never repainted mid-flight.
const DockWindow = React.memo(function DockWindow({
  item,
  open,
  frame,
  fade,
  reduced,
  duration,
  docked,
  width,
  height,
  tabId,
  panelId,
  className,
}: {
  item: LaunchDockItem;
  open: boolean;
  frame: "window" | "card" | "none";
  fade: boolean;
  reduced: boolean;
  duration: number;
  docked: (id: string) => Docked | null;
  width: number;
  height: number;
  tabId: string;
  panelId: string;
  className?: string;
}) {
  const [present, setPresent] = React.useState(open);
  if (open && !present) setPresent(true);

  const outerRef = React.useRef<HTMLDivElement>(null);
  const flight = React.useRef<AnimationPlaybackControls | null>(null);
  // Settled ("open"/"closed") or on its way; a window still on its way turns round from where it is.
  const phase = React.useRef<"open" | "closed" | "opening" | "closing">(open ? "open" : "closed");
  // The `open` the window last moved for. Strict Mode replays effects on mount; this keeps that
  // replay (and any re-render that doesn't change `open`) from starting a flight.
  const shown = React.useRef(open);
  const rest = RADIUS[frame];

  React.useLayoutEffect(() => {
    if (shown.current === open) return;
    shown.current = open;
    const outer = outerRef.current;
    if (!outer) return;
    flight.current?.stop();
    const settled = phase.current === "open" || phase.current === "closed";
    phase.current = open ? "opening" : "closing";
    const done = () => {
      phase.current = open ? "open" : "closed";
      if (!open) setPresent(false);
    };

    const target = reduced || !open ? null : docked(item.id);
    if (!target && (open || reduced)) {
      flight.current = animate(
        outer,
        { transform: AT_REST, opacity: open ? [0, 1] : 0 },
        { ...TIMING.fade, transform: { duration: 0 }, onComplete: done },
      );
    } else if (open) {
      // From behind the icon on a fresh launch; from wherever it is if it was still leaving.
      flight.current = animate(
        outer,
        settled ? { transform: [target, AT_REST], opacity: 1 } : { transform: AT_REST, opacity: 1 },
        { ...TIMING.launch, duration, opacity: { duration: settled ? 0 : TIMING.fade.duration }, onComplete: done },
      );
    } else {
      // It stays put and dissolves under the window growing over it, so nothing crosses.
      const dissolve = TIMING.dissolve.duration * (duration / TIMING.launch.duration);
      flight.current = animate(outer, { opacity: 0 }, { ...TIMING.dissolve, duration: dissolve, onComplete: done });
    }
  }, [open, reduced, docked, item.id, duration]);

  React.useEffect(() => () => flight.current?.stop(), []);

  return (
    <div
      ref={outerRef}
      id={panelId}
      role="tabpanel"
      aria-labelledby={tabId}
      hidden={!present}
      inert={!open}
      data-launch-dock-window={item.id}
      data-state={open ? "open" : "closed"}
      style={{ zIndex: open ? 2 : 1 }}
      className="absolute inset-x-0 top-0 origin-top-left [will-change:transform,opacity]"
    >
      {frame !== "none" ? (
        <div
          aria-hidden
          style={{ bottom: fade ? `${DOCK.feather * 100 + 8}%` : 0, borderRadius: rest }}
          className="pointer-events-none absolute inset-x-0 top-0 shadow-[0_24px_60px_-18px_rgb(0_0_0/0.3),0_8px_20px_-10px_rgb(0_0_0/0.18)] dark:shadow-[0_24px_60px_-18px_rgb(0_0_0/0.75),0_8px_20px_-10px_rgb(0_0_0/0.5)]"
        />
      ) : null}
      <div
        style={{ borderRadius: rest }}
        className={cn(
          "relative flex flex-col overflow-hidden",
          fade && "[mask-image:linear-gradient(to_bottom,#000_72%,transparent)]",
          frame === "window" && "bg-white ring-1 ring-zinc-950/10 ring-inset dark:bg-zinc-900 dark:ring-white/10",
          frame === "card" && "bg-white ring-1 ring-zinc-950/[0.07] ring-inset dark:bg-zinc-900 dark:ring-white/10",
          className,
        )}
      >
        {frame === "window" ? <TitleBar title={item.title ?? item.label} /> : null}
        <div className="relative w-full overflow-hidden" style={{ aspectRatio: `${width} / ${height}` }}>
          <div
            className="invisible absolute top-0 left-0 origin-top-left group-data-[measured]/launch-dock-stage:visible"
            style={{ width, height, transform: "scale(var(--launch-dock-scale, 1))" }}
          >
            {item.content}
          </div>
        </div>
      </div>
    </div>
  );
});

/* ── DockTab ────────────────────────────────────────────── */

type TabEvent = "down" | "up" | "enter" | "leave" | "focus" | "blur" | "click";

// One icon in the dock. It's memoized and hands every event to one stable callback, so a switch
// re-renders only the icons whose state changed, not the whole dock.
const DockTab = React.memo(function DockTab({
  item,
  active,
  lifted,
  dipped,
  grow,
  tabId,
  panelId,
  register,
  onTabEvent,
}: {
  item: LaunchDockItem;
  active: boolean;
  lifted: boolean;
  dipped: boolean;
  grow: number;
  tabId: string;
  panelId: string;
  register: (kind: "tab" | "tile", id: string, node: HTMLElement | null) => void;
  onTabEvent: (type: TabEvent, id: string, event: React.SyntheticEvent<HTMLElement>) => void;
}) {
  return (
    <button
      ref={(node) => register("tab", item.id, node)}
      type="button"
      role="tab"
      id={tabId}
      aria-selected={active}
      aria-controls={panelId}
      aria-label={item.label}
      tabIndex={active ? 0 : -1}
      data-launch-dock-item={item.id}
      data-active={active ? "" : undefined}
      className="group/launch-dock-tab relative block shrink-0 cursor-pointer rounded-[var(--launch-dock-corner)] outline-none select-none [-webkit-tap-highlight-color:transparent] after:absolute after:-inset-1 after:content-['']"
      onPointerDown={(event) => onTabEvent("down", item.id, event)}
      onPointerUp={(event) => onTabEvent("up", item.id, event)}
      onPointerCancel={(event) => onTabEvent("up", item.id, event)}
      onPointerEnter={(event) => onTabEvent("enter", item.id, event)}
      onPointerLeave={(event) => onTabEvent("leave", item.id, event)}
      onFocus={(event) => onTabEvent("focus", item.id, event)}
      onBlur={(event) => onTabEvent("blur", item.id, event)}
      onClick={(event) => onTabEvent("click", item.id, event)}
    >
      <motion.span
        ref={(node) => register("tile", item.id, node)}
        initial={false}
        animate={{
          transform: `translateY(${lifted ? -DOCK.rise : 0}px) scale(${dipped ? DOCK.dip : lifted ? grow : 1})`,
        }}
        transition={dipped ? TIMING.press : TIMING.lift}
        className="block size-[var(--launch-dock-icon)] origin-bottom overflow-hidden rounded-[var(--launch-dock-corner)] shadow-[0_1px_2px_rgb(0_0_0/0.12),0_4px_10px_-4px_rgb(0_0_0/0.25)] outline-offset-2 group-focus-visible/launch-dock-tab:outline-2 group-focus-visible/launch-dock-tab:outline-zinc-950 dark:group-focus-visible/launch-dock-tab:outline-white [&>img]:size-full [&>img]:object-cover [&>svg]:size-full"
      >
        {item.icon}
      </motion.span>
    </button>
  );
});

/* ── LaunchDock ─────────────────────────────────────────── */

export function LaunchDock({
  items,
  value,
  defaultValue,
  onValueChange,
  autoplay = false,
  windowSize = DEFAULT_SIZE,
  frame = "window",
  fade = true,
  duration = TIMING.launch.duration,
  hoverScale = DOCK.grow,
  dockLabel = "Apps",
  trayClassName,
  windowClassName,
  className,
  style,
  onPointerEnter,
  onPointerLeave,
  onFocus,
  onBlur,
  ...props
}: LaunchDockProps) {
  const reduced = useReducedMotion() ?? false;
  const uid = React.useId();
  const [width, height] = windowSize;

  const [inner, setInner] = React.useState(defaultValue);
  const requested = value ?? inner;
  const active = items.some((item) => item.id === requested) ? requested : items[0]?.id;

  const rootRef = React.useRef<HTMLDivElement>(null);
  const stageRef = React.useRef<HTMLDivElement>(null);
  const trayRef = React.useRef<HTMLDivElement>(null);
  const tabs = React.useRef(new Map<string, HTMLElement>());
  const tiles = React.useRef(new Map<string, HTMLElement>());
  const labelWidths = React.useRef(new Map<string, number>());
  const measurer = React.useRef<HTMLDivElement>(null);
  const register = React.useCallback((kind: "tab" | "tile", id: string, node: HTMLElement | null) => {
    const map = kind === "tab" ? tabs.current : tiles.current;
    if (node) map.set(id, node);
    else map.delete(id);
  }, []);

  // Hover lifts the icon under a mouse; the label follows hover, keyboard focus or a tap.
  const [hover, setHover] = React.useState<string | null>(null);
  const [pressed, setPressed] = React.useState<string | null>(null);
  const [chip, setChip] = React.useState<{ id: string; on: boolean } | null>(null);
  const leaveTimer = React.useRef<number | undefined>(undefined);
  const flashTimer = React.useRef<number | undefined>(undefined);
  const pointerType = React.useRef<string>("mouse");

  // Autoplay runs until the visitor picks something, and holds while they're looking closely.
  const interval = autoplay === true ? TIMING.autoplay : typeof autoplay === "number" ? autoplay : 0;
  const [stopped, setStopped] = React.useState(false);
  const running = interval > 0 && !stopped && !reduced && items.length > 1;
  const [hovering, setHovering] = React.useState(false);
  const [focusWithin, setFocusWithin] = React.useState(false);
  const [pageHidden, setPageHidden] = React.useState(false);
  const inView = useInView(rootRef, { amount: 0.4 });
  const paused = hovering || focusWithin || pageHidden || !inView;

  const labelX = useMotionValue(0);
  const labelW = useMotionValue(0);
  const dotX = useMotionValue(0);
  const dotW = useMotionValue<number>(DOCK.dot);
  const fill = useMotionValue(1);
  const elapsed = React.useRef(0);
  const activeRef = React.useRef(active);
  const placed = React.useRef({ label: false, dot: false });

  React.useLayoutEffect(() => {
    activeRef.current = active;
  }, [active]);

  // Where a window hides behind its icon, worked out from the icon as it sits right now (lifted,
  // pressed). A pick measures it before anything changes, so the frame that starts the launch
  // never waits on layout.
  const snapshots = React.useRef(new Map<string, Docked>());
  const dockedNow = React.useCallback((id: string): Docked | null => {
    const stage = stageRef.current;
    const tile = tiles.current.get(id);
    if (!stage || !tile || !stage.offsetWidth || !tile.offsetWidth) return null;
    const box = stage.getBoundingClientRect();
    const rect = tile.getBoundingClientRect();
    const k = box.width / stage.offsetWidth || 1; // a scaled ancestor, in or out
    const W = stage.offsetWidth;
    const H = stage.offsetHeight;
    const scale = (Math.min(rect.width / k / W, rect.height / k / H) || 0.05) * DOCK.tuck;
    const cx = (rect.left - box.left + rect.width / 2) / k;
    const cy = (rect.top - box.top + rect.height / 2) / k;
    return `translate(${cx - (W / 2) * scale}px, ${cy - (H / 2) * scale}px) scale(${scale})`;
  }, []);
  const docked = React.useCallback(
    (id: string) => {
      const taken = snapshots.current.get(id);
      snapshots.current.delete(id);
      return taken ?? dockedNow(id);
    },
    [dockedNow],
  );

  const select = React.useCallback(
    (id: string, reason: "pick" | "autoplay") => {
      if (id === activeRef.current) return;
      const snapshot = dockedNow(id);
      if (snapshot) snapshots.current.set(id, snapshot);
      activeRef.current = id;
      elapsed.current = 0;
      setInner(id);
      onValueChange?.(id, reason);
    },
    [onValueChange, dockedNow],
  );

  const choose = (id: string) => {
    setStopped(true);
    select(id, "pick");
  };

  // The stage scales every window's content from its design size to the width it gets.
  React.useLayoutEffect(() => {
    const stage = stageRef.current;
    if (!stage) return;
    const fit = () => {
      stage.style.setProperty("--launch-dock-scale", String(stage.offsetWidth / width));
      stage.dataset.measured = "";
    };
    fit();
    const observer = new ResizeObserver(fit);
    observer.observe(stage);
    return () => observer.disconnect();
  }, [width]);

  // Where the label and the dot sit over an icon, in the tray's px.
  const centerOf = (id: string) => {
    const tab = tabs.current.get(id);
    return tab ? tab.offsetLeft + tab.offsetWidth / 2 : 0;
  };

  const placeLabel = React.useCallback((id: string, glide: boolean) => {
    const w = (labelWidths.current.get(id) ?? 48) + DOCK.labelPad;
    const x = centerOf(id) - w / 2;
    if (glide) {
      animate(labelX, x, TIMING.glide);
      animate(labelW, w, TIMING.glide);
    } else {
      labelX.jump(x);
      labelW.jump(w);
    }
  }, [labelX, labelW]);

  const placeDot = React.useCallback(
    (id: string | undefined, glide: boolean) => {
      if (!id) return;
      const w = running ? DOCK.bar : DOCK.dot;
      const x = centerOf(id) - w / 2;
      if (glide) {
        animate(dotX, x, TIMING.glide);
        animate(dotW, w, TIMING.glide);
      } else {
        dotX.jump(x);
        dotW.jump(w);
      }
    },
    [running, dotX, dotW],
  );

  // Measure every label once (and again when fonts land), so the label's width can glide.
  React.useLayoutEffect(() => {
    const box = measurer.current;
    if (!box) return;
    const read = () => {
      box.querySelectorAll<HTMLElement>("[data-label]").forEach((node) => {
        labelWidths.current.set(node.dataset.label!, node.offsetWidth);
      });
    };
    read();
    let live = true;
    document.fonts?.ready.then(() => {
      if (live) read();
    });
    return () => {
      live = false;
    };
  }, [items]);

  React.useLayoutEffect(() => {
    placeDot(active, placed.current.dot);
    placed.current.dot = true;
  }, [active, placeDot]);

  React.useLayoutEffect(() => {
    if (!chip?.on) return;
    placeLabel(chip.id, placed.current.label);
    placed.current.label = true;
  }, [chip, placeLabel]);

  // Icons resize with the container (cqi), so keep the label and dot over theirs.
  React.useEffect(() => {
    const tray = trayRef.current;
    if (!tray) return;
    const observer = new ResizeObserver(() => {
      placeDot(activeRef.current, false);
      if (chip) placeLabel(chip.id, false);
    });
    observer.observe(tray);
    return () => observer.disconnect();
  }, [chip, placeDot, placeLabel]);

  React.useEffect(() => {
    const update = () => setPageHidden(document.visibilityState === "hidden");
    document.addEventListener("visibilitychange", update);
    return () => document.removeEventListener("visibilitychange", update);
  }, []);

  // The countdown: a plain rAF clock that only runs while nothing pauses it, so the bar holds
  // where it is and carries on from there.
  React.useEffect(() => {
    if (!running) {
      fill.set(1);
      return;
    }
    fill.set(clamp(elapsed.current / interval, 0, 1));
    if (paused) return;
    let frame = 0;
    let last = performance.now();
    const tick = (now: number) => {
      elapsed.current += now - last;
      last = now;
      if (elapsed.current >= interval) {
        const index = items.findIndex((item) => item.id === activeRef.current);
        select(items[(index + 1) % items.length].id, "autoplay");
      }
      fill.set(clamp(elapsed.current / interval, 0, 1));
      frame = requestAnimationFrame(tick);
    };
    frame = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(frame);
  }, [running, paused, interval, items, select, fill]);

  React.useEffect(
    () => () => {
      window.clearTimeout(leaveTimer.current);
      window.clearTimeout(flashTimer.current);
    },
    [],
  );

  const showChip = (id: string) => {
    window.clearTimeout(leaveTimer.current);
    window.clearTimeout(flashTimer.current);
    setChip({ id, on: true });
  };
  const hideChip = (delay: number) => {
    window.clearTimeout(leaveTimer.current);
    leaveTimer.current = window.setTimeout(() => {
      setChip((current) => (current ? { ...current, on: false } : current));
      setHover(null);
    }, delay);
  };

  const handleTab = (type: TabEvent, id: string, event: React.SyntheticEvent<HTMLElement>) => {
    const pointer = (event as React.PointerEvent<HTMLElement>).pointerType;
    switch (type) {
      case "down":
        pointerType.current = pointer;
        if ((event as React.PointerEvent<HTMLElement>).button === 0) setPressed(id);
        break;
      case "up":
        setPressed(null);
        break;
      case "enter":
        if (pointer !== "mouse") break;
        setHover(id);
        showChip(id);
        break;
      case "leave":
        setPressed(null);
        if (pointer === "mouse") hideChip(TIMING.leave);
        break;
      case "focus":
        if (event.currentTarget.matches(":focus-visible")) showChip(id);
        break;
      case "blur":
        hideChip(0);
        break;
      case "click":
        if (pointerType.current !== "mouse" && pointerType.current !== "keyboard") {
          showChip(id);
          flashTimer.current = window.setTimeout(
            () => setChip((current) => (current ? { ...current, on: false } : current)),
            TIMING.touchLabel,
          );
        }
        pointerType.current = "mouse";
        choose(id);
        break;
    }
  };
  const tabHandler = React.useRef(handleTab);
  React.useLayoutEffect(() => {
    tabHandler.current = handleTab;
  });
  const onTabEvent = React.useCallback(
    (type: TabEvent, id: string, event: React.SyntheticEvent<HTMLElement>) => tabHandler.current(type, id, event),
    [],
  );

  const onKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {
    const index = items.findIndex((item) => item.id === (event.target as HTMLElement).dataset.launchDockItem);
    if (index < 0) return;
    const last = items.length - 1;
    const next =
      event.key === "ArrowRight" || event.key === "ArrowDown"
        ? (index + 1) % items.length
        : event.key === "ArrowLeft" || event.key === "ArrowUp"
          ? (index - 1 + items.length) % items.length
          : event.key === "Home"
            ? 0
            : event.key === "End"
              ? last
              : -1;
    if (next < 0) return;
    event.preventDefault();
    pointerType.current = "keyboard";
    const id = items[next].id;
    tabs.current.get(id)?.focus();
    choose(id);
  };

  return (
    <div
      ref={rootRef}
      data-launch-dock=""
      className={cn("@container/launch-dock relative flex w-full flex-col items-center", className)}
      style={
        {
          "--launch-dock-n": Math.max(items.length, 1),
          "--launch-dock-icon": "clamp(1.75rem, min(calc((100cqi - 2.5rem) / var(--launch-dock-n) - 0.625rem), 9cqi), 3.5rem)",
          "--launch-dock-corner": "calc(var(--launch-dock-icon) * var(--launch-dock-roundness, 0.225))",
          "--launch-dock-gap": "clamp(0.375rem, calc(var(--launch-dock-icon) * 0.18), 0.625rem)",
          ...style,
        } as React.CSSProperties
      }
      onPointerEnter={(event) => {
        if (event.pointerType === "mouse") setHovering(true);
        onPointerEnter?.(event);
      }}
      onPointerLeave={(event) => {
        setHovering(false);
        onPointerLeave?.(event);
      }}
      onFocus={(event) => {
        setFocusWithin(true);
        onFocus?.(event);
      }}
      onBlur={(event) => {
        if (!event.currentTarget.contains(event.relatedTarget as Node | null)) setFocusWithin(false);
        onBlur?.(event);
      }}
      {...props}
    >
      <div
        ref={stageRef}
        data-launch-dock-stage=""
        className="group/launch-dock-stage relative z-0 w-full"
        style={{ maxWidth: width }}
      >
        {/* Holds the stage open at the window's size; the windows themselves are stacked over it. */}
        <div aria-hidden className="pointer-events-none invisible flex flex-col">
          {frame === "window" ? <div className={cn(BAR, "shrink-0")} /> : null}
          <div style={{ aspectRatio: `${width} / ${height}` }} />
        </div>
        {items.map((item) => (
          <DockWindow
            key={item.id}
            item={item}
            open={item.id === active}
            frame={frame}
            fade={fade}
            reduced={reduced}
            duration={Math.max(0.01, duration)}
            docked={docked}
            width={width}
            height={height}
            tabId={`${uid}-tab-${item.id}`}
            panelId={`${uid}-panel-${item.id}`}
            className={windowClassName}
          />
        ))}
      </div>

      <div
        className={cn(
          "relative z-10 flex max-w-full justify-center px-2",
          fade ? "-mt-[calc(var(--launch-dock-icon)*0.5+1.25rem)]" : "mt-4",
        )}
      >
        <div
          ref={trayRef}
          role="tablist"
          aria-label={dockLabel}
          aria-orientation="horizontal"
          data-launch-dock-tray=""
          onKeyDown={onKeyDown}
          className={cn(
            "relative flex items-end gap-[var(--launch-dock-gap)] rounded-[calc(var(--launch-dock-corner)+0.5rem)] bg-white/90 p-2 shadow-[0_12px_32px_-12px_rgb(0_0_0/0.28),0_2px_6px_-2px_rgb(0_0_0/0.08)] ring-1 ring-zinc-950/[0.07] dark:bg-zinc-900/90 dark:shadow-[0_12px_32px_-12px_rgb(0_0_0/0.7)] dark:ring-white/10",
            trayClassName,
          )}
        >
          {items.map((item) => (
            <DockTab
              key={item.id}
              item={item}
              active={item.id === active}
              lifted={!reduced && hover === item.id}
              dipped={!reduced && pressed === item.id}
              grow={hoverScale}
              tabId={`${uid}-tab-${item.id}`}
              panelId={`${uid}-panel-${item.id}`}
              register={register}
              onTabEvent={onTabEvent}
            />
          ))}

          {/* The open app's dot, which counts down as a bar while autoplay runs. */}
          <motion.span
            aria-hidden
            style={{ x: dotX, width: dotW }}
            className="pointer-events-none absolute bottom-[3px] left-0 h-1 overflow-hidden rounded-full bg-zinc-950/20 dark:bg-white/25"
          >
            <motion.span
              style={{ scaleX: fill }}
              className="absolute inset-0 origin-left rounded-full bg-zinc-950/60 dark:bg-white/75"
            />
          </motion.span>

          {/* One label for the whole dock: it glides from icon to icon instead of blinking. */}
          <motion.div
            aria-hidden
            style={{ x: labelX, width: labelW }}
            className="pointer-events-none absolute bottom-full left-0 mb-3 flex justify-center"
          >
            <motion.div
              initial={false}
              animate={
                chip?.on
                  ? { opacity: 1, transform: "translateY(0px) scale(1)" }
                  : { opacity: 0, transform: "translateY(4px) scale(0.96)" }
              }
              transition={{
                ...(chip?.on ? TIMING.show : TIMING.hide),
                transform: reduced ? { duration: 0 } : chip?.on ? TIMING.show : TIMING.hide,
              }}
              className="w-full origin-bottom rounded-lg bg-zinc-900 py-1 text-center text-xs font-medium whitespace-nowrap text-white shadow-[0_4px_12px_-4px_rgb(0_0_0/0.35)] ring-1 ring-white/10 dark:bg-zinc-100/95 dark:text-zinc-900 dark:ring-zinc-950/10"
            >
              {items.find((item) => item.id === chip?.id)?.label ?? ""}
            </motion.div>
          </motion.div>

          {/* Hidden copies of every label, measured once so the label's width can glide. */}
          <div ref={measurer} aria-hidden className="pointer-events-none invisible absolute top-0 left-0 flex">
            {items.map((item) => (
              <span key={item.id} data-label={item.id} className="text-xs font-medium whitespace-nowrap">
                {item.label}
              </span>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}