@domainkit/react 0.1.1 → 0.3.0

package/dist/index.mjs

@@ -1,8 +1,34 @@
 import { t as __exportAll } from "./rolldown-runtime-D7D4PA-g.mjs";
 import { Dialog } from "@base-ui/react/dialog";
-import { createContext, useCallback, useContext, useEffect, useId, useInsertionEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
+import { RegistryProvider, useAtomSet, useAtomValue } from "@effect/atom-react";
+import { 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 { useRender } from "@base-ui/react/use-render";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import * as AsyncResult from "effect/unstable/reactivity/AsyncResult";
+//#region src/atom.ts
+const Failure = Data.taggedEnum();
+const failureFromError = (error) => Failure.Failure({
+	message: error.message,
+	operation: error.operation,
+	retry: error.retry
+});
+const failureFromDefect = (operation, message) => Failure.Failure({
+	message,
+	operation,
+	retry: "safe"
+});
+const recordsIdentity = (records) => JSON.stringify(records.map(({ id, name, priority, type, value }) => ({
+	id,
+	name,
+	priority,
+	type,
+	value
+})));
+//#endregion
 //#region src/composition.tsx
 function usePart(defaultTagName, componentProps, state, internalProps) {
 	const { className, render, style, ...externalProps } = componentProps;
@@ -81,6 +107,7 @@ const english = {
 	cleaningDns: "Removing records…",
 	connectProvider: () => "Connect",
 	connected: (provider) => `${provider} connected`,
+	providerAvailable: (provider) => `${provider} manages DNS for this domain`,
 	connecting: "Connecting…",
 	close: "Close",
 	detectingProvider: "Detecting DNS provider…",
@@ -128,7 +155,7 @@ function toStyle(theme = {}) {
 //#endregion
 //#region src/domain-kit.tsx
 var domain_kit_exports = /* @__PURE__ */ __exportAll({
-	Root: () => Root$2,
+	Root: () => Root$6,
 	useDomainKit: () => useDomainKit
 });
 const Context = createContext(null);
@@ -154,7 +181,8 @@ const usePortalContainer = (container) => {
 	const getSnapshot = useCallback(() => resolvePortalContainer(container, ownerDocument), [container, ownerDocument]);
 	return useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
 };
-function Root$2({ children, colorScheme = "inherit", icons, marks = {}, messages, navigate = navigateInBrowser, portalContainer = null, theme, transport, ...props }) {
+function Root$6({ children, colorScheme = "inherit", icons, marks = {}, messages, navigate = navigateInBrowser, portalContainer = null, theme, transport, ...props }) {
+	const runtime = useMemo(() => Atom.runtime(transport), [transport]);
 	const themeStyle = toStyle(theme);
 	const resolvedPortalContainer = usePortalContainer(portalContainer);
 	const portalContainerRef = useMemo(() => ({ current: resolvedPortalContainer }), [resolvedPortalContainer]);
@@ -164,21 +192,21 @@ function Root$2({ children, colorScheme = "inherit", icons, marks = {}, messages
 		"data-domainkit-root": "",
 		style: themeStyle
 	});
-	return /* @__PURE__ */ jsx(Context.Provider, {
+	return /* @__PURE__ */ jsx(RegistryProvider, { children: /* @__PURE__ */ jsx(Context.Provider, {
 		value: {
 			colorScheme,
 			marks,
 			messages: merge(messages),
 			navigate,
 			portalContainer: portalContainerRef,
-			themeStyle,
-			transport
+			runtime,
+			themeStyle
 		},
 		children: /* @__PURE__ */ jsx(IconsProvider, {
 			...icons === void 0 ? {} : { icons },
 			children: content
 		})
-	});
+	}) });
 }
 function useDomainKit() {
 	const value = useContext(Context);
@@ -186,249 +214,221 @@ function useDomainKit() {
 	return value;
 }
 //#endregion
-//#region src/request-state.ts
-function useController$4(identity, initial) {
-	const currentIdentity = useRef(identity);
-	const revision = useRef(0);
-	const [snapshot, setSnapshot] = useState(() => ({
-		identity,
-		state: initial
-	}));
-	useInsertionEffect(() => {
-		currentIdentity.current = identity;
-		revision.current += 1;
-	}, [identity]);
-	useEffect(() => {
-		setSnapshot({
-			identity,
-			state: initial
-		});
-	}, [identity]);
-	return {
-		begin: useCallback((state) => {
-			const request = ++revision.current;
-			setSnapshot({
-				identity: currentIdentity.current,
-				state
-			});
-			return request;
-		}, []),
-		commit: useCallback((request, state) => {
-			if (revision.current !== request) return false;
-			setSnapshot({
-				identity: currentIdentity.current,
-				state
-			});
-			return true;
-		}, []),
-		reset: useCallback((state) => {
-			revision.current += 1;
-			setSnapshot({
-				identity: currentIdentity.current,
-				state
-			});
-		}, []),
-		state: snapshot.identity === identity ? snapshot.state : initial
+//#region src/operations.tsx
+var operations_exports = /* @__PURE__ */ __exportAll({
+	Item: () => Item,
+	Kind: () => Kind,
+	List: () => List,
+	Name: () => Name,
+	Priority: () => Priority$1,
+	Reason: () => Reason,
+	Record: () => Record,
+	Root: () => Root$5,
+	Type: () => Type,
+	Value: () => Value$1
+});
+function leafPart$1(defaultTagName, part) {
+	return function Leaf(props) {
+		return usePart(defaultTagName, props, {}, { "data-domainkit-part": part });
 	};
 }
-const recordsIdentity = (records) => JSON.stringify(records.map((record) => [
-	record.id,
-	record.name,
-	record.priority ?? null,
-	record.type,
-	record.value
-]));
+const Kind = leafPart$1("span", "operation-kind");
+const Type = leafPart$1("strong", "operation-type");
+const Record = leafPart$1("span", "operation-record");
+const Name = leafPart$1("span", "operation-name");
+const Value$1 = leafPart$1("code", "operation-value");
+const Priority$1 = leafPart$1("span", "operation-priority");
+const Reason = leafPart$1("span", "operation-reason");
+function Item({ operation, ...props }) {
+	return usePart("li", props, { operation: operation._tag }, {
+		children: /* @__PURE__ */ jsxs(Fragment, { children: [
+			/* @__PURE__ */ jsx(Kind, { children: operation._tag }),
+			" ",
+			/* @__PURE__ */ jsx(Type, { children: operation.record.type }),
+			" ",
+			/* @__PURE__ */ jsxs(Record, { children: [
+				/* @__PURE__ */ jsx(Name, { children: operation.record.name }),
+				/* @__PURE__ */ jsx(Value$1, { children: operation.record.value }),
+				operation.record.priority === void 0 ? null : /* @__PURE__ */ jsxs(Priority$1, { children: ["Priority ", operation.record.priority] }),
+				"reason" in operation ? /* @__PURE__ */ jsx(Reason, { children: operation.reason }) : null
+			] })
+		] }),
+		"data-domainkit-part": "operation-item",
+		"data-operation": operation._tag
+	});
+}
+function Root$5({ count = 0, lifecycle, ...props }) {
+	return usePart("ul", props, {
+		count,
+		lifecycle
+	}, {
+		"data-domainkit-part": lifecycle === "provisioning" ? "plan-operations" : "cleanup-operations",
+		"data-lifecycle": lifecycle
+	});
+}
+function List({ lifecycle, operations, ...props }) {
+	return /* @__PURE__ */ jsx(Root$5, {
+		count: operations.length,
+		lifecycle,
+		...props,
+		children: operations.map((operation) => /* @__PURE__ */ jsx(Item, { operation }, operation.id))
+	});
+}
 //#endregion
 //#region src/cleanup.tsx
 var cleanup_exports = /* @__PURE__ */ __exportAll({
+	Command: () => Command$3,
+	Dialog: () => Dialog$3,
 	Flow: () => Flow$3,
-	useController: () => useController$3
+	Outcome: () => Outcome$2,
+	Root: () => Root$4,
+	State: () => State$3,
+	useController: () => useController$3,
+	useModel: () => useModel$3
 });
-function useController$3(connection, receiptId) {
-	const { transport } = useDomainKit();
-	const requestState = useController$4(`${connection.connectionId}:${connection.domain}:${receiptId}`, { _tag: "Idle" });
-	const state = requestState.state;
-	const plan = useCallback(async () => {
-		const request = requestState.begin({ _tag: "Planning" });
-		try {
-			const result = await transport.cleanup.plan({
-				connectionId: connection.connectionId,
-				domain: connection.domain,
-				receiptId
-			});
-			requestState.commit(request, result._tag === "CleanupPlan" ? {
-				_tag: "Review",
-				plan: result
-			} : result);
-		} catch (cause) {
-			requestState.commit(request, toFailure(cause));
-		}
+const State$3 = Data.taggedEnum();
+const Command$3 = Data.taggedEnum();
+function useModel$3(connection, receiptId) {
+	const { runtime } = useDomainKit();
+	return useMemo(() => {
+		const state = Atom.make(State$3.Idle());
+		return {
+			command: runtime.fn()((command, get) => {
+				if (command._tag === "Dismiss") {
+					get.set(state, State$3.Idle());
+					return Effect.void;
+				}
+				if (command._tag === "Plan") {
+					get.set(state, State$3.Planning());
+					return Effect.flatMap(Transport.Service, (transport) => transport.cleanup.plan({
+						connectionId: connection.connectionId,
+						domain: connection.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,
+					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);
+			}),
+			state
+		};
 	}, [
 		connection.connectionId,
 		connection.domain,
 		receiptId,
-		requestState,
-		transport
+		runtime
 	]);
+}
+function useController$3(connection, receiptId) {
+	const model = useModel$3(connection, receiptId);
+	const state = useAtomValue(model.state);
+	const execute = useAtomSet(model.command);
 	return {
-		apply: useCallback(async () => {
-			if (state._tag !== "Review") return;
-			const reviewedPlan = state.plan;
-			if (reviewedPlan.operations.some((operation) => operation._tag === "Blocked")) return;
-			const request = requestState.begin({
-				_tag: "Cleaning",
-				plan: reviewedPlan
-			});
-			try {
-				const result = await transport.cleanup.apply({
-					connectionId: connection.connectionId,
-					domain: connection.domain,
-					planDigest: reviewedPlan.digest,
-					receiptId
-				});
-				requestState.commit(request, result._tag === "Cleaned" ? {
-					_tag: "Cleaned",
-					result
-				} : result._tag === "Partial" ? {
-					_tag: "Partial",
-					result
-				} : result);
-			} catch (cause) {
-				requestState.commit(request, toFailure(cause));
-			}
-		}, [
-			connection.connectionId,
-			connection.domain,
-			receiptId,
-			requestState,
-			state,
-			transport
-		]),
-		dismiss: () => requestState.reset({ _tag: "Idle" }),
-		plan,
+		apply: () => execute(Command$3.Apply()),
+		dismiss: () => execute(Command$3.Dismiss()),
+		plan: () => execute(Command$3.Plan()),
 		state
 	};
 }
-const toFailure = (cause) => ({
-	_tag: "Failure",
-	message: cause instanceof Error ? cause.message : "Domain cleanup failed",
-	retry: "safe"
-});
-function Flow$3({ connection, receiptId, ...props }) {
-	const controller = useController$3(connection, receiptId);
+function Root$4({ status, ...props }) {
+	return usePart("div", props, { status }, {
+		"data-domainkit-part": "cleanup-flow",
+		"data-state": status
+	});
+}
+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",
+		role: "alert",
+		children: state._tag === "Partial" ? messages.cleanupPartial : state.message
+	});
+	return null;
+}
+function Dialog$3({ controller }) {
 	const { colorScheme, messages, portalContainer, themeStyle } = useDomainKit();
 	const state = controller.state;
 	const plan = state._tag === "Review" || state._tag === "Cleaning" ? state.plan : void 0;
-	return usePart("div", props, { status: state._tag }, {
-		children: /* @__PURE__ */ jsxs(Fragment, { children: [
-			state._tag === "Cleaned" ? /* @__PURE__ */ jsx("p", {
-				"data-domainkit-part": "flow-outcome",
-				"data-tone": "success",
-				children: messages.cleanupComplete
-			}) : null,
-			state._tag === "Partial" || state._tag === "Failure" || state._tag === "Stale" ? /* @__PURE__ */ jsx("p", {
-				"data-domainkit-part": "flow-outcome",
-				"data-tone": "danger",
-				role: "alert",
-				children: state._tag === "Partial" ? messages.cleanupPartial : state.message
-			}) : null,
-			/* @__PURE__ */ jsxs(Dialog.Root, {
-				onOpenChange: (open) => {
-					if (!open) controller.dismiss();
-				},
-				open: plan !== void 0,
-				children: [/* @__PURE__ */ jsx(Dialog.Trigger, {
-					"data-domainkit-part": "cleanup-trigger",
-					disabled: state._tag === "Planning" || state._tag === "Cleaning",
-					onClick: () => void 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, {
-						"data-color-scheme": colorScheme,
-						"data-domainkit-part": "cleanup-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: messages.reviewCleanup
-									}), /* @__PURE__ */ jsx(Dialog.Description, {
-										"data-domainkit-part": "dialog-description",
-										children: messages.cleanupConsent
-									})]
-								}), /* @__PURE__ */ jsx(Dialog.Close, {
-									"aria-label": messages.close,
-									"data-domainkit-part": "dialog-close",
-									children: "×"
-								})]
-							}),
-							/* @__PURE__ */ jsx("div", {
-								"data-domainkit-part": "dialog-body",
-								children: /* @__PURE__ */ jsx("ul", {
-									"data-domainkit-part": "cleanup-operations",
-									children: plan.operations.map((operation) => /* @__PURE__ */ jsxs("li", {
-										"data-operation": operation._tag,
-										children: [
-											/* @__PURE__ */ jsx("span", {
-												"data-domainkit-part": "operation-kind",
-												children: operation._tag
-											}),
-											" ",
-											/* @__PURE__ */ jsx("strong", {
-												"data-domainkit-part": "operation-type",
-												children: operation.record.type
-											}),
-											" ",
-											/* @__PURE__ */ jsxs("span", {
-												"data-domainkit-part": "operation-record",
-												children: [
-													/* @__PURE__ */ jsx("span", {
-														"data-domainkit-part": "operation-name",
-														children: operation.record.name
-													}),
-													/* @__PURE__ */ jsx("code", {
-														"data-domainkit-part": "operation-value",
-														children: operation.record.value
-													}),
-													operation.record.priority === void 0 ? null : /* @__PURE__ */ jsxs("span", {
-														"data-domainkit-part": "operation-priority",
-														children: ["Priority ", operation.record.priority]
-													}),
-													operation._tag === "Blocked" ? /* @__PURE__ */ jsx("span", {
-														"data-domainkit-part": "operation-reason",
-														children: operation.reason
-													}) : null
-												]
-											})
-										]
-									}, operation.id))
-								})
-							}),
-							/* @__PURE__ */ jsxs("div", {
-								"data-domainkit-part": "dialog-footer",
-								children: [/* @__PURE__ */ jsx(Dialog.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"),
-									onClick: () => void controller.apply(),
-									type: "button",
-									children: state._tag === "Cleaning" ? messages.cleaningDns : messages.applyCleanup
-								})]
-							})
-						]
-					})]
-				})]
-			})
-		] }),
-		"data-domainkit-part": "cleanup-flow",
-		"data-state": state._tag
+	return /* @__PURE__ */ jsxs(Dialog.Root, {
+		onOpenChange: (open) => {
+			if (!open) controller.dismiss();
+		},
+		open: plan !== void 0,
+		children: [/* @__PURE__ */ jsx(Dialog.Trigger, {
+			"data-domainkit-part": "cleanup-trigger",
+			disabled: state._tag === "Planning" || state._tag === "Cleaning",
+			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, {
+				"data-color-scheme": colorScheme,
+				"data-domainkit-part": "cleanup-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: messages.reviewCleanup
+							}), /* @__PURE__ */ jsx(Dialog.Description, {
+								"data-domainkit-part": "dialog-description",
+								children: messages.cleanupConsent
+							})]
+						}), /* @__PURE__ */ jsx(Dialog.Close, {
+							"aria-label": messages.close,
+							"data-domainkit-part": "dialog-close",
+							children: "×"
+						})]
+					}),
+					/* @__PURE__ */ jsx("div", {
+						"data-domainkit-part": "dialog-body",
+						children: /* @__PURE__ */ jsx(List, {
+							lifecycle: "cleanup",
+							operations: plan.operations
+						})
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						"data-domainkit-part": "dialog-footer",
+						children: [/* @__PURE__ */ jsx(Dialog.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"),
+							onClick: () => controller.apply(),
+							type: "button",
+							children: state._tag === "Cleaning" ? messages.cleaningDns : messages.applyCleanup
+						})]
+					})
+				]
+			})]
+		})]
+	});
+}
+function Flow$3({ connection, receiptId, ...props }) {
+	const controller = useController$3(connection, receiptId);
+	const state = controller.state;
+	return /* @__PURE__ */ jsxs(Root$4, {
+		status: state._tag,
+		...props,
+		children: [/* @__PURE__ */ jsx(Outcome$2, { state }), /* @__PURE__ */ jsx(Dialog$3, { controller })]
 	});
 }
 //#endregion
