Content-source union

A ready render must carry a body — the TypeScript signature enforces it: sections (declarative tabs) or children (no-nav body, or the companion of a navigation override). Non-ready states are exempt: they are full-page swaps.

// TS-enforced (DetailPageContentSource):
{ state?: "ready" } & ({ sections: DetailPageSection[] } | { children: ReactNode })
| { state: "loading" | "error" | "notFound" }   // full swap, no body required

Usage

import { DetailPageLayout } from '@epasslive/design-system'

// Canonical (portal ticket detail): declarative sections, uncontrolled tabs
<DetailPageLayout
  breadcrumbs={{ items: [{ id: 'tickets', label: 'All tickets', href: '/tickets' }, { id: 'current', label: ticket.eventTitle }] }}
  eyebrow={<Caption as="p">Ticket {ticket.id}</Caption>}
  title={ticket.eventTitle}
  status={{ variant: 'info', label: ticket.status }}
  meta={<Body size="lg">{ticket.date.formatted} · {ticket.venue.name}</Body>}
  sections={[
    { key: 'overview', label: 'Overview', panel: <OverviewPanel /> },
    { key: 'transfer', label: 'Transfer', panel: <TransferPanel /> },
    { key: 'history', label: 'History', panel: <HistoryPanel /> },
  ]}
  footer={<TextLink href="/tickets" variant="muted">Back to all tickets</TextLink>}
/>

// Dashboard (Stepper nav + controlled ?step= sync stays caller-side)
<DetailPageLayout
  title={event.name}
  meta={<BackLinkAndStatusSubline />}
  actions={<SmButtonCluster />}
  navigation={<EventEditorNav active={activeTab} onChange={selectTab} />}
  overlays={<><ConfirmModal … /></>}
>
  <SettingsPanel … />
</DetailPageLayout>

// Not-found branch (full swap; fallback owns its own semantics)
<DetailPageLayout state="notFound" width="sm" title="Ticket"
  notFoundFallback={<EmptyState title="Ticket not found" action={<TextLink href="/tickets">Back to all tickets</TextLink>} />}
/>

i18n

The organism owns zero keys. English-literal defaults exist for the three state branches (Loading…, Something went wrong, Not found) and the declarative tablist aria-label (Sections) — each overridable by a whole-node prop or the navigation override. Consumers own every label they pass (storefront → next-intl; portal → hardcoded EN).

Migration

EventDetail and EventDetailLayout are deprecated in favour of this organism (see their docs pages). Adopted in W3: client-portal/src/app/tickets/[id]/page.tsx and storefront/src/components/dashboard/EventDetail.tsx.

Props

Full prop reference (all 27 props, including the content-source union semantics) lives in DetailPageLayout.mdx.