Expand Card

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,
  useMotionValue,
  useTransform,
  type AnimationPlaybackControlsWithThen,
} from "motion/react";

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

/* ─────────────────────────────────────────────────────────
 * EXPAND CARD STORYBOARD
 *
 *  press   the card sinks a little under the finger
 *  open    it lifts out of the page and grows to fill the
 *          screen on a spring. Nothing is scaled up: the card
 *          is the article's own header seen through a smaller
 *          window, so the window just widens. Corners square
 *          off, the image uncrops, the title rides along at
 *          its own size, and the page dims behind
 *  reveal  the body fades up under the cover as it lands
 *  read    the article scrolls on its own; the page stays put
 *  lift    at the top, pull down (or swipe in from the left
 *          edge) and the article comes loose under the finger,
 *          shrinking and rounding as the page shows through
 *  home    let go moving down and it flies back into its slot
 *          at the finger's speed, scrolling the page so the
 *          slot is in view; let go moving up and it springs
 *          back to full screen
 *  catch   grab it while it's moving, either way, to take it
 *          back
 *  close   ×, Esc, a click on the page around it, or the back
 *          button
 * ───────────────────────────────────────────────────────── */

const EXPAND = {
  open: { type: "spring", visualDuration: 0.5, bounce: 0.14 },
  home: { type: "spring", visualDuration: 0.42, bounce: 0.12 },
  settle: { type: "spring", visualDuration: 0.36, bounce: 0.2 }, // a cancelled drag springs back
  scroll: { type: "spring", visualDuration: 0.42, bounce: 0 }, // the page brings the slot into view
  reveal: { duration: 0.45, ease: [0.22, 1, 0.36, 1], delay: 0.16 },
  fadeIn: { duration: 0.28, ease: "easeOut" },
  fadeOut: { duration: 0.16, ease: "easeOut" },
  quick: { duration: 0.2, ease: "easeOut" }, // reduced motion: snaps and fades instead of springs
  narrow: 640, // px; narrower screens give the article the whole screen
  margin: 40, // px kept around the article on wider screens, at most
  radius: 24, // px; corners of the open article on wider screens, and of a lifted one
  edge: 24, // px from the article's left edge where a swipe back can start
  lock: 6, // px a mouse press travels before it drags
  minScale: 0.6, // a lifted article shrinks no smaller than this
  shrink: 1.4, // drag distance, in screen heights, to reach minScale
  fade: 0.5, // drag distance, in screen heights, to bring the page back into view
  dismiss: 0.12, // projected drag, in screen heights, that sends it home
  flick: 400, // px/s; a faster release counts as a flick
} as const;

type Spring = { type: "spring"; visualDuration: number; bounce: number };
type Rect = { x: number; y: number; width: number; height: number };
type Viewport = { width: number; height: number };
type Frame = { rect: Rect; radius: number };
/** The card on screen: its layout box, the scale it shows at (pressed, or in a scaled parent), its corners in screen px. */
type Pose = { rect: Rect; scale: number; radius: number };
type Scroll = { element: Element; axis: "top" | "left"; to: number };
type Phase = "opening" | "open" | "lifting" | "closing";

type Session = {
  key: number;
  /** Where the card is. Null when it isn't on screen: the article fades in instead. */
  origin: Pose | null;
  /** The cover's height in the open article. */
  cover: number;
  cardWidth: number;
  /** The card's own look, so the cover sits on the same ground in the article. */
  skin: React.CSSProperties;
  viewport: Viewport;
  reduceMotion: boolean;
};

type Drag = {
  source: "touch" | "mouse";
  pointer: number;
  mode: "pending" | "lift" | "native";
  axis: "x" | "y";
  pull: boolean; // the article is at its top, so pulling down lifts it
  edge: boolean; // started at the left edge, so swiping right lifts it
  block: boolean; // nothing to scroll, so keep the gesture from the page behind
  startX: number;
  startY: number;
  samples: { x: number; y: number; t: number }[];
  // lift: the article's center, the point under the finger in its own px, and where it started
  baseX: number;
  baseY: number;
  grabX: number;
  grabY: number;
  scaleFrom: number;
  backdropFrom: number;
  radiusFrom: number;
};

type ArticleHandle = { close: () => void; reopen: () => void };

export interface ExpandCardProps extends Omit<React.HTMLAttributes<HTMLElement>, "children"> {
  /**
   * The card's face, and the top of the open article. It fills the card, then
   * the article's header, at its own size: nothing is scaled. Give its text a
   * max width so it wraps the same in both.
   */
  cover: React.ReactNode;
  /** The article's body, revealed under the cover. Rendered only while open. */
  children?: React.ReactNode;
  /**
   * Gives the article a link of its own, `#id`: opening it adds a history
   * entry (so the back button closes it), and loading the link opens it. Also
   * the card's DOM id.
   */
  id?: string;
  /** Opens or closes the article. Leave unset to let the card manage it. */
  open?: boolean;
  /** Called when the reader opens or closes the article. */
  onOpenChange?: (open: boolean) => void;
  /** Width of the open article on screens 640px and wider, in px. Narrower screens get the whole screen. */
  width?: number;
  /** Height of the cover in the open article, in px. Defaults to the card's height. */
  coverHeight?: number;
  /** Classes for the open article. Defaults to `bg-background text-foreground`. */
  articleClassName?: string;
  /** Shown in place of the body while it suspends. Defaults to a few placeholder lines. */
  fallback?: React.ReactNode;
}

/**
 * A card that opens into a full article: it grows from its place in the page
 * to fill the screen, and shrinks back into it when it's pulled down.
 */
