Docs Components
AppShell (Sidebar + TopBar)experimental
The frame around everything: a rail on the left for moving between areas, a top bar carrying the page title, the environment stamp, the theme toggle, and your identity. The place you're in sits on an ink plate in the rail.
Anatomy
logo— The AtomMark hanko + semibold wordmark landing on a vermillion full stop — “Atom.” — links home. The mark is an ensō-gap orbit — a carved ring with one break, the electron resting in the gap (and an unforced C for Crunchyroll) — vermillion stamp, paper carve. Code twin: src/components/AtomMark.tsx; Figma twin: Logo/AtomMark.nav-item— Icon (lucide, 16px, 2px stroke) + label; active = ink plate with aria-current; Kbd hint shows the go-to sequence (G then key — modifier combos are browser-reserved and were unimplementable) and fades in on hover/focus.recents— Clock-marked recently OPENED entities (live from the store, capped 5, deduped, newest first; seeded list only until the first visit).topbar— Sticky solid surface, hairline bottom border. Title (h3) → environment Badge (caution, hidden in Production) → actions → divider → avatar-only identity menu (name + role live inside the menu; includes the persona switcher — switching changes the actor on all new audit events).
API
| Prop | Type | Description |
|---|---|---|
nav required | NavItem[] | {href, label, icon, shortcut?}. Active state derives from the pathname — never passed manually. |
recents | RecentItem[] | Recently opened entities. |
TopBar.environment | string | Renders the caution badge for anything except 'Production'. |
TopBar.user | {name, role} | Identity chip. |
Design specifications
- rail-width
space-10 × 3 + space-6 - rail-border
color-border-strong / border-width-hairline - active-item
color-bg-inverse / color-text-inverse - topbar-layer
layer-sticky - topbar-surface
color-bg-surface (solid — no blur/translucency) - canvas-max
container-content
Guidelines
- mustSidebar navigates between workspace areas; switching views within an entity is Tabs' job.
- mustEvery shortcut hinted in the rail works: G-then-key sequences navigate globally (suppressed while typing, with modifiers, or over dialogs).
- must-notOnly one environment badge exists, in the top bar — never duplicate it per page.
- mustState changes on rail items (hover, active) never alter item geometry: shortcut hints hide via opacity/visibility so they stay in layout — removing them (display: none) shrinks the row and shifts every item below it on navigation.