@domainkit/react 0.3.1 → 0.5.0

package/dist/index.mjs

@@ -1,14 +1,17 @@
 import { t as __exportAll } from "./rolldown-runtime-D7D4PA-g.mjs";
-import { Dialog } from "@base-ui/react/dialog";
+import { AlertDialog } from "@base-ui/react/alert-dialog";
 import { RegistryProvider, useAtomSet, useAtomValue } from "@effect/atom-react";
-import { Transport } from "domainkit";
+import { DomainName, Transport } from "domainkit";
 import * as Data from "effect/Data";
 import * as Effect from "effect/Effect";
 import * as Atom from "effect/unstable/reactivity/Atom";
-import { createContext, useCallback, useContext, useEffect, useId, useMemo, useRef, useState, useSyncExternalStore } from "react";
+import { createContext, useCallback, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
 import { useRender } from "@base-ui/react/use-render";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Dialog } from "@base-ui/react/dialog";
 import * as AsyncResult from "effect/unstable/reactivity/AsyncResult";
+import { Menu } from "@base-ui/react/menu";
+import { Popover } from "@base-ui/react/popover";
 //#region src/atom.ts
 const Failure = Data.taggedEnum();
 const failureFromError = (error) => Failure.Failure({
@@ -96,12 +99,12 @@ const english = {
 	applyCleanup: "Remove records",
 	applyDns: "Add records",
 	applyingDns: "Adding records…",
+	authenticationAlternative: "or",
 	automaticUnavailable: "Automatic connection is not available for this domain",
 	cancel: "Cancel",
 	checkAgain: "Check again",
 	checkingDns: "Checking DNS…",
 	checkDns: "Check DNS",
-	cleanupComplete: "DNS cleanup complete",
 	cleanupConsent: "Only records proven by the apply receipt will be deleted.",
 	cleanupPartial: "Some DNS records could not be deleted. Review and retry safely.",
 	cleaningDns: "Removing records…",
@@ -112,20 +115,25 @@ const english = {
 	close: "Close",
 	detectingProvider: "Detecting DNS provider…",
 	disconnectDomain: "Disconnect",
+	disconnectConsent: "This domain will be detached from the provider. Existing DNS records will be preserved.",
 	disconnecting: "Disconnecting…",
-	domainDisconnected: "Domain disconnected. DNS records were preserved.",
+	detaching: "Detaching domain…",
+	disconnectTitle: (provider) => `Detach ${provider}?`,
+	domainDisconnected: "Domain detached. DNS records were preserved.",
 	dialogDescription: (domain) => `Authorize DNS changes for ${domain}.`,
 	dialogTitle: (provider) => `Connect ${provider}`,
 	openingAuthorization: "Opening provider authorization…",
+	moreActions: "More connection actions",
 	planConsent: "Review the exact DNS operations before approving this plan.",
 	planningCleanup: "Preparing cleanup…",
 	planningDns: "Preparing DNS changes…",
-	recordsApplied: "DNS changes applied",
 	recordsPartiallyApplied: "Some DNS changes failed. Review and retry safely.",
 	reviewCleanup: "Remove records",
 	reviewDns: "Review changes",
 	retry: "Try again",
-	reuseConnection: (connection) => `Use ${connection}`,
+	existingConnection: "Existing provider connection",
+	targetUnavailable: "No provider targets are available for this connection.",
+	attachTarget: (target) => `Use ${target}`,
 	tokenLabel: "API token"
 };
 const merge = (overrides = {}) => ({
@@ -138,9 +146,11 @@ var theme_exports = /* @__PURE__ */ __exportAll({ toStyle: () => toStyle });
 const variables = {
 	accent: "--domainkit-accent",
 	accentContrast: "--domainkit-accent-contrast",
+	backdrop: "--domainkit-backdrop",
 	background: "--domainkit-background",
 	border: "--domainkit-border",
 	danger: "--domainkit-danger",
+	dangerContrast: "--domainkit-danger-contrast",
 	fill: "--domainkit-fill",
 	fontFamily: "--domainkit-font-family",
 	muted: "--domainkit-muted",
@@ -181,8 +191,17 @@ 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, portalContainer = null, theme, transport, ...props }) {
+function Root$6({ children, colorScheme = "inherit", icons, marks = {}, messages, navigate = navigateInBrowser, onEvent, portalContainer = null, theme, transport, ...props }) {
 	const runtime = useMemo(() => Atom.runtime(transport), [transport]);
+	const onEventRef = useRef(onEvent);
+	useLayoutEffect(() => {
+		onEventRef.current = onEvent;
+	}, [onEvent]);
+	const emit = useCallback((event) => {
+		try {
+			onEventRef.current?.(event);
+		} catch {}
+	}, []);
 	const themeStyle = toStyle(theme);
 	const resolvedPortalContainer = usePortalContainer(portalContainer);
 	const portalContainerRef = useMemo(() => ({ current: resolvedPortalContainer }), [resolvedPortalContainer]);
@@ -195,6 +214,7 @@ function Root$6({ children, colorScheme = "inherit", icons, marks = {}, messages
 	return /* @__PURE__ */ jsx(RegistryProvider, { children: /* @__PURE__ */ jsx(Context.Provider, {
 		value: {
 			colorScheme,
+			emit,
 			marks,
 			messages: merge(messages),
 			navigate,
@@ -214,6 +234,10 @@ function useDomainKit() {
 	return value;
 }
 //#endregion
+//#region src/lifecycle.ts
+var lifecycle_exports = /* @__PURE__ */ __exportAll({ Event: () => Event });
+const Event = Data.taggedEnum();
+//#endregion
 //#region src/operations.tsx
 var operations_exports = /* @__PURE__ */ __exportAll({
 	Item: () => Item,
@@ -288,52 +312,74 @@ var cleanup_exports = /* @__PURE__ */ __exportAll({
 });
 const State$3 = Data.taggedEnum();
 const Command$3 = Data.taggedEnum();
-function useModel$3(connection, receiptId) {
-	const { runtime } = useDomainKit();
+function useModel$3(connection, receiptId, onCleaned) {
+	const { emit, runtime } = useDomainKit();
+	const onCleanedRef = useRef(onCleaned);
+	onCleanedRef.current = onCleaned;
 	return useMemo(() => {
 		const state = Atom.make(State$3.Idle());
 		return {
 			command: runtime.fn()((command, get) => {
+				const current = get(state);
 				if (command._tag === "Dismiss") {
+					if (current._tag === "Planning" || current._tag === "Cleaning") return Effect.void;
 					get.set(state, State$3.Idle());
 					return Effect.void;
 				}
 				if (command._tag === "Plan") {
+					if (current._tag === "Planning" || current._tag === "Cleaning") return Effect.void;
 					get.set(state, State$3.Planning());
 					return Effect.flatMap(Transport.Service, (transport) => transport.cleanup.plan({
-						connectionId: connection.connectionId,
-						domain: connection.domain,
+						attachmentId: connection.attachment.id,
+						domain: connection.attachment.domain,
 						receiptId
 					})).pipe(Effect.tap((plan) => Effect.sync(() => get.set(state, State$3.Review({ plan })))), Effect.catch((error) => Effect.sync(() => get.set(state, failureFromError(error)))), Effect.asVoid);
 				}
-				const current = get(state);
 				if (current._tag !== "Review" || current.plan.operations.some((operation) => operation._tag === "Blocked")) return Effect.void;
 				const plan = current.plan;
 				get.set(state, State$3.Cleaning({ plan }));
 				return Effect.flatMap(Transport.Service, (transport) => transport.cleanup.apply({
-					connectionId: connection.connectionId,
-					domain: connection.domain,
+					attachmentId: connection.attachment.id,
+					domain: connection.attachment.domain,
 					planDigest: plan.digest,
 					receiptId
-				})).pipe(Effect.tap((result) => Effect.sync(() => get.set(state, result._tag === "Cleaned" ? State$3.Cleaned({ result }) : result._tag === "Partial" ? State$3.Partial({ result }) : result))), Effect.catch((error) => Effect.sync(() => get.set(state, failureFromError(error)))), Effect.asVoid);
+				})).pipe(Effect.tap((result) => Effect.sync(() => {
+					if (result._tag === "Cleaned") {
+						get.set(state, State$3.Cleaned({ result }));
+						onCleanedRef.current?.(result);
+						emit(Event.RecordsCleaned({
+							connection,
+							result
+						}));
+					} else if (result._tag === "Partial") {
+						get.set(state, State$3.Partial({ result }));
+						onCleanedRef.current?.(result);
+						emit(Event.RecordsPartiallyCleaned({
+							connection,
+							result
+						}));
+					} else get.set(state, result);
+				})), Effect.catch((error) => Effect.sync(() => get.set(state, failureFromError(error)))), Effect.asVoid);
 			}),
 			state
 		};
 	}, [
-		connection.connectionId,
-		connection.domain,
+		connection.attachment.domain,
+		connection.attachment.id,
+		emit,
 		receiptId,
 		runtime
 	]);
 }
-function useController$3(connection, receiptId) {
-	const model = useModel$3(connection, receiptId);
+function useController$3(connection, receiptId, onCleaned) {
+	const model = useModel$3(connection, receiptId, onCleaned);
 	const state = useAtomValue(model.state);
 	const execute = useAtomSet(model.command);
 	return {
 		apply: () => execute(Command$3.Apply()),
 		dismiss: () => execute(Command$3.Dismiss()),
 		plan: () => execute(Command$3.Plan()),
+		retry: () => execute(Command$3.Plan()),
 		state
 	};
 }
@@ -345,11 +391,6 @@ function Root$4({ status, ...props }) {
 }
 function Outcome$2({ state }) {
 	const { messages } = useDomainKit();
-	if (state._tag === "Cleaned") return /* @__PURE__ */ jsx("p", {
-		"data-domainkit-part": "flow-outcome",
-		"data-tone": "success",
-		children: messages.cleanupComplete
-	});
 	if (state._tag === "Partial" || state._tag === "Failure" || state._tag === "Stale") return /* @__PURE__ */ jsx("p", {
 		"data-domainkit-part": "flow-outcome",
 		"data-tone": "danger",
@@ -358,23 +399,40 @@ function Outcome$2({ state }) {
 	});
 	return null;
 }
-function Dialog$3({ controller }) {
+function Dialog$3({ controller, onOpenChange, onOpenChangeComplete, trigger }) {
 	const { colorScheme, messages, portalContainer, themeStyle } = useDomainKit();
 	const state = controller.state;
-	const plan = state._tag === "Review" || state._tag === "Cleaning" ? state.plan : void 0;
-	return /* @__PURE__ */ jsxs(Dialog.Root, {
-		onOpenChange: (open) => {
-			if (!open) controller.dismiss();
+	const planRef = useRef(void 0);
+	if (state._tag === "Idle") planRef.current = void 0;
+	if (state._tag === "Review" || state._tag === "Cleaning") planRef.current = state.plan;
+	const plan = planRef.current;
+	const busy = state._tag === "Planning" || state._tag === "Cleaning";
+	const open = state._tag !== "Idle" && state._tag !== "Cleaned";
+	return /* @__PURE__ */ jsxs(AlertDialog.Root, {
+		onOpenChange: (nextOpen, eventDetails) => {
+			if (!nextOpen && busy) {
+				eventDetails.cancel();
+				return;
+			}
+			if (!nextOpen) controller.dismiss();
+			onOpenChange?.(nextOpen);
 		},
-		open: plan !== void 0,
-		children: [/* @__PURE__ */ jsx(Dialog.Trigger, {
+		onOpenChangeComplete,
+		open,
+		children: [trigger === null ? null : /* @__PURE__ */ jsx(AlertDialog.Trigger, {
 			"data-domainkit-part": "cleanup-trigger",
-			disabled: state._tag === "Planning" || state._tag === "Cleaning",
+			disabled: state._tag !== "Idle",
 			onClick: () => controller.plan(),
-			children: state._tag === "Planning" ? messages.planningCleanup : messages.reviewCleanup
-		}), plan === void 0 ? null : /* @__PURE__ */ jsxs(Dialog.Portal, {
-			container: portalContainer ?? void 0,
-			children: [/* @__PURE__ */ jsx(Dialog.Backdrop, { "data-domainkit-part": "dialog-backdrop" }), /* @__PURE__ */ jsxs(Dialog.Popup, {
+			...trigger === void 0 ? {} : { render: trigger },
+			children: messages.reviewCleanup
+		}), /* @__PURE__ */ jsxs(AlertDialog.Portal, {
+			container: portalContainer,
+			children: [/* @__PURE__ */ jsx(AlertDialog.Backdrop, {
+				"data-color-scheme": colorScheme,
+				"data-domainkit-part": "dialog-backdrop",
+				"data-domainkit-root": "",
+				style: themeStyle
+			}), /* @__PURE__ */ jsxs(AlertDialog.Popup, {
 				"data-color-scheme": colorScheme,
 				"data-domainkit-part": "cleanup-dialog",
 				"data-domainkit-root": "",
@@ -384,138 +442,108 @@ function Dialog$3({ controller }) {
 						"data-domainkit-part": "dialog-header",
 						children: [/* @__PURE__ */ jsxs("div", {
 							"data-domainkit-part": "dialog-heading",
-							children: [/* @__PURE__ */ jsx(Dialog.Title, {
+							children: [/* @__PURE__ */ jsx(AlertDialog.Title, {
 								"data-domainkit-part": "dialog-title",
 								children: messages.reviewCleanup
-							}), /* @__PURE__ */ jsx(Dialog.Description, {
+							}), /* @__PURE__ */ jsx(AlertDialog.Description, {
 								"data-domainkit-part": "dialog-description",
 								children: messages.cleanupConsent
 							})]
-						}), /* @__PURE__ */ jsx(Dialog.Close, {
+						}), busy ? null : /* @__PURE__ */ jsx(AlertDialog.Close, {
 							"aria-label": messages.close,
 							"data-domainkit-part": "dialog-close",
 							children: "×"
 						})]
 					}),
-					/* @__PURE__ */ jsx("div", {
+					/* @__PURE__ */ jsxs("div", {
 						"data-domainkit-part": "dialog-body",
-						children: /* @__PURE__ */ jsx(List, {
+						children: [plan === void 0 ? /* @__PURE__ */ jsx("p", {
+							"data-domainkit-part": "dialog-progress",
+							role: "status",
+							children: messages.planningCleanup
+						}) : /* @__PURE__ */ jsx(List, {
 							lifecycle: "cleanup",
 							operations: plan.operations
-						})
+						}), /* @__PURE__ */ jsx(Outcome$2, { state })]
 					}),
-					/* @__PURE__ */ jsxs("div", {
+					/* @__PURE__ */ jsx("div", {
 						"data-domainkit-part": "dialog-footer",
-						children: [/* @__PURE__ */ jsx(Dialog.Close, {
+						children: busy ? /* @__PURE__ */ jsx("button", {
+							"data-domainkit-part": "cleanup-apply",
+							disabled: true,
+							type: "button",
+							children: state._tag === "Cleaning" ? messages.cleaningDns : messages.planningCleanup
+						}) : state._tag === "Review" && plan !== void 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(AlertDialog.Close, {
 							"data-domainkit-part": "dialog-cancel",
 							children: messages.cancel
 						}), /* @__PURE__ */ jsx("button", {
 							"data-domainkit-part": "cleanup-apply",
-							disabled: state._tag === "Cleaning" || plan.operations.some((operation) => operation._tag === "Blocked"),
+							disabled: plan.operations.some((operation) => operation._tag === "Blocked"),
 							onClick: () => controller.apply(),
 							type: "button",
-							children: state._tag === "Cleaning" ? messages.cleaningDns : messages.applyCleanup
-						})]
+							children: messages.applyCleanup
+						})] }) : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(AlertDialog.Close, {
+							"data-domainkit-part": "dialog-cancel",
+							children: messages.close
+						}), /* @__PURE__ */ jsx("button", {
+							"data-domainkit-part": "cleanup-retry",
+							onClick: () => controller.retry(),
+							type: "button",
+							children: messages.retry
+						})] })
 					})
 				]
 			})]
 		})]
 	});
 }
-function Flow$3({ connection, receiptId, ...props }) {
-	const controller = useController$3(connection, receiptId);
+function Flow$3({ connection, onCleaned, receiptId, trigger, ...props }) {
+	const controller = useController$3(connection, receiptId, onCleaned);
 	const state = controller.state;
-	return /* @__PURE__ */ jsxs(Root$4, {
+	return /* @__PURE__ */ jsx(Root$4, {
 		status: state._tag,
 		...props,
-		children: [/* @__PURE__ */ jsx(Outcome$2, { state }), /* @__PURE__ */ jsx(Dialog$3, { controller })]
+		children: /* @__PURE__ */ jsx(Dialog$3, {
+			controller,
+			...trigger === void 0 ? {} : { trigger }
+		})
 	});
 }
 //#endregion
 //#region src/provider.tsx
 var provider_exports = /* @__PURE__ */ __exportAll({ Mark: () => Mark });
-const logoHosts = {
-	aws: "amazonaws.com",
-	bluehost: "bluehost.com",
-	cloudflare: "cloudflare.com",
-	digitalocean: "digitalocean.com",
-	dnsimple: "dnsimple.com",
-	dreamhost: "dreamhost.com",
-	dynadot: "dynadot.com",
-	gandi: "gandi.net",
-	godaddy: "godaddy.com",
-	google: "cloud.google.com",
-	googlecloud: "cloud.google.com",
-	googleclouddns: "cloud.google.com",
-	hostgator: "hostgator.com",
-	hostinger: "hostinger.com",
-	hover: "hover.com",
-	ionos: "ionos.com",
-	namecheap: "namecheap.com",
-	namecom: "name.com",
-	netlify: "netlify.com",
-	ns1: "ns1.com",
-	ovh: "ovh.com",
-	porkbun: "porkbun.com",
-	spaceship: "spaceship.com",
-	squarespace: "squarespace.com",
-	vercel: "vercel.com"
-};
 const logoKey = (providerId) => providerId.trim().toLowerCase().replace(/[^a-z0-9]+/g, "");
-const logoHost = (providerId) => logoHosts[logoKey(providerId)];
 const letterMark = (provider) => provider.name.trim().charAt(0).toUpperCase() || "?";
-/** Official AWS architecture glyph (white "53" in nested circles). */
-const route53Glyph = "M48.692,40.6795109 C49.431,41.3627732 49.801,42.2781246 49.801,43.4275659 C49.801,44.678046 49.351,45.6764293 48.452,46.4227159 C47.552,47.1700028 46.343,47.543146 44.826,47.543146 C43.627,47.543146 42.44,47.2870477 41.266,46.7768518 L41.266,45.2452638 C42.657,45.7054405 43.843,45.9345284 44.826,45.9345284 C45.796,45.9345284 46.542,45.7174451 47.065,45.2842788 C47.588,44.8501121 47.849,44.2308744 47.849,43.4275659 C47.849,41.8829729 46.874,41.1106764 44.921,41.1106764 C44.309,41.1106764 43.703,41.1426887 43.103,41.2057129 L43.103,39.9432282 L47.123,35.5585448 L41.458,35.5585448 L41.458,33.9889422 L49.247,33.9889422 L49.247,35.5015229 L45.304,39.6751253 C45.369,39.6621203 45.431,39.656118 45.496,39.656118 L45.687,39.656118 C46.951,39.656118 47.952,39.9972489 48.692,40.6795109 M37.574,40.3453826 C38.351,41.0726618 38.74,42.0740463 38.74,43.349536 C38.74,44.6010165 38.288,45.6124048 37.381,46.3847013 C36.475,47.1569978 35.283,47.543146 33.803,47.543146 C32.503,47.543146 31.284,47.2870477 30.148,46.7768518 L30.148,45.2452638 C31.564,45.7054405 32.776,45.9345284 33.784,45.9345284 C34.754,45.9345284 35.497,45.7154443 36.013,45.2742749 C36.53,44.834106 36.789,44.1998624 36.789,43.3695437 C36.789,42.4631957 36.546,41.8059434 36.061,41.3977867 C35.576,40.9896299 34.785,40.7845512 33.688,40.7845512 C32.897,40.7845512 31.909,40.8495762 30.722,40.976625 L30.722,39.7131399 L31.086,33.9889422 L38.071,33.9889422 L38.071,35.5585448 L32.693,35.5585448 L32.444,39.4450369 C33.146,39.3179882 33.777,39.2539636 34.338,39.2539636 C35.716,39.2539636 36.795,39.617103 37.574,40.3453826 M51.957,54.37777 C47.103,55.250105 42.852,57.2268639 40,58.8374822 C37.147,57.2268639 32.896,55.250105 28.043,54.37777 C26.677,54.1326759 19.869,52.7111302 19.869,48.7756192 C19.869,46.951919 20.522,45.7424547 21.776,43.5826255 C23.274,40.9996338 25.138,37.7843994 25.138,33.1556222 C25.138,29.8473521 24.271,26.6751342 22.559,23.7149977 C22.76,23.4669025 22.965,23.2158061 23.171,22.9627089 C25.707,24.2301955 28.347,24.8724421 31.031,24.8724421 C34.311,24.8724421 37.325,24.0111114 40,22.3114589 C42.674,24.0111114 45.688,24.8724421 48.968,24.8724421 C51.652,24.8724421 54.293,24.2301955 56.829,22.9627089 C57.034,23.2158061 57.239,23.4669025 57.44,23.7149977 C55.728,26.6751342 54.861,29.8473521 54.861,33.1556222 C54.861,37.7843994 56.725,40.9996338 58.226,43.586627 C59.477,45.7424547 60.13,46.951919 60.13,48.7756192 C60.13,52.7111302 53.322,54.1326759 51.957,54.37777 M56.861,33.1556222 C56.861,29.9974097 57.752,26.9702475 59.507,24.1581679 C59.735,23.7950284 59.706,23.3278491 59.434,22.9957216 C58.926,22.3734827 58.393,21.7182311 57.867,21.0669811 C57.562,20.6898363 57.032,20.5857963 56.606,20.8198862 C54.143,22.1814089 51.574,22.8716739 48.968,22.8716739 C45.824,22.8716739 43.077,22.0263494 40.569,20.2886823 C40.227,20.0515912 39.772,20.0515912 39.43,20.2886823 C36.922,22.0263494 34.175,22.8716739 31.031,22.8716739 C28.425,22.8716739 25.856,22.1814089 23.393,20.8198862 C22.968,20.5857963 22.437,20.6898363 22.132,21.0669811 C21.606,21.7182311 21.073,22.3734827 20.565,22.9957216 C20.294,23.3278491 20.264,23.7950284 20.492,24.1581679 C22.248,26.9702475 23.138,29.9974097 23.138,33.1556222 C23.138,37.2461927 21.423,40.2023277 20.045,42.581241 C18.695,44.9041328 17.869,46.4467251 17.869,48.7756192 C17.869,54.1646882 25.385,55.9343677 27.689,56.3475263 C32.549,57.2208616 36.793,59.2806524 39.497,60.8542565 C39.652,60.9452915 39.826,60.9903088 40,60.9903088 C40.173,60.9903088 40.347,60.9452915 40.503,60.8542565 C43.207,59.2806524 47.45,57.2208616 52.31,56.3475263 C54.614,55.9343677 62.13,54.1646882 62.13,48.7756192 C62.13,46.4467251 61.304,44.9041328 59.954,42.5782399 C58.576,40.2023277 56.861,37.2461927 56.861,33.1556222 M52.994,60.1569888 C46.863,61.2594121 41.723,64.556678 40,65.7641416 C38.276,64.556678 33.136,61.2594121 27.005,60.1569888 C14.937,57.9891566 14,50.8974338 14,48.7756192 C14,45.2852792 15.371,42.9233724 16.697,40.6374948 C17.961,38.4596586 19.268,36.2067937 19.268,33.1556222 C19.268,28.3357718 16.485,24.9314648 15.112,23.5459328 C16.556,21.7892584 20.204,17.3415508 22.003,15.0236609 C24.729,17.5966487 27.898,19.0001876 31.031,19.0001876 C34.509,19.0001876 37.385,17.5846441 40,14.5644846 C42.614,17.5846441 45.49,19.0001876 48.968,19.0001876 C52.101,19.0001876 55.27,17.5966487 57.997,15.0236609 C59.796,17.3415508 63.443,21.7892584 64.887,23.5459328 C63.514,24.9314648 60.731,28.3357718 60.731,33.1556222 C60.731,36.2067937 62.039,38.4596586 63.302,40.6374948 C64.629,42.9233724 66,45.2852792 66,48.7756192 C66,50.8974338 65.062,57.9891566 52.994,60.1569888 M65.032,39.6341095 C63.797,37.5052922 62.731,35.6675867 62.731,33.1556222 C62.731,27.867592 66.847,24.4472789 66.887,24.4152666 C67.094,24.2472021 67.226,24.0031083 67.254,23.7370062 C67.28,23.470904 67.2,23.2058022 67.03,22.9997231 C66.963,22.9196924 60.408,14.9726413 58.906,12.9138509 C58.73,12.6727583 58.457,12.5227007 58.159,12.5046938 C57.86,12.4826853 57.572,12.601731 57.368,12.8198148 C54.848,15.5148495 51.866,16.9994194 48.968,16.9994194 C45.764,16.9994194 43.244,15.5718713 40.794,12.3706423 C40.415,11.8764526 39.585,11.8764526 39.206,12.3706423 C36.755,15.5718713 34.235,16.9994194 31.031,16.9994194 C28.133,16.9994194 25.151,15.5148495 22.631,12.8198148 C22.427,12.601731 22.137,12.4776834 21.84,12.5046938 C21.543,12.5227007 21.269,12.6727583 21.093,12.9138509 C19.591,14.9726413 13.036,22.9196924 12.969,22.9997231 C12.8,23.2058022 12.72,23.470904 12.747,23.7360058 C12.773,24.0011076 12.904,24.2452013 13.11,24.4132658 C13.152,24.4472789 17.268,27.867592 17.268,33.1556222 C17.268,35.6675867 16.202,37.5052922 14.967,39.6341095 C13.576,42.0310298 12,44.7470725 12,48.7756192 C12,55.487196 17.477,60.4781121 26.652,62.1267451 C33.559,63.3682217 39.334,67.7489036 39.391,67.7939209 C39.57,67.9309735 39.785,68 40,68 C40.214,68 40.429,67.9309735 40.609,67.7929205 C40.667,67.7489036 46.422,63.3712229 53.347,62.1267451 C62.522,60.4781121 68,55.487196 68,48.7756192 C68,44.7470725 66.423,42.0310298 65.032,39.6341095";
-function Route53Mark() {
-	const gradientId = `dk-r53-${useId().replaceAll(":", "")}`;
+function CloudflareMark() {
 	return /* @__PURE__ */ jsxs("svg", {
 		"aria-hidden": "true",
-		viewBox: "0 0 80 80",
-		children: [
-			/* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("linearGradient", {
-				id: gradientId,
-				x1: "0%",
-				x2: "100%",
-				y1: "100%",
-				y2: "0%",
-				children: [/* @__PURE__ */ jsx("stop", {
-					offset: "0%",
-					stopColor: "#4D27A8"
-				}), /* @__PURE__ */ jsx("stop", {
-					offset: "100%",
-					stopColor: "#A166FF"
-				})]
-			}) }),
-			/* @__PURE__ */ jsx("rect", {
-				fill: `url(#${gradientId})`,
-				height: "80",
-				width: "80"
-			}),
-			/* @__PURE__ */ jsx("path", {
-				d: route53Glyph,
-				fill: "#fff"
-			})
-		]
+		viewBox: "0 0 48 32",
+		children: [/* @__PURE__ */ jsx("path", {
+			d: "M30.2 24.6H7.7a6.2 6.2 0 0 1 .5-12.4 9.7 9.7 0 0 1 18.5-2.8 7.7 7.7 0 0 1 3.5 15.2Z",
+			fill: "#f48120"
+		}), /* @__PURE__ */ jsx("path", {
+			d: "M33.1 16.2h1.3a5.2 5.2 0 0 1 .3 10.4H18.2l1.2-3.4h12.9l.8-7Z",
+			fill: "#faad3d"
+		})]
+	});
+}
+function VercelMark() {
+	return /* @__PURE__ */ jsx("svg", {
+		"aria-hidden": "true",
+		viewBox: "0 0 32 32",
+		children: /* @__PURE__ */ jsx("path", {
+			d: "m16 5 13 22H3L16 5Z",
+			fill: "currentColor"
+		})
 	});
 }
-const logoMarks = {
-	amazonroute53: Route53Mark,
-	route53: Route53Mark
+const builtInMarks = {
+	cloudflare: CloudflareMark,
+	vercel: VercelMark
 };
 function DefaultMark({ provider }) {
-	const BuiltIn = logoMarks[logoKey(provider.id)];
-	const host = logoHost(provider.id);
-	const [failed, setFailed] = useState(false);
-	if (BuiltIn !== void 0) return /* @__PURE__ */ jsx(BuiltIn, {});
-	if (host === void 0 || failed) return letterMark(provider);
-	return /* @__PURE__ */ jsx("img", {
-		alt: "",
-		height: 32,
-		onError: () => setFailed(true),
-		referrerPolicy: "no-referrer",
-		src: `https://integrations.sh/logo/${host}?sz=64`,
-		width: 32
-	});
+	const BuiltIn = builtInMarks[logoKey(provider.id)];
+	return BuiltIn === void 0 ? letterMark(provider) : /* @__PURE__ */ jsx(BuiltIn, {});
 }
 function Mark({ provider, ...props }) {
 	const { marks } = useDomainKit();
@@ -531,28 +559,32 @@ function Mark({ provider, ...props }) {
 //#endregion
 //#region src/connection.tsx
 var connection_exports = /* @__PURE__ */ __exportAll({
+	AttachAction: () => AttachAction,
+	Card: () => Card$1,
+	CardActions: () => CardActions,
+	CardIdentity: () => CardIdentity,
 	Command: () => Command$2,
 	ConnectTrigger: () => ConnectTrigger,
 	Dialog: () => Dialog$2,
-	DisconnectAction: () => DisconnectAction,
-	DisconnectState: () => DisconnectState,
+	DisconnectDialog: () => DisconnectDialog,
 	Flow: () => Flow$2,
+	IntegrationAction: () => IntegrationAction,
 	OAuthAction: () => OAuthAction,
 	RetryAction: () => RetryAction$1,
-	ReuseAction: () => ReuseAction,
 	Root: () => Root$3,
 	State: () => State$2,
 	Status: () => Status$2,
 	TokenAction: () => TokenAction,
 	Trigger: () => Trigger,
+	targetLabel: () => targetLabel,
 	useController: () => useController$2,
-	useDisconnect: () => useDisconnect,
 	useModel: () => useModel$2
 });
 const State$2 = Data.taggedEnum();
+const sameTarget = (left, right) => left.accountId === right.accountId && left.accountKind === right.accountKind && left.zoneId === right.zoneId && left.zoneName === right.zoneName;
 const Command$2 = Data.taggedEnum();
 function useModel$2(domain) {
-	const { navigate, runtime } = useDomainKit();
+	const { emit, navigate, runtime } = useDomainKit();
 	return useMemo(() => {
 		const actionState = Atom.make(void 0);
 		const inspect = runtime.atom(Effect.flatMap(Transport.Service, (transport) => transport.connection.inspect({ domain })));
@@ -575,31 +607,66 @@ function useModel$2(domain) {
 					return Effect.void;
 				}
 				const snapshot = get(state);
+				if (input._tag === "Detach") {
+					if (snapshot._tag !== "Connected") return Effect.void;
+					get.set(actionState, State$2.Detaching({ snapshot }));
+					return Effect.flatMap(Transport.Service, (transport) => Effect.flatMap(transport.connection.detach({
+						attachmentId: snapshot.attachment.id,
+						preserveDns: true
+					}), (result) => {
+						const detached = {
+							_tag: "Disconnected",
+							domain: snapshot.attachment.domain,
+							provider: snapshot.provider,
+							reusableConnections: []
+						};
+						return Effect.flatMap(Effect.sync(() => {
+							get.set(actionState, detached);
+							emit(Event.DomainDetached({
+								connection: snapshot,
+								result
+							}));
+						}), () => transport.connection.inspect({ domain }).pipe(Effect.catch(() => Effect.succeed(detached)), Effect.tap((refreshed) => Effect.sync(() => get.set(actionState, refreshed)))));
+					})).pipe(Effect.catch((error) => Effect.sync(() => get.set(actionState, failureFromError(error)))), Effect.asVoid);
+				}
 				if (snapshot._tag !== "Disconnected") return Effect.void;
-				const reusableConnection = snapshot.reusableConnection;
-				if (input._tag === "Reuse" && reusableConnection === void 0) return Effect.void;
-				get.set(actionState, State$2.Submitting({ snapshot }));
-				const complete = (request) => request.pipe(Effect.tap((result) => Effect.sync(() => {
+				const complete = (request, source) => request.pipe(Effect.tap((result) => Effect.sync(() => {
 					if (result._tag === "Redirect") {
 						get.set(actionState, State$2.Redirecting({ snapshot }));
 						navigate(result.authorizationUrl);
-					} else get.set(actionState, result);
+					} else {
+						get.set(actionState, result);
+						emit(Event.ConnectionEstablished({
+							connection: result,
+							source
+						}));
+					}
 				})), Effect.catch((error) => Effect.sync(() => get.set(actionState, failureFromError(error)))), Effect.asVoid);
+				if (input._tag === "Attach") {
+					const reusableConnection = snapshot.reusableConnections.find(({ connection }) => connection.id === input.connectionId);
+					if (reusableConnection === void 0) return Effect.void;
+					const target = reusableConnection.targets.find((candidate) => sameTarget(candidate, input.target));
+					if (target === void 0) return Effect.void;
+					get.set(actionState, State$2.Submitting({ snapshot }));
+					return complete(Effect.flatMap(Transport.Service, (transport) => transport.connection.attach({
+						connectionId: input.connectionId,
+						domain,
+						target
+					})), "attach");
+				}
+				get.set(actionState, State$2.Submitting({ snapshot }));
 				if (input._tag === "Connect") return complete(Effect.flatMap(Transport.Service, (transport) => transport.connection.connect({
 					domain,
 					method: input.method,
 					providerId: snapshot.provider.id
-				})));
-				if (reusableConnection === void 0) return Effect.void;
-				return complete(Effect.flatMap(Transport.Service, (transport) => transport.connection.reuse({
-					connectionId: reusableConnection.connectionId,
-					domain
-				})));
+				})), "connect");
+				return Effect.void;
 			}),
 			state
 		};
 	}, [
 		domain,
+		emit,
 		navigate,
 		runtime
 	]);
@@ -609,9 +676,13 @@ function useController$2(domain) {
 	const state = useAtomValue(model.state);
 	const execute = useAtomSet(model.command);
 	return {
+		attach: (connection, target) => execute(Command$2.Attach({
+			connectionId: connection.connection.id,
+			target
+		})),
 		connect: (method) => execute(Command$2.Connect({ method })),
+		detach: () => execute(Command$2.Detach()),
 		retry: () => execute(Command$2.Retry()),
-		reuse: () => execute(Command$2.Reuse()),
 		state
 	};
 }
@@ -623,7 +694,7 @@ function Root$3({ children, status = "Loading", ...props }) {
 }
 function Status$2({ children, state, ...props }) {
 	const { messages } = useDomainKit();
-	const text = state._tag === "Loading" ? messages.detectingProvider : state._tag === "Connected" ? messages.connected(state.provider.name) : state._tag === "Unsupported" ? messages.automaticUnavailable : state._tag === "Failure" ? state.message : state._tag === "Redirecting" ? messages.openingAuthorization : state._tag === "Submitting" ? messages.connecting : messages.providerAvailable(state.provider.name);
+	const text = state._tag === "Loading" ? messages.detectingProvider : state._tag === "Connected" ? messages.connected(state.provider.name) : state._tag === "Detaching" ? messages.detaching : state._tag === "Unsupported" ? messages.automaticUnavailable : state._tag === "Failure" ? state.message : state._tag === "Redirecting" ? messages.openingAuthorization : state._tag === "Submitting" ? messages.connecting : messages.providerAvailable(state.provider.name);
 	return usePart("div", props, { status: state._tag }, {
 		children: children ?? text,
 		"data-domainkit-part": "connection-status",
@@ -652,20 +723,32 @@ function OAuthAction({ controller, label, ...props }) {
 	return usePart("button", props, { authentication: "oauth" }, {
 		children: label,
 		"data-domainkit-part": "oauth-connect",
+		disabled: controller.state._tag === "Submitting" || controller.state._tag === "Redirecting",
 		onClick: () => controller.connect(Transport.Method.OAuth()),
 		type: "button"
 	});
 }
-function ReuseAction({ controller, label, ...props }) {
-	return usePart("button", props, { authentication: "reuse" }, {
+function IntegrationAction({ controller, label, ...props }) {
+	return usePart("button", props, { authentication: "integration" }, {
 		children: label,
-		"data-domainkit-part": "reuse-connection",
-		onClick: () => void controller.reuse(),
+		"data-domainkit-part": "integration-connect",
+		disabled: controller.state._tag === "Submitting" || controller.state._tag === "Redirecting",
+		onClick: () => controller.connect(Transport.Method.Integration()),
+		type: "button"
+	});
+}
+function AttachAction({ connection, controller, label, target, ...props }) {
+	return usePart("button", props, { authentication: "attach" }, {
+		children: label,
+		"data-domainkit-part": "attach-target",
+		disabled: controller.state._tag === "Submitting" || controller.state._tag === "Redirecting",
+		onClick: () => controller.attach(connection, target),
 		type: "button"
 	});
 }
 function TokenAction({ controller, method, ...props }) {
 	const { messages } = useDomainKit();
+	const pending = controller.state._tag === "Submitting" || controller.state._tag === "Redirecting";
 	const [token, setToken] = useState("");
 	const [parameters, setParameters] = useState({});
 	const submit = (event) => {
@@ -685,6 +768,7 @@ function TokenAction({ controller, method, ...props }) {
 				parameter.label,
 				/* @__PURE__ */ jsx("input", {
 					name: parameter.key,
+					disabled: pending,
 					onChange: (event) => {
 						const value = event.currentTarget.value;
 						setParameters((current) => ({
@@ -701,6 +785,7 @@ function TokenAction({ controller, method, ...props }) {
 			] }, parameter.key)),
 			/* @__PURE__ */ jsxs("label", { children: [messages.tokenLabel, /* @__PURE__ */ jsx("input", {
 				autoComplete: "off",
+				disabled: pending,
 				name: "token",
 				onChange: (event) => setToken(event.currentTarget.value),
 				placeholder: method.placeholder,
@@ -708,7 +793,7 @@ function TokenAction({ controller, method, ...props }) {
 				value: token
 			})] }),
 			/* @__PURE__ */ jsx("button", {
-				disabled: token.length === 0 || missingRequiredParameter === true,
+				disabled: pending || token.length === 0 || missingRequiredParameter === true,
 				type: "submit",
 				children: method.label
 			})
@@ -717,11 +802,22 @@ function TokenAction({ controller, method, ...props }) {
 		onSubmit: submit
 	});
 }
+const targetLabel = (target) => `${target.evidence?.accountName ?? target.accountId} · ${target.zoneName}`;
 function Dialog$2({ controller, snapshot }) {
 	const { colorScheme, messages, portalContainer, themeStyle } = useDomainKit();
+	const pending = controller.state._tag === "Submitting" || controller.state._tag === "Redirecting";
+	const integrationMethods = snapshot.provider.authentication.filter((method) => method._tag === "Integration");
+	const oauthMethods = snapshot.provider.authentication.filter((method) => method._tag === "OAuth");
+	const tokenMethods = snapshot.provider.authentication.filter((method) => method._tag === "Token");
+	const hasProviderAccountPath = integrationMethods.length > 0 || oauthMethods.length > 0 || snapshot.reusableConnections.length > 0;
 	return /* @__PURE__ */ jsxs(Dialog.Portal, {
 		container: portalContainer,
-		children: [/* @__PURE__ */ jsx(Dialog.Backdrop, { "data-domainkit-part": "dialog-backdrop" }), /* @__PURE__ */ jsxs(Dialog.Popup, {
+		children: [/* @__PURE__ */ jsx(Dialog.Backdrop, {
+			"data-color-scheme": colorScheme,
+			"data-domainkit-part": "dialog-backdrop",
+			"data-domainkit-root": "",
+			style: themeStyle
+		}), /* @__PURE__ */ jsxs(Dialog.Popup, {
 			"data-domainkit-part": "connection-dialog",
 			"data-domainkit-root": "",
 			"data-color-scheme": colorScheme,
@@ -741,7 +837,7 @@ function Dialog$2({ controller, snapshot }) {
 								children: messages.dialogDescription(snapshot.domain)
 							})]
 						}),
-						/* @__PURE__ */ jsx(Dialog.Close, {
+						pending ? null : /* @__PURE__ */ jsx(Dialog.Close, {
 							"aria-label": messages.close,
 							"data-domainkit-part": "dialog-close",
 							children: "×"
@@ -751,21 +847,55 @@ function Dialog$2({ controller, snapshot }) {
 				/* @__PURE__ */ jsxs("div", {
 					"data-domainkit-part": "dialog-body",
 					children: [
-						snapshot.provider.authentication.map((method) => method._tag === "OAuth" ? /* @__PURE__ */ jsx(OAuthAction, {
-							controller,
-							label: method.label
-						}, method._tag) : null),
-						snapshot.reusableConnection === void 0 ? null : /* @__PURE__ */ jsx(ReuseAction, {
-							controller,
-							label: messages.reuseConnection(snapshot.reusableConnection.label)
-						}),
-						snapshot.provider.authentication.map((method) => method._tag === "Token" ? /* @__PURE__ */ jsx(TokenAction, {
+						hasProviderAccountPath ? /* @__PURE__ */ jsxs("div", {
+							"data-domainkit-part": "provider-authentication",
+							children: [
+								integrationMethods.map((method) => /* @__PURE__ */ jsx(IntegrationAction, {
+									controller,
+									label: method.label
+								}, method._tag)),
+								oauthMethods.map((method) => /* @__PURE__ */ jsx(OAuthAction, {
+									controller,
+									label: method.label
+								}, method._tag)),
+								snapshot.reusableConnections.map((connection) => /* @__PURE__ */ jsxs("section", {
+									"data-connection-id": connection.connection.id,
+									"data-domainkit-part": "reusable-connection",
+									children: [/* @__PURE__ */ jsxs("div", {
+										"data-domainkit-part": "reusable-connection-heading",
+										children: [/* @__PURE__ */ jsx("strong", { children: messages.existingConnection }), /* @__PURE__ */ jsx("span", { children: connection.connection.providerId })]
+									}), /* @__PURE__ */ jsx("div", {
+										"data-domainkit-part": "target-list",
+										"data-state": connection.targets.length === 0 ? "unavailable" : connection.targets.length === 1 ? "unique" : "ambiguous",
+										children: connection.targets.length === 0 ? /* @__PURE__ */ jsx("p", {
+											"data-domainkit-part": "target-unavailable",
+											children: messages.targetUnavailable
+										}) : connection.targets.map((target) => /* @__PURE__ */ jsx(AttachAction, {
+											connection,
+											controller,
+											label: messages.attachTarget(targetLabel(target)),
+											target
+										}, `${target.accountId}:${target.zoneId}`))
+									})]
+								}, connection.connection.id))
+							]
+						}) : null,
+						hasProviderAccountPath && tokenMethods.length > 0 ? /* @__PURE__ */ jsx("div", {
+							"aria-label": messages.authenticationAlternative,
+							"data-domainkit-part": "authentication-separator",
+							role: "separator",
+							children: /* @__PURE__ */ jsx("span", {
+								"aria-hidden": "true",
+								children: messages.authenticationAlternative
+							})
+						}) : null,
+						tokenMethods.map((method) => /* @__PURE__ */ jsx(TokenAction, {
 							controller,
 							method
-						}, method._tag) : null)
+						}, method._tag))
 					]
 				}),
-				/* @__PURE__ */ jsx("div", {
+				pending ? null : /* @__PURE__ */ jsx("div", {
 					"data-domainkit-part": "dialog-footer",
 					children: /* @__PURE__ */ jsx(Dialog.Close, {
 						"data-domainkit-part": "dialog-cancel",
@@ -789,10 +919,15 @@ function Flow$2({ domain, ...props }) {
 				controller,
 				kind: state.retry === "after-user-action" ? "after-user-action" : "retry"
 			}) : null,
-			snapshot === void 0 ? null : /* @__PURE__ */ jsxs(Dialog.Root, { children: [/* @__PURE__ */ jsx(ConnectTrigger, { provider: snapshot.provider }), /* @__PURE__ */ jsx(Dialog$2, {
-				controller,
-				snapshot
-			})] })
+			snapshot === void 0 ? null : /* @__PURE__ */ jsxs(Dialog.Root, {
+				onOpenChange: (open, eventDetails) => {
+					if (!open && (state._tag === "Submitting" || state._tag === "Redirecting")) eventDetails.cancel();
+				},
+				children: [/* @__PURE__ */ jsx(ConnectTrigger, { provider: snapshot.provider }), /* @__PURE__ */ jsx(Dialog$2, {
+					controller,
+					snapshot
+				})]
+			})
 		]
 	});
 }
@@ -805,60 +940,89 @@ function RetryAction$1({ controller, kind = "retry", ...props }) {
 		type: "button"
 	});
 }
-const DisconnectState = Data.taggedEnum();
-function useDisconnect(connection) {
-	const { runtime } = useDomainKit();
-	const controller = useMemo(() => {
-		const state = Atom.make(DisconnectState.Idle());
-		return {
-			disconnect: runtime.fn()((_, get) => {
-				get.set(state, DisconnectState.Disconnecting());
-				return Effect.flatMap(Transport.Service, (transport) => transport.connection.removeDomain({
-					connectionId: connection.connectionId,
-					domain: connection.domain,
-					preserveDns: true
-				})).pipe(Effect.tap((result) => Effect.sync(() => get.set(state, result))), Effect.catch((error) => Effect.sync(() => get.set(state, failureFromError(error)))), Effect.asVoid);
-			}),
-			state
-		};
-	}, [
-		connection.connectionId,
-		connection.domain,
-		runtime
-	]);
-	const state = useAtomValue(controller.state);
-	const disconnect = useAtomSet(controller.disconnect);
-	return {
-		disconnect: () => disconnect(),
-		state
-	};
+function Card$1({ status, ...props }) {
+	return usePart("div", props, { status }, {
+		"data-domainkit-part": "connected-card",
+		"data-state": status
+	});
 }
-function DisconnectAction({ connection, ...props }) {
-	const controller = useDisconnect(connection);
-	const { messages } = useDomainKit();
-	const state = controller.state;
-	return usePart("div", props, { status: state._tag }, {
-		children: /* @__PURE__ */ jsxs(Fragment, { children: [
-			state._tag === "Removed" ? /* @__PURE__ */ jsx("p", {
-				"data-domainkit-part": "flow-outcome",
-				"data-tone": "success",
-				children: messages.domainDisconnected
-			}) : null,
-			state._tag === "Failure" ? /* @__PURE__ */ jsx("p", {
-				"data-domainkit-part": "flow-outcome",
-				"data-tone": "danger",
-				role: "alert",
-				children: state.message
-			}) : null,
-			state._tag === "Removed" ? null : /* @__PURE__ */ jsx("button", {
-				"data-domainkit-part": "disconnect-action",
-				disabled: state._tag === "Disconnecting",
-				onClick: () => void controller.disconnect(),
-				type: "button",
-				children: state._tag === "Disconnecting" ? messages.disconnecting : messages.disconnectDomain
-			})
-		] }),
-		"data-domainkit-part": "disconnect"
+function CardIdentity({ status, ...props }) {
+	return usePart("div", props, { status }, {
+		"data-domainkit-part": "connected-identity",
+		"data-state": status
+	});
+}
+function CardActions({ status, ...props }) {
+	return usePart("div", props, { status }, {
+		"data-domainkit-part": "connected-actions",
+		"data-state": status
+	});
+}
+function DisconnectDialog({ connection, controller, onOpenChange, open: openProp, trigger }) {
+	const { colorScheme, messages, portalContainer, themeStyle } = useDomainKit();
+	const [internalOpen, setInternalOpen] = useState(false);
+	const open = openProp ?? internalOpen;
+	const setOpen = (nextOpen) => {
+		if (openProp === void 0) setInternalOpen(nextOpen);
+		onOpenChange?.(nextOpen);
+	};
+	const detaching = controller.state._tag === "Detaching";
+	return /* @__PURE__ */ jsxs(AlertDialog.Root, {
+		onOpenChange: (nextOpen, eventDetails) => {
+			if (!nextOpen && detaching) {
+				eventDetails.cancel();
+				return;
+			}
+			setOpen(nextOpen);
+		},
+		open,
+		children: [trigger === null ? null : /* @__PURE__ */ jsx(AlertDialog.Trigger, {
+			"data-domainkit-part": "disconnect-trigger",
+			...trigger === void 0 ? {} : { render: trigger },
+			children: messages.disconnectDomain
+		}), /* @__PURE__ */ jsxs(AlertDialog.Portal, {
+			container: portalContainer,
+			children: [/* @__PURE__ */ jsx(AlertDialog.Backdrop, {
+				"data-color-scheme": colorScheme,
+				"data-domainkit-part": "dialog-backdrop",
+				"data-domainkit-root": "",
+				style: themeStyle
+			}), /* @__PURE__ */ jsxs(AlertDialog.Popup, {
+				"data-color-scheme": colorScheme,
+				"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(AlertDialog.Title, {
+							"data-domainkit-part": "dialog-title",
+							children: messages.disconnectTitle(connection.provider.name)
+						}), /* @__PURE__ */ jsx(AlertDialog.Description, {
+							"data-domainkit-part": "dialog-description",
+							children: messages.disconnectConsent
+						})]
+					}), detaching ? null : /* @__PURE__ */ jsx(AlertDialog.Close, {
+						"aria-label": messages.close,
+						"data-domainkit-part": "dialog-close",
+						children: "×"
+					})]
+				}), /* @__PURE__ */ jsxs("div", {
+					"data-domainkit-part": "dialog-footer",
+					children: [detaching ? null : /* @__PURE__ */ jsx(AlertDialog.Close, {
+						"data-domainkit-part": "dialog-cancel",
+						children: messages.cancel
+					}), /* @__PURE__ */ jsx("button", {
+						"data-domainkit-part": "disconnect-action",
+						disabled: detaching,
+						onClick: () => controller.detach(),
+						type: "button",
+						children: detaching ? messages.detaching : messages.disconnectDomain
+					})]
+				})]
+			})]
+		})]
 	});
 }
 //#endregion
@@ -1128,7 +1292,7 @@ var provisioning_exports = /* @__PURE__ */ __exportAll({
 const State$1 = Data.taggedEnum();
 const Command$1 = Data.taggedEnum();
 function useModel$1(connection, records, onApplied) {
-	const { runtime } = useDomainKit();
+	const { emit, runtime } = useDomainKit();
 	const recordKey = recordsIdentity(records);
 	const onAppliedRef = useRef(onApplied);
 	onAppliedRef.current = onApplied;
@@ -1136,32 +1300,42 @@ function useModel$1(connection, records, onApplied) {
 		const state = Atom.make(State$1.Idle());
 		return {
 			command: runtime.fn()((command, get) => {
+				const current = get(state);
 				if (command._tag === "Dismiss") {
+					if (current._tag === "Planning" || current._tag === "Applying") return Effect.void;
 					get.set(state, State$1.Idle());
 					return Effect.void;
 				}
 				if (command._tag === "Plan") {
+					if (current._tag === "Planning" || current._tag === "Applying") return Effect.void;
 					get.set(state, State$1.Planning());
 					return Effect.flatMap(Transport.Service, (transport) => transport.provisioning.plan({
-						connectionId: connection.connectionId,
-						domain: connection.domain,
+						attachmentId: connection.attachment.id,
+						domain: connection.attachment.domain,
 						records
 					})).pipe(Effect.tap((plan) => Effect.sync(() => get.set(state, State$1.Review({ plan })))), Effect.catch((error) => Effect.sync(() => get.set(state, failureFromError(error)))), Effect.asVoid);
 				}
-				const current = get(state);
 				if (current._tag !== "Review" || current.plan.operations.some((operation) => operation._tag === "Conflict")) return Effect.void;
 				const plan = current.plan;
 				get.set(state, State$1.Applying({ plan }));
 				return Effect.flatMap(Transport.Service, (transport) => transport.provisioning.apply({
-					connectionId: connection.connectionId,
-					domain: connection.domain,
+					attachmentId: connection.attachment.id,
+					domain: connection.attachment.domain,
 					planDigest: plan.digest
 				})).pipe(Effect.tap((result) => Effect.sync(() => {
 					if (result._tag === "Applied") {
 						get.set(state, State$1.Complete({ result }));
+						emit(Event.RecordsApplied({
+							connection,
+							result
+						}));
 						onAppliedRef.current?.(result);
 					} else if (result._tag === "Partial") {
 						get.set(state, State$1.Partial({ result }));
+						emit(Event.RecordsPartiallyApplied({
+							connection,
+							result
+						}));
 						onAppliedRef.current?.(result);
 					} else get.set(state, result);
 				})), Effect.catch((error) => Effect.sync(() => get.set(state, failureFromError(error)))), Effect.asVoid);
@@ -1169,8 +1343,9 @@ function useModel$1(connection, records, onApplied) {
 			state
 		};
 	}, [
-		connection.connectionId,
-		connection.domain,
+		connection.attachment.domain,
+		connection.attachment.id,
+		emit,
 		recordKey,
 		runtime
 	]);
@@ -1195,11 +1370,6 @@ function Root$1({ status, ...props }) {
 }
 function Outcome$1({ state }) {
 	const { messages } = useDomainKit();
-	if (state._tag === "Complete") return /* @__PURE__ */ jsx("p", {
-		"data-domainkit-part": "flow-outcome",
-		"data-tone": "success",
-		children: messages.recordsApplied
-	});
 	if (state._tag === "Partial" || state._tag === "Failure" || state._tag === "Stale") return /* @__PURE__ */ jsx("p", {
 		"data-domainkit-part": "flow-outcome",
 		"data-tone": "danger",
@@ -1208,23 +1378,38 @@ function Outcome$1({ state }) {
 	});
 	return null;
 }
-function Dialog$1({ controller }) {
+function Dialog$1({ controller, trigger }) {
 	const { colorScheme, messages, portalContainer, themeStyle } = useDomainKit();
 	const state = controller.state;
-	const plan = state._tag === "Review" || state._tag === "Applying" ? state.plan : void 0;
+	const planRef = useRef(void 0);
+	if (state._tag === "Idle") planRef.current = void 0;
+	if (state._tag === "Review" || state._tag === "Applying") planRef.current = state.plan;
+	const plan = planRef.current;
+	const busy = state._tag === "Planning" || state._tag === "Applying";
+	const open = state._tag !== "Idle" && state._tag !== "Complete";
 	return /* @__PURE__ */ jsxs(Dialog.Root, {
-		onOpenChange: (open) => {
-			if (!open) controller.dismiss();
+		onOpenChange: (nextOpen, eventDetails) => {
+			if (!nextOpen && busy) {
+				eventDetails.cancel();
+				return;
+			}
+			if (!nextOpen) controller.dismiss();
 		},
-		open: plan !== void 0,
+		open,
 		children: [/* @__PURE__ */ jsx(Dialog.Trigger, {
 			"data-domainkit-part": "plan-trigger",
-			disabled: state._tag === "Planning" || state._tag === "Applying",
+			disabled: state._tag !== "Idle",
 			onClick: () => controller.plan(),
-			children: state._tag === "Planning" ? messages.planningDns : messages.reviewDns
-		}), plan === void 0 ? null : /* @__PURE__ */ jsxs(Dialog.Portal, {
-			container: portalContainer ?? void 0,
-			children: [/* @__PURE__ */ jsx(Dialog.Backdrop, { "data-domainkit-part": "dialog-backdrop" }), /* @__PURE__ */ jsxs(Dialog.Popup, {
+			...trigger === void 0 ? {} : { render: trigger },
+			children: messages.reviewDns
+		}), /* @__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-domainkit-part": "plan-dialog",
 				"data-domainkit-root": "",
@@ -1241,31 +1426,48 @@ function Dialog$1({ controller }) {
 								"data-domainkit-part": "dialog-description",
 								children: messages.planConsent
 							})]
-						}), /* @__PURE__ */ jsx(Dialog.Close, {
+						}), busy ? null : /* @__PURE__ */ jsx(Dialog.Close, {
 							"aria-label": messages.close,
 							"data-domainkit-part": "dialog-close",
 							children: "×"
 						})]
 					}),
-					/* @__PURE__ */ jsx("div", {
+					/* @__PURE__ */ jsxs("div", {
 						"data-domainkit-part": "dialog-body",
-						children: /* @__PURE__ */ jsx(List, {
+						children: [plan === void 0 ? /* @__PURE__ */ jsx("p", {
+							"data-domainkit-part": "dialog-progress",
+							role: "status",
+							children: messages.planningDns
+						}) : /* @__PURE__ */ jsx(List, {
 							lifecycle: "provisioning",
 							operations: plan.operations
-						})
+						}), /* @__PURE__ */ jsx(Outcome$1, { state })]
 					}),
-					/* @__PURE__ */ jsxs("div", {
+					/* @__PURE__ */ jsx("div", {
 						"data-domainkit-part": "dialog-footer",
-						children: [/* @__PURE__ */ jsx(Dialog.Close, {
+						children: busy ? /* @__PURE__ */ jsx("button", {
+							"data-domainkit-part": "plan-apply",
+							disabled: true,
+							type: "button",
+							children: state._tag === "Applying" ? messages.applyingDns : messages.planningDns
+						}) : state._tag === "Review" && plan !== void 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Dialog.Close, {
 							"data-domainkit-part": "dialog-cancel",
 							children: messages.cancel
 						}), /* @__PURE__ */ jsx("button", {
 							"data-domainkit-part": "plan-apply",
-							disabled: state._tag === "Applying" || plan.operations.some((operation) => operation._tag === "Conflict"),
+							disabled: plan.operations.some((operation) => operation._tag === "Conflict"),
 							onClick: () => controller.apply(),
 							type: "button",
-							children: state._tag === "Applying" ? messages.applyingDns : messages.applyDns
-						})]
+							children: messages.applyDns
+						})] }) : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Dialog.Close, {
+							"data-domainkit-part": "dialog-cancel",
+							children: messages.close
+						}), /* @__PURE__ */ jsx("button", {
+							"data-domainkit-part": "provisioning-retry",
+							onClick: () => controller.retry(),
+							type: "button",
+							children: messages.retry
+						})] })
 					})
 				]
 			})]
@@ -1283,18 +1485,16 @@ function RetryAction({ controller }) {
 		children: messages.retry
 	});
 }
-function Flow$1({ connection, onApplied, records, showRecords = true, ...props }) {
+function Flow$1({ connection, onApplied, records, showRecords = true, trigger, ...props }) {
 	const controller = useController$1(connection, records, onApplied);
 	const state = controller.state;
 	return /* @__PURE__ */ jsxs(Root$1, {
 		status: state._tag,
 		...props,
-		children: [
-			showRecords ? /* @__PURE__ */ jsx(Table, { records }) : null,
-			/* @__PURE__ */ jsx(Outcome$1, { state }),
-			/* @__PURE__ */ jsx(Dialog$1, { controller }),
-			/* @__PURE__ */ jsx(RetryAction, { controller })
-		]
+		children: [showRecords ? /* @__PURE__ */ jsx(Table, { records }) : null, /* @__PURE__ */ jsx(Dialog$1, {
+			controller,
+			...trigger === void 0 ? {} : { trigger }
+		})]
 	});
 }
 //#endregion
@@ -1325,21 +1525,27 @@ function useModel(config) {
 					get.set(state, State.Idle());
 					return Effect.void;
 				}
-				get.set(state, State.Observing());
+				const current = get(state);
+				if (current._tag === "Observing") return Effect.void;
+				const previous = current._tag === "Observation" ? current : current._tag === "Failed" ? current.previous : void 0;
+				get.set(state, State.Observing({ ...previous === void 0 ? {} : { previous } }));
 				return Effect.flatMap(Transport.Service, (transport) => transport.verification.observe({
-					...config.connection === void 0 ? {} : { connectionId: config.connection.connectionId },
+					...config.connection === void 0 ? {} : { attachmentId: config.connection.attachment.id },
 					domain: config.domain,
 					records: config.records,
 					sources: {
 						provider,
 						publicDns
 					}
-				})).pipe(Effect.tap((observation) => Effect.sync(() => get.set(state, observation))), Effect.catch((error) => Effect.sync(() => get.set(state, failureFromError(error)))), Effect.asVoid);
+				})).pipe(Effect.tap((observation) => Effect.sync(() => get.set(state, observation))), Effect.catch((error) => Effect.sync(() => get.set(state, State.Failed({
+					failure: failureFromError(error),
+					...previous === void 0 ? {} : { previous }
+				})))), Effect.asVoid);
 			}),
 			state
 		};
 	}, [
-		config.connection?.connectionId,
+		config.connection?.attachment.id,
 		config.domain,
 		provider,
 		publicDns,
@@ -1386,7 +1592,7 @@ function Evidence({ observation }) {
 		"data-domainkit-part": "observation-list",
 		children: observationGroups(observation).map((group) => /* @__PURE__ */ jsxs("section", {
 			"data-domainkit-part": "observation-group",
-			children: [/* @__PURE__ */ jsx("p", {
+			children: [/* @__PURE__ */ jsx("h3", {
 				"data-domainkit-part": "observation-source",
 				children: group.label
 			}), /* @__PURE__ */ jsx("ul", { children: group.evidence.map((evidence, index) => {
@@ -1406,122 +1612,271 @@ function Evidence({ observation }) {
 	});
 }
 function Outcome({ state }) {
-	if (state._tag !== "Failure") return null;
+	if (state._tag !== "Failed") return null;
 	return /* @__PURE__ */ jsx("p", {
 		"data-domainkit-part": "flow-outcome",
 		"data-tone": "danger",
 		role: "alert",
-		children: state.message
+		children: state.failure.message
 	});
 }
-function ObserveAction({ controller }) {
+function ObserveAction({ controller, ...props }) {
 	const { messages } = useDomainKit();
-	return /* @__PURE__ */ jsx("button", {
+	const observing = controller.state._tag === "Observing";
+	return usePart("button", props, { status: controller.state._tag }, {
+		"aria-busy": observing,
+		children: messages.checkDns,
 		"data-domainkit-part": "observe-action",
-		disabled: controller.state._tag === "Observing",
+		"data-loading": observing ? "" : void 0,
+		disabled: observing,
 		onClick: () => controller.observe(),
-		type: "button",
-		children: controller.state._tag === "Observing" ? messages.checkingDns : messages.checkDns
+		type: "button"
 	});
 }
 function Status({ config, ...props }) {
+	const { colorScheme, messages, portalContainer, themeStyle } = useDomainKit();
 	const controller = useController(config);
 	const state = controller.state;
-	return /* @__PURE__ */ jsxs(Root, {
+	const observation = state._tag === "Observation" ? state : state._tag === "Observing" || state._tag === "Failed" ? state.previous : void 0;
+	return /* @__PURE__ */ jsx(Root, {
 		status: state._tag,
 		...props,
-		children: [
-			state._tag === "Observation" ? /* @__PURE__ */ jsx(Evidence, { observation: state }) : null,
-			/* @__PURE__ */ jsx(Outcome, { state }),
-			/* @__PURE__ */ jsx(ObserveAction, { controller })
-		]
+		children: /* @__PURE__ */ jsxs(Popover.Root, { children: [/* @__PURE__ */ jsx(Popover.Trigger, { render: /* @__PURE__ */ jsx(ObserveAction, { controller }) }), /* @__PURE__ */ jsx(Popover.Portal, {
+			container: portalContainer,
+			children: /* @__PURE__ */ jsx(Popover.Positioner, {
+				align: "end",
+				"data-domainkit-part": "verification-positioner",
+				sideOffset: 6,
+				children: /* @__PURE__ */ jsxs(Popover.Popup, {
+					"aria-label": messages.checkDns,
+					"aria-busy": state._tag === "Observing",
+					"data-color-scheme": colorScheme,
+					"data-domainkit-part": "verification-popover",
+					"data-domainkit-root": "",
+					style: themeStyle,
+					children: [
+						/* @__PURE__ */ jsx(Popover.Arrow, { "data-domainkit-part": "verification-arrow" }),
+						state._tag === "Observing" ? /* @__PURE__ */ jsx("p", {
+							"data-domainkit-part": "verification-progress",
+							role: "status",
+							children: messages.checkingDns
+						}) : null,
+						observation === void 0 ? null : /* @__PURE__ */ jsx(Evidence, { observation }),
+						/* @__PURE__ */ jsx(Outcome, { state })
+					]
+				})
+			})
+		})] })
 	});
 }
 //#endregion
 //#region src/domain.tsx
 var domain_exports = /* @__PURE__ */ __exportAll({ Flow: () => Flow });
 function Flow({ domain, receiptId, records }) {
-	const connection = useController$2(domain);
-	const state = connection.state;
+	const controller = useController$2(domain);
+	const state = controller.state;
+	const connected = state._tag === "Connected" ? state : state._tag === "Detaching" ? state.snapshot : void 0;
 	return /* @__PURE__ */ jsxs(Root$3, {
 		status: state._tag,
 		children: [
-			state._tag === "Connected" ? null : /* @__PURE__ */ jsx(Status$2, { state }),
-			state._tag === "Failure" && (state.retry === "safe" || state.retry === "unknown") ? /* @__PURE__ */ jsx(RetryAction$1, { controller: connection }) : null,
-			state._tag === "Disconnected" ? /* @__PURE__ */ jsxs(Dialog.Root, { children: [/* @__PURE__ */ jsx(ConnectTrigger, { provider: state.provider }), /* @__PURE__ */ jsx(Dialog$2, {
-				controller: connection,
-				snapshot: state
-			})] }) : null,
-			state._tag === "Connected" ? /* @__PURE__ */ jsx("div", {
-				"data-domainkit-part": "connected-shell",
-				children: /* @__PURE__ */ jsx(ConnectedFlow, {
-					connection: state,
-					...receiptId === void 0 ? {} : { initialReceiptId: receiptId },
-					records
-				})
-			}) : null
+			state._tag === "Connected" || state._tag === "Detaching" ? /* @__PURE__ */ jsx(ConnectedCard, {
+				connection: state._tag === "Connected" ? state : state.snapshot,
+				controller,
+				...receiptId === void 0 ? {} : { initialReceiptId: receiptId },
+				records,
+				status: state._tag
+			}) : /* @__PURE__ */ jsx(AvailableCard, {
+				controller,
+				state
+			}),
+			/* @__PURE__ */ jsx(Table, { records }),
+			/* @__PURE__ */ jsx(Status, { config: {
+				...connected === void 0 ? {} : { connection: connected },
+				domain,
+				records
+			} })
 		]
 	});
 }
-function ConnectedFlow({ connection, initialReceiptId, records }) {
-	const [appliedReceipt, setAppliedReceipt] = useState();
-	const receiptSource = initialReceiptId ?? null;
-	const receiptEpoch = useRef({
-		source: receiptSource,
-		value: 0
+function AvailableCard({ controller, state }) {
+	const { messages } = useDomainKit();
+	const snapshot = state._tag === "Disconnected" ? state : state._tag === "Submitting" || state._tag === "Redirecting" ? state.snapshot : void 0;
+	return /* @__PURE__ */ jsxs(Card$1, {
+		status: state._tag,
+		children: [/* @__PURE__ */ jsxs(CardIdentity, {
+			status: state._tag,
+			children: [snapshot === void 0 ? null : /* @__PURE__ */ jsx(Mark, { provider: snapshot.provider }), /* @__PURE__ */ jsx(Status$2, { state })]
+		}), /* @__PURE__ */ jsxs(CardActions, {
+			status: state._tag,
+			children: [state._tag === "Failure" && state.retry !== "never" ? /* @__PURE__ */ jsx(RetryAction$1, {
+				controller,
+				kind: state.retry === "after-user-action" ? "after-user-action" : "retry"
+			}) : null, snapshot === void 0 ? null : /* @__PURE__ */ jsxs(Dialog.Root, {
+				onOpenChange: (open, eventDetails) => {
+					if (!open && (state._tag === "Submitting" || state._tag === "Redirecting")) eventDetails.cancel();
+				},
+				children: [/* @__PURE__ */ jsx(ConnectTrigger, {
+					disabled: state._tag === "Submitting" || state._tag === "Redirecting",
+					provider: snapshot.provider,
+					children: messages.connectProvider(snapshot.provider.name)
+				}), /* @__PURE__ */ jsx(Dialog$2, {
+					controller,
+					snapshot
+				})]
+			})]
+		})]
 	});
-	const epoch = receiptEpoch.current.source === receiptSource ? receiptEpoch.current.value : receiptEpoch.current.value + 1;
-	useEffect(() => {
-		if (receiptEpoch.current.source === receiptSource) return;
-		receiptEpoch.current = {
-			source: receiptSource,
-			value: receiptEpoch.current.value + 1
-		};
-		setAppliedReceipt(void 0);
-	}, [receiptSource]);
-	const receiptId = appliedReceipt !== void 0 && appliedReceipt.epoch === epoch ? appliedReceipt.receiptId : initialReceiptId;
-	const rememberReceipt = (result) => {
-		setAppliedReceipt({
-			epoch,
-			receiptId: result.receiptId
-		});
-	};
+}
+function ConnectedCard({ connection, controller, initialReceiptId, records, status }) {
+	const [receipt, setReceipt] = useState({
+		host: initialReceiptId,
+		value: initialReceiptId
+	});
+	if (receipt.host !== initialReceiptId) setReceipt({
+		host: initialReceiptId,
+		value: initialReceiptId
+	});
+	const receiptId = receipt.host === initialReceiptId ? receipt.value : initialReceiptId;
+	const disabled = status === "Detaching";
+	const actionsTriggerRef = useRef(null);
+	return /* @__PURE__ */ jsxs(Card$1, {
+		status,
+		children: [/* @__PURE__ */ jsxs(CardIdentity, {
+			status,
+			children: [/* @__PURE__ */ jsx(Mark, { provider: connection.provider }), /* @__PURE__ */ jsx(Status$2, { state: status === "Connected" ? connection : controller.state })]
+		}), /* @__PURE__ */ jsxs(CardActions, {
+			status,
+			children: [/* @__PURE__ */ jsx(Flow$1, {
+				connection,
+				onApplied: (result) => setReceipt({
+					host: initialReceiptId,
+					value: result.receiptId
+				}),
+				records,
+				showRecords: false
+			}), receiptId === void 0 ? /* @__PURE__ */ jsx(ProviderActions, {
+				actionsTriggerRef,
+				connection,
+				controller,
+				disabled
+			}) : /* @__PURE__ */ jsx(ProviderActionsWithCleanup, {
+				actionsTriggerRef,
+				connection,
+				controller,
+				disabled,
+				onCleaned: () => setReceipt({
+					host: initialReceiptId,
+					value: void 0
+				}),
+				receiptId
+			}, receiptId)]
+		})]
+	});
+}
+function ProviderActionsWithCleanup({ actionsTriggerRef, connection, controller, disabled, onCleaned, receiptId }) {
+	const [cleaned, setCleaned] = useState(false);
+	const cleanup = useController$3(connection, receiptId, (result) => {
+		if (result._tag === "Cleaned") setCleaned(true);
+	});
+	return /* @__PURE__ */ jsx(ProviderActions, {
+		actionsTriggerRef,
+		cleanup,
+		connection,
+		controller,
+		disabled,
+		onCleanupCloseComplete: () => {
+			if (cleaned) onCleaned();
+		}
+	});
+}
+function ProviderActions({ actionsTriggerRef: actionsTriggerRefProp, cleanup, connection, controller, disabled, onCleanupCloseComplete }) {
+	const { colorScheme, messages, portalContainer, themeStyle } = useDomainKit();
+	const fallbackActionsTriggerRef = useRef(null);
+	const actionsTriggerRef = actionsTriggerRefProp ?? fallbackActionsTriggerRef;
+	const [menuOpen, setMenuOpen] = useState(false);
+	const [disconnectOpen, setDisconnectOpen] = useState(false);
 	return /* @__PURE__ */ jsxs(Fragment, { children: [
-		/* @__PURE__ */ jsxs("div", {
-			"data-domainkit-part": "connected-card",
-			children: [/* @__PURE__ */ jsxs("div", {
-				"data-domainkit-part": "connected-identity",
-				children: [/* @__PURE__ */ jsx(Mark, { provider: connection.provider }), /* @__PURE__ */ jsx(Status$2, { state: connection })]
-			}), /* @__PURE__ */ jsxs("div", {
-				"data-domainkit-part": "connected-actions",
-				children: [
-					/* @__PURE__ */ jsx(Flow$1, {
-						connection,
-						onApplied: rememberReceipt,
-						records,
-						showRecords: false
-					}),
-					/* @__PURE__ */ jsx(Status, { config: {
-						connection,
-						domain: connection.domain,
-						records
-					} }),
-					/* @__PURE__ */ jsx(DisconnectAction, { connection })
-				]
+		/* @__PURE__ */ jsxs(Menu.Root, {
+			disabled,
+			modal: false,
+			onOpenChange: setMenuOpen,
+			open: menuOpen,
+			children: [/* @__PURE__ */ jsx(Menu.Trigger, {
+				"aria-label": messages.moreActions,
+				"data-domainkit-part": "actions-trigger",
+				ref: actionsTriggerRef,
+				children: /* @__PURE__ */ jsx("span", {
+					"aria-hidden": "true",
+					children: "⋯"
+				})
+			}), /* @__PURE__ */ jsx(Menu.Portal, {
+				container: portalContainer,
+				keepMounted: true,
+				children: /* @__PURE__ */ jsx(Menu.Positioner, {
+					align: "end",
+					sideOffset: 6,
+					children: /* @__PURE__ */ jsxs(Menu.Popup, {
+						"data-color-scheme": colorScheme,
+						"data-domainkit-part": "actions-menu",
+						"data-domainkit-root": "",
+						style: themeStyle,
+						children: [cleanup === void 0 ? null : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Menu.Item, {
+							closeOnClick: false,
+							"data-domainkit-part": "actions-item",
+							nativeButton: true,
+							onClickCapture: () => {
+								setMenuOpen(false);
+								queueMicrotask(() => cleanup.plan());
+							},
+							render: /* @__PURE__ */ jsx("button", { type: "button" }),
+							children: messages.reviewCleanup
+						}), /* @__PURE__ */ jsx(Menu.Separator, { "data-domainkit-part": "actions-separator" })] }), /* @__PURE__ */ jsx(Menu.Item, {
+							closeOnClick: false,
+							"data-domainkit-part": "actions-item",
+							"data-tone": "danger",
+							nativeButton: true,
+							onClickCapture: () => {
+								setMenuOpen(false);
+								queueMicrotask(() => setDisconnectOpen(true));
+							},
+							render: /* @__PURE__ */ jsx("button", { type: "button" }),
+							children: messages.disconnectDomain
+						})]
+					})
+				})
 			})]
 		}),
-		/* @__PURE__ */ jsx(Table, { records }),
-		receiptId === void 0 ? null : /* @__PURE__ */ jsx(Flow$3, {
+		cleanup === void 0 ? null : /* @__PURE__ */ jsx(Dialog$3, {
+			controller: cleanup,
+			onOpenChangeComplete: (open) => {
+				if (!open) {
+					onCleanupCloseComplete?.();
+					queueMicrotask(() => actionsTriggerRef.current?.focus());
+				}
+			},
+			trigger: null
+		}),
+		/* @__PURE__ */ jsx(DisconnectDialog, {
 			connection,
-			receiptId
+			controller,
+			onOpenChange: (open) => {
+				setDisconnectOpen(open);
+				if (!open) queueMicrotask(() => actionsTriggerRef.current?.focus());
+			},
+			open: disconnectOpen,
+			trigger: null
 		})
 	] });
 }
 //#endregion
 //#region src/testing.ts
 var testing_exports = /* @__PURE__ */ __exportAll({
+	attachment: () => attachment,
+	connected: () => connected,
+	connection: () => connection,
 	makeFakeTransport: () => makeFakeTransport,
-	provider: () => provider
+	provider: () => provider,
+	target: () => target
 });
 const provider = (overrides = {}) => ({
 	authentication: [{
@@ -1536,17 +1891,48 @@ const provider = (overrides = {}) => ({
 	name: "Cloudflare",
 	...overrides
 });
+const target = (overrides = {}) => ({
+	accountId: "account-1",
+	accountKind: "account",
+	zoneId: "zone-1",
+	zoneName: DomainName.parse("example.com"),
+	...overrides
+});
+const connection = (overrides = {}) => ({
+	createdAt: /* @__PURE__ */ new Date("2026-08-30T00:00:00.000Z"),
+	id: "connection-1",
+	method: "oauth2",
+	ownerId: "organization-1",
+	providerId: "cloudflare",
+	status: "active",
+	...overrides
+});
+const attachment = (overrides = {}) => ({
+	connectionId: "connection-1",
+	createdAt: /* @__PURE__ */ new Date("2026-08-30T00:00:00.000Z"),
+	domain: DomainName.parse("mail.example.com"),
+	id: "attachment-1",
+	target: target(),
+	...overrides
+});
+const connected = (overrides = {}) => ({
+	_tag: "Connected",
+	attachment: attachment(),
+	connection: connection(),
+	provider: provider(),
+	...overrides
+});
 function makeFakeTransport(options) {
 	const calls = {
 		apply: [],
+		attach: [],
 		cleanupApply: [],
 		cleanupPlan: [],
 		connect: [],
+		detach: [],
 		inspect: [],
 		observe: [],
-		plan: [],
-		removeDomain: [],
-		reuse: []
+		plan: []
 	};
 	const inspections = Array.isArray(options.inspect) ? [...options.inspect] : [options.inspect];
 	const transport = {
@@ -1574,8 +1960,8 @@ function makeFakeTransport(options) {
 				calls.connect.push(input);
 				return options.connect ?? {
 					_tag: "Connected",
-					connectionId: "connection-1",
-					domain: input.domain,
+					attachment: attachment({ domain: DomainName.parse(input.domain) }),
+					connection: connection(),
 					provider: provider()
 				};
 			},
@@ -1590,22 +1976,26 @@ function makeFakeTransport(options) {
 				});
 				return snapshot;
 			},
-			reuse: async (input) => {
-				calls.reuse.push(input);
-				return options.reuse ?? {
+			attach: async (input) => {
+				calls.attach.push(input);
+				return options.attach ?? {
 					_tag: "Connected",
-					connectionId: input.connectionId,
-					domain: input.domain,
+					attachment: attachment({
+						connectionId: input.connectionId,
+						domain: DomainName.parse(input.domain),
+						target: input.target
+					}),
+					connection: connection({ id: input.connectionId }),
 					provider: provider()
 				};
 			},
-			removeDomain: async (input) => {
-				calls.removeDomain.push(input);
-				return options.removeDomain ?? {
-					_tag: "Removed",
-					connectionId: input.connectionId,
-					domain: input.domain,
-					remainingDomainCount: 0
+			detach: async (input) => {
+				calls.detach.push(input);
+				return options.detach ?? {
+					_tag: "Detached",
+					attachment: attachment(),
+					connection: connection(),
+					remainingAttachments: 0
 				};
 			}
 		},
@@ -1651,6 +2041,6 @@ function makeFakeTransport(options) {
 	return Object.assign(Transport.layerFromAsync(transport), transport, { calls });
 }
 //#endregion
-export { cleanup_exports as Cleanup, connection_exports as Connection, domain_exports as Domain, domain_kit_exports as DomainKit, messages_exports as Messages, operations_exports as Operations, provider_exports as Provider, provisioning_exports as Provisioning, records_exports as Records, testing_exports as Testing, theme_exports as Theme, verification_exports as Verification };
+export { cleanup_exports as Cleanup, connection_exports as Connection, domain_exports as Domain, domain_kit_exports as DomainKit, lifecycle_exports as Lifecycle, messages_exports as Messages, operations_exports as Operations, provider_exports as Provider, provisioning_exports as Provisioning, records_exports as Records, testing_exports as Testing, theme_exports as Theme, verification_exports as Verification };
 
 //# sourceMappingURL=index.mjs.map