@seams/wallet 0.10.2 → 0.12.0

package/dist/esm/react/components/AccountMenuButton/index.js

@@ -12,24 +12,28 @@ import { GlobeIcon } from "./icons/GlobeIcon.js";
 import { SlidersIcon } from "./icons/SlidersIcon.js";
 import { RecoveryCodesIcon } from "./icons/RecoveryCodesIcon.js";
 import SpinnerIcon from "./icons/SpinnerIcon.js";
+import { AccountMenuScreen } from "./AccountMenuScreen.js";
 import TouchIcon from "./icons/TouchIcon.js";
-import { UserAccountButton } from "./UserAccountButton.js";
-import { TransactionSettingsSection } from "./TransactionSettingsSection.js";
-import { AccountsSection } from "./AccountsSection.js";
-import { ExportKeysSection } from "./ExportKeysSection.js";
-import { PROFILE_MENU_ITEM_IDS } from "./types.js";
-import { ProfileDropdown } from "./ProfileDropdown.js";
+import { AccountMenuButtonView } from "./AccountMenuButtonView.js";
 import { useProfileState } from "./hooks/useProfileState.js";
+import { PROFILE_MENU_ITEM_IDS } from "./types.js";
 import QRCodeScanner from "../QRCodeScanner.js";
 import LinkedDevicesModal from "./LinkedDevicesModal.js";
 import AuthenticationMethodsModal from "./AuthenticationMethodsModal.js";
 import { WalletSettingsHeader, WalletSettingsLayout } from "./WalletSettingsLayout.js";
+import { AccountsSection } from "./AccountsSection.js";
+import { ExportKeysSection } from "./ExportKeysSection.js";
+import { ExportKeysScreen } from "./ExportKeysScreen.js";
+import { TransactionSettingsSection } from "./TransactionSettingsSection.js";
 import HostedSeamsAuthMenu from "../HostedSeamsAuthMenu/shell.js";
+import { AccountMenuButtonMock } from "./AccountMenuButtonMock.js";
 import { useCallback, useEffect, useMemo, useState } from "react";
-import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
-import { createPortal } from "react-dom";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import "./Web3AuthProfileButton.css";
 //#region src/react/components/AccountMenuButton/index.tsx
