siftlode/frontend/src/design-lab/DesignLab.tsx

import { useLayoutEffect, useState } from "react";
import { SCHEMES, type Scheme } from "../lib/theme";
import { BatchA } from "./batchA";
import { BatchB } from "./batchB";
import { BatchC } from "./batchC";
import { Chip } from "../components/ui/Chip";

// The design lab (E28): the living style guide. Dev-only — see main.tsx and devOnlyGuard.ts. It sits
// OUTSIDE <App>, so it owns the theme attributes on <html> itself, through the same data-theme /
// data-scheme / --font-scale / data-backdrop switches the app's PrefsProvider drives. Nothing here
// is saved: the lab's bar changes this tab only.

type Look = { mode: "dark" | "light"; scheme: Scheme; fontScale: number; backdrop: boolean };

// The owner's own daily look (E28 S1 inventory) is the starting point — decisions are taken on it.
const START: Look = { mode: "dark", scheme: "midnight", fontScale: 1.02, backdrop: true };

function applyLook(l: Look) {
  const el = document.documentElement;
  el.dataset.theme = l.mode;
  el.dataset.scheme = l.scheme;
  el.dataset.backdrop = l.backdrop ? "on" : "off";
  el.style.setProperty("--font-scale", String(l.fontScale));
}

export default function DesignLab() {
  const [look, setLook] = useState<Look>(START);
  useLayoutEffect(() => {
    applyLook(START);
    document.title = "Design lab · Siftlode";
  }, []);
  const set = (patch: Partial<Look>) => {
    const next = { ...look, ...patch };
    applyLook(next);
    setLook(next);
  };

  return (
    <div className="min-h-dvh text-fg" data-testid="design-lab">
      <div className="glass sticky top-0 z-chrome flex flex-wrap items-center gap-x-4 gap-y-2 px-4 py-2.5">
        <strong className="text-sm">Design lab</strong>
        <span className="flex gap-1">
          {(["dark", "light"] as const).map((m) => (
            <Chip key={m} pressed={look.mode === m} onClick={() => set({ mode: m })}>
              {m}
            </Chip>
          ))}
        </span>
        <span className="flex flex-wrap gap-1">
          {SCHEMES.map((s) => (
            <Chip key={s.id} pressed={look.scheme === s.id} onClick={() => set({ scheme: s.id })}>
              <span className="h-2.5 w-2.5 rounded-full" style={{ background: s.swatch }} />
              {s.name}
            </Chip>
          ))}
        </span>
        <Chip pressed={look.backdrop} onClick={() => set({ backdrop: !look.backdrop })}>
          backdrop
        </Chip>
        <label className="flex items-center gap-2 text-xs text-muted">
          text {look.fontScale.toFixed(2)}
          <input
            type="range"
            min={0.9}
            max={1.2}
            step={0.02}
            value={look.fontScale}
            onChange={(e) => set({ fontScale: Number(e.target.value) })}
            className="w-24 accent-accent"
          />
        </label>
        <nav className="flex flex-wrap gap-1 text-xs">
          <a href="#decided" className="rounded-md px-1.5 py-0.5 text-success hover:bg-card">
            A ✓
          </a>
          <a href="#decided-b" className="rounded-md px-1.5 py-0.5 text-success hover:bg-card">
            B ✓
          </a>
          <a href="#decided-c" className="rounded-md px-1.5 py-0.5 text-success hover:bg-card">
            C ✓
          </a>
        </nav>
      </div>

      <main className="mx-auto flex max-w-screen-2xl flex-col gap-6 p-4">
        <header>
          <h1 className="text-2xl font-bold">The design reference</h1>
          <p className="text-sm text-muted">
            Every rule of docs/DESIGN.md in its chosen rendering, with the app&apos;s real CSS.
            Resize the window to tablet size to see them there too.
          </p>
        </header>
        <header id="decided" className="mt-6 scroll-mt-20">
          <h2 className="text-xl font-bold">Decided · batch A, controls</h2>
          <p className="text-sm text-muted">
            The chosen rendering of each decision, the reference the primitives are built to.
          </p>
        </header>
        <BatchA />
        <header id="decided-b" className="mt-6 scroll-mt-20">
          <h2 className="text-xl font-bold">Decided · batch B, surfaces, chrome and colour</h2>
          <p className="text-sm text-muted">
            B1 (density) and B3 (state layers) are rendered inside the batch A references above.
          </p>
        </header>
        <BatchB />
        <header id="decided-c" className="mt-6 scroll-mt-20">
          <h2 className="text-xl font-bold">Decided · batch C, behaviour and device</h2>
          <p className="text-sm text-muted">
            C1 is the action classification S3 builds each object&apos;s one action list from.
          </p>
        </header>
        <BatchC />
      </main>
    </div>
  );
}