@seams/wallet 0.15.4 → 0.17.0

package/dist/esm/SeamsWeb/walletIframe/host/ui/auth-menu/AuthMenuSurface.js

@@ -2,7 +2,7 @@ import { isLinkedDeviceTargetEmailAddressV1 } from "../../../../../core/types/li
 import { EMAIL_OTP_RECOVERY_KEY_ALPHABET } from "../../../../../shared-ts/src/utils/emailOtpRecoveryKey.js";
 import "../../../../../shared-ts/src/wallet-recovery/recoveryCodes.js";
 import { demoEmailOtpCodeFromDelivery } from "../../../../../core/signingEngine/session/emailOtp/challengeDelivery.js";
-import { isAuthMenuActionReady, isAuthMenuGoogleActionReady, isAuthMenuLoadingStatus, isAuthMenuReady, resolveAuthMenuLoginAccount } from "../../auth-menu/domain.js";
+import { AUTH_MENU_WAITING_PROMPTS, isAuthMenuActionReady, isAuthMenuGoogleActionReady, isAuthMenuLoadingStatus, isAuthMenuReady, resolveAuthMenuLoginAccount } from "../../auth-menu/domain.js";
 import { PadlockIcon } from "../../../../../core/signingEngine/uiConfirm/ui/preact/PadlockIcon.js";
 import { blinkMenuItem } from "../../../../../utils/menuItemBlink.js";
 import { accountDropdownIcon, backIcon, chevronIcon, fingerprintIcon, googleIcon, linkDeviceIcon, linkFailedIcon, mailIcon, passkeyRingIcon, recoveryIcon, rerollIcon } from "./icons.js";
