Admin Shell — Editorial Density Showcase
Hardening showcase composing AdminShell in the admin-v7-r3 editorial-density pattern — WorkspaceSwitcher in the logo slot, ChromeButton cluster in topbarEnd, eyebrow-grouped nav, sidebar footer with Avatar + Kbd.
Preview
Tonight's lineup
This showcase composes AdminShell with WorkspaceSwitcher in the logo slot, a ChromeButton cluster in topbarEnd, an eyebrow-grouped nav, and a sidebar footer that pairs Avatar with a Kbd shortcut hint — the same editorial-density pattern used in the admin-v7-r3 reference shell.
Press ⌘K or click Search to toggle the command-palette stub.
What this showcase proves
The admin-v7-r3 reference shell composes Visor primitives into a single, dense editorial chrome:
WorkspaceSwitcherin thelogoslot — multi-tenant identity at the top of the sidebarChromeButtoncluster intopbarEnd— 28px buttons with inlineKbdshortcut hints, sized for chrome (not body)- Eyebrow-grouped nav inside
sidebarNav— primary nav, then a small caps group label, then a second nav cluster sidebarFooterrow pairingAvatar+ identity meta + a trailingKbdhint — acts as the cmd-K opener
This page is a verification harness: every slot used here belongs to the
public API of AdminShell and its primitives. No code changes to
admin-shell were required to reach this composition.
Slot map
| Slot | Composition |
|---|---|
logo | <WorkspaceSwitcher current={…} workspaces={[…]} onSelect={…} /> |
sidebarNav | Two <NavList> clusters separated by a small-caps eyebrow label |
sidebarFooter | <button> containing <Avatar> + identity meta + <Kbd keys={["⌘","K"]} /> |
topbarStart | Page section title ("Dashboard") |
topbarEnd | Three <ChromeButton> — Search (with keys), Density, primary New event |
Composition notes
logo accepts any node — including blocks
The WorkspaceSwitcher block drops straight into AdminShell's logo slot
with no adapter. The slot has no opinion about content; the block contributes
its own sidebar-header-shaped trigger.
topbarEnd carries the chrome density
ChromeButton (28px) is the right scale for topbar chrome. Button (32/36/40px)
is body-scale and would dominate the bar. The trailing keys prop renders an
inline Kbd size="sm" so the ⌘K hint sits inside the button without ad-hoc
markup.
Eyebrow group labels live inside sidebarNav
AdminShell does not have a per-group slot — instead, the consumer composes
the whole nav region (lists + eyebrows) and passes it as one node to
sidebarNav. This keeps the block neutral about how many groups exist and how
they're labeled.
sidebarFooter is one row, not three slots
Pairing Avatar + identity meta + trailing Kbd into a single button row
keeps the footer compact and reinforces the cmd-K affordance. The
sidebar-footer slot is a freeform region, so a real app wires this to its
command-palette dialog.
Theming
This composition relies only on Visor's semantic tokens (--text-primary,
--text-secondary, --surface-muted, --radius-sm). Drop the showcase under
any theme that provides those tokens — default Visor, ENTR, Mission Control —
and the layout adapts. No hard-coded color values.
Known gaps
None surfaced. AdminShell's public API supports the full r3 editorial-density
composition without changes. If a gap is discovered in a downstream app, file
a separate VI- ticket — do not extend admin-shell directly inside this
showcase.
See also
AdminShell— block referenceWorkspaceSwitcher— sidebar-header tenant switcherChromeButton— 28px topbar/chrome button primitiveKbd— keyboard shortcut primitiveAvatar— identity primitive
Admin Shell
Foundational admin layout with sidebar, topbar, and main content area. Slot-driven for logo, navigation, breadcrumbs, user menu, and status indicators.
Admin Tabbed Editor
Full-page editor with horizontal tabs, tab-scoped content panels, and a sticky save/cancel footer. Unsaved-changes guard fires on tab switch and cancel; save supports async with pending state.