Drag-a-theme Chip

// Drag-a-theme Chip — the demo's own source, extracted verbatim.
// From src/components/demos/scenes-17.tsx, export ThemeDrop.
// 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.
// 10 helpers the demo imports are inlined above it, verbatim.

import { useState } from "react";

export interface ThemeToken {
  key: "bg" | "panel" | "raised" | "ink" | "inkDim" | "inkFaint" | "accent" | "accent2" | "mint";
  label: string;
  cssVar: string;
}

export type ThemeValues = Record<ThemeToken["key"], string>;

export interface ThemePreset {
  id: string;
  label: string;
  note: string;
  values: ThemeValues;
}

export const THEME_PRESETS: ThemePreset[] = [
  {
    id: "shipped",
    label: "Shipped dark",
    note: "The palette the site ships with, read out of globals.css. Faint text sits at #747b87 because the check below caught the original #5b6472 at 3.24:1 on the panel colour.",
    values: {
      bg: "#06070b",
      panel: "#0b0d14",
      raised: "#10131d",
      ink: "#edf0f7",
      inkDim: "#9aa3b5",
      inkFaint: "#747b87",
      accent: "#8b5cf6",
      accent2: "#22d3ee",
      mint: "#34d399",
    },
  },
  {
    id: "paper",
    label: "Paper",
    note: "A light surface for print-style review. Dim text is darkened until it clears AA on the page colour.",
    values: {
      bg: "#f6f5f2",
      panel: "#ffffff",
      raised: "#efece6",
      ink: "#14161c",
      inkDim: "#4a505d",
      inkFaint: "#6d7381",
      accent: "#6d28d9",
      accent2: "#0e7490",
      mint: "#047857",
    },
  },
  {
    id: "contrast",
    label: "High contrast",
    note: "Near-black page, pure-white text, saturated accents — for judging hairline borders and focus rings.",
    values: {
      bg: "#000000",
      panel: "#0a0a0a",
      raised: "#151515",
      ink: "#ffffff",
      inkDim: "#d4d4d4",
      inkFaint: "#a3a3a3",
      accent: "#a78bfa",
      accent2: "#22d3ee",
      mint: "#6ee7b7",
    },
  },
  {
    id: "cyan",
    label: "Cyan-forward",
    note: "Swaps the accent roles to test whether any surface has a hard-coded violet.",
    values: {
      bg: "#04070b",
      panel: "#081019",
      raised: "#0d1a26",
      ink: "#eef6fb",
      inkDim: "#9fb3c2",
      inkFaint: "#677e8f",
      accent: "#22d3ee",
      accent2: "#8b5cf6",
      mint: "#34d399",
    },
  },
];

export interface ContrastCheck {
  label: string;
  foreground: string;
  background: string;
  ratio: number;
  /** 4.5 for body text, 3 for large text and UI edges (WCAG AA) */
  line: number;
  pass: boolean;
}

const hex = (c: string): [number, number, number] => {
  const s = c.trim().replace("#", "");
  const full = s.length === 3 ? s.split("").map((x) => x + x).join("") : s;
  return [parseInt(full.slice(0, 2), 16), parseInt(full.slice(2, 4), 16), parseInt(full.slice(4, 6), 16)];
};

export function relativeLuminance(color: string): number {
  const [r, g, b] = hex(color).map((v) => {
    const c = v / 255;
    return c <= 0.04045 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4;
  });
  return 0.2126 * r + 0.7152 * g + 0.0722 * b;
}

export function contrastRatio(a: string, b: string): number {
  const la = relativeLuminance(a);
  const lb = relativeLuminance(b);
  const [hi, lo] = la >= lb ? [la, lb] : [lb, la];
  return Math.round(((hi + 0.05) / (lo + 0.05)) * 100) / 100;
}

export function contrastChecks(values: ThemeValues): ContrastCheck[] {
  const pairs: { label: string; fg: ThemeToken["key"]; bg: ThemeToken["key"]; line: number }[] = [
    { label: "Body text on page", fg: "ink", bg: "bg", line: 4.5 },
    { label: "Body text on panel", fg: "ink", bg: "panel", line: 4.5 },
    { label: "Dim text on panel", fg: "inkDim", bg: "panel", line: 4.5 },
    { label: "Faint text on panel", fg: "inkFaint", bg: "panel", line: 4.5 },
    { label: "Accent on page", fg: "accent", bg: "bg", line: 4.5 },
    { label: "Accent as a large label", fg: "accent", bg: "bg", line: 3 },
    { label: "Success chip on raised", fg: "mint", bg: "raised", line: 3 },
  ];
  return pairs.map((p) => {
    const ratio = contrastRatio(values[p.fg], values[p.bg]);
    return { label: p.label, foreground: values[p.fg], background: values[p.bg], ratio, line: p.line, pass: ratio >= p.line };
  });
}

const TOKEN_LABELS: { key: keyof ThemeValues; label: string }[] = [
  { key: "bg", label: "page" },
  { key: "panel", label: "panel" },
  { key: "ink", label: "text" },
  { key: "accent", label: "accent" },
];

