Range-linked Chart Scrubber

// Range-linked Chart Scrubber — the demo's own source, extracted verbatim.
// From src/components/demos/scenes-17.tsx, export ChartScrubber.
// 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.
// 1 helper the demo imports is inlined above it, verbatim.
// Catalog-dependent: the array below is a three-record sample of the site's own data.

import { useRef, useState } from "react";

// The demo reads the site's own catalog: 184 briefs and 661 recorded model runs. Three real
// records are inlined below — long fields trimmed — so this file runs as
// written. Replace the array with your own data, or read the full list from
// the site, where /api/search?q= returns the matching records as JSON.
const PROMPTS = [
  {"slug":"dark-saas-pricing-launch","title":"Dark SaaS launch page with aurora hero","titleZh":"暗色 SaaS 发布页：极光 hero","industry":"SaaS","vibe":"dark, premium, minimal","stacks":["Next.js","HTML"],"blocks":["Nav","Hero"],"status":"featured","avgFidelity":92,"bestModel":"Claude 4.6 Sonnet","runs":[{"model":"Claude 4.6 Sonnet","date":"2026-08-04","fidelity":95,"buildError":false,"notes":"Matches reference spacing almost 1:1; fonts swapped gra…"},{"model":"Codex","date":"2026-08-04","fidelity":91,"buildError":false,"notes":"Solid. Needed one nudge to enable the toggle pricing."}],"promptBody":"Build a one-page dark SaaS landing in Next.js + Tailwind.\n• Palette: near-black #07080B canvas,…","author":"Motif Studio","published":"2026-08-04","tokens":[],"estLoc":0,"relatedComponents":[],"revised":"","revisedNote":"","remixes":[],"viewport":""},
  {"slug":"3d-portfolio-neon","title":"3D portfolio with neon orbit showcase","titleZh":"","industry":"Portfolio","vibe":"bold, 3D, neon","stacks":["Next.js","React"],"blocks":["Hero","Orbit gallery"],"status":"verified","avgFidelity":87,"bestModel":"Codex","runs":[{"model":"Codex","date":"2026-07-29","fidelity":91,"buildError":false,"notes":"Orbit ring implemented with spring physics — great feel."},{"model":"Claude 4.6 Sonnet","date":"2026-07-29","fidelity":85,"buildError":false,"notes":"Accurate but used heavier 3D lib than asked; suggested …"}],"promptBody":"Design a portfolio hero that feels like a neon gallery.\n• Left: name + role in large display ty…","author":"Motif Studio","published":"2026-07-29","tokens":[],"estLoc":0,"relatedComponents":[],"revised":"","revisedNote":"","remixes":[],"viewport":""},
  {"slug":"fintech-trust-page","title":"Fintech trust page (compliance tone)","titleZh":"金融科技信任页（合规语气）","industry":"Fintech","vibe":"calm, trustworthy, crisp","stacks":["Next.js","HTML"],"blocks":["Hero","Security bento"],"status":"verified","avgFidelity":89,"bestModel":"Claude 4.6 Sonnet","runs":[{"model":"Claude 4.6 Sonnet","date":"2026-08-01","fidelity":92,"buildError":false,"notes":"Excellent typographic hierarchy for legal-adjacent copy."},{"model":"GLM-4.6 (CN)","date":"2026-08-01","fidelity":88,"buildError":false,"notes":"Very close; metric band needed re-spacing."}],"promptBody":"A fintech page that earns trust, not hype.\n• Off-white paper background, ink navy text, single …","author":"Motif Studio","published":"2026-08-01","tokens":[],"estLoc":0,"relatedComponents":[],"revised":"","revisedNote":"","remixes":[],"viewport":""},
];

const fidelitySeries = [...PROMPTS].map((p) => ({ v: p.avgFidelity, slug: p.slug, model: p.bestModel })).sort((a, b) => a.v - b.v);