export function ExpandCard({
  cover,
  children,
  id,
  open,
  onOpenChange,
  width = 720,
  coverHeight,
  articleClassName,
  fallback,
  className,
  onClick,
  onDragStart,
  ...props
}: ExpandCardProps) {
  const cardRef = React.useRef<HTMLElement | null>(null);
  const articleRef = React.useRef<ArticleHandle | null>(null);
  const [session, setSession] = React.useState<Session | null>(null);
  const live = React.useRef({
    sessions: 0,
    open: false,
    pushed: false,
    deepLinked: false,
    restoration: null as ScrollRestoration | null,
  });

  // Is the article the one the URL points at?
  const linked = () => id !== undefined && readHash() === id;

  // Give the article its own history entry, so the back button closes it.
  const push = (slug: string) => {
    const state = live.current;
    // Going back to the page would restore its scroll from when the article
    // opened, undoing the scroll that brings the card's slot into view. Scroll
    // restoration is set per entry, so it's turned off on the page's entry
    // before the article's goes on top, and turned back on when we return.
    state.restoration ??= window.history.scrollRestoration;
    window.history.scrollRestoration = "manual";
    window.history.pushState(window.history.state, "", `#${encodeURIComponent(slug)}`);
    state.pushed = true;
  };

  const link = () => {
    if (id !== undefined && !linked()) push(id);
  };

  // Closed: take the entry back off, or drop the link from the URL.
  const unlink = () => {
    const state = live.current;
    const pushed = state.pushed;
    state.pushed = false;
    if (!linked()) return;
    if (pushed) window.history.back();
    else window.history.replaceState(window.history.state, "", location.pathname + location.search);
  };

  const commit = (next: boolean, fromProp = false) => {
    const state = live.current;
    if (state.open === next) return;
    state.open = next;
    if (next) link();
    if (!fromProp) onOpenChange?.(next);
  };

  const show = (instant = false, fromProp = false) => {
    if (articleRef.current) {
      // Still on its way home: catch it.
      articleRef.current.reopen();
      return;
    }
    const card = cardRef.current;
    if (!card) return;
    const viewport = readViewport();
    const reduceMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
    const next: Session = {
      key: ++live.current.sessions,
      origin: instant || reduceMotion ? null : poseOf(card, viewport),
      cover: coverHeight ?? card.offsetHeight,
      cardWidth: card.offsetWidth,
      skin: skinOf(card),
      viewport,
      reduceMotion,
    };
    setSession((current) => current ?? next);
    commit(true, fromProp);
  };

  // Listeners that outlive a render call the latest versions of these.
  const actions = React.useRef({ show, push });
  React.useLayoutEffect(() => {
    actions.current = { show, push };
  });

  // The back and forward buttons, and links to `#id` elsewhere on the page.
  React.useEffect(() => {
    if (id === undefined) return;
    const sync = () => {
      const state = live.current;
      const wanted = readHash() === id;
      if (!wanted && state.restoration) {
        // Back on the page's own entry: give it its scroll restoration back,
        // once the browser is done with this traversal (it restores, or
        // doesn't, after popstate).
        const restoration = state.restoration;
        state.restoration = null;
        window.setTimeout(() => (window.history.scrollRestoration = restoration));
      }
      if (wanted && !state.open) {
        state.pushed = true; // the entry before it is this page
        actions.current.show();
      } else if (!wanted && state.open) {
        state.pushed = false;
        articleRef.current?.close();
      }
    };
    window.addEventListener("popstate", sync);
    return () => window.removeEventListener("popstate", sync);
  }, [id]);

  // A link straight to the article opens it. The page goes under it in
  // history, so the back button closes the article rather than leaving.
  React.useEffect(() => {
    const state = live.current;
    if (id === undefined || state.deepLinked || readHash() !== id) return;
    state.deepLinked = true;
    window.history.replaceState(window.history.state, "", location.pathname + location.search);
    actions.current.push(id);
    actions.current.show(true);
  }, [id]);

  // Controlled: follow `open`.
  React.useEffect(() => {
    if (open === undefined || open === live.current.open) return;
    if (open) actions.current.show(false, true);
    else {
      live.current.open = false;
      articleRef.current?.close();
    }
  }, [open]);

  const Card = (id === undefined ? "button" : "a") as React.ElementType;

  return (
    <>
      <Card
        {...props}
        ref={cardRef}
        id={id}
        {...(id === undefined ? { type: "button" } : { href: `#${encodeURIComponent(id)}` })}
        aria-haspopup="dialog"
        className={cn(
          "relative block cursor-pointer overflow-hidden text-start outline-none select-none",
          "[-webkit-tap-highlight-color:transparent] [-webkit-touch-callout:none]",
          "transition-[scale] duration-300 ease-out active:scale-[0.97] active:duration-150",
          "motion-reduce:transition-none motion-reduce:active:scale-100",
          "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-foreground",
          className,
        )}
        onClick={(event: React.MouseEvent<HTMLElement>) => {
          onClick?.(event);
          if (event.defaultPrevented) return;
          // A link opened in a new tab or window opens straight into the article there.
          const elsewhere = event.metaKey || event.ctrlKey || event.shiftKey || event.altKey;
          if (id !== undefined && (elsewhere || event.button !== 0)) return;
          event.preventDefault();
          show();
        }}
        onDragStart={(event: React.DragEvent<HTMLElement>) => {
          onDragStart?.(event);
          event.preventDefault();
        }}
      >
        <div className="relative size-full">{cover}</div>
      </Card>

      {session ? (
        <Article
          key={session.key}
          session={session}
          card={cardRef}
          handleRef={articleRef}
          cover={cover}
          width={width}
          className={articleClassName}
          fallback={fallback}
          onIntent={(next) => commit(next)}
          onClosed={() => {
            setSession(null);
            unlink();
          }}
        >
          {children}
        </Article>
      ) : null}
    </>
  );
}

