ComposerPanel

render: () => (
  <Measure width="content">
    <Stack gap="relaxed">
      <Stack gap="compact">
        <strong>Default panel</strong>
        <span>
          Draft and actions share one writing surface. Supporting instructions and page facts stay
          below its edge.
        </span>
      </Stack>
      <ComposerPanel
        value="Continue — I'm wondering whether the component set is still too thin, especially for containers."
        placeholder="Continue, type a message…"
        inputLabel="Message"
        hint="Enter for a new line · Use Send to submit"
        hintId="panel-composer-hint"
        submitLabel="Send message"
        submitContent={<Icon name="arrow-up" />}
        trailing={[
          <IconButton label="Auto review">
            <Icon name="shield-check" />
          </IconButton>,
          <Button variant="quiet" size="small">
            DeepSeek-V4.1-Flash <Badge tone="accent">1017</Badge>
          </Button>,
        ]}
        meta={
          <MetaRow
            items={[
              { icon: <Icon name="refresh-cw" />, label: "7 turns 162 steps" },
              { label: "219 tok/s" },
            ]}
            progress={45}
            progressLabel="Cache progress"
            align="center"
          />
        }
      >
        <IconButton label="Add">
          <Icon name="plus" />
        </IconButton>
      </ComposerPanel>
    </Stack>
  </Measure>
)