+function resetNavigation(isOpen, setScreen) {
+	if (!isOpen) setScreen("overview");
+}
 function remainOnSettingsPage() {}
 function showSettingsError(setError, error) {
 	setError(error.message);
@@ -79,15 +83,6 @@ async function resolveNearAccountIdForExport(input) {
 	if (state?.status === "near_failed_retryable") throw new Error(`NEAR signer provisioning must be retried (${state.errorCode}).`);
 	throw new Error("Ed25519 export requires an active NEAR signer.");
 }
-function resolveDefaultPortalTarget(explicit, buttonRoot) {
-	if (explicit) return explicit;
-	try {
-		const root = buttonRoot?.getRootNode?.();
-		if (root && typeof ShadowRoot !== "undefined" && root instanceof ShadowRoot) return root;
-	} catch {}
-	if (typeof document === "undefined") return null;
-	return document.body;
-}
 /**
 * Account Menu Button Component
 * Provides user settings, account management, and the device-link scanner shell.
@@ -119,7 +114,7 @@ function resolveDefaultPortalTarget(explicit, buttonRoot) {
 * }
 * ```
 */
-const AccountMenuButtonInner = ({ presentation, nearAccountId: nearAccountIdProp, nearExplorerBaseUrl = "https://nearblocks.io", username: usernameProp, hideUsername = false, onLock, onExportKeyError, onExportKeyEvent, deviceLinkingScannerParams, toggleColors, style, className, portalTarget, isMenuOpen, onMenuOpenChange, highlightedMenuItem }) => {
+const AccountMenuButtonInner = ({ presentation, nearAccountId: nearAccountIdProp, nearExplorerBaseUrl = "https://nearblocks.io", username: usernameProp, hideUsername = false, onLock, onExportKeyError, onExportKeyEvent, deviceLinkingScannerParams, toggleColors, style, className, isMenuOpen, onMenuOpenChange, highlightedMenuItem }) => {
 	const { accountInputState, loginState, seams, lock } = useSeams();
 	const recovery = useMemo(() => seams.recovery, [seams]);
 	const accountName = usernameProp || nearAccountIdProp?.split(".")?.[0] || loginState.nearAccountId?.split(".")?.[0] || "User";
@@ -130,19 +125,16 @@ const AccountMenuButtonInner = ({ presentation, nearAccountId: nearAccountIdProp
 	const canExportNearKey = Boolean(nearAccountId);
 	const canExportEvmKeys = Boolean(loginState.thresholdEcdsaEthereumAddress);
 	const [showQRScanner, setShowQRScanner] = useState(false);
-	const [showLinkedDevices, setShowLinkedDevices] = useState(false);
-	const [showAuthenticationMethods, setShowAuthenticationMethods] = useState(false);
+	const [screen, setScreen] = useState("overview");
 	const [recoveryCodesOpen, setRecoveryCodesOpen] = useState(false);
-	const [exportKeysOpen, setExportKeysOpen] = useState(false);
 	const [exportLoadingChain, setExportLoadingChain] = useState(null);
-	const [transactionSettingsOpen, setTransactionSettingsOpen] = useState(false);
-	const [accountsOpen, setAccountsOpen] = useState(false);
 	const [currentConfirmConfig, setCurrentConfirmConfig] = useState(null);
 	const [settingsError, setSettingsError] = useState(null);
 	const { isOpen, refs, handleToggle, handleClose } = useProfileState({
 		open: typeof isMenuOpen === "boolean" ? isMenuOpen : void 0,
 		onOpenChange: onMenuOpenChange
 	});
+	useEffect(resetNavigation.bind(null, isOpen, setScreen), [isOpen]);
 	const { theme } = useTheme();
 	const accountMenuCapabilities = accountMenuCapabilitiesForLoginState(loginState);
 	const canShowRecoveryCodes = accountMenuCapabilities.kind === "owner" && Boolean(walletId);
@@ -152,10 +144,7 @@ const AccountMenuButtonInner = ({ presentation, nearAccountId: nearAccountIdProp
 		handleClose();
 	}, [handleClose]);
 	useEffect(() => {
-		if (!canManageLinkedDevices) {
-			setShowLinkedDevices(false);
-			setShowAuthenticationMethods(false);
-		}
+		if (!canManageLinkedDevices) setScreen("overview");
 	}, [canManageLinkedDevices]);
 	useEffect(() => {
 		if (!seams) return;
@@ -317,29 +306,25 @@ const AccountMenuButtonInner = ({ presentation, nearAccountId: nearAccountIdProp
 			label: "Accounts",
 			description: "View accounts on block explorers",
 			disabled: !loginState.isLoggedIn,
-			onClick: () => setAccountsOpen((v) => !v),
+			onClick: setScreen.bind(null, "accounts"),
 			keepOpenOnClick: true
 		});
 		if (accountMenuCapabilities.kind !== "signed_out") items.push({
 			id: PROFILE_MENU_ITEM_IDS.EXPORT_KEYS,
 			icon: exportLoadingChain ? /* @__PURE__ */ jsx(SpinnerIcon, {}) : /* @__PURE__ */ jsx(KeyIcon, {}),
-			label: "Export Keys",
+			label: "Export keys",
 			description: accountMenuCapabilities.canExportKeys ? "Export wallet signing keys" : "Owner key export is not available on this device yet",
 			disabled: !accountMenuCapabilities.canExportKeys,
-			onClick: () => {
-				setExportKeysOpen((v) => !v);
-			},
+			onClick: setScreen.bind(null, "export-keys"),
 			keepOpenOnClick: true
 		});
 		if (canShowRecoveryCodes) items.push({
 			id: PROFILE_MENU_ITEM_IDS.RECOVERY_CODES,
 			icon: recoveryCodesOpen ? /* @__PURE__ */ jsx(SpinnerIcon, {}) : /* @__PURE__ */ jsx(RecoveryCodesIcon, {}),
-			label: "Recovery Codes",
+			label: "Recovery codes",
 			description: "Back up wallet recovery codes",
 			disabled: recoveryCodesOpen,
-			onClick: () => {
-				startRecoveryCodesFlow();
-			},
+			onClick: setScreen.bind(null, "recovery-codes"),
 			keepOpenOnClick: true
 		});
 		if (accountMenuCapabilities.kind !== "signed_out") {
@@ -347,28 +332,26 @@ const AccountMenuButtonInner = ({ presentation, nearAccountId: nearAccountIdProp
 			items.push({
 				id: PROFILE_MENU_ITEM_IDS.AUTHENTICATION_METHODS,
 				icon: /* @__PURE__ */ jsx(TouchIcon, {}),
-				label: "Authentication Methods",
+				label: "Authentication methods",
 				description: "Add or remove ways to unlock this device",
 				disabled: !canManageLinkedDevices,
-				onClick: () => setShowAuthenticationMethods(true),
+				onClick: setScreen.bind(null, "authentication-methods"),
 				keepOpenOnClick: true
 			}, {
 				id: PROFILE_MENU_ITEM_IDS.SCAN_LINK_DEVICE,
 				icon: /* @__PURE__ */ jsx(ScanIcon, {}),
-				label: "Scan and Link Device",
+				label: "Scan and link device",
 				description: "Scan QR to link a device",
 				disabled: !canManageLinkedDevices,
-				onClick: () => {
-					setShowQRScanner(true);
-				},
+				onClick: setScreen.bind(null, "scan-link-device"),
 				keepOpenOnClick: true
 			}, {
 				id: PROFILE_MENU_ITEM_IDS.LINKED_DEVICES,
 				icon: /* @__PURE__ */ jsx(LinkIcon, {}),
-				label: "Linked Devices",
+				label: "Linked devices",
 				description: "See devices using this wallet",
 				disabled: !canManageLinkedDevices,
-				onClick: () => setShowLinkedDevices(true),
+				onClick: setScreen.bind(null, "linked-devices"),
 				keepOpenOnClick: true
 			});
 		}
@@ -382,10 +365,10 @@ const AccountMenuButtonInner = ({ presentation, nearAccountId: nearAccountIdProp
 		items.push({
 			id: PROFILE_MENU_ITEM_IDS.TRANSACTION_SETTINGS,
 			icon: /* @__PURE__ */ jsx(SlidersIcon, {}),
-			label: "Transaction Settings",
+			label: "Transaction settings",
 			description: "Customize confirmation behavior",
 			disabled: !loginState.isLoggedIn,
-			onClick: () => setTransactionSettingsOpen((v) => !v),
+			onClick: setScreen.bind(null, "transaction-settings"),
 			keepOpenOnClick: true
 		});
 		return items;
@@ -429,9 +412,82 @@ const AccountMenuButtonInner = ({ presentation, nearAccountId: nearAccountIdProp
 		onLock?.();
 		handleClose();
 	};
-	const portalHost = resolveDefaultPortalTarget(portalTarget, refs.buttonRef.current);
-	const canPortal = !!portalHost;
-	if (presentation === "page" && loginState.isLoggedIn && walletId) return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(WalletSettingsLayout, {
+	const backToMenu = setScreen.bind(null, "overview");
+	const screens = {
+		overview: null,
+		"transaction-settings": /* @__PURE__ */ jsx(AccountMenuScreen, {
+			title: "Transaction settings",
+			onBack: backToMenu,
+			children: currentConfirmConfig ? /* @__PURE__ */ jsx(TransactionSettingsSection, {
+				currentConfirmConfig,
+				onSetUiMode: handleSetUiMode,
+				onToggleSkipClick: handleToggleSkipClick,
+				onSetDelay: handleSetDelay,
+				isOpen: true,
+				theme
+			}) : /* @__PURE__ */ jsx("p", {
+				role: "status",
+				children: "Loading transaction settings…"
+			})
+		}),
+		accounts: /* @__PURE__ */ jsxs(AccountMenuScreen, {
+			title: "Accounts",
+			onBack: backToMenu,
+			children: [/* @__PURE__ */ jsx("p", {
+				className: "seams-account-description",
+				children: "Your addresses across networks."
+			}), /* @__PURE__ */ jsx(AccountsSection, { rows: accountsRows })]
+		}),
+		"export-keys": /* @__PURE__ */ jsx(ExportKeysScreen, {
+			onBack: backToMenu,
+			loadingChain: exportLoadingChain,
+			canExportNearKey,
+			canExportEvmKeys,
+			onSelectChain: startExportKeyFlow
+		}),
+		"recovery-codes": /* @__PURE__ */ jsxs(AccountMenuScreen, {
+			title: "Recovery codes",
+			onBack: backToMenu,
+			children: [
+				/* @__PURE__ */ jsx("p", {
+					className: "seams-account-description",
+					children: "Keep a recovery code somewhere safe. Use it to restore access to your wallet."
+				}),
+				/* @__PURE__ */ jsx("div", {
+					className: "seams-account-inset",
+					children: "Only you should have this code. Anyone with it can start recovering your wallet."
+				}),
+				/* @__PURE__ */ jsx("button", {
+					type: "button",
+					className: "seams-account-action primary",
+					disabled: recoveryCodesOpen,
+					onClick: startRecoveryCodesFlow,
+					children: recoveryCodesOpen ? "Opening recovery codes…" : "View recovery codes"
+				})
+			]
+		}),
+		"authentication-methods": /* @__PURE__ */ jsx(AuthenticationMethodsModal, {
+			walletId: walletId ?? null,
+			isOpen: true,
+			presentation: "embedded",
+			onClose: backToMenu
+		}),
+		"linked-devices": /* @__PURE__ */ jsx(LinkedDevicesModal, {
+			walletId: walletId ?? null,
+			isOpen: true,
+			presentation: "embedded",
+			onClose: backToMenu
+		}),
+		"scan-link-device": /* @__PURE__ */ jsx(QRCodeScanner, {
+			presentation: "embedded",
+			isOpen: true,
+			onQRCodeScanned: backToMenu,
+			onClose: backToMenu,
+			onError: deviceLinkingScannerParams?.onError,
+			onEvent: deviceLinkingScannerParams?.onEvent
+		})
+	};
+	if (presentation === "page" && loginState.isLoggedIn && walletId) return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(WalletSettingsLayout, {
 		walletId: toWalletId(walletId),
 		placement: seams.placement,
 		menuItems: MENU_ITEMS,
@@ -493,72 +549,36 @@ const AccountMenuButtonInner = ({ presentation, nearAccountId: nearAccountIdProp
 		onClose: setShowQRScanner.bind(null, false),
 		onError: closeSettingsScanner.bind(null, setShowQRScanner, setSettingsError)
 	})] });
-	return /* @__PURE__ */ jsxs("div", {
-		ref: refs.buttonRef,
-		className: `seams-profile-button-morphable ${isOpen ? "open" : "closed"}${className ? ` ${className}` : ""}`,
+	return /* @__PURE__ */ jsx(AccountMenuButtonView, {
+		buttonRef: refs.buttonRef,
+		dropdownRef: refs.dropdownRef,
+		className,
 		style,
-		"data-state": isOpen ? "open" : "closed",
-		children: [
-			/* @__PURE__ */ jsx(UserAccountButton, {
-				username: accountName,
-				hideUsername,
-				fullAccountId: walletId || void 0,
-				emailAddress: emailAddress || void 0,
-				isOpen,
-				onClick: handleToggle,
-				theme
-			}),
-			/* @__PURE__ */ jsx(ProfileDropdown, {
-				ref: refs.dropdownRef,
-				isOpen,
-				menuItems: MENU_ITEMS,
-				onLock: handleLock,
-				onClose: handleClose,
-				menuItemsRef: refs.menuItemsRef,
-				toggleColors,
-				currentConfirmConfig,
-				onSetUiMode: handleSetUiMode,
-				onToggleSkipClick: handleToggleSkipClick,
-				onSetDelay: handleSetDelay,
-				transactionSettingsOpen,
-				accountsRows,
-				accountsOpen,
-				exportKeysOpen,
-				exportLoadingChain,
-				canExportNearKey,
-				canExportEvmKeys,
-				onExportChain: startExportKeyFlow,
-				walletId,
-				nearAccountId,
-				theme,
-				highlightedMenuItemId
-			}),
-			canPortal && createPortal(/* @__PURE__ */ jsx(QRCodeScanner, {
-				isOpen: showQRScanner,
-				onQRCodeScanned: handleQrCodeScanned,
-				onError: (error) => {
-					deviceLinkingScannerParams?.onError?.(error);
-					setShowQRScanner(false);
-					handleClose();
-				},
-				onClose: () => {
-					deviceLinkingScannerParams?.onClose?.();
-					setShowQRScanner(false);
-					handleClose();
-				},
-				onEvent: (event) => deviceLinkingScannerParams?.onEvent?.(event)
-			}, "profile-qr-scanner"), portalHost),
-			canPortal && createPortal(/* @__PURE__ */ jsx(AuthenticationMethodsModal, {
-				walletId: walletId ?? null,
-				isOpen: showAuthenticationMethods,
-				onClose: () => setShowAuthenticationMethods(false)
-			}), portalHost),
-			canPortal && createPortal(/* @__PURE__ */ jsx(LinkedDevicesModal, {
-				walletId: walletId ?? null,
-				isOpen: showLinkedDevices,
-				onClose: () => setShowLinkedDevices(false)
-			}), portalHost)
-		]
+		trigger: {
+			label: loginState.isLoggedIn ? "Settings" : "Logged out",
+			username: accountName,
+			hideUsername,
+			fullAccountId: walletId || void 0,
+			emailAddress: emailAddress || void 0,
+			isOpen,
+			onClick: handleToggle,
+			theme
+		},
+		dropdown: {
+			isOpen,
+			menuItems: MENU_ITEMS,
+			onLock: handleLock,
+			onClose: handleClose,
+			menuItemsRef: refs.menuItemsRef,
+			toggleColors,
+			theme,
+			highlightedMenuItemId
+		},
+		children: screen === "overview" ? null : /* @__PURE__ */ jsxs(Fragment, { children: [screens[screen], settingsError ? /* @__PURE__ */ jsx("p", {
+			className: "seams-account-error",
+			role: "alert",
+			children: settingsError
+		}) : null] })
 	});
 };
 const AccountMenuButton = (props) => {
@@ -601,6 +621,6 @@ function WalletSettingsPage(props) {
 	});
 }
 //#endregion
-export { AccountMenuButton, ProfileSettingsButton, WalletSettingsPage };
+export { AccountMenuButton, AccountMenuButtonMock, ProfileSettingsButton, WalletSettingsPage };
 
 //# sourceMappingURL=index.js.map

package/dist/esm/react/components/QRCodeScanner.js

@@ -4,6 +4,8 @@ import { useSeams } from "../context/index.js";
 import { Theme, useTheme } from "./theme/ThemeProvider.js";
 import { useDeviceLinking } from "../hooks/useDeviceLinking.js";
 import { QRScanMode, useQRCamera } from "../hooks/useQRCamera.js";
+import { AccountMenuScreen } from "./AccountMenuButton/AccountMenuScreen.js";
+import { QRCodeScannerCamera } from "./QRCodeScannerCamera.js";
 import React, { useCallback, useEffect, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/react/components/QRCodeScanner.tsx
@@ -26,7 +28,22 @@ function restorableFocusElement() {
 	if (activeElement.closest("[aria-hidden=\"true\"]")) return null;
 	return activeElement;
 }
-const QRCodeScanner = ({ onQRCodeScanned, onError, onClose, onEvent, isOpen = true, cameraId, className, style, showCamera = true }) => {
+function ScannerFrame({ presentation, onClose, theme, tokens, children }) {
+	if (presentation === "embedded") return /* @__PURE__ */ jsxs(AccountMenuScreen, {
+		title: "Link a device",
+		onBack: onClose,
+		children: [/* @__PURE__ */ jsx("p", {
+			className: "seams-account-description",
+			children: "Open your wallet on the other device, then scan its pairing code."
+		}), children]
+	});
+	return /* @__PURE__ */ jsx(Theme, {
+		theme,
+		tokens,
+		children
+	});
+}
+const QRCodeScanner = ({ onQRCodeScanned, onError, onClose, onEvent, isOpen = true, cameraId, className, style, showCamera = true, presentation = "modal" }) => {
 	const { theme, tokens } = useTheme();
 	const { cancelLinking } = useSeams();
 	const scopedTokens = React.useMemo(() => theme === "dark" ? { dark: tokens } : { light: tokens }, [theme, tokens]);
@@ -176,7 +193,7 @@ const QRCodeScanner = ({ onQRCodeScanned, onError, onClose, onEvent, isOpen = tr
 		focusIntentRef.current = null;
 		switch (intent) {
 			case "scanner":
-				focusElement(closeButtonRef.current);
+				if (presentation === "modal") focusElement(closeButtonRef.current);
 				break;
 			case "email":
 				focusFirstElement(scannerPanelRef.current);
@@ -193,7 +210,8 @@ const QRCodeScanner = ({ onQRCodeScanned, onError, onClose, onEvent, isOpen = tr
 		emailOtpSelection?.kind,
 		isOpen,
 		qrCamera.error,
-		scannerState.kind
+		scannerState.kind,
+		presentation
 	]);
 	useEffect(() => {
 		return () => {
@@ -206,6 +224,8 @@ const QRCodeScanner = ({ onQRCodeScanned, onError, onClose, onEvent, isOpen = tr
 		cancellationRequestedRef.current = true;
 		cancelLinking().catch(() => void 0);
 	}, [cancelLinking, scannerState.kind]);
+	const cancelActiveLinkRef = useRef(cancelActiveLink);
+	cancelActiveLinkRef.current = cancelActiveLink;
 	const handleClose = useCallback(() => {
 		stopScanning();
 		cancelActiveLink();
@@ -244,15 +264,19 @@ const QRCodeScanner = ({ onQRCodeScanned, onError, onClose, onEvent, isOpen = tr
 	const handleBackdropClick = useCallback((event) => {
 		event.stopPropagation();
 		stopPropagationNative(event);
-		if (event.target === event.currentTarget) handleClose();
-	}, [handleClose, stopPropagationNative]);
+		if (presentation === "modal" && event.target === event.currentTarget) handleClose();
+	}, [
+		handleClose,
+		stopPropagationNative,
+		presentation
+	]);
 	const stopEventPropagation = useCallback((event) => {
 		event.stopPropagation();
 		stopPropagationNative(event);
 	}, [stopPropagationNative]);
 	const isFocusTrapActive = scannerState.kind === "scanning" || emailOtpSelection !== null || qrCamera.error !== null;
 	const handleModalKeyDown = useCallback((event) => {
-		if (event.key !== "Tab" || !isFocusTrapActive) return;
+		if (presentation === "embedded" || event.key !== "Tab" || !isFocusTrapActive) return;
 		const elements = focusableElements(event.currentTarget);
 		if (elements.length === 0) {
 			event.preventDefault();
@@ -268,11 +292,12 @@ const QRCodeScanner = ({ onQRCodeScanned, onError, onClose, onEvent, isOpen = tr
 			event.preventDefault();
 			focusElement(elements[0]);
 		}
-	}, [isFocusTrapActive]);
+	}, [isFocusTrapActive, presentation]);
 	useEffect(() => {
 		return () => {
 			rejectPendingEmailOtpSelection(/* @__PURE__ */ new Error("Device linking was cancelled"));
 			stopScanning();
+			cancelActiveLinkRef.current();
 		};
 	}, [rejectPendingEmailOtpSelection, stopScanning]);
 	useEffect(() => {
@@ -285,7 +310,7 @@ const QRCodeScanner = ({ onQRCodeScanned, onError, onClose, onEvent, isOpen = tr
 	]);
 	useEffect(() => {
 		const handleKeyDown = (event) => {
-			if (event.key === "Escape" && isOpen) handleClose();
+			if (event.key === "Escape" && isOpen && !event.defaultPrevented) handleClose();
 		};
 		if (isOpen) document.addEventListener("keydown", handleKeyDown);
 		return () => {
@@ -293,14 +318,17 @@ const QRCodeScanner = ({ onQRCodeScanned, onError, onClose, onEvent, isOpen = tr
 		};
 	}, [isOpen, handleClose]);
 	if (!isOpen) return null;
-	if (qrCamera.error) return /* @__PURE__ */ jsx(Theme, {
+	if (qrCamera.error) return /* @__PURE__ */ jsx(ScannerFrame, {
+		presentation,
+		onClose: handleClose,
 		theme,
 		tokens: scopedTokens,
 		children: /* @__PURE__ */ jsx("div", {
 			className: `qr-scanner-modal qr-scanner-modal--error ${className || ""}`,
+			"data-presentation": presentation,
 			style,
-			role: "dialog",
-			"aria-modal": "true",
+			role: presentation === "modal" ? "dialog" : "region",
+			"aria-modal": presentation === "modal" ? true : void 0,
 			"aria-labelledby": "qr-scanner-error-title",
 			onKeyDown: handleModalKeyDown,
 			onClick: handleBackdropClick,
@@ -334,14 +362,17 @@ const QRCodeScanner = ({ onQRCodeScanned, onError, onClose, onEvent, isOpen = tr
 			})
 		})
 	});
-	if (emailOtpSelection) return /* @__PURE__ */ jsx(Theme, {
+	if (emailOtpSelection) return /* @__PURE__ */ jsx(ScannerFrame, {
+		presentation,
+		onClose: handleClose,
 		theme,
 		tokens: scopedTokens,
 		children: /* @__PURE__ */ jsxs("div", {
 			className: `qr-scanner-modal ${className || ""}`,
+			"data-presentation": presentation,
 			style,
-			role: "dialog",
-			"aria-modal": "true",
+			role: presentation === "modal" ? "dialog" : "region",
+			"aria-modal": presentation === "modal" ? true : void 0,
 			"aria-labelledby": "qr-scanner-email-selection-title",
 			onKeyDown: handleModalKeyDown,
 			onClick: handleBackdropClick,
@@ -410,14 +441,17 @@ const QRCodeScanner = ({ onQRCodeScanned, onError, onClose, onEvent, isOpen = tr
 			})]
 		})
 	});
-	return /* @__PURE__ */ jsx(Theme, {
+	return /* @__PURE__ */ jsx(ScannerFrame, {
+		presentation,
+		onClose: handleClose,
 		theme,
 		tokens: scopedTokens,
 		children: /* @__PURE__ */ jsxs("div", {
 			className: `qr-scanner-modal${scannerState.kind === "linking" ? " qr-scanner-modal--linking" : ""} ${className || ""}`,
+			"data-presentation": presentation,
 			style,
-			role: isFocusTrapActive ? "dialog" : "region",
-			"aria-modal": isFocusTrapActive ? true : void 0,
+			role: presentation === "modal" && isFocusTrapActive ? "dialog" : "region",
+			"aria-modal": presentation === "modal" && isFocusTrapActive ? true : void 0,
 			"aria-labelledby": "qr-scanner-title",
 			onKeyDown: handleModalKeyDown,
 			onClick: handleBackdropClick,
@@ -502,29 +536,19 @@ const QRCodeScanner = ({ onQRCodeScanned, onError, onClose, onEvent, isOpen = tr
 				}) : showCamera && (qrCamera.scanMode === QRScanMode.CAMERA || qrCamera.scanMode === QRScanMode.AUTO) && /* @__PURE__ */ jsxs("div", {
 					className: "qr-scanner-camera-section",
 					children: [
-						/* @__PURE__ */ jsxs("div", {
-							className: "qr-scanner-camera-container",
-							children: [
-								/* @__PURE__ */ jsx("video", {
-									ref: qrCamera.videoRef,
-									className: `qr-scanner-video${isVideoReady ? " is-ready" : ""}`,
-									style: { transform: qrCamera.isFrontCamera ? "scaleX(-1)" : "none" },
-									playsInline: true,
-									autoPlay: true,
-									muted: true,
-									onCanPlay: () => setIsVideoReady(true),
-									onLoadedData: () => setIsVideoReady(true)
-								}),
-								/* @__PURE__ */ jsx("canvas", {
-									ref: qrCamera.canvasRef,
-									className: "qr-scanner-canvas"
-								}),
-								/* @__PURE__ */ jsx("div", {
-									className: "qr-scanner-overlay",
-									children: /* @__PURE__ */ jsx("div", { className: "qr-scanner-box" })
-								})
-							]
-						}),
+						/* @__PURE__ */ jsxs(QRCodeScannerCamera, { children: [/* @__PURE__ */ jsx("video", {
+							ref: qrCamera.videoRef,
+							className: `qr-scanner-video${isVideoReady ? " is-ready" : ""}`,
+							style: { transform: qrCamera.isFrontCamera ? "scaleX(-1)" : "none" },
+							playsInline: true,
+							autoPlay: true,
+							muted: true,
+							onCanPlay: () => setIsVideoReady(true),
+							onLoadedData: () => setIsVideoReady(true)
+						}), /* @__PURE__ */ jsx("canvas", {
+							ref: qrCamera.canvasRef,
+							className: "qr-scanner-canvas"
+						})] }),
 						/* @__PURE__ */ jsxs("div", {
 							className: "qr-scanner-instructions",
 							children: [/* @__PURE__ */ jsx("p", { children: "Position the QR code within the frame" }), qrCamera.isScanning && /* @__PURE__ */ jsx("p", {

package/dist/esm/react/components/QRCodeScannerCamera.js

@@ -0,0 +1,16 @@
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/react/components/QRCodeScannerCamera.tsx
+function QRCodeScannerCamera({ children }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "qr-scanner-camera-container",
+		children: [children, /* @__PURE__ */ jsx("div", {
+			className: "qr-scanner-overlay",
+			children: /* @__PURE__ */ jsx("div", { className: "qr-scanner-box" })
+		})]
+	});
+}
+//#endregion
+export { QRCodeScannerCamera };
+
+//# sourceMappingURL=QRCodeScannerCamera.js.map

package/dist/esm/react/components/ShowQRCode.js

@@ -4,7 +4,7 @@ import { isLinkedDeviceTargetEmailAddressV1, normalizeLinkedDeviceTargetEmailAdd
 import { useSeams } from "../context/index.js";
 import FingerprintIcon from "./FingerprintIcon.js";
 import { useCallback, useEffect, useRef, useState } from "react";
-import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import "./ShowQRCode.css";
 //#region src/react/components/ShowQRCode.tsx
 const DEFAULT_TARGET_FACTOR = { kind: "passkey_prf" };
@@ -709,7 +709,7 @@ function EmailOtpActivation({ activation, onError }) {
 						role: "alert",
 						children: state.message
 					}),
-					state.kind === "unavailable" && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("p", {
+					state.kind === "unavailable" && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("p", {
 						className: "seams-otp-error",
 						role: "alert",
 						children: state.message

package/dist/esm/react/externalEvm.js

@@ -1,5 +1,5 @@
 import { Component, useEffect, useSyncExternalStore } from "react";
-import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/react/externalEvm.tsx
 /** Subscribe to a host-owned controller and mount its browser discovery lifecycle. */
 function useExternalEvm(controller) {
@@ -82,7 +82,7 @@ var WalletPicker = class extends Component {
 					})]
 				}),
 				wallets.length === 0 && /* @__PURE__ */ jsx("p", { children: "Install MetaMask, Rabby, or Phantom, then reload this page." }),
-				connection.kind === "connected" && /* @__PURE__ */ jsxs(Fragment$1, { children: [
+				connection.kind === "connected" && /* @__PURE__ */ jsxs(Fragment, { children: [
 					/* @__PURE__ */ jsxs("p", { children: ["Connected to ", connection.wallet.name] }),
 					/* @__PURE__ */ jsxs("label", { children: [
 						"Account",

package/dist/esm/react/index.js

@@ -28,9 +28,10 @@ import SunIcon from "./components/AccountMenuButton/icons/SunIcon.js";
 import MoonIcon from "./components/AccountMenuButton/icons/MoonIcon.js";
 import { SeamsAuthMenuMock } from "./components/HostedSeamsAuthMenu/SeamsAuthMenuMock.js";
 import HostedSeamsAuthMenu from "./components/HostedSeamsAuthMenu/shell.js";
+import { AccountMenuButtonMock } from "./components/AccountMenuButton/AccountMenuButtonMock.js";
 import { AccountMenuButton, ProfileSettingsButton, WalletSettingsPage } from "./components/AccountMenuButton/index.js";
 import { ShowQRCode } from "./components/ShowQRCode.js";
 import { VoiceAssistantCard } from "./components/VoiceAssistantCard.js";
 import QRCodeIcon from "./components/QRCodeIcon.js";
 import { VoiceBeam } from "voice-glow";
-export { AccountMenuButton, AccountSyncEventPhase, ActionType, DARK_TOKENS, ExternalEvmController, ExternalEvmWalletPicker, HostedSeamsAuthMenu, KeyExportEventPhase, LIGHT_TOKENS, LinkDeviceEventPhase, MoonIcon, PASSKEY_MANAGER_DEFAULT_CONFIGS, PROFILE_MENU_ITEM_IDS, ProfileSettingsButton, QRCodeIcon, QRCodeScanner, QRScanMode, RegistrationEventPhase, SHAPE_PRESETS, SHAPE_ROUNDED, SHAPE_SQUARE, SeamsAuthMenuMock, SeamsContextProvider, SeamsWeb, SeamsWebProvider, ShowQRCode, SigningEventPhase, SunIcon, Theme, TouchIcon, TransactionReviewError, TransactionReviewHost, TxExecutionStatus, UnlockEventPhase, VoiceAssistantCard, VoiceBeam, WALLET_FLOW_EVENT_MESSAGES, WALLET_FLOW_EVENT_STEPS, WALLET_FLOW_EVENT_VERSION, WalletSettingsPage, addKey, configuredThresholdEcdsaChainTargets, createAccount, createAccountSyncFlowEvent, createKeyExportFlowEvent, createLinkDeviceFlowEvent, createRegistrationFlowEvent, createSigningFlowEvent, createUnlockFlowEvent, createWalletFlowEvent, defineSeamsConfig, deleteAccount, deleteKey, deployContract, functionCall, isWalletFlowEvent, logWalletEvents, nearAccountRefFromAccountId, seamsTestnetConfig, stake, thresholdEcdsaChainTargetFromChainFamily, thresholdEcdsaChainTargetFromConfig, thresholdEcdsaChainTargetFromConfiguredRequest, thresholdEcdsaChainTargetFromRequest, thresholdEcdsaChainTargetKey, thresholdEcdsaChainTargetsEqual, toWalletId, transfer, useAccountInput, useDeviceLinking, useExternalEvm, useNearClient, useQRCamera, useSeams, useTheme, useWallet, useWalletAuth, useWalletDevices, walletIdFromWalletProfile, walletSessionRefFromSession };
+export { AccountMenuButton, AccountMenuButtonMock, AccountSyncEventPhase, ActionType, DARK_TOKENS, ExternalEvmController, ExternalEvmWalletPicker, HostedSeamsAuthMenu, KeyExportEventPhase, LIGHT_TOKENS, LinkDeviceEventPhase, MoonIcon, PASSKEY_MANAGER_DEFAULT_CONFIGS, PROFILE_MENU_ITEM_IDS, ProfileSettingsButton, QRCodeIcon, QRCodeScanner, QRScanMode, RegistrationEventPhase, SHAPE_PRESETS, SHAPE_ROUNDED, SHAPE_SQUARE, SeamsAuthMenuMock, SeamsContextProvider, SeamsWeb, SeamsWebProvider, ShowQRCode, SigningEventPhase, SunIcon, Theme, TouchIcon, TransactionReviewError, TransactionReviewHost, TxExecutionStatus, UnlockEventPhase, VoiceAssistantCard, VoiceBeam, WALLET_FLOW_EVENT_MESSAGES, WALLET_FLOW_EVENT_STEPS, WALLET_FLOW_EVENT_VERSION, WalletSettingsPage, addKey, configuredThresholdEcdsaChainTargets, createAccount, createAccountSyncFlowEvent, createKeyExportFlowEvent, createLinkDeviceFlowEvent, createRegistrationFlowEvent, createSigningFlowEvent, createUnlockFlowEvent, createWalletFlowEvent, defineSeamsConfig, deleteAccount, deleteKey, deployContract, functionCall, isWalletFlowEvent, logWalletEvents, nearAccountRefFromAccountId, seamsTestnetConfig, stake, thresholdEcdsaChainTargetFromChainFamily, thresholdEcdsaChainTargetFromConfig, thresholdEcdsaChainTargetFromConfiguredRequest, thresholdEcdsaChainTargetFromRequest, thresholdEcdsaChainTargetKey, thresholdEcdsaChainTargetsEqual, toWalletId, transfer, useAccountInput, useDeviceLinking, useExternalEvm, useNearClient, useQRCamera, useSeams, useTheme, useWallet, useWalletAuth, useWalletDevices, walletIdFromWalletProfile, walletSessionRefFromSession };