function Article({
  session,
  card,
  handleRef,
  cover,
  children,
  width,
  className,
  fallback,
  onIntent,
  onClosed,
}: {
  session: Session;
  card: React.RefObject<HTMLElement | null>;
  handleRef: React.RefObject<ArticleHandle | null>;
  cover: React.ReactNode;
  children: React.ReactNode;
  width: number;
  className?: string;
  fallback?: React.ReactNode;
  onIntent: (open: boolean) => void;
  onClosed: () => void;
}) {
  const { origin, reduceMotion } = session;
  const [viewport, setViewport] = React.useState(session.viewport);
  const frame = frameOf(viewport, Math.max(width, session.cardWidth));
  const titleId = React.useId();

  const dialogRef = React.useRef<HTMLDialogElement>(null);
  const shellRef = React.useRef<HTMLDivElement>(null);
  const scrollerRef = React.useRef<HTMLDivElement>(null);
  const coverRef = React.useRef<HTMLDivElement>(null);
  const live = React.useRef({
    phase: "opening" as Phase,
    generation: 0,
    done: false,
    hidden: null as HTMLElement | null,
    drag: null as Drag | null,
    runs: [] as AnimationPlaybackControlsWithThen[],
    frame,
    viewport,
  });

  // The article's box (its layout size, so the cover lays out at real size),
  // plus a drag offset and scale on top.
  const start = origin?.rect ?? frame.rect;
  const left = useMotionValue(start.x);
  const top = useMotionValue(start.y);
  const boxWidth = useMotionValue(start.width);
  const boxHeight = useMotionValue(start.height);
  const coverHeight = useMotionValue(origin ? origin.rect.height : session.cover);
  const dx = useMotionValue(0);
  const dy = useMotionValue(0);
  const scale = useMotionValue(origin?.scale ?? (reduceMotion ? 1 : 0.96));
  const radius = useMotionValue(origin?.radius ?? frame.radius); // screen px
  const opacity = useMotionValue(origin ? 1 : 0);
  const backdrop = useMotionValue(0);
  const reveal = useMotionValue(origin ? 0 : 1); // the body and the close button
  const x = useTransform(() => left.get() + dx.get());
  const y = useTransform(() => top.get() + dy.get());
  const borderRadius = useTransform(() => radius.get() / Math.max(scale.get(), 0.01));
  const bodyY = useTransform(() => (1 - reveal.get()) * 20);
  const shadow = useTransform(
    () => `0 24px 64px -16px rgb(0 0 0 / ${(0.4 * backdrop.get()).toFixed(3)})`,
  );

  const stop = () => {
    const state = live.current;
    for (const value of [left, top, boxWidth, boxHeight, coverHeight, dx, dy, scale, radius, opacity, backdrop, reveal]) {
      value.stop();
    }
    for (const run of state.runs) run.stop();
    state.runs = [];
  };

  const setScrollable = (scrollable: boolean) => {
    const scroller = scrollerRef.current;
    if (scroller) scroller.style.overflowY = scrollable ? "auto" : "hidden";
  };

  // Grow into the open article: on open, after a cancelled drag, or when
  // caught on its way home.
  const expand = (velocity = { x: 0, y: 0 }, spring: Spring = EXPAND.open) => {
    const state = live.current;
    stop(); // including the page scrolling the slot into view
    state.phase = "opening";
    const generation = ++state.generation;
    setScrollable(true);
    const { rect, radius: corners } = state.frame;
    const move = reduceMotion ? EXPAND.quick : spring;
    const runs = [
      animate(left, rect.x, move),
      animate(top, rect.y, move),
      animate(boxWidth, rect.width, move),
      animate(boxHeight, rect.height, move),
      animate(coverHeight, session.cover, move),
      animate(dx, 0, { ...move, velocity: velocity.x }),
      animate(dy, 0, { ...move, velocity: velocity.y }),
      animate(scale, 1, { ...move, restDelta: 0.001 }),
      animate(radius, corners, move),
      animate(opacity, 1, EXPAND.fadeIn),
      animate(backdrop, 1, EXPAND.fadeIn),
      animate(reveal, 1, reveal.get() > 0 ? EXPAND.fadeIn : EXPAND.reveal),
    ];
    state.runs = runs;
    Promise.all(runs).then(() => {
      if (state.generation === generation) state.phase = "open";
    });
  };

  // Landed: show the card, close the dialog and hand focus back, all in one
  // task so no frame shows both or neither. Also runs if the browser closes
  // the dialog on its own.
  const finish = () => {
    const state = live.current;
    if (state.done) return;
    state.done = true;
    stop();
    revealCard(state);
    dialogRef.current?.close();
    card.current?.focus({ preventScroll: true });
    onClosed();
  };

  const close = (velocity = { x: 0, y: 0 }) => {
    const state = live.current;
    if (state.done || state.phase === "closing") return;
    stop();
    state.drag = null;
    state.phase = "closing";
    const generation = ++state.generation;
    onIntent(false);
    setScrollable(false);

    const scroller = scrollerRef.current;
    const home = reduceMotion ? null : landing(card.current, readViewport());
    const runs = [
      animate(backdrop, 0, { duration: 0.34, ease: "easeOut" }),
      animate(reveal, 0, EXPAND.fadeOut),
    ];
    if (home) {
      // Back to the top, so the cover is what lands.
      if (scroller && scroller.scrollTop > 0) runs.push(scrollTo(scroller, "top", 0));
      runs.push(
        animate(left, home.rect.x, EXPAND.home),
        animate(top, home.rect.y, EXPAND.home),
        animate(boxWidth, home.rect.width, EXPAND.home),
        animate(boxHeight, home.rect.height, EXPAND.home),
        animate(coverHeight, home.rect.height, EXPAND.home),
        animate(dx, 0, { ...EXPAND.home, velocity: velocity.x }),
        animate(dy, 0, { ...EXPAND.home, velocity: velocity.y }),
        animate(scale, home.scale, { ...EXPAND.home, restDelta: 0.001 }),
        animate(radius, home.radius, EXPAND.home),
        animate(opacity, 1, EXPAND.fadeIn),
        // The page scrolls the slot into view as the article shrinks.
        ...home.scrolls.map((scroll) => scrollTo(scroll.element, scroll.axis, scroll.to)),
      );
    } else {
      // Nowhere on screen to land: fade out where it is.
      runs.push(animate(opacity, 0, EXPAND.fadeOut));
      if (!reduceMotion) runs.push(animate(scale, scale.get() * 0.96, EXPAND.fadeOut));
    }
    state.runs = runs;
    Promise.all(runs).then(() => {
      if (live.current.generation === generation) finish();
    });
  };

  const settle = (velocity = { x: 0, y: 0 }) => {
    onIntent(true);
    expand(velocity, EXPAND.settle);
  };

  const reopen = () => {
    const state = live.current;
    if (state.done || state.phase !== "closing") return;
    settle();
  };

  /** Still visibly on its way in or out, so a press grabs it. */
  const flying = () => {
    const state = live.current;
    if (state.phase === "closing") return true;
    if (state.phase !== "opening" || reduceMotion) return false;
    const { rect } = state.frame;
    const off =
      Math.abs(left.get() + dx.get() - rect.x) +
      Math.abs(top.get() + dy.get() - rect.y) +
      Math.abs(boxWidth.get() - rect.width) +
      Math.abs(boxHeight.get() - rect.height);
    return off > 12 || Math.abs(scale.get() - 1) > 0.02;
  };

  // ── Lift ────────────────────────────────────────────────

  const beginLift = (drag: Drag, axis: "x" | "y") => {
    const state = live.current;
    stop();
    state.generation++; // whatever was about to land, won't
    state.phase = "lifting";
    setScrollable(false);
    drag.mode = "lift";
    drag.axis = axis;
    // The point under the finger, in the article's own px from its center, so
    // it stays under the finger however much the article shrinks.
    const s = scale.get();
    drag.baseX = left.get() + boxWidth.get() / 2;
    drag.baseY = top.get() + boxHeight.get() / 2;
    drag.grabX = (drag.startX - drag.baseX - dx.get()) / s;
    drag.grabY = (drag.startY - drag.baseY - dy.get()) / s;
    drag.scaleFrom = s;
    drag.backdropFrom = backdrop.get();
    drag.radiusFrom = radius.get();
    animate(opacity, 1, EXPAND.fadeIn);
  };

  const moveLift = (drag: Drag, pointerX: number, pointerY: number) => {
    const { width: vw, height: vh } = live.current.viewport;
    const along = drag.axis === "y" ? pointerY - drag.startY : pointerX - drag.startX;
    const pull = Math.max(along, 0);
    const size = drag.scaleFrom * Math.max(EXPAND.minScale, 1 - pull / (vh * EXPAND.shrink));
    // The wrong way gives a little, then resists.
    let toX = pointerX;
    let toY = pointerY;
    if (along < 0 && drag.axis === "y") toY = drag.startY - rubberband(-along, vh);
    if (along < 0 && drag.axis === "x") toX = drag.startX - rubberband(-along, vw);
    dx.set(toX - drag.grabX * size - drag.baseX);
    dy.set(toY - drag.grabY * size - drag.baseY);
    scale.set(size);
    const lifted = Math.max(drag.radiusFrom, EXPAND.radius);
    radius.set(drag.radiusFrom + (lifted - drag.radiusFrom) * Math.min(pull / 80, 1));
    backdrop.set(drag.backdropFrom * (1 - 0.7 * Math.min(pull / (vh * EXPAND.fade), 1)));
  };

  const endLift = (drag: Drag, pointerX: number, pointerY: number, time: number, cancelled: boolean) => {
    const velocity = cancelled ? { x: 0, y: 0 } : velocityOf(drag.samples, time);
    const { width: vw, height: vh } = live.current.viewport;
    const along = drag.axis === "y" ? pointerY - drag.startY : pointerX - drag.startX;
    const speed = drag.axis === "y" ? velocity.y : velocity.x;
    const threshold = Math.max(80, (drag.axis === "y" ? vh : vw) * EXPAND.dismiss);
    // Decide by where the throw was heading, not where the finger stopped.
    const home = !cancelled && speed > -50 && (speed > EXPAND.flick || along + project(speed) > threshold);
    if (home) close(velocity);
    else settle(velocity);
  };

  // Touch: decided on the first move. At the top, pulling down lifts the
  // article; anything else is left to the browser to scroll. iOS only lets a
  // gesture be taken from scrolling on its first move.
  const onTouchStart = (event: TouchEvent) => {
    const state = live.current;
    if (state.done) return;
    if (event.touches.length > 1) {
      // A second finger: let go of whatever the first one was doing.
      const drag = state.drag;
      state.drag = null;
      if (drag?.mode === "lift") settle();
      return;
    }
    const touch = event.changedTouches[0];
    const drag = createDrag("touch", touch.identifier, touch.clientX, touch.clientY, event.timeStamp);
    state.drag = drag;
    if (flying()) {
      // Caught on its way: it's the finger's now.
      event.preventDefault();
      beginLift(drag, "y");
      return;
    }
    const scroller = scrollerRef.current;
    const shell = shellRef.current?.getBoundingClientRect();
    drag.pull = !scroller || scroller.scrollTop <= 1;
    drag.edge = touch.clientX - (shell?.left ?? 0) <= EXPAND.edge;
  };

  const onTouchMove = (event: TouchEvent) => {
    const drag = live.current.drag;
    if (!drag || drag.source !== "touch") return;
    const touch = findTouch(event.changedTouches, drag.pointer);
    if (!touch) return;
    record(drag, touch.clientX, touch.clientY, event.timeStamp);

    if (drag.mode === "native") {
      if (drag.block && event.cancelable) event.preventDefault();
      return;
    }
    if (drag.mode === "pending") {
      const moveX = touch.clientX - drag.startX;
      const moveY = touch.clientY - drag.startY;
      if (!moveX && !moveY) return;
      if (!event.cancelable) {
        drag.mode = "native"; // the browser is already scrolling
        return;
      }
      const axis =
        drag.pull && moveY > 0 && moveY >= Math.abs(moveX)
          ? "y"
          : drag.edge && moveX > 0 && moveX > Math.abs(moveY)
            ? "x"
            : null;
      if (!axis) {
        drag.mode = "native";
        // Nothing to scroll: don't let the page behind take it.
        const scroller = scrollerRef.current;
        drag.block = !scroller || scroller.scrollHeight <= scroller.clientHeight;
        if (drag.block) event.preventDefault();
        return;
      }
      beginLift(drag, axis);
    }
    if (event.cancelable) event.preventDefault();
    moveLift(drag, touch.clientX, touch.clientY);
  };

  const onTouchEnd = (event: TouchEvent) => {
    const state = live.current;
    const drag = state.drag;
    if (!drag || drag.source !== "touch") return;
    const touch = findTouch(event.changedTouches, drag.pointer);
    if (!touch) return;
    state.drag = null;
    if (drag.mode !== "lift") return;
    const cancelled = event.type === "touchcancel";
    if (!cancelled) record(drag, touch.clientX, touch.clientY, event.timeStamp);
    endLift(drag, touch.clientX, touch.clientY, event.timeStamp, cancelled);
  };

  // Mouse and pen: drag the cover down, or grab the article mid-flight.
  // The body is left alone, so its text can be selected.
  const onPointerDown = (event: React.PointerEvent<HTMLDivElement>) => {
    if (event.pointerType === "touch" || event.button !== 0) return;
    const state = live.current;
    if (state.done || state.drag) return;
    const target = event.target as Element;
    const caught = flying();
    const onCover = coverRef.current?.contains(target) && !target.closest(INTERACTIVE);
    if (!caught && !onCover) return;
    const drag = createDrag("mouse", event.pointerId, event.clientX, event.clientY, event.timeStamp);
    state.drag = drag;
    event.currentTarget.setPointerCapture(event.pointerId);
    if (caught) {
      event.preventDefault();
      beginLift(drag, "y");
    }
  };

  const onPointerMove = (event: React.PointerEvent<HTMLDivElement>) => {
    const drag = live.current.drag;
    if (!drag || drag.source !== "mouse" || drag.pointer !== event.pointerId) return;
    record(drag, event.clientX, event.clientY, event.timeStamp);
    if (drag.mode === "pending") {
      const moveX = event.clientX - drag.startX;
      const moveY = event.clientY - drag.startY;
      if (Math.hypot(moveX, moveY) < EXPAND.lock) return;
      if (moveY <= Math.abs(moveX)) {
        drag.mode = "native";
        return;
      }
      beginLift(drag, "y");
    }
    if (drag.mode === "lift") moveLift(drag, event.clientX, event.clientY);
  };

  const onPointerUp = (event: React.PointerEvent<HTMLDivElement>) => {
    const state = live.current;
    const drag = state.drag;
    if (!drag || drag.source !== "mouse" || drag.pointer !== event.pointerId) return;
    state.drag = null;
    if (drag.mode !== "lift") return;
    const cancelled = event.type === "pointercancel";
    if (!cancelled) record(drag, event.clientX, event.clientY, event.timeStamp);
    endLift(drag, event.clientX, event.clientY, event.timeStamp, cancelled);
  };

  const onKeyDown = (event: React.KeyboardEvent<HTMLDialogElement>) => {
    if (event.key === "Escape") {
      // Handled here rather than by the dialog, which can skip the animation.
      event.preventDefault();
      close();
      return;
    }
    const scroller = scrollerRef.current;
    if (!scroller || !SCROLL_KEYS.has(event.key) || event.altKey || event.metaKey || event.ctrlKey) return;
    const target = event.target as Element;
    if (target.closest("input, textarea, select, [contenteditable]")) return;
    if (event.key === " " && target.closest("a, button, summary, [role='button']")) return;
    const down =
      event.key === "ArrowDown" || event.key === "PageDown" || event.key === "End" || (event.key === " " && !event.shiftKey);
    if (live.current.phase !== "closing" && scroller.contains(target)) {
      // The article scrolls itself. At its ends, keep the page behind still.
      const end = down
        ? scroller.scrollTop + scroller.clientHeight >= scroller.scrollHeight - 1
        : scroller.scrollTop <= 0;
      if (end) event.preventDefault();
      return;
    }
    // Focus is on the close button: scroll the article, never the page.
    event.preventDefault();
    if (live.current.phase === "closing") return;
    const page = scroller.clientHeight * 0.85;
    const step: Record<string, number> = {
      ArrowDown: 64,
      ArrowUp: -64,
      PageDown: page,
      PageUp: -page,
      " ": event.shiftKey ? -page : page,
      Home: -scroller.scrollHeight,
      End: scroller.scrollHeight,
    };
    scroller.scrollBy({ top: step[event.key], behavior: reduceMotion ? "instant" : "smooth" });
  };

  // Native listeners call the latest versions of these.
  const actions = React.useRef({ expand, close, reopen, onTouchStart, onTouchMove, onTouchEnd });
  React.useLayoutEffect(() => {
    actions.current = { expand, close, reopen, onTouchStart, onTouchMove, onTouchEnd };
  });

  React.useLayoutEffect(() => {
    handleRef.current = {
      close: () => actions.current.close(),
      reopen: () => actions.current.reopen(),
    };
    return () => {
      handleRef.current = null;
    };
  }, [handleRef]);

  // Open: lift the dialog into the top layer, hide the card the article came
  // from, and grow it in.
  React.useLayoutEffect(() => {
    const dialog = dialogRef.current;
    if (!dialog) return;
    if (!dialog.open) dialog.showModal();
    focusTitle(coverRef.current, dialog, titleId);
    const state = live.current;
    // With reduced motion the article fades instead of flying, so the card stays.
    if (!reduceMotion) hideCard(state, card.current);
    actions.current.expand();
    return () => revealCard(state);
  }, [card, reduceMotion, titleId]);

  // Follow the window size.
  React.useLayoutEffect(() => {
    const dialog = dialogRef.current;
    if (!dialog) return;
    const observer = new ResizeObserver(() => {
      const next = { width: dialog.clientWidth, height: dialog.clientHeight };
      if (!next.width || !next.height) return;
      live.current.viewport = next;
      setViewport((prev) => (prev.width === next.width && prev.height === next.height ? prev : next));
    });
    observer.observe(dialog);
    return () => observer.disconnect();
  }, []);

  const { x: fx, y: fy, width: fw, height: fh } = frame.rect;
  React.useLayoutEffect(() => {
    const state = live.current;
    const next = { rect: { x: fx, y: fy, width: fw, height: fh }, radius: frame.radius };
    if (sameFrame(state.frame, next)) return;
    state.frame = next;
    if (state.phase === "open") {
      left.jump(fx);
      top.jump(fy);
      boxWidth.jump(fw);
      boxHeight.jump(fh);
      radius.jump(next.radius);
    } else if (state.phase === "opening") {
      actions.current.expand();
    }
  }, [fx, fy, fw, fh, frame.radius, left, top, boxWidth, boxHeight, radius]);

  React.useLayoutEffect(() => {
    const shell = shellRef.current;
    const dialog = dialogRef.current;
    if (!shell || !dialog) return;
    const start = (event: TouchEvent) => actions.current.onTouchStart(event);
    const move = (event: TouchEvent) => actions.current.onTouchMove(event);
    const end = (event: TouchEvent) => actions.current.onTouchEnd(event);
    // The wheel scrolls the article, and never the page behind it.
    const wheel = (event: WheelEvent) => {
      const state = live.current;
      const inside = scrollerRef.current?.contains(event.target as Node);
      if (!inside || state.phase === "closing" || state.phase === "lifting") event.preventDefault();
    };
    shell.addEventListener("touchstart", start, { passive: false });
    shell.addEventListener("touchmove", move, { passive: false });
    shell.addEventListener("touchend", end);
    shell.addEventListener("touchcancel", end);
    dialog.addEventListener("wheel", wheel, { passive: false });
    return () => {
      shell.removeEventListener("touchstart", start);
      shell.removeEventListener("touchmove", move);
      shell.removeEventListener("touchend", end);
      shell.removeEventListener("touchcancel", end);
      dialog.removeEventListener("wheel", wheel);
    };
  }, []);

  return (
    <dialog
      ref={dialogRef}
      aria-labelledby={titleId}
      onCancel={(event) => {
        event.preventDefault();
        close();
      }}
      onClose={finish}
      onKeyDown={onKeyDown}
      className="fixed inset-0 m-0 size-full max-h-none max-w-none overflow-hidden border-0 bg-transparent p-0 outline-none backdrop:bg-transparent"
    >
      <motion.div
        aria-hidden
        className="absolute inset-0 touch-none bg-black/45 backdrop-blur-xs"
        style={{ opacity: backdrop }}
        onClick={() => close()}
      />

      <motion.div
        ref={shellRef}
        className={cn("absolute top-0 left-0 isolate overflow-hidden bg-background text-foreground", className)}
        style={{
          x,
          y,
          width: boxWidth,
          height: boxHeight,
          scale,
          borderRadius,
          opacity,
          boxShadow: shadow,
        }}
        onPointerDown={onPointerDown}
        onPointerMove={onPointerMove}
        onPointerUp={onPointerUp}
        onPointerCancel={onPointerUp}
      >
        <motion.button
          type="button"
          aria-label="Close"
          className={cn(
            "absolute top-[max(0.75rem,env(safe-area-inset-top))] right-3 z-10 grid size-9 place-items-center rounded-full",
            "bg-black/35 text-white ring-1 ring-white/15 backdrop-blur-md outline-none",
            "transition-[background-color,scale] duration-150 ease-out hover:bg-black/50 active:scale-90",
            "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white",
          )}
          style={{ opacity: reveal }}
          onClick={() => close()}
        >
          <svg
            aria-hidden
            viewBox="0 0 24 24"
            className="size-4"
            fill="none"
            stroke="currentColor"
            strokeWidth={2.25}
            strokeLinecap="round"
          >
            <path d="M6 6l12 12M18 6L6 18" />
          </svg>
        </motion.button>

        <div
          ref={scrollerRef}
          className="size-full overflow-x-hidden overflow-y-auto overscroll-contain [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
        >
          <motion.div
            ref={coverRef}
            id={titleId}
            className="relative w-full cursor-grab overflow-hidden outline-none select-none active:cursor-grabbing [&_:focus]:outline-none"
            style={{ ...session.skin, height: coverHeight }}
          >
            <div className="relative size-full">{cover}</div>
          </motion.div>

          {/* Laid out at the open width from the start, so it never reflows mid-flight. */}
          <motion.div
            className="relative"
            style={{
              width: frame.rect.width,
              marginLeft: `calc(50% - ${frame.rect.width / 2}px)`,
              opacity: reveal,
              y: bodyY,
            }}
          >
            <React.Suspense fallback={fallback ?? <Placeholder />}>{children}</React.Suspense>
          </motion.div>
        </div>
      </motion.div>
    </dialog>
  );
}

