Komponenten · @repo/ui
Layout
Header-, Footer-, Sidebar- und Brand-Komponenten der Akademie. Zusätzlich PageTransition (animiert die View-Hierarchie zwischen Routen) und HeaderSearch (globale Suche).
LogoStable
DGN-Logo mit Dark-Mode-Variante. 120 × 20 Lockup, fest auf den Header zugeschnitten.
HeaderStable
Akademie-Header mit Navigation, Suche, Theme/Locale-Switcher und User-Menu. Verwendet von der Akademie-Frontend — Admin nutzt stattdessen AdminTopbar.
AkademieTopBarStable
Sticky Glass-Topbar mit Backdrop-Blur. Search-Pill mit ⌘K-Hint (Desktop only — auf Touch ausgeblendet) öffnet HeaderSearch via dispatchOpenGlobalSearch. Layout: Flex unter 1400 px (Pill linksbündig, max 480), Grid `1fr | 480 | 1fr` ab 1400 px für echtes Topbar-Center. Plus Locale-Dropdown, Theme-Toggle (Light/Dark binary), Notifications-Stub, User-Menü.
AkademieMobileDrawerStable
Slide-In-Panel von links für Mobile. Backdrop schließt auf Tap, Escape ebenso. Wrappt dieselbe AkademieSidebar im Embedded-Modus, sodass die Navigation zwischen Layouts nicht driftet.
Klick auf den Button, um den Drawer zu öffnen — Backdrop oder Escape schließt.
HeaderSearchStable
Globale Suchleiste — debounced Async-Search, Recent-Searches in localStorage, Keyboard-Navigation. Verwendet im Akademie-Header.
Vollständige Demo benötigt einen onSearch-Backend-Stub. Der Akademie-Frontend liefert ihn via Search-Insights-Logging-Hook; hier wird nur die Komponentensignatur dokumentiert.
PageTransitionStable
Animiert den Inhalt zwischen Route-Wechseln (subtiles Fade + Translate). Wrappt children unter dem AdminTopbar / Header. Pure Wrapper — keine Konfiguration.
Bei jedem Routenwechsel wird der Schlüssel neu vergeben — der CSS-Animation der Klasse .root in PageTransition.module.css spielt einen Fade-In ab.