@@ -531,139 +531,128 @@ function Mark({ provider, ...props }) {
 //#endregion
 //#region src/connection.tsx
 var connection_exports = /* @__PURE__ */ __exportAll({
-	Dialog: () => Dialog$1,
+	Command: () => Command$2,
+	ConnectTrigger: () => ConnectTrigger,
+	Dialog: () => Dialog$2,
 	DisconnectAction: () => DisconnectAction,
+	DisconnectState: () => DisconnectState,
 	Flow: () => Flow$2,
 	OAuthAction: () => OAuthAction,
-	RetryAction: () => RetryAction,
+	RetryAction: () => RetryAction$1,
 	ReuseAction: () => ReuseAction,
-	Root: () => Root$1,
+	Root: () => Root$3,
+	State: () => State$2,
 	Status: () => Status$2,
 	TokenAction: () => TokenAction,
 	Trigger: () => Trigger,
 	useController: () => useController$2,
-	useDisconnect: () => useDisconnect
+	useDisconnect: () => useDisconnect,
+	useModel: () => useModel$2
 });
-const failure$1 = (cause) => ({
-	_tag: "Failure",
-	message: cause instanceof Error ? cause.message : "The connection request failed",
-	retry: "safe"
-});
-function useController$2(domain) {
-	const { navigate, transport } = useDomainKit();
-	const [attempt, setAttempt] = useState(0);
-	const [state, setState] = useState({ _tag: "Loading" });
-	const activeRequest = useRef(0);
-	useEffect(() => {
-		const request = ++activeRequest.current;
-		setState({ _tag: "Loading" });
-		transport.connection.inspect({ domain }).then((snapshot) => {
-			if (activeRequest.current === request) setState(snapshot);
-		}, (cause) => {
-			if (activeRequest.current === request) setState(failure$1(cause));
+const State$2 = Data.taggedEnum();
+const Command$2 = Data.taggedEnum();
+function useModel$2(domain) {
+	const { navigate, runtime } = useDomainKit();
+	return useMemo(() => {
+		const actionState = Atom.make(void 0);
+		const inspect = runtime.atom(Effect.flatMap(Transport.Service, (transport) => transport.connection.inspect({ domain })));
+		const state = Atom.make((get) => {
+			const action = get(actionState);
+			if (action !== void 0) return action;
+			const inspection = get(inspect);
+			return AsyncResult.matchWithError(inspection, {
+				onDefect: () => failureFromDefect("connection.inspect", "Provider detection failed"),
+				onError: failureFromError,
+				onInitial: () => State$2.Loading(),
+				onSuccess: ({ value }) => value
+			});
 		});
-		return () => {
-			if (activeRequest.current === request) activeRequest.current += 1;
+		return {
+			command: runtime.fn()((input, get) => {
+				if (input._tag === "Retry") {
+					get.set(actionState, void 0);
+					get.refresh(inspect);
+					return Effect.void;
+				}
+				const snapshot = get(state);
+				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(() => {
+					if (result._tag === "Redirect") {
+						get.set(actionState, State$2.Redirecting({ snapshot }));
+						navigate(result.authorizationUrl);
+					} else get.set(actionState, result);
+				})), Effect.catch((error) => Effect.sync(() => get.set(actionState, failureFromError(error)))), Effect.asVoid);
+				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
+				})));
+			}),
+			state
 		};
 	}, [
-		attempt,
 		domain,
-		transport
+		navigate,
+		runtime
 	]);
+}
+function useController$2(domain) {
+	const model = useModel$2(domain);
+	const state = useAtomValue(model.state);
+	const execute = useAtomSet(model.command);
 	return {
-		connect: useCallback(async (method, token, parameters) => {
-			if (state._tag !== "Disconnected") return;
-			const request = ++activeRequest.current;
-			const snapshot = state;
-			setState({
-				_tag: "Submitting",
-				snapshot
-			});
-			try {
-				const result = await transport.connection.connect({
-					domain,
-					method,
-					...parameters === void 0 ? {} : { parameters },
-					providerId: snapshot.provider.id,
-					...token === void 0 ? {} : { token }
-				});
-				if (activeRequest.current !== request) return;
-				if (result._tag === "Redirect") {
-					setState({
-						_tag: "Redirecting",
-						snapshot
-					});
-					navigate(result.authorizationUrl);
-					return;
-				}
-				setState(result);
-			} catch (cause) {
-				if (activeRequest.current === request) setState(failure$1(cause));
-			}
-		}, [
-			domain,
-			navigate,
-			state,
-			transport
-		]),
-		retry: () => setAttempt((current) => current + 1),
-		reuse: useCallback(async () => {
-			if (state._tag !== "Disconnected" || state.reusableConnection === void 0) return;
-			const request = ++activeRequest.current;
-			const snapshot = state;
-			const reusableConnection = state.reusableConnection;
-			setState({
-				_tag: "Submitting",
-				snapshot
-			});
-			try {
-				const result = await transport.connection.reuse({
-					connectionId: reusableConnection.connectionId,
-					domain
-				});
-				if (activeRequest.current === request) setState(result);
-			} catch (cause) {
-				if (activeRequest.current === request) setState(failure$1(cause));
-			}
-		}, [
-			domain,
-			state,
-			transport
-		]),
+		connect: (method) => execute(Command$2.Connect({ method })),
+		retry: () => execute(Command$2.Retry()),
+		reuse: () => execute(Command$2.Reuse()),
 		state
 	};
 }
-function Root$1({ children, status = "Loading", ...props }) {
+function Root$3({ children, status = "Loading", ...props }) {
 	return usePart("div", props, { status }, {
 		children,
 		"data-domainkit-part": "connection-root"
 	});
 }
-function Status$2({ state, ...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 : `${state.provider.name} is available`;
+	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);
 	return usePart("div", props, { status: state._tag }, {
-		children: text,
+		children: children ?? text,
 		"data-domainkit-part": "connection-status",
 		"data-state": state._tag
 	});
 }
-function Trigger({ provider, ...props }) {
-	const { messages } = useDomainKit();
-	return /* @__PURE__ */ jsxs(Dialog.Trigger, {
+function Trigger({ children, ...props }) {
+	return /* @__PURE__ */ jsx(Dialog.Trigger, {
 		"data-domainkit-part": "connection-trigger",
 		...props,
-		children: [/* @__PURE__ */ jsx(Mark, {
+		children
+	});
+}
+function ConnectTrigger({ children, provider, ...props }) {
+	const { messages } = useDomainKit();
+	return /* @__PURE__ */ jsx(Trigger, {
+		...props,
+		"data-domainkit-recipe": "connect",
+		children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Mark, {
 			"aria-hidden": "true",
 			provider
-		}), messages.connectProvider(provider.name)]
+		}), messages.connectProvider(provider.name)] })
 	});
 }
 function OAuthAction({ controller, label, ...props }) {
 	return usePart("button", props, { authentication: "oauth" }, {
 		children: label,
 		"data-domainkit-part": "oauth-connect",
-		onClick: () => void controller.connect("oauth"),
+		onClick: () => controller.connect(Transport.Method.OAuth()),
 		type: "button"
 	});
 }
@@ -683,7 +672,10 @@ function TokenAction({ controller, method, ...props }) {
 		event.preventDefault();
 		if (token.length > 0) {
 			const populated = Object.fromEntries(Object.entries(parameters).filter(([, value]) => value.length > 0));
-			controller.connect("token", token, Object.keys(populated).length === 0 ? void 0 : populated);
+			controller.connect(Transport.Method.Token({
+				token,
+				...Object.keys(populated).length === 0 ? {} : { parameters: populated }
+			}));
 		}
 	};
 	const missingRequiredParameter = method.parameters?.some((parameter) => parameter.required === true && !parameters[parameter.key]);
@@ -725,7 +717,7 @@ function TokenAction({ controller, method, ...props }) {
 		onSubmit: submit
 	});
 }