function Placeholder() {
  return (
    <div role="status" aria-label="Loading" className="mx-auto max-w-prose animate-pulse space-y-3 px-6 py-8">
      <div className="h-3 w-3/4 rounded-full bg-current opacity-10" />
      <div className="h-3 rounded-full bg-current opacity-10" />
      <div className="h-3 w-5/6 rounded-full bg-current opacity-10" />
    </div>
  );
}

// ── Geometry ──────────────────────────────────────────────

const INTERACTIVE = "a, button, input, select, textarea, label, summary, [contenteditable]";
const SCROLL_KEYS = new Set(["ArrowUp", "ArrowDown", "PageUp", "PageDown", "Home", "End", " "]);
const SCROLLS = /auto|scroll|overlay/;

// What the cover inherits from the card, so it sits on the same ground in
// the article: the card's background, text styles and padding.
const SKIN = [
  "color",
  "backgroundColor",
  "backgroundImage",
  "backgroundPosition",
  "backgroundSize",
  "backgroundRepeat",
  "fontFamily",
  "fontSize",
  "fontStyle",
  "fontWeight",
  "lineHeight",
  "letterSpacing",
  "textAlign",
  "textTransform",
  "paddingTop",
  "paddingRight",
  "paddingBottom",
  "paddingLeft",
] as const;

