Staggered List Entrance

// Staggered List Entrance — the demo's own source, extracted verbatim.
// From src/components/demos/scenes/set-04.tsx, export StaggeredListEntrance.
// Needs React 18+ and Tailwind CSS v4. The classes below include this site's
// token utilities (bg-panel, text-ink-dim, chip …); their values are served as
// CSS custom properties at /api/exports/tokens.json. The reduced-motion branch
// is part of the source, not an afterthought.
// 3 helpers the demo imports are inlined above it, verbatim.

import { useEffect, useRef, useState } from "react";

export interface SceneMotion {
  /** True when the reader asked the system for less motion. */
  reduced: boolean;
  /** A duration in milliseconds, collapsed to 0 when reduced. */
  ms: (value: number) => number;
  /** A repeat count, collapsed to 1 when reduced — an entrance plays once. */
  times: (value: number) => number;
}

export function useReducedMotion(): boolean {
  const [reduced, setReduced] = useState<boolean>(() =>
    typeof window !== "undefined" ? window.matchMedia("(prefers-reduced-motion: reduce)").matches : false
  );
  useEffect(() => {
    const mq = window.matchMedia("(prefers-reduced-motion: reduce)");
    const on = (e: MediaQueryListEvent) => setReduced(e.matches);
    mq.addEventListener("change", on);
    return () => mq.removeEventListener("change", on);
  }, []);
  return reduced;
}

export function useSceneMotion(): SceneMotion {
  const reduced = useReducedMotion();
  return {
    reduced,
    ms: (value: number) => (reduced ? 0 : value),
    times: (value: number) => (reduced ? 1 : value),
  };
}

export function StaggeredListEntrance() {
  const scroller = useRef<HTMLDivElement>(null);
  const sentinel = useRef<HTMLDivElement>(null);
  const [seen, setSeen] = useState(false);
  const [run, setRun] = useState(0);
  // #29 — rows stagger in through an observer plus per-row delay. Reduced:
  // the list is simply present, no stagger and no per-row delay. `shown` is
  // derived rather than written, so no effect has to correct state after paint.
  const { reduced } = useSceneMotion();
  const shown = reduced || seen;
  useEffect(() => {
    const el = sentinel.current;
    if (!el) return;
    if (reduced) return;
    const io = new IntersectionObserver(
      (entries) => {
        entries.forEach((en) => {
          if (en.isIntersecting) setSeen(true);
        });
      },
      { threshold: 0.4 }
    );
    io.observe(el);
    return () => io.disconnect();
  }, [reduced]);
  const rows = [
    { name: "surface-aurora.svg", meta: "48KB · vector", dot: "#c4b5fd" },
    { name: "readme-quickstart.mdx", meta: "12KB · docs", dot: "#67e8f9" },
    { name: "theme-aurora.tokens.json", meta: "4KB · tokens", dot: "#6ee7b7" },
    { name: "og-aurora-1200x630.png", meta: "310KB · raster", dot: "#fcd34d" },
    { name: "motion-a11y-checklist.md", meta: "8KB · notes", dot: "#fda4af" },
    { name: "changelog-0.9.2.md", meta: "3KB · release", dot: "#a5b4fc" },
  ];
  return (
    <div className="flex h-full w-full flex-col bg-[#0a0c13]">
      <div className="flex items-center justify-between border-b border-white/6 px-4 py-2">
        <span className="text-[10px] font-bold uppercase tracking-[0.22em] text-ink-faint">index rows — scroll to trigger</span>
        <button
          type="button"
          onClick={() => {
            setSeen(false);
            setRun((n) => n + 1);
            window.setTimeout(() => scroller.current?.scrollTo({ top: 9999, behavior: "smooth" }), 60);
            window.setTimeout(() => setSeen(true), 620);
          }}
          className="btn btn-ghost !px-3 !py-1 !text-[10px]"
        >
          ↻ Replay entrance
        </button>
      </div>
      <div ref={scroller} className="relative flex-1 overflow-y-auto px-5 py-4">
        <div className="mx-auto max-w-sm">
          <p className="text-[11px] leading-relaxed text-ink-dim">
            rows wait below the fold. Scroll down and each row rises in sequence — the classic index entrance, driven by
            one IntersectionObserver watching a sentinel.
          </p>
          <div style={{ height: 420 }} aria-hidden />
          <div ref={sentinel} className="h-px" aria-hidden />
          <div className="space-y-2">
            {shown &&
              rows.map((r, i) => (
                <div
                  key={`${run}-${r.name}`}
                  className="flex items-center gap-3 rounded-xl border border-white/6 bg-white/3 px-3.5 py-2.5"
                  style={{ animation: `mf-rise .5s cubic-bezier(.22,.68,.32,1) ${reduced ? 0 : i * 70}ms both` }}
                >
                  <span className="h-2 w-2 shrink-0 rounded-full" style={{ background: r.dot }} />
                  <span className="min-w-0 flex-1 truncate font-mono text-[11px] text-ink">{r.name}</span>
                  <span className="shrink-0 text-[9px] text-ink-faint">{r.meta}</span>
                </div>
              ))}
            {shown && (
              <p className="pt-1 text-center text-[9px] text-ink-faint">
                {rows.length} rows · 70ms cascade · played {run > 0 ? `${run + 1}×` : "once"}
              </p>
            )}
          </div>
        </div>
      </div>
    </div>
  );
}