# Capsulang React/A2UI Target

Capsulang can emit React as a UI target for checked A2UI surfaces:

```text
.caps module
  -> parser/checker
  -> protocol plan + A2UI manifest
  -> React components and TypeScript host bindings
```

React is not the authority runtime. Generated components render state, collect user actions, and return typed action objects. The host runtime still owns policy decisions, credentials, MCP/A2A adapters, telemetry, ledger writes, and external effect execution.

## Command

```bash
caps compile --target react examples/30_protocol_native_a2ui.caps \
  --out build/repo-review-react \
  --json
```

The bundle includes:

```text
README.md
index.ts
capsulang-types.ts
host-bindings.ts
useCapsuleMachine.ts
protocol-plan.json
a2ui-manifest.json
mock-envelopes.jsonl
react-target.json
surfaces/<surface>.component.tsx
surfaces/<surface>.types.ts
surfaces/<surface>.ts
```

## Generated Surface Contract

For each `(surface ... (protocol a2ui ...))`, the target emits:

- a React component with `state`, `onAction`, and `disabled` props;
- a TypeScript state interface from `(state ...)`;
- a discriminated action union from `(action ...)`;
- confirmation/auth metadata on each returned action;
- deterministic A2UI create/components/data envelopes for preview tests.

Example host wiring:

```tsx
import { RepoReviewUiSurface } from "./generated/react";

export function ReviewPage({ runtime }) {
  return (
    <RepoReviewUiSurface
      state={runtime.currentSurfaceState}
      onAction={(action) => runtime.dispatchA2UIAction(action)}
    />
  );
}
```

The host decides whether an action becomes a Capsulang event, an approval result, or a denied policy decision.

## Target Boundary

The generated React bundle may:

- render A2UI state;
- submit typed user actions;
- expose machine/event/effect TypeScript contracts;
- ship protocol and A2UI manifests for a host app.

It must not:

- execute `mcp.*`, `a2a.*`, `http.*`, `db.*`, approval, deployment, or repo effects;
- mint credentials or capabilities;
- bypass host policy;
- claim replay or verification by itself.

Use `caps compile-plan FILE.caps --target react` to inspect readiness and diagnostics before using the bundle in an application.