function skinOf(card: HTMLElement): React.CSSProperties {
  const style = getComputedStyle(card);
  return Object.fromEntries(SKIN.map((key) => [key, style[key]])) as React.CSSProperties;
}

function readViewport(): Viewport {
  return {
    width: document.documentElement.clientWidth,
    height: document.documentElement.clientHeight,
  };
}

function readHash() {
  try {
    return decodeURIComponent(window.location.hash.slice(1));
  } catch {
    return window.location.hash.slice(1);
  }
}

/** The open article: the whole screen when it's narrow, a centered column otherwise. */
function frameOf(viewport: Viewport, width: number): Frame {
  if (viewport.width < EXPAND.narrow) {
    return { rect: { x: 0, y: 0, width: viewport.width, height: viewport.height }, radius: 0 };
  }
  const margin = clamp(Math.round(viewport.height * 0.05), 16, EXPAND.margin);
  const columnWidth = Math.min(width, viewport.width - margin * 2);
  return {
    rect: {
      x: Math.round((viewport.width - columnWidth) / 2),
      y: margin,
      width: columnWidth,
      height: viewport.height - margin * 2,
    },
    radius: EXPAND.radius,
  };
}

function sameFrame(a: Frame, b: Frame) {
  return (
    a.radius === b.radius &&
    a.rect.x === b.rect.x &&
    a.rect.y === b.rect.y &&
    a.rect.width === b.rect.width &&
    a.rect.height === b.rect.height
  );
}

