레이아웃

import { Container, Grid, GridItem, Card } from '@surflane/ui'

<Container width='workspace'>
  <Grid columns='layout'>
    <GridItem span={8} mediumSpan={4} smallSpan={4}>
      Main
    </GridItem>
    <GridItem span={4} mediumSpan={2} smallSpan={4}>
      Details
    </GridItem>
    <GridItem span={12} mediumSpan={6} smallSpan={4}>
      Results
    </GridItem>
  </Grid>
</Container>

// Equal cards: 3 columns, then 2, then 1.
// Match bleed to the card padding so card text aligns with the text around it.
<Grid columns={3} gap={4} bleed={4}>
  {items.map((item) => (
    <Card.Root key={item.id} padding={4}>
      ...
    </Card.Root>
  ))}
</Grid>

// As many columns as the grid's own width holds, each at least 20rem.
<Grid columns='auto' min='card'>
  {items.map((item) => (
    <Card.Root key={item.id}>...</Card.Root>
  ))}
</Grid>

<Stack gap={4}>
  <Stack gap={1}>{/* Title and description; margin: 0 */}</Stack>
  <Field.Root>{/* Field.Label + Input; gap: var(--surf-space-2) */}</Field.Root>
  <Inline gap={2}>{/* Action buttons */}</Inline>
</Stack>

import { SizeProvider, Button, Input, Select } from '@surflane/ui'

<SizeProvider size='small'>
  <Input aria-label='Project name' />
  <Select aria-label='Environment' options={environments} />
  <Button>Apply</Button>
  <Button size='large'>Start deployment</Button>
</SizeProvider>

// The short sm / md / lg spellings still work, but are deprecated.
// A numeric size on Input is the standard HTML character-width hint.

import {
  Avatar,
  Card,
  Grid,
  Inline,
  Meter,
  Sheet,
  SizeProvider,
  Stack,
  Stat,
  StatusBadge,
  Text,
  categoryFor,
} from '@surflane/ui'

<SizeProvider density='compact'>
  <Grid columns='auto' min='card'>
    {sessions.map((session) => (
      <Sheet.Root key={session.id}>
        <Card.Root>
          <Card.Header>
            <Inline justify='between' wrap={false}>
              <Inline gap={3} wrap={false}>
                <Avatar.Root
                  category={categoryFor(session.name)}
                  aria-hidden='true'
                >
                  <Avatar.Fallback>{session.initials}</Avatar.Fallback>
                  {session.working && <Avatar.Status tone='progress' live />}
                </Avatar.Root>
                <Stack gap={0}>
                  <Card.Title lines={1}>
                    <Sheet.Trigger render={<Card.Action />}>
                      {session.name}
                    </Sheet.Trigger>
                  </Card.Title>
                  <Text variant='caption' color='secondary' lines={1}>
                    {session.agent}
                  </Text>
                </Stack>
              </Inline>
              <StatusBadge tone={session.tone}>{session.state}</StatusBadge>
            </Inline>
          </Card.Header>
          <Card.Body>
            <Text lines={2}>{session.lastMessage}</Text>
          </Card.Body>
          <Card.Footer>
            <Meter.Root value={session.context} low={60} high={85} optimum={0}>
              <Meter.Label>Context</Meter.Label>
              <Meter.Value />
              <Meter.Track>
                <Meter.Indicator />
              </Meter.Track>
            </Meter.Root>
            <Stat.Group label='Session counts' labelHidden size='small'>
              <Stat.Root>
                <Stat.Label>Turns</Stat.Label>
                <Stat.Value>{session.turns}</Stat.Value>
              </Stat.Root>
              {/* Tools, Tokens, Time: a value not yet known shows a dash. */}
            </Stat.Group>
          </Card.Footer>
        </Card.Root>
        <Sheet.Content>
          {/* The whole session: counts, context, turns. */}
        </Sheet.Content>
      </Sheet.Root>
    ))}
  </Grid>
</SizeProvider>