export function ThemeDrop() {
  const [applied, setApplied] = useState<(typeof THEME_PRESETS)[number] | null>(null);
  const [hovering, setHovering] = useState(false);
  const [status, setStatus] = useState("Four theme presets from the admin control room. Drag one onto the card, or press it.");
  const checks = applied ? contrastChecks(applied.values) : [];
  const failing = checks.filter((c) => !c.pass);

  const apply = (preset: (typeof THEME_PRESETS)[number], how: string) => {
    setApplied(preset);
    const rows = contrastChecks(preset.values);
    const bad = rows.filter((r) => !r.pass).length;
    setStatus(
      bad === 0
        ? `${preset.label} applied ${how}. All ${rows.length} contrast checks pass.`
        : `${preset.label} applied ${how}. ${bad} of ${rows.length} contrast checks fail — the panel below names them.`
    );
  };

  return (
    <div className="flex h-full w-full flex-col items-center justify-center bg-[radial-gradient(70%_90%_at_50%_0%,rgba(167,139,250,0.12),transparent_60%),#08090f] px-6 py-6">
      <div className="w-full max-w-md">
        <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">Drop a theme on a card</p>
          <p className="text-[10px] text-ink-faint">{applied ? applied.label : "no theme applied"}</p>
        </div>

        <div
          onDragOver={(e) => {
            e.preventDefault();
            setHovering(true);
          }}
          onDragLeave={() => setHovering(false)}
          onDrop={(e) => {
            e.preventDefault();
            setHovering(false);
            const id = e.dataTransfer.getData("text/plain");
            const preset = THEME_PRESETS.find((p) => p.id === id);
            if (preset) apply(preset, "by drop");
          }}
          className={`rounded-2xl border p-4 transition-colors ${hovering ? "border-violet-400/70 bg-violet-400/[.06]" : "border-white/10 bg-white/[.02]"}`}
          style={applied ? { background: applied.values.bg, borderColor: applied.values.accent } : undefined}
        >
          <p className="text-[10px] font-bold uppercase tracking-[0.2em]" style={{ color: applied?.values.inkFaint ?? "#747b87" }}>
            Component preview
          </p>
          <div className="mt-2 rounded-xl border p-3" style={applied ? { background: applied.values.panel, borderColor: `${applied.values.ink}22` } : { background: "#0b0d14", borderColor: "rgba(255,255,255,.1)" }}>
            <p className="text-sm font-extrabold" style={{ color: applied?.values.ink ?? "#edf0f7" }}>
              Pricing, but it breathes
            </p>
            <p className="mt-1 text-[10px] leading-relaxed" style={{ color: applied?.values.inkDim ?? "#9aa3b5" }}>
              Three tiers, one accent, no gradient soup. Drop a different chip on this card and every value remaps at once.
            </p>
            <span
              className="mt-2 inline-block rounded-lg px-2.5 py-1 text-[10px] font-bold"
              style={{ background: applied?.values.accent ?? "#8b5cf6", color: applied?.values.bg ?? "#06070b" }}
            >
              Choose a plan
            </span>
            <p className="mt-1.5 text-[9px]" style={{ color: applied?.values.inkFaint ?? "#747b87" }}>
              14-day refund · no card
            </p>
          </div>
        </div>

        <div className="mt-3 flex flex-wrap gap-2">
          {THEME_PRESETS.map((preset) => (
            <button
              key={preset.id}
              type="button"
              draggable
              onDragStart={(e) => {
                e.dataTransfer.setData("text/plain", preset.id);
                e.dataTransfer.effectAllowed = "copy";
              }}
              onClick={() => apply(preset, "with a press")}
              aria-pressed={applied?.id === preset.id}
              className="flex cursor-grab items-center gap-2 rounded-xl border border-white/10 bg-white/[.03] px-2.5 py-1.5 text-[10px] text-ink-dim transition-colors hover:border-violet-400/50 hover:text-ink active:cursor-grabbing"
            >
              <span className="flex gap-1" aria-hidden>
                {TOKEN_LABELS.map(({ key, label }) => (
                  <span key={label} className="h-3 w-3 rounded-full border border-white/20" style={{ background: preset.values[key] }} />
                ))}
              </span>
              {preset.label}
            </button>
          ))}
        </div>

        {applied && (
          <div className="mt-3 rounded-2xl border border-white/10 bg-white/[.02] p-3">
            <p className="text-[9px] font-bold uppercase tracking-widest text-ink-faint">
              Contrast, recomputed on every apply ({checks.length - failing.length}/{checks.length} pass)
            </p>
            <ul className="mt-1.5 space-y-1">
              {checks.map((c) => (
                <li key={c.label} className="flex items-center justify-between gap-2 text-[10px]">
                  <span className="truncate text-ink-dim">{c.label}</span>
                  <span className={`shrink-0 tabular-nums ${c.pass ? "text-emerald-300" : "text-amber-300"}`}>
                    {c.ratio.toFixed(2)}:1 · {c.pass ? "pass" : `needs ${c.line}`}
                  </span>
                </li>
              ))}
            </ul>
          </div>
        )}

        <p aria-live="polite" className="mt-2 min-h-[1rem] text-[10px] leading-relaxed text-violet-200/80">
          {status}
        </p>
        <p className="mt-1 text-[10px] leading-relaxed text-ink-faint">
          The chips are the presets the admin theme control room stores, and the contrast figures are the same WCAG arithmetic
          that room runs — so a preset that fails is named here, not quietly dropped from the menu. Pressing a chip does exactly
          what dropping it does; the drag is a shortcut, never the only way in.
        </p>
      </div>
    </div>
  );
}