/**
 * The card's layout box, centered where it shows. Its rendered box may be
 * smaller while it's pressed; the article starts at that scale instead, so
 * the cover lays out at the card's real width and wraps the same.
 */
function poseOf(card: HTMLElement, viewport: Viewport): Pose | null {
  const width = card.offsetWidth;
  const height = card.offsetHeight;
  if (!width || !height) return null;
  const box = card.getBoundingClientRect();
  const visible =
    box.bottom > 0 && box.right > 0 && box.top < viewport.height && box.left < viewport.width;
  if (!visible) return null;
  const scale = box.width / width;
  const centerX = box.left + box.width / 2;
  const centerY = box.top + box.height / 2;
  return {
    rect: { x: centerX - width / 2, y: centerY - height / 2, width, height },
    scale,
    radius: cornerOf(card) * scale,
  };
}

/**
 * Where the article lands: the card's slot, after scrolling it into view.
 * Null when the card is gone, or clipped somewhere scrolling can't reach.
 */
function landing(card: HTMLElement | null, viewport: Viewport) {
  if (!card?.isConnected) return null;
  const width = card.offsetWidth;
  const height = card.offsetHeight;
  if (!width || !height) return null;
  const box = card.getBoundingClientRect();
  const { scrolls, shiftX, shiftY } = planScroll(card, box, viewport);
  const centerX = box.left + box.width / 2 - shiftX;
  const centerY = box.top + box.height / 2 - shiftY;
  const visible =
    centerY + box.height / 2 > 0 &&
    centerY - box.height / 2 < viewport.height &&
    centerX + box.width / 2 > 0 &&
    centerX - box.width / 2 < viewport.width;
  if (!visible) return null;
  const scale = box.width / width;
  return {
    rect: { x: centerX - width / 2, y: centerY - height / 2, width, height },
    scale,
    radius: cornerOf(card) * scale,
    scrolls,
  };
}

