Admin Detail Drawer — Admin UI Density

Editorial-density composition of admin-detail-drawer demonstrating customHeader chrome row, hero section with KPI grid, line-variant Tabs with meta counts, and Kbd hints inside footerStatus. Built entirely from Visor primitives.

Preview

Eris Drew — Resolute presents

Sat Apr 27 · 22:00 — 04:00 · House of Yes

What this showcases

This is a composition-only showcase. It does not extend admin-detail-drawer — it proves the block's existing public API can carry the editorial-density admin-ui pattern (originally explored in admin-v7-r3/components/local/EventDetailDrawer.tsx) using only:

customHeader — chrome row with prev/next, counter, Edit, more, and a custom close X
children — hero section (status badges, eyebrow, marquee title, meta row, 4-cell KPI grid) followed by a Tabs (line variant) with meta-number badges on each trigger and tab content (lineup list, recent door list, internal notes)
footerStatus — Kbd hint cluster for ⌘S / Esc

hideHeader and customHeader shipped in VI-292 — this is the first Visor-native composition validating that work end-to-end.

Composition shape

<AdminDetailDrawer
  open={open}
  onOpenChange={setOpen}
  width="lg"
  className={styles.drawer}
  title="Eris Drew — Resolute presents"
  customHeader={<ChromeRow onClose={() => setOpen(false)} />}
  footerStatus={<KbdHints />}
>
  <Hero />
  <Tabs defaultValue="overview">
    <TabsList variant="line">{/* triggers w/ meta counts */}</TabsList>
    <TabsContent value="overview">{/* lineup / door / notes */}</TabsContent>
    {/* ... */}
  </Tabs>
</AdminDetailDrawer>

Theming

The showcase styles all reference semantic token names (--text-primary, --surface-card, --accent-primary, --font-marquee, etc.) with safe fallbacks. When wrapped in a theme that defines those tokens — ENTR, Borealis default, custom — the surfaces, type, and accent cascade cleanly. Without a theme, the fallbacks render a neutral light-mode treatment.

Slot map

Block API	Showcase content
`customHeader`	Chrome row — prev/next icon buttons, "2 of 128" counter, spacer, Edit button, more-actions menu button, close X. Replaces the default SheetHeader.
`children` (body slot)	Hero block (badges, eyebrow, title, meta, KPI grid) + `Tabs` with line variant and meta-number badges.
`footerStatus`	Two `Kbd` hint clusters separated by a small gap. Renders inside the sticky footer's middle region.
Footer save/cancel	Block defaults — kept visible to demonstrate that the chrome row coexists with the standard save/cancel actions.

Accessibility

The block keeps the visually-hidden SheetTitle mounted (Radix requirement) when customHeader is used — assistive tech still announces title.
The chrome row's close button calls onOpenChange(false) directly, matching the keyboard Escape and overlay-click paths.
Tabs composes inside the body without focus-trap conflict — the drawer dialog's focus trap and the tabs' internal roving tabindex don't compete.
Each chrome icon button has an aria-label; decorative icons inside use the parent label.