@domainkit/react 0.4.0 → 0.5.0

package/dist/index.mjs

@@ -1,7 +1,7 @@
 import { t as __exportAll } from "./rolldown-runtime-D7D4PA-g.mjs";
 import { AlertDialog } from "@base-ui/react/alert-dialog";
 import { RegistryProvider, useAtomSet, useAtomValue } from "@effect/atom-react";
-import { Transport } from "domainkit";
+import { DomainName, Transport } from "domainkit";
 import * as Data from "effect/Data";
 import * as Effect from "effect/Effect";
 import * as Atom from "effect/unstable/reactivity/Atom";
@@ -115,10 +115,11 @@ const english = {
 	close: "Close",
 	detectingProvider: "Detecting DNS provider…",
 	disconnectDomain: "Disconnect",
-	disconnectConsent: "The provider connection will be removed. Existing DNS records will be preserved.",
+	disconnectConsent: "This domain will be detached from the provider. Existing DNS records will be preserved.",
 	disconnecting: "Disconnecting…",
-	disconnectTitle: (provider) => `Disconnect ${provider}?`,
-	domainDisconnected: "Domain disconnected. DNS records were preserved.",
+	detaching: "Detaching domain…",
+	disconnectTitle: (provider) => `Detach ${provider}?`,
+	domainDisconnected: "Domain detached. DNS records were preserved.",
 	dialogDescription: (domain) => `Authorize DNS changes for ${domain}.`,
 	dialogTitle: (provider) => `Connect ${provider}`,
 	openingAuthorization: "Opening provider authorization…",
@@ -130,7 +131,9 @@ const english = {
 	reviewCleanup: "Remove records",
 	reviewDns: "Review changes",
 	retry: "Try again",
-	reuseConnection: (connection) => `Use ${connection}`,
+	existingConnection: "Existing provider connection",
+	targetUnavailable: "No provider targets are available for this connection.",
+	attachTarget: (target) => `Use ${target}`,
 	tokenLabel: "API token"
 };
 const merge = (overrides = {}) => ({
@@ -327,8 +330,8 @@ function useModel$3(connection, receiptId, onCleaned) {
 					if (current._tag === "Planning" || current._tag === "Cleaning") return Effect.void;
 					get.set(state, State$3.Planning());
 					return Effect.flatMap(Transport.Service, (transport) => transport.cleanup.plan({
-						connectionId: connection.connectionId,
-						domain: connection.domain,
+						attachmentId: connection.attachment.id,
+						domain: connection.attachment.domain,
 						receiptId
 					})).pipe(Effect.tap((plan) => Effect.sync(() => get.set(state, State$3.Review({ plan })))), Effect.catch((error) => Effect.sync(() => get.set(state, failureFromError(error)))), Effect.asVoid);
 				}
@@ -336,8 +339,8 @@ function useModel$3(connection, receiptId, onCleaned) {
 				const plan = current.plan;
 				get.set(state, State$3.Cleaning({ plan }));
 				return Effect.flatMap(Transport.Service, (transport) => transport.cleanup.apply({
-					connectionId: connection.connectionId,
-					domain: connection.domain,
+					attachmentId: connection.attachment.id,
+					domain: connection.attachment.domain,
 					planDigest: plan.digest,
 					receiptId
 				})).pipe(Effect.tap((result) => Effect.sync(() => {
@@ -361,8 +364,8 @@ function useModel$3(connection, receiptId, onCleaned) {
 			state
 		};
 	}, [
-		connection.connectionId,
-		connection.domain,
+		connection.attachment.domain,
+		connection.attachment.id,
 		emit,
 		receiptId,
 		runtime
@@ -556,6 +559,7 @@ function Mark({ provider, ...props }) {
 //#endregion
 //#region src/connection.tsx
 var connection_exports = /* @__PURE__ */ __exportAll({
+	AttachAction: () => AttachAction,
 	Card: () => Card$1,
 	CardActions: () => CardActions,
 	CardIdentity: () => CardIdentity,
@@ -564,18 +568,20 @@ var connection_exports = /* @__PURE__ */ __exportAll({
 	Dialog: () => Dialog$2,
 	DisconnectDialog: () => DisconnectDialog,
 	Flow: () => Flow$2,
+	IntegrationAction: () => IntegrationAction,
 	OAuthAction: () => OAuthAction,
 	RetryAction: () => RetryAction$1,
-	ReuseAction: () => ReuseAction,
 	Root: () => Root$3,
 	State: () => State$2,
 	Status: () => Status$2,
 	TokenAction: () => TokenAction,
 	Trigger: () => Trigger,
+	targetLabel: () => targetLabel,
 	useController: () => useController$2,
 	useModel: () => useModel$2
 });
 const State$2 = Data.taggedEnum();
+const sameTarget = (left, right) => left.accountId === right.accountId && left.accountKind === right.accountKind && left.zoneId === right.zoneId && left.zoneName === right.zoneName;
 const Command$2 = Data.taggedEnum();
 function useModel$2(domain) {
 	const { emit, navigate, runtime } = useDomainKit();
@@ -601,33 +607,29 @@ function useModel$2(domain) {
 					return Effect.void;
 				}
 				const snapshot = get(state);
-				if (input._tag === "Disconnect") {
+				if (input._tag === "Detach") {
 					if (snapshot._tag !== "Connected") return Effect.void;
-					get.set(actionState, State$2.Disconnecting({ snapshot }));
-					return Effect.flatMap(Transport.Service, (transport) => transport.connection.removeDomain({
-						connectionId: snapshot.connectionId,
-						domain: snapshot.domain,
+					get.set(actionState, State$2.Detaching({ snapshot }));
+					return Effect.flatMap(Transport.Service, (transport) => Effect.flatMap(transport.connection.detach({
+						attachmentId: snapshot.attachment.id,
 						preserveDns: true
-					})).pipe(Effect.tap((result) => Effect.sync(() => {
-						get.set(actionState, {
+					}), (result) => {
+						const detached = {
 							_tag: "Disconnected",
-							domain: snapshot.domain,
+							domain: snapshot.attachment.domain,
 							provider: snapshot.provider,
-							...result.remainingDomainCount > 0 ? { reusableConnection: {
-								connectionId: result.connectionId,
-								label: snapshot.provider.name
-							} } : {}
-						});
-						emit(Event.DomainDisconnected({
-							connection: snapshot,
-							result
-						}));
-					})), Effect.catch((error) => Effect.sync(() => get.set(actionState, failureFromError(error)))), Effect.asVoid);
+							reusableConnections: []
+						};
+						return Effect.flatMap(Effect.sync(() => {
+							get.set(actionState, detached);
+							emit(Event.DomainDetached({
+								connection: snapshot,
+								result
+							}));
+						}), () => transport.connection.inspect({ domain }).pipe(Effect.catch(() => Effect.succeed(detached)), Effect.tap((refreshed) => Effect.sync(() => get.set(actionState, refreshed)))));
+					})).pipe(Effect.catch((error) => Effect.sync(() => get.set(actionState, failureFromError(error)))), Effect.asVoid);
 				}
 				if (snapshot._tag !== "Disconnected") return Effect.void;
-				const reusableConnection = snapshot.reusableConnection;
-				if (input._tag === "Reuse" && reusableConnection === void 0) return Effect.void;
-				get.set(actionState, State$2.Submitting({ snapshot }));
 				const complete = (request, source) => request.pipe(Effect.tap((result) => Effect.sync(() => {
 					if (result._tag === "Redirect") {
 						get.set(actionState, State$2.Redirecting({ snapshot }));
@@ -640,16 +642,25 @@ function useModel$2(domain) {
 						}));
 					}
 				})), Effect.catch((error) => Effect.sync(() => get.set(actionState, failureFromError(error)))), Effect.asVoid);
+				if (input._tag === "Attach") {
+					const reusableConnection = snapshot.reusableConnections.find(({ connection }) => connection.id === input.connectionId);
+					if (reusableConnection === void 0) return Effect.void;
+					const target = reusableConnection.targets.find((candidate) => sameTarget(candidate, input.target));
+					if (target === void 0) return Effect.void;
+					get.set(actionState, State$2.Submitting({ snapshot }));
+					return complete(Effect.flatMap(Transport.Service, (transport) => transport.connection.attach({
+						connectionId: input.connectionId,
+						domain,
+						target
+					})), "attach");
+				}
+				get.set(actionState, State$2.Submitting({ snapshot }));
 				if (input._tag === "Connect") return complete(Effect.flatMap(Transport.Service, (transport) => transport.connection.connect({
 					domain,
 					method: input.method,
 					providerId: snapshot.provider.id
 				})), "connect");
-				if (reusableConnection === void 0) return Effect.void;
-				return complete(Effect.flatMap(Transport.Service, (transport) => transport.connection.reuse({
-					connectionId: reusableConnection.connectionId,
-					domain
-				})), "reuse");
+				return Effect.void;
 			}),
 			state
 		};
@@ -665,10 +676,13 @@ function useController$2(domain) {
 	const state = useAtomValue(model.state);
 	const execute = useAtomSet(model.command);
 	return {
+		attach: (connection, target) => execute(Command$2.Attach({
+			connectionId: connection.connection.id,
+			target
+		})),
 		connect: (method) => execute(Command$2.Connect({ method })),
-		disconnect: () => execute(Command$2.Disconnect()),
+		detach: () => execute(Command$2.Detach()),
 		retry: () => execute(Command$2.Retry()),
-		reuse: () => execute(Command$2.Reuse()),
 		state
 	};
 }
@@ -680,7 +694,7 @@ function Root$3({ children, status = "Loading", ...props }) {
 }
 function Status$2({ children, state, ...props }) {
 	const { messages } = useDomainKit();
-	const text = state._tag === "Loading" ? messages.detectingProvider : state._tag === "Connected" ? messages.connected(state.provider.name) : state._tag === "Disconnecting" ? messages.disconnecting : state._tag === "Unsupported" ? messages.automaticUnavailable : state._tag === "Failure" ? state.message : state._tag === "Redirecting" ? messages.openingAuthorization : state._tag === "Submitting" ? messages.connecting : messages.providerAvailable(state.provider.name);
+	const text = state._tag === "Loading" ? messages.detectingProvider : state._tag === "Connected" ? messages.connected(state.provider.name) : state._tag === "Detaching" ? messages.detaching : state._tag === "Unsupported" ? messages.automaticUnavailable : state._tag === "Failure" ? state.message : state._tag === "Redirecting" ? messages.openingAuthorization : state._tag === "Submitting" ? messages.connecting : messages.providerAvailable(state.provider.name);
 	return usePart("div", props, { status: state._tag }, {
 		children: children ?? text,
 		"data-domainkit-part": "connection-status",
@@ -714,12 +728,21 @@ function OAuthAction({ controller, label, ...props }) {
 		type: "button"
 	});
 }
-function ReuseAction({ controller, label, ...props }) {
-	return usePart("button", props, { authentication: "reuse" }, {
+function IntegrationAction({ controller, label, ...props }) {
+	return usePart("button", props, { authentication: "integration" }, {
+		children: label,
+		"data-domainkit-part": "integration-connect",
+		disabled: controller.state._tag === "Submitting" || controller.state._tag === "Redirecting",
+		onClick: () => controller.connect(Transport.Method.Integration()),
+		type: "button"
+	});
+}
+function AttachAction({ connection, controller, label, target, ...props }) {
+	return usePart("button", props, { authentication: "attach" }, {
 		children: label,
-		"data-domainkit-part": "reuse-connection",
+		"data-domainkit-part": "attach-target",
 		disabled: controller.state._tag === "Submitting" || controller.state._tag === "Redirecting",
-		onClick: () => void controller.reuse(),
+		onClick: () => controller.attach(connection, target),
 		type: "button"
 	});
 }
@@ -779,12 +802,14 @@ function TokenAction({ controller, method, ...props }) {
 		onSubmit: submit
 	});
 }
+const targetLabel = (target) => `${target.evidence?.accountName ?? target.accountId} · ${target.zoneName}`;
 function Dialog$2({ controller, snapshot }) {
 	const { colorScheme, messages, portalContainer, themeStyle } = useDomainKit();
 	const pending = controller.state._tag === "Submitting" || controller.state._tag === "Redirecting";
+	const integrationMethods = snapshot.provider.authentication.filter((method) => method._tag === "Integration");
 	const oauthMethods = snapshot.provider.authentication.filter((method) => method._tag === "OAuth");
 	const tokenMethods = snapshot.provider.authentication.filter((method) => method._tag === "Token");
-	const hasProviderAccountPath = oauthMethods.length > 0 || snapshot.reusableConnection !== void 0;
+	const hasProviderAccountPath = integrationMethods.length > 0 || oauthMethods.length > 0 || snapshot.reusableConnections.length > 0;
 	return /* @__PURE__ */ jsxs(Dialog.Portal, {
 		container: portalContainer,
 		children: [/* @__PURE__ */ jsx(Dialog.Backdrop, {
@@ -824,13 +849,36 @@ function Dialog$2({ controller, snapshot }) {
 					children: [
 						hasProviderAccountPath ? /* @__PURE__ */ jsxs("div", {
 							"data-domainkit-part": "provider-authentication",
-							children: [oauthMethods.map((method) => /* @__PURE__ */ jsx(OAuthAction, {
-								controller,
-								label: method.label
-							}, method._tag)), snapshot.reusableConnection === void 0 ? null : /* @__PURE__ */ jsx(ReuseAction, {
-								controller,
-								label: messages.reuseConnection(snapshot.reusableConnection.label)
-							})]
+							children: [
+								integrationMethods.map((method) => /* @__PURE__ */ jsx(IntegrationAction, {
+									controller,
+									label: method.label
+								}, method._tag)),
+								oauthMethods.map((method) => /* @__PURE__ */ jsx(OAuthAction, {
+									controller,
+									label: method.label
+								}, method._tag)),
+								snapshot.reusableConnections.map((connection) => /* @__PURE__ */ jsxs("section", {
+									"data-connection-id": connection.connection.id,
+									"data-domainkit-part": "reusable-connection",
+									children: [/* @__PURE__ */ jsxs("div", {
+										"data-domainkit-part": "reusable-connection-heading",
+										children: [/* @__PURE__ */ jsx("strong", { children: messages.existingConnection }), /* @__PURE__ */ jsx("span", { children: connection.connection.providerId })]
+									}), /* @__PURE__ */ jsx("div", {
+										"data-domainkit-part": "target-list",
+										"data-state": connection.targets.length === 0 ? "unavailable" : connection.targets.length === 1 ? "unique" : "ambiguous",
+										children: connection.targets.length === 0 ? /* @__PURE__ */ jsx("p", {
+											"data-domainkit-part": "target-unavailable",
+											children: messages.targetUnavailable
+										}) : connection.targets.map((target) => /* @__PURE__ */ jsx(AttachAction, {
+											connection,
+											controller,
+											label: messages.attachTarget(targetLabel(target)),
+											target
+										}, `${target.accountId}:${target.zoneId}`))
+									})]
+								}, connection.connection.id))
+							]
 						}) : null,
 						hasProviderAccountPath && tokenMethods.length > 0 ? /* @__PURE__ */ jsx("div", {
 							"aria-label": messages.authenticationAlternative,
@@ -918,10 +966,10 @@ function DisconnectDialog({ connection, controller, onOpenChange, open: openProp
 		if (openProp === void 0) setInternalOpen(nextOpen);
 		onOpenChange?.(nextOpen);
 	};
-	const disconnecting = controller.state._tag === "Disconnecting";
+	const detaching = controller.state._tag === "Detaching";
 	return /* @__PURE__ */ jsxs(AlertDialog.Root, {
 		onOpenChange: (nextOpen, eventDetails) => {
-			if (!nextOpen && disconnecting) {
+			if (!nextOpen && detaching) {
 				eventDetails.cancel();
 				return;
 			}
@@ -955,22 +1003,22 @@ function DisconnectDialog({ connection, controller, onOpenChange, open: openProp
 							"data-domainkit-part": "dialog-description",
 							children: messages.disconnectConsent
 						})]
-					}), disconnecting ? null : /* @__PURE__ */ jsx(AlertDialog.Close, {
+					}), detaching ? null : /* @__PURE__ */ jsx(AlertDialog.Close, {
 						"aria-label": messages.close,
 						"data-domainkit-part": "dialog-close",
 						children: "×"
 					})]
 				}), /* @__PURE__ */ jsxs("div", {
 					"data-domainkit-part": "dialog-footer",
-					children: [disconnecting ? null : /* @__PURE__ */ jsx(AlertDialog.Close, {
+					children: [detaching ? null : /* @__PURE__ */ jsx(AlertDialog.Close, {
 						"data-domainkit-part": "dialog-cancel",
 						children: messages.cancel
 					}), /* @__PURE__ */ jsx("button", {
 						"data-domainkit-part": "disconnect-action",
-						disabled: disconnecting,
-						onClick: () => controller.disconnect(),
+						disabled: detaching,
+						onClick: () => controller.detach(),
 						type: "button",
-						children: disconnecting ? messages.disconnecting : messages.disconnectDomain
+						children: detaching ? messages.detaching : messages.disconnectDomain
 					})]
 				})]
 			})]
@@ -1262,8 +1310,8 @@ function useModel$1(connection, records, onApplied) {
 					if (current._tag === "Planning" || current._tag === "Applying") return Effect.void;
 					get.set(state, State$1.Planning());
 					return Effect.flatMap(Transport.Service, (transport) => transport.provisioning.plan({
-						connectionId: connection.connectionId,
-						domain: connection.domain,
+						attachmentId: connection.attachment.id,
+						domain: connection.attachment.domain,
 						records
 					})).pipe(Effect.tap((plan) => Effect.sync(() => get.set(state, State$1.Review({ plan })))), Effect.catch((error) => Effect.sync(() => get.set(state, failureFromError(error)))), Effect.asVoid);
 				}
@@ -1271,8 +1319,8 @@ function useModel$1(connection, records, onApplied) {
 				const plan = current.plan;
 				get.set(state, State$1.Applying({ plan }));
 				return Effect.flatMap(Transport.Service, (transport) => transport.provisioning.apply({
-					connectionId: connection.connectionId,
-					domain: connection.domain,
+					attachmentId: connection.attachment.id,
+					domain: connection.attachment.domain,
 					planDigest: plan.digest
 				})).pipe(Effect.tap((result) => Effect.sync(() => {
 					if (result._tag === "Applied") {
@@ -1295,8 +1343,8 @@ function useModel$1(connection, records, onApplied) {
 			state
 		};
 	}, [
-		connection.connectionId,
-		connection.domain,
+		connection.attachment.domain,
+		connection.attachment.id,
 		emit,
 		recordKey,
 		runtime
@@ -1482,7 +1530,7 @@ function useModel(config) {
 				const previous = current._tag === "Observation" ? current : current._tag === "Failed" ? current.previous : void 0;
 				get.set(state, State.Observing({ ...previous === void 0 ? {} : { previous } }));
 				return Effect.flatMap(Transport.Service, (transport) => transport.verification.observe({
-					...config.connection === void 0 ? {} : { connectionId: config.connection.connectionId },
+					...config.connection === void 0 ? {} : { attachmentId: config.connection.attachment.id },
 					domain: config.domain,
 					records: config.records,
 					sources: {
@@ -1497,7 +1545,7 @@ function useModel(config) {
 			state
 		};
 	}, [
-		config.connection?.connectionId,
+		config.connection?.attachment.id,
 		config.domain,
 		provider,
 		publicDns,
@@ -1627,11 +1675,11 @@ var domain_exports = /* @__PURE__ */ __exportAll({ Flow: () => Flow });
 function Flow({ domain, receiptId, records }) {
 	const controller = useController$2(domain);
 	const state = controller.state;
-	const connected = state._tag === "Connected" ? state : state._tag === "Disconnecting" ? state.snapshot : void 0;
+	const connected = state._tag === "Connected" ? state : state._tag === "Detaching" ? state.snapshot : void 0;
 	return /* @__PURE__ */ jsxs(Root$3, {
 		status: state._tag,
 		children: [
-			state._tag === "Connected" || state._tag === "Disconnecting" ? /* @__PURE__ */ jsx(ConnectedCard, {
+			state._tag === "Connected" || state._tag === "Detaching" ? /* @__PURE__ */ jsx(ConnectedCard, {
 				connection: state._tag === "Connected" ? state : state.snapshot,
 				controller,
 				...receiptId === void 0 ? {} : { initialReceiptId: receiptId },
@@ -1689,7 +1737,7 @@ function ConnectedCard({ connection, controller, initialReceiptId, records, stat
 		value: initialReceiptId
 	});
 	const receiptId = receipt.host === initialReceiptId ? receipt.value : initialReceiptId;
-	const disabled = status === "Disconnecting";
+	const disabled = status === "Detaching";
 	const actionsTriggerRef = useRef(null);
 	return /* @__PURE__ */ jsxs(Card$1, {
 		status,
@@ -1823,8 +1871,12 @@ function ProviderActions({ actionsTriggerRef: actionsTriggerRefProp, cleanup, co
 //#endregion
 //#region src/testing.ts
 var testing_exports = /* @__PURE__ */ __exportAll({
+	attachment: () => attachment,
+	connected: () => connected,
+	connection: () => connection,
 	makeFakeTransport: () => makeFakeTransport,
-	provider: () => provider
+	provider: () => provider,
+	target: () => target
 });
 const provider = (overrides = {}) => ({
 	authentication: [{
@@ -1839,17 +1891,48 @@ const provider = (overrides = {}) => ({
 	name: "Cloudflare",
 	...overrides
 });
+const target = (overrides = {}) => ({
+	accountId: "account-1",
+	accountKind: "account",
+	zoneId: "zone-1",
+	zoneName: DomainName.parse("example.com"),
+	...overrides
+});
+const connection = (overrides = {}) => ({
+	createdAt: /* @__PURE__ */ new Date("2026-08-30T00:00:00.000Z"),
+	id: "connection-1",
+	method: "oauth2",
+	ownerId: "organization-1",
+	providerId: "cloudflare",
+	status: "active",
+	...overrides
+});
+const attachment = (overrides = {}) => ({
+	connectionId: "connection-1",
+	createdAt: /* @__PURE__ */ new Date("2026-08-30T00:00:00.000Z"),
+	domain: DomainName.parse("mail.example.com"),
+	id: "attachment-1",
+	target: target(),
+	...overrides
+});
+const connected = (overrides = {}) => ({
+	_tag: "Connected",
+	attachment: attachment(),
+	connection: connection(),
+	provider: provider(),
+	...overrides
+});
 function makeFakeTransport(options) {
 	const calls = {
 		apply: [],
+		attach: [],
 		cleanupApply: [],
 		cleanupPlan: [],
 		connect: [],
+		detach: [],
 		inspect: [],
 		observe: [],
-		plan: [],
-		removeDomain: [],
-		reuse: []
+		plan: []
 	};
 	const inspections = Array.isArray(options.inspect) ? [...options.inspect] : [options.inspect];
 	const transport = {
@@ -1877,8 +1960,8 @@ function makeFakeTransport(options) {
 				calls.connect.push(input);
 				return options.connect ?? {
 					_tag: "Connected",
-					connectionId: "connection-1",
-					domain: input.domain,
+					attachment: attachment({ domain: DomainName.parse(input.domain) }),
+					connection: connection(),
 					provider: provider()
 				};
 			},
@@ -1893,22 +1976,26 @@ function makeFakeTransport(options) {
 				});
 				return snapshot;
 			},
-			reuse: async (input) => {
-				calls.reuse.push(input);
-				return options.reuse ?? {
+			attach: async (input) => {
+				calls.attach.push(input);
+				return options.attach ?? {
 					_tag: "Connected",
-					connectionId: input.connectionId,
-					domain: input.domain,
+					attachment: attachment({
+						connectionId: input.connectionId,
+						domain: DomainName.parse(input.domain),
+						target: input.target
+					}),
+					connection: connection({ id: input.connectionId }),
 					provider: provider()
 				};
 			},
-			removeDomain: async (input) => {
-				calls.removeDomain.push(input);
-				return options.removeDomain ?? {
-					_tag: "Removed",
-					connectionId: input.connectionId,
-					domain: input.domain,
-					remainingDomainCount: 0
+			detach: async (input) => {
+				calls.detach.push(input);
+				return options.detach ?? {
+					_tag: "Detached",
+					attachment: attachment(),
+					connection: connection(),
+					remainingAttachments: 0
 				};
 			}
 		},