/**
 * The scrolls that bring the card into view, innermost container first, and
 * how far they move it on screen. Like `scrollIntoView({ block: "nearest" })`,
 * but planned rather than done, so the article can fly to where the card will
 * be while the page scrolls.
 */
function planScroll(card: HTMLElement, box: DOMRect, viewport: Viewport) {
  const scrolls: Scroll[] = [];
  let shiftX = 0;
  let shiftY = 0;

  const bring = (element: Element, axis: "top" | "left", viewStart: number, viewEnd: number) => {
    const vertical = axis === "top";
    // Respect scroll-padding, which is how a page says a sticky header covers its top.
    const style = getComputedStyle(element);
    viewStart += parseFloat(vertical ? style.scrollPaddingTop : style.scrollPaddingLeft) || 0;
    viewEnd -= parseFloat(vertical ? style.scrollPaddingBottom : style.scrollPaddingRight) || 0;
    const start = (vertical ? box.top : box.left) - (vertical ? shiftY : shiftX);
    const end = (vertical ? box.bottom : box.right) - (vertical ? shiftY : shiftX);
    const pad = Math.min(24, Math.max((viewEnd - viewStart - (end - start)) / 2, 0));
    let delta = 0;
    if (start < viewStart + pad) delta = start - (viewStart + pad);
    else if (end > viewEnd - pad) delta = Math.min(end - (viewEnd - pad), start - (viewStart + pad));
    if (!delta) return;
    const from = vertical ? element.scrollTop : element.scrollLeft;
    const max = vertical
      ? element.scrollHeight - element.clientHeight
      : element.scrollWidth - element.clientWidth;
    const to = clamp(from + delta, 0, Math.max(max, 0));
    if (Math.abs(to - from) < 1) return;
    scrolls.push({ element, axis, to });
    if (vertical) shiftY += to - from;
    else shiftX += to - from;
  };

  for (let element = card.parentElement; element; element = element.parentElement) {
    if (element === document.body || element === document.documentElement) break;
    const style = getComputedStyle(element);
    const scrollsY = SCROLLS.test(style.overflowY) && element.scrollHeight > element.clientHeight;
    const scrollsX = SCROLLS.test(style.overflowX) && element.scrollWidth > element.clientWidth;
    if (scrollsY || scrollsX) {
      const view = element.getBoundingClientRect();
      const top = view.top + element.clientTop;
      const left = view.left + element.clientLeft;
      if (scrollsY) bring(element, "top", top, top + element.clientHeight);
      if (scrollsX) bring(element, "left", left, left + element.clientWidth);
    }
    // A fixed container doesn't move with the page.
    if (style.position === "fixed") return { scrolls, shiftX, shiftY };
  }

  const page = document.scrollingElement;
  if (page) {
    bring(page, "top", 0, viewport.height);
    bring(page, "left", 0, viewport.width);
  }
  return { scrolls, shiftX, shiftY };
}

