Table of Contents Spine

// Table of Contents Spine — the demo's own source, extracted verbatim.
// From src/components/demos/scenes/set-03.tsx, export TocSpine.
// 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.
// 5 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),
  };
}

const TOC_SECTIONS = [
  { id: "s-intro", t: "Introduction", fill: 0 },
  { id: "s-tokens", t: "Tokens & theming", fill: 1 },
  { id: "s-motion", t: "Motion language", fill: 2 },
  { id: "s-a11y", t: "Accessibility", fill: 3 },
  { id: "s-faq", t: "FAQ", fill: 4 },
];

const TOC_PARAS = [
  "Every surface on this page is built from the same ten tokens, so nothing can drift out of the system.",
  "Motion here is a language with a tiny vocabulary: enter, focus, state. Nothing decorates for its own sake.",
  "We treat reduced motion as a second design, not a deletion — the story survives without the theatre.",
  "If a component can't be reached with a keyboard and understood by a screen reader, it doesn't ship.",
  "The library grows weekly and the changelog says exactly what changed and why — no vague release notes.",
];

export function TocSpine() {
  const scroller = useRef<HTMLDivElement>(null);
  // #27 — a JS `behavior: "smooth"` overrides the stylesheet's
  // `scroll-behavior: auto`, so the jump has to read the preference itself.
  const { reduced } = useSceneMotion();
  const [active, setActive] = useState("s-intro");
  const jump = (id: string) => {
    const el = scroller.current;
    if (!el) return;
    const target = el.querySelector<HTMLElement>(`[data-sec="${id}"]`);
    if (target) el.scrollTo({ top: target.offsetTop - el.offsetTop - 8, behavior: reduced ? "auto" : "smooth" });
  };
  const onScroll = () => {
    const el = scroller.current;
    if (!el) return;
    let cur = TOC_SECTIONS[0].id;
    for (const sec of TOC_SECTIONS) {
      const node = el.querySelector<HTMLElement>(`[data-sec="${sec.id}"]`);
      if (node && node.offsetTop - el.offsetTop - 24 <= el.scrollTop) cur = sec.id;
    }
    setActive(cur);
  };
  return (
    <div className="flex h-full w-full flex-col bg-[#0a0c13]">
      <div className="flex items-center gap-2 border-b border-white/6 bg-[#0d1017]/95 px-4 py-2">
        <span className="text-[10px] font-bold uppercase tracking-[0.22em] text-violet-300/70">Guide · scroll the article</span>
        <span className="ml-auto font-mono text-[10px] text-ink-faint">TOC follows you</span>
      </div>
      <div className="flex min-h-0 flex-1">
        {/* article */}
        <div ref={scroller} onScroll={onScroll} className="min-w-0 flex-1 overflow-y-auto px-5 py-4">
          <div className="mx-auto max-w-sm space-y-3">
            {TOC_SECTIONS.map((sec, i) => (
              <div key={sec.id} data-sec={sec.id} className="rounded-xl border border-white/7 bg-white/3 p-3.5">
                <div className="text-xs font-extrabold tracking-tight">{sec.t}</div>
                <div className="mt-1.5 space-y-2">
                  <div className="h-1.5 w-full rounded-full bg-white/12" />
                  <div className="h-1.5 w-11/12 rounded-full bg-white/8" />
                  <div className="h-1.5 w-4/5 rounded-full bg-white/8" />
                </div>
                <p className="mt-2.5 text-[10px] leading-relaxed text-ink-dim">{TOC_PARAS[i]}</p>
              </div>
            ))}
          </div>
        </div>
        {/* toc spine */}
        <div className="hidden w-32 shrink-0 border-l border-white/6 bg-black/25 p-2.5 sm:block">
          <div className="px-1 pb-2 text-[8px] font-bold uppercase tracking-[0.22em] text-ink-faint">On this page</div>
          <ol className="space-y-0.5">
            {TOC_SECTIONS.map((sec) => (
              <li key={sec.id}>
                <button
                  type="button"
                  onClick={() => jump(sec.id)}
                  className={`flex w-full items-center gap-1.5 rounded-md px-1.5 py-1 text-left text-[9px] font-semibold transition-colors ${
                    active === sec.id ? "bg-violet-400/15 text-violet-100" : "text-ink-faint hover:text-ink-dim"
                  }`}
                >
                  <span className={`h-1 w-1 shrink-0 rounded-full ${active === sec.id ? "bg-violet-300" : "bg-white/20"}`} aria-hidden />
                  {sec.t}
                </button>
              </li>
            ))}
          </ol>
        </div>
      </div>
    </div>
  );
}