Sprint: debug, zichtbaarheid componenten (#165)

* feat(debug-store): Zustand store met hydration-flag voor debug-modus

* feat(status-bar): dev-only debug-toggle via geïsoleerde sub-component

* feat(globals.css): debug-mode overlay CSS voor data-debug-id elementen

* feat(shared): data-debug-id+label op navigatie-componenten

* feat(shared): data-debug-id+label op form/select-componenten

* feat(shared): data-debug-id+label op display-componenten
This commit is contained in:
Janpeter Visser 2026-05-08 08:55:43 +02:00 committed by GitHub
parent f7464db837
commit a16988b957
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
20 changed files with 154 additions and 35 deletions

View file

@ -3,3 +3,25 @@
@plugin "@tailwindcss/typography";
@import "./styles/theme.css";
/* Debug-mode overlay (alleen actief wanneer body.debug-mode is gezet door dev-only toggle) */
body.debug-mode [data-debug-id] {
outline: 2px dashed var(--info);
outline-offset: 1px;
position: relative;
}
body.debug-mode [data-debug-id]:hover::after {
content: attr(data-debug-label);
position: absolute;
top: 0;
left: 0;
background: var(--info-container);
color: var(--info-container-foreground);
font-size: 10px;
line-height: 1.2;
padding: 2px 4px;
white-space: nowrap;
border-radius: 2px;
z-index: 9999;
pointer-events: none;
}