@domainkit/react 0.10.0 → 0.12.0

package/dist/index.mjs

@@ -2,110 +2,14 @@
 import { t as __exportAll } from "./rolldown-runtime-D7D4PA-g.mjs";
 import { DnsRecord, DomainKit, Reason, Receipt } from "domainkit";
 import * as Effect from "effect/Effect";
-import { createContext, useCallback, useContext, useEffect, useId, useLayoutEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
+import { createContext, useCallback, useContext, useEffect, useId, useLayoutEffect, useMemo, useRef, useState } from "react";
 import * as Data from "effect/Data";
 import { Transport } from "domainkit/client";
-import { useRender } from "@base-ui/react/use-render";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import * as Exit from "effect/Exit";
 import * as Option from "effect/Option";
-import { Dialog } from "@base-ui/react/dialog";
-import { Popover } from "@base-ui/react/popover";
 import * as DateTime from "effect/DateTime";
 import { Testing } from "domainkit/testing";
-//#region src/composition.tsx
-function usePart(defaultTagName, componentProps, state, internalProps) {
-	const { className, render, style, ...externalProps } = componentProps;
-	const parameters = {
-		...className === void 0 ? {} : { className },
-		defaultTagName,
-		props: [internalProps, externalProps],
-		...render === void 0 ? {} : { render },
-		state,
-		...style === void 0 ? {} : { style }
-	};
-	return useRender(parameters);
-}
-/** A part with no state of its own: one tag, one `data-domainkit-part`, host props on top. */
-function leafPart(defaultTagName, part) {
-	return function Leaf(props) {
-		return usePart(defaultTagName, props, {}, { "data-domainkit-part": part });
-	};
-}
-//#endregion
-//#region src/icons.tsx
-function Glyph({ children }) {
-	return /* @__PURE__ */ jsx("svg", {
-		"aria-hidden": "true",
-		fill: "none",
-		stroke: "currentColor",
-		strokeLinecap: "round",
-		strokeLinejoin: "round",
-		strokeWidth: 2,
-		viewBox: "0 0 24 24",
-		children
-	});
-}
-const defaultIcons = {
-	close: /* @__PURE__ */ jsxs(Glyph, { children: [/* @__PURE__ */ jsx("path", { d: "M18 6 6 18" }), /* @__PURE__ */ jsx("path", { d: "m6 6 12 12" })] }),
-	copied: /* @__PURE__ */ jsx(Glyph, { children: /* @__PURE__ */ jsx("path", { d: "M20 6 9 17l-5-5" }) }),
-	copy: /* @__PURE__ */ jsxs(Glyph, { children: [/* @__PURE__ */ jsx("rect", {
-		height: "14",
-		rx: "2",
-		width: "14",
-		x: "8",
-		y: "8"
-	}), /* @__PURE__ */ jsx("path", { d: "M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2" })] }),
-	download: /* @__PURE__ */ jsxs(Glyph, { children: [
-		/* @__PURE__ */ jsx("path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }),
-		/* @__PURE__ */ jsx("path", { d: "m7 10 5 5 5-5" }),
-		/* @__PURE__ */ jsx("path", { d: "M12 15V3" })
-	] }),
-	external: /* @__PURE__ */ jsxs(Glyph, { children: [
-		/* @__PURE__ */ jsx("path", { d: "M15 3h6v6" }),
-		/* @__PURE__ */ jsx("path", { d: "M10 14 21 3" }),
-		/* @__PURE__ */ jsx("path", { d: "M21 14v5a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5" })
-	] }),
-	failure: /* @__PURE__ */ jsxs(Glyph, { children: [
-		/* @__PURE__ */ jsx("circle", {
-			cx: "12",
-			cy: "12",
-			r: "9"
-		}),
-		/* @__PURE__ */ jsx("path", { d: "M15 9 9 15" }),
-		/* @__PURE__ */ jsx("path", { d: "m9 9 6 6" })
-	] }),
-	pending: /* @__PURE__ */ jsxs(Glyph, { children: [/* @__PURE__ */ jsx("circle", {
-		cx: "12",
-		cy: "12",
-		r: "9"
-	}), /* @__PURE__ */ jsx("path", { d: "M12 7v5l3 2" })] }),
-	success: /* @__PURE__ */ jsxs(Glyph, { children: [/* @__PURE__ */ jsx("circle", {
-		cx: "12",
-		cy: "12",
-		r: "9"
-	}), /* @__PURE__ */ jsx("path", { d: "m8.5 12.5 2.5 2.5 4.5-5" })] }),
-	warning: /* @__PURE__ */ jsxs(Glyph, { children: [
-		/* @__PURE__ */ jsx("path", { d: "M10.3 3.9 2.4 17.5a2 2 0 0 0 1.7 3h15.8a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0Z" }),
-		/* @__PURE__ */ jsx("path", { d: "M12 9v4" }),
-		/* @__PURE__ */ jsx("path", { d: "M12 17h.01" })
-	] })
-};
-const IconsContext = createContext(defaultIcons);
-function IconsProvider({ children, icons }) {
-	const value = useMemo(() => ({
-		...defaultIcons,
-		...icons
-	}), [icons]);
-	return /* @__PURE__ */ jsx(IconsContext.Provider, {
-		value,
-		children
-	});
-}
-function useIcons() {
-	return useContext(IconsContext);
-}
-//#endregion
 //#region src/messages.ts
 var messages_exports = /* @__PURE__ */ __exportAll({
 	english: () => english,
@@ -161,20 +65,34 @@ const english = {
 	close: "Close",
 	retry: "Try again",
 	approve: "Approve",
+	addRecords: (count) => count === 1 ? "Add 1 record" : `Add ${count} records`,
 	decline: "Decline",
+	everyRecordConflicts: "Resolve the records above at your provider, then check again.",
 	reviewChanges: "Review changes",
 	cleanUp: "Remove records",
 	checkDns: "Check DNS",
 	checkAgain: "Check again",
 	moreActions: "More actions",
-	moreOptions: "Need an account id?",
+	moreOptions: "Add an account id",
 	useAnotherProvider: "Use a different provider",
+	useTokenInstead: "Use an API token instead",
+	back: "Back",
+	connectedAccount: (provider, account) => `${provider} · ${account}`,
+	recordsAdded: (count) => count === 1 ? "1 added" : `${count} added`,
+	needsReconnect: "Needs reconnecting",
+	disconnectScope: "This connection serves other domains.",
+	disconnectThisDomain: "Only this domain",
+	disconnectEveryDomain: (count) => `All ${count} domains`,
 	copy: "Copy",
 	copied: "Copied",
 	copyZone: "Copy zone file",
 	download: "Download",
 	useConnection: (label) => `Use ${label}`,
 	chooseZone: "Choose the zone that serves this domain",
+	zoneSuggestions: "Zones your connected accounts serve",
+	recordsGoTo: (provider, account) => `Records go to ${provider} through ${account}.`,
+	notInConnectedAccount: "Not in a connected account.",
+	reconnectAccount: (account) => `Reconnect ${account}`,
 	getToken: "Where do I find this?",
 	loading: "Loading…",
 	connecting: "Connecting…",
@@ -190,13 +108,16 @@ const english = {
 	observing: "Checking DNS…",
 	connectTitle: (provider) => `Connect ${provider}`,
 	connectAnyTitle: "Connect a DNS provider",
-	hostOwnsZone: "Owns DNS for this domain.",
+	hostDetected: (provider) => `${provider} DNS detected`,
 	connectDescription: (domain) => `Authorize DNS changes for ${domain}.`,
 	connectedTo: (provider) => `${provider} connected`,
 	notConnected: "No DNS provider is connected.",
+	administratorConnects: (provider) => `An administrator can connect ${provider}`,
 	reconnectRequired: (provider) => `${provider} needs to be reconnected`,
 	disconnectTitle: (provider) => `Disconnect ${provider}?`,
-	disconnectConsent: "The provider connection is removed. Existing DNS records are preserved.",
+	disconnectConsent: (domain, provider) => `DomainKit stops managing DNS for ${domain} through ${provider}.`,
+	disconnectWithCleanup: (count) => count === 1 ? "Remove the 1 record DomainKit added" : `Remove the ${count} records DomainKit added`,
+	disconnectKeepsRecords: (provider) => `Records stay in ${provider}.`,
 	detachConsent: "This domain is detached from the provider. Existing DNS records are preserved.",
 	detached: "Domain detached. DNS records were preserved.",
 	reusableConnections: "Connections you already have",
@@ -232,6 +153,23 @@ const english = {
 			case "missing": return "The record this plan expected is gone.";
 		}
 	},
+	conflictAdvice: (reason) => {
+		switch (reason) {
+			case "exclusive-name": return "Remove the record on that name at your provider, then check again.";
+			case "cname-collision": return "Remove the other records on that name at your provider, then check again.";
+			case "value-mismatch": return "Point that record at this value at your provider, or remove it and check again.";
+			case "opaque": return "Remove that record at your provider, then check again.";
+			case "missing": return "Check again to build a plan from what is there now.";
+		}
+	},
+	planStatus: (operation) => {
+		switch (operation._tag) {
+			case "Create": return "Will add";
+			case "Noop": return "Already there";
+			case "Delete": return "Will remove";
+			case "Conflict": return "In the way";
+		}
+	},
 	attemptStatus: (status) => {
 		switch (status) {
 			case "planned": return "Awaiting review";
@@ -313,10 +251,7 @@ const english = {
 		description: reason.message,
 		title: reason.field === void 0 ? "Check what you entered" : `Check the ${humanize(reason.field).toLowerCase()}`
 	}),
-	unauthenticated: (_reason, context) => ({
-		description: "Check the token can read and edit DNS for this zone, then try again.",
-		title: `${named(context.provider)} didn't accept this token`
-	}),
+	unauthenticated: () => ({ title: "Token not accepted" }),
 	forbidden: (_reason, context) => ({
 		description: `The connection needs permission to edit DNS for ${where(context.domain)}.`,
 		title: "This connection can't change DNS here"
@@ -403,42 +338,20 @@ const outcome = (error, catalog, context = {}) => {
 /** The same failure as one sentence, for a host that renders text rather than a card. */
 const failure = (error, catalog, context = {}) => {
 	const { description, title } = outcome(error, catalog, context);
-	return `${title}. ${description}`;
+	return description === void 0 ? `${title}.` : `${title}. ${description}`;
 };
 //#endregion
-//#region src/theme.ts
-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",
-	radius: "--domainkit-radius",
-	shadow: "--domainkit-shadow",
-	success: "--domainkit-success",
-	text: "--domainkit-text",
-	warning: "--domainkit-warning"
-};
-function toStyle(theme = {}) {
-	return Object.fromEntries(Object.entries(theme).flatMap(([key, value]) => value === void 0 ? [] : [[variables[key], value]]));
-}
-//#endregion
 //#region src/domain-kit.tsx
 var domain_kit_exports = /* @__PURE__ */ __exportAll({
 	ReadOnly: () => ReadOnly,
-	Root: () => Root$7,
+	Root: () => Root,
 	useCapabilities: () => useCapabilities,
 	useDomainKit: () => useDomainKit,
+	useMessages: () => useMessages,
 	useReadOnly: () => useReadOnly,
 	useTransport: () => useTransport
 });
-const Context$1 = createContext(null);
+const Context = createContext(null);
 const navigateInBrowser = (url) => {
 	if (typeof window === "undefined") throw new Error("DomainKit provider authorization requires a browser or a `navigate` prop");
 	window.location.assign(url);
@@ -470,70 +383,44 @@ const useStableTransport = (transport) => {
 		};
 	}, [signature]);
 };
-const resolvePortalContainer = (container, ownerDocument) => {
-	if (container === null || ownerDocument === null) return null;
-	return container.ownerDocument === ownerDocument && container.getRootNode() === ownerDocument ? container : null;
-};
-const usePortalContainer = (container) => {
-	const ownerDocument = useMemo(() => container?.ownerDocument ?? null, [container]);
-	const subscribe = useCallback((notify) => {
-		if (ownerDocument === null || typeof MutationObserver === "undefined") return () => {};
-		const observer = new MutationObserver(notify);
-		observer.observe(ownerDocument, {
-			childList: true,
-			subtree: true
-		});
-		return () => observer.disconnect();
-	}, [ownerDocument]);
-	const getSnapshot = useCallback(() => resolvePortalContainer(container, ownerDocument), [container, ownerDocument]);
-	return useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
-};
-function Root$7({ children, colorScheme = "inherit", icons, marks = {}, messages, navigate = navigateInBrowser, onEvent, portalContainer = null, readOnly = false, revision = 0, theme, transport, ...props }) {
+/**
+* The transport, the catalog, and the two host callbacks every hook below reads. It renders no
+* element of its own: `@domainkit/react` supplies behaviour, state, copy, and accessibility, and
+* the host application supplies the markup.
+*/
+function Root({ children, messages, navigate = navigateInBrowser, onEvent, readOnly = false, revision = 0, transport }) {
 	const { capabilities, transport: stable } = useStableTransport(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]);
 	const value = {
 		capabilities,
-		colorScheme,
-		emit,
-		marks,
+		emit: useCallback((event) => {
+			try {
+				onEventRef.current?.(event);
+			} catch {}
+		}, []),
 		messages: merge(messages),
 		navigate,
-		portalContainer: portalContainerRef,
 		readOnly,
 		revision,
-		themeStyle,
 		transport: stable
 	};
-	const content = usePart("div", props, { colorScheme }, {
-		children,
-		"data-color-scheme": colorScheme,
-		"data-domainkit-root": "",
-		style: themeStyle
-	});
-	return /* @__PURE__ */ jsx(Context$1.Provider, {
+	return /* @__PURE__ */ jsx(Context.Provider, {
 		value,
-		children: /* @__PURE__ */ jsx(IconsProvider, {
-			...icons === void 0 ? {} : { icons },
-			children: content
-		})
+		children
 	});
 }
 function useDomainKit() {
-	const value = useContext(Context$1);
-	if (value === null) throw new Error("DomainKit components must be rendered inside DomainKit.Root");
+	const value = useContext(Context);
+	if (value === null) throw new Error("DomainKit hooks must be called inside DomainKit.Root");
 	return value;
 }
+/** The catalog `DomainKit.Root` holds, with the host's overrides already merged in. */
+function useMessages() {
+	return useDomainKit().messages;
+}
 /** The transport `DomainKit.Root` holds, with the identity it keeps for the whole mount. */
 function useTransport() {
 	return useDomainKit().transport;
@@ -546,13 +433,13 @@ function ReadOnly({ children, value }) {
 		children
 	});
 }
-/** Whether this part may offer controls that change the domain. */
+/** Whether this surface may offer controls that change the domain. */
 function useReadOnly() {
 	const scoped = useContext(ReadOnlyContext);
 	const root = useDomainKit().readOnly;
 	return scoped ?? root;
 }
-/** Which capability groups the host's transport declares, for gating a custom part. */
+/** Which capability groups the host's transport declares, for gating a surface of your own. */
 function useCapabilities() {
 	return useDomainKit().capabilities;
 }
@@ -622,10 +509,42 @@ function useRunner() {
 const State$2 = Data.taggedEnum();
 /** Reasons that mean the plan itself is gone: retrying the same step would fail the same way. */
 const needsNewPlan = (error) => error.reason._tag === "Stale" || error.reason._tag === "Expired" || error.reason._tag === "Conflict";
+/** The plan an attempt holds, whatever step it is on; `null` before there is one. */
+const planOf = (state) => {
+	switch (state._tag) {
+		case "Planned":
+		case "Approving":
+		case "Applying":
+		case "Rejecting":
+		case "Rejected":
+		case "Applied": return state.plan;
+		case "Idle":
+		case "Planning":
+		case "Failure": return null;
+	}
+};
+/**
+* The plan still awaiting its apply, which is what a row of records reports; `null` once one has
+* landed, because from then on an observation answers instead.
+*/
+const pendingPlan = (state) => {
+	switch (state._tag) {
+		case "Planned":
+		case "Approving":
+		case "Applying": return state.plan;
+		case "Idle":
+		case "Planning":
+		case "Applied":
+		case "Rejecting":
+		case "Rejected":
+		case "Failure": return null;
+	}
+};
 function useAttempt(options) {
 	const { domain, done, group, key, onDone } = options;
 	const { emit } = useDomainKit();
-	const readOnly = useReadOnly();
+	const inherited = useReadOnly();
+	const readOnly = options.readOnly ?? inherited;
 	const runner = useRunner();
 	const [state, setState] = useState(State$2.Idle());
 	const held = useRef({
@@ -658,7 +577,7 @@ function useAttempt(options) {
 		}));
 	}, [domain, emit]);
 	const applyWith = useCallback((plan, approval) => {
-		if (group === void 0 || held.current.key !== key) return;
+		if (readOnly || group === void 0 || held.current.key !== key) return;
 		const command = () => {
 			setState(State$2.Applying({
 				approval,
@@ -688,9 +607,11 @@ function useAttempt(options) {
 		key,
 		onDone,
 		onFailure,
+		readOnly,
 		runner
 	]);
 	const buildPlan = useCallback(() => {
+		if (readOnly) return;
 		const effect = build.current();
 		if (effect === null) return;
 		const command = () => {
@@ -716,11 +637,12 @@ function useAttempt(options) {
 	}, [
 		key,
 		onFailure,
+		readOnly,
 		runner
 	]);
 	const approve = useCallback((operationIds) => {
 		const plan = held.current.plan;
-		if (group === void 0 || plan === null || held.current.key !== key) return;
+		if (readOnly || group === void 0 || plan === null || held.current.key !== key) return;
 		const command = () => {
 			setState(State$2.Approving({ plan }));
 			runner.run(group.approve({
@@ -749,11 +671,12 @@ function useAttempt(options) {
 		group,
 		key,
 		onFailure,
+		readOnly,
 		runner
 	]);
 	const reject = useCallback((reason) => {
 		const plan = held.current.plan;
-		if (group === void 0 || plan === null || held.current.key !== key) return;
+		if (readOnly || group === void 0 || plan === null || held.current.key !== key) return;
 		const command = () => {
 			setState(State$2.Rejecting({ plan }));
 			runner.run(group.reject({
@@ -784,11 +707,12 @@ function useAttempt(options) {
 		group,
 		key,
 		onFailure,
+		readOnly,
 		runner
 	]);
 	const apply = useCallback(() => {
 		const { approval, plan } = held.current;
-		if (approval === null || plan === null) return;
+		if (readOnly || approval === null || plan === null) return;
 		applyWith(plan, approval);
 	}, [applyWith]);
 	const retry = useCallback(() => {
@@ -831,690 +755,18 @@ function useAttempt(options) {
 	};
 }
 //#endregion
-//#region src/outcome.tsx
-/**
-* What a flow says when a step ends badly: media, title, description, and the action that follows.
-* Every flow's `Outcome` binds its controller to these parts, so a failure reads the same way in
-* the connect dialog, the review dialog, and the verification popover.
-*
-*   <Connect.Outcome controller={connection} />            the default composition
-*
-*   <Connect.Outcome controller={connection}>              a composition of your own
-*     <Outcome.Header>
-*       <Outcome.Media><MyIcon /></Outcome.Media>
-*       <Outcome.Title />
-*       <Outcome.Description />
-*     </Outcome.Header>
-*     <Outcome.Content />
-*   </Connect.Outcome>
-*/
-var outcome_exports = /* @__PURE__ */ __exportAll({
-	Composition: () => Composition,
-	Content: () => Content,
-	Description: () => Description,
-	Header: () => Header$1,
-	Media: () => Media,
-	Provider: () => Provider,
-	Root: () => Root$6,
-	Title: () => Title,
-	useOutcome: () => useOutcome
-});
-const fallback = {
-	description: "",
-	layout: "card",
-	retry: null,
-	retryPart: "flow-retry",
-	title: "",
-	tone: "danger"
-};
-const Context = createContext(null);
-/** What the surrounding flow resolved, for a part of your own inside `X.Outcome`. */
-function useOutcome() {
-	return useContext(Context) ?? fallback;
-}
-/** Binds a resolved outcome to the parts below it. Flows render this; hosts rarely do. */
-function Provider({ children, value }) {
-	return /* @__PURE__ */ jsx(Context.Provider, {
-		value,
-		children
-	});
-}
-/**
-* The outcome itself. It announces, so a customer reading with assistive tech hears it. A `tone`
-* or `layout` of its own reaches every part below it, so the glyph and the words agree with the
-* root's own attributes.
-*/
-function Root$6({ layout, tone, ...props }) {
-	const value = useOutcome();
-	const resolved = {
-		...value,
-		layout: layout ?? value.layout,
-		tone: tone ?? value.tone
-	};
-	const element = usePart("div", props, {
-		layout: resolved.layout,
-		tone: resolved.tone
-	}, {
-		"data-domainkit-part": "outcome",
-		"data-layout": resolved.layout,
-		"data-tone": resolved.tone,
-		role: "alert"
-	});
-	return /* @__PURE__ */ jsx(Provider, {
-		value: resolved,
-		children: element
-	});
-}
-/** Media, title, and description together, so the action below them can move on its own. */
-function Header$1(props) {
-	const { layout, tone } = useOutcome();
-	return usePart("div", props, {
-		layout,
-		tone
-	}, { "data-domainkit-part": "outcome-header" });
-}
-/** The glyph for the tone. Children replace it; `icons` on `DomainKit.Root` replaces the set. */
-function Media({ variant = "icon", ...props }) {
-	const { layout, tone } = useOutcome();
-	const icons = useIcons();
-	const glyph = tone === "success" ? icons.success : tone === "warning" ? icons.warning : icons.failure;
-	return usePart("div", props, {
-		layout,
-		tone
-	}, {
-		"aria-hidden": "true",
-		children: glyph,
-		"data-domainkit-part": "outcome-media",
-		"data-variant": variant
-	});
-}
-/** The heading from the catalog. Children win, for a host that words it itself. */
-function Title(props) {
-	const { layout, title, tone } = useOutcome();
-	return usePart("div", props, {
-		layout,
-		tone
-	}, {
-		children: title,
-		"data-domainkit-part": "outcome-title"
-	});
-}
-/** What to do about it, from the catalog. */
-function Description(props) {
-	const { description, layout, tone } = useOutcome();
-	return usePart("p", props, {
-		layout,
-		tone
-	}, {
-		children: description,
-		"data-domainkit-part": "outcome-description"
-	});
-}
-/**
-* The actions under the header. Without children it is the flow's retry, and a flow that allows
-* none renders nothing: read-only hides every control that would start a write again.
-*/
-function Content(props) {
-	const { messages } = useDomainKit();
-	const { layout, retry, retryPart, tone } = useOutcome();
-	const element = usePart("div", props, {
-		layout,
-		tone
-	}, {
-		children: retry === null ? null : /* @__PURE__ */ jsx("button", {
-			"data-domainkit-part": retryPart,
-			onClick: retry,
-			type: "button",
-			children: messages.retry
-		}),
-		"data-domainkit-part": "outcome-content"
-	});
-	return retry === null && props.children === void 0 ? null : element;
-}
-/** Media, title, and description in a header, then the action. What `X.Outcome` renders alone. */
-function Composition() {
-	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs(Header$1, { children: [
-		/* @__PURE__ */ jsx(Media, {}),
-		/* @__PURE__ */ jsx(Title, {}),
-		/* @__PURE__ */ jsx(Description, {})
-	] }), /* @__PURE__ */ jsx(Content, {})] });
-}
-//#endregion
-//#region src/records.tsx
-var records_exports = /* @__PURE__ */ __exportAll({
-	Body: () => Body$1,
-	Caption: () => Caption,
-	Card: () => Card$1,
-	CardContent: () => CardContent,
-	CardHeader: () => CardHeader,
-	CardTitle: () => CardTitle,
-	Cell: () => Cell,
-	CopyValue: () => CopyValue,
-	Footer: () => Footer,
-	Head: () => Head,
-	Header: () => Header,
-	Purpose: () => Purpose,
-	Root: () => Root$5,
-	Row: () => Row,
-	Status: () => Status$5,
-	Table: () => Table,
-	Value: () => Value,
-	ZoneFile: () => ZoneFile,
-	copyText: () => copyText,
-	downloadZoneFile: () => downloadZoneFile,
-	identity: () => identity,
-	requirementsKey: () => requirementsKey,
-	statusOf: () => statusOf,
-	toZoneFile: () => toZoneFile,
-	useCopy: () => useCopy
-});
-const absolute = (value) => value.endsWith(".") ? value : `${value}.`;
-const textEncoder = new TextEncoder();
-const escapeTxtCharacter = (character) => {
-	if (character === "\"" || character === "\\") return `\\${character}`;
-	const codePoint = character.codePointAt(0);
-	if (codePoint !== void 0 && (codePoint < 32 || codePoint === 127)) return `\\${codePoint.toString().padStart(3, "0")}`;
-	return character;
-};
-/** TXT strings are capped at 255 bytes each, so long values are split and quoted per chunk. */
-const txtValue = (value) => {
-	const chunks = [];
-	let chunk = "";
-	let byteLength = 0;
-	for (const character of value) {
-		const characterByteLength = textEncoder.encode(character).byteLength;
-		if (byteLength + characterByteLength > 255) {
-			chunks.push(chunk);
-			chunk = "";
-			byteLength = 0;
-		}
-		chunk += escapeTxtCharacter(character);
-		byteLength += characterByteLength;
-	}
-	chunks.push(chunk);
-	return chunks.map((part) => `"${part}"`).join(" ");
-};
-/** The RR type as a zone file spells it. The tag and the type name are the same string. */
-const rrType = (record) => record._tag;
-const zoneData = (record) => {
-	switch (record._tag) {
-		case "A":
-		case "AAAA": return record.address;
-		case "CNAME": return absolute(record.target);
-		case "NS": return absolute(record.nameserver);
-		case "TXT": return txtValue(record.value);
-		case "MX": return `${record.priority} ${absolute(record.exchange)}`;
-		case "CAA": return `${record.flags} ${record.tag} "${record.value}"`;
-		case "SRV": return `${record.priority} ${record.weight} ${record.port} ${absolute(record.target)}`;
-	}
-};
-const toZoneFile = (records) => `${records.map((record) => `${absolute(record.name)}${record.ttl === null ? "" : ` ${record.ttl}`} IN ${rrType(record)} ${zoneData(record)}`).join("\n")}\n`;
-const downloadText = (filename, contents) => {
-	if (typeof document === "undefined") return;
-	const blob = new Blob([contents], { type: "text/plain;charset=utf-8" });
-	const url = URL.createObjectURL(blob);
-	const anchor = document.createElement("a");
-	anchor.download = filename;
-	anchor.href = url;
-	document.body.append(anchor);
-	anchor.click();
-	anchor.remove();
-	URL.revokeObjectURL(url);
-};
-const downloadZoneFile = (domain, records) => downloadText(`${domain}.txt`, toZoneFile(records));
-const copyText = (value) => {
-	if (typeof navigator === "undefined" || navigator.clipboard === void 0) return Promise.resolve(false);
-	return navigator.clipboard.writeText(value).then(() => true, () => false);
-};
-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({ value, ...props }) {
-	const { messages } = useDomainKit();
-	const icons = useIcons();
-	const { copied, copy } = useCopy(value);
-	return usePart("span", props, { copied }, {
-		children: /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("code", { children: value }), /* @__PURE__ */ jsxs("button", {
-			"aria-label": `${copied ? messages.copied : messages.copy} ${value}`,
-			"data-domainkit-part": "copy-action",
-			onClick: copy,
-			type: "button",
-			children: [/* @__PURE__ */ jsx("span", {
-				"aria-hidden": "true",
-				"data-domainkit-part": "copy-glyph",
-				"data-icon": "",
-				"data-state": "idle",
-				children: icons.copy
-			}), /* @__PURE__ */ jsx("span", {
-				"aria-hidden": "true",
-				"data-domainkit-part": "copy-glyph",
-				"data-icon": "",
-				"data-state": "done",
-				children: icons.copied
-			})]
-		})] }),
-		"data-copied": copied ? "" : void 0,
-		"data-domainkit-part": "copy-value"
-	});
-}
-function ZoneFile({ domain, records, ...props }) {
-	const { messages } = useDomainKit();
-	const icons = useIcons();
-	const { copied, copy } = useCopy(toZoneFile(records));
-	return usePart("div", props, { count: records.length }, {
-		children: /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("button", {
-			"aria-label": copied ? messages.copied : messages.copyZone,
-			"data-domainkit-part": "zone-copy",
-			onClick: copy,
-			type: "button",
-			children: [/* @__PURE__ */ jsx("span", {
-				"aria-hidden": "true",
-				"data-icon": "inline-start",
-				children: copied ? icons.copied : icons.copy
-			}), copied ? messages.copied : messages.copyZone]
-		}), /* @__PURE__ */ jsxs("button", {
-			"aria-label": messages.download,
-			"data-domainkit-part": "zone-download",
-			onClick: () => downloadZoneFile(domain, records),
-			type: "button",
-			children: [/* @__PURE__ */ jsx("span", {
-				"aria-hidden": "true",
-				"data-icon": "inline-start",
-				children: icons.download
-			}), messages.download]
-		})] }),
-		"data-domainkit-part": "zone-file"
-	});
-}
-/** The readiness this record reached, or `null` when nothing has observed it. */
-const statusOf = (record, readiness) => readiness?.requirements.find((requirement) => DnsRecord.equals(requirement.record, record))?.status ?? null;
-function Status$5({ status, ...props }) {
-	const { messages } = useDomainKit();
-	const icons = useIcons();
-	const glyph = status === "satisfied" ? icons.success : status === "unknown" ? icons.pending : icons.failure;
-	return usePart("span", props, { status }, {
-		children: /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
-			"aria-hidden": "true",
-			"data-icon": "inline-start",
-			children: glyph
-		}), messages.requirementStatus(status)] }),
-		"data-domainkit-part": "record-status",
-		"data-status": status
-	});
-}
-const Header = leafPart("thead", "records-header");
-const Body$1 = leafPart("tbody", "records-body");
-const Footer = leafPart("tfoot", "records-footer");
-const Row = leafPart("tr", "records-row");
-const Head = leafPart("th", "records-head");
-const Cell = leafPart("td", "records-cell");
-const Caption = leafPart("caption", "records-caption");
-const Value = leafPart("span", "record-value");
-const Purpose = leafPart("span", "record-purpose");
-const CardHeader = leafPart("div", "record-card-head");
-const CardTitle = leafPart("strong", "record-card-title");
-const CardContent = leafPart("dl", "record-card-content");
-function Root$5({ count = 0, ...props }) {
-	return /* @__PURE__ */ jsx("div", {
-		"data-domainkit-part": "records-panel",
-		children: usePart("table", props, { count }, { "data-domainkit-part": "records-table" })
-	});
-}
-/** A stable React key for a requirement: type, name, and data identify a record. */
-const identity = (record) => [
-	rrType(record),
-	record.name,
-	DnsRecord.data(record)
-].join(":");
-/**
-* A requirement set keyed by everything it carries, for memos that decide whether to re-send it.
-* `identity` is deliberately narrower: it answers "is this the same record" for a React key, while
-* a plan and an observation are built from `ttl`, `policy`, and `purpose` as well. `policy` in
-* particular decides whether a name may hold anything else, so readiness turns on it.
-*/
-const requirementsKey = (records) => JSON.stringify(records);
-function Card$1({ readiness, record, ...props }) {
-	const { messages } = useDomainKit();
-	const status = statusOf(record, readiness);
-	return usePart("section", props, { record: identity(record) }, {
-		children: /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs(CardHeader, { children: [/* @__PURE__ */ jsx(CardTitle, { children: messages.recordType(record) }), status === null ? null : /* @__PURE__ */ jsx(Status$5, { status })] }), /* @__PURE__ */ jsxs(CardContent, { children: [
-			/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("dt", { children: messages.headingName }), /* @__PURE__ */ jsx("dd", { children: /* @__PURE__ */ jsx(CopyValue, { value: record.name }) })] }),
-			/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("dt", { children: messages.headingValue }), /* @__PURE__ */ jsx("dd", { children: /* @__PURE__ */ jsx(CopyValue, { value: DnsRecord.data(record) }) })] }),
-			record.purpose === void 0 ? null : /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("dt", { children: messages.headingPurpose }), /* @__PURE__ */ jsx("dd", { children: /* @__PURE__ */ jsx(Purpose, { children: record.purpose }) })] })
-		] })] }),
-		"data-domainkit-part": "record-card"
-	});
-}
-/** The default records presentation: one row per requirement, with readiness when there is any. */
-function Table({ caption, readiness, records, ...props }) {
-	const { messages } = useDomainKit();
-	const withStatus = readiness !== null && readiness !== void 0;
-	return /* @__PURE__ */ jsxs(Root$5, {
-		count: records.length,
-		...props,
-		children: [
-			caption === void 0 ? null : /* @__PURE__ */ jsx(Caption, { children: caption }),
-			/* @__PURE__ */ jsx(Header, { children: /* @__PURE__ */ jsxs(Row, { children: [
-				/* @__PURE__ */ jsx(Head, {
-					scope: "col",
-					children: messages.headingType
-				}),
-				/* @__PURE__ */ jsx(Head, {
-					scope: "col",
-					children: messages.headingName
-				}),
-				/* @__PURE__ */ jsx(Head, {
-					scope: "col",
-					children: messages.headingValue
-				}),
-				withStatus ? /* @__PURE__ */ jsx(Head, {
-					"data-column": "status",
-					scope: "col",
-					children: messages.headingStatus
-				}) : null
-			] }) }),
-			/* @__PURE__ */ jsx(Body$1, { children: records.map((record) => {
-				const status = statusOf(record, readiness);
-				return /* @__PURE__ */ jsxs(Row, { children: [
-					/* @__PURE__ */ jsx(Cell, { children: messages.recordType(record) }),
-					/* @__PURE__ */ jsx(Cell, { children: /* @__PURE__ */ jsx(CopyValue, { value: record.name }) }),
-					/* @__PURE__ */ jsx(Cell, { children: /* @__PURE__ */ jsxs(Value, { children: [/* @__PURE__ */ jsx(CopyValue, { value: DnsRecord.data(record) }), record.purpose === void 0 ? null : /* @__PURE__ */ jsx(Purpose, { children: record.purpose })] }) }),
-					withStatus ? /* @__PURE__ */ jsx(Cell, {
-						"data-column": "status",
-						children: status === null ? null : /* @__PURE__ */ jsx(Status$5, { status })
-					}) : null
-				] }, identity(record));
-			}) })
-		]
-	});
-}
-//#endregion
-//#region src/operations.tsx
-var operations_exports = /* @__PURE__ */ __exportAll({
-	Item: () => Item,
-	Kind: () => Kind,
-	List: () => List,
-	Name: () => Name,
-	Reason: () => Reason$1,
-	Record: () => Record,
-	Root: () => Root$4,
-	Type: () => Type
-});
-const Kind = leafPart("span", "operation-kind");
-const Type = leafPart("strong", "operation-type");
-const Record = leafPart("span", "operation-record");
-const Name = leafPart("span", "operation-name");
-const Reason$1 = leafPart("span", "operation-reason");
-function Item({ operation, ...props }) {
-	const { messages } = useDomainKit();
-	return usePart("li", props, { operation: operation._tag }, {
-		children: /* @__PURE__ */ jsxs(Fragment, { children: [
-			/* @__PURE__ */ jsx(Kind, { children: messages.operation(operation) }),
-			" ",
-			/* @__PURE__ */ jsx(Type, { children: messages.recordType(operation.record) }),
-			" ",
-			/* @__PURE__ */ jsxs(Record, { children: [/* @__PURE__ */ jsx(Name, { children: operation.record.name }), /* @__PURE__ */ jsx(CopyValue, { value: DnsRecord.data(operation.record) })] }),
-			operation._tag === "Conflict" ? /* @__PURE__ */ jsx(Reason$1, { children: messages.conflictReason(operation.reason) }) : null
-		] }),
-		"data-domainkit-part": "operation-item",
-		"data-operation": operation._tag
-	});
-}
-function Root$4({ count = 0, kind, ...props }) {
-	return usePart("ul", props, {
-		count,
-		kind
-	}, {
-		"data-domainkit-part": kind === "provisioning" ? "plan-operations" : "cleanup-operations",
-		"data-kind": kind
-	});
-}
-/** Every operation the plan holds, in plan order, so a customer reviews exactly what will run. */
-function List({ plan, ...props }) {
-	return /* @__PURE__ */ jsx(Root$4, {
-		count: plan.operations.length,
-		kind: plan.kind,
-		...props,
-		children: plan.operations.map((operation) => /* @__PURE__ */ jsx(Item, { operation }, operation.id))
-	});
-}
-//#endregion
-//#region src/review.tsx
-/**
-* The review surface both `Provision` and `Cleanup` render: what the plan will do, the Approve
-* and Decline actions D35 defines, and the outcome. `kind` picks the wording; nothing else about
-* the two flows differs on screen.
-*/
-const busy = (status) => status === "Planning" || status === "Approving" || status === "Applying" || status === "Rejecting";
-/** What the flow is doing right now, or what it finished doing. */
-function Status$4({ controller, kind, ...props }) {
-	const { messages } = useDomainKit();
-	const state = controller.state;
-	const text = () => {
-		switch (state._tag) {
-			case "Idle": return "";
-			case "Planning": return kind === "provisioning" ? messages.planning : messages.planningCleanup;
-			case "Planned": return kind === "provisioning" ? messages.planConsent : messages.cleanupConsent;
-			case "Approving": return messages.approving;
-			case "Applying": return kind === "provisioning" ? messages.applying : messages.cleaning;
-			case "Rejecting": return messages.rejecting;
-			case "Rejected": return messages.declinedBy(state.attempt.rejection?.actorId ?? "");
-			case "Applied": return kind === "provisioning" ? messages.applied(state.receipt) : messages.cleaned(state.receipt);
-			case "Failure": return "";
-		}
-	};
-	return usePart("p", props, { status: state._tag }, {
-		children: text(),
-		"data-domainkit-part": kind === "provisioning" ? "provisioning-status" : "cleanup-status",
-		"data-state": state._tag,
-		role: busy(state._tag) ? "status" : void 0
-	});
-}
-/**
-* The failure, or a receipt that only partly landed: media, title, description, and the retry the
-* flow allows. Children replace the composition and keep the binding.
-*/
-function Outcome$4({ children, controller, kind, ...props }) {
-	const { messages } = useDomainKit();
-	const readOnly = useReadOnly();
-	const state = controller.state;
-	const partial = state._tag === "Applied" && state.receipt.status === "partial";
-	const retryPart = kind === "provisioning" ? "provisioning-retry" : "cleanup-retry";
-	if (state._tag !== "Failure" && !partial) return null;
-	const words = state._tag === "Failure" ? outcome(state.error, messages) : {
-		description: kind === "provisioning" ? messages.partiallyApplied : messages.partiallyCleaned,
-		title: kind === "provisioning" ? messages.partiallyAppliedTitle : messages.partiallyCleanedTitle
-	};
-	return /* @__PURE__ */ jsx(Provider, {
-		value: {
-			description: words.description,
-			layout: props.layout ?? "card",
-			retry: readOnly || state._tag !== "Failure" ? null : controller.retry,
-			retryPart,
-			title: words.title,
-			tone: state._tag === "Failure" ? "danger" : "warning"
-		},
-		children: /* @__PURE__ */ jsx(Root$6, {
-			...props,
-			children: children ?? /* @__PURE__ */ jsx(Composition, {})
-		})
-	});
-}
-/**
-* Approve and Decline. Approve authorizes the digest and applies it; Decline records the refusal
-* and ends the attempt. Neither renders until there is a plan to act on.
-*/
-function Actions$2({ controller, kind, ...props }) {
-	const { messages } = useDomainKit();
-	const readOnly = useReadOnly();
-	const state = controller.state;
-	const plan = state._tag === "Planned" ? state.plan : null;
-	const running = busy(state._tag);
-	const element = usePart("div", props, { status: state._tag }, {
-		children: /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("button", {
-			"data-domainkit-part": kind === "provisioning" ? "plan-apply" : "cleanup-apply",
-			disabled: running || plan === null || plan.operations.length === 0,
-			onClick: () => controller.approve(),
-			type: "button",
-			children: messages.approve
-		}), /* @__PURE__ */ jsx("button", {
-			"data-domainkit-part": "plan-decline",
-			disabled: running || plan === null,
-			onClick: () => controller.reject(),
-			type: "button",
-			children: messages.decline
-		})] }),
-		"data-domainkit-part": "review-actions"
-	});
-	if (readOnly) return null;
-	return plan === null && !running ? null : element;
-}
-/** The operations under review, or the reason there is nothing to review. */
-function Body({ controller, kind }) {
-	const { messages } = useDomainKit();
-	const state = controller.state;
-	const plan = state._tag === "Planned" || state._tag === "Approving" || state._tag === "Applying" || state._tag === "Rejecting" || state._tag === "Rejected" ? state.plan : state._tag === "Applied" ? state.plan : null;
-	return /* @__PURE__ */ jsxs("div", {
-		"data-domainkit-part": "dialog-body",
-		children: [
-			/* @__PURE__ */ jsx(Status$4, {
-				controller,
-				kind
-			}),
-			plan === null ? null : plan.operations.length === 0 ? /* @__PURE__ */ jsx("p", {
-				"data-domainkit-part": "plan-empty",
-				children: messages.noChanges
-			}) : /* @__PURE__ */ jsx(List, { plan }),
-			state._tag === "Rejected" && state.attempt.rejection?.reason != null ? /* @__PURE__ */ jsx("p", {
-				"data-domainkit-part": "plan-decline-reason",
-				children: messages.declineReason(state.attempt.rejection.reason)
-			}) : null,
-			/* @__PURE__ */ jsx(Outcome$4, {
-				controller,
-				kind
-			})
-		]
-	});
-}
-/** The review dialog. `render` swaps the surface; the contents stay the flow's. */
-function Dialog$4({ children, controller, kind, onOpenChange, open, render, trigger }) {
-	const { colorScheme, messages, portalContainer, themeStyle } = useDomainKit();
-	const readOnly = useReadOnly();
-	const [uncontrolled, setUncontrolled] = useState(false);
-	const isOpen = open ?? uncontrolled;
-	const setOpen = (next) => {
-		if (open === void 0) setUncontrolled(next);
-		onOpenChange?.(next);
-	};
-	const running = busy(controller.state._tag);
-	const body = children ?? /* @__PURE__ */ jsx(Body, {
-		controller,
-		kind
-	});
-	const title = kind === "provisioning" ? messages.planTitle : messages.cleanupTitle;
-	const label = trigger ?? (kind === "provisioning" ? messages.reviewChanges : messages.cleanUp);
-	if (readOnly) return /* @__PURE__ */ jsx(Fragment, {});
-	if (render !== void 0) return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("button", {
-		"data-domainkit-part": kind === "provisioning" ? "plan-trigger" : "cleanup-trigger",
-		onClick: () => {
-			setOpen(true);
-			controller.plan();
-		},
-		type: "button",
-		children: label
-	}), render({
-		children: body,
-		open: isOpen
-	})] });
-	return /* @__PURE__ */ jsxs(Dialog.Root, {
-		onOpenChange: (next, details) => {
-			if (!next && running) {
-				details.cancel();
-				return;
-			}
-			setOpen(next);
-		},
-		open: isOpen,
-		children: [/* @__PURE__ */ jsx(Dialog.Trigger, {
-			"data-domainkit-part": kind === "provisioning" ? "plan-trigger" : "cleanup-trigger",
-			onClick: controller.plan,
-			children: label
-		}), /* @__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": kind === "provisioning" ? "plan-dialog" : "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: title
-							}), /* @__PURE__ */ jsx(Dialog.Description, {
-								"data-domainkit-part": "dialog-description",
-								children: kind === "provisioning" ? messages.planConsent : messages.cleanupConsent
-							})]
-						}), running ? null : /* @__PURE__ */ jsx(Dialog.Close, {
-							"aria-label": messages.close,
-							"data-domainkit-part": "dialog-close",
-							children: "×"
-						})]
-					}),
-					body,
-					/* @__PURE__ */ jsxs("div", {
-						"data-domainkit-part": "dialog-footer",
-						children: [/* @__PURE__ */ jsx(Actions$2, {
-							controller,
-							kind
-						}), running ? null : /* @__PURE__ */ jsx(Dialog.Close, {
-							"data-domainkit-part": "dialog-cancel",
-							children: messages.cancel
-						})]
-					})
-				]
-			})]
-		})]
-	});
-}
-//#endregion
-//#region src/cleanup.tsx
+//#region src/cleanup.ts
 var cleanup_exports = /* @__PURE__ */ __exportAll({
-	Actions: () => Actions$1,
-	Dialog: () => Dialog$3,
-	Flow: () => Flow$3,
-	Outcome: () => Outcome$3,
-	Root: () => Root$3,
 	State: () => State$2,
-	Status: () => Status$3,
+	pendingPlan: () => pendingPlan,
+	planOf: () => planOf,
 	useController: () => useController$3
 });
 /**
 * Cleanup is bound to a receipt: it removes only what an apply proved DomainKit created. When the
 * host does not name one, the controller reads the domain's latest from the snapshot.
 */
