@domainkit/react 0.9.1 → 0.11.0

package/README.md

@@ -51,6 +51,40 @@ the UI did not make.
 An interactive provider returns the customer to the page they started from. Pass `returnTo` to name
 a different destination, or `null` to leave the server's `defaultReturnTo` in charge.
 
+## The disconnected offer
+
+Discovery names the provider whose nameservers serve the domain. `Connect.Prompt` states it beside a
+trigger, and the dialog behind that trigger is narrowed to that provider, with the rest behind a
+disclosure.
+
+When no registered provider serves the zone there is nothing DomainKit can connect, so the flow
+offers nothing. Pass `connect="always"` to offer the all-providers dialog anyway, or `connect="never"`
+for a domain your application has already settled another way. A domain DomainKit holds keeps its
+status and its disconnect whatever the invitation says.
+
+```tsx
+<Domain.Flow domain="app.example.com" requirements={requirements} connect="always" />
+```
+
+Connecting is the customer saying yes to the records, so the plan opens itself the moment a
+connection lands — after a token connect, and after the customer returns from a provider — and one
+action adds them. `review="manual"` waits for the trigger instead.
+
+`onState` reports what DomainKit has to say about the domain, so your own offers can be ordered
+beside it rather than competing with it:
+
+```tsx
+<Domain.Flow
+  domain="app.example.com"
+  requirements={requirements}
+  onState={({ connected, offering, provider }) => setDomainKitOffers(connected || offering)}
+/>
+```
+
+Letting a provider go is one dialog: `Disconnect` asks whether to remove the records an apply
+receipt proves DomainKit created, removes them when the option stays checked, then releases the
+connection. `Cleanup.Flow` is still exported for a host that wants removal on its own.
+
 ## Own one piece, keep the rest
 
 Every part of the flow is a slot with a default.
@@ -68,10 +102,10 @@ Every part of the flow is a slot with a default.
 
 | Slot           | Receives                                        | Default                                                    |
 | -------------- | ----------------------------------------------- | ---------------------------------------------------------- |
-| `connection`   | `{ controller, domain }`                        | `Connect.Card` once connected, `Connect.Dialog` until then |
+| `connection`   | `{ controller, domain, connect }`               | `Connect.Card` once connected, `Connect.Prompt` until then |
 | `records`      | `{ records, readiness, controller, domain }`    | `Records.Table`                                            |
 | `verification` | `{ controller, domain }`                        | `Verify.Status` with per-requirement evidence              |
-| `actions`      | `{ connection, provisioning, cleanup, domain }` | Review changes, Approve, Decline, Remove records           |
+| `actions`      | `{ connection, provisioning, cleanup, domain }` | Review changes, Approve, Decline                           |
 
 `Domain.Flow` adds no layout container around a slot: its output is a direct child of the flow root,
 so your own grid can place it without `display: contents`.
@@ -121,8 +155,8 @@ one is gone, and re-runs the failed step otherwise.
 ## Presentation
 
 `DomainKit.Root` takes `messages`, `marks`, `icons`, `theme`, `colorScheme`, and `portalContainer`,
-so branding stays in your app. `Messages.Catalog` holds every user-visible string, including one
-sentence per `DomainKit.Error` reason; nothing renders a tag. Provider artwork comes from `marks`,
+so branding stays in your app. `Messages.Catalog` holds every user-visible string, including a
+title and a description per `DomainKit.Error` reason; nothing renders a tag. Provider artwork comes from `marks`,
 with the provider's initial as the fallback and no request at render time. The stylesheet is
 opt-in and every color is a `--domainkit-*` custom property.
 
@@ -148,6 +182,20 @@ still wins. Any layer you declare after it wins the same way:
 }
 ```
 
+A failed step renders as `Outcome`: media, the catalog's title and description, and the retry the
+flow allows, as a card or on one line. Pass your own parts as children and the words still come from
+the catalog.
+
+```tsx
+<Connect.Outcome controller={connection} layout="inline">
+  <Outcome.Media variant="default">
+    <MyIcon />
+  </Outcome.Media>
+  <Outcome.Title />
+  <Outcome.Content />
+</Connect.Outcome>
+```
+
 Every dialog and popover takes a `render` prop that replaces the surface with your own.
 
 ## Next.js