@domainkit/react 0.10.0 → 0.11.0

package/dist/index.mjs

@@ -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", {
@@ -161,14 +165,23 @@ const english = {
 	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: "Need an account id?",
+	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",
@@ -196,7 +209,9 @@ const english = {
 	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",
@@ -313,10 +328,7 @@ const english = {
 		description: reason.message,
 		title: reason.field === void 0 ? "Check what you entered" : `Check the ${humanize(reason.field).toLowerCase()}`
 	}),
-	unauthenticated: (_reason, context) => ({
-		description: "Check the token can read and edit DNS for this zone, then try again.",
-		title: `${named(context.provider)} didn't accept this token`
-	}),
+	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"
@@ -403,7 +415,7 @@ const outcome = (error, catalog, 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 `${title}. ${description}`;
+	return description === void 0 ? `${title}.` : `${title}. ${description}`;
 };
 //#endregion
 //#region src/theme.ts
@@ -939,16 +951,17 @@ function Title(props) {
 		"data-domainkit-part": "outcome-title"
 	});
 }
-/** What to do about it, from the catalog. */
+/** What to do about it, from the catalog. An outcome whose title says everything renders none. */
 function Description(props) {
 	const { description, layout, tone } = useOutcome();
-	return usePart("p", props, {
+	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
@@ -1307,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 "";
 		}
 	};
@@ -1324,28 +1337,32 @@ function Status$4({ controller, kind, ...props }) {
 	});
 }
 /**
-* The failure, or a receipt that only partly landed: media, title, description, and the retry the
-* flow allows. Children replace the composition and keep the binding.
+* 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 partial = state._tag === "Applied" && state.receipt.status === "partial";
 	const retryPart = kind === "provisioning" ? "provisioning-retry" : "cleanup-retry";
-	if (state._tag !== "Failure" && !partial) return null;
-	const words = state._tag === "Failure" ? outcome(state.error, messages) : {
+	if (state._tag !== "Failure" && state._tag !== "Applied") return null;
+	const partial = state._tag === "Applied" && state.receipt.status === "partial";
+	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,
+			description: words.description ?? "",
 			layout: props.layout ?? "card",
 			retry: readOnly || state._tag !== "Failure" ? null : controller.retry,
 			retryPart,
 			title: words.title,
-			tone: state._tag === "Failure" ? "danger" : "warning"
+			tone: state._tag === "Failure" ? "danger" : partial ? "warning" : "success"
 		},
 		children: /* @__PURE__ */ jsx(Root$6, {
 			...props,
@@ -1353,9 +1370,13 @@ function Outcome$4({ children, controller, kind, ...props }) {
 		})
 	});
 }
+/** 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();
@@ -1363,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 }) {
@@ -1415,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,
@@ -1488,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
 						})]
@@ -1580,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
@@ -1616,6 +1656,7 @@ function Mark({ provider, ...props }) {
 var connect_exports = /* @__PURE__ */ __exportAll({
 	Card: () => Card,
 	Dialog: () => Dialog$2,
+	DisconnectDialog: () => DisconnectDialog,
 	Flow: () => Flow$2,
 	Form: () => Form,
 	Outcome: () => Outcome$2,
@@ -1624,10 +1665,32 @@ var connect_exports = /* @__PURE__ */ __exportAll({
 	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) => {
@@ -1670,6 +1733,7 @@ function useController$2({ domain, returnTo }) {
 	});
 	const lastCommand = useRef(null);
 	const attempted = useRef(null);
+	const [established, setEstablished] = useState(0);
 	const [inspected, setInspected] = useState(domain);
 	if (inspected !== domain) {
 		setInspected(domain);
@@ -1719,6 +1783,7 @@ function useController$2({ domain, returnTo }) {
 					domain,
 					snapshot
 				};
+				if (tookReturn(domain) && snapshot.status === "connected") setEstablished((count) => count + 1);
 				setState(settled(snapshot, discovery));
 			}
 		});
@@ -1738,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,
@@ -1746,6 +1812,7 @@ function useController$2({ domain, returnTo }) {
 				}));
 				return;
 			case "Redirect":
+				markReturn(domain);
 				setState(State$1.Redirecting({ url: result.authorizationUrl }));
 				navigate(result.authorizationUrl);
 				return;
