Doel
Centrale design-instellingenpagina. Eén bron van waarheid voor het visuele systeem:
de design-tokens in `app/globals.css` (`:root`-blok) en de design-canon in `DESIGN.md`.
Een wijziging aan een instelling op deze pagina = een wijziging aan het design.
Eén bron — koppeling
- De tokens (kleuren `--bg/--surface/--text*/--line*/--accent*`, radii `--r*`, schaduwen,
typografie) leven in `app/globals.css`. Deze pagina toont ze als instellingen en schrijft
alleen het `:root`-blok terug (met backup `.bak-<ts>` + auditregel).
- De canon/uitleg leeft in `DESIGN.md`. Deze pagina toont DESIGN.md volledig en kan hem
bewerken via dezelfde veilige docs-editor (`/api/controlpanel/docs`: conflict-check, backup,
auditregel, alleen `docs/`-scope — DESIGN.md staat in repo-root en wordt apart via deze route
gelezen/geschreven indien toegestaan).
- De Design-sectie in het toelichting-paneel (`PageContextPanel`, leest `docs/page-context/*.md`)
en deze stijlpagina verwijzen naar dezelfde DESIGN.md. Verandert DESIGN.md, dan verandert de
design-uitleg overal mee: er is geen tweede, losse kopie van de design-regels.
Functies
- Genereren — past de huidige (mogelijk nog niet opgeslagen) instellingen toe als live preview:
een representatief staal (panel, `ux-tbl`-tabel met bedrag-kolom, badge, knoppen) gerenderd met
exact de ingestelde tokens. "Wat je genereert = precies hoe DESIGN.md eruitziet."
- Opslaan tokens — schrijft de waarden terug naar het `:root`-blok van `app/globals.css`
(backup + audit). Alleen bestaande tokens krijgen een nieuwe waarde.
- DESIGN.md — onderaan volledig leesbaar; bewerken via de bestaande docs-editor-mechaniek.
Drie pijlers
1. Codewerk-automatisering mogelijk? Ja — tokens worden machinaal geparsed/geschreven
(`lib/controlpanel/design-tokens.ts`); een agent kan voorgestelde token-sets aanleveren.
2. Output + berekening zichtbaar? Ja — de preview rendert direct uit de actuele tokens; er is
geen verborgen tussenstap tussen instelling en weergave.
3. Bron beschikbaar, gelinkt, controleerbaar? Ja — tokens → `app/globals.css:root`,
canon → `DESIGN.md`; elke save laat een backup + auditregel achter.
Beslissingslog — runtime-architectuur (18-06-2026)
De feature crashte op PRODUCTIE met `tokens_css_not_found`: de oude implementatie
las/schreef op runtime `app/globals.css` en repo-root `DESIGN.md` via `process.cwd()`.
De Next-standalone runner-image bevat die source-tree NIET en is immutable
(schrijven is zinloos + raakt los van git). Opgelost door de runtime-bron te
verplaatsen naar het persistente `/data`-volume (zelfde volume als sqlite + audit,
datapad-conventie `process.env.DATA_DIR ?? <cwd>/data` uit `lib/boekhouding/db.ts`):
- Runtime-bron (bewerkbaar): `/data/design/tokens.json` (`{ "--token": "waarde" }`)
en `/data/design/DESIGN.md`. Backups `*.bak-<ts>` + audit blijven, nu in `/data/`.
- Baseline/seed (read-only): de Docker-build genereert `design-baseline/`
(`tokens.baseline.json` uit `app/globals.css:root` + kopie van `DESIGN.md`) en
kopieert die in de image. Ontbreekt een volume-bestand → eenmalig seeden uit de
baseline.
- Live toepassen: `app/layout.tsx` injecteert op runtime een
`<style id="design-overrides">:root{…}</style>` ná globals.css met de opgeslagen
tokens; edits werken zo app-breed door zonder image-rebuild (kort gecachet, TTL 5s).
Eén bron — afkadering (Ontbreekt)
Prod-edits landen in het volume (live-overlay); de `DESIGN.md`/`globals.css` in
git blijven de release-baseline. Dit is bewust een tweedeling: een volgende
image-rebuild verandert de live-overlay NIET (die staat op het volume). Wat nog
ontbreekt: een "terug naar git exporteren"-stap die volume-edits terugschrijft
naar de repo-bron (`globals.css`/`DESIGN.md`) zodat ze in een release landen. Die
git-sync is bewust NIET gebouwd (buiten scope).
IA-besluit (consensus 19-06)
- Verdict: keep — active design-instellingenpagina (tokens in /data/design/tokens.json + DESIGN.md), runtime-architectuur opgelost 18-06.
- Past op positie: nee — hoort NIET top-level naast Deploy/Database. Plaatsen in een Beheer/Configuratie-cluster (config-canon-onderhoud, geen primaire flow). Wel registreren als active route in CONTROL_PANEL_ROUTES + proces-routetabel.
- Ontbrekende functies: "terug naar git exporteren"-stap (volume-edits → repo-bron globals.css/DESIGN.md voor release; bewust nog niet gebouwd); expliciete registratie als active route; conflict-/backup-gedrag voor DESIGN.md buiten docs/-scope verduidelijken. Wordt anker voor instellingen-merge (config-hub).
- Codex-divergentie: ja — Opus suggereert top-level nav-registratie; Codex stelt dat Stijl onder Beheer/Configuratie hoort, niet top-level naast Deploy/Database. Codex overgenomen.