-function Dialog$1({ controller, snapshot }) {
+function Dialog$2({ controller, snapshot }) {
 	const { colorScheme, messages, portalContainer, themeStyle } = useDomainKit();
 	return /* @__PURE__ */ jsxs(Dialog.Portal, {
 		container: portalContainer,
@@ -788,23 +780,23 @@ function Flow$2({ domain, ...props }) {
 	const controller = useController$2(domain);
 	const state = controller.state;
 	const snapshot = state._tag === "Disconnected" ? state : state._tag === "Submitting" || state._tag === "Redirecting" ? state.snapshot : void 0;
-	return /* @__PURE__ */ jsxs(Root$1, {
+	return /* @__PURE__ */ jsxs(Root$3, {
 		...props,
 		status: state._tag,
 		children: [
 			/* @__PURE__ */ jsx(Status$2, { state }),
-			state._tag === "Failure" && state.retry !== "never" ? /* @__PURE__ */ jsx(RetryAction, {
+			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, { children: [/* @__PURE__ */ jsx(Trigger, { provider: snapshot.provider }), /* @__PURE__ */ jsx(Dialog$1, {
+			snapshot === void 0 ? null : /* @__PURE__ */ jsxs(Dialog.Root, { children: [/* @__PURE__ */ jsx(ConnectTrigger, { provider: snapshot.provider }), /* @__PURE__ */ jsx(Dialog$2, {
 				controller,
 				snapshot
 			})] })
 		]
 	});
 }
-function RetryAction({ controller, kind = "retry", ...props }) {
+function RetryAction$1({ controller, kind = "retry", ...props }) {
 	const { messages } = useDomainKit();
 	return usePart("button", props, { status: "Failure" }, {
 		children: kind === "after-user-action" ? messages.checkAgain : messages.retry,
@@ -813,28 +805,32 @@ function RetryAction({ controller, kind = "retry", ...props }) {
 		type: "button"
 	});
 }
+const DisconnectState = Data.taggedEnum();
 function useDisconnect(connection) {
-	const { transport } = useDomainKit();
-	const requestState = useController$4(`${connection.connectionId}:${connection.domain}:disconnect`, { _tag: "Idle" });
-	return {
-		disconnect: useCallback(async () => {
-			const request = requestState.begin({ _tag: "Disconnecting" });
-			try {
-				requestState.commit(request, await transport.connection.removeDomain({
+	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
-				}));
-			} catch (cause) {
-				requestState.commit(request, failure$1(cause));
-			}
-		}, [
-			connection.connectionId,
-			connection.domain,
-			requestState,
-			transport
-		]),
-		state: requestState.state
+				})).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 DisconnectAction({ connection, ...props }) {
@@ -880,13 +876,16 @@ var records_exports = /* @__PURE__ */ __exportAll({
 	Head: () => Head,
 	Header: () => Header,
 	Priority: () => Priority,
-	Root: () => Root,
+	Root: () => Root$2,
 	Row: () => Row,
 	Status: () => Status$1,
 	Table: () => Table,
 	Value: () => Value,
 	ZoneFile: () => ZoneFile,
-	toZoneFile: () => toZoneFile
+	copyText: () => copyText,
+	downloadZoneFile: () => downloadZoneFile,
+	toZoneFile: () => toZoneFile,
+	useCopy: () => useCopy
 });
 const copyText = (value) => {
 	if (typeof navigator === "undefined" || navigator.clipboard === void 0) return Promise.resolve(false);
@@ -952,23 +951,31 @@ function leafPart(defaultTagName, part) {
 		return usePart(defaultTagName, props, {}, { "data-domainkit-part": part });
 	};
 }
-function CopyValue({ copiedIcon, copiedLabel = "Copied", copyIcon, copyLabel = "Copy", value, ...props }) {
-	const icons = useIcons();
+function useCopy(value, resetAfter = 2e3) {
 	const [copied, setCopied] = useState(false);
 	const reset = useRef(void 0);
 	useEffect(() => () => clearTimeout(reset.current), []);
+	return {
+		copied,
+		copy: () => {
+			copyText(value).then((ok) => {
+				if (!ok) return;
+				setCopied(true);
+				clearTimeout(reset.current);
+				reset.current = setTimeout(() => setCopied(false), resetAfter);
+			});
+		}
+	};
+}
+function CopyValue({ copiedIcon, copiedLabel = "Copied", copyIcon, copyLabel = "Copy", value, ...props }) {
+	const icons = useIcons();
+	const controller = useCopy(value);
+	const copied = controller.copied;
 	return usePart("span", props, { copied }, {
 		children: /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("code", { children: value }), /* @__PURE__ */ jsxs("button", {
 			"aria-label": `${copied ? copiedLabel : copyLabel} ${value}`,
 			"data-domainkit-part": "copy-action",
-			onClick: () => {
-				copyText(value).then((ok) => {
-					if (!ok) return;
-					setCopied(true);
-					clearTimeout(reset.current);
-					reset.current = setTimeout(() => setCopied(false), 2e3);
-				});
-			},
+			onClick: controller.copy,
 			type: "button",
 			children: [/* @__PURE__ */ jsx("span", {
 				"aria-hidden": "true",
@@ -990,22 +997,13 @@ function CopyValue({ copiedIcon, copiedLabel = "Copied", copyIcon, copyLabel = "
 }
 function ZoneFile({ copiedIcon, copiedLabel = "Copied", copyIcon, copyLabel = "Copy zone", domain, downloadIcon, downloadLabel = "Download", records, ...props }) {
 	const icons = useIcons();
-	const [copied, setCopied] = useState(false);
-	const reset = useRef(void 0);
-	const zone = toZoneFile(records);
-	useEffect(() => () => clearTimeout(reset.current), []);
+	const controller = useCopy(toZoneFile(records));
+	const copied = controller.copied;
 	return usePart("div", props, { count: records.length }, {
 		children: /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("button", {
 			"aria-label": copied ? copiedLabel : copyLabel,
 			"data-domainkit-part": "zone-copy",
-			onClick: () => {
-				copyText(zone).then((ok) => {
-					if (!ok) return;
-					setCopied(true);
-					clearTimeout(reset.current);
-					reset.current = setTimeout(() => setCopied(false), 2e3);
-				});
-			},
+			onClick: controller.copy,
 			type: "button",
 			children: [/* @__PURE__ */ jsx("span", {
 				"aria-hidden": "true",
@@ -1014,7 +1012,7 @@ function ZoneFile({ copiedIcon, copiedLabel = "Copied", copyIcon, copyLabel = "C
 			}), copied ? copiedLabel : copyLabel]
 		}), /* @__PURE__ */ jsxs("button", {
 			"data-domainkit-part": "zone-download",
-			onClick: () => downloadText(`${domain}.txt`, zone),
+			onClick: () => downloadZoneFile(domain, records),
 			type: "button",
 			children: [/* @__PURE__ */ jsx("span", {
 				"aria-hidden": "true",
@@ -1049,7 +1047,7 @@ const Value = leafPart("span", "record-value");
 const CardHeader = leafPart("div", "record-card-head");
 const CardTitle = leafPart("strong", "record-card-title");
 const CardContent = leafPart("dl", "record-card-content");
-function Root({ count = 0, ...props }) {
+function Root$2({ count = 0, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		"data-domainkit-part": "records-panel",
 		children: usePart("table", props, { count }, { "data-domainkit-part": "records-table" })
@@ -1072,7 +1070,7 @@ function Card({ copiedIcon, copyIcon, evidence, record, ...props }) {
 }
 function Table({ copiedIcon, copyIcon, evidence, records, ...props }) {
 	const status = evidence !== void 0;
-	return /* @__PURE__ */ jsxs(Root, {
+	return /* @__PURE__ */ jsxs(Root$2, {
 		count: records.length,
 		...props,
 		children: [/* @__PURE__ */ jsx(Header, { children: /* @__PURE__ */ jsxs(Row, { children: [
@@ -1113,257 +1111,251 @@ function Table({ copiedIcon, copyIcon, evidence, records, ...props }) {
 	});
 }
 const toZoneFile = (records) => `${records.map((record) => `${absoluteDomainName(record.name)} IN ${record.type} ${record.priority === void 0 ? "" : `${record.priority} `}${zoneValue(record)}`).join("\n")}\n`;
+const downloadZoneFile = (domain, records) => downloadText(`${domain}.txt`, toZoneFile(records));
 //#endregion
 //#region src/provisioning.tsx
 var provisioning_exports = /* @__PURE__ */ __exportAll({
+	Command: () => Command$1,
+	Dialog: () => Dialog$1,
 	Flow: () => Flow$1,
-	OperationList: () => OperationList,
-	useController: () => useController$1
-});
-const failure = (cause) => ({
-	_tag: "Failure",
-	message: cause instanceof Error ? cause.message : "DNS provisioning failed",
-	retry: "safe"
+	Outcome: () => Outcome$1,
+	RetryAction: () => RetryAction,
+	Root: () => Root$1,
+	State: () => State$1,
+	useController: () => useController$1,
+	useModel: () => useModel$1
 });
-function useController$1(connection, records, onApplied) {
-	const { transport } = useDomainKit();
-	const requestState = useController$4(`${connection.connectionId}:${connection.domain}:${recordsIdentity(records)}`, { _tag: "Idle" });
-	const state = requestState.state;
-	const plan = useCallback(async () => {
-		const request = requestState.begin({ _tag: "Planning" });
-		try {
-			const result = await transport.provisioning.plan({
-				connectionId: connection.connectionId,
-				domain: connection.domain,
-				records
-			});
-			requestState.commit(request, result._tag === "Plan" ? {
-				_tag: "Review",
-				plan: result
-			} : result);
-		} catch (cause) {
-			requestState.commit(request, failure(cause));
-		}
+const State$1 = Data.taggedEnum();
+const Command$1 = Data.taggedEnum();
+function useModel$1(connection, records, onApplied) {
+	const { runtime } = useDomainKit();
+	const recordKey = recordsIdentity(records);
+	const onAppliedRef = useRef(onApplied);
+	onAppliedRef.current = onApplied;
+	return useMemo(() => {
+		const state = Atom.make(State$1.Idle());
+		return {
+			command: runtime.fn()((command, get) => {
+				if (command._tag === "Dismiss") {
+					get.set(state, State$1.Idle());
+					return Effect.void;
+				}
+				if (command._tag === "Plan") {
+					get.set(state, State$1.Planning());
+					return Effect.flatMap(Transport.Service, (transport) => transport.provisioning.plan({
+						connectionId: connection.connectionId,
+						domain: connection.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,
+					planDigest: plan.digest
+				})).pipe(Effect.tap((result) => Effect.sync(() => {
+					if (result._tag === "Applied") {
+						get.set(state, State$1.Complete({ result }));
+						onAppliedRef.current?.(result);
+					} else if (result._tag === "Partial") {
+						get.set(state, State$1.Partial({ result }));
+						onAppliedRef.current?.(result);
+					} else get.set(state, result);
+				})), Effect.catch((error) => Effect.sync(() => get.set(state, failureFromError(error)))), Effect.asVoid);
+			}),
+			state
+		};
 	}, [
 		connection.connectionId,
 		connection.domain,
-		records,
-		requestState,
-		transport
+		recordKey,
+		runtime
 	]);
+}
+function useController$1(connection, records, onApplied) {
+	const model = useModel$1(connection, records, onApplied);
+	const state = useAtomValue(model.state);
+	const execute = useAtomSet(model.command);
 	return {
-		apply: useCallback(async () => {
-			if (state._tag !== "Review") return;
-			const reviewedPlan = state.plan;
-			if (reviewedPlan.operations.some((operation) => operation._tag === "Conflict")) return;
-			const request = requestState.begin({
-				_tag: "Applying",
-				plan: reviewedPlan
-			});
-			try {
-				const result = await transport.provisioning.apply({
-					connectionId: connection.connectionId,
-					domain: connection.domain,
-					planDigest: reviewedPlan.digest
-				});
-				if (result._tag === "Applied") {
-					if (requestState.commit(request, {
-						_tag: "Complete",
-						result
-					})) onApplied?.(result);
-				} else if (result._tag === "Partial") {
-					if (requestState.commit(request, {
-						_tag: "Partial",
-						result
-					})) onApplied?.(result);
-				} else requestState.commit(request, result);
-			} catch (cause) {
-				requestState.commit(request, failure(cause));
-			}
-		}, [
-			connection.connectionId,
-			connection.domain,
-			onApplied,
-			requestState,
-			state,
-			transport
-		]),
-		dismiss: () => requestState.reset({ _tag: "Idle" }),
-		plan,
-		retry: plan,
+		apply: () => execute(Command$1.Apply()),
+		dismiss: () => execute(Command$1.Dismiss()),
+		plan: () => execute(Command$1.Plan()),
+		retry: () => execute(Command$1.Plan()),
 		state
 	};
 }
-function Flow$1({ connection, onApplied, records, showRecords = true, ...props }) {
-	const controller = useController$1(connection, records, onApplied);
+function Root$1({ status, ...props }) {
+	return usePart("div", props, { status }, {
+		"data-domainkit-part": "provisioning-flow",
+		"data-state": status
+	});
+}
+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",
+		role: "alert",
+		children: state._tag === "Partial" ? messages.recordsPartiallyApplied : state.message
+	});
+	return null;
+}
+function Dialog$1({ controller }) {
 	const { colorScheme, messages, portalContainer, themeStyle } = useDomainKit();
 	const state = controller.state;
 	const plan = state._tag === "Review" || state._tag === "Applying" ? state.plan : void 0;
-	return usePart("div", props, { status: state._tag }, {
-		children: /* @__PURE__ */ jsxs(Fragment, { children: [
-			showRecords ? /* @__PURE__ */ jsx(Table, { records }) : null,
-			state._tag === "Complete" ? /* @__PURE__ */ jsx("p", {
-				"data-domainkit-part": "flow-outcome",
-				"data-tone": "success",
-				children: messages.recordsApplied
-			}) : null,
-			state._tag === "Partial" ? /* @__PURE__ */ jsx("p", {
-				"data-domainkit-part": "flow-outcome",
-				"data-tone": "danger",
-				role: "alert",
-				children: messages.recordsPartiallyApplied
-			}) : null,
-			state._tag === "Failure" || state._tag === "Stale" ? /* @__PURE__ */ jsx("p", {
-				"data-domainkit-part": "flow-outcome",
-				"data-tone": "danger",
-				role: "alert",
-				children: state.message
-			}) : null,
-			/* @__PURE__ */ jsxs(Dialog.Root, {
-				onOpenChange: (open) => {
-					if (!open) controller.dismiss();
-				},
-				open: plan !== void 0,
-				children: [/* @__PURE__ */ jsx(Dialog.Trigger, {
-					"data-domainkit-part": "plan-trigger",
-					disabled: state._tag === "Planning" || state._tag === "Applying",
-					onClick: () => void 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, {
-						"data-color-scheme": colorScheme,
-						"data-domainkit-part": "plan-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: messages.reviewDns
-									}), /* @__PURE__ */ jsx(Dialog.Description, {
-										"data-domainkit-part": "dialog-description",
-										children: messages.planConsent
-									})]
-								}), /* @__PURE__ */ jsx(Dialog.Close, {
-									"aria-label": messages.close,
-									"data-domainkit-part": "dialog-close",
-									children: "×"
-								})]
-							}),
-							/* @__PURE__ */ jsx("div", {
-								"data-domainkit-part": "dialog-body",
-								children: /* @__PURE__ */ jsx(OperationList, { plan })
-							}),
-							/* @__PURE__ */ jsxs("div", {
-								"data-domainkit-part": "dialog-footer",
-								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"),
-									onClick: () => void controller.apply(),
-									type: "button",
-									children: state._tag === "Applying" ? messages.applyingDns : messages.applyDns
-								})]
-							})
-						]
-					})]
-				})]
-			}),
-			state._tag === "Failure" || state._tag === "Stale" || state._tag === "Partial" ? /* @__PURE__ */ jsx("button", {
-				"data-domainkit-part": "provisioning-retry",
-				onClick: () => void controller.retry(),
-				type: "button",
-				children: messages.retry
-			}) : null
-		] }),
-		"data-domainkit-part": "provisioning-flow",
-		"data-state": state._tag
+	return /* @__PURE__ */ jsxs(Dialog.Root, {
+		onOpenChange: (open) => {
+			if (!open) controller.dismiss();
+		},
+		open: plan !== void 0,
+		children: [/* @__PURE__ */ jsx(Dialog.Trigger, {
+			"data-domainkit-part": "plan-trigger",
+			disabled: state._tag === "Planning" || state._tag === "Applying",
+			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, {
+				"data-color-scheme": colorScheme,
+				"data-domainkit-part": "plan-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: messages.reviewDns
+							}), /* @__PURE__ */ jsx(Dialog.Description, {
+								"data-domainkit-part": "dialog-description",
+								children: messages.planConsent
+							})]
+						}), /* @__PURE__ */ jsx(Dialog.Close, {
+							"aria-label": messages.close,
+							"data-domainkit-part": "dialog-close",
+							children: "×"
+						})]
+					}),
+					/* @__PURE__ */ jsx("div", {
+						"data-domainkit-part": "dialog-body",
+						children: /* @__PURE__ */ jsx(List, {
+							lifecycle: "provisioning",
+							operations: plan.operations
+						})
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						"data-domainkit-part": "dialog-footer",
+						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"),
+							onClick: () => controller.apply(),
+							type: "button",
+							children: state._tag === "Applying" ? messages.applyingDns : messages.applyDns
+						})]
+					})
+				]
+			})]
+		})]
 	});
 }
-function OperationList({ plan }) {
-	return /* @__PURE__ */ jsx("ul", {
-		"data-domainkit-part": "plan-operations",
-		children: plan.operations.map((operation) => /* @__PURE__ */ jsxs("li", {
-			"data-operation": operation._tag,
-			children: [
-				/* @__PURE__ */ jsx("span", {
-					"data-domainkit-part": "operation-kind",
-					children: operation._tag
-				}),
-				" ",
-				/* @__PURE__ */ jsx("strong", {
-					"data-domainkit-part": "operation-type",
-					children: operation.record.type
-				}),
-				" ",
-				/* @__PURE__ */ jsxs("span", {
-					"data-domainkit-part": "operation-record",
-					children: [
-						/* @__PURE__ */ jsx("span", {
-							"data-domainkit-part": "operation-name",
-							children: operation.record.name
-						}),
-						/* @__PURE__ */ jsx("code", {
-							"data-domainkit-part": "operation-value",
-							children: operation.record.value
-						}),
-						operation.record.priority === void 0 ? null : /* @__PURE__ */ jsxs("span", {
-							"data-domainkit-part": "operation-priority",
-							children: ["Priority ", operation.record.priority]
-						}),
-						operation._tag === "Conflict" ? /* @__PURE__ */ jsx("span", {
-							"data-domainkit-part": "operation-reason",
-							children: operation.reason
-						}) : null
-					]
-				})
-			]
-		}, operation.id))
+function RetryAction({ controller }) {
+	const { messages } = useDomainKit();
+	const state = controller.state;
+	if (state._tag !== "Failure" && state._tag !== "Stale" && state._tag !== "Partial") return null;
+	return /* @__PURE__ */ jsx("button", {
+		"data-domainkit-part": "provisioning-retry",
+		onClick: () => controller.retry(),
+		type: "button",
+		children: messages.retry
+	});
+}
+function Flow$1({ connection, onApplied, records, showRecords = true, ...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 })
+		]
 	});
 }
 //#endregion
 //#region src/verification.tsx
 var verification_exports = /* @__PURE__ */ __exportAll({
+	Command: () => Command,
+	Evidence: () => Evidence,
+	ObserveAction: () => ObserveAction,
+	Outcome: () => Outcome,
+	Root: () => Root,
+	State: () => State,
 	Status: () => Status,
-	useController: () => useController
+	useController: () => useController,
+	useModel: () => useModel
 });
-function useController(config) {
-	const { transport } = useDomainKit();
-	const sources = {
-		provider: config.sources?.provider ?? config.connection !== void 0,
-		publicDns: config.sources?.publicDns ?? true
-	};
-	const requestState = useController$4(`${config.connection?.connectionId ?? "public"}:${config.domain}:${sources.provider}:${sources.publicDns}:${recordsIdentity(config.records)}`, { _tag: "Idle" });
-	const state = requestState.state;
-	return {
-		observe: useCallback(async () => {
-			const request = requestState.begin({ _tag: "Observing" });
-			try {
-				requestState.commit(request, await transport.verification.observe({
+const State = Data.taggedEnum();
+const Command = Data.taggedEnum();
+function useModel(config) {
+	const { runtime } = useDomainKit();
+	const provider = config.sources?.provider ?? config.connection !== void 0;
+	const publicDns = config.sources?.publicDns ?? true;
+	const recordKey = recordsIdentity(config.records);
+	return useMemo(() => {
+		const state = Atom.make(State.Idle());
+		return {
+			command: runtime.fn()((command, get) => {
+				if (command._tag === "Reset") {
+					get.set(state, State.Idle());
+					return Effect.void;
+				}
+				get.set(state, State.Observing());
+				return Effect.flatMap(Transport.Service, (transport) => transport.verification.observe({
 					...config.connection === void 0 ? {} : { connectionId: config.connection.connectionId },
 					domain: config.domain,
 					records: config.records,
-					sources
-				}));
-			} catch (cause) {
-				requestState.commit(request, {
-					_tag: "Failure",
-					message: cause instanceof Error ? cause.message : "DNS observation failed",
-					retry: "safe"
-				});
-			}
-		}, [
-			config,
-			requestState,
-			sources,
-			transport
-		]),
+					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);
+			}),
+			state
+		};
+	}, [
+		config.connection?.connectionId,
+		config.domain,
+		provider,
+		publicDns,
+		recordKey,
+		runtime
+	]);
+}
+function useController(config) {
+	const model = useModel(config);
+	const state = useAtomValue(model.state);
+	const dispatch = useAtomSet(model.command);
+	const observe = () => dispatch(Command.Observe());
+	const reset = () => dispatch(Command.Reset());
+	return {
+		observe,
+		reset,
 		state
 	};
 }
@@ -1383,46 +1375,66 @@ const observationGroups = (observation) => [{
 	evidence: observation.publicDns,
 	label: "Public DNS"
 }].filter((group) => group.evidence.length > 0);
+function Root({ status, ...props }) {
+	return usePart("div", props, { status }, {
+		"data-domainkit-part": "verification-status",
+		"data-state": status
+	});
+}
+function Evidence({ observation }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-domainkit-part": "observation-list",
+		children: observationGroups(observation).map((group) => /* @__PURE__ */ jsxs("section", {
+			"data-domainkit-part": "observation-group",
+			children: [/* @__PURE__ */ jsx("p", {
+				"data-domainkit-part": "observation-source",
+				children: group.label
+			}), /* @__PURE__ */ jsx("ul", { children: group.evidence.map((evidence, index) => {
+				const note = evidenceNote(evidence);
+				return /* @__PURE__ */ jsxs("li", { children: [/* @__PURE__ */ jsxs("div", {
+					"data-domainkit-part": "observation-row",
+					children: [/* @__PURE__ */ jsx("span", {
+						"data-domainkit-part": "observation-record",
+						children: evidence.recordId
+					}), /* @__PURE__ */ jsx(Status$1, { evidence })]
+				}), note === void 0 ? null : /* @__PURE__ */ jsx("p", {
+					"data-domainkit-part": "observation-note",
+					children: note
+				})] }, `${evidence._tag}-${evidence.recordId}-${index}`);
+			}) })]
+		}, group.label))
+	});
+}
+function Outcome({ state }) {
+	if (state._tag !== "Failure") return null;
+	return /* @__PURE__ */ jsx("p", {
+		"data-domainkit-part": "flow-outcome",
+		"data-tone": "danger",
+		role: "alert",
+		children: state.message
+	});
+}
+function ObserveAction({ controller }) {
+	const { messages } = useDomainKit();
+	return /* @__PURE__ */ jsx("button", {
+		"data-domainkit-part": "observe-action",
+		disabled: controller.state._tag === "Observing",
+		onClick: () => controller.observe(),
+		type: "button",
+		children: controller.state._tag === "Observing" ? messages.checkingDns : messages.checkDns
+	});
+}
 function Status({ config, ...props }) {
 	const controller = useController(config);
-	const { messages } = useDomainKit();
 	const state = controller.state;
-	return usePart("div", props, { status: state._tag }, {
-		children: /* @__PURE__ */ jsxs(Fragment, { children: [state._tag === "Observation" ? /* @__PURE__ */ jsx("div", {
-			"data-domainkit-part": "observation-list",
-			children: observationGroups(state).map((group) => /* @__PURE__ */ jsxs("section", {
-				"data-domainkit-part": "observation-group",
-				children: [/* @__PURE__ */ jsx("p", {
-					"data-domainkit-part": "observation-source",
-					children: group.label
-				}), /* @__PURE__ */ jsx("ul", { children: group.evidence.map((evidence, index) => {
-					const note = evidenceNote(evidence);
-					return /* @__PURE__ */ jsxs("li", { children: [/* @__PURE__ */ jsxs("div", {
-						"data-domainkit-part": "observation-row",
-						children: [/* @__PURE__ */ jsx("span", {
-							"data-domainkit-part": "observation-record",
-							children: evidence.recordId
-						}), /* @__PURE__ */ jsx(Status$1, { evidence })]
-					}), note === void 0 ? null : /* @__PURE__ */ jsx("p", {
-						"data-domainkit-part": "observation-note",
-						children: note
-					})] }, `${evidence._tag}-${evidence.recordId}-${index}`);
-				}) })]
-			}, group.label))
-		}) : state._tag === "Failure" ? /* @__PURE__ */ jsx("p", {
-			"data-domainkit-part": "flow-outcome",
-			"data-tone": "danger",
-			role: "alert",
-			children: state.message
-		}) : null, /* @__PURE__ */ jsx("button", {
-			"data-domainkit-part": "observe-action",
-			disabled: state._tag === "Observing",
-			onClick: () => void controller.observe(),
-			type: "button",
-			children: state._tag === "Observing" ? messages.checkingDns : messages.checkDns
-		})] }),
-		"data-domainkit-part": "verification-status",
-		"data-state": state._tag
+	return /* @__PURE__ */ jsxs(Root, {
+		status: state._tag,
+		...props,
+		children: [
+			state._tag === "Observation" ? /* @__PURE__ */ jsx(Evidence, { observation: state }) : null,
+			/* @__PURE__ */ jsx(Outcome, { state }),
+			/* @__PURE__ */ jsx(ObserveAction, { controller })
+		]
 	});
 }
 //#endregion
@@ -1431,12 +1443,12 @@ var domain_exports = /* @__PURE__ */ __exportAll({ Flow: () => Flow });
 function Flow({ domain, receiptId, records }) {
 	const connection = useController$2(domain);
 	const state = connection.state;
-	return /* @__PURE__ */ jsxs(Root$1, {
+	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, { controller: connection }) : null,
-			state._tag === "Disconnected" ? /* @__PURE__ */ jsxs(Dialog.Root, { children: [/* @__PURE__ */ jsx(Trigger, { provider: state.provider }), /* @__PURE__ */ jsx(Dialog$1, {
+			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,
@@ -1537,8 +1549,7 @@ function makeFakeTransport(options) {
 		reuse: []
 	};
 	const inspections = Array.isArray(options.inspect) ? [...options.inspect] : [options.inspect];
-	return {
-		calls,
+	const transport = {
 		cleanup: {
 			apply: async (input) => {
 				calls.cleanupApply.push(input);
@@ -1570,7 +1581,14 @@ function makeFakeTransport(options) {
 			},
 			inspect: async (input) => {
 				calls.inspect.push(input);
-				return inspections.shift() ?? inspections.at(-1) ?? options.inspect;
+				const snapshot = inspections.shift() ?? inspections.at(-1) ?? options.inspect;
+				if (Array.isArray(snapshot)) throw new Error("Fake inspection sequence is empty");
+				if (snapshot._tag === "Failure") throw new Transport.Failure({
+					message: snapshot.message,
+					operation: snapshot.operation ?? "connection.inspect",
+					retry: snapshot.retry
+				});
+				return snapshot;
 			},
 			reuse: async (input) => {
 				calls.reuse.push(input);
@@ -1630,11 +1648,9 @@ function makeFakeTransport(options) {
 			};
 		} }
 	};
+	return Object.assign(Transport.layerFromAsync(transport), transport, { calls });
 }
 //#endregion
-//#region src/transport.ts
-var transport_exports = /* @__PURE__ */ __exportAll({});
-//#endregion
-export { cleanup_exports as Cleanup, connection_exports as Connection, domain_exports as Domain, domain_kit_exports as DomainKit, messages_exports as Messages, provider_exports as Provider, provisioning_exports as Provisioning, records_exports as Records, testing_exports as Testing, theme_exports as Theme, transport_exports as Transport, verification_exports as Verification };
+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 };
 
 //# sourceMappingURL=index.mjs.map