1 viewer
Component · Layout
AppShell
Top-level layout composer with optional Nav, Sidebar, Drawer, Footer slots and a main content area. Slots stored as named children (slot=nav|sidebar|drawer|footer).
- Category
- Layout
- Slots
- 6
- States
- 0
- Writer
- Shared
Preview
Main Shell Content Area
Responsive workspace content hosted in primary AppShell slot.<AppShell id="app-shell-demo">
<Nav brand="CRE8 RUNTIME" slot="nav">
<Action href="/view" label="Dashboard" />
</Nav>
<Sidebar header="System" slot="sidebar">
<Action href="/view/components" label="Services" />
</Sidebar>
<Container>
<Text text="Main Shell Content Area" variant="h3" />
<Text
text="Responsive workspace content hosted in primary AppShell slot."
/>
</Container>
<Footer slot="footer">
<Text text="CRE8 Shell · Active" />
</Footer>
</AppShell>Anatomy
The named parts of the rendered markup. Recipes style these hooks, and every renderer keeps them stable.
| Slot | DOM class |
|---|---|
| root | .primitive-app-shell |
| nav | — |
| sidebar | — |
| main | .primitive-app-shell__content |
| drawer | — |
| footer | — |
| body | .primitive-app-shell__body |
States and platforms
The states the contract publishes, the platforms it declares, and the style recipes that dress it.
States
Platforms
Recipes
Renderers
Every tag in the example above renders through a shared writer.
Declared adapters. A status is the manifest's declaration, not a measured parity result.
| Target | Renderer | Status |
|---|---|---|
| web | react | experimental |
| runtime-node | view-node | ready |
| ssr | html-semantic | ready |
| terminal | terminal-layout | planned |
Accessibility
Semantic structure must stay available without visual styling.
- Expose meaningful names for interactive controls.
- Keep keyboard and pointer behavior equivalent where the platform supports it.
- Publish state with native semantics and data attributes where the adapter supports them.