Stretch Index

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

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

/* ─────────────────────────────────────────────────────────
 * STRETCH INDEX STORYBOARD
 *
 *  rest     a list of rows: number, title, meta. A thin tab sits
 *           just before each title
 *  hover    the tab warms to the row's accent and a dimmed row
 *           brightens as soon as the pointer is on it. The row
 *           opens once the pointer slows or settles, so sweeping
 *           down the list doesn't set it rippling
 *  open     on one spring: the tab widens into a picture frame
 *           and the photo fades in, the title slides over to make
 *           room, the row grows and pushes the rows below down,
 *           and the details rise out from under the title. Text
 *           is laid out at its open width all along, so nothing
 *           rewraps while it moves
 *  switch   the old row closes as the new one opens. The heights
 *           trade off, so the row under the pointer stays under it
 *  leave    the open row stays open, or closes with collapseOnLeave
 *  touch    the first tap opens a row, the second follows its link
 *  keys     ↑/↓, Home and End move between rows. In hover lists a
 *           row opens as focus reaches it; in click lists Enter
 *           opens it. Enter on an open row follows its link, Esc
 *           closes. A row opened from the keyboard or a tap keeps
 *           itself in view as it grows
 *  reduced  no springs or zoom: rows switch at once
 * ───────────────────────────────────────────────────────── */

const STRETCH = {
  open: { type: "spring", visualDuration: 0.5, bounce: 0 },
  dwell: 90, // ms the pointer rests on a row before it opens
  slow: 0.35, // px/ms; a pointer moving slower than this opens a row at once
  leave: 160, // ms outside the list before collapseOnLeave closes the row
  tab: 3, // px width of a closed row's tab
  gap: 16, // px between the tab or photo and the text
  zoom: 0.06, // a photo starts this much closer in and eases back as it opens
} as const;

// Geometry follows the row's open progress, --stretch-p (0–1), set per frame by motion.
const FRAME_WIDTH = `calc(${STRETCH.tab}px + (var(--stretch-w) - ${STRETCH.tab}px) * var(--stretch-p))`;
const FRAME_HEIGHT = "calc(1lh + (var(--stretch-h) - 1lh) * var(--stretch-p))";

type Reveal = "pointer" | "scroll";

type List = {
  active: number | null;
  openOn: "hover" | "click";
  numbered: boolean;
  dimmed: boolean;
  reduced: boolean;
  select: (index: number | null, reveal?: Reveal) => void;
  /** Whether this row was opened from the keyboard or a tap, and should scroll fully into view. */
  revealsRow: (index: number) => boolean;
  /** The kind of pointer that last pressed the list. */
  lastPointer: () => string;
  onKeyDown: (event: React.KeyboardEvent, from: number) => void;
};

const ListContext = React.createContext<List | null>(null);
const IndexContext = React.createContext(-1);

function useList() {
  const list = React.useContext(ListContext);
  if (!list) throw new Error("<StretchIndexItem> must be rendered inside <StretchIndex>.");
  return list;
}

/* ── StretchIndex ───────────────────────────────────────── */

export interface StretchIndexProps extends React.HTMLAttributes<HTMLUListElement> {
  /** The open row, or null for none. Leave unset to let the list manage it. */
  index?: number | null;
  /** The row that starts open. */
  defaultIndex?: number | null;
  /** Called when a row opens, or with null when the open row closes. */
  onIndexChange?: (index: number | null) => void;
  /** "hover" opens the row under the pointer; "click" waits for a click or tap, and a second click closes it. */
  openOn?: "hover" | "click";
  /** Close the open row when the pointer or keyboard focus leaves the list. Otherwise it stays open. */
  collapseOnLeave?: boolean;
  /** Fade the other rows back while one is open and the pointer or focus is in the list. */
  dim?: boolean;
  /** Show a 01, 02, … column before the titles. */
  numbered?: boolean;
  /** Width of an open row's photo, as a CSS length. The default scales with the list. */
  imageWidth?: string;
  /** Width-to-height ratio of an open row's photo. */
  imageAspect?: number;
}

/**
 * A list of rows that open in place. The row you're on grows taller, its tab
 * widens into a photo, and the rows below glide down to make room.
 */