-function useController$3({ domain, onCleaned, receiptId }) {
+function useController$3({ domain, onCleaned, readOnly, receiptId }) {
 	const { transport } = useDomainKit();
 	const group = transport.cleanup;
 	const connection = transport.connection;
@@ -1527,6 +779,7 @@ function useController$3({ domain, onCleaned, receiptId }) {
 		}),
 		group,
 		onDone: onCleaned,
+		readOnly,
 		plan: useCallback(() => {
 			if (group === void 0) return null;
 			if (receiptId !== void 0) return group.plan(receiptId);
@@ -1543,91 +796,327 @@ function useController$3({ domain, onCleaned, receiptId }) {
 		])
 	});
 }
-function Root$3({ controller, ...props }) {
-	return usePart("div", props, { status: controller.state._tag }, {
-		"data-domainkit-part": "cleanup-flow",
-		"data-state": controller.state._tag
-	});
-}
-function Dialog$3(props) {
-	return /* @__PURE__ */ jsx(Dialog$4, {
-		...props,
-		kind: "cleanup"
-	});
-}
-function Actions$1(props) {
-	return /* @__PURE__ */ jsx(Actions$2, {
-		...props,
-		kind: "cleanup"
-	});
-}
-function Outcome$3(props) {
-	return /* @__PURE__ */ jsx(Outcome$4, {
-		...props,
-		kind: "cleanup"
-	});
-}
-function Status$3(props) {
-	return /* @__PURE__ */ jsx(Status$4, {
-		...props,
-		kind: "cleanup"
-	});
-}
-/** Cleanup on its own: a trigger that plans the removal, then the same review dialog. */
-function Flow$3({ domain, onCleaned, receiptId, trigger, ...props }) {
-	const controller = useController$3({
-		domain,
-		...onCleaned === void 0 ? {} : { onCleaned },
-		...receiptId === void 0 ? {} : { receiptId }
-	});
-	return /* @__PURE__ */ jsxs(Root$3, {
-		controller,
-		...props,
-		children: [/* @__PURE__ */ jsx(Dialog$3, {
-			controller,
-			...trigger === void 0 ? {} : { trigger }
-		}), /* @__PURE__ */ jsx(Outcome$3, { controller })]
-	});
-}
 //#endregion
