Layouts
Page & app scaffolds — the rail, the top bar, the content column, the Agent panel.
Page and app scaffolds. The persistent sidebar rail (the product IA), the top bar
(search · Day/Night · Agent), the content column, and the right Agent panel overlay —
adaptive across breakpoints (the tokens: sm 640 · md 768 · lg 1024 · xl 1280).
The shell recipe
The app shell is a composition of shipped parts, not a monolith:
| Region | Built from | Notes |
|---|---|---|
| Sidebar rail | nav links + Separator | fixed on lg+, collapses into a Sheet (side left) below |
| Top bar | SearchInput (or a search chip) · theme toggle · Agent button | sticky, z-(--layer-sticky), hairline bottom border |
| Content column | PageHeader + sections (SectionHeader, cards, rails) | one column, max-w-6xl, px-6 |
| Agent panel | Sheet (side right) + the Ask surface | the living HaloMark marks presence |
| Modals & waits | Dialog · Toaster · the States | the layer scale keeps stacking sane |
// The skeleton, from the package:
<div className="min-h-svh bg-background text-foreground">
<aside className="fixed inset-y-0 hidden w-60 border-r border-border lg:block">…rail…</aside>
<div className="lg:pl-60">
<header className="sticky top-0 z-(--layer-sticky) h-14 border-b border-border bg-background/90 backdrop-blur">…top bar…</header>
<main className="mx-auto max-w-6xl px-6 py-8">
<PageHeader title="…" />
…sections…
</main>
</div>
<Sheet>…Agent panel…</Sheet>
<Toaster />
</div>Product IA
The shells assemble into the product surfaces:
Biograph · Store · Library · Directory · News · Inbox · Agent · Search · Profile
Status
A packaged AppShell block is the next promotion once the app's shell API settles — today the
recipe above is the contract, and the shell is live in the product apps.