@seams/wallet 0.11.0 → 0.13.0

package/README.md

@@ -1,18 +1,18 @@
 # Seams Wallet SDK
 
-`@seams/wallet` **0.11.0** provides browser wallet lifecycle, NEAR and EVM-family
+`@seams/wallet` **0.13.0** provides browser wallet lifecycle, NEAR and EVM-family
 threshold signing, React components, and hosted wallet runtime assets.
 
 ## Install
 
 ```sh
-pnpm add @seams/wallet@0.11.0
+pnpm add @seams/wallet@0.13.0
 ```
 
 React integrations support React 18 and 19. Import the provider and UI from
 `@seams/wallet/react` and its stylesheet from `@seams/wallet/react/styles`.
 Keep the application package, wallet-origin assets, and
-`@seams/wallet-server@0.11.0` on the matching release.
+`@seams/wallet-server@0.13.0` on the matching release.
 
 ## Next release migration (unreleased)
 

package/dist/.build-inputs.sha256

@@ -1 +1 @@
-6d2e6b22efe3f00372c471ea3e8fa79ef5f85a847e71a1b1fffffb303b5d669f
+264938a73999cf6e6b1da2cf1272943fb8258e8c3a5fee0fce16e21e0a64d0f3

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

@@ -1,4 +1,5 @@
 import { isLinkedDeviceTargetEmailAddressV1 } from "../../../../../core/types/linkDevice.js";
+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";
@@ -6,6 +7,7 @@ import { PadlockIcon } from "../../../../../core/signingEngine/uiConfirm/ui/prea
 import { blinkMenuItem } from "../../../../../utils/menuItemBlink.js";
 import { accountDropdownIcon, backIcon, chevronIcon, fingerprintIcon, googleIcon, linkDeviceIcon, linkFailedIcon, mailIcon, recoveryIcon, rerollIcon } from "./icons.js";
 import { AuthMenuFooter } from "./AuthMenuFooter.js";
+import { linkDeviceDotRing, linkDeviceEmailOtpPresentation } from "./linkDeviceBadge.js";
 import { Component, Fragment } from "preact";
 import { Fragment as Fragment$1, jsx, jsxs } from "preact/jsx-runtime";
 //#region src/SeamsWeb/walletIframe/host/ui/auth-menu/AuthMenuSurface.tsx
@@ -23,19 +25,74 @@ const AUTH_MENU_ACCOUNT_LIST_ID = "seams-auth-menu-account-list";
 function otpCodeDigits(code, length = 6) {
 	return code.padEnd(length, " ").slice(0, length).split("");
 }
+const RECOVERY_CODE_CHARACTERS = new Set(EMAIL_OTP_RECOVERY_KEY_ALPHABET);
 function recoveryInputCharacters(code) {
-	return code.replace(/[\s\-\u2010-\u2015\u2212]/g, "").toUpperCase();
+	let characters = "";
+	for (const character of code.toUpperCase()) {
+		const read = character === "O" ? "0" : character === "I" || character === "L" ? "1" : character;
+		if (RECOVERY_CODE_CHARACTERS.has(read)) characters += read;
+	}
+	return characters;
+}
+const RECOVERY_CODE_SEPARATOR = /[\s\-\u2010-\u2015\u2212]/;
+/** Characters the input dropped because no recovery code contains them, such as U. */
+function rejectedRecoveryCharacters(input) {
+	const rejected = /* @__PURE__ */ new Set();
+	for (const character of input.toUpperCase()) {
+		if (RECOVERY_CODE_SEPARATOR.test(character)) continue;
+		if (recoveryInputCharacters(character)) continue;
+		rejected.add(character);
+	}
+	return Array.from(rejected).slice(0, 3);
 }