-//#region src/provider.tsx
-var provider_exports = /* @__PURE__ */ __exportAll({ Mark: () => Mark });
-const key = (providerId) => providerId.trim().toLowerCase().replaceAll(/[^a-z0-9]+/g, "");
-/** No network call: the fallback is the provider's own initial, drawn with the theme's tokens. */
-const monogram = (provider) => provider.name.trim().charAt(0).toUpperCase() || "?";
+//#region src/domain-field.ts
+const ZonesState = Data.taggedEnum();
+const nothing = {
+	connections: [],
+	providers: [],
+	zones: []
+};
 /**
-* A provider's artwork. `DomainKit.Root`'s `marks` decides what a provider looks like; without an
-* entry the mark is the provider's initial. Nothing is fetched at render time.
+* Every zone this owner's connections reach. A connection whose credential the provider turned
+* down is listed in `connections` as `reconnect` and contributes no zones, so one dead account
+* never costs the customer the others.
 */
-function Mark({ provider, ...props }) {
-	const { marks } = useDomainKit();
-	const replacement = marks[provider.id];
-	const content = typeof replacement === "function" ? replacement(provider) : replacement ?? monogram(provider);
-	return usePart("span", props, { providerId: provider.id }, {
-		"aria-label": provider.name,
-		children: content,
-		"data-domainkit-part": "provider-mark",
-		"data-domainkit-provider": key(provider.id),
-		role: "img"
-	});
-}
-//#endregion
-//#region src/connect.tsx
-var connect_exports = /* @__PURE__ */ __exportAll({
-	Card: () => Card,
-	Dialog: () => Dialog$2,
-	Flow: () => Flow$2,
-	Form: () => Form,
-	Outcome: () => Outcome$2,
-	Prompt: () => Prompt,
-	Root: () => Root$2,
-	State: () => State$1,
-	Status: () => Status$2,
+function useZones({ provider } = {}) {
+	const { revision, transport } = useDomainKit();
+	const connection = transport.connection;
+	const runner = useRunner();
+	const [state, setState] = useState(ZonesState.Loading());
+	const load = useCallback(() => {
+		if (connection === void 0) return;
+		setState(ZonesState.Loading());
+		runner.run(connection.zones(provider === void 0 ? {} : { provider }), {
+			onFailure: (error) => setState(ZonesState.Failure({ error })),
+			onSuccess: (listing) => setState(ZonesState.Ready({
+				connections: listing.connections,
+				providers: listing.providers,
+				zones: listing.zones
+			}))
+		});
+	}, [
+		connection,
+		provider,
+		runner
+	]);
+	useEffect(load, [load, revision]);
+	const held = state._tag === "Ready" ? state : nothing;
+	return {
+		connections: held.connections,
+		providers: held.providers,
+		refresh: load,
+		state,
+		zones: held.zones
+	};
+}
+const AccountsState = Data.taggedEnum();
+const currentUrl$1 = () => typeof window === "undefined" ? null : window.location.href;
+/**
+* The accounts this owner holds, and the one way to add another: connect a provider without naming
+* a domain. A token method finishes in place; an interactive one redirects and comes back through
+* the library's own callback, which lands on `returnTo`.
+*/
+function useAccounts({ readOnly: refused, returnTo } = {}) {
+	const { navigate, transport } = useDomainKit();
+	const inherited = useReadOnly();
+	const readOnly = refused ?? inherited;
+	const connection = transport.connection;
+	const runner = useRunner();
+	const listing = useZones();
+	const [command, setCommand] = useState(null);
+	const refresh = listing.refresh;
+	const submit = useCallback((input) => {
+		if (connection === void 0 || readOnly) return;
+		const destination = returnTo === void 0 ? currentUrl$1() : returnTo;
+		const interactive = destination === null ? {} : { returnTo: destination };
+		const method = input.method === "token" ? Transport.Method.token(input.values ?? {}) : input.method === "oauth" ? Transport.Method.oauth(interactive) : Transport.Method.integration(interactive);
+		setCommand(AccountsState.Submitting({ provider: input.provider }));
+		const granting = input.connectionId === void 0 ? connection.start({
+			method,
+			provider: input.provider
+		}) : connection.reconnect({
+			connectionId: input.connectionId,
+			method
+		});
+		runner.run(granting, {
+			onFailure: (error) => setCommand(AccountsState.Failure({ error })),
+			onSuccess: (started) => {
+				if (started._tag === "Redirect") {
+					setCommand(AccountsState.Redirecting({ url: started.authorizationUrl }));
+					navigate(started.authorizationUrl);
+					return;
+				}
+				setCommand(null);
+				refresh();
+			}
+		});
+	}, [
+		connection,
+		navigate,
+		readOnly,
+		refresh,
+		returnTo,
+		runner
+	]);
+	const connect = useCallback((input) => submit(input), [submit]);
+	const reconnect = useCallback((input) => submit(input), [submit]);
+	const state = command ?? (listing.state._tag === "Loading" ? AccountsState.Loading() : listing.state._tag === "Failure" ? AccountsState.Failure({ error: listing.state.error }) : AccountsState.Ready());
+	return {
+		connect,
+		reconnect,
+		connections: listing.connections,
+		providers: listing.providers,
+		refresh,
+		state,
+		zones: listing.zones
+	};
+}
+const normalize = (value) => value.trim().toLowerCase().replace(/\.$/, "");
+/**
+* The zone a value already sits in: the longest listed zone the value is at or under. Two accounts
+* can serve the same zone, so `preferred` names the one the customer picked and wins among equals;
+* without it the first listed account answers.
+*/
+const placementOf = (value, zones, preferred) => {
+	const domain = normalize(value);
+	if (domain === "") return null;
+	const matching = zones.filter((candidate) => {
+		const zone = normalize(candidate.zone);
+		return domain === zone || domain.endsWith(`.${zone}`);
+	});
+	const longest = matching.reduce((best, candidate) => best === null || normalize(candidate.zone).length > normalize(best.zone).length ? candidate : best, null);
+	if (longest === null) return null;
+	const closest = matching.filter((candidate) => normalize(candidate.zone) === normalize(longest.zone));
+	const best = closest.find((candidate) => preferred != null && candidate.connectionId === preferred.connectionId && normalize(candidate.zone) === normalize(preferred.zone)) ?? closest[0] ?? longest;
+	return {
+		placement: {
+			connectionId: best.connectionId,
+			zone: best.zone
+		},
+		zone: best
+	};
+};
+/**
+* What the customer typed in front of the zone they are reaching for. "mail.ex" against
+* `example.com` is the subdomain "mail"; "ex" on its own is none.
+*/
+const subdomainOf = (value, zone) => {
+	const typed = normalize(value);
+	const target = normalize(zone);
+	if (typed === "" || target.startsWith(typed)) return "";
+	const cut = typed.lastIndexOf(".");
+	if (cut < 0) return "";
+	const head = typed.slice(0, cut);
+	const tail = typed.slice(cut + 1);
+	return target.startsWith(tail) ? head : "";
+};
+/** Zones the typed value is reaching for: a prefix of the zone, or a subdomain of one. */
+const suggestionsFor = (value, zones) => {
+	const typed = normalize(value);
+	if (typed === "") return zones;
+	return zones.filter((candidate) => {
+		const zone = normalize(candidate.zone);
+		if (zone.startsWith(typed)) return true;
+		const cut = typed.lastIndexOf(".");
+		if (cut < 0) return false;
+		const tail = typed.slice(cut + 1);
+		return tail !== "" && zone.startsWith(tail);
+	});
+};
+/** The value a suggestion completes to: whatever subdomain was typed, then the zone. */
+const completionOf = (value, zone) => {
+	const subdomain = subdomainOf(value, zone.zone);
+	return subdomain === "" ? zone.zone : `${subdomain}.${zone.zone}`;
+};
+const optionId = (listId, zone) => `${listId}-${zone.connectionId}-${zone.zone}`;
+/**
+* One input over every zone the workspace's accounts reach, as props rather than markup. Arrow
+* keys move the highlight, Tab or Enter completes it, Escape closes the list, and `found` says
+* where the records will go.
+*/
+function useDomainField({ id, onChange, onResolve, value, zones }) {
+	const messages = useMessages();
+	const generated = useId();
+	const inputId = id ?? generated;
+	const listId = `${inputId}-suggestions`;
+	const [open, setOpen] = useState(false);
+	const [active, setActive] = useState(0);
+	const [chosen, setChosen] = useState(null);
+	const suggestions = suggestionsFor(value, zones);
+	const highlighted = suggestions[Math.min(active, Math.max(suggestions.length - 1, 0))] ?? null;
+	const found = placementOf(value, zones, chosen);
+	const showing = open && suggestions.length > 0;
+	const placement = found?.placement ?? null;
+	const connectionId = placement?.connectionId ?? null;
+	const placedIn = placement?.zone ?? null;
+	const announced = useRef(null);
+	useEffect(() => {
+		const signature = `${value}|${connectionId ?? ""}|${placedIn ?? ""}`;
+		if (announced.current === signature) return;
+		announced.current = signature;
+		onResolve?.({
+			connection: connectionId === null || placedIn === null ? null : {
+				connectionId,
+				zone: placedIn
+			},
+			domain: value
+		});
+	}, [
+		connectionId,
+		onResolve,
+		placedIn,
+		value
+	]);
+	const complete = (zone) => {
+		onChange(completionOf(value, zone));
+		setChosen({
+			connectionId: zone.connectionId,
+			zone: zone.zone
+		});
+		setOpen(false);
+		setActive(0);
+	};
+	return {
+		close: () => setOpen(false),
+		complete,
+		found,
+		highlighted,
+		inputProps: {
+			"aria-activedescendant": showing && highlighted !== null ? optionId(listId, highlighted) : void 0,
+			"aria-autocomplete": "list",
+			"aria-controls": listId,
+			"aria-expanded": showing,
+			autoComplete: "off",
+			id: inputId,
+			onChange: (event) => {
+				onChange(event.target.value);
+				setActive(0);
+				setOpen(true);
+			},
+			onFocus: () => setOpen(true),
+			onKeyDown: (event) => {
+				if (event.key === "Escape") {
+					setOpen(false);
+					return;
+				}
+				if (suggestions.length === 0) return;
+				if (event.key === "ArrowDown") {
+					event.preventDefault();
+					setOpen(true);
+					setActive((index) => (index + 1) % suggestions.length);
+					return;
+				}
+				if (event.key === "ArrowUp") {
+					event.preventDefault();
+					setOpen(true);
+					setActive((index) => (index + suggestions.length - 1) % suggestions.length);
+					return;
+				}
+				if ((event.key === "Tab" || event.key === "Enter") && showing && highlighted !== null) {
+					event.preventDefault();
+					complete(highlighted);
+				}
+			},
+			role: "combobox",
+			type: "text",
+			value
+		},
+		listboxProps: {
+			"aria-label": messages.zoneSuggestions,
+			hidden: !showing,
+			id: listId,
+			role: "listbox"
+		},
+		open: showing,
+		optionProps: (zone) => ({
+			"aria-selected": zone === highlighted,
+			id: optionId(listId, zone),
+			onMouseDown: (event) => {
+				event.preventDefault();
+				complete(zone);
+			},
+			role: "option"
+		}),
+		suggestions
+	};
+}
+//#endregion
+//#region src/connect.ts
+var connect_exports = /* @__PURE__ */ __exportAll({
+	AccountsState: () => AccountsState,
+	State: () => State$1,
+	ZonesState: () => ZonesState,
 	answeredInPlace: () => answeredInPlace,
+	attempted: () => attempted,
+	completionOf: () => completionOf,
+	describeMethods: () => describeMethods,
+	displayName: () => displayName,
+	holdsConnection: () => holdsConnection,
 	hostProvider: () => hostProvider,
-	useController: () => useController$2
+	offering: () => offering,
+	placementOf: () => placementOf,
+	providerOf: () => providerOf,
+	reconnect: () => reconnect,
+	rejectedField: () => rejectedField,
+	reusableConnections: () => reusableConnections,
+	suggestionsFor: () => suggestionsFor,
+	useAccounts: () => useAccounts,
+	useController: () => useController$2,
+	useDomainField: () => useDomainField,
+	useZones: () => useZones
 });
 const State$1 = Data.taggedEnum();
+/**
+* An interactive method leaves the page and comes back, so what the library knew is gone with it.
+* It writes down the domain it sent the customer away for, and the load that follows reads it once:
+* that, not a query parameter a host would have to keep, is how a return is told from a reload.
+*/
+const RETURNING = "domainkit.returning";
+const markReturn = (domain) => {
+	try {
+		sessionStorage.setItem(RETURNING, domain);
+	} catch {}
+};
+const tookReturn = (domain) => {
+	try {
+		if (sessionStorage.getItem(RETURNING) !== domain) return false;
+		sessionStorage.removeItem(RETURNING);
+		return true;
+	} catch {
+		return false;
+	}
+};
 /** Read at connect time, not at render, so it is the page the customer is actually on. */
 const currentUrl = () => typeof window === "undefined" ? null : window.location.href;
 const snapshotOf = (state) => {
@@ -1657,10 +1146,12 @@ const settled = (snapshot, discovery) => {
 * transport declares it and the domain has no connection yet; a discovery failure is not the
 * customer's problem, so the provider list still renders.
 */
-function useController$2({ domain, returnTo }) {
+function useController$2({ domain, readOnly: refused, returnTo }) {
 	const { emit, navigate, revision, transport } = useDomainKit();
-	const readOnly = useReadOnly();
+	const inherited = useReadOnly();
+	const readOnly = refused ?? inherited;
 	const connection = transport.connection;
+	const provisioning = transport.provisioning;
 	const runner = useRunner();
 	const [state, setState] = useState(State$1.Loading({ snapshot: null }));
 	const held = useRef({
@@ -1670,6 +1161,7 @@ function useController$2({ domain, returnTo }) {
 	});
 	const lastCommand = useRef(null);
 	const attempted = useRef(null);
+	const [established, setEstablished] = useState(0);
 	const [inspected, setInspected] = useState(domain);
 	if (inspected !== domain) {
 		setInspected(domain);
@@ -1719,6 +1211,7 @@ function useController$2({ domain, returnTo }) {
 					domain,
 					snapshot
 				};
+				if (tookReturn(domain) && snapshot.status === "connected") setEstablished((count) => count + 1);
 				setState(settled(snapshot, discovery));
 			}
 		});
@@ -1732,20 +1225,28 @@ function useController$2({ domain, returnTo }) {
 	const started = useCallback((result) => {
 		if (held.current.domain !== domain) return;
 		switch (result._tag) {
-			case "Connected":
+			case "Connected": {
+				const snapshot = result.snapshot;
+				setEstablished((count) => count + 1);
+				if (snapshot === null) {
+					load();
+					return;
+				}
 				held.current = {
 					discovery: null,
 					domain,
-					snapshot: result.snapshot
+					snapshot
 				};
-				setState(settled(result.snapshot, null));
-				if (result.snapshot.connectionId !== null) emit(Event.Connected({
-					connectionId: result.snapshot.connectionId,
+				setState(settled(snapshot, null));
+				if (snapshot.connectionId !== null) emit(Event.Connected({
+					connectionId: snapshot.connectionId,
 					domain,
-					snapshot: result.snapshot
+					snapshot
 				}));
 				return;
+			}
 			case "Redirect":
+				markReturn(domain);
 				setState(State$1.Redirecting({ url: result.authorizationUrl }));
 				navigate(result.authorizationUrl);
 				return;
@@ -1760,13 +1261,17 @@ function useController$2({ domain, returnTo }) {
 	}, [
 		domain,
 		emit,
+		load,
 		navigate
 	]);
 	const submit = useCallback((effect, attempt) => {
 		if (held.current.domain !== domain) return;
 		attempted.current = attempt;
 		const command = () => {
-			setState(State$1.Submitting({ snapshot: held.current.snapshot }));
+			setState(State$1.Submitting({
+				discovery: held.current.discovery,
+				snapshot: held.current.snapshot
+			}));
 			runner.run(effect, {
 				onFailure,
 				onSuccess: started
@@ -1784,11 +1289,16 @@ function useController$2({ domain, returnTo }) {
 		started
 	]);
 	const connect = useCallback((input) => {
-		if (connection === void 0) return;
+		if (connection === void 0 || readOnly) return;
 		const destination = input.returnTo ?? (returnTo === void 0 ? currentUrl() : returnTo);
 		const interactive = destination === null ? {} : { returnTo: destination };
 		const method = input.method === "token" ? Transport.Method.token(input.values ?? {}) : input.method === "oauth" ? Transport.Method.oauth(interactive) : Transport.Method.integration(interactive);
-		submit(connection.start({
+		const snapshot = held.current.snapshot;
+		const stale = snapshot?.status === "reconnect" && snapshot.provider === input.provider && snapshot.connectionId !== null;
+		submit(stale && snapshot?.connectionId != null ? connection.reconnect({
+			connectionId: snapshot.connectionId,
+			method
+		}) : connection.start({
 			domain,
 			method,
 			provider: input.provider
@@ -1799,11 +1309,12 @@ function useController$2({ domain, returnTo }) {
 	}, [
 		connection,
 		domain,
+		readOnly,
 		returnTo,
 		submit
 	]);
 	const reuse = useCallback((input) => {
-		if (connection === void 0) return;
+		if (connection === void 0 || readOnly) return;
 		submit(connection.attach({
 			connectionId: input.connectionId,
 			domain,
@@ -1812,6 +1323,7 @@ function useController$2({ domain, returnTo }) {
 	}, [
 		connection,
 		domain,
+		readOnly,
 		submit
 	]);
 	const select = useCallback((zone) => {
@@ -1825,7 +1337,10 @@ function useController$2({ domain, returnTo }) {
 		if (held.current.domain !== domain) return;
 		attempted.current = null;
 		const command = () => {
-			setState(State$1.Submitting({ snapshot: held.current.snapshot }));
+			setState(State$1.Submitting({
+				discovery: held.current.discovery,
+				snapshot: held.current.snapshot
+			}));
 			runner.run(effect, {
 				onFailure,
 				onSuccess: () => {
@@ -1847,17 +1362,20 @@ function useController$2({ domain, returnTo }) {
 		runner
 	]);
 	const detach = useCallback(() => {
-		const attachmentId = held.current.snapshot?.attachmentId;
-		if (connection === void 0 || attachmentId == null || held.current.domain !== domain) return;
+		const attachmentId = held.current.snapshot?.attachment?.id;
+		if (readOnly || connection === void 0 || attachmentId == null) return;
+		if (held.current.domain !== domain) return;
 		release(connection.detach(attachmentId), Event.Detached({ domain }));
 	}, [
 		connection,
 		domain,
+		readOnly,
 		release
 	]);
 	const disconnect = useCallback(() => {
 		const connectionId = held.current.snapshot?.connectionId;
-		if (connection === void 0 || connectionId == null || held.current.domain !== domain) return;
+		if (readOnly || connection === void 0 || connectionId == null) return;
+		if (held.current.domain !== domain) return;
 		release(connection.disconnect(connectionId), Event.Disconnected({
 			connectionId,
 			domain
@@ -1865,6 +1383,7 @@ function useController$2({ domain, returnTo }) {
 	}, [
 		connection,
 		domain,
+		readOnly,
 		release
 	]);
 	const retry = useCallback(() => {
@@ -1876,12 +1395,53 @@ function useController$2({ domain, returnTo }) {
 		load,
 		readOnly
 	]);
+	const sighted = useRef(null);
+	useEffect(() => {
+		if (readOnly || state._tag !== "Disconnected") return;
+		const discovery = state.discovery;
+		if (discovery === null || discovery._tag !== "Resolved") return;
+		const sight = `${domain}|${discovery.connectionId}|${discovery.zone}`;
+		if (sighted.current === sight) return;
+		sighted.current = sight;
+		reuse({
+			connectionId: discovery.connectionId,
+			zone: discovery.zone
+		});
+	}, [
+		domain,
+		readOnly,
+		reuse,
+		state
+	]);
+	const [receipt, setReceipt] = useState(null);
+	const receiptId = snapshotOf(state)?.lastReceiptId ?? null;
+	const readReceipt = useRef(null);
+	useEffect(() => {
+		if (receiptId === null) {
+			readReceipt.current = null;
+			setReceipt(null);
+			return;
+		}
+		if (provisioning === void 0 || readReceipt.current === receiptId) return;
+		readReceipt.current = receiptId;
+		runner.run(provisioning.receipt(Receipt.ReceiptId.make(receiptId)), {
+			onFailure: () => setReceipt(null),
+			onSuccess: (value) => setReceipt(value.id === receiptId ? value : null)
+		});
+	}, [
+		provisioning,
+		receiptId,
+		runner
+	]);
 	return {
 		connect,
 		detach,
 		disconnect,
-		discovery: state._tag === "Disconnected" || state._tag === "Failure" ? state.discovery : null,
+		domain,
+		established,
+		discovery: state._tag === "Disconnected" || state._tag === "Failure" || state._tag === "Submitting" ? state.discovery : null,
 		providers: snapshotOf(state)?.providers ?? [],
+		receipt: receipt?.id === receiptId ? receipt : null,
 		refresh: load,
 		retry,
 		reuse,
@@ -1890,18 +1450,24 @@ function useController$2({ domain, returnTo }) {
 		state
 	};
 }
-function Root$2({ controller, ...props }) {
-	return usePart("div", props, { status: controller.state._tag }, {
-		"data-domainkit-part": "connection-root",
-		"data-state": controller.state._tag
-	});
-}
 /**
 * Whether a failure is already answered where it was raised: beside the method the customer used.
-* A flow rendering its own `Outcome` beside the dialog skips it, so the failure announces once.
+* A surface rendering one outcome for the whole flow skips it, so the failure announces once.
 */
 const answeredInPlace = (controller) => controller.state._tag === "Failure" && controller.state.attempt !== null;
 /**
+* Whether the surface should read as connected: it is, or a command it started is in flight over a
+* connection that was. The provider row and the dialog it opened stay on screen for the length of
+* the command rather than vanishing under the customer half way through it.
+*/
+const holdsConnection = (controller) => controller.state._tag === "Connected" || controller.state._tag === "Submitting" && controller.snapshot?.status === "connected";
+/**
+* Whether the provider turned the credential down, so the customer must prove the account again.
+* Proving it re-credits the connection the workspace already holds and leaves its domains where
+* they are, which is why the surface offers a reconnect rather than a second account.
+*/
+const reconnect = (controller) => controller.state._tag === "Reconnect" || controller.state._tag === "Submitting" && controller.snapshot?.status === "reconnect";
+/**
 * The provider whose nameservers serve this domain, as the snapshot describes it. Discovery names
 * it by id; without a descriptor there is nothing to draw, so there is no host.
 */
@@ -1911,498 +1477,227 @@ const hostProvider = (controller) => {
 	const named = discovery.host.provider;
 	return controller.providers.find((entry) => entry.id === named) ?? null;
 };
+/** The descriptor for one provider id, or `null` when the snapshot describes no such provider. */
+const providerOf = (controller, providerId) => providerId == null ? null : controller.providers.find((entry) => entry.id === providerId) ?? null;
 /** The provider as the customer knows it, falling back to the id when the snapshot has no name. */
-const displayName = (controller, provider) => controller.providers.find((entry) => entry.id === provider)?.name ?? provider;
+const displayName = (controller, providerId) => providerOf(controller, providerId)?.name ?? providerId;
 /**
-* The last failure as a card: media, the catalog's title and description, and the retry the flow
-* allows. Children replace the composition and keep the binding.
+* Whether the connect surface has anything to offer for this domain: a provider that serves the
+* zone, a connection discovery already found, one the owner already holds, or a command already
+* running. Never while a connection is held, which is what `holdsConnection` answers. A host reads
+* it to order its own offers beside DomainKit's rather than competing with them.
 */
-function Outcome$2({ children, controller, ...props }) {
-	const { messages } = useDomainKit();
-	const readOnly = useReadOnly();
+const offering = (controller, connect = "detected") => {
+	if (holdsConnection(controller)) return false;
 	const state = controller.state;
-	if (state._tag !== "Failure") return null;
-	const acted = state.attempt === null ? void 0 : displayName(controller, state.attempt.provider);
-	const words = outcome(state.error, messages, {
-		...controller.snapshot === null ? {} : { domain: controller.snapshot.domain },
-		...acted === void 0 ? {} : { provider: acted }
-	});
-	return /* @__PURE__ */ jsx(Provider, {
-		value: {
-			description: words.description,
-			layout: props.layout ?? "card",
-			retry: readOnly ? null : controller.retry,
-			retryPart: "connection-retry",
-			title: words.title,
-			tone: "danger"
-		},
-		children: /* @__PURE__ */ jsx(Root$6, {
-			...props,
-			children: children ?? /* @__PURE__ */ jsx(Composition, {})
-		})
-	});
-}
-function Status$2({ controller, ...props }) {
-	const { messages } = useDomainKit();
+	if (state._tag === "Submitting" || state._tag === "Redirecting" || state._tag === "SelectionRequired" || state._tag === "Reconnect") return true;
+	if (connect !== "detected") return connect === "always";
+	const discovery = controller.discovery;
+	return hostProvider(controller) !== null || discovery !== null && discovery._tag !== "NotFound" || (controller.snapshot?.reusable.length ?? 0) > 0;
+};
+/**
+* Every connection the customer can attach without proving anything: the one discovery resolved,
+* the candidates a zone choice is between, and the connections the snapshot lists as reusable.
+*/
+const reusableConnections = (controller) => {
 	const state = controller.state;
-	const provider = controller.snapshot?.provider ?? "";
-	const text = () => {
-		switch (state._tag) {
-			case "Loading": return messages.loading;
-			case "Submitting": return messages.connecting;
-			case "Redirecting": return messages.redirecting;
-			case "Connected": return messages.connectedTo(provider);
-			case "Reconnect": return messages.reconnectRequired(provider);
-			case "SelectionRequired": return messages.chooseZone;
-			case "Disconnected": return messages.notConnected;
-			case "Failure": return "";
-		}
+	const discovery = controller.discovery;
+	const candidates = state._tag === "SelectionRequired" ? state.candidates.map((candidate) => ({
+		...candidate,
+		connectionId: state.connectionId
+	})) : discovery !== null && discovery._tag === "SelectionRequired" ? discovery.candidates : [];
+	return [
+		...(discovery !== null && discovery._tag === "Resolved" ? [discovery] : []).map((entry) => ({
+			connectionId: entry.connectionId,
+			label: entry.label,
+			zone: entry.zone
+		})),
+		...candidates.map((entry) => ({
+			connectionId: entry.connectionId,
+			label: entry.label,
+			zone: entry.zone
+		})),
+		...(controller.snapshot?.reusable ?? []).map((entry) => ({
+			connectionId: entry.connectionId,
+			label: entry.provider,
+			zone: void 0
+		}))
+	];
+};
+const fieldsOf = (method) => {
+	const fields = method.fields;
+	if (fields === null) return null;
+	const required = fields.filter((field) => field.required);
+	const optional = fields.filter((field) => !field.required);
+	return {
+		explains: (required.find((field) => field.secret) ?? required[0] ?? optional[0])?.name ?? null,
+		optional,
+		required
 	};
-	return usePart("p", props, { status: state._tag }, {
-		children: text(),
-		"data-domainkit-part": "connection-status",
-		"data-state": state._tag,
-		role: state._tag === "Submitting" || state._tag === "Loading" ? "status" : void 0
-	});
-}
+};
+/** One provider's auth methods, arranged for a surface that asks for one decision at a time. */
+const describeMethods = (provider) => {
+	const described = provider.methods.map((method) => ({
+		descriptor: method,
+		fields: fieldsOf(method),
+		kind: method.kind
+	}));
+	const interactive = described.filter((method) => method.fields === null);
+	const typed = described.filter((method) => method.fields !== null);
+	return {
+		alternate: interactive.length > 0 && typed.length > 0,
+		interactive,
+		typed
+	};
+};
 /**
 * The one field a rejected command was about, if any. A provider that turns down credentials is
 * answering the secret it was given, and it names no field, so the first secret carries the
 * answer; anything else is about the request rather than one input.
 */
-const rejected = (reason, fields) => {
-	if (reason === null) return null;
+const rejectedField = (error, fields) => {
+	if (error === null) return null;
+	const reason = error.reason;
 	if (reason._tag === "InvalidInput") return fields.find((field) => field.name === reason.field)?.name ?? null;
 	if (reason._tag !== "Unauthenticated" && reason._tag !== "Forbidden") return null;
 	return fields.find((field) => field.secret)?.name ?? null;
 };
-/**
-* One declared field in shadcn's `Field` anatomy: the label, the control, the note under it, and
-* the error the provider answered with. The docs link rides the field it explains.
-*/
-function TokenField({ controller, docsUrl, field, invalid }) {
-	const { messages } = useDomainKit();
-	const icons = useIcons();
-	const id = useId();
-	return /* @__PURE__ */ jsxs("div", {
-		"data-domainkit-part": "field",
-		"data-invalid": invalid ? "" : void 0,
-		"data-orientation": "vertical",
-		children: [
-			/* @__PURE__ */ jsxs("label", {
-				"data-domainkit-part": "field-label",
-				htmlFor: id,
-				children: [messages.fieldLabel(field.name), field.required ? null : /* @__PURE__ */ jsx("span", {
-					"data-domainkit-part": "field-optional",
-					children: messages.optionalField
-				})]
-			}),
-			/* @__PURE__ */ jsx("input", {
-				"aria-invalid": invalid ? true : void 0,
-				autoComplete: "off",
-				"data-domainkit-part": "field-input",
-				id,
-				name: field.name,
-				required: field.required,
-				type: field.secret ? "password" : "text"
-			}),
-			docsUrl === null ? null : /* @__PURE__ */ jsxs("a", {
-				"data-domainkit-part": "field-description",
-				href: docsUrl,
-				rel: "noreferrer",
-				target: "_blank",
-				children: [messages.getToken, /* @__PURE__ */ jsx("span", {
-					"aria-hidden": "true",
-					"data-icon": "inline-end",
-					children: icons.external
-				})]
-			}),
-			invalid ? /* @__PURE__ */ jsx("div", {
-				"data-domainkit-part": "field-error",
-				children: /* @__PURE__ */ jsx(Outcome$2, {
-					controller,
-					layout: "inline"
-				})
-			}) : null
-		]
-	});
-}
-/**
-* One auth method, rendered from its descriptor. A token method draws an input per declared
-* field, so a provider that needs an account id alongside a token needs no code here. The fields
-* a provider does not need sit behind a disclosure, so the common form is one field.
-*/
-function Method({ controller, method, provider }) {
-	const { messages } = useDomainKit();
+/** Whether a failure was raised by this provider's method, so the form answers beside it. */
+const attempted = (controller, provider, method) => {
 	const state = controller.state;
-	const busy = state._tag === "Submitting";
-	const failed = state._tag === "Failure" && state.attempt !== null && state.attempt.provider === provider.id && state.attempt.method === method.kind;
-	if (method.fields === null) return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("button", {
-		"data-domainkit-part": method.kind === "oauth" ? "oauth-connect" : "integration-connect",
-		"data-provider": provider.id,
-		disabled: busy,
-		onClick: () => controller.connect({
-			method: method.kind,
-			provider: provider.id
-		}),
-		type: "button",
-		children: method.kind === "oauth" ? messages.methodOAuth(provider.name) : messages.methodIntegration(provider.name)
-	}), failed ? /* @__PURE__ */ jsx(Outcome$2, {
-		controller,
-		layout: "inline"
-	}) : null] });
-	const fields = method.fields;
-	const answered = rejected(failed && state._tag === "Failure" ? state.error.reason : null, fields);
-	const required = fields.filter((field) => field.required);
-	const optional = fields.filter((field) => !field.required);
-	const explains = (required.find((field) => field.secret) ?? required[0] ?? optional[0])?.name;
-	const render = (field) => /* @__PURE__ */ jsx(TokenField, {
-		controller,
-		docsUrl: field.name === explains ? method.docsUrl : null,
-		field,
-		invalid: field.name === answered
-	}, field.name);
-	return /* @__PURE__ */ jsxs("form", {
-		"data-domainkit-part": "token-connect",
-		"data-provider": provider.id,
-		onSubmit: (event) => {
-			event.preventDefault();
-			const data = new FormData(event.currentTarget);
-			const values = {};
-			for (const field of fields) {
-				const value = data.get(field.name);
-				if (typeof value === "string" && (value !== "" || field.required)) values[field.name] = value;
-			}
-			controller.connect({
-				method: method.kind,
-				provider: provider.id,
-				values
-			});
-		},
-		children: [
-			required.map(render),
-			optional.length === 0 ? null : /* @__PURE__ */ jsxs("details", {
-				"data-domainkit-part": "more-options",
-				open: optional.some((field) => field.name === answered) || void 0,
-				children: [/* @__PURE__ */ jsx("summary", {
-					"data-domainkit-part": "more-options-trigger",
-					children: messages.moreOptions
-				}), optional.map(render)]
-			}),
-			failed && answered === null ? /* @__PURE__ */ jsx(Outcome$2, {
-				controller,
-				layout: "inline"
-			}) : null,
-			/* @__PURE__ */ jsx("button", {
-				"data-domainkit-part": "token-submit",
-				disabled: busy,
-				type: "submit",
-				children: messages.methodToken
-			})
-		]
-	});
-}
-/**
-* One provider's methods. With a heading it is a disclosure the customer opens; the provider a
-* narrowed dialog is about carries no heading, because the dialog title already names it.
-*/
-function Authentication({ controller, onOpen, open, provider }) {
-	const methods = provider.methods.map((method) => /* @__PURE__ */ jsx(Method, {
-		controller,
-		method,
-		provider
-	}, `${provider.id}:${method.kind}`));
-	return /* @__PURE__ */ jsxs("section", {
-		"data-domainkit-part": "provider-authentication",
-		"data-provider": provider.id,
-		"data-state": open ? "open" : "closed",
-		children: [onOpen === void 0 ? null : /* @__PURE__ */ jsxs("button", {
-			"aria-expanded": open,
-			"data-domainkit-part": "provider-heading",
-			onClick: onOpen,
-			type: "button",
-			children: [/* @__PURE__ */ jsx(Mark, { provider }), /* @__PURE__ */ jsx("strong", { children: provider.name })]
-		}), open ? methods : null]
-	});
-}
+	if (state._tag !== "Failure" || state.attempt === null) return null;
+	return state.attempt.provider === provider && state.attempt.method === method ? state.error : null;
+};
+//#endregion
+//#region src/records.ts
 /**
-* Everything a disconnected domain can do: a connection discovery already found, the connections
-* this owner already has, then each provider's declared methods.
+* What a domain's requirements are, as data: the zone file they spell, the clipboard control a
+* value needs, and the standing one row reports. The table itself is the host's.
 */
-function Form({ controller, ...props }) {
-	const { messages } = useDomainKit();
-	const [opened, setOpened] = useState(null);
-	const state = controller.state;
-	const snapshot = controller.snapshot;
-	const discovery = controller.discovery;
-	const candidates = state._tag === "SelectionRequired" ? state.candidates.map((candidate) => ({
-		...candidate,
-		connectionId: state.connectionId
-	})) : discovery !== null && discovery._tag === "SelectionRequired" ? discovery.candidates : [];
-	const resolved = discovery !== null && discovery._tag === "Resolved" ? discovery : null;
-	const reusable = snapshot?.reusable ?? [];
-	const providers = controller.providers;
-	const host = hostProvider(controller);
-	const others = providers.filter((provider) => provider.id !== host?.id);
-	const authentication = (provider, open) => /* @__PURE__ */ jsx(Authentication, {
-		controller,
-		onOpen: () => setOpened(open ? "" : provider.id),
-		open,
-		provider
-	}, provider.id);
-	return usePart("div", props, { status: state._tag }, {
-		children: /* @__PURE__ */ jsxs(Fragment, { children: [
-			resolved === null ? null : /* @__PURE__ */ jsxs("section", {
-				"data-domainkit-part": "discovery-resolved",
-				children: [/* @__PURE__ */ jsx("p", { children: messages.discoveredConnection(resolved.label) }), /* @__PURE__ */ jsx("button", {
-					"data-domainkit-part": "attach-target",
-					onClick: () => controller.reuse({
-						connectionId: resolved.connectionId,
-						zone: resolved.zone
-					}),
-					type: "button",
-					children: messages.useConnection(resolved.label)
-				})]
-			}),
-			candidates.length === 0 ? null : /* @__PURE__ */ jsxs("section", {
-				"data-domainkit-part": "discovery-candidates",
-				children: [/* @__PURE__ */ jsx("p", { children: state._tag === "SelectionRequired" ? messages.chooseZone : messages.discoveryAmbiguous }), /* @__PURE__ */ jsx("div", {
-					"data-domainkit-part": "target-list",
-					"data-state": "ambiguous",
-					children: candidates.map((candidate) => /* @__PURE__ */ jsx("button", {
-						"data-domainkit-part": "attach-target",
-						onClick: () => controller.reuse({
-							connectionId: candidate.connectionId,
-							zone: candidate.zone
-						}),
-						type: "button",
-						children: messages.useConnection(candidate.label)
-					}, `${candidate.connectionId}:${candidate.zone}`))
-				})]
-			}),
-			reusable.length === 0 ? null : /* @__PURE__ */ jsxs("section", {
-				"data-domainkit-part": "reusable-connection",
-				children: [/* @__PURE__ */ jsx("div", {
-					"data-domainkit-part": "reusable-connection-heading",
-					children: /* @__PURE__ */ jsx("strong", { children: messages.reusableConnections })
-				}), reusable.map((connection) => /* @__PURE__ */ jsx("button", {
-					"data-connection-id": connection.connectionId,
-					"data-domainkit-part": "attach-target",
-					onClick: () => controller.reuse({ connectionId: connection.connectionId }),
-					type: "button",
-					children: messages.useConnection(connection.provider)
-				}, connection.connectionId))]
-			}),
-			providers.length === 0 ? /* @__PURE__ */ jsx("p", {
-				"data-domainkit-part": "target-unavailable",
-				children: messages.noProviders
-			}) : host === null ? others.map((provider) => authentication(provider, opened === null ? provider.id === others[0]?.id : opened === provider.id)) : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Authentication, {
-				controller,
-				open: true,
-				provider: host
-			}), others.length === 0 ? null : /* @__PURE__ */ jsxs("details", {
-				"data-domainkit-part": "other-providers",
-				children: [/* @__PURE__ */ jsx("summary", {
-					"data-domainkit-part": "other-providers-trigger",
-					children: messages.useAnotherProvider
-				}), others.map((provider) => authentication(provider, opened === provider.id))]
-			})] })
-		] }),
-		"data-domainkit-part": "connection-form"
-	});
-}
-/** The connect surface. Without `render` it is a Base UI dialog behind `trigger`. */
-function Dialog$2({ children, controller, render, title, trigger }) {
-	const { colorScheme, messages, portalContainer, themeStyle } = useDomainKit();
-	const readOnly = useReadOnly();
-	const [open, setOpen] = useState(false);
-	const state = controller.state;
-	const busy = state._tag === "Submitting";
-	const unattributed = state._tag === "Failure" && !answeredInPlace(controller);
-	const snapshot = controller.snapshot;
-	const attached = snapshot?.provider ?? null;
-	const host = hostProvider(controller);
-	const named = attached === null ? host?.name ?? null : displayName(controller, attached);
-	const heading = title ?? (named === null ? messages.connectAnyTitle : messages.connectTitle(named));
-	const running = state._tag === "Loading" || state._tag === "Submitting" || state._tag === "Redirecting" || state._tag === "SelectionRequired";
-	const label = named === null ? messages.connectAnyTitle : messages.connect;
-	const body = children ?? /* @__PURE__ */ jsx(Form, { controller });
-	if (readOnly) return /* @__PURE__ */ jsx(Fragment, {});
-	if (render !== void 0) return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("button", {
-		"data-domainkit-part": "connection-trigger",
-		onClick: () => setOpen(!open),
-		type: "button",
-		children: trigger ?? label
-	}), render({
-		children: body,
-		open
-	})] });
-	return /* @__PURE__ */ jsxs(Dialog.Root, {
-		onOpenChange: (next, details) => {
-			if (!next && busy) {
-				details.cancel();
-				return;
-			}
-			setOpen(next);
-		},
-		open,
-		children: [/* @__PURE__ */ jsx(Dialog.Trigger, {
-			"data-domainkit-part": "connection-trigger",
-			children: trigger ?? label
-		}), /* @__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": "connection-dialog",
-				"data-domainkit-root": "",
-				style: themeStyle,
-				children: [
-					/* @__PURE__ */ jsxs("div", {
-						"data-domainkit-part": "dialog-header",
-						children: [/* @__PURE__ */ jsxs("div", {
-							"data-domainkit-part": "dialog-heading",
-							children: [/* @__PURE__ */ jsx(Dialog.Title, {
-								"data-domainkit-part": "dialog-title",
-								children: heading
-							}), /* @__PURE__ */ jsx(Dialog.Description, {
-								"data-domainkit-part": "dialog-description",
-								children: messages.connectDescription(snapshot?.domain ?? "")
-							})]
-						}), busy ? null : /* @__PURE__ */ jsx(Dialog.Close, {
-							"aria-label": messages.close,
-							"data-domainkit-part": "dialog-close",
-							children: "×"
-						})]
-					}),
-					/* @__PURE__ */ jsxs("div", {
-						"data-domainkit-part": "dialog-body",
-						children: [
-							running ? /* @__PURE__ */ jsx(Status$2, { controller }) : null,
-							body,
-							unattributed ? /* @__PURE__ */ jsx(Outcome$2, { controller }) : null
-						]
-					}),
-					busy ? null : /* @__PURE__ */ jsx("div", {
-						"data-domainkit-part": "dialog-footer",
-						children: /* @__PURE__ */ jsx(Dialog.Close, {
-							"data-domainkit-part": "dialog-cancel",
-							children: messages.cancel
-						})
-					})
-				]
-			})]
-		})]
-	});
+var records_exports = /* @__PURE__ */ __exportAll({
+	copyText: () => copyText,
+	downloadZoneFile: () => downloadZoneFile,
+	identity: () => identity,
+	requirementsKey: () => requirementsKey,
+	statusOf: () => statusOf,
+	toZoneFile: () => toZoneFile,
+	useCopy: () => useCopy
+});
+const absolute = (value) => value.endsWith(".") ? value : `${value}.`;
+const textEncoder = new TextEncoder();
+const escapeTxtCharacter = (character) => {
+	if (character === "\"" || character === "\\") return `\\${character}`;
+	const codePoint = character.codePointAt(0);
+	if (codePoint !== void 0 && (codePoint < 32 || codePoint === 127)) return `\\${codePoint.toString().padStart(3, "0")}`;
+	return character;
+};
+/** TXT strings are capped at 255 bytes each, so long values are split and quoted per chunk. */
+const txtValue = (value) => {
+	const chunks = [];
+	let chunk = "";
+	let byteLength = 0;
+	for (const character of value) {
+		const characterByteLength = textEncoder.encode(character).byteLength;
+		if (byteLength + characterByteLength > 255) {
+			chunks.push(chunk);
+			chunk = "";
+			byteLength = 0;
+		}
+		chunk += escapeTxtCharacter(character);
+		byteLength += characterByteLength;
+	}
+	chunks.push(chunk);
+	return chunks.map((part) => `"${part}"`).join(" ");
+};
+/** The RR type as a zone file spells it. The tag and the type name are the same string. */
+const rrType = (record) => record._tag;
+const zoneData = (record) => {
+	switch (record._tag) {
+		case "A":
+		case "AAAA": return record.address;
+		case "CNAME": return absolute(record.target);
+		case "NS": return absolute(record.nameserver);
+		case "TXT": return txtValue(record.value);
+		case "MX": return `${record.priority} ${absolute(record.exchange)}`;
+		case "CAA": return `${record.flags} ${record.tag} "${record.value}"`;
+		case "SRV": return `${record.priority} ${record.weight} ${record.port} ${absolute(record.target)}`;
+	}
+};
+const toZoneFile = (records) => `${records.map((record) => `${absolute(record.name)}${record.ttl === null ? "" : ` ${record.ttl}`} IN ${rrType(record)} ${zoneData(record)}`).join("\n")}\n`;
+const downloadText = (filename, contents) => {
+	if (typeof document === "undefined") return;
+	const blob = new Blob([contents], { type: "text/plain;charset=utf-8" });
+	const url = URL.createObjectURL(blob);
+	const anchor = document.createElement("a");
+	anchor.download = filename;
+	anchor.href = url;
+	document.body.append(anchor);
+	anchor.click();
+	anchor.remove();
+	URL.revokeObjectURL(url);
+};
+const downloadZoneFile = (domain, records) => downloadText(`${domain}.txt`, toZoneFile(records));
+const copyText = (value) => {
+	if (typeof navigator === "undefined" || navigator.clipboard === void 0) return Promise.resolve(false);
+	return navigator.clipboard.writeText(value).then(() => true, () => false);
+};
+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);
+			});
+		}
+	};
 }
+/** The row's standing, or `null` when neither a plan nor an observation covers the record. */
+const statusOf = (record, sources) => {
+	const operation = sources.plan?.operations.find((entry) => DnsRecord.equals(entry.record, record));
+	if (operation !== void 0) return {
+		_tag: "Operation",
+		operation
+	};
+	const status = sources.readiness?.requirements.find((requirement) => DnsRecord.equals(requirement.record, record))?.status;
+	return status === void 0 ? null : {
+		_tag: "Readiness",
+		status
+	};
+};
+/** A stable React key for a requirement: type, name, and data identify a record. */
+const identity = (record) => [
+	rrType(record),
+	record.name,
+	DnsRecord.data(record)
+].join(":");
 /**
-* The disconnected offer: the provider whose nameservers serve the domain, what that means, and
-* the trigger that connects it. With no host detected there is nothing to offer, so nothing
-* renders unless the host application asks for the dialog anyway.
+* A requirement set keyed by everything it carries, for memos that decide whether to re-send it.
+* `identity` is deliberately narrower: it answers "is this the same record" for a React key, while
+* a plan and an observation are built from `ttl`, `policy`, and `purpose` as well. `policy` in
+* particular decides whether a name may hold anything else, so readiness turns on it.
 */
-function Prompt({ connect = "detected", controller, ...props }) {
-	const { messages } = useDomainKit();
-	const readOnly = useReadOnly();
-	const state = controller.state;
-	const host = hostProvider(controller);
-	const discovery = controller.discovery;
-	const offers = host !== null || discovery !== null && discovery._tag !== "NotFound" || (controller.snapshot?.reusable.length ?? 0) > 0;
-	const inFlight = state._tag === "Submitting" || state._tag === "Redirecting" || state._tag === "SelectionRequired" || state._tag === "Reconnect";
-	const element = usePart("div", props, { status: state._tag }, {
-		children: /* @__PURE__ */ jsxs(Fragment, { children: [host === null ? null : /* @__PURE__ */ jsxs("div", {
-			"data-domainkit-part": "host-identity",
-			children: [
-				/* @__PURE__ */ jsx(Mark, { provider: host }),
-				/* @__PURE__ */ jsx("span", {
-					"data-domainkit-part": "host-name",
-					children: host.name
-				}),
-				/* @__PURE__ */ jsx("span", {
-					"data-domainkit-part": "host-statement",
-					children: messages.hostOwnsZone
-				})
-			]
-		}), /* @__PURE__ */ jsx(Dialog$2, { controller })] }),
-		"data-domainkit-part": "connect-prompt",
-		"data-host": host?.id
-	});
-	if (!inFlight && !offers && connect !== "always") return null;
-	if (readOnly && host === null) return null;
-	return element;
-}
-/** A connected domain: which provider holds it, and how to let it go. */
-function Card({ controller, ...props }) {
-	const { messages } = useDomainKit();
-	const readOnly = useReadOnly();
-	const state = controller.state;
-	const snapshot = controller.snapshot;
-	const provider = controller.providers.find((entry) => entry.id === snapshot?.provider);
-	return usePart("div", props, { status: state._tag }, {
-		children: /* @__PURE__ */ jsxs(Fragment, { children: [
-			/* @__PURE__ */ jsxs("div", {
-				"data-domainkit-part": "connected-identity",
-				children: [provider === void 0 ? null : /* @__PURE__ */ jsx(Mark, { provider }), /* @__PURE__ */ jsx(Status$2, { controller })]
-			}),
-			readOnly ? null : /* @__PURE__ */ jsxs("div", {
-				"data-domainkit-part": "connected-actions",
-				children: [/* @__PURE__ */ jsx("button", {
-					"data-domainkit-part": "disconnect-trigger",
-					disabled: state._tag === "Submitting",
-					onClick: controller.detach,
-					type: "button",
-					children: messages.detach
-				}), /* @__PURE__ */ jsx("button", {
-					"data-domainkit-part": "disconnect-action",
-					disabled: state._tag === "Submitting",
-					onClick: controller.disconnect,
-					type: "button",
-					children: messages.disconnect
-				})]
-			}),
-			/* @__PURE__ */ jsx(Outcome$2, { controller })
-		] }),
-		"data-domainkit-part": "connected-card"
-	});
-}
-/** Connection on its own: the card once connected, the prompt until then. */
-function Flow$2({ connect, domain, returnTo, ...props }) {
-	const controller = useController$2({
-		domain,
-		...returnTo === void 0 ? {} : { returnTo }
-	});
-	const state = controller.state;
-	return /* @__PURE__ */ jsx(Root$2, {
-		controller,
-		...props,
-		children: state._tag === "Connected" ? /* @__PURE__ */ jsx(Card, { controller }) : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Prompt, {
-			controller,
-			...connect === void 0 ? {} : { connect }
-		}), answeredInPlace(controller) ? null : /* @__PURE__ */ jsx(Outcome$2, { controller })] })
-	});
-}
+const requirementsKey = (records) => JSON.stringify(records);
 //#endregion
-//#region src/provision.tsx
+//#region src/provision.ts
 var provision_exports = /* @__PURE__ */ __exportAll({
-	Actions: () => Actions,
-	Dialog: () => Dialog$1,
-	Flow: () => Flow$1,
-	Outcome: () => Outcome$1,
-	Root: () => Root$1,
 	State: () => State$2,
-	Status: () => Status$1,
+	pendingPlan: () => pendingPlan,
+	planOf: () => planOf,
 	useController: () => useController$1
 });
-/** Plan, approve, apply. `approve` authorizes the digest and applies it in the same action. */
 /**
+* Plan, approve, apply; `approve` authorizes the digest and applies it in the same action.
 * Requirements identify themselves by content, so an inline array does not abandon the attempt.
 * Every field counts: a plan turns on `policy`, and `ttl` and `purpose` ride the wire with it.
 */
 const keyOf = (domain, requirements) => [domain, requirementsKey(requirements)].join("|");
-function useController$1({ domain, onApplied, requirements }) {
+function useController$1({ domain, onApplied, readOnly, requirements }) {
 	const { transport } = useDomainKit();
 	const group = transport.provisioning;
 	return useAttempt({
@@ -2414,6 +1709,7 @@ function useController$1({ domain, onApplied, requirements }) {
 		}),
 		group,
 		onDone: onApplied,
+		readOnly,
 		plan: useCallback(() => group === void 0 ? null : group.plan({
 			domain,
 			requirements
@@ -2424,63 +1720,12 @@ function useController$1({ domain, onApplied, requirements }) {
 		])
 	});
 }
-function Root$1({ controller, ...props }) {
-	return usePart("div", props, { status: controller.state._tag }, {
-		"data-domainkit-part": "provisioning-flow",
-		"data-state": controller.state._tag
-	});
-}
-function Dialog$1(props) {
-	return /* @__PURE__ */ jsx(Dialog$4, {
-		...props,
-		kind: "provisioning"
-	});
-}
-/** Approve and Decline for a plan already under review. */
-function Actions(props) {
-	return /* @__PURE__ */ jsx(Actions$2, {
-		...props,
-		kind: "provisioning"
-	});
-}
-function Outcome$1(props) {
-	return /* @__PURE__ */ jsx(Outcome$4, {
-		...props,
-		kind: "provisioning"
-	});
-}
-function Status$1(props) {
-	return /* @__PURE__ */ jsx(Status$4, {
-		...props,
-		kind: "provisioning"
-	});
-}
-/** Provisioning on its own: a trigger that plans, then the review dialog. */
-function Flow$1({ domain, onApplied, requirements, trigger, ...props }) {
-	const controller = useController$1({
-		domain,
-		requirements,
-		...onApplied === void 0 ? {} : { onApplied }
-	});
-	return /* @__PURE__ */ jsxs(Root$1, {
-		controller,
-		...props,
-		children: [/* @__PURE__ */ jsx(Dialog$1, {
-			controller,
-			...trigger === void 0 ? {} : { trigger }
-		}), /* @__PURE__ */ jsx(Outcome$1, { controller })]
-	});
-}
 //#endregion
-//#region src/verify.tsx
+//#region src/verify.ts
 var verify_exports = /* @__PURE__ */ __exportAll({
-	Evidence: () => Evidence,
-	ObserveAction: () => ObserveAction,
-	Outcome: () => Outcome,
-	Root: () => Root,
 	State: () => State,
-	Status: () => Status,
-	useController: () => useController
+	useController: () => useController,
+	valuesOf: () => valuesOf
 });
 /**
 * What the observer read back for the requirement's name, or `null` when it read nothing back at
@@ -2499,9 +1744,11 @@ function useController({ domain, polling = true, requirements }) {
 	const timer = useRef(void 0);
 	const signature = requirements === void 0 ? null : requirementsKey(requirements);
 	const requested = useMemo(() => requirements === void 0 ? void 0 : { requirements }, [signature]);
+	const held = useRef(domain);
 	const [observed, setObserved] = useState(domain);
 	if (observed !== domain) {
 		setObserved(domain);
+		held.current = domain;
 		setState(State.Idle());
 	}
 	const observe = useCallback(() => {
@@ -2510,6 +1757,7 @@ function useController({ domain, polling = true, requirements }) {
 		setState((previous) => State.Observing({ readiness: readinessOf(previous) }));
 		runner.run(requested === void 0 ? verification.observe(domain) : verification.observe(domain, requested), {
 			onFailure: (error) => {
+				if (held.current !== domain) return;
 				setState((previous) => State.Failure({
 					error,
 					readiness: readinessOf(previous)
@@ -2519,7 +1767,10 @@ function useController({ domain, polling = true, requirements }) {
 					error
 				}));
 			},
-			onSuccess: (readiness) => setState(State.Observed({ readiness }))
+			onSuccess: (readiness) => {
+				if (held.current !== domain) return;
+				setState(State.Observed({ readiness }));
+			}
 		});
 	}, [
 		domain,
@@ -2552,302 +1803,114 @@ function useController({ domain, polling = true, requirements }) {
 		state
 	};
 }
-function Root({ controller, ...props }) {
-	const overall = controller.readiness?.overall ?? null;
-	return usePart("div", props, { status: controller.state._tag }, {
-		"data-domainkit-part": "verification-status",
-		"data-overall": overall ?? void 0,
-		"data-state": controller.state._tag
-	});
-}
-function ObserveAction({ controller, ...props }) {
-	const { messages } = useDomainKit();
-	const observing = controller.state._tag === "Observing";
-	return usePart("button", props, { status: controller.state._tag }, {
-		"aria-busy": observing,
-		children: controller.readiness === null ? messages.checkDns : messages.checkAgain,
-		"data-domainkit-part": "observe-action",
-		"data-loading": observing ? "" : void 0,
-		disabled: observing,
-		onClick: controller.observe,
-		type: "button"
-	});
-}
-/** Evidence carries no id; its source and position identify it within one requirement. */
-const evidenceKey = (evidence, index) => [evidence._tag, index].join("-");
-/**
-* Per-requirement readiness and, below it, the host's own evidence: an SES identity, a certificate,
-* anything DomainKit cannot observe but the host feeds in.
-*/
-function Evidence({ readiness }) {
-	const { messages } = useDomainKit();
-	const icons = useIcons();
-	return /* @__PURE__ */ jsxs("div", {
-		"data-domainkit-part": "observation-list",
-		children: [readiness.requirements.map((requirement) => {
-			const settled = requirement.status === "satisfied";
-			return /* @__PURE__ */ jsxs("section", {
-				"data-domainkit-part": "observation-group",
-				children: [
-					/* @__PURE__ */ jsxs("div", {
-						"data-domainkit-part": "observation-row",
-						children: [/* @__PURE__ */ jsxs("span", {
-							"data-domainkit-part": "observation-record",
-							children: [
-								messages.recordType(requirement.record),
-								" ",
-								requirement.record.name
-							]
-						}), /* @__PURE__ */ jsx(Status$5, { status: requirement.status })]
-					}),
-					settled ? null : /* @__PURE__ */ jsx("p", {
-						"data-domainkit-part": "observation-expected",
-						children: messages.expectedValue(DnsRecord.data(requirement.record))
-					}),
-					/* @__PURE__ */ jsx("ul", { children: requirement.evidence.map((evidence, index) => {
-						const values = settled ? null : valuesOf(evidence);
-						return /* @__PURE__ */ jsxs("li", {
-							"data-domainkit-part": "observation-source",
-							children: [
-								messages.evidenceSource(evidence),
-								values === null ? null : /* @__PURE__ */ jsx("span", {
-									"data-domainkit-part": "observation-observed",
-									children: values.length === 0 ? messages.observedNothing : messages.observedValues(values)
-								}),
-								evidence.detail === null ? null : /* @__PURE__ */ jsx("p", {
-									"data-domainkit-part": "observation-note",
-									children: evidence.detail
-								})
-							]
-						}, evidenceKey(evidence, index));
-					}) })
-				]
-			}, identity(requirement.record));
-		}), readiness.host.length === 0 ? null : /* @__PURE__ */ jsxs("section", {
-			"data-domainkit-part": "observation-group",
-			"data-source": "host",
-			children: [/* @__PURE__ */ jsx("h3", {
-				"data-domainkit-part": "observation-source",
-				children: messages.hostEvidence
-			}), /* @__PURE__ */ jsx("ul", { children: readiness.host.map((evidence, index) => /* @__PURE__ */ jsxs("li", {
-				"data-domainkit-part": "host-evidence",
-				children: [
-					/* @__PURE__ */ jsx("span", {
-						"aria-hidden": "true",
-						"data-icon": "inline-start",
-						children: evidence.status === "ok" ? icons.success : evidence.status === "pending" ? icons.pending : icons.failure
-					}),
-					/* @__PURE__ */ jsx("span", {
-						"data-domainkit-part": "observation-record",
-						children: evidence.label
-					}),
-					/* @__PURE__ */ jsx("span", {
-						"data-domainkit-part": "record-status",
-						"data-status": evidence.status,
-						children: messages.hostEvidenceStatus(evidence.status)
-					}),
-					evidence.detail === null ? null : /* @__PURE__ */ jsx("p", {
-						"data-domainkit-part": "observation-note",
-						children: evidence.detail
-					})
-				]
-			}, `${evidence.source}-${index}`)) })]
-		})]
-	});
-}
-/**
-* The last observation that failed. Observing reads the world rather than changing the domain, so
-* the retry stays even in read-only.
-*/
-function Outcome({ children, controller, ...props }) {
-	const { messages } = useDomainKit();
-	const state = controller.state;
-	if (state._tag !== "Failure") return null;
-	const words = outcome(state.error, messages);
-	return /* @__PURE__ */ jsx(Provider, {
-		value: {
-			description: words.description,
-			layout: props.layout ?? "card",
-			retry: controller.retry,
-			retryPart: "verification-retry",
-			title: words.title,
-			tone: "danger"
-		},
-		children: /* @__PURE__ */ jsx(Root$6, {
-			...props,
-			children: children ?? /* @__PURE__ */ jsx(Composition, {})
-		})
-	});
-}
-/** The default verification slot: a button that observes, with the evidence behind it. */
-function Status({ controller, render, ...props }) {
-	const { colorScheme, messages, portalContainer, themeStyle } = useDomainKit();
-	const readiness = controller.readiness;
-	const body = /* @__PURE__ */ jsxs(Fragment, { children: [
-		controller.state._tag === "Observing" ? /* @__PURE__ */ jsx("p", {
-			"data-domainkit-part": "verification-progress",
-			role: "status",
-			children: messages.observing
-		}) : null,
-		readiness === null ? /* @__PURE__ */ jsx("p", {
-			"data-domainkit-part": "verification-progress",
-			children: messages.noEvidence
-		}) : /* @__PURE__ */ jsx(Evidence, { readiness }),
-		/* @__PURE__ */ jsx(Outcome, { controller })
-	] });
-	return /* @__PURE__ */ jsx(Root, {
-		controller,
-		...props,
-		children: render === void 0 ? /* @__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-busy": controller.state._tag === "Observing",
-					"aria-label": messages.checkDns,
-					"data-color-scheme": colorScheme,
-					"data-domainkit-part": "verification-popover",
-					"data-domainkit-root": "",
-					style: themeStyle,
-					children: [/* @__PURE__ */ jsx(Popover.Arrow, { "data-domainkit-part": "verification-arrow" }), body]
-				})
-			})
-		})] }) : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(ObserveAction, { controller }), render({
-			children: body,
-			open: controller.state._tag !== "Idle"
-		})] })
-	});
-}
 //#endregion
-//#region src/domain.tsx
-var domain_exports = /* @__PURE__ */ __exportAll({ Flow: () => Flow });
-function DefaultConnection({ connect, controller }) {
-	const stated = controller.state._tag === "Disconnected" && hostProvider(controller) !== null;
-	return controller.state._tag === "Connected" ? /* @__PURE__ */ jsx(Card, { controller }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-		stated ? null : /* @__PURE__ */ jsx(Status$2, { controller }),
-		/* @__PURE__ */ jsx(Prompt, {
-			connect,
-			controller
-		}),
-		answeredInPlace(controller) ? null : /* @__PURE__ */ jsx(Outcome$2, { controller })
-	] });
-}
-function DefaultActions({ cleanup, connection, provisioning }) {
-	const { capabilities, messages } = useDomainKit();
-	const readOnly = useReadOnly();
-	const icons = useIcons();
-	const connected = connection.state._tag === "Connected";
-	if (readOnly) return null;
-	const hasReceipt = connection.snapshot?.lastReceiptId != null;
-	return /* @__PURE__ */ jsxs(Fragment, { children: [capabilities.includes("provisioning") && connected ? /* @__PURE__ */ jsxs(Fragment, { children: [
-		/* @__PURE__ */ jsx("button", {
-			"data-domainkit-part": "plan-trigger",
-			disabled: provisioning.state._tag === "Planning",
-			onClick: provisioning.plan,
-			type: "button",
-			children: messages.reviewChanges
-		}),
-		/* @__PURE__ */ jsx(Status$1, { controller: provisioning }),
-		/* @__PURE__ */ jsx(Actions, { controller: provisioning }),
-		/* @__PURE__ */ jsx(Outcome$1, { controller: provisioning })
-	] }) : null, capabilities.includes("cleanup") && connected && hasReceipt ? /* @__PURE__ */ jsxs(Fragment, { children: [
-		/* @__PURE__ */ jsxs("button", {
-			"data-domainkit-part": "cleanup-trigger",
-			disabled: cleanup.state._tag === "Planning",
-			onClick: cleanup.plan,
-			type: "button",
-			children: [/* @__PURE__ */ jsx("span", {
-				"aria-hidden": "true",
-				"data-icon": "inline-start",
-				children: icons.close
-			}), messages.cleanUp]
-		}),
-		/* @__PURE__ */ jsx(Status$3, { controller: cleanup }),
-		/* @__PURE__ */ jsx(Actions$1, { controller: cleanup }),
-		/* @__PURE__ */ jsx(Outcome$3, { controller: cleanup })
-	] }) : null] });
-}
+//#region src/domain.ts
 /**
-* The whole lifecycle for one domain: connect, review, apply, observe, clean up. The flow renders
-* only what the transport declares, and every part of it is a slot with a default. It adds no
-* layout containers of its own, so a host's grid can place the slot output directly.
+* The whole lifecycle for one domain in one hook: connect, add the records, observe, clean up.
+* `useFlow` runs the four controllers together and plans as soon as the domain is attached with
+* nothing applied, so the styled surface is only markup.
 */
-function Flow({ connect = "detected", domain, onApplied, onCleaned, readOnly, requirements, returnTo, slots = {}, ...props }) {
+var domain_exports = /* @__PURE__ */ __exportAll({ useFlow: () => useFlow });
+/** Built from primitives alone, so the memo that reports it depends on exactly those. */
+const flowState = (input) => ({
+	applied: input.receipt !== null,
+	connected: input.connected,
+	connection: input.status,
+	label: input.label,
+	offering: input.offering,
+	provider: input.provider,
+	provisioning: input.planning,
+	readOnly: input.readOnly,
+	receiptId: input.receipt === null ? null : Receipt.ReceiptId.make(input.receipt)
+});
+function useFlow({ connect = "detected", domain, onApplied, onCleaned, readOnly, requirements, returnTo }) {
 	const { capabilities } = useDomainKit();
 	const inherited = useReadOnly();
+	const surfaceReadOnly = readOnly ?? inherited;
 	const connection = useController$2({
 		domain,
+		readOnly: surfaceReadOnly,
 		...returnTo === void 0 ? {} : { returnTo }
 	});
 	const refresh = connection.refresh;
 	const provisioning = useController$1({
 		domain,
+		readOnly: surfaceReadOnly,
 		onApplied: useCallback((receipt) => {
 			refresh();
 			onApplied?.(receipt);
 		}, [onApplied, refresh]),
 		requirements
 	});
-	const cleanup = useController$3({
-		domain,
-		onCleaned: useCallback((receipt) => {
-			refresh();
-			onCleaned?.(receipt);
-		}, [onCleaned, refresh]),
-		...connection.snapshot?.lastReceiptId == null ? {} : { receiptId: Receipt.ReceiptId.make(connection.snapshot.lastReceiptId) }
-	});
 	const verification = useController({
 		domain,
 		requirements
 	});
-	const readiness = verification.readiness;
-	return usePart("div", props, {
-		connection: connection.state._tag,
-		provisioning: provisioning.state._tag
-	}, {
-		children: /* @__PURE__ */ jsxs(ReadOnly, {
-			value: readOnly ?? inherited,
-			children: [
-				!capabilities.includes("connection") ? null : slots.connection === void 0 ? /* @__PURE__ */ jsx(DefaultConnection, {
-					connect,
-					controller: connection,
-					domain
-				}) : slots.connection({
-					connect,
-					controller: connection,
-					domain
-				}),
-				slots.records === void 0 ? /* @__PURE__ */ jsx(Table, {
-					readiness,
-					records: requirements
-				}) : slots.records({
-					controller: verification,
-					domain,
-					readiness,
-					records: requirements
-				}),
-				!capabilities.includes("verification") ? null : slots.verification === void 0 ? /* @__PURE__ */ jsx(Status, { controller: verification }) : slots.verification({
-					controller: verification,
-					domain
-				}),
-				slots.actions === void 0 ? /* @__PURE__ */ jsx(DefaultActions, {
-					cleanup,
-					connection,
-					domain,
-					provisioning
-				}) : slots.actions({
-					cleanup,
-					connection,
-					domain,
-					provisioning
-				})
-			]
-		}),
-		"data-domainkit-part": "domain-flow",
-		"data-domain": domain
+	const receiptId = connection.snapshot?.lastReceiptId ?? null;
+	const cleanup = useController$3({
+		domain,
+		readOnly: surfaceReadOnly,
+		...onCleaned === void 0 ? {} : { onCleaned },
+		...receiptId === null ? {} : { receiptId: Receipt.ReceiptId.make(receiptId) }
 	});
+	const attached = connection.snapshot?.attachment != null;
+	const signature = surfaceReadOnly || !capabilities.includes("provisioning") || !attached || receiptId !== null ? null : [
+		domain,
+		connection.established,
+		requirementsKey(requirements)
+	].join("|");
+	const planned = useRef(null);
+	const buildPlan = provisioning.plan;
+	useEffect(() => {
+		if (signature === null) {
+			planned.current = null;
+			return;
+		}
+		if (planned.current === signature) return;
+		planned.current = signature;
+		buildPlan();
+	}, [buildPlan, signature]);
+	const connected = holdsConnection(connection);
+	const offering$1 = offering(connection, connect);
+	const provider = connection.snapshot?.provider ?? hostProvider(connection)?.id ?? null;
+	return {
+		capabilities,
+		cleanup,
+		connection,
+		domain,
+		invitation: connect,
+		plan: pendingPlan(provisioning.state),
+		provisioning,
+		readiness: verification.readiness,
+		requirements,
+		state: flowState({
+			connected,
+			label: connection.snapshot?.attachment?.label ?? null,
+			offering: offering$1,
+			planning: provisioning.state._tag,
+			provider,
+			readOnly: surfaceReadOnly,
+			receipt: receiptId,
+			status: connection.state._tag
+		}),
+		verification
+	};
+}
+//#endregion
+//#region src/outcome.ts
+var outcome_exports = /* @__PURE__ */ __exportAll({
+	describe: () => describe,
+	useDescribe: () => useDescribe
+});
+/** The catalog's title and description for one failure. */
+const describe = (error, catalog, context = {}) => outcome(error, catalog, context);
+/**
+* `describe` bound to the catalog `DomainKit.Root` holds. The reason alone cannot name the
+* provider a customer typed a token for, so the surface supplies it in the context.
+*/
+function useDescribe() {
+	const messages = useMessages();
+	return (error, context = {}) => outcome(error, messages, context);
 }
 //#endregion
 //#region src/testing.ts
@@ -2861,6 +1924,6 @@ const transport = Testing.transport;
 //#region src/failure.ts
 const Failure = Data.taggedEnum();
 //#endregion
-export { cleanup_exports as Cleanup, connect_exports as Connect, domain_exports as Domain, domain_kit_exports as DomainKit, Event, Failure, messages_exports as Messages, operations_exports as Operations, outcome_exports as Outcome, provider_exports as Provider, provision_exports as Provision, records_exports as Records, testing_exports as Testing, theme_exports as Theme, verify_exports as Verify, defaultIcons, useIcons };
+export { cleanup_exports as Cleanup, connect_exports as Connect, domain_exports as Domain, domain_kit_exports as DomainKit, Event, Failure, messages_exports as Messages, outcome_exports as Outcome, provision_exports as Provision, records_exports as Records, testing_exports as Testing, verify_exports as Verify };
 
 //# sourceMappingURL=index.mjs.map