@@ -169,300 +169,24 @@ function accountGroups(options) {
 }
 const ACCOUNT_MENU_EXIT_MS = 160;
 var AuthMenuSurface = class extends Component {
-	constructor(..._args) {
-		super(..._args);
-		this.state = {
-			accountMenu: "closed",
-			recoverySelection: null,
-			recoveryRejection: null
-		};
-		this.recoveryDrawnCode = "";
-		this.recoveryArrival = null;
-		this.recoveryArrivalTimer = null;
-		this.recoveryRejectionTimer = null;
-		this.accountMenuExitTimer = null;
-		this.accountMenuChoice = null;
-		this.previouslyFocusedElement = null;
-		this.shouldFocusInitialControl = true;
-		this.contentResizeObserver = null;
-		this.contentHeightFrame = null;
-		this.previousLinkDeviceStateKind = null;
-		this.previousRecoveryStage = null;
-		this.lastMethod = "passkey";
-		this.queueContentHeightSync = () => {
-			if (this.contentHeightFrame !== null) cancelAnimationFrame(this.contentHeightFrame);
-			this.contentHeightFrame = requestAnimationFrame(this.syncContentHeight);
-		};
-		this.syncContentHeight = () => {
-			this.contentHeightFrame = null;
-			const switcher = this.props.element.querySelector(".seams-content-switcher");
-			const sizer = this.props.element.querySelector(".seams-content-sizer");
-			if (!switcher || !sizer) return;
-			this.props.styles.setDynamicDeclarations(this.props.element.id + "-height", "#" + this.props.element.id + " .seams-content-switcher", { height: sizer.scrollHeight + "px" });
-		};
-		this.onKeydown = (event) => {
-			if (event.key === "Escape") {
-				event.preventDefault();
-				if (this.viewModel && recoveryNavigationLocked(this.viewModel)) return;
-				if (this.accountMenuOpen) {
-					this.closeAccountMenu();
-					return;
-				}
-				this.emitIntent({
-					kind: "close",
-					reason: "escape"
-				});
-				return;
-			}
-			if (event.key !== "Tab") return;
-			const focusable = this.focusableElements();
-			if (focusable.length === 0) return;
-			const active = document.activeElement;
-			const activeIndex = focusable.indexOf(active instanceof HTMLElement ? active : focusable[0]);
-			if (event.shiftKey && activeIndex <= 0) {
-				event.preventDefault();
-				focusable[focusable.length - 1]?.focus();
-			} else if (!event.shiftKey && activeIndex === focusable.length - 1) {
-				event.preventDefault();
-				focusable[0]?.focus();
-			}
-		};
-		this.onBackClick = () => {
-			this.emitIntent({ kind: "back" });
-		};
-		this.onKeyDown = (event) => {
-			if (event.key !== "Escape" || event.defaultPrevented) return;
-			const viewModel = this.viewModel;
-			if (!viewModel || viewModel.kind !== "recovery" && !isAuthMenuLoadingStatus(viewModel.status)) return;
-			event.preventDefault();
-			event.stopPropagation();
-			if (recoveryNavigationLocked(viewModel)) return;
-			this.emitIntent({ kind: "back" });
-		};
-		this.onIntentSwitchClick = () => {
-			const viewModel = this.viewModel;
-			if (!viewModel) return;
-			this.emitIntent({
-				kind: "mode_selected",
-				mode: modeSwitchCopy(viewModel.mode).nextMode
-			});
-		};
-		this.onRegistrationReroll = () => {
-			this.emitIntent({ kind: "registration_reroll" });
-		};
-		this.onPasskeyNameInput = (event) => {
-			if (!(event.currentTarget instanceof HTMLInputElement)) return;
-			this.emitIntent({
-				kind: "passkey_name_changed",
-				passkeyName: event.currentTarget.value
-			});
-		};
-		this.onLoginAccountSelect = (event) => {
-			const option = event.currentTarget;
-			if (!(option instanceof HTMLButtonElement)) return;
-			const walletId = option.dataset.walletId;
-			const authMethod = option.dataset.authMethod;
-			const viewModel = this.viewModel;
-			if (!walletId || viewModel.kind !== "passkey" || viewModel.mode !== "login") return;
-			const selected = viewModel.accountOptions.find((account) => account.walletId === walletId && account.authMethod === authMethod);
-			const previous = selectedLoginAccount(viewModel);
-			if (!selected || !previous || this.accountMenuChoice) return;
-			const blink = blinkMenuItem(option);
-			if (!blink) return;
-			const choice = {
-				chosen: selected,
-				previous
-			};
-			this.accountMenuChoice = choice;
-			this.emitIntent({
-				kind: "login_account_selected",
-				walletId: selected.walletId,
-				authMethod: selected.authMethod
-			});
-			blink.then(() => {
-				if (this.accountMenuChoice === choice) this.closeAccountMenu();
-			});
-		};
-		this.onAccountMenuToggle = () => {
-			if (this.accountMenuOpen) this.closeAccountMenu();
-			else this.openAccountMenu();
-		};
-		this.onDocumentPointerDown = (event) => {
-			if (!this.accountMenuOpen || !(event.target instanceof Node)) return;
-			if (this.props.element.querySelector(".seams-account-menu")?.contains(event.target)) return;
-			this.closeAccountMenu();
-		};
-		this.onPrimaryClick = () => {
-			const viewModel = this.viewModel;
-			if (!viewModel || !isAuthMenuActionReady(viewModel)) return;
-			if (viewModel.kind === "link_device") return;
-			if (viewModel.kind === "google_otp_login") {
-				this.emitIntent({ kind: "google_otp_submit" });
-				return;
-			}
-			if (viewModel.kind === "google_registration") {
-				this.emitIntent({ kind: "google_registration_complete" });
-				return;
-			}
-			const intent = viewModel.mode === "register" ? {
-				kind: "submit",
-				mode: "register",
-				passkeyName: viewModel.passkeyName
-			} : {
-				kind: "submit",
-				mode: "login"
-			};
-			this.lastMethod = "passkey";
-			this.emitIntent(intent);
-		};
-		this.onGoogleOtpCodeInput = (event) => {
-			if (!(event.currentTarget instanceof HTMLInputElement)) return;
-			this.emitIntent({
-				kind: "google_otp_code_changed",
-				code: event.currentTarget.value
-			});
-		};
-		this.onGoogleOtpKeydown = (event) => {
-			if (event.key !== "Enter") return;
-			event.preventDefault();
-			this.emitIntent({ kind: "google_otp_submit" });
-		};
-		this.onGoogleOtpResend = () => {
-			this.emitIntent({ kind: "google_otp_resend" });
-		};
-		this.onGoogleRegistrationReroll = () => {
-			this.emitIntent({ kind: "google_registration_reroll" });
-		};
-		this.onGoogleClick = () => {
-			this.lastMethod = "google";
-			this.emitIntent({
-				kind: "external_auth",
-				provider: "google"
-			});
-		};
-		this.onNoticeRetry = () => {
-			if (this.lastMethod === "google" && isAuthMenuGoogleActionReady(this.viewModel)) this.onGoogleClick();
-			else this.onPrimaryClick();
-		};
-		this.onLinkDeviceOpen = () => {
-			this.emitIntent({ kind: "link_device_open" });
-		};
-		this.onRecoveryOpen = () => {
-			this.emitIntent({ kind: "recovery_open" });
-		};
-		this.onRecoveryCodeInput = (event) => {
-			if (!(event.currentTarget instanceof HTMLInputElement)) return;
-			if (this.viewModel.kind !== "recovery") return;
-			const input = event.currentTarget;
-			const raw = input.value;
-			const rejected = rejectedRecoveryCharacters(raw);
-			if (rejected.length > 0) this.showRecoveryRejection(rejected);
-			const caret = recoveryInputCharacters(raw.slice(0, input.selectionStart ?? raw.length)).length;
-			const code = recoveryInputCharacters(raw).slice(0, 32);
-			if (input.value !== code) {
-				input.value = code;
-				input.setSelectionRange(Math.min(caret, code.length), Math.min(caret, code.length));
-			}
-			this.syncRecoverySelection(input);
-			this.emitIntent({
-				kind: "recovery_code_changed",
-				recoveryCode: code
-			});
-		};
-		this.onRecoverySelectionMove = (event) => {
-			if (event.currentTarget instanceof HTMLInputElement) this.syncRecoverySelection(event.currentTarget);
-		};
-		this.onRecoveryCodeClick = (event) => {
-			const input = event.currentTarget;
-			if (!(input instanceof HTMLInputElement)) return;
-			if (input.selectionStart === input.selectionEnd) {
-				const caret = recoveryCaretAtPoint(this.props.element, event.clientX, event.clientY, input.value.length);
-				if (caret !== null) input.setSelectionRange(caret, caret);
-			}
-			this.syncRecoverySelection(input);
-		};
-		this.clearRecoveryRejection = () => {
-			this.recoveryRejectionTimer = null;
-			this.setState({ recoveryRejection: null });
-		};
-		this.endRecoveryArrival = () => {
-			this.recoveryArrivalTimer = null;
-			this.recoveryArrival = null;
-		};
-		this.onRecoveryCodeBlur = () => {
-			this.setState({ recoverySelection: null });
-		};
-		this.onRecoverySubmit = (event) => {
-			event.preventDefault();
-			this.emitIntent({ kind: "recovery_code_submit" });
-		};
-		this.onRecoveryPasskeySelected = () => {
-			this.emitIntent({ kind: "recovery_passkey_selected" });
-		};
-		this.onRecoveryGoogleSelected = () => {
-			this.emitIntent({ kind: "recovery_google_selected" });
-		};
-		this.onRecoveryGoogleOtpCodeInput = (event) => {
-			if (!(event.currentTarget instanceof HTMLInputElement)) return;
-			this.emitIntent({
-				kind: "recovery_google_otp_code_changed",
-				code: event.currentTarget.value
-			});
-		};
-		this.onRecoveryGoogleOtpKeydown = (event) => {
-			if (event.key !== "Enter") return;
-			event.preventDefault();
-			this.emitIntent({ kind: "recovery_google_otp_submit" });
-		};
-		this.onRecoveryGoogleOtpSubmit = () => {
-			this.emitIntent({ kind: "recovery_google_otp_submit" });
-		};
-		this.onRecoveryCreatePasskey = () => {
-			this.emitIntent({ kind: "recovery_create_passkey" });
-		};
-		this.onRecoverySignIn = () => {
-			this.emitIntent({ kind: "recovery_sign_in" });
-		};
-		this.onLinkDeviceCreatePasskey = () => {
-			this.emitIntent({ kind: "link_device_create_passkey" });
-		};
-		this.onLinkDeviceFactorChange = (event) => {
-			if (!(event.currentTarget instanceof HTMLInputElement)) return;
-			const targetFactor = event.currentTarget.value === "email_otp" ? { kind: "email_otp" } : { kind: "passkey_prf" };
-			this.emitIntent({
-				kind: "link_device_factor_selected",
-				targetFactor
-			});
-		};
-		this.onLinkDeviceTargetEmailInput = (event) => {
-			if (!(event.currentTarget instanceof HTMLInputElement)) return;
-			this.emitIntent({
-				kind: "link_device_target_email_changed",
-				emailAddress: event.currentTarget.value
-			});
-		};
-		this.onLinkDeviceStart = () => {
-			this.emitIntent({ kind: "link_device_start" });
-		};
-		this.onLinkDeviceEmailOtpCodeInput = (event) => {
-			if (!(event.currentTarget instanceof HTMLInputElement)) return;
-			this.emitIntent({
-				kind: "link_device_email_otp_code_changed",
-				code: event.currentTarget.value
-			});
-		};
-		this.onLinkDeviceEmailOtpKeydown = (event) => {
-			if (event.key !== "Enter") return;
-			event.preventDefault();
-			this.emitIntent({ kind: "link_device_email_otp_submit" });
-		};
-		this.onLinkDeviceEmailOtpResend = () => {
-			this.emitIntent({ kind: "link_device_email_otp_resend" });
-		};
-		this.onLinkDeviceEmailOtpSubmit = () => {
-			this.emitIntent({ kind: "link_device_email_otp_submit" });
-		};
-	}
+	state = {
+		accountMenu: "closed",
+		recoverySelection: null,
+		recoveryRejection: null
+	};
+	recoveryDrawnCode = "";
+	recoveryArrival = null;
+	recoveryArrivalTimer = null;
+	recoveryRejectionTimer = null;
+	accountMenuExitTimer = null;
+	accountMenuChoice = null;
+	previouslyFocusedElement = null;
+	shouldFocusInitialControl = true;
+	contentResizeObserver = null;
+	contentHeightFrame = null;
+	previousLinkDeviceStateKind = null;
+	previousRecoveryStage = null;
+	lastMethod = "passkey";
 	get viewModel() {
 		return this.props.viewModel;
 	}
@@ -557,6 +281,17 @@ var AuthMenuSurface = class extends Component {
 		this.contentResizeObserver.observe(sizer);
 		window.addEventListener("resize", this.queueContentHeightSync);
 	}
+	queueContentHeightSync = () => {
+		if (this.contentHeightFrame !== null) cancelAnimationFrame(this.contentHeightFrame);
+		this.contentHeightFrame = requestAnimationFrame(this.syncContentHeight);
+	};
+	syncContentHeight = () => {
+		this.contentHeightFrame = null;
+		const switcher = this.props.element.querySelector(".seams-content-switcher");
+		const sizer = this.props.element.querySelector(".seams-content-sizer");
+		if (!switcher || !sizer) return;
+		this.props.styles.setDynamicDeclarations(this.props.element.id + "-height", "#" + this.props.element.id + " .seams-content-switcher", { height: sizer.scrollHeight + "px" });
+	};
 	focusInitialControl() {
 		if (!this.props.element.isConnected || !this.shouldFocusInitialControl) return;
 		this.shouldFocusInitialControl = false;
@@ -570,9 +305,197 @@ var AuthMenuSurface = class extends Component {
 		if (!target?.isConnected) return;
 		target.focus();
 	}
+	onKeydown = (event) => {
+		if (event.key === "Escape") {
+			event.preventDefault();
+			if (this.viewModel && recoveryNavigationLocked(this.viewModel)) return;
+			if (this.accountMenuOpen) {
+				this.closeAccountMenu();
+				return;
+			}
+			this.emitIntent({
+				kind: "close",
+				reason: "escape"
+			});
+			return;
+		}
+		if (event.key !== "Tab") return;
+		const focusable = this.focusableElements();
+		if (focusable.length === 0) return;
+		const active = document.activeElement;
+		const activeIndex = focusable.indexOf(active instanceof HTMLElement ? active : focusable[0]);
+		if (event.shiftKey && activeIndex <= 0) {
+			event.preventDefault();
+			focusable[focusable.length - 1]?.focus();
+		} else if (!event.shiftKey && activeIndex === focusable.length - 1) {
+			event.preventDefault();
+			focusable[0]?.focus();
+		}
+	};
 	focusableElements() {
 		return Array.from(this.props.element.querySelectorAll("button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), a[href], [tabindex]:not([tabindex=\"-1\"])"));
 	}
+	onBackClick = () => {
+		this.emitIntent({ kind: "back" });
+	};
+	/**
+	* Escape backs out of the in-progress views the back arrow already serves.
+	* The host dialog is opened non-modally, so it never receives the UA's
+	* `cancel` event — without this the key does nothing while a ceremony is
+	* pending. Deliberately scoped to those views: from the menu itself Escape
+	* belongs to the embedding page, not to us.
+	*/
+	onKeyDown = (event) => {
+		if (event.key !== "Escape" || event.defaultPrevented) return;
+		const viewModel = this.viewModel;
+		if (!viewModel || viewModel.kind !== "recovery" && !isAuthMenuLoadingStatus(viewModel.status)) return;
+		event.preventDefault();
+		event.stopPropagation();
+		if (recoveryNavigationLocked(viewModel)) return;
+		this.emitIntent({ kind: "back" });
+	};
+	onIntentSwitchClick = () => {
+		const viewModel = this.viewModel;
+		if (!viewModel) return;
+		this.emitIntent({
+			kind: "mode_selected",
+			mode: modeSwitchCopy(viewModel.mode).nextMode
+		});
+	};
+	onRegistrationReroll = () => {
+		this.emitIntent({ kind: "registration_reroll" });
+	};
+	onPasskeyNameInput = (event) => {
+		if (!(event.currentTarget instanceof HTMLInputElement)) return;
+		this.emitIntent({
+			kind: "passkey_name_changed",
+			passkeyName: event.currentTarget.value
+		});
+	};
+	onLoginAccountSelect = (event) => {
+		const option = event.currentTarget;
+		if (!(option instanceof HTMLButtonElement)) return;
+		const walletId = option.dataset.walletId;
+		const authMethod = option.dataset.authMethod;
+		const viewModel = this.viewModel;
+		if (!walletId || viewModel.kind !== "passkey" || viewModel.mode !== "login") return;
+		const selected = viewModel.accountOptions.find((account) => account.walletId === walletId && account.authMethod === authMethod);
+		const previous = selectedLoginAccount(viewModel);
+		if (!selected || !previous || this.accountMenuChoice) return;
+		const blink = blinkMenuItem(option);
+		if (!blink) return;
+		const choice = {
+			chosen: selected,
+			previous
+		};
+		this.accountMenuChoice = choice;
+		this.emitIntent({
+			kind: "login_account_selected",
+			walletId: selected.walletId,
+			authMethod: selected.authMethod
+		});
+		blink.then(() => {
+			if (this.accountMenuChoice === choice) this.closeAccountMenu();
+		});
+	};
+	onAccountMenuToggle = () => {
+		if (this.accountMenuOpen) this.closeAccountMenu();
+		else this.openAccountMenu();
+	};
+	onDocumentPointerDown = (event) => {
+		if (!this.accountMenuOpen || !(event.target instanceof Node)) return;
+		if (this.props.element.querySelector(".seams-account-menu")?.contains(event.target)) return;
+		this.closeAccountMenu();
+	};
+	onPrimaryClick = () => {
+		const viewModel = this.viewModel;
+		if (!viewModel || !isAuthMenuActionReady(viewModel)) return;
+		if (viewModel.kind === "link_device") return;
+		if (viewModel.kind === "google_otp_login") {
+			this.emitIntent({ kind: "google_otp_submit" });
+			return;
+		}
+		if (viewModel.kind === "google_registration") {
+			this.emitIntent({ kind: "google_registration_complete" });
+			return;
+		}
+		const intent = viewModel.mode === "register" ? {
+			kind: "submit",
+			mode: "register",
+			passkeyName: viewModel.passkeyName
+		} : {
+			kind: "submit",
+			mode: "login"
+		};
+		this.lastMethod = "passkey";
+		this.emitIntent(intent);
+	};
+	onGoogleOtpCodeInput = (event) => {
+		if (!(event.currentTarget instanceof HTMLInputElement)) return;
+		this.emitIntent({
+			kind: "google_otp_code_changed",
+			code: event.currentTarget.value
+		});
+	};
+	onGoogleOtpKeydown = (event) => {
+		if (event.key !== "Enter") return;
+		event.preventDefault();
+		this.emitIntent({ kind: "google_otp_submit" });
+	};
+	onGoogleOtpResend = () => {
+		this.emitIntent({ kind: "google_otp_resend" });
+	};
+	onGoogleRegistrationReroll = () => {
+		this.emitIntent({ kind: "google_registration_reroll" });
+	};
+	onGoogleClick = () => {
+		this.lastMethod = "google";
+		this.emitIntent({
+			kind: "external_auth",
+			provider: "google"
+		});
+	};
+	onNoticeRetry = () => {
+		if (this.lastMethod === "google" && isAuthMenuGoogleActionReady(this.viewModel)) this.onGoogleClick();
+		else this.onPrimaryClick();
+	};
+	onLinkDeviceOpen = () => {
+		this.emitIntent({ kind: "link_device_open" });
+	};
+	onRecoveryOpen = () => {
+		this.emitIntent({ kind: "recovery_open" });
+	};
+	onRecoveryCodeInput = (event) => {
+		if (!(event.currentTarget instanceof HTMLInputElement)) return;
+		if (this.viewModel.kind !== "recovery") return;
+		const input = event.currentTarget;
+		const raw = input.value;
+		const rejected = rejectedRecoveryCharacters(raw);
+		if (rejected.length > 0) this.showRecoveryRejection(rejected);
+		const caret = recoveryInputCharacters(raw.slice(0, input.selectionStart ?? raw.length)).length;
+		const code = recoveryInputCharacters(raw).slice(0, 32);
+		if (input.value !== code) {
+			input.value = code;
+			input.setSelectionRange(Math.min(caret, code.length), Math.min(caret, code.length));
+		}
+		this.syncRecoverySelection(input);
+		this.emitIntent({
+			kind: "recovery_code_changed",
+			recoveryCode: code
+		});
+	};
+	onRecoverySelectionMove = (event) => {
+		if (event.currentTarget instanceof HTMLInputElement) this.syncRecoverySelection(event.currentTarget);
+	};
+	onRecoveryCodeClick = (event) => {
+		const input = event.currentTarget;
+		if (!(input instanceof HTMLInputElement)) return;
+		if (input.selectionStart === input.selectionEnd) {
+			const caret = recoveryCaretAtPoint(this.props.element, event.clientX, event.clientY, input.value.length);
+			if (caret !== null) input.setSelectionRange(caret, caret);
+		}
+		this.syncRecoverySelection(input);
+	};
 	showRecoveryRejection(characters) {
 		const parity = this.state.recoveryRejection?.parity === 0 ? 1 : 0;
 		this.setState({ recoveryRejection: {
@@ -582,6 +505,10 @@ var AuthMenuSurface = class extends Component {
 		if (this.recoveryRejectionTimer !== null) clearTimeout(this.recoveryRejectionTimer);
 		this.recoveryRejectionTimer = setTimeout(this.clearRecoveryRejection, 2e3);
 	}
+	clearRecoveryRejection = () => {
+		this.recoveryRejectionTimer = null;
+		this.setState({ recoveryRejection: null });
+	};
 	recoveryCodeArrival(code) {
 		const drawn = this.recoveryDrawnCode;
 		if (code === drawn) return this.recoveryArrival;
@@ -597,6 +524,13 @@ var AuthMenuSurface = class extends Component {
 		this.recoveryArrivalTimer = setTimeout(this.endRecoveryArrival, 600);
 		return this.recoveryArrival;
 	}
+	endRecoveryArrival = () => {
+		this.recoveryArrivalTimer = null;
+		this.recoveryArrival = null;
+	};
+	onRecoveryCodeBlur = () => {
+		this.setState({ recoverySelection: null });
+	};
 	syncRecoverySelection(input) {
 		const length = input.value.length;
 		const start = Math.min(input.selectionStart ?? length, length);
@@ -608,6 +542,76 @@ var AuthMenuSurface = class extends Component {
 			end
 		} });
 	}
+	onRecoverySubmit = (event) => {
+		event.preventDefault();
+		this.emitIntent({ kind: "recovery_code_submit" });
+	};
+	onRecoveryPasskeySelected = () => {
+		this.emitIntent({ kind: "recovery_passkey_selected" });
+	};
+	onRecoveryGoogleSelected = () => {
+		this.emitIntent({ kind: "recovery_google_selected" });
+	};
+	onRecoveryGoogleOtpCodeInput = (event) => {
+		if (!(event.currentTarget instanceof HTMLInputElement)) return;
+		this.emitIntent({
+			kind: "recovery_google_otp_code_changed",
+			code: event.currentTarget.value
+		});
+	};
+	onRecoveryGoogleOtpKeydown = (event) => {
+		if (event.key !== "Enter") return;
+		event.preventDefault();
+		this.emitIntent({ kind: "recovery_google_otp_submit" });
+	};
+	onRecoveryGoogleOtpSubmit = () => {
+		this.emitIntent({ kind: "recovery_google_otp_submit" });
+	};
+	onRecoveryCreatePasskey = () => {
+		this.emitIntent({ kind: "recovery_create_passkey" });
+	};
+	onRecoverySignIn = () => {
+		this.emitIntent({ kind: "recovery_sign_in" });
+	};
+	onLinkDeviceCreatePasskey = () => {
+		this.emitIntent({ kind: "link_device_create_passkey" });
+	};
+	onLinkDeviceFactorChange = (event) => {
+		if (!(event.currentTarget instanceof HTMLInputElement)) return;
+		const targetFactor = event.currentTarget.value === "email_otp" ? { kind: "email_otp" } : { kind: "passkey_prf" };
+		this.emitIntent({
+			kind: "link_device_factor_selected",
+			targetFactor
+		});
+	};
+	onLinkDeviceTargetEmailInput = (event) => {
+		if (!(event.currentTarget instanceof HTMLInputElement)) return;
+		this.emitIntent({
+			kind: "link_device_target_email_changed",
+			emailAddress: event.currentTarget.value
+		});
+	};
+	onLinkDeviceStart = () => {
+		this.emitIntent({ kind: "link_device_start" });
+	};
+	onLinkDeviceEmailOtpCodeInput = (event) => {
+		if (!(event.currentTarget instanceof HTMLInputElement)) return;
+		this.emitIntent({
+			kind: "link_device_email_otp_code_changed",
+			code: event.currentTarget.value
+		});
+	};
+	onLinkDeviceEmailOtpKeydown = (event) => {
+		if (event.key !== "Enter") return;
+		event.preventDefault();
+		this.emitIntent({ kind: "link_device_email_otp_submit" });
+	};
+	onLinkDeviceEmailOtpResend = () => {
+		this.emitIntent({ kind: "link_device_email_otp_resend" });
+	};
+	onLinkDeviceEmailOtpSubmit = () => {
+		this.emitIntent({ kind: "link_device_email_otp_submit" });
+	};
 	emitIntent(intent) {
 		this.props.onIntent(intent);
 	}
@@ -1130,15 +1134,16 @@ var AuthMenuSurface = class extends Component {
 		const status = viewModel.status;
 		if (status.kind !== "busy") return /* @__PURE__ */ jsx(Fragment$1, {});
 		const waitingText = status.headline;
+		const prompt = status.illustration ? AUTH_MENU_WAITING_PROMPTS[status.illustration] : null;
 		return /* @__PURE__ */ jsx(Fragment$1, { children: /* @__PURE__ */ jsxs("div", {
 			class: "seams-waiting",
 			role: "status",
 			"aria-live": "polite",
 			children: [
-				status.illustration === "passkey" ? /* @__PURE__ */ jsx("span", {
+				prompt ? /* @__PURE__ */ jsx("span", {
 					class: "seams-passkey-prompt",
 					role: "img",
-					"aria-label": "Passkey authentication",
+					"aria-label": prompt.label,
 					children: passkeyRingIcon()
 				}) : null,
 				/* @__PURE__ */ jsxs("div", {
@@ -1148,9 +1153,9 @@ var AuthMenuSurface = class extends Component {
 							class: "seams-waiting-text",
 							children: waitingText
 						}),
-						status.illustration === "passkey" ? /* @__PURE__ */ jsx("span", {
+						prompt ? /* @__PURE__ */ jsx("span", {
 							class: "seams-passkey-instruction",
-							children: "Complete the prompt on your device."
+							children: prompt.instruction
 						}) : null,
 						viewModel.showProgress && status.detail && status.detail !== waitingText ? /* @__PURE__ */ jsx(Fragment$1, { children: /* @__PURE__ */ jsx("span", {
 							class: "seams-waiting-sdk-events",
@@ -1158,10 +1163,10 @@ var AuthMenuSurface = class extends Component {
 						}) }) : null
 					]
 				}),
-				status.illustration !== "passkey" ? /* @__PURE__ */ jsx("div", {
+				prompt ? null : /* @__PURE__ */ jsx("div", {
 					"aria-label": "Loading",
 					class: "seams-spinner"
-				}) : null
+				})
 			]
 		}) });
 	}