import { useLayoutEffect, useState } from "react"; import clsx from "clsx"; import { SCHEMES, type Scheme } from "../lib/theme"; import { BatchA } from "./batchA"; import { BatchB } from "./batchB"; import { BatchC, C5 } from "./batchC"; // The open decisions, in the order they are asked. The decided ones render below them as reference. const OPEN = [{ id: "c5", code: "C5", title: "Player row", render: C5 }] as const; // The design lab (E28): the living style guide. Dev-only — see main.tsx and devOnlyGuard.ts. It sits // OUTSIDE , so it owns the theme attributes on 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)); } const chip = (on: boolean) => clsx( "inline-flex items-center gap-1.5 rounded-full border px-2.5 py-1 text-xs transition", on ? "border-accent bg-accent text-accent-fg" : "border-border text-muted hover:text-fg", ); export default function DesignLab() { const [look, setLook] = useState(START); useLayoutEffect(() => { applyLook(START); document.title = "Design lab · Siftlode"; }, []); const set = (patch: Partial) => { const next = { ...look, ...patch }; applyLook(next); setLook(next); }; return (
Design lab {(["dark", "light"] as const).map((m) => ( ))} {SCHEMES.map((s) => ( ))}

Open · the player row on a narrow screen

Each decision shows its variants with the app's real CSS. The framed one is the recommendation. Resize the window to tablet size to see them there too.

{OPEN.map((d) => ( ))}

Decided · batch A, controls

The chosen rendering of each decision, the reference the primitives are built to.

Decided · batch B, surfaces, chrome and colour

B1 (density) and B3 (state layers) are rendered inside the batch A references above.

Decided · batch C, behaviour and device

C1 is the action classification S3 builds each object's one action list from.

); }