function cornerOf(element: HTMLElement) {
  return parseFloat(getComputedStyle(element).borderTopLeftRadius) || 0;
}

// ── Helpers ───────────────────────────────────────────────

/** Moves focus to the cover's heading, which also names the dialog. */
function focusTitle(cover: HTMLElement | null, dialog: HTMLDialogElement, fallbackId: string) {
  if (!cover) return;
  const heading = cover.querySelector<HTMLElement>("h1, h2, h3, h4, h5, h6");
  const title = heading ?? cover;
  if (heading && !heading.id) heading.id = `${fallbackId}-title`;
  dialog.setAttribute("aria-labelledby", title.id);
  if (!title.hasAttribute("tabindex")) title.tabIndex = -1;
  title.focus({ preventScroll: true });
}

/** Hides the card while its article is out, so the two read as one object. */
function hideCard(state: { hidden: HTMLElement | null }, card: HTMLElement | null) {
  if (!card) return;
  card.style.visibility = "hidden";
  state.hidden = card;
}

function revealCard(state: { hidden: HTMLElement | null }) {
  if (state.hidden) state.hidden.style.visibility = "";
  state.hidden = null;
}

/** Animates a scroll position, ignoring any CSS `scroll-behavior`. */
function scrollTo(element: Element, axis: "top" | "left", to: number) {
  const from = axis === "top" ? element.scrollTop : element.scrollLeft;
  return animate(from, to, {
    ...EXPAND.scroll,
    onUpdate: (value) => element.scrollTo({ [axis]: value, behavior: "instant" }),
  });
}

function createDrag(source: Drag["source"], pointer: number, x: number, y: number, t: number): Drag {
  return {
    source,
    pointer,
    mode: "pending",
    axis: "y",
    pull: false,
    edge: false,
    block: false,
    startX: x,
    startY: y,
    samples: [{ x, y, t }],
    baseX: 0,
    baseY: 0,
    grabX: 0,
    grabY: 0,
    scaleFrom: 1,
    backdropFrom: 1,
    radiusFrom: 0,
  };
}

function findTouch(list: TouchList, id: number) {
  for (let i = 0; i < list.length; i++) if (list[i].identifier === id) return list[i];
  return null;
}

function record(drag: Drag, x: number, y: number, t: number) {
  drag.samples.push({ x, y, t });
  while (drag.samples.length > 2 && t - drag.samples[0].t > 100) drag.samples.shift();
}

/** Pointer velocity over the last 80ms, in px/s. Zero if the finger had stopped. */
function velocityOf(samples: Drag["samples"], now: number) {
  const last = samples[samples.length - 1];
  if (!last || now - last.t > 80) return { x: 0, y: 0 };
  const first = samples.find((sample) => last.t - sample.t <= 80) ?? last;
  const dt = (last.t - first.t) / 1000;
  if (dt <= 0) return { x: 0, y: 0 };
  const cap = (v: number) => clamp(v, -4000, 4000);
  return { x: cap((last.x - first.x) / dt), y: cap((last.y - first.y) / dt) };
}

/** How much further a flick travels before it comes to rest, like a scroll view. */
function project(velocity: number, rate = 0.99) {
  return ((velocity / 1000) * rate) / (1 - rate);
}

/** Past a boundary, follow less and less the further it's pulled. */
function rubberband(overshoot: number, dimension: number, constant = 0.55) {
  return (overshoot * dimension * constant) / (dimension + constant * overshoot);
}

function clamp(value: number, min: number, max: number) {
  return Math.min(Math.max(value, min), max);
}