@seams/wallet 0.24.0 → 0.26.0

package/dist/.build-inputs.sha256

@@ -1 +1 @@
-38c19246cd5acc02e57e45911a5253334b78a73aaa366ecd41df1567e6164171
+5e18387096278925c5c1f4c69f379b59f0eab2e662d419fe575bee269eb216df

package/dist/esm/SeamsWeb/operations/tempo/executeEvmFamilyTransaction.js

@@ -355,6 +355,7 @@ async function executeEvmFamilyTransactionLifecycle(args) {
 			request,
 			chainTarget: args.input.chainTarget,
 			options: args.input.options ? {
+				...args.input.options.voiceId !== void 0 ? { voiceId: args.input.options.voiceId } : {},
 				...args.input.options.confirmationConfig ? { confirmationConfig: args.input.options.confirmationConfig } : {},
 				...args.input.options.shouldAbort ? { shouldAbort: args.input.options.shouldAbort } : {},
 				...onEvent ? { onEvent: forwardSigningEvent } : {}

package/dist/esm/SeamsWeb/walletIframe/client/evmFamilyCommands.js

@@ -29,6 +29,7 @@ var ApplicationEvmFamilyCommands = class {
 				request: args.request,
 				chainTarget,
 				options: {
+					voiceId: args.options?.voiceId,
 					confirmationConfig: args.options?.confirmationConfig,
 					onEvent: args.options?.onEvent
 				}

package/dist/esm/SeamsWeb/walletIframe/client/overlay/overlay-styles.js

@@ -25,8 +25,9 @@ const CLASS_HAS_GEOMETRY = "has-geometry";
 const CLASS_RESIZE_ANIMATED = "is-resize-animated";
 const CLASS_REVEAL_PENDING = "is-reveal-pending";
 const DIALOG_ID_PREFIX = "seams-wallet-overlay-dialog-";
+const DIALOG_SELECTOR = `dialog[data-seams-root].${CLASS_BASE}.${CLASS_DIALOG}`;
 const BASE_CSS = `
-  .seams-transaction-review-slot {
+  [data-seams-root].${CLASS_DIALOG} .seams-transaction-review-slot {
     position: absolute;
     inset: 0;
     overflow: auto;
@@ -35,15 +36,37 @@ const BASE_CSS = `
     box-sizing: border-box;
     color: var(--seams-colors-textPrimary);
   }
-  .seams-transaction-review-slot[hidden] { display: none; }
-  .seams-transaction-review-slot::-webkit-scrollbar { display: none; }
-  .seams-review-wallet-inactive { opacity: 0; pointer-events: none; }
-  .seams-transaction-review-content { padding: 0.75rem; box-sizing: border-box; overflow-wrap: anywhere; }
-  .seams-transaction-review-content button { font: inherit; }
-  dialog.${CLASS_DIALOG}[data-transaction-review]::backdrop { background: rgb(0 0 0 / 0.26); }
-  .seams-transaction-review-content h2 { margin-top: 0; }
+  [data-seams-root].${CLASS_DIALOG} .seams-transaction-review-slot[hidden] { display: none; }
+  [data-seams-root].${CLASS_DIALOG} .seams-transaction-review-slot::-webkit-scrollbar { display: none; }
+  [data-seams-root].${CLASS_DIALOG} .seams-review-wallet-inactive { opacity: 0; pointer-events: none; }
+  [data-seams-root].${CLASS_DIALOG} .seams-transaction-review-content { padding: 0.75rem; box-sizing: border-box; overflow-wrap: anywhere; }
+  ${DIALOG_SELECTOR}[data-transaction-review]::backdrop { background: rgb(0 0 0 / 0.26); }
+  [data-seams-root].${CLASS_DIALOG} .seams-transaction-review-title {
+    margin: 0 0 16px;
+    font: 600 20px / 1.3 system-ui, sans-serif;
+    color: inherit;
+  }
+  [data-seams-root].${CLASS_DIALOG} button.seams-transaction-review-action {
+    box-sizing: border-box;
+    display: inline-block;
+    width: auto;
+    height: auto;
+    min-width: 0;
+    min-height: 44px;
+    margin: 0;
+    padding: 10px 16px;
+    border: 1px solid var(--seams-colors-borderPrimary);
+    border-radius: var(--seams-shape-control, 10px);
+    background: var(--seams-colors-colorBackground);
+    color: inherit;
+    font: 500 14px / 1.5 system-ui, sans-serif;
+    letter-spacing: normal;
+    text-transform: none;
+    box-shadow: none;
+    cursor: pointer;
+  }
 
-  dialog.${CLASS_DIALOG} {
+  ${DIALOG_SELECTOR} {
     position: fixed;
     display: block;
     inset: auto;
@@ -55,10 +78,14 @@ const BASE_CSS = `
     padding: 0;
     border: 0;
     overflow: visible;
+    min-width: 0;
+    min-height: 0;
     max-width: none;
     max-height: none;
     background: transparent;
     color-scheme: normal;
+    border-radius: 0;
+    box-shadow: none;
     box-sizing: border-box;
     --seams-wallet-overlay-safe-top: env(safe-area-inset-top, 0px);
     --seams-wallet-overlay-safe-right: env(safe-area-inset-right, 0px);
@@ -71,7 +98,7 @@ const BASE_CSS = `
      Any surface that reaches the DOM before (or without) a measured rect gets
      centred with the standard elevation instead of stranded in the corner.
      Scoped to :not(.has-geometry) so a positioned surface is untouched. */
-  dialog.${CLASS_DIALOG}:not(.${CLASS_HAS_GEOMETRY}) {
+  ${DIALOG_SELECTOR}:not(.${CLASS_HAS_GEOMETRY}) {
     top: 50%;
     left: 50%;
     translate: -50% -50%;
@@ -79,12 +106,12 @@ const BASE_CSS = `
       drop-shadow(0 12px 24px rgb(0 0 0 / 0.22))
       drop-shadow(0 2px 8px rgb(0 0 0 / 0.12));
   }
-  dialog.${CLASS_DIALOG}:not([open]),
-  dialog.${CLASS_DIALOG}.${CLASS_HIDDEN} {
+  ${DIALOG_SELECTOR}:not([open]),
+  ${DIALOG_SELECTOR}.${CLASS_HIDDEN} {
     visibility: hidden;
     pointer-events: none;
   }
-  dialog.${CLASS_DIALOG}.${CLASS_DRAWER}::backdrop {
+  ${DIALOG_SELECTOR}.${CLASS_DRAWER}::backdrop {
     background: transparent;
   }
   @keyframes seams-wallet-overlay-backdrop-in {
@@ -95,42 +122,42 @@ const BASE_CSS = `
       background: rgb(0 0 0 / 0.26);
     }
   }
-  dialog.${CLASS_DIALOG}.${CLASS_MODAL}::backdrop {
+  ${DIALOG_SELECTOR}.${CLASS_MODAL}::backdrop {
     background: transparent;
   }
-  dialog.${CLASS_DIALOG}.${CLASS_MODAL}:not(.${CLASS_PROVISIONAL}):not(.${CLASS_FALLBACK}):not(.${CLASS_AUTH_MENU}):not(.${CLASS_REVEAL_PENDING})::backdrop {
+  ${DIALOG_SELECTOR}.${CLASS_MODAL}:not(.${CLASS_PROVISIONAL}):not(.${CLASS_FALLBACK}):not(.${CLASS_AUTH_MENU}):not(.${CLASS_REVEAL_PENDING})::backdrop {
     background: rgb(0 0 0 / 0.26);
     animation: seams-wallet-overlay-backdrop-in 180ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
   }
   /* The host owns the modal frame. Keep the focused dialog and iframe from
      adding a user-agent outline around the rounded card. */
-  dialog.${CLASS_DIALOG}.${CLASS_MODAL},
-  dialog.${CLASS_DIALOG}.${CLASS_MODAL}:focus,
-  dialog.${CLASS_DIALOG}.${CLASS_MODAL}:focus-visible,
-  dialog.${CLASS_DIALOG}.${CLASS_MODAL} iframe.${CLASS_IFRAME},
-  dialog.${CLASS_DIALOG}.${CLASS_MODAL} iframe.${CLASS_IFRAME}:focus,
-  dialog.${CLASS_DIALOG}.${CLASS_MODAL} iframe.${CLASS_IFRAME}:focus-visible {
+  ${DIALOG_SELECTOR}.${CLASS_MODAL},
+  ${DIALOG_SELECTOR}.${CLASS_MODAL}:focus,
+  ${DIALOG_SELECTOR}.${CLASS_MODAL}:focus-visible,
+  ${DIALOG_SELECTOR}.${CLASS_MODAL} iframe.${CLASS_IFRAME},
+  ${DIALOG_SELECTOR}.${CLASS_MODAL} iframe.${CLASS_IFRAME}:focus,
+  ${DIALOG_SELECTOR}.${CLASS_MODAL} iframe.${CLASS_IFRAME}:focus-visible {
     outline: none;
   }
-  dialog.${CLASS_DIALOG}.${CLASS_MODAL} {
+  ${DIALOG_SELECTOR}.${CLASS_MODAL} {
     transform-origin: top left;
   }
   /* Reviewed transactions keep one opaque shell while their interiors cross-fade. */
-  dialog.${CLASS_DIALOG}.${CLASS_MODAL}[data-transaction-review] {
+  ${DIALOG_SELECTOR}.${CLASS_MODAL}[data-transaction-review] {
     overflow: hidden;
     background: var(--seams-colors-colorBackground);
     border-radius: min(var(--seams-shape-card, 16px), 2rem);
     box-shadow: 0 12px 24px rgb(0 0 0 / 0.22), 0 2px 8px rgb(0 0 0 / 0.12),
       inset 0 0 0 1px var(--seams-colors-borderPrimary);
   }
-  dialog.${CLASS_DIALOG}.${CLASS_MODAL}[data-transaction-review] iframe.${CLASS_IFRAME} {
+  ${DIALOG_SELECTOR}.${CLASS_MODAL}[data-transaction-review] iframe.${CLASS_IFRAME} {
     filter: none;
   }
   /* The iframe clips the child's box shadow at its layout edge. Paint the
      compact modal elevation in the host compositor so it can extend beyond
      that edge without changing the measured hit region. */
-  dialog.${CLASS_DIALOG}.${CLASS_MODAL}:not(.${CLASS_PROVISIONAL}):not(.${CLASS_FALLBACK}):not(.${CLASS_AUTH_MENU}):not([data-transaction-review])
-    iframe.${CLASS_IFRAME} {
+  ${DIALOG_SELECTOR}.${CLASS_MODAL}:not(.${CLASS_PROVISIONAL}):not(.${CLASS_FALLBACK}):not(.${CLASS_AUTH_MENU}):not([data-transaction-review])
+    [data-seams-root].${CLASS_DIALOG} > iframe.${CLASS_IFRAME} {
     filter:
       drop-shadow(0 12px 24px rgb(0 0 0 / 0.22))
       drop-shadow(0 2px 8px rgb(0 0 0 / 0.12));
@@ -138,15 +165,15 @@ const BASE_CSS = `
   /* The auth-menu card paints no shadow of its own (wallet-ui.css) for the
      same clipping reason; give it the quieter card elevation here, where the
      drop-shadow hugs the card's silhouette and may extend past the iframe. */
-  dialog.${CLASS_DIALOG}.${CLASS_AUTH_MENU} iframe.${CLASS_IFRAME} {
+  ${DIALOG_SELECTOR}.${CLASS_AUTH_MENU} iframe.${CLASS_IFRAME} {
     filter:
       drop-shadow(0 1px 2px rgb(15 23 42 / 0.05))
       drop-shadow(0 10px 20px rgb(15 23 42 / 0.1));
   }
-  dialog.${CLASS_DIALOG}.${CLASS_PROVISIONAL}::backdrop {
+  ${DIALOG_SELECTOR}.${CLASS_PROVISIONAL}::backdrop {
     background: transparent;
   }
-  dialog.${CLASS_DIALOG}.${CLASS_FALLBACK}::backdrop {
+  ${DIALOG_SELECTOR}.${CLASS_FALLBACK}::backdrop {
     background: transparent;
   }
   /* The hosted auth menu is host-page furniture rather than an overlay: it is
@@ -164,12 +191,12 @@ const BASE_CSS = `
      MessagePort — so the dialog stays a body child and mirrors the host
      anchor's rect; --seams-wallet-inline-dialog-z is the host's hook for placing
      it within the page's own layering. */
-  dialog.${CLASS_DIALOG}.${CLASS_INLINE_DIALOG} {
+  ${DIALOG_SELECTOR}.${CLASS_INLINE_DIALOG} {
     position: absolute;
     z-index: var(--seams-wallet-inline-dialog-z, auto);
     transform-origin: top left;
   }
-  dialog.${CLASS_DIALOG}.${CLASS_INLINE_DIALOG}::backdrop {
+  ${DIALOG_SELECTOR}.${CLASS_INLINE_DIALOG}::backdrop {
     background: transparent;
   }
   /* The dialog must NOT animate its own resize. The auth-menu card inside the
@@ -180,7 +207,7 @@ const BASE_CSS = `
      each reported frame instantly makes the dialog track the card 1:1, so the
      card's own spring is the single motion, and the anchor height published
      from the same frames keeps the host centring in step. */
-  dialog.${CLASS_DIALOG}.${CLASS_INLINE_DIALOG}.${CLASS_RESIZE_ANIMATED} {
+  ${DIALOG_SELECTOR}.${CLASS_INLINE_DIALOG}.${CLASS_RESIZE_ANIMATED} {
     transition: none;
   }
   /* A provisional drawer already owns the full visual viewport. Modals,
@@ -195,7 +222,7 @@ const BASE_CSS = `
      visible. Playwright's bundled Chromium keeps rendering such frames, which
      is why no browser test noticed. An opacity:0 dialog is painted normally
      (the frame is not throttled), just fully transparent. */
-  dialog.${CLASS_DIALOG}.${CLASS_PROVISIONAL}.${CLASS_MODAL} {
+  ${DIALOG_SELECTOR}.${CLASS_PROVISIONAL}.${CLASS_MODAL} {
     opacity: 0;
     pointer-events: none;
   }
@@ -203,32 +230,38 @@ const BASE_CSS = `
      revealed. This prevents the native dialog's fallback position from ever
      reaching the screen while its dynamic geometry rule settles. Opacity for
      the same reason as above: the frame inside must keep rendering. */
-  dialog.${CLASS_DIALOG}.${CLASS_REVEAL_PENDING} {
+  ${DIALOG_SELECTOR}.${CLASS_REVEAL_PENDING} {
     opacity: 0;
     pointer-events: none;
   }
-  iframe.${CLASS_IFRAME} {
+  [data-seams-root].${CLASS_DIALOG} > iframe.${CLASS_IFRAME} {
     display: block;
     width: 100%;
     height: 100%;
+    min-width: 0;
+    min-height: 0;
+    max-width: none;
+    max-height: none;
     border: 0;
+    border-radius: 0;
+    box-shadow: none;
     margin: 0;
     padding: 0;
     background: transparent;
     background-color: transparent;
     box-sizing: border-box;
   }
-  iframe.${CLASS_IFRAME}.${CLASS_HIDDEN} {
+  [data-seams-root].${CLASS_DIALOG} > iframe.${CLASS_IFRAME}.${CLASS_HIDDEN} {
     width: 0;
     height: 0;
     opacity: 0;
     pointer-events: none;
   }
   @media (prefers-reduced-motion: reduce) {
-    dialog.${CLASS_DIALOG}.${CLASS_INLINE_DIALOG} {
+    ${DIALOG_SELECTOR}.${CLASS_INLINE_DIALOG} {
       transition: none;
     }
-    dialog.${CLASS_DIALOG}.${CLASS_MODAL}::backdrop {
+    ${DIALOG_SELECTOR}.${CLASS_MODAL}::backdrop {
       animation: none;
     }
   }
@@ -280,7 +313,8 @@ function ensureOverlayBase(el) {
 function ensureOverlayDialog(dialog) {
 	getStyleManager().ensureBase();
 	ensureDialogId(dialog);
-	dialog.classList.add(CLASS_DIALOG);
+	dialog.setAttribute("data-seams-root", "");
+	dialog.classList.add(CLASS_BASE, CLASS_DIALOG);
 }
 function setHidden(el) {
 	ensureOverlayBase(el);

package/dist/esm/SeamsWeb/walletIframe/client/router.js

@@ -2177,7 +2177,10 @@ var WalletIframeRouter = class {
 				walletSession: payload.walletSession,
 				request: payload.request,
 				chainTarget: payload.chainTarget,
-				options: payload.options ? { ...payload.options.confirmationConfig ? { confirmationConfig: payload.options.confirmationConfig } : {} } : void 0
+				options: payload.options ? {
+					...payload.options.voiceId !== void 0 ? { voiceId: payload.options.voiceId } : {},
+					...payload.options.confirmationConfig ? { confirmationConfig: payload.options.confirmationConfig } : {}
+				} : void 0
 			}),
 			options: { onProgress: this.wrapOnEvent(payload.options?.onEvent, isSigningFlowEvent) }
 		}, {
@@ -2470,6 +2473,7 @@ var WalletIframeRouter = class {
 		const { options } = payload;
 		const safeOptions = {
 			waitUntil: options.waitUntil,
+			...options.voiceId !== void 0 ? { voiceId: options.voiceId } : {},
 			confirmationConfig: options.confirmationConfig,
 			...typeof options.signerSlot === "number" ? { signerSlot: options.signerSlot } : {},
 			...options.confirmerText ? { confirmerText: options.confirmerText } : {}

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

@@ -1,3 +1,4 @@
+import "../../../../shared-ts/src/utils/errors.js";
 //#region src/SeamsWeb/walletIframe/host/auth-menu/domain.ts
 /** A wait on a prompt outside the menu shares one look: the ring, then the
 *  headline, then what to do in that prompt. */

package/dist/esm/core/indexedDB/seamsWalletDB/repositories.js

@@ -2651,6 +2651,13 @@ var SeamsWalletRepositories = class {
 		], "readwrite", this.replaceExactActiveWalletSessionFromStatusInTransaction.bind(this, input));
 	}
 	async replaceExactActiveWalletSessionFromStatusInTransaction(input, ctx) {
+		const current = await readExactActiveWalletSessionForScopeInTransaction({
+			ctx,
+			walletId: input.active.walletId,
+			authorityId: input.active.authorityId,
+			authMethodId: input.active.authMethodId
+		});
+		if (current.kind !== "found" || current.operationCredential.token !== input.operationCredential.token || current.operationCredential.walletSessionId !== input.operationCredential.walletSessionId) return { kind: "superseded" };
 		const authority = parseWalletAuthorityStorageRow(await ctx.store(SEAMS_WALLET_STORES.walletAuthorities).get(input.active.authorityId));
 		const selection = parseWalletSelectionStorageRow(await ctx.store(SEAMS_WALLET_STORES.walletSelections).get(input.active.walletId));
 		if (!authority || authority.record.state !== "active" || authority.record.walletId !== input.active.walletId || authority.record.authorityDigestB64u !== input.active.authorityDigestB64u || authority.record.revocationEpoch !== input.active.authorityRevocationEpoch || !selection || selection.record.lockState !== "unlocked" || selection.record.walletAuthMethodId !== input.active.authMethodId) return { kind: "superseded" };
@@ -4326,6 +4333,6 @@ var SeamsWalletRepositories = class {
 	}
 };
 //#endregion
-export { SeamsWalletRepositories, parseWalletAuthMethodV2StorageRow, parseWalletAuthorityStorageRow, parseWalletSelectionStorageRow };
+export { SeamsWalletRepositories, parseWalletAuthMethodV2StorageRow, parseWalletAuthorityStorageRow, parseWalletSelectionStorageRow, walletAuthorityStorageRow };
 
 //# sourceMappingURL=repositories.js.map

package/dist/esm/core/rpcClients/relayer/walletSessionAuthorizationStatus.js

@@ -122,6 +122,13 @@ var WalletSessionStatusReadScope = class WalletSessionStatusReadScope {
 			for (const key of [...sessions.keys()]) if (key.startsWith(credentialKey)) sessions.delete(key);
 		}
 	}
+	/** Recovery changes the authority projected by an existing session. */
+	invalidateCredential(token) {
+		const credentialKey = statusCredentialKey(token);
+		for (const reads of this.readsByFetch.values()) for (const key of reads.keys()) if (key.startsWith(credentialKey)) reads.delete(key);
+		this.suppliedStatus = { kind: "remote" };
+		WalletSessionStatusReadScope.forgetCredential(token);
+	}
 	static observationForConfirmation(options, identity) {
 		return observationsByFetch.get(options.fetchImpl ?? defaultStatusFetch)?.get(statusIdentityKey(options, identity)) ?? null;
 	}

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

@@ -8,7 +8,7 @@ import { SlidersIcon } from "./icons/SlidersIcon.js";
 import { RecoveryCodesIcon } from "./icons/RecoveryCodesIcon.js";
 import TouchIcon from "./icons/TouchIcon.js";
 import { AccountMenuButtonView } from "./AccountMenuButtonView.js";
-import { useProfileState } from "./hooks/useProfileState.js";
+import { profileOpenControl, useProfileState } from "./hooks/useProfileState.js";
 import { TransactionSettingsSection } from "./TransactionSettingsSection.js";
 import { AccountMenuMockScreens } from "./AccountMenuMockScreens.js";
 import { useEffect, useState } from "react";
@@ -55,18 +55,15 @@ function openPreview(setStatus, toggle) {
 function resetPreviewNavigation(isOpen, setScreen) {
 	if (!isOpen) setScreen({ kind: "overview" });
 }
-function AccountMenuPreview({ username = "Alex Chen", walletId = "alex.near", theme = "light", defaultOpen = true, className, style }) {
-	const [open, setOpen] = useState(defaultOpen);
+function AccountMenuPreview(props) {
+	const { username = "Alex Chen", walletId = "alex.near", theme = "light", defaultOpen = true, presentation = "dropdown", className, style } = props;
 	const [status, setStatus] = useState("ready");
 	const [screen, setScreen] = useState({ kind: "overview" });
 	const [confirmation, setConfirmation] = useState({
 		uiMode: "modal",
 		behavior: "requireClick"
 	});
-	const { refs, isOpen, handleToggle, handleClose } = useProfileState({
-		open,
-		onOpenChange: setOpen
-	});
+	const { refs, isOpen, handleToggle, handleClose } = useProfileState(presentation, profileOpenControl(props, defaultOpen));
 	useEffect(resetPreviewNavigation.bind(null, isOpen, setScreen), [isOpen]);
 	const menuItems = [
 		{
@@ -137,6 +134,7 @@ function AccountMenuPreview({ username = "Alex Chen", walletId = "alex.near", th
 		}
 	];
 	return /* @__PURE__ */ jsx(AccountMenuButtonView, {
+		presentation,
 		buttonRef: refs.buttonRef,
 		dropdownRef: refs.dropdownRef,
 		className,

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

@@ -4,6 +4,7 @@ import { WalletText, useWalletLocale } from "../../context/WalletLocale.js";
 import TouchIcon from "./icons/TouchIcon.js";
 import { UserAccountButton } from "./UserAccountButton.js";
 import { ProfileDropdown } from "./ProfileDropdown.js";
+import { AccountMenuModal } from "./AccountMenuModal.js";
 import { LockKeyholeIcon } from "./icons/LockKeyholeIcon.js";
 import { useLayoutEffect, useRef, useState } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
@@ -24,11 +25,18 @@ function observePanel(contentRef, isOpen, setHeight) {
 	observer.observe(content);
 	return observer.disconnect.bind(observer);
 }
-function closeWithEscape(onClose, event) {
+function closeWithEscape(presentation, onClose, event) {
 	if (event.key !== "Escape" || event.defaultPrevented) return;
 	event.preventDefault();
+	if (presentation === "modal") event.stopPropagation();
 	onClose();
 }
+function revealModalScreen(presentation, event) {
+	if (presentation !== "modal" || !(event.target instanceof HTMLElement)) return;
+	if (!event.target.matches(".seams-account-heading h2, .seams-account-identity")) return;
+	const dialog = event.currentTarget.closest("dialog.seams-account-modal");
+	if (dialog instanceof HTMLDialogElement) dialog.scrollTop = 0;
+}
 function restoreTriggerFocus(buttonRef, previousOpen, isOpen) {
 	if (previousOpen.current && !isOpen) buttonRef.current?.querySelector("[aria-expanded]")?.focus({ preventScroll: true });
 	previousOpen.current = isOpen;
@@ -38,7 +46,7 @@ function restoreOverviewFocus(buttonRef, previousScreen, hasScreen) {
 	previousScreen.current = hasScreen;
 }
 /** One shell for live account screens and the provider-free preview. */
-function AccountMenuButtonView({ buttonRef, dropdownRef, trigger, dropdown, className, style, children }) {
+function AccountMenuButtonView({ presentation, buttonRef, dropdownRef, trigger, dropdown, className, style, children }) {
 	const locale = useWalletLocale();
 	const contentRef = useRef(null);
 	const hasScreen = children !== null && children !== void 0;
@@ -47,8 +55,8 @@ function AccountMenuButtonView({ buttonRef, dropdownRef, trigger, dropdown, clas
 	const previousOpen = useRef(trigger.isOpen);
 	useLayoutEffect(restoreTriggerFocus.bind(null, buttonRef, previousOpen, trigger.isOpen), [buttonRef, trigger.isOpen]);
 	const [height, setHeight] = useState(null);
-	useLayoutEffect(observePanel.bind(null, contentRef, trigger.isOpen, setHeight), [trigger.isOpen]);
-	return /* @__PURE__ */ jsx("div", {
+	useLayoutEffect(observePanel.bind(null, contentRef, trigger.isOpen, setHeight), [trigger.isOpen, presentation]);
+	const panel = /* @__PURE__ */ jsx("div", {
 		ref: buttonRef,
 		className: `seams-profile-button-morphable ${trigger.isOpen ? "open" : "closed"} ${className ?? ""}`,
 		style: trigger.isOpen ? style : {
@@ -56,9 +64,10 @@ function AccountMenuButtonView({ buttonRef, dropdownRef, trigger, dropdown, clas
 			width: "fit-content"
 		},
 		"data-state": trigger.isOpen ? "open" : "closed",
+		onFocusCapture: revealModalScreen.bind(null, presentation),
 		children: trigger.isOpen ? /* @__PURE__ */ jsx("div", {
 			className: "seams-account-resize",
-			onKeyDown: closeWithEscape.bind(null, dropdown.onClose),
+			onKeyDown: closeWithEscape.bind(null, presentation, dropdown.onClose),
 			style: { height: height ?? void 0 },
 			children: /* @__PURE__ */ jsxs("div", {
 				ref: contentRef,
@@ -71,6 +80,7 @@ function AccountMenuButtonView({ buttonRef, dropdownRef, trigger, dropdown, clas
 							/* @__PURE__ */ jsx("span", { children: typeof window === "undefined" ? "" : window.location.host }),
 							/* @__PURE__ */ jsx("button", {
 								type: "button",
+								className: "seams-account-close",
 								"aria-label": walletText(locale, "Close wallet settings"),
 								onClick: dropdown.onClose,
 								children: /* @__PURE__ */ jsx("svg", {
@@ -121,6 +131,12 @@ function AccountMenuButtonView({ buttonRef, dropdownRef, trigger, dropdown, clas
 			})
 		}) : /* @__PURE__ */ jsx(UserAccountButton, { ...trigger })
 	});
+	if (presentation === "modal") return /* @__PURE__ */ jsx(AccountMenuModal, {
+		isOpen: trigger.isOpen,
+		onClose: dropdown.onClose,
+		children: panel
+	});
+	return panel;
 }
 //#endregion
 export { AccountMenuButtonView };

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

@@ -0,0 +1,66 @@
+import { walletText } from "../../../core/ui/messages.js";
+import { useWalletLocale } from "../../context/WalletLocale.js";
+import { Theme, useTheme } from "../theme/ThemeProvider.js";
+import { useLayoutEffect, useRef } from "react";
+import { createPortal } from "react-dom";
+import { jsx } from "react/jsx-runtime";
+//#region src/react/components/AccountMenuButton/AccountMenuModal.tsx
+function openDialog(ref) {
+	const dialog = ref.current;
+	if (!dialog) return;
+	dialog.showModal();
+	return dialog.close.bind(dialog);
+}
+function isBackdrop(event) {
+	if (event.target !== event.currentTarget) return false;
+	const bounds = event.currentTarget.getBoundingClientRect();
+	return event.clientX < bounds.left || event.clientX > bounds.right || event.clientY < bounds.top || event.clientY > bounds.bottom;
+}
+function rememberBackdrop(startedOutside, event) {
+	startedOutside.current = isBackdrop(event);
+}
+function closeBackdrop(startedOutside, onClose, event) {
+	const shouldClose = startedOutside.current && isBackdrop(event);
+	startedOutside.current = false;
+	if (!shouldClose) return;
+	event.stopPropagation();
+	onClose();
+}
+function cancelDialog(onClose, event) {
+	event.preventDefault();
+	event.stopPropagation();
+	onClose();
+}
+function SettingsDialog({ onClose, children }) {
+	const locale = useWalletLocale();
+	const ref = useRef(null);
+	const startedOutside = useRef(false);
+	useLayoutEffect(openDialog.bind(null, ref), []);
+	return /* @__PURE__ */ jsx("dialog", {
+		ref,
+		"data-seams-root": "",
+		className: "seams-account-modal",
+		"aria-label": walletText(locale, "Wallet settings"),
+		onCancel: cancelDialog.bind(null, onClose),
+		onPointerDown: rememberBackdrop.bind(null, startedOutside),
+		onClick: closeBackdrop.bind(null, startedOutside, onClose),
+		children
+	});
+}
+function AccountMenuModal({ isOpen, onClose, children }) {
+	const { theme, tokens } = useTheme();
+	if (!isOpen || typeof document === "undefined") return null;
+	return createPortal(/* @__PURE__ */ jsx(Theme, {
+		tag: "div",
+		theme,
+		tokens: { [theme]: tokens },
+		children: /* @__PURE__ */ jsx(SettingsDialog, {
+			onClose,
+			children
+		})
+	}), document.body);
+}
+//#endregion
+export { AccountMenuModal };
+
+//# sourceMappingURL=AccountMenuModal.js.map

package/dist/esm/react/components/AccountMenuButton/AccountsSection.css

@@ -1,6 +1,6 @@
 /* Expander (AccountsSection) — same grid-rows collapse mechanism as the
    Transaction Settings expander so the two sections open with one motion */
-.seams-dropdown-accounts-root {
+[data-seams-root].seams-theme-provider .seams-dropdown-accounts-root {
   background-color: var(--seams-expander-surface, var(--seams-colors-surface));
   transform-origin: top;
   display: grid;
@@ -8,19 +8,19 @@
   transition: grid-template-rows 200ms cubic-bezier(0.22, 1, 0.36, 1);
 }
 
-.seams-dropdown-accounts-root.is-expanded {
+[data-seams-root].seams-theme-provider .seams-dropdown-accounts-root.is-expanded {
   border-top: 1px solid var(--seams-colors-borderPrimary);
   border-bottom: 1px solid var(--seams-colors-borderPrimary);
   grid-template-rows: 1fr;
 }
 
-.seams-dropdown-accounts-clip {
+[data-seams-root].seams-theme-provider .seams-dropdown-accounts-clip {
   overflow: hidden;
   min-height: 0;
   min-width: 0;
 }
 
-.seams-dropdown-accounts-content {
+[data-seams-root].seams-theme-provider .seams-dropdown-accounts-content {
   display: flex;
   flex-direction: column;
   gap: 2px;
@@ -32,12 +32,14 @@
   transform: translateY(4px);
 }
 
-.seams-dropdown-accounts-root.is-expanded .seams-dropdown-accounts-content {
+[data-seams-root].seams-theme-provider
+  .seams-dropdown-accounts-root.is-expanded
+  .seams-dropdown-accounts-content {
   opacity: 1;
   transform: translateY(0);
 }
 
-.seams-accounts-row {
+[data-seams-root].seams-theme-provider a.seams-accounts-row {
   display: flex;
   align-items: center;
   gap: 10px;
@@ -48,7 +50,7 @@
   transition: background 150ms ease;
 }
 
-.seams-accounts-row:hover {
+[data-seams-root].seams-theme-provider a.seams-accounts-row:hover {
   /* a shade off the expander surface behind the rows, which is often surface2;
      mixing follows a theme's surface where a fixed surface step does not */
   background: color-mix(
@@ -58,7 +60,7 @@
   );
 }
 
-.seams-accounts-row-chain {
+[data-seams-root].seams-theme-provider .seams-accounts-row-chain {
   flex: 0 0 auto;
   min-width: 56px;
   font-size: 13px;
@@ -66,7 +68,7 @@
   color: var(--seams-colors-textPrimary);
 }
 
-.seams-accounts-row-address {
+[data-seams-root].seams-theme-provider .seams-accounts-row-address {
   flex: 1;
   min-width: 0;
   overflow: hidden;
@@ -77,11 +79,16 @@
   color: var(--seams-colors-textSecondary);
 }
 
-.seams-accounts-row-arrow {
+[data-seams-root].seams-theme-provider .seams-accounts-row-arrow {
   flex: 0 0 auto;
+  width: 14px;
+  height: 14px;
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 2;
   color: var(--seams-colors-textSecondary);
 }
 
-.seams-accounts-row:hover .seams-accounts-row-arrow {
+[data-seams-root].seams-theme-provider a.seams-accounts-row:hover .seams-accounts-row-arrow {
   color: var(--seams-colors-textPrimary);
 }

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

@@ -1,4 +1,5 @@
 import { WalletText } from "../../context/WalletLocale.js";
+import { lucideIconSvg } from "./icons/lucideIcon.js";
 import TouchIcon from "./icons/TouchIcon.js";
 import { HoverArrowIcon } from "./icons/HoverArrowIcon.js";
 import { MailIcon } from "./icons/MailIcon.js";
@@ -16,17 +17,10 @@ function methodIcon(kind) {
 			size: 20,
 			strokeWidth: 1.75
 		});
-		case "voiceid": return /* @__PURE__ */ jsx("svg", {
-			width: "20",
-			height: "20",
-			viewBox: "0 0 24 24",
-			fill: "none",
-			stroke: "currentColor",
-			strokeWidth: "1.75",
-			strokeLinecap: "round",
-			"aria-hidden": "true",
-			children: /* @__PURE__ */ jsx("path", { d: "M4 10v4m4-7v10m4-14v18m4-14v10m4-7v4" })
-		});
+		case "voiceid": return lucideIconSvg("voiceid", {
+			size: 20,
+			strokeWidth: 1.75
+		}, /* @__PURE__ */ jsx("path", { d: "M4 10v4m4-7v10m4-14v18m4-14v10m4-7v4" }));
 	}
 }
 function AuthenticationMethodRow({ kind, title, description, chip, icon, action, footer, onSelect, children }) {