SIGN IN SIGN UP

feat(react): let hosts compose the connection row (#43)

## Summary

Hosts can keep DomainKit's connection state and consent dialog while
composing the visible provider row from their own layout and controls.
`Connection.Flow` remains the packaged recipe.

## Usage

```tsx
<Connection.Root status={state._tag}>
  <HostCard>
    <Provider.Mark provider={snapshot.provider} />
    <p>Manages DNS for this domain.</p>
    <BaseDialog.Root>
      <Connection.Trigger render={<HostButton />}>
        Connect {snapshot.provider.name}
      </Connection.Trigger>
      <Connection.Dialog controller={controller} snapshot={snapshot} />
    </BaseDialog.Root>
  </HostCard>
</Connection.Root>
```

| Part | Packaged recipe | Host composition |
| --- | --- | --- |
| Root | Full-width, stretched children | Same neutral container
contract |
| Trigger | `ConnectTrigger` supplies provider mark and accent chrome |
`Trigger` requires host content and accepts a host button through
`render` |
| Status | Contextual provider copy | `children` supply host copy |

## Breaking change

`Connection.Trigger` no longer accepts `provider` and now requires
`children`. Provider-aware copy and marks belong to
`Connection.ConnectTrigger`.

## Screenshots

Packaged `Connection.Flow` recipe:


![connection-recipe.png](https://scratchpad.arya.sh/f/01a05306-1a34-7128-aef5-d04e505b10f6/connection-recipe.png)

Host-composed rows in full-width and 20rem columns:


![host-connection.png](https://scratchpad.arya.sh/f/01a05306-1d2e-77d1-9111-587250fb5b30/host-connection.png)

## Validation

- `bun run --filter @domainkit/react typecheck`
- `bun run --filter @domainkit/react test` — 43 tests
- `bun run lint`
- `bun run format:check`
- `bun run --filter @domainkit/react test:browser` — 7 Playwright tests
S
Saatvik Arya committed
e8fea4d0b800e3642155b9673ddf323332257043
Parent: 41145c7
Committed by GitHub <noreply@github.com> on 8/30/2026, 4:29:30 PM