@domainkit/react 0.1.1 → 0.3.0

package/README.md

@@ -22,15 +22,18 @@ import "@domainkit/react/styles.css";
 ## Install
 
 ```sh
-npm install @domainkit/react domainkit react react-dom
+npm install @domainkit/react domainkit effect@rc @effect/atom-react@rc react react-dom
 ```
 
+React 19 is required.
+
 ## Domain lifecycle
 
-When you do have a host-owned transport, `Domain.Flow` connects the provider, reviews an exact plan, observes DNS, removes receipt-bound records, and disconnects the current domain grant.
+When you do have a host-owned transport layer, `Domain.Flow` connects the provider, reviews an exact plan, observes DNS, removes receipt-bound records, and disconnects the current domain grant.
 
 ```tsx
-import { Domain, DomainKit, type Transport } from "@domainkit/react";
+import { Domain, DomainKit } from "@domainkit/react";
+import { Transport } from "domainkit";
 
 export function DomainSetup() {
   return (
@@ -43,16 +46,39 @@ export function DomainSetup() {
 
 `Provisioning.Flow` accepts `showRecords={false}` when the host already renders the DNS record list with `Records.Table`.
 
+Effect applications can compose lifecycle UI directly from `Connection.useModel`,
+`Provisioning.useModel`, `Verification.useModel`, and `Cleanup.useModel`. Each model exposes
+`state` and `command` atoms; dispatch values with the corresponding exported `Command`
+constructors. The packaged controllers and flows consume those same models rather than maintaining
+second state machines.
+
+`Operations.List` is the shared provisioning and cleanup review recipe. Hosts can instead assemble
+`Operations.Root`, `Item`, `Kind`, `Type`, `Record`, `Name`, `Value`, `Priority`, and `Reason` with
+Base UI render props.
+
 ## Transport ownership
 
-The browser transport is Promise-based. Implement it with authenticated application endpoints. Do not place provider credentials or provider API clients in the browser.
+`DomainKit.Root` receives a `Layer<Transport.Service>`. Controllers run the service through Effect Atom, so request interruption, stale result suppression, and subtree disposal follow the Effect lifecycle. Implement the service with authenticated application endpoints. Do not place provider credentials or provider API clients in the browser.
+
+Foreign Promise clients can be adapted once at the boundary:
+
+```ts
+import { Transport } from "domainkit";
+
+export const transport = Transport.layerFromAsync({
+  connection: api.connections,
+  provisioning: api.provisioning,
+  verification: api.verification,
+  cleanup: api.cleanup,
+});
+```
 
 - `connection` detects providers, starts OAuth or token authorization, reuses an existing account, and removes one domain grant while preserving DNS.
 - `provisioning` asks the server for an exact plan and applies only the returned digest.
 - `verification.observe(config)` is the single observation operation. `sources` selects provider evidence, public DNS, or both.
 - `cleanup` creates a fresh receipt-bound deletion plan and applies only its reviewed digest. The server fails closed when records drift or ownership cannot be proven.
 
-All outcomes are discriminated with `_tag`.
+Successful outcomes use schema-backed tagged models. Failures travel through the Effect error channel.
 
 ## Composition and theming
 
@@ -68,6 +94,26 @@ Every semantic component accepts Base UI's `render` prop.
 
 `DomainKit.Root` sets theme tokens, messages, provider marks, icons, color scheme, and a portal container. The stylesheet is opt-in and uses `--domainkit-*` CSS custom properties. Record parts pick those tokens up when they sit inside Root; they still function without it.
 
+`Connection.Flow` is a recipe over the same parts a host can assemble. `Connection.Root` fills the host column and stretches children. `Connection.Trigger` is a dialog opener: its required `children` supply the label, `render` replaces the button, and it does not inject a provider mark. `Connection.ConnectTrigger` accepts a provider and is the packaged button with a mark and default chrome.
+
+```tsx
+<Connection.Root status={state._tag}>
+  <HostCard>
+    <Provider.Mark provider={snapshot.provider} />
+    <div>
+      <strong>{snapshot.provider.name}</strong>
+      <p>Manages DNS for this domain.</p>
+    </div>
+    <BaseDialog.Root>
+      <Connection.Trigger render={<HostButton />}>
+        Connect {snapshot.provider.name}
+      </Connection.Trigger>
+      <Connection.Dialog controller={controller} snapshot={snapshot} />
+    </BaseDialog.Root>
+  </HostCard>
+</Connection.Root>
+```
+
 Pass host icons so the package never owns an icon library. `Records.CopyValue` and `Records.ZoneFile` also accept `copyIcon` / `copiedIcon` / `downloadIcon` when you are not wrapping in Root.
 
 ```tsx