@domainkit/react 0.9.1 → 0.11.0

package/dist/index.mjs

@@ -2,7 +2,7 @@
 import { t as __exportAll } from "./rolldown-runtime-D7D4PA-g.mjs";
 import { DnsRecord, DomainKit, Reason, Receipt } from "domainkit";
 import * as Effect from "effect/Effect";
-import { createContext, useCallback, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
+import { createContext, useCallback, useContext, useEffect, useId, useLayoutEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
 import * as Data from "effect/Data";
 import { Transport } from "domainkit/client";
 import { useRender } from "@base-ui/react/use-render";
@@ -10,6 +10,9 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import * as Exit from "effect/Exit";
 import * as Option from "effect/Option";
 import { Dialog } from "@base-ui/react/dialog";
+import { Collapsible } from "@base-ui/react/collapsible";
+import { Switch } from "@base-ui/react/switch";
+import { Menu } from "@base-ui/react/menu";
 import { Popover } from "@base-ui/react/popover";
 import * as DateTime from "effect/DateTime";
 import { Testing } from "domainkit/testing";
@@ -47,6 +50,7 @@ function Glyph({ children }) {
 	});
 }
 const defaultIcons = {
+	chevron: /* @__PURE__ */ jsx(Glyph, { children: /* @__PURE__ */ jsx("path", { d: "m6 9 6 6 6-6" }) }),
 	close: /* @__PURE__ */ jsxs(Glyph, { children: [/* @__PURE__ */ jsx("path", { d: "M18 6 6 18" }), /* @__PURE__ */ jsx("path", { d: "m6 6 12 12" })] }),
 	copied: /* @__PURE__ */ jsx(Glyph, { children: /* @__PURE__ */ jsx("path", { d: "M20 6 9 17l-5-5" }) }),
 	copy: /* @__PURE__ */ jsxs(Glyph, { children: [/* @__PURE__ */ jsx("rect", {
@@ -84,7 +88,12 @@ const defaultIcons = {
 		cx: "12",
 		cy: "12",
 		r: "9"
-	}), /* @__PURE__ */ jsx("path", { d: "m8.5 12.5 2.5 2.5 4.5-5" })] })
+	}), /* @__PURE__ */ jsx("path", { d: "m8.5 12.5 2.5 2.5 4.5-5" })] }),
+	warning: /* @__PURE__ */ jsxs(Glyph, { children: [
+		/* @__PURE__ */ jsx("path", { d: "M10.3 3.9 2.4 17.5a2 2 0 0 0 1.7 3h15.8a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0Z" }),
+		/* @__PURE__ */ jsx("path", { d: "M12 9v4" }),
+		/* @__PURE__ */ jsx("path", { d: "M12 17h.01" })
+	] })
 };
 const IconsContext = createContext(defaultIcons);
 function IconsProvider({ children, icons }) {
@@ -105,7 +114,8 @@ function useIcons() {
 var messages_exports = /* @__PURE__ */ __exportAll({
 	english: () => english,
 	failure: () => failure,
-	merge: () => merge
+	merge: () => merge,
+	outcome: () => outcome
 });
 const entity = {
 	approval: "approval",
@@ -135,6 +145,10 @@ const recordTypes = {
 	SRV: "SRV",
 	TXT: "TXT"
 };
+/** The provider the customer acted on, or a neutral stand-in when the flow does not know it. */
+const named = (provider) => provider ?? "The provider";
+/** The domain the failure is about, or a neutral stand-in. */
+const where = (domain) => domain ?? "this domain";
 /** `accountId` reads as "Account id" until a host names the field itself. */
 const humanize = (name) => {
 	const spaced = name.replaceAll(/([a-z0-9])([A-Z])/g, "$1 $2").replaceAll(/[_-]+/g, " ").trim();
@@ -142,19 +156,32 @@ const humanize = (name) => {
 };
 const english = {
 	connect: "Connect",
-	connectWith: (method) => method,
+	methodToken: "Connect with an API token",
+	methodOAuth: (provider) => `Continue with ${provider}`,
+	methodIntegration: (provider) => `Install the ${provider} integration`,
 	disconnect: "Disconnect",
 	detach: "Detach domain",
 	cancel: "Cancel",
 	close: "Close",
 	retry: "Try again",
 	approve: "Approve",
+	addRecords: (count) => count === 1 ? "Add 1 record" : `Add ${count} records`,
 	decline: "Decline",
+	everyRecordConflicts: "Resolve the records above at your provider, then review again.",
 	reviewChanges: "Review changes",
 	cleanUp: "Remove records",
 	checkDns: "Check DNS",
 	checkAgain: "Check again",
 	moreActions: "More actions",
+	moreOptions: "Add an account id",
+	useAnotherProvider: "Use a different provider",
+	useTokenInstead: "Use an API token instead",
+	back: "Back",
+	connected: "Connected",
+	needsReconnect: "Needs reconnecting",
+	disconnectScope: "This connection serves other domains.",
+	disconnectThisDomain: "Only this domain",
+	disconnectEveryDomain: (count) => `All ${count} domains`,
 	copy: "Copy",
 	copied: "Copied",
 	copyZone: "Copy zone file",
@@ -175,13 +202,16 @@ const english = {
 	cleaning: "Removing records…",
 	observing: "Checking DNS…",
 	connectTitle: (provider) => `Connect ${provider}`,
-	connectAnyTitle: "Connect your DNS provider",
+	connectAnyTitle: "Connect a DNS provider",
+	hostOwnsZone: "Owns DNS for this domain.",
 	connectDescription: (domain) => `Authorize DNS changes for ${domain}.`,
 	connectedTo: (provider) => `${provider} connected`,
 	notConnected: "No DNS provider is connected.",
 	reconnectRequired: (provider) => `${provider} needs to be reconnected`,
 	disconnectTitle: (provider) => `Disconnect ${provider}?`,
-	disconnectConsent: "The provider connection is removed. Existing DNS records are preserved.",
+	disconnectConsent: (domain, provider) => `DomainKit stops managing DNS for ${domain} through ${provider}.`,
+	disconnectWithCleanup: (count) => count === 1 ? "Remove the 1 record DomainKit added" : `Remove the ${count} records DomainKit added`,
+	disconnectKeepsRecords: (provider) => `Records stay in ${provider}.`,
 	detachConsent: "This domain is detached from the provider. Existing DNS records are preserved.",
 	detached: "Domain detached. DNS records were preserved.",
 	reusableConnections: "Connections you already have",
@@ -240,9 +270,11 @@ const english = {
 	recordType: (record) => record._tag === "Opaque" ? record.type : recordTypes[record._tag],
 	applied: (receipt) => receipt.status === "complete" ? "DNS records added." : "Some DNS records were not added.",
 	cleaned: (receipt) => receipt.status === "complete" ? "DNS records removed." : "Some DNS records were not removed.",
-	partiallyApplied: "Some DNS changes failed. Review and retry safely.",
-	partiallyCleaned: "Some DNS records could not be deleted. Review and retry safely.",
-	outcome: (outcome) => {
+	partiallyAppliedTitle: "Some DNS changes did not land",
+	partiallyApplied: "Review what applied, then retry. Retrying is safe.",
+	partiallyCleanedTitle: "Some DNS records are still there",
+	partiallyCleaned: "Review what is left, then retry. Retrying is safe.",
+	receiptOutcome: (outcome) => {
 		switch (outcome._tag) {
 			case "Applied": return "Done";
 			case "Skipped": return "Skipped";
@@ -292,49 +324,99 @@ const english = {
 	nextCheckAt: (at) => `Next check ${at}`,
 	hostEvidence: "Other checks",
 	noEvidence: "Nothing has been checked yet.",
-	invalidInput: (reason) => reason.field === void 0 ? reason.message : `${humanize(reason.field)}: ${reason.message}`,
-	unauthenticated: () => "The provider rejected these credentials.",
-	forbidden: () => "You do not have access to this domain.",
-	notFound: (reason) => `That ${entity[reason.entity]} no longer exists.`,
-	conflict: (reason) => reason.operations.length === 1 ? "One DNS record conflicts with what is already in the zone." : `${reason.operations.length} DNS records conflict with what is already in the zone.`,
-	stale: () => "The zone changed while you were reviewing. Build a new plan.",
-	expired: (reason) => `That ${expiredEntity[reason.entity]} expired. Start again.`,
-	busy: () => "Another change is running. Try again in a moment.",
-	providerRejected: (reason) => `${reason.provider} refused the change: ${reason.message}`,
-	providerUnavailable: (reason) => `${reason.provider} is unreachable right now.`,
-	providerConflict: (reason) => `${reason.provider} already holds a conflicting record.`,
-	unsupported: (reason) => `${reason.provider} cannot ${reason.operation}.`,
-	reconnect: (reason) => `Reconnect ${reason.provider} to continue.`,
-	storageFailed: () => "The change could not be saved. Try again.",
-	cryptoFailed: () => "A stored credential could not be read.",
-	resolverFailed: (reason) => `DNS lookups through ${reason.resolver} failed.`
+	invalidInput: (reason) => ({
+		description: reason.message,
+		title: reason.field === void 0 ? "Check what you entered" : `Check the ${humanize(reason.field).toLowerCase()}`
+	}),
+	unauthenticated: () => ({ title: "Token not accepted" }),
+	forbidden: (_reason, context) => ({
+		description: `The connection needs permission to edit DNS for ${where(context.domain)}.`,
+		title: "This connection can't change DNS here"
+	}),
+	notFound: (reason) => ({
+		description: "Reload the page and start this step again.",
+		title: `That ${entity[reason.entity]} no longer exists`
+	}),
+	conflict: (reason) => ({
+		description: "Review what the zone already holds, then build a new plan.",
+		title: reason.operations.length === 1 ? "A record is in the way" : `${reason.operations.length} records are in the way`
+	}),
+	stale: () => ({
+		description: "Review the new plan before you apply it.",
+		title: "The zone changed since you reviewed"
+	}),
+	expired: (reason) => ({
+		description: "Start this step again.",
+		title: `That ${expiredEntity[reason.entity]} expired`
+	}),
+	busy: () => ({
+		description: "Wait for it to finish, then try again.",
+		title: "Another change is running"
+	}),
+	providerRejected: (reason, context) => ({
+		description: reason.message,
+		title: `${named(context.provider ?? reason.provider)} refused the change`
+	}),
+	providerUnavailable: (reason, context) => ({
+		description: "Nothing changed. Try again in a minute.",
+		title: `${named(context.provider ?? reason.provider)} isn't responding`
+	}),
+	providerConflict: (reason, context) => ({
+		description: "Remove or rename that record at the provider, then try again.",
+		title: `${named(context.provider ?? reason.provider)} already holds a conflicting record`
+	}),
+	unsupported: (reason, context) => ({
+		description: "Nothing changed. This step needs a provider that can do it.",
+		title: `${named(context.provider ?? reason.provider)} cannot ${reason.operation}`
+	}),
+	reconnect: (reason, context) => ({
+		description: "The stored credential no longer works. Connect again to continue.",
+		title: `Reconnect ${named(context.provider ?? reason.provider)}`
+	}),
+	storageFailed: () => ({
+		description: "Nothing changed. Try again.",
+		title: "The change could not be saved"
+	}),
+	cryptoFailed: () => ({
+		description: "Connect the provider again to replace it.",
+		title: "A stored credential could not be read"
+	}),
+	resolverFailed: (reason) => ({
+		description: "The lookup failed, which says nothing about your DNS. Try again in a moment.",
+		title: `DNS lookups through ${reason.resolver} failed`
+	})
 };
 const merge = (overrides = {}) => ({
 	...english,
 	...overrides
 });
-/** The user-facing sentence for a failure, chosen by the error's reason. */
-const failure = (error, catalog) => {
+/** The title and description for a failure, chosen by the error's reason. */
+const outcome = (error, catalog, context = {}) => {
 	const reason = error.reason;
 	switch (reason._tag) {
-		case "InvalidInput": return catalog.invalidInput(reason);
-		case "Unauthenticated": return catalog.unauthenticated(reason);
-		case "Forbidden": return catalog.forbidden(reason);
-		case "NotFound": return catalog.notFound(reason);
-		case "Conflict": return catalog.conflict(reason);
-		case "Stale": return catalog.stale(reason);
-		case "Expired": return catalog.expired(reason);
-		case "Busy": return catalog.busy(reason);
-		case "ProviderRejected": return catalog.providerRejected(reason);
-		case "ProviderUnavailable": return catalog.providerUnavailable(reason);
-		case "ProviderConflict": return catalog.providerConflict(reason);
-		case "Unsupported": return catalog.unsupported(reason);
-		case "Reconnect": return catalog.reconnect(reason);
-		case "StorageFailed": return catalog.storageFailed(reason);
-		case "CryptoFailed": return catalog.cryptoFailed(reason);
-		case "ResolverFailed": return catalog.resolverFailed(reason);
+		case "InvalidInput": return catalog.invalidInput(reason, context);
+		case "Unauthenticated": return catalog.unauthenticated(reason, context);
+		case "Forbidden": return catalog.forbidden(reason, context);
+		case "NotFound": return catalog.notFound(reason, context);
+		case "Conflict": return catalog.conflict(reason, context);
+		case "Stale": return catalog.stale(reason, context);
+		case "Expired": return catalog.expired(reason, context);
+		case "Busy": return catalog.busy(reason, context);
+		case "ProviderRejected": return catalog.providerRejected(reason, context);
+		case "ProviderUnavailable": return catalog.providerUnavailable(reason, context);
+		case "ProviderConflict": return catalog.providerConflict(reason, context);
+		case "Unsupported": return catalog.unsupported(reason, context);
+		case "Reconnect": return catalog.reconnect(reason, context);
+		case "StorageFailed": return catalog.storageFailed(reason, context);
+		case "CryptoFailed": return catalog.cryptoFailed(reason, context);
+		case "ResolverFailed": return catalog.resolverFailed(reason, context);
 	}
 };
+/** The same failure as one sentence, for a host that renders text rather than a card. */
+const failure = (error, catalog, context = {}) => {
+	const { description, title } = outcome(error, catalog, context);
+	return description === void 0 ? `${title}.` : `${title}. ${description}`;
+};
 //#endregion
 //#region src/theme.ts
 var theme_exports = /* @__PURE__ */ __exportAll({ toStyle: () => toStyle });
@@ -352,7 +434,8 @@ const variables = {
 	radius: "--domainkit-radius",
 	shadow: "--domainkit-shadow",
 	success: "--domainkit-success",
-	text: "--domainkit-text"
+	text: "--domainkit-text",
+	warning: "--domainkit-warning"
 };
 function toStyle(theme = {}) {
 	return Object.fromEntries(Object.entries(theme).flatMap(([key, value]) => value === void 0 ? [] : [[variables[key], value]]));
@@ -361,13 +444,13 @@ function toStyle(theme = {}) {
 //#region src/domain-kit.tsx
 var domain_kit_exports = /* @__PURE__ */ __exportAll({
 	ReadOnly: () => ReadOnly,
-	Root: () => Root$6,
+	Root: () => Root$7,
 	useCapabilities: () => useCapabilities,
 	useDomainKit: () => useDomainKit,
 	useReadOnly: () => useReadOnly,
 	useTransport: () => useTransport
 });
-const Context = createContext(null);
+const Context$1 = createContext(null);
 const navigateInBrowser = (url) => {
 	if (typeof window === "undefined") throw new Error("DomainKit provider authorization requires a browser or a `navigate` prop");
 	window.location.assign(url);
@@ -417,7 +500,7 @@ const usePortalContainer = (container) => {
 	const getSnapshot = useCallback(() => resolvePortalContainer(container, ownerDocument), [container, ownerDocument]);
 	return useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
 };
-function Root$6({ children, colorScheme = "inherit", icons, marks = {}, messages, navigate = navigateInBrowser, onEvent, portalContainer = null, readOnly = false, revision = 0, theme, transport, ...props }) {
+function Root$7({ children, colorScheme = "inherit", icons, marks = {}, messages, navigate = navigateInBrowser, onEvent, portalContainer = null, readOnly = false, revision = 0, theme, transport, ...props }) {
 	const { capabilities, transport: stable } = useStableTransport(transport);
 	const onEventRef = useRef(onEvent);
 	useLayoutEffect(() => {
@@ -450,7 +533,7 @@ function Root$6({ children, colorScheme = "inherit", icons, marks = {}, messages
 		"data-domainkit-root": "",
 		style: themeStyle
 	});
-	return /* @__PURE__ */ jsx(Context.Provider, {
+	return /* @__PURE__ */ jsx(Context$1.Provider, {
 		value,
 		children: /* @__PURE__ */ jsx(IconsProvider, {
 			...icons === void 0 ? {} : { icons },
@@ -459,7 +542,7 @@ function Root$6({ children, colorScheme = "inherit", icons, marks = {}, messages
 	});
 }
 function useDomainKit() {
-	const value = useContext(Context);
+	const value = useContext(Context$1);
 	if (value === null) throw new Error("DomainKit components must be rendered inside DomainKit.Root");
 	return value;
 }
@@ -760,6 +843,156 @@ function useAttempt(options) {
 	};
 }
 //#endregion
+//#region src/outcome.tsx
+/**
+* What a flow says when a step ends badly: media, title, description, and the action that follows.
+* Every flow's `Outcome` binds its controller to these parts, so a failure reads the same way in
+* the connect dialog, the review dialog, and the verification popover.
+*
+*   <Connect.Outcome controller={connection} />            the default composition
+*
+*   <Connect.Outcome controller={connection}>              a composition of your own
+*     <Outcome.Header>
+*       <Outcome.Media><MyIcon /></Outcome.Media>
+*       <Outcome.Title />
+*       <Outcome.Description />
+*     </Outcome.Header>
+*     <Outcome.Content />
+*   </Connect.Outcome>
+*/
+var outcome_exports = /* @__PURE__ */ __exportAll({
+	Composition: () => Composition,
+	Content: () => Content,
+	Description: () => Description,
+	Header: () => Header$1,
+	Media: () => Media,
+	Provider: () => Provider,
+	Root: () => Root$6,
+	Title: () => Title,
+	useOutcome: () => useOutcome
+});
+const fallback = {
+	description: "",
+	layout: "card",
+	retry: null,
+	retryPart: "flow-retry",
+	title: "",
+	tone: "danger"
+};
+const Context = createContext(null);
+/** What the surrounding flow resolved, for a part of your own inside `X.Outcome`. */
+function useOutcome() {
+	return useContext(Context) ?? fallback;
+}
+/** Binds a resolved outcome to the parts below it. Flows render this; hosts rarely do. */
+function Provider({ children, value }) {
+	return /* @__PURE__ */ jsx(Context.Provider, {
+		value,
+		children
+	});
+}
+/**
+* The outcome itself. It announces, so a customer reading with assistive tech hears it. A `tone`
+* or `layout` of its own reaches every part below it, so the glyph and the words agree with the
+* root's own attributes.
+*/
+function Root$6({ layout, tone, ...props }) {
+	const value = useOutcome();
+	const resolved = {
+		...value,
+		layout: layout ?? value.layout,
+		tone: tone ?? value.tone
+	};
+	const element = usePart("div", props, {
+		layout: resolved.layout,
+		tone: resolved.tone
+	}, {
+		"data-domainkit-part": "outcome",
+		"data-layout": resolved.layout,
+		"data-tone": resolved.tone,
+		role: "alert"
+	});
+	return /* @__PURE__ */ jsx(Provider, {
+		value: resolved,
+		children: element
+	});
+}
+/** Media, title, and description together, so the action below them can move on its own. */
+function Header$1(props) {
+	const { layout, tone } = useOutcome();
+	return usePart("div", props, {
+		layout,
+		tone
+	}, { "data-domainkit-part": "outcome-header" });
+}
+/** The glyph for the tone. Children replace it; `icons` on `DomainKit.Root` replaces the set. */
+function Media({ variant = "icon", ...props }) {
+	const { layout, tone } = useOutcome();
+	const icons = useIcons();
+	const glyph = tone === "success" ? icons.success : tone === "warning" ? icons.warning : icons.failure;
+	return usePart("div", props, {
+		layout,
+		tone
+	}, {
+		"aria-hidden": "true",
+		children: glyph,
+		"data-domainkit-part": "outcome-media",
+		"data-variant": variant
+	});
+}
+/** The heading from the catalog. Children win, for a host that words it itself. */
+function Title(props) {
+	const { layout, title, tone } = useOutcome();
+	return usePart("div", props, {
+		layout,
+		tone
+	}, {
+		children: title,
+		"data-domainkit-part": "outcome-title"
+	});
+}
+/** What to do about it, from the catalog. An outcome whose title says everything renders none. */
+function Description(props) {
+	const { description, layout, tone } = useOutcome();
+	const element = usePart("p", props, {
+		layout,
+		tone
+	}, {
+		children: description,
+		"data-domainkit-part": "outcome-description"
+	});
+	return description === "" && props.children === void 0 ? null : element;
+}
+/**
+* The actions under the header. Without children it is the flow's retry, and a flow that allows
+* none renders nothing: read-only hides every control that would start a write again.
+*/
+function Content(props) {
+	const { messages } = useDomainKit();
+	const { layout, retry, retryPart, tone } = useOutcome();
+	const element = usePart("div", props, {
+		layout,
+		tone
+	}, {
+		children: retry === null ? null : /* @__PURE__ */ jsx("button", {
+			"data-domainkit-part": retryPart,
+			onClick: retry,
+			type: "button",
+			children: messages.retry
+		}),
+		"data-domainkit-part": "outcome-content"
+	});
+	return retry === null && props.children === void 0 ? null : element;
+}
+/** Media, title, and description in a header, then the action. What `X.Outcome` renders alone. */
+function Composition() {
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs(Header$1, { children: [
+		/* @__PURE__ */ jsx(Media, {}),
+		/* @__PURE__ */ jsx(Title, {}),
+		/* @__PURE__ */ jsx(Description, {})
+	] }), /* @__PURE__ */ jsx(Content, {})] });
+}
+//#endregion
 //#region src/records.tsx
 var records_exports = /* @__PURE__ */ __exportAll({
 	Body: () => Body$1,
@@ -1087,12 +1320,12 @@ function Status$4({ controller, kind, ...props }) {
 		switch (state._tag) {
 			case "Idle": return "";
 			case "Planning": return kind === "provisioning" ? messages.planning : messages.planningCleanup;
-			case "Planned": return kind === "provisioning" ? messages.planConsent : messages.cleanupConsent;
+			case "Planned": return "";
 			case "Approving": return messages.approving;
 			case "Applying": return kind === "provisioning" ? messages.applying : messages.cleaning;
 			case "Rejecting": return messages.rejecting;
 			case "Rejected": return messages.declinedBy(state.attempt.rejection?.actorId ?? "");
-			case "Applied": return kind === "provisioning" ? messages.applied(state.receipt) : messages.cleaned(state.receipt);
+			case "Applied": return "";
 			case "Failure": return "";
 		}
 	};
@@ -1103,28 +1336,47 @@ function Status$4({ controller, kind, ...props }) {
 		role: busy(state._tag) ? "status" : void 0
 	});
 }
-/** The failure sentence from the error's reason, with the retry the flow allows. */
-function Outcome$4({ controller, kind, ...props }) {
+/**
+* How the attempt ended: a failure, a receipt that only partly landed, or one that landed whole.
+* Media, title, description, and the retry the flow allows. Children replace the composition and
+* keep the binding.
+*/
+function Outcome$4({ children, controller, kind, ...props }) {
 	const { messages } = useDomainKit();
 	const readOnly = useReadOnly();
 	const state = controller.state;
+	const retryPart = kind === "provisioning" ? "provisioning-retry" : "cleanup-retry";
+	if (state._tag !== "Failure" && state._tag !== "Applied") return null;
 	const partial = state._tag === "Applied" && state.receipt.status === "partial";
-	const element = usePart("p", props, { status: state._tag }, {
-		children: state._tag === "Failure" ? /* @__PURE__ */ jsxs(Fragment, { children: [failure(state.error, messages), readOnly ? null : /* @__PURE__ */ jsxs(Fragment, { children: [" ", /* @__PURE__ */ jsx("button", {
-			"data-domainkit-part": kind === "provisioning" ? "provisioning-retry" : "cleanup-retry",
-			onClick: controller.retry,
-			type: "button",
-			children: messages.retry
-		})] })] }) : partial ? kind === "provisioning" ? messages.partiallyApplied : messages.partiallyCleaned : null,
-		"data-domainkit-part": "flow-outcome",
-		"data-tone": "danger",
-		role: "alert"
+	const words = state._tag === "Failure" ? outcome(state.error, messages) : partial ? {
+		description: kind === "provisioning" ? messages.partiallyApplied : messages.partiallyCleaned,
+		title: kind === "provisioning" ? messages.partiallyAppliedTitle : messages.partiallyCleanedTitle
+	} : {
+		description: "",
+		title: kind === "provisioning" ? messages.applied(state.receipt) : messages.cleaned(state.receipt)
+	};
+	return /* @__PURE__ */ jsx(Provider, {
+		value: {
+			description: words.description ?? "",
+			layout: props.layout ?? "card",
+			retry: readOnly || state._tag !== "Failure" ? null : controller.retry,
+			retryPart,
+			title: words.title,
+			tone: state._tag === "Failure" ? "danger" : partial ? "warning" : "success"
+		},
+		children: /* @__PURE__ */ jsx(Root$6, {
+			...props,
+			children: children ?? /* @__PURE__ */ jsx(Composition, {})
+		})
 	});
-	return state._tag === "Failure" || partial ? element : null;
 }
+/** What a plan would actually write: an operation blocked by a conflict is not one of them. */
+const addable = (plan) => plan === null ? [] : plan.operations.filter((operation) => operation._tag !== "Conflict");
 /**
-* Approve and Decline. Approve authorizes the digest and applies it; Decline records the refusal
-* and ends the attempt. Neither renders until there is a plan to act on.
+* The primary action, and Decline. The primary authorizes the digest and applies it in one step,
+* so it says what it will do; where a conflict blocks part of a plan it approves the rest by id,
+* and where every operation is blocked it says what to fix instead. Neither renders until there is
+* a plan to act on.
 */
 function Actions$2({ controller, kind, ...props }) {
 	const { messages } = useDomainKit();
@@ -1132,24 +1384,33 @@ function Actions$2({ controller, kind, ...props }) {
 	const state = controller.state;
 	const plan = state._tag === "Planned" ? state.plan : null;
 	const running = busy(state._tag);
+	const writes = addable(plan);
+	const blocked = plan !== null && writes.length === 0;
 	const element = usePart("div", props, { status: state._tag }, {
-		children: /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("button", {
-			"data-domainkit-part": kind === "provisioning" ? "plan-apply" : "cleanup-apply",
-			disabled: running || plan === null || plan.operations.length === 0,
-			onClick: () => controller.approve(),
-			type: "button",
-			children: messages.approve
-		}), /* @__PURE__ */ jsx("button", {
-			"data-domainkit-part": "plan-decline",
-			disabled: running || plan === null,
-			onClick: () => controller.reject(),
-			type: "button",
-			children: messages.decline
-		})] }),
+		children: /* @__PURE__ */ jsxs(Fragment, { children: [
+			/* @__PURE__ */ jsx("button", {
+				"data-domainkit-part": kind === "provisioning" ? "plan-apply" : "cleanup-apply",
+				disabled: running || plan === null || writes.length === 0,
+				onClick: () => controller.approve(writes.length === plan?.operations.length ? void 0 : writes.map((operation) => operation.id)),
+				type: "button",
+				children: kind === "provisioning" ? messages.addRecords(writes.length) : messages.approve
+			}),
+			blocked ? /* @__PURE__ */ jsx("p", {
+				"data-domainkit-part": "plan-blocked",
+				children: messages.everyRecordConflicts
+			}) : null,
+			/* @__PURE__ */ jsx("button", {
+				"data-domainkit-part": "plan-decline",
+				disabled: running || plan === null,
+				onClick: () => controller.reject(),
+				type: "button",
+				children: messages.decline
+			})
+		] }),
 		"data-domainkit-part": "review-actions"
 	});
 	if (readOnly) return null;
-	return plan === null && !running ? null : element;
+	return plan === null ? null : element;
 }
 /** The operations under review, or the reason there is nothing to review. */
 function Body({ controller, kind }) {
@@ -1184,10 +1445,17 @@ function Dialog$4({ children, controller, kind, onOpenChange, open, render, trig
 	const readOnly = useReadOnly();
 	const [uncontrolled, setUncontrolled] = useState(false);
 	const isOpen = open ?? uncontrolled;
-	const setOpen = (next) => {
+	const close = useRef(() => {});
+	close.current = (next) => {
 		if (open === void 0) setUncontrolled(next);
 		onOpenChange?.(next);
 	};
+	const setOpen = (next) => close.current(next);
+	const state = controller.state;
+	const landed = state._tag === "Applied" && state.receipt.status === "complete";
+	useEffect(() => {
+		if (landed) close.current(false);
+	}, [landed]);
 	const running = busy(controller.state._tag);
 	const body = children ?? /* @__PURE__ */ jsx(Body, {
 		controller,
@@ -1257,7 +1525,7 @@ function Dialog$4({ children, controller, kind, onOpenChange, open, render, trig
 						children: [/* @__PURE__ */ jsx(Actions$2, {
 							controller,
 							kind
-						}), running ? null : /* @__PURE__ */ jsx(Dialog.Close, {
+						}), running || kind === "provisioning" ? null : /* @__PURE__ */ jsx(Dialog.Close, {
 							"data-domainkit-part": "dialog-cancel",
 							children: messages.cancel
 						})]
@@ -1349,13 +1617,16 @@ function Flow$3({ domain, onCleaned, receiptId, trigger, ...props }) {
 		...onCleaned === void 0 ? {} : { onCleaned },
 		...receiptId === void 0 ? {} : { receiptId }
 	});
+	const [open, setOpen] = useState(false);
 	return /* @__PURE__ */ jsxs(Root$3, {
 		controller,
 		...props,
 		children: [/* @__PURE__ */ jsx(Dialog$3, {
 			controller,
+			onOpenChange: setOpen,
+			open,
 			...trigger === void 0 ? {} : { trigger }
-		}), /* @__PURE__ */ jsx(Outcome$3, { controller })]
+		}), open ? null : /* @__PURE__ */ jsx(Outcome$3, { controller })]
 	});
 }
 //#endregion
@@ -1385,15 +1656,41 @@ function Mark({ provider, ...props }) {
 var connect_exports = /* @__PURE__ */ __exportAll({
 	Card: () => Card,
 	Dialog: () => Dialog$2,
+	DisconnectDialog: () => DisconnectDialog,
 	Flow: () => Flow$2,
 	Form: () => Form,
 	Outcome: () => Outcome$2,
+	Prompt: () => Prompt,
 	Root: () => Root$2,
 	State: () => State$1,
 	Status: () => Status$2,
+	answeredInPlace: () => answeredInPlace,
+	holdsConnection: () => holdsConnection,
+	hostProvider: () => hostProvider,
+	offering: () => offering,
 	useController: () => useController$2
 });
 const State$1 = Data.taggedEnum();
+/**
+* An interactive method leaves the page and comes back, so what the library knew is gone with it.
+* It writes down the domain it sent the customer away for, and the load that follows reads it once:
+* that, not a query parameter a host would have to keep, is how a return is told from a reload.
+*/
+const RETURNING = "domainkit.returning";
+const markReturn = (domain) => {
+	try {
+		sessionStorage.setItem(RETURNING, domain);
+	} catch {}
+};
+const tookReturn = (domain) => {
+	try {
+		if (sessionStorage.getItem(RETURNING) !== domain) return false;
+		sessionStorage.removeItem(RETURNING);
+		return true;
+	} catch {
+		return false;
+	}
+};
 /** Read at connect time, not at render, so it is the page the customer is actually on. */
 const currentUrl = () => typeof window === "undefined" ? null : window.location.href;
 const snapshotOf = (state) => {
@@ -1403,9 +1700,9 @@ const snapshotOf = (state) => {
 		case "Disconnected": return state.snapshot;
 		case "Loading":
 		case "Submitting":
-		case "SelectionRequired": return state.snapshot;
-		case "Redirecting":
-		case "Failure": return null;
+		case "SelectionRequired":
+		case "Failure": return state.snapshot;
+		case "Redirecting": return null;
 	}
 };
 const settled = (snapshot, discovery) => {
@@ -1435,6 +1732,8 @@ function useController$2({ domain, returnTo }) {
 		snapshot: null
 	});
 	const lastCommand = useRef(null);
+	const attempted = useRef(null);
+	const [established, setEstablished] = useState(0);
 	const [inspected, setInspected] = useState(domain);
 	if (inspected !== domain) {
 		setInspected(domain);
@@ -1448,7 +1747,12 @@ function useController$2({ domain, returnTo }) {
 		setState(State$1.Loading({ snapshot: null }));
 	}
 	const onFailure = useCallback((error) => {
-		setState(State$1.Failure({ error }));
+		setState(State$1.Failure({
+			attempt: attempted.current,
+			discovery: held.current.discovery,
+			error,
+			snapshot: held.current.snapshot
+		}));
 		emit(Event.Failed({
 			domain,
 			error
@@ -1457,6 +1761,7 @@ function useController$2({ domain, returnTo }) {
 	const load = useCallback(() => {
 		if (connection === void 0) return;
 		lastCommand.current = null;
+		attempted.current = null;
 		held.current = {
 			discovery: null,
 			domain,
@@ -1478,6 +1783,7 @@ function useController$2({ domain, returnTo }) {
 					domain,
 					snapshot
 				};
+				if (tookReturn(domain) && snapshot.status === "connected") setEstablished((count) => count + 1);
 				setState(settled(snapshot, discovery));
 			}
 		});
@@ -1497,6 +1803,7 @@ function useController$2({ domain, returnTo }) {
 					domain,
 					snapshot: result.snapshot
 				};
+				setEstablished((count) => count + 1);
 				setState(settled(result.snapshot, null));
 				if (result.snapshot.connectionId !== null) emit(Event.Connected({
 					connectionId: result.snapshot.connectionId,
@@ -1505,6 +1812,7 @@ function useController$2({ domain, returnTo }) {
 				}));
 				return;
 			case "Redirect":
+				markReturn(domain);
 				setState(State$1.Redirecting({ url: result.authorizationUrl }));
 				navigate(result.authorizationUrl);
 				return;
@@ -1521,10 +1829,14 @@ function useController$2({ domain, returnTo }) {
 		emit,
 		navigate
 	]);
-	const submit = useCallback((effect) => {
+	const submit = useCallback((effect, attempt) => {
 		if (held.current.domain !== domain) return;
+		attempted.current = attempt;
 		const command = () => {
-			setState(State$1.Submitting({ snapshot: held.current.snapshot }));
+			setState(State$1.Submitting({
+				discovery: held.current.discovery,
+				snapshot: held.current.snapshot
+			}));
 			runner.run(effect, {
 				onFailure,
 				onSuccess: started
@@ -1550,7 +1862,10 @@ function useController$2({ domain, returnTo }) {
 			domain,
 			method,
 			provider: input.provider
-		}));
+		}), {
+			method: input.method,
+			provider: input.provider
+		});
 	}, [
 		connection,
 		domain,
@@ -1563,7 +1878,7 @@ function useController$2({ domain, returnTo }) {
 			connectionId: input.connectionId,
 			domain,
 			...input.zone === void 0 ? {} : { zone: input.zone }
-		}));
+		}), null);
 	}, [
 		connection,
 		domain,
@@ -1578,8 +1893,12 @@ function useController$2({ domain, returnTo }) {
 	}, [reuse, state]);
 	const release = useCallback((effect, event) => {
 		if (held.current.domain !== domain) return;
+		attempted.current = null;
 		const command = () => {
-			setState(State$1.Submitting({ snapshot: held.current.snapshot }));
+			setState(State$1.Submitting({
+				discovery: held.current.discovery,
+				snapshot: held.current.snapshot
+			}));
 			runner.run(effect, {
 				onFailure,
 				onSuccess: () => {
@@ -1634,7 +1953,9 @@ function useController$2({ domain, returnTo }) {
 		connect,
 		detach,
 		disconnect,
-		discovery: state._tag === "Disconnected" ? state.discovery : null,
+		domain,
+		established,
+		discovery: state._tag === "Disconnected" || state._tag === "Failure" || state._tag === "Submitting" ? state.discovery : null,
 		providers: snapshotOf(state)?.providers ?? [],
 		refresh: load,
 		retry,
@@ -1650,28 +1971,63 @@ function Root$2({ controller, ...props }) {
 		"data-state": controller.state._tag
 	});
 }
-/** The failure sentence, chosen by the error's reason, plus the retry that reason allows. */
-function Outcome$2({ controller, ...props }) {
+/**
+* Whether a failure is already answered where it was raised: beside the method the customer used.
+* A flow rendering its own `Outcome` beside the dialog skips it, so the failure announces once.
+*/
+const answeredInPlace = (controller) => controller.state._tag === "Failure" && controller.state.attempt !== null;
+/**
+* Whether the surface should read as connected: it is, or a command it started is in flight over a
+* connection that was. The card and the dialog it opened stay on screen for the length of the
+* command rather than vanishing under the customer half way through it.
+*/
+const holdsConnection = (controller) => controller.state._tag === "Connected" || controller.state._tag === "Submitting" && controller.snapshot?.status === "connected";
+/**
+* The provider whose nameservers serve this domain, as the snapshot describes it. Discovery names
+* it by id; without a descriptor there is nothing to draw, so there is no host.
+*/
+const hostProvider = (controller) => {
+	const discovery = controller.discovery;
+	if (discovery === null || discovery._tag !== "NotFound" || discovery.host === null) return null;
+	const named = discovery.host.provider;
+	return controller.providers.find((entry) => entry.id === named) ?? null;
+};
+/** The provider as the customer knows it, falling back to the id when the snapshot has no name. */
+const displayName = (controller, provider) => controller.providers.find((entry) => entry.id === provider)?.name ?? provider;
+/**
+* The last failure as a card: media, the catalog's title and description, and the retry the flow
+* allows. Children replace the composition and keep the binding.
+*/
+function Outcome$2({ children, controller, ...props }) {
 	const { messages } = useDomainKit();
 	const readOnly = useReadOnly();
 	const state = controller.state;
-	const element = usePart("p", props, { status: state._tag }, {
-		children: state._tag === "Failure" ? /* @__PURE__ */ jsxs(Fragment, { children: [failure(state.error, messages), readOnly ? null : /* @__PURE__ */ jsxs(Fragment, { children: [" ", /* @__PURE__ */ jsx("button", {
-			"data-domainkit-part": "connection-retry",
-			onClick: controller.retry,
-			type: "button",
-			children: messages.retry
-		})] })] }) : null,
-		"data-domainkit-part": "flow-outcome",
-		"data-tone": "danger",
-		role: "alert"
+	if (state._tag !== "Failure") return null;
+	const acted = state.attempt === null ? void 0 : displayName(controller, state.attempt.provider);
+	const words = outcome(state.error, messages, {
+		...controller.snapshot === null ? {} : { domain: controller.snapshot.domain },
+		...acted === void 0 ? {} : { provider: acted }
+	});
+	return /* @__PURE__ */ jsx(Provider, {
+		value: {
+			description: words.description ?? "",
+			layout: props.layout ?? "card",
+			retry: readOnly ? null : controller.retry,
+			retryPart: "connection-retry",
+			title: words.title,
+			tone: "danger"
+		},
+		children: /* @__PURE__ */ jsx(Root$6, {
+			...props,
+			children: children ?? /* @__PURE__ */ jsx(Composition, {})
+		})
 	});
-	return state._tag === "Failure" ? element : null;
 }
 function Status$2({ controller, ...props }) {
 	const { messages } = useDomainKit();
 	const state = controller.state;
-	const provider = controller.snapshot?.provider ?? "";
+	const attached = controller.snapshot?.provider ?? null;
+	const provider = attached === null ? "" : displayName(controller, attached);
 	const text = () => {
 		switch (state._tag) {
 			case "Loading": return messages.loading;
@@ -1692,14 +2048,83 @@ function Status$2({ controller, ...props }) {
 	});
 }
 /**
+* The one field a rejected command was about, if any. A provider that turns down credentials is
+* answering the secret it was given, and it names no field, so the first secret carries the
+* answer; anything else is about the request rather than one input.
+*/
+const rejected = (reason, fields) => {
+	if (reason === null) return null;
+	if (reason._tag === "InvalidInput") return fields.find((field) => field.name === reason.field)?.name ?? null;
+	if (reason._tag !== "Unauthenticated" && reason._tag !== "Forbidden") return null;
+	return fields.find((field) => field.secret)?.name ?? null;
+};
+/**
+* One declared field in shadcn's `Field` anatomy: the label, the control, the note under it, and
+* the error the provider answered with. The docs link rides the field it explains. The value is
+* the form's, not the input's, so a rejection answers beside what the customer typed.
+*/
+function TokenField({ controller, docsUrl, field, invalid, onEnter, value }) {
+	const { messages } = useDomainKit();
+	const icons = useIcons();
+	const id = useId();
+	return /* @__PURE__ */ jsxs("div", {
+		"data-domainkit-part": "field",
+		"data-invalid": invalid ? "" : void 0,
+		"data-orientation": "vertical",
+		children: [
+			/* @__PURE__ */ jsxs("label", {
+				"data-domainkit-part": "field-label",
+				htmlFor: id,
+				children: [messages.fieldLabel(field.name), field.required ? null : /* @__PURE__ */ jsx("span", {
+					"data-domainkit-part": "field-optional",
+					children: messages.optionalField
+				})]
+			}),
+			/* @__PURE__ */ jsx("input", {
+				"aria-invalid": invalid ? true : void 0,
+				autoComplete: "off",
+				"data-domainkit-part": "field-input",
+				id,
+				name: field.name,
+				onChange: (event) => onEnter(event.target.value),
+				required: field.required,
+				type: field.secret ? "password" : "text",
+				value
+			}),
+			docsUrl === null ? null : /* @__PURE__ */ jsxs("a", {
+				"data-domainkit-part": "field-description",
+				href: docsUrl,
+				rel: "noreferrer",
+				target: "_blank",
+				children: [messages.getToken, /* @__PURE__ */ jsx("span", {
+					"aria-hidden": "true",
+					"data-icon": "inline-end",
+					children: icons.external
+				})]
+			}),
+			invalid ? /* @__PURE__ */ jsx("div", {
+				"data-domainkit-part": "field-error",
+				children: /* @__PURE__ */ jsx(Outcome$2, {
+					controller,
+					layout: "inline"
+				})
+			}) : null
+		]
+	});
+}
+/**
 * One auth method, rendered from its descriptor. A token method draws an input per declared
-* field, so a provider that needs an account id alongside a token needs no code here.
+* field, so a provider that needs an account id alongside a token needs no code here. The fields
+* a provider does not need sit behind a disclosure, so the common form is one field.
 */
-function Method({ controller, method, provider }) {
+function Method({ controller, method, onEnter, provider, values }) {
 	const { messages } = useDomainKit();
 	const icons = useIcons();
-	const busy = controller.state._tag === "Submitting";
-	if (method.fields === null) return /* @__PURE__ */ jsx("button", {
+	const [more, setMore] = useState(false);
+	const state = controller.state;
+	const busy = state._tag === "Submitting";
+	const failed = state._tag === "Failure" && state.attempt !== null && state.attempt.provider === provider.id && state.attempt.method === method.kind;
+	if (method.fields === null) return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("button", {
 		"data-domainkit-part": method.kind === "oauth" ? "oauth-connect" : "integration-connect",
 		"data-provider": provider.id,
 		disabled: busy,
@@ -1708,70 +2133,138 @@ function Method({ controller, method, provider }) {
 			provider: provider.id
 		}),
 		type: "button",
-		children: messages.connectWith(method.label)
-	});
+		children: method.kind === "oauth" ? messages.methodOAuth(provider.name) : messages.methodIntegration(provider.name)
+	}), failed ? /* @__PURE__ */ jsx(Outcome$2, {
+		controller,
+		layout: "inline"
+	}) : null] });
 	const fields = method.fields;
+	const answered = rejected(failed && state._tag === "Failure" ? state.error.reason : null, fields);
+	const required = fields.filter((field) => field.required);
+	const optional = fields.filter((field) => !field.required);
+	const showMore = more || optional.some((field) => field.name === answered);
+	const explains = (required.find((field) => field.secret) ?? required[0] ?? optional[0])?.name;
+	const render = (field) => /* @__PURE__ */ jsx(TokenField, {
+		controller,
+		docsUrl: field.name === explains ? method.docsUrl : null,
+		field,
+		invalid: field.name === answered,
+		onEnter: (value) => onEnter(field.name, value),
+		value: values[field.name] ?? ""
+	}, field.name);
 	return /* @__PURE__ */ jsxs("form", {
 		"data-domainkit-part": "token-connect",
 		"data-provider": provider.id,
 		onSubmit: (event) => {
 			event.preventDefault();
-			const data = new FormData(event.currentTarget);
-			const values = {};
+			const submitted = {};
 			for (const field of fields) {
-				const value = data.get(field.name);
-				if (typeof value === "string" && (value !== "" || field.required)) values[field.name] = value;
+				const value = values[field.name] ?? "";
+				if (value !== "" || field.required) submitted[field.name] = value;
 			}
 			controller.connect({
 				method: method.kind,
 				provider: provider.id,
-				values
+				values: submitted
 			});
 		},
 		children: [
-			fields.map((field) => /* @__PURE__ */ jsxs("label", {
-				"data-domainkit-part": "token-field",
-				children: [/* @__PURE__ */ jsxs("span", {
-					"data-domainkit-part": "token-field-label",
-					children: [messages.fieldLabel(field.name), field.required ? null : /* @__PURE__ */ jsx("span", {
-						"data-domainkit-part": "token-field-optional",
-						children: messages.optionalField
+			required.map(render),
+			optional.length === 0 ? null : /* @__PURE__ */ jsxs(Collapsible.Root, {
+				"data-domainkit-part": "more-options",
+				"data-state": showMore ? "open" : "closed",
+				onOpenChange: setMore,
+				open: showMore,
+				children: [/* @__PURE__ */ jsxs(Collapsible.Trigger, {
+					"data-domainkit-part": "more-options-trigger",
+					children: [messages.moreOptions, /* @__PURE__ */ jsx("span", {
+						"aria-hidden": "true",
+						"data-icon": "inline-end",
+						children: icons.chevron
 					})]
-				}), /* @__PURE__ */ jsx("input", {
-					autoComplete: "off",
-					"data-domainkit-part": "token-field-input",
-					name: field.name,
-					required: field.required,
-					type: field.secret ? "password" : "text"
-				})]
-			}, field.name)),
-			method.docsUrl === null ? null : /* @__PURE__ */ jsxs("a", {
-				"data-domainkit-part": "token-docs",
-				href: method.docsUrl,
-				rel: "noreferrer",
-				target: "_blank",
-				children: [messages.getToken, /* @__PURE__ */ jsx("span", {
-					"aria-hidden": "true",
-					"data-icon": "inline-end",
-					children: icons.external
+				}), /* @__PURE__ */ jsx(Collapsible.Panel, {
+					"data-domainkit-part": "more-options-panel",
+					children: optional.map(render)
 				})]
 			}),
+			failed && answered === null ? /* @__PURE__ */ jsx(Outcome$2, {
+				controller,
+				layout: "inline"
+			}) : null,
 			/* @__PURE__ */ jsx("button", {
 				"data-domainkit-part": "token-submit",
 				disabled: busy,
 				type: "submit",
-				children: messages.connectWith(method.label)
+				children: messages.methodToken
 			})
 		]
 	});
 }
 /**
+* One provider's methods, in the order the descriptor declares them: the interactive ones a
+* customer clicks through, then the token. Where a provider offers both, the interactive method is
+* the offer and a plain button opens the token form in its place, so the dialog asks for one
+* decision at a time. With a heading the whole provider is a disclosure the customer opens; the
+* provider a narrowed dialog is about carries no heading, because the dialog title already names
+* it.
+*/
+function Authentication({ controller, onEnter, onOpen, onType, open, provider, typing, values }) {
+	const { messages } = useDomainKit();
+	const state = controller.state;
+	const render = (method) => /* @__PURE__ */ jsx(Method, {
+		controller,
+		method,
+		onEnter,
+		provider,
+		values
+	}, `${provider.id}:${method.kind}`);
+	const interactive = provider.methods.filter((method) => method.fields === null);
+	const typed = provider.methods.filter((method) => method.fields !== null);
+	const methods = !(interactive.length > 0 && typed.length > 0) ? provider.methods.map(render) : typing ? typed.map(render) : /* @__PURE__ */ jsxs(Fragment, { children: [interactive.map(render), /* @__PURE__ */ jsx("button", {
+		"data-domainkit-part": "method-alternate",
+		"data-provider": provider.id,
+		disabled: state._tag === "Submitting",
+		onClick: onType,
+		type: "button",
+		children: messages.useTokenInstead
+	})] });
+	return /* @__PURE__ */ jsxs("section", {
+		"data-domainkit-part": "provider-authentication",
+		"data-provider": provider.id,
+		"data-state": open ? "open" : "closed",
+		children: [onOpen === void 0 ? null : /* @__PURE__ */ jsxs("button", {
+			"aria-expanded": open,
+			"data-domainkit-part": "provider-heading",
+			onClick: onOpen,
+			type: "button",
+			children: [/* @__PURE__ */ jsx(Mark, { provider }), /* @__PURE__ */ jsx("strong", { children: provider.name })]
+		}), open ? methods : null]
+	});
+}
+/**
 * Everything a disconnected domain can do: a connection discovery already found, the connections
 * this owner already has, then each provider's declared methods.
 */
-function Form({ controller, ...props }) {
+function Form({ controller, provider: narrowed, ...props }) {
 	const { messages } = useDomainKit();
+	const [opened, setOpened] = useState(null);
+	const [entered, setEntered] = useState(null);
 	const state = controller.state;
+	const owner = controller.domain;
+	if (entered !== null && (entered.domain !== owner || state._tag === "Connected")) setEntered(null);
+	const kept = entered?.domain === owner ? entered : null;
+	const enter = (provider, name, value) => setEntered((previous) => {
+		const held = previous?.domain === owner && previous.provider === provider ? previous : null;
+		return {
+			domain: owner,
+			provider,
+			values: held === null ? { [name]: value } : {
+				...held.values,
+				[name]: value
+			}
+		};
+	});
+	const valuesFor = (provider) => kept?.provider === provider ? kept.values : {};
 	const snapshot = controller.snapshot;
 	const discovery = controller.discovery;
 	const candidates = state._tag === "SelectionRequired" ? state.candidates.map((candidate) => ({
@@ -1781,6 +2274,18 @@ function Form({ controller, ...props }) {
 	const resolved = discovery !== null && discovery._tag === "Resolved" ? discovery : null;
 	const reusable = snapshot?.reusable ?? [];
 	const providers = controller.providers;
+	const host = providers.find((entry) => entry.id === narrowed) ?? hostProvider(controller);
+	const [typing, setTyping] = useState(null);
+	const authentication = (provider, open) => /* @__PURE__ */ jsx(Authentication, {
+		controller,
+		onEnter: (name, value) => enter(provider.id, name, value),
+		onOpen: () => setOpened(open ? "" : provider.id),
+		onType: () => setTyping(provider.id),
+		open,
+		provider,
+		typing: typing === provider.id,
+		values: valuesFor(provider.id)
+	}, provider.id);
 	return usePart("div", props, { status: state._tag }, {
 		children: /* @__PURE__ */ jsxs(Fragment, { children: [
 			resolved === null ? null : /* @__PURE__ */ jsxs("section", {
@@ -1827,17 +2332,20 @@ function Form({ controller, ...props }) {
 			providers.length === 0 ? /* @__PURE__ */ jsx("p", {
 				"data-domainkit-part": "target-unavailable",
 				children: messages.noProviders
-			}) : providers.map((provider) => /* @__PURE__ */ jsxs("section", {
-				"data-domainkit-part": "provider-authentication",
-				children: [/* @__PURE__ */ jsxs("div", {
-					"data-domainkit-part": "provider-heading",
-					children: [/* @__PURE__ */ jsx(Mark, { provider }), /* @__PURE__ */ jsx("strong", { children: provider.name })]
-				}), provider.methods.map((method) => /* @__PURE__ */ jsx(Method, {
-					controller,
-					method,
-					provider
-				}, `${provider.id}:${method.kind}`))]
-			}, provider.id))
+			}) : host === null ? providers.map((provider) => authentication(provider, opened === null ? provider.id === providers[0]?.id : opened === provider.id)) : /* @__PURE__ */ jsxs(Fragment, { children: [typing === host.id ? /* @__PURE__ */ jsx("button", {
+				"data-domainkit-part": "dialog-back",
+				onClick: () => setTyping(null),
+				type: "button",
+				children: messages.back
+			}) : null, /* @__PURE__ */ jsx(Authentication, {
+				controller,
+				onEnter: (name, value) => enter(host.id, name, value),
+				onType: () => setTyping(host.id),
+				open: true,
+				provider: host,
+				typing: typing === host.id,
+				values: valuesFor(host.id)
+			})] })
 		] }),
 		"data-domainkit-part": "connection-form"
 	});
@@ -1845,19 +2353,32 @@ function Form({ controller, ...props }) {
 /** The connect surface. Without `render` it is a Base UI dialog behind `trigger`. */
 function Dialog$2({ children, controller, render, title, trigger }) {
 	const { colorScheme, messages, portalContainer, themeStyle } = useDomainKit();
+	const icons = useIcons();
 	const readOnly = useReadOnly();
 	const [open, setOpen] = useState(false);
-	const busy = controller.state._tag === "Submitting";
+	const state = controller.state;
+	const busy = state._tag === "Submitting";
+	const unattributed = state._tag === "Failure" && !answeredInPlace(controller);
 	const snapshot = controller.snapshot;
-	const provider = snapshot?.provider;
-	const heading = title ?? (provider === null || provider === void 0 ? messages.connectAnyTitle : messages.connectTitle(provider));
-	const body = children ?? /* @__PURE__ */ jsx(Form, { controller });
+	const [chosen, setChosen] = useState(null);
+	const attached = snapshot?.provider ?? null;
+	const host = hostProvider(controller);
+	const narrowed = controller.providers.find((entry) => entry.id === (chosen ?? attached)) ?? host;
+	const named = narrowed?.name ?? null;
+	const heading = title ?? (named === null ? messages.connectAnyTitle : messages.connectTitle(named));
+	const alternatives = narrowed === null ? [] : controller.providers.filter((entry) => entry.id !== narrowed.id);
+	const running = state._tag === "Loading" || state._tag === "Submitting" || state._tag === "Redirecting" || state._tag === "SelectionRequired";
+	const label = named === null ? messages.connectAnyTitle : messages.connect;
+	const body = children ?? /* @__PURE__ */ jsx(Form, {
+		controller,
+		...chosen === null ? {} : { provider: chosen }
+	});
 	if (readOnly) return /* @__PURE__ */ jsx(Fragment, {});
 	if (render !== void 0) return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("button", {
 		"data-domainkit-part": "connection-trigger",
 		onClick: () => setOpen(!open),
 		type: "button",
-		children: trigger ?? messages.connect
+		children: trigger ?? label
 	}), render({
 		children: body,
 		open
@@ -1873,7 +2394,7 @@ function Dialog$2({ children, controller, render, title, trigger }) {
 		open,
 		children: [/* @__PURE__ */ jsx(Dialog.Trigger, {
 			"data-domainkit-part": "connection-trigger",
-			children: trigger ?? messages.connect
+			children: trigger ?? label
 		}), /* @__PURE__ */ jsxs(Dialog.Portal, {
 			container: portalContainer,
 			children: [/* @__PURE__ */ jsx(Dialog.Backdrop, {
@@ -1886,6 +2407,229 @@ function Dialog$2({ children, controller, render, title, trigger }) {
 				"data-domainkit-part": "connection-dialog",
 				"data-domainkit-root": "",
 				style: themeStyle,
+				children: [
+					/* @__PURE__ */ jsxs("div", {
+						"data-domainkit-part": "dialog-header",
+						children: [
+							narrowed === null ? null : /* @__PURE__ */ jsx("div", {
+								"data-domainkit-part": "dialog-media",
+								children: /* @__PURE__ */ jsx(Mark, { provider: narrowed })
+							}),
+							/* @__PURE__ */ jsxs("div", {
+								"data-domainkit-part": "dialog-heading",
+								children: [/* @__PURE__ */ jsx(Dialog.Title, {
+									"data-domainkit-part": "dialog-title",
+									children: alternatives.length === 0 || title !== void 0 ? heading : /* @__PURE__ */ jsxs(Menu.Root, { children: [/* @__PURE__ */ jsxs(Menu.Trigger, {
+										"data-domainkit-part": "dialog-provider-menu",
+										disabled: busy,
+										children: [heading, /* @__PURE__ */ jsx("span", {
+											"aria-hidden": "true",
+											"data-icon": "inline-end",
+											children: icons.chevron
+										})]
+									}), /* @__PURE__ */ jsx(Menu.Portal, {
+										container: portalContainer,
+										children: /* @__PURE__ */ jsx(Menu.Positioner, {
+											align: "start",
+											"data-domainkit-part": "provider-menu-positioner",
+											sideOffset: 6,
+											children: /* @__PURE__ */ jsx(Menu.Popup, {
+												"aria-label": messages.useAnotherProvider,
+												"data-color-scheme": colorScheme,
+												"data-domainkit-part": "provider-menu",
+												"data-domainkit-root": "",
+												style: themeStyle,
+												children: alternatives.map((entry) => /* @__PURE__ */ jsxs(Menu.Item, {
+													"data-domainkit-part": "provider-menu-item",
+													"data-provider": entry.id,
+													onClick: () => setChosen(entry.id),
+													children: [/* @__PURE__ */ jsx(Mark, { provider: entry }), entry.name]
+												}, entry.id))
+											})
+										})
+									})] })
+								}), /* @__PURE__ */ jsx(Dialog.Description, {
+									"data-domainkit-part": "dialog-description",
+									children: messages.connectDescription(snapshot?.domain ?? "")
+								})]
+							}),
+							busy ? null : /* @__PURE__ */ jsx(Dialog.Close, {
+								"aria-label": messages.close,
+								"data-domainkit-part": "dialog-close",
+								children: "×"
+							})
+						]
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						"data-domainkit-part": "dialog-body",
+						children: [
+							running ? /* @__PURE__ */ jsx(Status$2, { controller }) : null,
+							body,
+							unattributed ? /* @__PURE__ */ jsx(Outcome$2, { controller }) : null
+						]
+					}),
+					busy ? null : /* @__PURE__ */ jsx("div", {
+						"data-domainkit-part": "dialog-footer",
+						children: /* @__PURE__ */ jsx(Dialog.Close, {
+							"data-domainkit-part": "dialog-cancel",
+							children: messages.cancel
+						})
+					})
+				]
+			})]
+		})]
+	});
+}
+/**
+* Whether the connect surface has anything to offer for this domain: a provider that serves the
+* zone, a connection discovery already found, one the owner already holds, or a command already
+* running. Never while a connection is held, which is what `holdsConnection` answers. `Prompt`
+* renders on this, and `Domain.Flow` reports it so a host can order its own offers beside
+* DomainKit's rather than competing with them.
+*/
+const offering = (controller, connect = "detected") => {
+	if (holdsConnection(controller)) return false;
+	const state = controller.state;
+	if (state._tag === "Submitting" || state._tag === "Redirecting" || state._tag === "SelectionRequired" || state._tag === "Reconnect") return true;
+	if (connect !== "detected") return connect === "always";
+	const discovery = controller.discovery;
+	return hostProvider(controller) !== null || discovery !== null && discovery._tag !== "NotFound" || (controller.snapshot?.reusable.length ?? 0) > 0;
+};
+/**
+* The disconnected offer: the provider whose nameservers serve the domain, what that means, and
+* the trigger that connects it. With no host detected there is nothing to offer, so nothing
+* renders unless the host application asks for the dialog anyway.
+*/
+function Prompt({ connect = "detected", controller, ...props }) {
+	const { messages } = useDomainKit();
+	const readOnly = useReadOnly();
+	const state = controller.state;
+	const host = hostProvider(controller);
+	const element = usePart("div", props, { status: state._tag }, {
+		children: /* @__PURE__ */ jsxs(Fragment, { children: [host === null ? null : /* @__PURE__ */ jsxs("div", {
+			"data-domainkit-part": "host-identity",
+			children: [
+				/* @__PURE__ */ jsx(Mark, { provider: host }),
+				/* @__PURE__ */ jsx("span", {
+					"data-domainkit-part": "host-name",
+					children: host.name
+				}),
+				/* @__PURE__ */ jsx("span", {
+					"data-domainkit-part": "host-statement",
+					children: messages.hostOwnsZone
+				})
+			]
+		}), /* @__PURE__ */ jsx(Dialog$2, { controller })] }),
+		"data-domainkit-part": "connect-prompt",
+		"data-host": host?.id
+	});
+	if (!offering(controller, connect)) return null;
+	if (readOnly && host === null) return null;
+	return element;
+}
+/** The plan an attempt holds, whatever step it is on; `null` before there is one. */
+const planOf = (state) => {
+	switch (state._tag) {
+		case "Planned":
+		case "Approving":
+		case "Applying":
+		case "Rejecting":
+		case "Rejected": return state.plan;
+		case "Applied": return state.plan;
+		case "Idle":
+		case "Planning":
+		case "Failure": return null;
+	}
+};
+/**
+* Letting a provider go, with the records DomainKit added as one decision rather than two.
+* Confirming removes what the domain's apply receipt proves DomainKit created, then releases the
+* connection; a plan with nothing in it is not a failure, so it goes straight to the release.
+*
+* The cleanup is this dialog's own, so nothing re-reads the snapshot in between: the disconnect
+* needs the connection the cleanup just used.
+*/
+function DisconnectDialog({ controller, onCleaned, trigger }) {
+	const { capabilities, colorScheme, messages, portalContainer, themeStyle } = useDomainKit();
+	const readOnly = useReadOnly();
+	const [open, setOpen] = useState(false);
+	const [alsoRemove, setAlsoRemove] = useState(true);
+	const [removing, setRemoving] = useState(false);
+	const snapshot = controller.snapshot;
+	const receiptId = snapshot?.lastReceiptId ?? null;
+	const removable = capabilities.includes("cleanup") && receiptId !== null;
+	const shared = (snapshot?.connectionDomains ?? 0) > 1;
+	const [everyDomain, setEveryDomain] = useState(false);
+	const cleanup = useController$3({
+		domain: controller.domain,
+		...onCleaned === void 0 ? {} : { onCleaned },
+		...receiptId === null ? {} : { receiptId: Receipt.ReceiptId.make(receiptId) }
+	});
+	const { approve, plan, state: cleaning } = cleanup;
+	const removals = planOf(cleaning);
+	useEffect(() => {
+		if (open && removable && cleaning._tag === "Idle") plan();
+	}, [
+		cleaning,
+		open,
+		plan,
+		removable
+	]);
+	const detach = controller.detach;
+	const release = controller.disconnect;
+	const disconnect = useCallback(() => shared && !everyDomain ? detach() : release(), [
+		detach,
+		everyDomain,
+		release,
+		shared
+	]);
+	const releasing = controller.state._tag === "Submitting";
+	useEffect(() => {
+		if (!removing) return;
+		if (cleaning._tag === "Applied") {
+			setRemoving(false);
+			disconnect();
+			return;
+		}
+		if (cleaning._tag === "Failure" || cleaning._tag === "Rejected") setRemoving(false);
+	}, [
+		cleaning,
+		disconnect,
+		removing
+	]);
+	const busy = removing || releasing;
+	const settling = removable && removals === null;
+	const provider = snapshot?.provider ?? null;
+	const named = provider === null ? "" : displayName(controller, provider);
+	const heading = provider === null ? messages.disconnect : messages.disconnectTitle(named);
+	const count = removals?.operations.length ?? 0;
+	const choosable = removable && count > 0;
+	if (readOnly) return /* @__PURE__ */ jsx(Fragment, {});
+	return /* @__PURE__ */ jsxs(Dialog.Root, {
+		onOpenChange: (next, details) => {
+			if (!next && busy) {
+				details.cancel();
+				return;
+			}
+			setOpen(next);
+		},
+		open,
+		children: [/* @__PURE__ */ jsx(Dialog.Trigger, {
+			"data-domainkit-part": "disconnect-action",
+			children: trigger ?? messages.disconnect
+		}), /* @__PURE__ */ jsxs(Dialog.Portal, {
+			container: portalContainer,
+			children: [/* @__PURE__ */ jsx(Dialog.Backdrop, {
+				"data-color-scheme": colorScheme,
+				"data-domainkit-part": "dialog-backdrop",
+				"data-domainkit-root": "",
+				style: themeStyle
+			}), /* @__PURE__ */ jsxs(Dialog.Popup, {
+				"data-color-scheme": colorScheme,
+				"data-cleanup": choosable ? "offered" : "none",
+				"data-domainkit-part": "disconnect-dialog",
+				"data-domainkit-root": "",
+				style: themeStyle,
 				children: [
 					/* @__PURE__ */ jsxs("div", {
 						"data-domainkit-part": "dialog-header",
@@ -1896,7 +2640,7 @@ function Dialog$2({ children, controller, render, title, trigger }) {
 								children: heading
 							}), /* @__PURE__ */ jsx(Dialog.Description, {
 								"data-domainkit-part": "dialog-description",
-								children: messages.connectDescription(snapshot?.domain ?? "")
+								children: messages.disconnectConsent(snapshot?.domain ?? "", named)
 							})]
 						}), busy ? null : /* @__PURE__ */ jsx(Dialog.Close, {
 							"aria-label": messages.close,
@@ -1907,68 +2651,136 @@ function Dialog$2({ children, controller, render, title, trigger }) {
 					/* @__PURE__ */ jsxs("div", {
 						"data-domainkit-part": "dialog-body",
 						children: [
-							/* @__PURE__ */ jsx(Status$2, { controller }),
-							body,
+							shared ? /* @__PURE__ */ jsxs("fieldset", {
+								"data-domainkit-part": "disconnect-scope",
+								children: [
+									/* @__PURE__ */ jsx("legend", { children: messages.disconnectScope }),
+									/* @__PURE__ */ jsxs("label", { children: [/* @__PURE__ */ jsx("input", {
+										checked: !everyDomain,
+										disabled: busy,
+										name: "disconnect-scope",
+										onChange: () => setEveryDomain(false),
+										type: "radio"
+									}), messages.disconnectThisDomain] }),
+									/* @__PURE__ */ jsxs("label", { children: [/* @__PURE__ */ jsx("input", {
+										checked: everyDomain,
+										disabled: busy,
+										name: "disconnect-scope",
+										onChange: () => setEveryDomain(true),
+										type: "radio"
+									}), messages.disconnectEveryDomain(snapshot?.connectionDomains ?? 0)] })
+								]
+							}) : null,
+							choosable ? /* @__PURE__ */ jsxs("div", {
+								"data-domainkit-part": "disconnect-cleanup",
+								"data-state": alsoRemove ? "on" : "off",
+								children: [/* @__PURE__ */ jsxs("label", {
+									"data-domainkit-part": "disconnect-cleanup-label",
+									children: [/* @__PURE__ */ jsx(Switch.Root, {
+										checked: alsoRemove,
+										"data-domainkit-part": "disconnect-cleanup-switch",
+										disabled: busy,
+										onCheckedChange: setAlsoRemove,
+										children: /* @__PURE__ */ jsx(Switch.Thumb, { "data-domainkit-part": "disconnect-cleanup-thumb" })
+									}), messages.disconnectWithCleanup(count)]
+								}), /* @__PURE__ */ jsxs("div", {
+									"data-domainkit-part": "disconnect-cleanup-panel",
+									children: [removals === null ? null : /* @__PURE__ */ jsx(List, { plan: removals }), alsoRemove ? null : /* @__PURE__ */ jsx("p", {
+										"data-domainkit-part": "disconnect-cleanup-note",
+										children: messages.disconnectKeepsRecords(named)
+									})]
+								})]
+							}) : null,
+							/* @__PURE__ */ jsx(Status$3, { controller: cleanup }),
+							releasing ? /* @__PURE__ */ jsx("p", {
+								"data-domainkit-part": "disconnect-status",
+								role: "status",
+								children: messages.disconnecting
+							}) : null,
+							/* @__PURE__ */ jsx(Outcome$3, { controller: cleanup }),
 							/* @__PURE__ */ jsx(Outcome$2, { controller })
 						]
 					}),
-					busy ? null : /* @__PURE__ */ jsx("div", {
+					/* @__PURE__ */ jsxs("div", {
 						"data-domainkit-part": "dialog-footer",
-						children: /* @__PURE__ */ jsx(Dialog.Close, {
+						children: [/* @__PURE__ */ jsx("button", {
+							"data-domainkit-part": "disconnect-confirm",
+							disabled: busy || settling,
+							onClick: () => {
+								if (choosable && alsoRemove) {
+									setRemoving(true);
+									approve();
+									return;
+								}
+								disconnect();
+							},
+							type: "button",
+							children: messages.disconnect
+						}), busy ? null : /* @__PURE__ */ jsx(Dialog.Close, {
 							"data-domainkit-part": "dialog-cancel",
 							children: messages.cancel
-						})
+						})]
 					})
 				]
 			})]
 		})]
 	});
 }
-/** A connected domain: which provider holds it, and how to let it go. */
-function Card({ controller, ...props }) {
+/**
+* A connected domain, with the prompt card's anatomy: the provider's mark, the name the customer
+* knows it by, where the connection stands, and the one action that ends it.
+*/
+function Card({ controller, onCleaned, ...props }) {
 	const { messages } = useDomainKit();
 	const readOnly = useReadOnly();
 	const state = controller.state;
 	const snapshot = controller.snapshot;
 	const provider = controller.providers.find((entry) => entry.id === snapshot?.provider);
+	const standing = state._tag === "Reconnect" ? messages.needsReconnect : messages.connected;
 	return usePart("div", props, { status: state._tag }, {
 		children: /* @__PURE__ */ jsxs(Fragment, { children: [
 			/* @__PURE__ */ jsxs("div", {
 				"data-domainkit-part": "connected-identity",
-				children: [provider === void 0 ? null : /* @__PURE__ */ jsx(Mark, { provider }), /* @__PURE__ */ jsx(Status$2, { controller })]
+				children: [
+					provider === void 0 ? null : /* @__PURE__ */ jsx(Mark, { provider }),
+					/* @__PURE__ */ jsx("span", {
+						"data-domainkit-part": "host-name",
+						children: provider?.name ?? snapshot?.provider ?? ""
+					}),
+					/* @__PURE__ */ jsx("span", {
+						"data-domainkit-part": "host-statement",
+						children: standing
+					})
+				]
 			}),
-			readOnly ? null : /* @__PURE__ */ jsxs("div", {
+			readOnly ? null : /* @__PURE__ */ jsx("div", {
 				"data-domainkit-part": "connected-actions",
-				children: [/* @__PURE__ */ jsx("button", {
-					"data-domainkit-part": "disconnect-trigger",
-					disabled: state._tag === "Submitting",
-					onClick: controller.detach,
-					type: "button",
-					children: messages.detach
-				}), /* @__PURE__ */ jsx("button", {
-					"data-domainkit-part": "disconnect-action",
-					disabled: state._tag === "Submitting",
-					onClick: controller.disconnect,
-					type: "button",
-					children: messages.disconnect
-				})]
+				children: /* @__PURE__ */ jsx(DisconnectDialog, {
+					controller,
+					...onCleaned === void 0 ? {} : { onCleaned }
+				})
 			}),
 			/* @__PURE__ */ jsx(Outcome$2, { controller })
 		] }),
 		"data-domainkit-part": "connected-card"
 	});
 }
-/** Connection on its own: the card once connected, the dialog until then. */
-function Flow$2({ domain, returnTo, ...props }) {
+/** Connection on its own: the card once connected, the prompt until then. */
+function Flow$2({ connect, domain, onCleaned, returnTo, ...props }) {
 	const controller = useController$2({
 		domain,
 		...returnTo === void 0 ? {} : { returnTo }
 	});
-	const state = controller.state;
 	return /* @__PURE__ */ jsx(Root$2, {
 		controller,
 		...props,
-		children: state._tag === "Connected" ? /* @__PURE__ */ jsx(Card, { controller }) : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Dialog$2, { controller }), /* @__PURE__ */ jsx(Outcome$2, { controller })] })
+		children: holdsConnection(controller) ? /* @__PURE__ */ jsx(Card, {
+			controller,
+			...onCleaned === void 0 ? {} : { onCleaned }
+		}) : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Prompt, {
+			controller,
+			...connect === void 0 ? {} : { connect }
+		}), answeredInPlace(controller) ? null : /* @__PURE__ */ jsx(Outcome$2, { controller })] })
 	});
 }
 //#endregion
@@ -2049,13 +2861,16 @@ function Flow$1({ domain, onApplied, requirements, trigger, ...props }) {
 		requirements,
 		...onApplied === void 0 ? {} : { onApplied }
 	});
+	const [open, setOpen] = useState(false);
 	return /* @__PURE__ */ jsxs(Root$1, {
 		controller,
 		...props,
 		children: [/* @__PURE__ */ jsx(Dialog$1, {
 			controller,
+			onOpenChange: setOpen,
+			open,
 			...trigger === void 0 ? {} : { trigger }
-		}), /* @__PURE__ */ jsx(Outcome$1, { controller })]
+		}), open ? null : /* @__PURE__ */ jsx(Outcome$1, { controller })]
 	});
 }
 //#endregion
@@ -2242,25 +3057,29 @@ function Evidence({ readiness }) {
 		})]
 	});
 }
-function Outcome({ controller, ...props }) {
+/**
+* The last observation that failed. Observing reads the world rather than changing the domain, so
+* the retry stays even in read-only.
+*/
+function Outcome({ children, controller, ...props }) {
 	const { messages } = useDomainKit();
 	const state = controller.state;
-	const element = usePart("p", props, { status: state._tag }, {
-		children: state._tag === "Failure" ? /* @__PURE__ */ jsxs(Fragment, { children: [
-			failure(state.error, messages),
-			" ",
-			/* @__PURE__ */ jsx("button", {
-				"data-domainkit-part": "verification-retry",
-				onClick: controller.retry,
-				type: "button",
-				children: messages.retry
-			})
-		] }) : null,
-		"data-domainkit-part": "flow-outcome",
-		"data-tone": "danger",
-		role: "alert"
+	if (state._tag !== "Failure") return null;
+	const words = outcome(state.error, messages);
+	return /* @__PURE__ */ jsx(Provider, {
+		value: {
+			description: words.description ?? "",
+			layout: props.layout ?? "card",
+			retry: controller.retry,
+			retryPart: "verification-retry",
+			title: words.title,
+			tone: "danger"
+		},
+		children: /* @__PURE__ */ jsx(Root$6, {
+			...props,
+			children: children ?? /* @__PURE__ */ jsx(Composition, {})
+		})
 	});
-	return state._tag === "Failure" ? element : null;
 }
 /** The default verification slot: a button that observes, with the evidence behind it. */
 function Status({ controller, render, ...props }) {
@@ -2306,54 +3125,51 @@ function Status({ controller, render, ...props }) {
 //#endregion
 //#region src/domain.tsx
 var domain_exports = /* @__PURE__ */ __exportAll({ Flow: () => Flow });
-function DefaultConnection({ controller }) {
-	return controller.state._tag === "Connected" ? /* @__PURE__ */ jsx(Card, { controller }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-		/* @__PURE__ */ jsx(Status$2, { controller }),
-		/* @__PURE__ */ jsx(Dialog$2, { controller }),
-		/* @__PURE__ */ jsx(Outcome$2, { controller })
+/** Built from primitives alone, so the effect that announces it depends on exactly those. */
+const flowState = (input) => ({
+	applied: input.receipt !== null,
+	connected: input.connected,
+	connection: input.status,
+	offering: input.offering,
+	provider: input.provider,
+	provisioning: input.planning,
+	receiptId: input.receipt === null ? null : Receipt.ReceiptId.make(input.receipt)
+});
+function DefaultConnection({ connect, controller, onCleaned }) {
+	const disconnected = controller.state._tag === "Disconnected";
+	const host = hostProvider(controller);
+	if (disconnected && host === null && !offering(controller, connect)) return null;
+	const stated = disconnected && host !== null && offering(controller, connect);
+	return holdsConnection(controller) ? /* @__PURE__ */ jsx(Card, {
+		controller,
+		...onCleaned === void 0 ? {} : { onCleaned }
+	}) : /* @__PURE__ */ jsxs(Fragment, { children: [
+		stated ? null : /* @__PURE__ */ jsx(Status$2, { controller }),
+		/* @__PURE__ */ jsx(Prompt, {
+			connect,
+			controller
+		}),
+		answeredInPlace(controller) ? null : /* @__PURE__ */ jsx(Outcome$2, { controller })
 	] });
 }
-function DefaultActions({ cleanup, connection, provisioning }) {
-	const { capabilities, messages } = useDomainKit();
+function DefaultActions({ connection, onOpenChange, open, provisioning }) {
 	const readOnly = useReadOnly();
-	const icons = useIcons();
+	const { capabilities } = useDomainKit();
 	const connected = connection.state._tag === "Connected";
 	if (readOnly) return null;
-	const hasReceipt = connection.snapshot?.lastReceiptId != null;
-	return /* @__PURE__ */ jsxs(Fragment, { children: [capabilities.includes("provisioning") && connected ? /* @__PURE__ */ jsxs(Fragment, { children: [
-		/* @__PURE__ */ jsx("button", {
-			"data-domainkit-part": "plan-trigger",
-			disabled: provisioning.state._tag === "Planning",
-			onClick: provisioning.plan,
-			type: "button",
-			children: messages.reviewChanges
-		}),
-		/* @__PURE__ */ jsx(Status$1, { controller: provisioning }),
-		/* @__PURE__ */ jsx(Actions, { controller: provisioning }),
-		/* @__PURE__ */ jsx(Outcome$1, { controller: provisioning })
-	] }) : null, capabilities.includes("cleanup") && connected && hasReceipt ? /* @__PURE__ */ jsxs(Fragment, { children: [
-		/* @__PURE__ */ jsxs("button", {
-			"data-domainkit-part": "cleanup-trigger",
-			disabled: cleanup.state._tag === "Planning",
-			onClick: cleanup.plan,
-			type: "button",
-			children: [/* @__PURE__ */ jsx("span", {
-				"aria-hidden": "true",
-				"data-icon": "inline-start",
-				children: icons.close
-			}), messages.cleanUp]
-		}),
-		/* @__PURE__ */ jsx(Status$3, { controller: cleanup }),
-		/* @__PURE__ */ jsx(Actions$1, { controller: cleanup }),
-		/* @__PURE__ */ jsx(Outcome$3, { controller: cleanup })
-	] }) : null] });
+	if (!capabilities.includes("provisioning") || !connected) return null;
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Dialog$1, {
+		controller: provisioning,
+		onOpenChange,
+		open
+	}), open ? null : /* @__PURE__ */ jsx(Outcome$1, { controller: provisioning })] });
 }
 /**
 * The whole lifecycle for one domain: connect, review, apply, observe, clean up. The flow renders
 * only what the transport declares, and every part of it is a slot with a default. It adds no
 * layout containers of its own, so a host's grid can place the slot output directly.
 */
-function Flow({ domain, onApplied, onCleaned, readOnly, requirements, returnTo, slots = {}, ...props }) {
+function Flow({ connect = "detected", domain, onApplied, onCleaned, onState, readOnly, requirements, returnTo, review = "auto", slots = {}, ...props }) {
 	const { capabilities } = useDomainKit();
 	const inherited = useReadOnly();
 	const connection = useController$2({
@@ -2382,17 +3198,72 @@ function Flow({ domain, onApplied, onCleaned, readOnly, requirements, returnTo,
 		requirements
 	});
 	const readiness = verification.readiness;
-	return usePart("div", props, {
-		connection: connection.state._tag,
-		provisioning: provisioning.state._tag
-	}, {
+	const status = connection.state._tag;
+	const planning = provisioning.state._tag;
+	const [reviewing, setReviewing] = useState(false);
+	const [reviewed, setReviewed] = useState(domain);
+	if (reviewed !== domain) {
+		setReviewed(domain);
+		setReviewing(false);
+	}
+	const established = connection.established;
+	const answered = useRef(established);
+	const buildPlan = provisioning.plan;
+	useEffect(() => {
+		if (answered.current === established) return;
+		answered.current = established;
+		if (review === "manual") return;
+		buildPlan();
+		setReviewing(true);
+	}, [
+		buildPlan,
+		established,
+		review
+	]);
+	const connected = holdsConnection(connection);
+	const offering$1 = offering(connection, connect);
+	const provider = connection.snapshot?.provider ?? hostProvider(connection)?.id ?? null;
+	const receipt = connection.snapshot?.lastReceiptId ?? null;
+	const state = flowState({
+		connected,
+		offering: offering$1,
+		planning,
+		provider,
+		receipt,
+		status
+	});
+	const announce = useRef(onState);
+	useEffect(() => {
+		announce.current = onState;
+	});
+	useEffect(() => {
+		announce.current?.(flowState({
+			connected,
+			offering: offering$1,
+			planning,
+			provider,
+			receipt,
+			status
+		}));
+	}, [
+		connected,
+		offering$1,
+		planning,
+		provider,
+		receipt,
+		status
+	]);
+	return usePart("div", props, state, {
 		children: /* @__PURE__ */ jsxs(ReadOnly, {
 			value: readOnly ?? inherited,
 			children: [
 				!capabilities.includes("connection") ? null : slots.connection === void 0 ? /* @__PURE__ */ jsx(DefaultConnection, {
+					connect,
 					controller: connection,
-					domain
+					domain,
+					...onCleaned === void 0 ? {} : { onCleaned }
 				}) : slots.connection({
+					connect,
 					controller: connection,
 					domain
 				}),
@@ -2413,6 +3284,8 @@ function Flow({ domain, onApplied, onCleaned, readOnly, requirements, returnTo,
 					cleanup,
 					connection,
 					domain,
+					onOpenChange: setReviewing,
+					open: reviewing,
 					provisioning
 				}) : slots.actions({
 					cleanup,
@@ -2438,6 +3311,6 @@ const transport = Testing.transport;
 //#region src/failure.ts
 const Failure = Data.taggedEnum();
 //#endregion
-export { cleanup_exports as Cleanup, connect_exports as Connect, domain_exports as Domain, domain_kit_exports as DomainKit, Event, Failure, messages_exports as Messages, operations_exports as Operations, provider_exports as Provider, provision_exports as Provision, records_exports as Records, testing_exports as Testing, theme_exports as Theme, verify_exports as Verify, defaultIcons, useIcons };
+export { cleanup_exports as Cleanup, connect_exports as Connect, domain_exports as Domain, domain_kit_exports as DomainKit, Event, Failure, messages_exports as Messages, operations_exports as Operations, outcome_exports as Outcome, provider_exports as Provider, provision_exports as Provision, records_exports as Records, testing_exports as Testing, theme_exports as Theme, verify_exports as Verify, defaultIcons, useIcons };
 
 //# sourceMappingURL=index.mjs.map