Phase 4 — App shell layout primitives
The actual "shell" — composing primitives into reusable page chrome.
Components
AppShell — root container orchestrating sidebar, topbar, content, footerSidebar — collapsible, resizable, persisted state, mobile-drawer mode, nested nav support
Variants: icon, compact, expanded, floating
TopBar — slots for left (brand + breadcrumb), center (search / command trigger), right (user menu, theme toggle, notifications)CommandBar — ⌘K palette on top of the Command primitive; registerable action providersPageHeader — title, description, breadcrumb, action slotContentContainer — max-width, density-aware padding, scroll behaviorFooter — optional slotEmptyState, ErrorState, LoadingState — standardized status surfaces
Requirements
Fully responsive (mobile / tablet / desktop)
RSC-compatible where feasible (AppShell is a server component; interactive parts are client islands)
All composition via slots/props — no hardcoded content
Layout state (sidebar collapsed, theme, density) persisted via cookies so SSR matches first paint
Acceptance
A consumer app using <AppShell sidebar={<Nav/>} topBar={<TopBar/>}>{children}</AppShell> gets a complete, responsive shell
Sidebar collapsed state survives reload with no flicker
All pieces render correctly in both themes using only semantic tokens
Depends on Phase 3.
Part of the next-shell app shell extraction plan.
Phase 4 — App shell layout primitives
The actual "shell" — composing primitives into reusable page chrome.
Components
AppShell— root container orchestrating sidebar, topbar, content, footerSidebar— collapsible, resizable, persisted state, mobile-drawer mode, nested nav supporticon,compact,expanded,floatingTopBar— slots for left (brand + breadcrumb), center (search / command trigger), right (user menu, theme toggle, notifications)CommandBar— ⌘K palette on top of the Command primitive; registerable action providersPageHeader— title, description, breadcrumb, action slotContentContainer— max-width, density-aware padding, scroll behaviorFooter— optional slotEmptyState,ErrorState,LoadingState— standardized status surfacesRequirements
AppShellis a server component; interactive parts are client islands)Acceptance
<AppShell sidebar={<Nav/>} topBar={<TopBar/>}>{children}</AppShell>gets a complete, responsive shellDepends on Phase 3.
Part of the
next-shellapp shell extraction plan.