export function StretchIndex({
  index,
  defaultIndex = null,
  onIndexChange,
  openOn = "hover",
  collapseOnLeave = false,
  dim = true,
  numbered = true,
  imageWidth = "clamp(5rem, 24cqi, 11rem)",
  imageAspect = 4 / 3,
  className,
  style,
  children,
  onPointerMove,
  onPointerDown,
  onPointerEnter,
  onPointerLeave,
  onFocus,
  onBlur,
  ...props
}: StretchIndexProps) {
  const items = React.Children.toArray(children).filter(React.isValidElement);
  const count = items.length;
  const [own, setOwn] = React.useState<number | null>(defaultIndex);
  const current = index !== undefined ? index : own;
  const active = current != null && current >= 0 && current < count ? current : null;
  const reduced = useReducedMotion() ?? false;

  const listRef = React.useRef<HTMLUListElement>(null);
  const activeRef = React.useRef(active);
  const scrollRef = React.useRef<number | null>(null);
  const latest = React.useRef({ index, onIndexChange, count });
  React.useLayoutEffect(() => {
    activeRef.current = active;
    latest.current = { index, onIndexChange, count };
  });

  const select = React.useCallback((next: number | null, reveal: Reveal = "pointer") => {
    const { index, onIndexChange, count } = latest.current;
    if (next !== null && (next < 0 || next >= count)) return;
    if (next === activeRef.current) return;
    activeRef.current = next;
    scrollRef.current = reveal === "scroll" ? next : null;
    if (index === undefined) setOwn(next);
    onIndexChange?.(next);
  }, []);

  const revealsRow = React.useCallback((row: number) => scrollRef.current === row, []);

  /* Pointer: hover intent for mice; taps are handled by each row's click. */
  const pointer = React.useRef({
    x: NaN,
    y: NaN,
    t: 0,
    speed: Infinity,
    timer: 0,
    kind: "mouse",
  });
  const [inside, setInside] = React.useState(false);
  const [focused, setFocused] = React.useState(false);
  React.useEffect(() => () => window.clearTimeout(pointer.current.timer), []);

  const lastPointer = React.useCallback(() => pointer.current.kind, []);

  const rowAt = (x: number, y: number) => {
    const hit = document.elementFromPoint(x, y)?.closest<HTMLElement>("[data-stretch-index]");
    return hit && listRef.current?.contains(hit) ? Number(hit.dataset.stretchIndex) : -1;
  };

  const handlePointerMove = (event: React.PointerEvent<HTMLUListElement>) => {
    onPointerMove?.(event);
    if (openOn !== "hover" || event.pointerType !== "mouse") return;
    const p = pointer.current;
    const dx = event.clientX - p.x;
    const dy = event.clientY - p.y;
    if (dx === 0 && dy === 0) return; // the rows moved under a still pointer
    const dt = event.timeStamp - p.t;
    const speed = Number.isNaN(dx) ? Infinity : dt > 0 ? Math.hypot(dx, dy) / dt : p.speed;
    p.speed = Number.isFinite(p.speed) && Number.isFinite(speed) ? (p.speed + speed) / 2 : speed;
    p.x = event.clientX;
    p.y = event.clientY;
    p.t = event.timeStamp;

    window.clearTimeout(p.timer);
    const next = rowAt(p.x, p.y);
    if (next < 0 || next === activeRef.current) return;
    if (p.speed < STRETCH.slow) select(next);
    else p.timer = window.setTimeout(() => select(next), STRETCH.dwell);
  };

  const handlePointerLeave = (event: React.PointerEvent<HTMLUListElement>) => {
    onPointerLeave?.(event);
    const p = pointer.current;
    window.clearTimeout(p.timer);
    p.x = NaN;
    p.speed = Infinity;
    setInside(false);
    if (collapseOnLeave && openOn === "hover" && event.pointerType === "mouse") {
      p.timer = window.setTimeout(() => select(null), STRETCH.leave);
    }
  };

  const onKeyDown = (event: React.KeyboardEvent, from: number) => {
    let to = -1;
    if (event.key === "ArrowDown") to = Math.min(from + 1, count - 1);
    else if (event.key === "ArrowUp") to = Math.max(from - 1, 0);
    else if (event.key === "Home") to = 0;
    else if (event.key === "End") to = count - 1;
    else if (event.key === "Escape" && activeRef.current !== null) {
      event.preventDefault();
      select(null);
      return;
    }
    if (to < 0) return;
    event.preventDefault();
    listRef.current
      ?.querySelector<HTMLElement>(`[data-stretch-index="${to}"] [data-stretch-trigger]`)
      ?.focus();
  };

  const engaged = inside || focused;

  return (
    <ListContext.Provider
      value={{
        active,
        openOn,
        numbered,
        dimmed: dim && engaged && active !== null,
        reduced,
        select,
        revealsRow,
        lastPointer,
        onKeyDown,
      }}
    >
      <ul
        {...props}
        ref={listRef}
        role="list"
        className={cn("@container w-full", className)}
        style={
          {
            ...style,
            "--stretch-w": imageWidth,
            "--stretch-h": `calc(var(--stretch-w) / ${imageAspect})`,
          } as React.CSSProperties
        }
        onPointerMove={handlePointerMove}
        onPointerDown={(event) => {
          onPointerDown?.(event);
          pointer.current.kind = event.pointerType;
        }}
        onPointerEnter={(event) => {
          onPointerEnter?.(event);
          if (event.pointerType !== "mouse") return;
          window.clearTimeout(pointer.current.timer);
          setInside(true);
        }}
        onPointerLeave={handlePointerLeave}
        onFocus={(event) => {
          onFocus?.(event);
          if (event.target.matches(":focus-visible")) setFocused(true);
        }}
        onBlur={(event) => {
          onBlur?.(event);
          if (event.currentTarget.contains(event.relatedTarget as Node | null)) return;
          setFocused(false);
          if (collapseOnLeave && openOn === "hover" && !inside) select(null);
        }}
      >
        {items.map((item, i) => (
          <IndexContext.Provider key={item.key ?? i} value={i}>
            {item}
          </IndexContext.Provider>
        ))}
      </ul>
    </ListContext.Provider>
  );
}