-function recoveryCodeGroups(digits) {
+function renderRecoveryCodeGroups(code, selection, arrival) {
+	const caret = selection && selection.start === selection.end ? selection.start : null;
+	const lastIndex = 31;
+	const focusIndex = selection === null ? null : Math.min(selection.start, lastIndex);
 	const groups = [];
-	for (let index = 0; index < digits.length; index += 4) groups.push(digits.slice(index, index + 4));
+	for (let start = 0; start < 32; start += 4) {
+		const end = start + 4;
+		const slots = [];
+		for (let index = start; index < end; index += 1) {
+			const character = code[index] ?? "";
+			const classes = ["seams-otp-slot"];
+			if (character) classes.push("is-filled");
+			if (index === caret) classes.push("is-caret");
+			if (caret === 32 && index === lastIndex) classes.push("is-caret-after");
+			if (selection && index >= selection.start && index < selection.end) classes.push("is-selected");
+			if (arrival && index >= arrival.start && index < arrival.end) classes.push("is-new");
+			slots.push(/* @__PURE__ */ jsx("span", {
+				class: classes.join(" "),
+				"data-recovery-slot": index,
+				children: character
+			}, index));
+		}
+		const groupClasses = ["seams-recovery-code-group"];
+		if (focusIndex !== null && focusIndex >= start && focusIndex < end) groupClasses.push("is-active");
+		if (code.length >= end) groupClasses.push("is-complete");
+		groups.push(/* @__PURE__ */ jsx("div", {
+			class: groupClasses.join(" "),
+			children: slots
+		}, start));
+	}
 	return groups;
 }
-function renderRecoveryCodeGroup(digits, index) {
-	return /* @__PURE__ */ jsx("div", {
-		class: "seams-recovery-code-group",
-		children: digits.map(renderOtpCodeDigit)
-	}, index);
+function recoveryCaretAtPoint(root, clientX, clientY, codeLength) {
+	let nearest = null;
+	for (const slot of root.querySelectorAll("[data-recovery-slot]")) {
+		const index = Number(slot.dataset.recoverySlot);
+		const box = slot.getBoundingClientRect();
+		const dx = clientX < box.left ? box.left - clientX : Math.max(0, clientX - box.right);
+		const dy = clientY < box.top ? box.top - clientY : Math.max(0, clientY - box.bottom);
+		const distance = dx * dx + dy * dy;
+		if (nearest === null || distance < nearest.distance) nearest = {
+			index,
+			distance,
+			after: clientX > box.left + box.width / 2
+		};
+	}
+	if (nearest === null) return null;
+	return Math.min(nearest.after ? nearest.index + 1 : nearest.index, codeLength);
 }
 function renderOtpCodeDigit(digit) {
 	return /* @__PURE__ */ jsx(Fragment$1, { children: /* @__PURE__ */ jsx("span", {
@@ -54,6 +111,10 @@ function recoveryAnnouncement(viewModel) {
 	if (viewModel.stage === "sign_in_ready") return "Wallet recovered. Unlock it to continue.";
 	return "";
 }
+function recoveryBackLabel(viewModel) {
+	if (viewModel.kind !== "recovery") return "Back";
+	return viewModel.stage === "choose_method" ? "Back to recovery code" : "Back to unlock wallet";
+}
 function recoveryNavigationLocked(viewModel) {
 	return viewModel.kind === "recovery" && viewModel.stage === "finalizing";
 }
@@ -79,90 +140,6 @@ function menuNotice(viewModel) {
 	if (viewModel.kind === "google_otp_login" || viewModel.kind === "google_registration") return viewModel.error || null;
 	return viewModel.kind === "passkey" && viewModel.status.kind === "recoverable" && viewModel.status.reason === "error" ? viewModel.status.message : null;
 }
-const LINK_DEVICE_DOT_COUNT = 12;
-function linkDeviceDotRing(phase, glyph) {
-	return /* @__PURE__ */ jsx(Fragment$1, { children: /* @__PURE__ */ jsxs("div", {
-		class: `seams-link-device-dot-ring is-${phase}`,
-		"aria-hidden": "true",
-		children: [
-			Array.from({ length: LINK_DEVICE_DOT_COUNT }, (_, index) => /* @__PURE__ */ jsx(Fragment$1, { children: /* @__PURE__ */ jsx("span", { "data-dot-index": index }) })),
-			glyph ? /* @__PURE__ */ jsx(Fragment$1, { children: /* @__PURE__ */ jsx("div", {
-				class: "seams-link-device-dot-ring-glyph",
-				children: glyph
-			}) }) : null,
-			/* @__PURE__ */ jsx("svg", {
-				class: "seams-link-device-dot-ring-check",
-				viewBox: "0 0 52 52",
-				fill: "none",
-				stroke: "currentColor",
-				"stroke-width": "2.5",
-				"stroke-linecap": "round",
-				"stroke-linejoin": "round",
-				children: /* @__PURE__ */ jsx("path", { d: "m18.5 27 5 5 10-11" })
-			})
-		]
-	}) });
-}
-function linkDeviceEmailOtpPresentation(activation) {
-	switch (activation.kind) {
-		case "sending": return {
-			ring: "waiting",
-			heading: "Sending your code",
-			status: "Emailing a 6-digit code",
-			pending: true,
-			tone: "neutral"
-		};
-		case "resending": return {
-			ring: "waiting",
-			heading: "Sending a new code",
-			status: "Emailing a fresh 6-digit code",
-			pending: true,
-			tone: "neutral"
-		};
-		case "submitting": return {
-			ring: "waiting",
-			heading: "Checking your code",
-			status: "Verifying the code you entered",
-			pending: true,
-			tone: "neutral"
-		};
-		case "code_input": return {
-			ring: "idle",
-			heading: "Verify your email",
-			status: "Enter the 6-digit code we just sent.",
-			pending: false,
-			tone: "neutral"
-		};
-		case "incorrect": return {
-			ring: "idle",
-			heading: "Verify your email",
-			status: activation.message,
-			pending: false,
-			tone: "error"
-		};
-		case "expired": return {
-			ring: "idle",
-			heading: "That code expired",
-			status: activation.message,
-			pending: false,
-			tone: "error"
-		};
-		case "unavailable": return {
-			ring: "idle",
-			heading: "Email code unavailable",
-			status: activation.message,
-			pending: false,
-			tone: "error"
-		};
-		case "completed": return {
-			ring: "approved",
-			heading: "Email verified",
-			status: "Finishing linking this device",
-			pending: true,
-			tone: "neutral"
-		};
-	}
-}
 function selectedLoginAccount(viewModel) {
 	return resolveAuthMenuLoginAccount(viewModel.accountOptions, viewModel.selectedAccount).selectedAccount;
 }
@@ -194,7 +171,15 @@ const ACCOUNT_MENU_EXIT_MS = 160;
 var AuthMenuSurface = class extends Component {
 	constructor(..._args) {
 		super(..._args);
-		this.state = { accountMenu: "closed" };
+		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;
@@ -367,24 +352,49 @@ var AuthMenuSurface = class extends Component {
 		};
 		this.onRecoveryCodeInput = (event) => {
 			if (!(event.currentTarget instanceof HTMLInputElement)) return;
-			const viewModel = this.viewModel;
-			if (viewModel.kind !== "recovery") return;
+			if (this.viewModel.kind !== "recovery") return;
 			const input = event.currentTarget;
-			const length = viewModel.recoveryCodeSlotCount ?? 32;
 			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, 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" });
@@ -492,6 +502,8 @@ var AuthMenuSurface = class extends Component {
 		if (this.contentHeightFrame !== null) cancelAnimationFrame(this.contentHeightFrame);
 		this.contentHeightFrame = null;
 		this.endAccountMenuExit();
+		if (this.recoveryArrivalTimer !== null) clearTimeout(this.recoveryArrivalTimer);
+		if (this.recoveryRejectionTimer !== null) clearTimeout(this.recoveryRejectionTimer);
 		window.removeEventListener("resize", this.queueContentHeightSync);
 		document.removeEventListener("pointerdown", this.onDocumentPointerDown);
 		document.removeEventListener("keydown", this.onKeyDown, true);
@@ -524,6 +536,10 @@ var AuthMenuSurface = class extends Component {
 			if (previous?.kind !== "recovery" || previous.stage !== "enter_code") this.props.element.querySelector("[data-recovery-code]")?.focus();
 			return;
 		}
+		if (current.stage === "choose_method") {
+			if (stageChanged) this.props.element.querySelector("[data-recovery-target]")?.focus();
+			return;
+		}
 		const becameRecoverable = current.status.kind === "recoverable" && previous?.kind === "recovery" && previous.status.kind !== "recoverable";
 		if ((stageChanged || becameRecoverable) && (current.stage === "passkey_ready" || current.stage === "finalizing" || current.stage === "sign_in_ready")) this.props.element.querySelector("[data-auth-menu-primary]")?.focus();
 	}
@@ -557,6 +573,41 @@ var AuthMenuSurface = class extends Component {
 	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\"])"));
 	}
+	showRecoveryRejection(characters) {
+		const parity = this.state.recoveryRejection?.parity === 0 ? 1 : 0;
+		this.setState({ recoveryRejection: {
+			characters,
+			parity
+		} });
+		if (this.recoveryRejectionTimer !== null) clearTimeout(this.recoveryRejectionTimer);
+		this.recoveryRejectionTimer = setTimeout(this.clearRecoveryRejection, 2e3);
+	}
+	recoveryCodeArrival(code) {
+		const drawn = this.recoveryDrawnCode;
+		if (code === drawn) return this.recoveryArrival;
+		this.recoveryDrawnCode = code;
+		let start = 0;
+		while (start < drawn.length && drawn[start] === code[start]) start += 1;
+		const end = start + code.length - drawn.length;
+		this.recoveryArrival = code.length > drawn.length ? {
+			start,
+			end
+		} : null;
+		if (this.recoveryArrivalTimer !== null) clearTimeout(this.recoveryArrivalTimer);
+		this.recoveryArrivalTimer = setTimeout(this.endRecoveryArrival, 600);
+		return this.recoveryArrival;
+	}
+	syncRecoverySelection(input) {
+		const length = input.value.length;
+		const start = Math.min(input.selectionStart ?? length, length);
+		const end = Math.min(Math.max(input.selectionEnd ?? start, start), length);
+		const current = this.state.recoverySelection;
+		if (current?.start === start && current.end === end) return;
+		this.setState({ recoverySelection: {
+			start,
+			end
+		} });
+	}
 	emitIntent(intent) {
 		this.props.onIntent(intent);
 	}
@@ -595,7 +646,7 @@ var AuthMenuSurface = class extends Component {
 						/* @__PURE__ */ jsx("button", {
 							class: `seams-back-button ${loading || linkDevice || otpPrompt || registrationPrompt || recovery ? "is-visible" : ""}`,
 							type: "button",
-							"aria-label": recovery ? "Back to unlock wallet" : "Back",
+							"aria-label": recoveryBackLabel(viewModel),
 							"data-auth-menu-close": true,
 							disabled: recoveryNavigationLocked(viewModel),
 							onClick: this.onBackClick,
@@ -856,9 +907,9 @@ var AuthMenuSurface = class extends Component {
 	}
 	renderRecovery(viewModel) {
 		if (viewModel.stage === "enter_code") {
-			const codeLength = viewModel.recoveryCodeSlotCount ?? 32;
-			const code = recoveryInputCharacters(viewModel.recoveryCode).slice(0, codeLength);
-			const digits = otpCodeDigits(code, codeLength);
+			const code = recoveryInputCharacters(viewModel.recoveryCode).slice(0, 32);
+			const arrival = this.recoveryCodeArrival(code);
+			const rejection = this.state.recoveryRejection;
 			const statusMessage = viewModel.status.kind === "recoverable" ? viewModel.status.message : "";
 			const feedbackMessage = viewModel.recoveryCodeError ?? statusMessage;
 			const feedbackIsError = feedbackMessage.length > 0;
@@ -877,58 +928,110 @@ var AuthMenuSurface = class extends Component {
 					onSubmit: this.onRecoverySubmit,
 					children: [/* @__PURE__ */ jsxs("div", {
 						class: "seams-recovery-field",
-						children: [/* @__PURE__ */ jsx("label", {
-							class: "seams-field-label",
-							for: "seams-recovery-code",
-							children: "Recovery code"
-						}), /* @__PURE__ */ jsxs("div", {
-							class: "seams-otp-code-field seams-recovery-code-field",
-							children: [/* @__PURE__ */ jsx("input", {
-								id: "seams-recovery-code",
-								class: "seams-otp-input",
-								"data-recovery-code": true,
-								name: "recoveryCode",
-								type: "text",
-								inputmode: codeLength === 16 ? "numeric" : "text",
-								autocomplete: "off",
-								autocapitalize: "characters",
-								autocorrect: "off",
-								spellcheck: false,
-								"aria-invalid": viewModel.recoveryCodeError ? "true" : "false",
-								"aria-describedby": viewModel.recoveryCodeError ? "seams-recovery-code-feedback" : void 0,
-								value: code,
-								onInput: this.onRecoveryCodeInput
-							}), /* @__PURE__ */ jsx("div", {
-								class: "seams-otp-slots seams-recovery-code-slots",
-								"aria-hidden": "true",
-								children: recoveryCodeGroups(digits).map(renderRecoveryCodeGroup)
-							})]
-						})]
-					}), /* @__PURE__ */ jsxs("div", {
-						class: "seams-secondary-actions",
-						children: [/* @__PURE__ */ jsxs("button", {
-							class: "seams-link-device-btn seams-auth-method-choice-btn",
-							type: "button",
-							"data-recovery-target": "passkey",
-							onClick: this.onRecoveryPasskeySelected,
-							children: [/* @__PURE__ */ jsx("span", {
-								class: "seams-auth-method-choice-icon",
-								children: fingerprintIcon()
-							}), /* @__PURE__ */ jsx("span", { children: "Recover with Passkey" })]
-						}), /* @__PURE__ */ jsxs("button", {
-							class: "seams-link-device-btn seams-auth-method-choice-btn",
-							type: "button",
-							"data-recovery-target": "google_email_otp",
-							onClick: this.onRecoveryGoogleSelected,
-							children: [/* @__PURE__ */ jsx("span", {
-								class: "seams-auth-method-choice-icon",
-								children: googleIcon()
-							}), /* @__PURE__ */ jsx("span", { children: "Recover with Google" })]
-						})]
+						children: [
+							/* @__PURE__ */ jsxs("div", {
+								class: "seams-recovery-field-header",
+								children: [/* @__PURE__ */ jsx("label", {
+									class: "seams-field-label",
+									for: "seams-recovery-code",
+									children: "Recovery code"
+								}), /* @__PURE__ */ jsxs("span", {
+									id: "seams-recovery-code-count",
+									class: "seams-recovery-code-count",
+									children: [
+										code.length,
+										"/",
+										32
+									]
+								})]
+							}),
+							/* @__PURE__ */ jsxs("div", {
+								class: `seams-otp-code-field seams-recovery-code-field ${rejection ? `is-rejecting-${rejection.parity}` : ""}`,
+								children: [/* @__PURE__ */ jsx("input", {
+									id: "seams-recovery-code",
+									class: "seams-otp-input",
+									"data-recovery-code": true,
+									name: "recoveryCode",
+									type: "text",
+									inputmode: "text",
+									autocomplete: "off",
+									autocapitalize: "characters",
+									autocorrect: "off",
+									spellcheck: false,
+									"aria-invalid": viewModel.recoveryCodeError ? "true" : "false",
+									"aria-describedby": viewModel.recoveryCodeError ? "seams-recovery-code-feedback seams-recovery-code-count seams-recovery-code-hint" : "seams-recovery-code-count seams-recovery-code-hint",
+									value: code,
+									onInput: this.onRecoveryCodeInput,
+									onFocus: this.onRecoverySelectionMove,
+									onKeyUp: this.onRecoverySelectionMove,
+									onSelect: this.onRecoverySelectionMove,
+									onClick: this.onRecoveryCodeClick,
+									onBlur: this.onRecoveryCodeBlur
+								}), /* @__PURE__ */ jsx("div", {
+									class: `seams-otp-slots seams-recovery-code-slots ${arrival && arrival.end - arrival.start > 1 ? "is-sweeping" : ""}`,
+									"aria-hidden": "true",
+									children: renderRecoveryCodeGroups(code, this.state.recoverySelection, arrival)
+								})]
+							}),
+							/* @__PURE__ */ jsx("p", {
+								id: "seams-recovery-code-hint",
+								class: `seams-recovery-code-hint ${rejection ? "is-error" : ""}`,
+								"aria-live": "polite",
+								children: rejection ? `Recovery codes don’t use ${rejection.characters.join(", ")}.` : "You can paste the whole code."
+							})
+						]
+					}), /* @__PURE__ */ jsx("button", {
+						class: "seams-auth-method-btn seams-auth-method-btn-primary",
+						type: "submit",
+						"data-auth-menu-primary": true,
+						"data-recovery-continue": true,
+						children: "Continue"
 					})]
 				})
 			] });
 		}
+		if (viewModel.stage === "choose_method" || viewModel.stage === "preparing") {
+			const busyTarget = viewModel.stage === "preparing" ? viewModel.target.kind : null;
+			const statusMessage = viewModel.status.kind === "recoverable" ? viewModel.status.message : viewModel.status.kind === "busy" ? viewModel.status.headline : "";
+			const googleEnabled = viewModel.enabledExternalProviders?.includes("google") ?? false;
+			return /* @__PURE__ */ jsxs(Fragment$1, { children: [
+				this.renderHeader(viewModel),
+				/* @__PURE__ */ jsx("p", {
+					class: `seams-recovery-status ${viewModel.status.kind === "recoverable" ? "seams-recovery-error" : ""}`,
+					"aria-hidden": "true",
+					children: statusMessage
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					class: "seams-auth-methods seams-recovery-methods",
+					children: [/* @__PURE__ */ jsxs("button", {
+						class: "seams-auth-method-btn seams-auth-method-btn-primary",
+						type: "button",
+						"data-auth-menu-primary": true,
+						"data-recovery-target": "passkey",
+						disabled: busyTarget !== null,
+						onClick: this.onRecoveryPasskeySelected,
+						children: [busyTarget === "passkey" ? /* @__PURE__ */ jsx("span", {
+							class: "seams-spinner",
+							"aria-hidden": "true"
+						}) : fingerprintIcon(), /* @__PURE__ */ jsx("span", { children: "Create a passkey" })]
+					}), googleEnabled ? /* @__PURE__ */ jsxs("button", {
+						class: "seams-auth-method-btn",
+						type: "button",
+						"data-recovery-target": "google_email_otp",
+						disabled: busyTarget !== null,
+						onClick: this.onRecoveryGoogleSelected,
+						children: [busyTarget === "google_email_otp" ? /* @__PURE__ */ jsx("span", {
+							class: "seams-spinner",
+							"aria-hidden": "true"
+						}) : googleIcon(), /* @__PURE__ */ jsx("span", { children: "Continue with Google" })]
+					}) : null]
+				}),
+				/* @__PURE__ */ jsx("p", {
+					class: "seams-recovery-method-note",
+					children: "This adds a new sign-in method to your wallet."
+				})
+			] });
+		}
 		if (viewModel.stage === "email_code_required") {
 			const digits = otpCodeDigits(viewModel.otpCode);
 			const canSubmit = /^\d{6}$/.test(viewModel.otpCode) && viewModel.status.kind !== "busy";

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

@@ -0,0 +1,90 @@
+import { Fragment, jsx, jsxs } from "preact/jsx-runtime";
+//#region src/SeamsWeb/walletIframe/host/ui/auth-menu/linkDeviceBadge.tsx
+const LINK_DEVICE_DOT_COUNT = 12;
+function linkDeviceDotRing(phase, glyph) {
+	return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs("div", {
+		class: `seams-link-device-dot-ring is-${phase}`,
+		"aria-hidden": "true",
+		children: [
+			Array.from({ length: LINK_DEVICE_DOT_COUNT }, (_, index) => /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx("span", { "data-dot-index": index }) })),
+			glyph ? /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx("div", {
+				class: "seams-link-device-dot-ring-glyph",
+				children: glyph
+			}) }) : null,
+			/* @__PURE__ */ jsx("svg", {
+				class: "seams-link-device-dot-ring-check",
+				viewBox: "0 0 52 52",
+				fill: "none",
+				stroke: "currentColor",
+				"stroke-width": "2.5",
+				"stroke-linecap": "round",
+				"stroke-linejoin": "round",
+				children: /* @__PURE__ */ jsx("path", { d: "m18.5 27 5 5 10-11" })
+			})
+		]
+	}) });
+}
+function linkDeviceEmailOtpPresentation(activation) {
+	switch (activation.kind) {
+		case "sending": return {
+			ring: "waiting",
+			heading: "Sending your code",
+			status: "Emailing a 6-digit code",
+			pending: true,
+			tone: "neutral"
+		};
+		case "resending": return {
+			ring: "waiting",
+			heading: "Sending a new code",
+			status: "Emailing a fresh 6-digit code",
+			pending: true,
+			tone: "neutral"
+		};
+		case "submitting": return {
+			ring: "waiting",
+			heading: "Checking your code",
+			status: "Verifying the code you entered",
+			pending: true,
+			tone: "neutral"
+		};
+		case "code_input": return {
+			ring: "idle",
+			heading: "Verify your email",
+			status: "Enter the 6-digit code we just sent.",
+			pending: false,
+			tone: "neutral"
+		};
+		case "incorrect": return {
+			ring: "idle",
+			heading: "Verify your email",
+			status: activation.message,
+			pending: false,
+			tone: "error"
+		};
+		case "expired": return {
+			ring: "idle",
+			heading: "That code expired",
+			status: activation.message,
+			pending: false,
+			tone: "error"
+		};
+		case "unavailable": return {
+			ring: "idle",
+			heading: "Email code unavailable",
+			status: activation.message,
+			pending: false,
+			tone: "error"
+		};
+		case "completed": return {
+			ring: "approved",
+			heading: "Email verified",
+			status: "Finishing linking this device",
+			pending: true,
+			tone: "neutral"
+		};
+	}
+}
+//#endregion
+export { linkDeviceDotRing, linkDeviceEmailOtpPresentation };
+
+//# sourceMappingURL=linkDeviceBadge.js.map