@@ -1766,7 +1833,10 @@ function useController$2({ domain, returnTo }) {
 		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
@@ -1825,7 +1895,10 @@ function useController$2({ domain, returnTo }) {
 		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: () => {
@@ -1880,7 +1953,9 @@ function useController$2({ domain, returnTo }) {
 		connect,
 		detach,
 		disconnect,
-		discovery: state._tag === "Disconnected" || state._tag === "Failure" ? 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,
@@ -1902,6 +1977,12 @@ function Root$2({ controller, ...props }) {
 */
 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.
 */
@@ -1929,7 +2010,7 @@ function Outcome$2({ children, controller, ...props }) {
 	});
 	return /* @__PURE__ */ jsx(Provider, {
 		value: {
-			description: words.description,
+			description: words.description ?? "",
 			layout: props.layout ?? "card",
 			retry: readOnly ? null : controller.retry,
 			retryPart: "connection-retry",
@@ -1945,7 +2026,8 @@ function Outcome$2({ children, controller, ...props }) {
 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;
@@ -1978,9 +2060,10 @@ const rejected = (reason, fields) => {
 };
 /**
 * 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 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 }) {
+function TokenField({ controller, docsUrl, field, invalid, onEnter, value }) {
 	const { messages } = useDomainKit();
 	const icons = useIcons();
 	const id = useId();
@@ -2003,8 +2086,10 @@ function TokenField({ controller, docsUrl, field, invalid }) {
 				"data-domainkit-part": "field-input",
 				id,
 				name: field.name,
+				onChange: (event) => onEnter(event.target.value),
 				required: field.required,
-				type: field.secret ? "password" : "text"
+				type: field.secret ? "password" : "text",
+				value
 			}),
 			docsUrl === null ? null : /* @__PURE__ */ jsxs("a", {
 				"data-domainkit-part": "field-description",
@@ -2032,8 +2117,10 @@ function TokenField({ controller, docsUrl, field, invalid }) {
 * 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 [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;
@@ -2055,39 +2142,50 @@ function Method({ controller, method, provider }) {
 	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
+		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: [
 			required.map(render),
-			optional.length === 0 ? null : /* @__PURE__ */ jsxs("details", {
+			optional.length === 0 ? null : /* @__PURE__ */ jsxs(Collapsible.Root, {
 				"data-domainkit-part": "more-options",
-				open: optional.some((field) => field.name === answered) || void 0,
-				children: [/* @__PURE__ */ jsx("summary", {
+				"data-state": showMore ? "open" : "closed",
+				onOpenChange: setMore,
+				open: showMore,
+				children: [/* @__PURE__ */ jsxs(Collapsible.Trigger, {
 					"data-domainkit-part": "more-options-trigger",
-					children: messages.moreOptions
-				}), optional.map(render)]
+					children: [messages.moreOptions, /* @__PURE__ */ jsx("span", {
+						"aria-hidden": "true",
+						"data-icon": "inline-end",
+						children: icons.chevron
+					})]
+				}), /* @__PURE__ */ jsx(Collapsible.Panel, {
+					"data-domainkit-part": "more-options-panel",
+					children: optional.map(render)
+				})]
 			}),
 			failed && answered === null ? /* @__PURE__ */ jsx(Outcome$2, {
 				controller,
@@ -2103,15 +2201,33 @@ function Method({ controller, method, provider }) {
 	});
 }
 /**
-* One provider's methods. With a heading it is a disclosure the customer opens; the provider a
-* narrowed dialog is about carries no heading, because the dialog title already names it.
+* 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, onOpen, open, provider }) {
-	const methods = provider.methods.map((method) => /* @__PURE__ */ jsx(Method, {
+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,
-		provider
-	}, `${provider.id}:${method.kind}`));
+		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,
@@ -2129,10 +2245,26 @@ function Authentication({ controller, onOpen, open, provider }) {
 * 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) => ({
@@ -2142,13 +2274,17 @@ function Form({ controller, ...props }) {
 	const resolved = discovery !== null && discovery._tag === "Resolved" ? discovery : null;
 	const reusable = snapshot?.reusable ?? [];
 	const providers = controller.providers;
-	const host = hostProvider(controller);
-	const others = providers.filter((provider) => provider.id !== host?.id);
+	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
+		provider,
+		typing: typing === provider.id,
+		values: valuesFor(provider.id)
 	}, provider.id);
 	return usePart("div", props, { status: state._tag }, {
 		children: /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -2196,16 +2332,19 @@ function Form({ controller, ...props }) {
 			providers.length === 0 ? /* @__PURE__ */ jsx("p", {
 				"data-domainkit-part": "target-unavailable",
 				children: messages.noProviders
-			}) : host === null ? others.map((provider) => authentication(provider, opened === null ? provider.id === others[0]?.id : opened === provider.id)) : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Authentication, {
+			}) : 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
-			}), others.length === 0 ? null : /* @__PURE__ */ jsxs("details", {
-				"data-domainkit-part": "other-providers",
-				children: [/* @__PURE__ */ jsx("summary", {
-					"data-domainkit-part": "other-providers-trigger",
-					children: messages.useAnotherProvider
-				}), others.map((provider) => authentication(provider, opened === provider.id))]
+				provider: host,
+				typing: typing === host.id,
+				values: valuesFor(host.id)
 			})] })
 		] }),
 		"data-domainkit-part": "connection-form"
@@ -2214,19 +2353,26 @@ 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 state = controller.state;
 	const busy = state._tag === "Submitting";
 	const unattributed = state._tag === "Failure" && !answeredInPlace(controller);
 	const snapshot = controller.snapshot;
+	const [chosen, setChosen] = useState(null);
 	const attached = snapshot?.provider ?? null;
 	const host = hostProvider(controller);
-	const named = attached === null ? host?.name ?? null : displayName(controller, attached);
+	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 });
+	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",
@@ -2264,20 +2410,55 @@ function Dialog$2({ children, controller, render, title, trigger }) {
 				children: [
 					/* @__PURE__ */ jsxs("div", {
 						"data-domainkit-part": "dialog-header",
-						children: [/* @__PURE__ */ jsxs("div", {
-							"data-domainkit-part": "dialog-heading",
-							children: [/* @__PURE__ */ jsx(Dialog.Title, {
-								"data-domainkit-part": "dialog-title",
-								children: heading
-							}), /* @__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: "×"
-						})]
+						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",
@@ -2300,6 +2481,21 @@ function Dialog$2({ children, controller, render, title, trigger }) {
 	});
 }
 /**
+* 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.
@@ -2309,9 +2505,6 @@ function Prompt({ connect = "detected", controller, ...props }) {
 	const readOnly = useReadOnly();
 	const state = controller.state;
 	const host = hostProvider(controller);
-	const discovery = controller.discovery;
-	const offers = host !== null || discovery !== null && discovery._tag !== "NotFound" || (controller.snapshot?.reusable.length ?? 0) > 0;
-	const inFlight = state._tag === "Submitting" || state._tag === "Redirecting" || state._tag === "SelectionRequired" || state._tag === "Reconnect";
 	const element = usePart("div", props, { status: state._tag }, {
 		children: /* @__PURE__ */ jsxs(Fragment, { children: [host === null ? null : /* @__PURE__ */ jsxs("div", {
 			"data-domainkit-part": "host-identity",
@@ -2330,38 +2523,242 @@ function Prompt({ connect = "detected", controller, ...props }) {
 		"data-domainkit-part": "connect-prompt",
 		"data-host": host?.id
 	});
-	if (!inFlight && !offers && connect !== "always") return null;
+	if (!offering(controller, connect)) return null;
 	if (readOnly && host === null) return null;
 	return element;
 }
-/** A connected domain: which provider holds it, and how to let it go. */
-function Card({ controller, ...props }) {
+/** 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",
+						children: [/* @__PURE__ */ jsxs("div", {
+							"data-domainkit-part": "dialog-heading",
+							children: [/* @__PURE__ */ jsx(Dialog.Title, {
+								"data-domainkit-part": "dialog-title",
+								children: heading
+							}), /* @__PURE__ */ jsx(Dialog.Description, {
+								"data-domainkit-part": "dialog-description",
+								children: messages.disconnectConsent(snapshot?.domain ?? "", named)
+							})]
+						}), 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: [
+							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 })
+						]
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						"data-domainkit-part": "dialog-footer",
+						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, 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 })
 		] }),
@@ -2369,16 +2766,18 @@ function Card({ controller, ...props }) {
 	});
 }
 /** Connection on its own: the card once connected, the prompt until then. */
-function Flow$2({ connect, domain, returnTo, ...props }) {
+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(Prompt, {
+		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 })] })
@@ -2462,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
@@ -2666,7 +3068,7 @@ function Outcome({ children, controller, ...props }) {
 	const words = outcome(state.error, messages);
 	return /* @__PURE__ */ jsx(Provider, {
 		value: {
-			description: words.description,
+			description: words.description ?? "",
 			layout: props.layout ?? "card",
 			retry: controller.retry,
 			retryPart: "verification-retry",
@@ -2723,9 +3125,25 @@ function Status({ controller, render, ...props }) {
 //#endregion
 //#region src/domain.tsx
 var domain_exports = /* @__PURE__ */ __exportAll({ Flow: () => Flow });
-function DefaultConnection({ connect, controller }) {
-	const stated = controller.state._tag === "Disconnected" && hostProvider(controller) !== null;
-	return controller.state._tag === "Connected" ? /* @__PURE__ */ jsx(Card, { controller }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+/** 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,
@@ -2734,47 +3152,24 @@ function DefaultConnection({ 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({ connect = "detected", 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({
@@ -2803,17 +3198,70 @@ function Flow({ connect = "detected", domain, onApplied, onCleaned, readOnly, re
 		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,
@@ -2836,6 +3284,8 @@ function Flow({ connect = "detected", domain, onApplied, onCleaned, readOnly, re
 					cleanup,
 					connection,
 					domain,
+					onOpenChange: setReviewing,
+					open: reviewing,
 					provisioning
 				}) : slots.actions({
 					cleanup,