/* ── StretchIndexItem ───────────────────────────────────── */

export interface StretchIndexItemProps extends Omit<
  React.LiHTMLAttributes<HTMLLIElement>,
  "title"
> {
  /** The row's title. Keep it to a line or two. */
  title: React.ReactNode;
  /** Short text at the end of the row, like a year or a place. Moves under the title in narrow lists. */
  meta?: React.ReactNode;
  /** Replaces the automatic 01, 02, … in the number column. */
  number?: React.ReactNode;
  /** Makes the row a link. Touch and click-to-open lists open the row first and follow the link on the second tap. */
  href?: string;
  /** Photo URL. The tab widens into a frame around it when the row opens. It's decorative: the title names the row. */
  image?: string;
  /** Color the tab warms to, and the frame's color before the photo shows. Defaults to the text color. */
  accent?: string;
  /** Details that rise out from under the title when the row opens. Links in here stay clickable. */
  children?: React.ReactNode;
}

/** One row. Render inside `StretchIndex`. */
export function StretchIndexItem({
  title,
  meta,
  number,
  href,
  image,
  accent,
  className,
  style,
  children,
  ...props
}: StretchIndexItemProps) {
  const list = useList();
  const { active, openOn, numbered, dimmed, reduced, select, revealsRow } = list;
  const index = React.useContext(IndexContext);
  const isOpen = active === index;
  const rowRef = React.useRef<HTMLLIElement>(null);
  const id = React.useId();
  const titleId = `${id}-title`;
  const detailsId = `${id}-details`;

  const open = useMotionValue(isOpen ? 1 : 0);
  React.useEffect(() => {
    const target = isOpen ? 1 : 0;
    // A row opened from the keyboard or a tap keeps itself in view as it grows, frame by frame,
    // so the page scrolls on the same spring instead of after it.
    const follow =
      isOpen && revealsRow(index)
        ? () => rowRef.current?.scrollIntoView({ block: "nearest", behavior: "instant" })
        : undefined;
    if (reduced) {
      open.jump(target);
      follow?.();
      return;
    }
    const controls = animate(open, target, STRETCH.open);
    const unfollow = follow && open.on("change", follow);
    return () => {
      controls.stop();
      unfollow?.();
    };
  }, [isOpen, reduced, open, index, revealsRow]);

  const rows = useTransform(open, (value) => `${value}fr`);
  const glow = useTransform(open, [0, 0.5], [0, 1]);
  const photo = useTransform(open, [0.15, 0.6], [0, 1]);
  const zoom = useTransform(open, [0, 1], [1 + STRETCH.zoom, 1]);
  const reveal = useTransform(open, [0.35, 1], [0, 1]);
  const rise = useTransform(open, [0.35, 1], [8, 0]);

  const onClick = (event: React.MouseEvent) => {
    const keyboard = event.detail === 0;
    const mouse = !keyboard && list.lastPointer() === "mouse";
    if (isOpen) {
      if (!href && openOn === "click") select(null);
      return; // an open link row follows its link
    }
    // A tap, or a click in a click-to-open list, opens the row before its link is followed.
    if (href && !(mouse && openOn === "hover")) event.preventDefault();
    select(index, mouse ? "pointer" : "scroll");
  };

  const trigger = {
    "data-stretch-trigger": "",
    "aria-labelledby": titleId,
    "aria-expanded": isOpen,
    "aria-controls": detailsId,
    onClick,
    onFocus: (event: React.FocusEvent<HTMLElement>) => {
      if (openOn === "hover" && event.currentTarget.matches(":focus-visible"))
        select(index, "scroll");
    },
    onKeyDown: (event: React.KeyboardEvent) => list.onKeyDown(event, index),
    className: cn(
      "absolute inset-0 outline-none",
      isOpen && !href && openOn === "hover" ? "cursor-default" : "cursor-pointer",
    ),
  };

  return (
    <li
      {...props}
      ref={rowRef}
      data-stretch-index={index}
      data-state={isOpen ? "open" : "closed"}
      className={cn(
        "group/row border-b border-current/10 outline-current",
        "has-[[data-stretch-trigger]:focus-visible]:rounded-sm has-[[data-stretch-trigger]:focus-visible]:outline-2 has-[[data-stretch-trigger]:focus-visible]:outline-offset-2",
        className,
      )}
      style={{ ...style, "--stretch-accent": accent } as React.CSSProperties}
    >
      <motion.div className="relative" style={{ "--stretch-p": open } as MotionStyle}>
        {href ? <a href={href} {...trigger} /> : <button type="button" {...trigger} />}

        <div
          className={cn(
            "pointer-events-none relative grid items-baseline gap-x-4 py-4 transition-opacity duration-300 @lg:py-5",
            numbered
              ? "grid-cols-[2rem_minmax(0,1fr)] @lg:grid-cols-[2rem_minmax(0,1fr)_auto]"
              : "grid-cols-[minmax(0,1fr)] @lg:grid-cols-[minmax(0,1fr)_auto]",
            dimmed && !isOpen && "opacity-50 group-hover/row:opacity-100",
          )}
        >
          {numbered && (
            <span className="font-mono text-xs tabular-nums opacity-50">
              {number ?? String(index + 1).padStart(2, "0")}
            </span>
          )}

          <div className="relative min-w-0 text-xl/7 font-medium tracking-tight @lg:text-2xl/8">
            <div
              aria-hidden
              className="absolute top-0 left-0 overflow-hidden"
              style={{
                width: FRAME_WIDTH,
                height: FRAME_HEIGHT,
                borderRadius: "calc(2px + 4px * var(--stretch-p))",
              }}
            >
              <div className="absolute inset-0 bg-current opacity-20" />
              <div className="absolute inset-0 bg-[var(--stretch-accent,currentColor)] opacity-0 transition-opacity duration-200 group-hover/row:opacity-70" />
              <motion.div
                className="absolute inset-0 bg-[var(--stretch-accent,currentColor)]"
                style={{ opacity: glow }}
              />
              {image && (
                <motion.img
                  src={image}
                  alt=""
                  draggable={false}
                  decoding="async"
                  className="absolute top-1/2 left-1/2 h-[calc(var(--stretch-h)+2px)] w-[calc(var(--stretch-w)+2px)] max-w-none -translate-1/2 object-cover"
                  style={{ opacity: photo, scale: zoom }}
                />
              )}
            </div>

            <div
              style={{
                marginLeft: STRETCH.tab + STRETCH.gap,
                // Laid out at the open width, then slid back over the tab, so nothing rewraps.
                width: `calc(100% - var(--stretch-w) - ${STRETCH.gap}px)`,
                translate: `calc((var(--stretch-w) - ${STRETCH.tab}px) * var(--stretch-p)) 0`,
                minHeight: FRAME_HEIGHT,
              }}
            >
              <span id={titleId} className="block text-balance">
                {title}
              </span>
              {meta != null && (
                <span className="mt-1 block text-sm font-normal tracking-normal opacity-55 @lg:hidden">
                  {meta}
                </span>
              )}
              <motion.div className="grid" style={{ gridTemplateRows: rows }}>
                <div className="-mx-1 min-h-0 overflow-hidden px-1">
                  <motion.div
                    id={detailsId}
                    inert={!isOpen}
                    className="pointer-events-auto relative pt-3 pb-1 text-[15px]/relaxed font-normal tracking-normal"
                    style={{ opacity: reveal, y: rise }}
                  >
                    {children}
                  </motion.div>
                </div>
              </motion.div>
            </div>
          </div>

          {meta != null && (
            <span className="hidden text-sm whitespace-nowrap tabular-nums opacity-55 @lg:block">
              {meta}
            </span>
          )}
        </div>
      </motion.div>
    </li>
  );
}