ListGroup

render: () => (
  <SchemePair>
    {(scheme) => (
      <Stack gap="relaxed">
        <Inline gap="normal">
          <Status state="processing" label="In progress" />
          <Status state="returned" label="Run returned" />
          <Status state="warning" label="Waiting for answer" />
          <Status state="danger" label="Connection failed" />
          <Status state="unknown" label="Status unconfirmed" />
        </Inline>
        <ListGroup>
          <ListRow
            title="Model source"
            description="Choose an executable model connection"
            status={<Status state="success" label="In use" />}
            actions={
              <Button size="small" variant="quiet">
                Configure
              </Button>
            }
          />
          <ListRow
            title="Local service"
            status={<Status state="unknown" label="No version yet" />}
          />
        </ListGroup>
        <ResourceCard
          title="Message extensions"
          subtitle="Channel"
          status={<Status state="success" label="Enabled" />}
          actions={<Button size="small">View settings</Button>}
        />
        <Status
          state="danger"
          label="Connection failed for development-workspace-with-a-long-identifier; retry after checking its configuration."
        />
        <Field label="Connection name" htmlFor={`status-connection-${scheme}`}>
          <Input id={`status-connection-${scheme}`} value="Development workspace" />
        </Field>
      </Stack>
    )}
  </SchemePair>
)

render: () => (
  <Container width="page">
    <Page
      eyebrow="Guide · Composition"
      title="Build a page from regions"
      description="Page arranges the page identity, optional tools and the content rhythm; Section names one part of that content and keeps its heading level."
      actions={[
        <Button variant="outline">Copy page link</Button>,
        <Button variant="quiet">Edit this page</Button>,
      ]}
      toolbar={
        <Toolbar label="Page tools">
          <Button variant="quiet" size="small">
            <Icon name="list-checks" />
            Filters
          </Button>
          <Button variant="quiet" size="small">
            <Icon name="list" />
            Outline
          </Button>
        </Toolbar>
      }
      notice={
        <Alert
          layout="bar"
          tone="info"
          actions={
            <Button variant="quiet" size="small">
              View source
            </Button>
          }
        >
          This guide is generated from the authoring templates; only the local controls run here.
        </Alert>
      }
    >
      <Section title="Overview" description="What the two compositions own.">
        <p>
          The page owns the identity block and the spacing between its sections; each section owns
          one titled region. Both arrangements compose primitives that already exist, so the page
          keeps one visual language instead of starting another one.
        </p>
      </Section>

      <Section
        title="Compose the identity"
        description="Eyebrow, title, description and actions form one block."
        actions={
          <Button variant="quiet" size="small">
            Open example
          </Button>
        }
      >
        <p>
          PageHeader renders the h1 and its supporting copy. The eyebrow names the area the page
          belongs to, and the actions act on the page rather than on one section.
        </p>
        <ListGroup>
          <ListRow
            title="Eyebrow"
            description="A small label for the area the page belongs to."
            status="Optional"
          />
          <ListRow
            title="Actions"
            description="Controls that act on the whole page, aligned with the title."
          />
          <ListRow
            title="Notice"
            description="A status row between the identity and the content."
            status={[<Badge tone="accent">Current</Badge>]}
          />
        </ListGroup>
      </Section>

      <Section
        title="Keep one section rhythm"
        description="Sections stack at the page's spacing step."
        actions={
          <Button variant="quiet" size="small">
            Reset
          </Button>
        }
        footer="A nested section steps down one heading level."
        variant="card"
      >
        <p>
          The card variant wraps the same section in the existing Card surface, so a card section
          and a plain section stay one visual language.
        </p>
        <Section title="Nested section">
          <p>
            A section inside a page renders h2; a section nested in another section renders h3.
            The heading level comes from the surrounding region rather than from the caller.
          </p>
        </Section>
      </Section>

      <Section title="Escapes stay available" description="Custom chrome replaces identity only.">
        <p>
          A host that already renders its own header passes the header slot: the toolbar, notice
          and content stay, and the identity block is replaced rather than duplicated. Genuinely
          custom regions can still drop to PageFrame, Card or a layout primitive.
        </p>
      </Section>
    </Page>
  </Container>
)