# Composition: Page Layout Patterns

`Page` is imported from `@theorchard/suite-frontend`. All other components are from `@theorchard/suite-components`.

## Standard Detail Page

```tsx
<Page>
  <Page.Header>
    <PageHeader>
      <PageHeader.Breadcrumb>
        <Breadcrumb.Item href="/releases">Releases</Breadcrumb.Item>
        <Breadcrumb.Item active>Album Title</Breadcrumb.Item>
      </PageHeader.Breadcrumb>
      <PageHeader.Primary>
        <CoverArt src={coverUrl} size="lg" />
        <PageHeader.Title>Album Title</PageHeader.Title>
      </PageHeader.Primary>
      <PageHeader.Secondary>
        <Status variant="success" text="Published" />
      </PageHeader.Secondary>
      <PageHeader.Tertiary>
        <Button variant="secondary">Edit</Button>
        <Button variant="primary">Publish</Button>
      </PageHeader.Tertiary>
    </PageHeader>
  </Page.Header>

  <Page.Nav>
    <Tabs defaultActiveKey="details">
      <Tabs.Tab eventKey="details" title="Details" />
      <Tabs.Tab eventKey="tracks" title="Tracks" />
    </Tabs>
  </Page.Nav>

  <Page.Body>
    <Section>
      <Section.Header>
        <Section.Title>Release Details</Section.Title>
      </Section.Header>
      <Section.Body>
        <MetadataList>
          <Metadata label="Label" value="Sony Music" />
          <Metadata label="Release Date" value="2024-03-15" />
        </MetadataList>
      </Section.Body>
    </Section>
  </Page.Body>
</Page>
```

## Standard List Page

```tsx
<Page>
  <Page.Header>
    <PageHeader>
      <PageHeader.Primary>
        <PageHeader.Title>Releases</PageHeader.Title>
      </PageHeader.Primary>
      <PageHeader.Tertiary>
        <Button variant="primary">New Release</Button>
      </PageHeader.Tertiary>
    </PageHeader>
  </Page.Header>

  <Page.Body>
    <Section>
      <Section.Header>
        <Section.Filters>
          <SearchInput value={search} onChange={setSearch} placeholder="Search releases" />
          <Select options={statusOptions} placeholder="Status" onChange={setStatus} />
        </Section.Filters>
      </Section.Header>
      <Section.Body>
        <GridTable
          columns={columns}
          data={releases}
          loading={isLoading}
          emptyState={<InfoMessage title="No releases" description="Create your first release." />}
        />
        <Pagination
          currentPage={page}
          totalPages={totalPages}
          onPageChange={setPage}
        />
      </Section.Body>
    </Section>
  </Page.Body>
</Page>
```

## Form Section

```tsx
<Section>
  <Section.Header>
    <Section.Title>Track Information</Section.Title>
  </Section.Header>
  <Section.Body>
    <Form>
      <Field label="Track Title" required>
        <SearchInput value={title} onChange={setTitle} />
      </Field>
      <Field label="ISRC" helpMessage="12-character International Standard Recording Code">
        <SearchInput value={isrc} onChange={setIsrc} />
      </Field>
      <Field label="Genre">
        <Select options={genres} onChange={setGenre} />
      </Field>
      <Field label="Territories">
        <MarketSelector onChange={setTerritories} />
      </Field>
    </Form>
  </Section.Body>
</Section>
```

## Hierarchy Rules

1. `MainNav` is always at root level — outside `Page`.
2. `Page.Header` > `PageHeader` > `PageHeader.Breadcrumb` at top, then `PageHeader.Primary`, `Secondary`, `Tertiary`.
3. `Page.Nav` holds `Tabs` that switch between `Page.View` or route-based panels.
4. `Page.Body` contains one or more `Section` components.
5. `Section.Header` holds `Section.Title` and optional `Section.Filters`.
6. `Section.Body` holds the main content: `GridTable`, forms, `MetadataList`, etc.
7. `Pagination` renders immediately after `GridTable`, outside `Section.Body` or at the bottom of it.