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 , 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)); } 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) => ( set({ mode: m })}> {m} ))} {SCHEMES.map((s) => ( set({ scheme: s.id })}> {s.name} ))} set({ backdrop: !look.backdrop })}> backdrop

The design reference

Every rule of docs/DESIGN.md in its chosen rendering, with the app's real CSS. Resize the window to tablet size to see them there too.

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.

); }