About the Redesign
The app-shell redesign track. Components here are global, shipping, and usable anywhere — they are documented apart from the established set because they belong to a direction still being worked out, not because they are drafts.
What this section is
What lives here:
Global
ws_* components built for the chromeless app shell — the window with no browser chrome, where the platform header's horizontal nav is suppressed and the shell has to carry navigation itself. They ship from includes/components/helpers.php like every other component and are available on any page.
What doesn't:
App-specific markup, throwaway mockups, or anything not yet real in code. A component earns a page here once it exists as a
ws_* helper with a template, tokenised CSS, and every state specified. Mockups belong in Figma.
The rules still apply
Being on the redesign track buys no exemptions. Everything here passes the same gates as the rest of the system.
- Workshopr tokens, always. Where a component follows an external pattern — Material 3, say — it borrows the geometry and the interaction model, never the palette. Red Unification and
platform-tokens.cssoutrank any imported colour system. - Contrast is measured, not assumed. Every text pairing is computed against its real rendered background before it ships. Two pairings in the side nav were caught failing AA this way and changed.
- Every state is specified. Rest, hover, focus, pressed, active, disabled — and demoed live on the page, not described in prose.
- The enforcer passes.
validate_fileclean,check-drift.phpin sync, registered inworkshopr-design-system.json.
Components
Side Navigation — ws_sidenav()
The vertical rail an app shell wears down its left edge, following the Material 3 navigation rail in Workshopr's colours. Two variants: an 80px collapsed rail and a 240px expanded one.