export function ChartScrubber() {
  const [lo, setLo] = useState(18);
  const [hi, setHi] = useState(54);
  const [dragging, setDragging] = useState<"lo" | "hi" | null>(null);
  const [reading, setReading] = useState<number | null>(null);
  const trackRef = useRef<HTMLDivElement>(null);
  const n = fidelitySeries.length;
  const inBand = fidelitySeries.slice(lo, hi + 1);
  const mean = Math.round((inBand.reduce((a, b) => a + b.v, 0) / Math.max(1, inBand.length)) * 10) / 10;
  const best = inBand.reduce((top, p) => (p.v > top.v ? p : top), inBand[0] ?? fidelitySeries[0]);
  const floor = 60;
  const ceil = 100;
  const height = (v: number) => `${Math.max(8, ((v - floor) / (ceil - floor)) * 100)}%`;

  const indexFromClientX = (clientX: number) => {
    const el = trackRef.current;
    if (!el) return 0;
    const r = el.getBoundingClientRect();
    return Math.max(0, Math.min(n - 1, Math.round(((clientX - r.left) / r.width) * (n - 1))));
  };

  const onHandleKey = (e: React.KeyboardEvent, which: "lo" | "hi") => {
    const step = e.shiftKey ? 6 : 1;
    const apply = (delta: number) => {
      if (which === "lo") setLo((v) => Math.max(0, Math.min(hi - 1, v + delta)));
      else setHi((v) => Math.min(n - 1, Math.max(lo + 1, v + delta)));
    };
    if (e.key === "ArrowLeft") { e.preventDefault(); apply(-step); }
    else if (e.key === "ArrowRight") { e.preventDefault(); apply(step); }
    else if (e.key === "Home") {
      e.preventDefault();
      if (which === "lo") setLo(0);
      else setHi(lo + 1);
    } else if (e.key === "End") {
      e.preventDefault();
      if (which === "hi") setHi(n - 1);
      else setLo(hi - 1);
    }
  };

  return (
    <div className="flex h-full w-full flex-col items-center justify-center bg-[radial-gradient(70%_90%_at_50%_100%,rgba(167,139,250,0.12),transparent_60%),#08090f] px-6 py-6">
      <div className="w-full max-w-lg">
        <div className="mb-3 flex items-baseline justify-between gap-3">
          <p className="text-[10px] font-bold uppercase tracking-[0.24em] text-violet-300/80">Prompt fidelity, {n} run-tested prompts</p>
          <p className="text-[10px] tabular-nums text-ink-faint">
            {lo + 1}–{hi + 1} of {n} · mean {mean}
          </p>
        </div>

        <div className="rounded-2xl border border-white/10 bg-white/[.02] p-3">
          <div
            ref={trackRef}
            className="relative flex h-32 items-end gap-[2px]"
            onPointerMove={(e) => {
              setReading(indexFromClientX(e.clientX));
              if (dragging) {
                const i = indexFromClientX(e.clientX);
                if (dragging === "lo") setLo(Math.max(0, Math.min(hi - 1, i)));
                else setHi(Math.min(n - 1, Math.max(lo + 1, i)));
              }
            }}
            onPointerLeave={() => {
              setReading(null);
              setDragging(null);
            }}
            onPointerUp={() => setDragging(null)}
          >
            {fidelitySeries.map((p, i) => {
              const inBandRow = i >= lo && i <= hi;
              return (
                <button
                  key={p.slug}
                  type="button"
                  tabIndex={-1}
                  aria-hidden
                  onPointerDown={() => {
                    setDragging(i - lo <= hi - i ? "lo" : "hi");
                  }}
                  className="flex-1 rounded-t-[2px] transition-opacity"
                  style={{
                    height: height(p.v),
                    background: inBandRow ? "#a78bfa" : "rgba(167,139,250,.22)",
                    opacity: reading === i ? 1 : inBandRow ? 0.95 : 0.6,
                  }}
                />
              );
            })}

            <div
              role="slider"
              tabIndex={0}
              aria-label="Lower fidelity bound"
              aria-valuemin={0}
              aria-valuemax={n - 1}
              aria-valuenow={lo}
              aria-valuetext={`Prompt ${lo + 1} of ${n}, fidelity ${fidelitySeries[lo].v}`}
              onKeyDown={(e) => onHandleKey(e, "lo")}
              className="absolute bottom-0 top-0 w-3 -translate-x-1/2 cursor-ew-resize rounded-full bg-violet-400/25 hover:bg-violet-400/40 focus-visible:outline focus-visible:outline-2 focus-visible:outline-violet-300"
              style={{ left: `${(lo / (n - 1)) * 100}%` }}
            />
            <div
              role="slider"
              tabIndex={0}
              aria-label="Upper fidelity bound"
              aria-valuemin={0}
              aria-valuemax={n - 1}
              aria-valuenow={hi}
              aria-valuetext={`Prompt ${hi + 1} of ${n}, fidelity ${fidelitySeries[hi].v}`}
              onKeyDown={(e) => onHandleKey(e, "hi")}
              className="absolute bottom-0 top-0 w-3 -translate-x-1/2 cursor-ew-resize rounded-full bg-violet-400/25 hover:bg-violet-400/40 focus-visible:outline focus-visible:outline-2 focus-visible:outline-violet-300"
              style={{ left: `${(hi / (n - 1)) * 100}%` }}
            />
          </div>

          <div className="mt-2 flex justify-between text-[9px] tabular-nums text-ink-faint">
            <span>{fidelitySeries[0].v}</span>
            <span>{reading !== null ? `prompt ${reading + 1}: ${fidelitySeries[reading].v} avg fidelity · ${fidelitySeries[reading].model}` : "drag a bar, or focus a handle and use ← →"}</span>
            <span>{fidelitySeries[n - 1].v}</span>
          </div>
        </div>

        <dl className="mt-3 grid grid-cols-3 gap-2">
          {[
            ["Prompts in band", String(inBand.length)],
            ["Band mean", String(mean)],
            ["Best model in band", best.model],
          ].map(([k, v]) => (
            <div key={k} className="rounded-2xl border border-white/8 bg-white/[.02] px-3 py-2">
              <dt className="text-[9px] font-bold uppercase tracking-widest text-ink-faint">{k}</dt>
              <dd className="mt-0.5 text-[11px] font-semibold text-ink">{v}</dd>
            </div>
          ))}
        </dl>
        <p className="mt-2 text-[10px] leading-relaxed text-ink-faint">
          The series is not decoration: it is the average fidelity of every prompt in the catalog, sorted, and the band selects
          real rows — the same averages the prompt cards print. {best.model} leads the selected band at {best.v}.
        </p>
      </div>
    </div>
  );
}