@seams/wallet 0.26.0 → 0.28.0

package/dist/esm/core/signingEngine/uiConfirm/ui/confirm-surface-resize.js

@@ -299,7 +299,7 @@ function attachConfirmSurfaceResizeChoreographer(element, options = {}) {
 			current.moved = true;
 		} else current.framesSinceChange += 1;
 		const progress = clamp((viewportPx - current.originHostPx) / current.deltaCssPx, 0, 1);
-		if (progress >= 1) {
+		if (viewportPx === Math.round(current.originHostPx + current.deltaCssPx)) {
 			current.framesAtTarget += 1;
 			if (current.sawIntermediate || current.framesAtTarget >= LANDING_CONFIRM_FRAMES) {
 				settle();
@@ -310,7 +310,7 @@ function attachConfirmSurfaceResizeChoreographer(element, options = {}) {
 		}
 		if (current.framesAtTarget > 0) surfaceMotionDiagnostics.blipFrames += 1;
 		current.framesAtTarget = 0;
-		if (progress > 0) current.sawIntermediate = true;
+		if (progress > 0 && progress < 1) current.sawIntermediate = true;
 		current.driver.setProgress(progress);
 		const settledFrames = current.moved ? SETTLED_FRAMES_AFTER_MOTION : SETTLED_FRAMES_WITHOUT_MOTION;
 		if (current.framesSinceChange >= settledFrames) {

package/dist/esm/core/signingEngine/uiConfirm/ui/preact/ReviewDisclosure.js

@@ -69,8 +69,14 @@ var ReviewDisclosure = class extends Component {
 			return;
 		}
 		details.open = true;
+		const scrollArea = details.parentElement?.closest(".seams-review-technical > div");
+		if (scrollArea && scrollArea.scrollHeight > scrollArea.clientHeight) {
+			details.open = opening;
+			details.removeAttribute("data-closing");
+			return;
+		}
 		details.setAttribute("data-resizing", "");
-		const target = opening ? body.scrollHeight : 0;
+		const target = opening ? body.getBoundingClientRect().height : 0;
 		this.motion = {
 			kind: "hosted",
 			opening

package/dist/esm/core/signingEngine/uiConfirm/ui/preact/mountConfirmationSurface.js

@@ -1,6 +1,7 @@
 import { appearanceTokenCssRule } from "../appearance-token-vars.js";
 import { withWalletLocale } from "./WalletLocale.js";
 import { PadlockIcon } from "./PadlockIcon.js";
+import { CONFIRM_SURFACE_HEIGHT_DRIVEN_VAR, announceSurfaceResize } from "../confirm-surface-resize.js";
 import { confirmationDocumentStyles } from "./confirmation-styles.js";
 import { ConfirmationContent } from "./ConfirmationContent.js";
 import { ConfirmationModal } from "./ConfirmationModal.js";
@@ -40,11 +41,40 @@ function captureReceiptAnchors(surface) {
 			selector,
 			text: element.textContent,
 			bounds: element.getBoundingClientRect(),
-			fontSize: getComputedStyle(element).fontSize
+			fontSize: getComputedStyle(element).fontSize,
+			textGeometry: element.matches("[role=\"status\"]") ? receiptTextGeometry(element) : null
 		});
 	}
 	return anchors;
 }
+function receiptTextGeometry(element) {
+	const range = element.ownerDocument.createRange();
+	range.selectNodeContents(element);
+	return {
+		bounds: range.getBoundingClientRect(),
+		lineCount: range.getClientRects().length
+	};
+}
+function receiptAnchorTransform(anchor, element) {
+	const destination = element.getBoundingClientRect();
+	const fontScale = parseFloat(anchor.fontSize) / parseFloat(getComputedStyle(element).fontSize);
+	let scaleX = fontScale;
+	let scaleY = fontScale;
+	let left = anchor.bounds.left - destination.left;
+	let top = anchor.bounds.top - destination.top;
+	if (anchor.textGeometry) {
+		const text = receiptTextGeometry(element);
+		const source = anchor.textGeometry.bounds;
+		const target = text.bounds;
+		if (anchor.textGeometry.lineCount === text.lineCount && target.width > 0 && target.height > 0) {
+			scaleX = source.width / target.width;
+			scaleY = source.height / target.height;
+			left = source.left - destination.left - (target.left - destination.left) * scaleX;
+			top = source.top - destination.top - (target.top - destination.top) * scaleY;
+		}
+	}
+	return `translate(${left}px, ${top}px) scale(${scaleX}, ${scaleY})`;
+}
 /**
 * The progress segments a capture draws while it checks, as they look now, from
 * left to right whatever their drawing order. A line that has not split yet hands
@@ -87,7 +117,12 @@ var MountedConfirmationSurface = class {
 	receiptShell = null;
 	receiptGhost = null;
 	receiptSegments = [];
+	receiptResize = null;
 	clearReceiptMotion = () => {
+		this.element.querySelector(".seams-receipt-footer--hosted")?.classList.remove("seams-receipt-footer--hosted");
+		this.receiptResize?.element.classList.remove("seams-surface-height-driven");
+		this.receiptResize = null;
+		this.styles.deleteDynamicRule(`${this.element.id}-receipt-resize`);
 		for (const animation of this.receiptMotion) animation.cancel();
 		this.receiptMotion = [];
 		this.receiptShell?.remove();
@@ -147,20 +182,20 @@ var MountedConfirmationSurface = class {
 	}
 	showReceipt(model) {
 		if (this.state.kind !== "mounted" || this.state.model.content.kind !== "transaction") return;
-		const viewChanged = this.receipt?.view !== model.view;
+		const shouldMorph = this.receipt?.view !== model.view || this.receiptMotion.length > 0;
 		const previousShell = this.receiptShell ?? this.element.querySelector(".modal-container-root");
 		const previousBounds = previousShell?.getBoundingClientRect();
-		const anchors = viewChanged ? captureReceiptAnchors(this.element) : [];
-		const leaving = viewChanged ? this.liveCapture() : null;
+		const anchors = shouldMorph ? captureReceiptAnchors(this.element) : [];
+		const leaving = shouldMorph ? this.liveCapture() : null;
 		const previousRadius = previousShell ? getComputedStyle(previousShell).borderRadius : "26px";
-		if (viewChanged) this.clearReceiptMotion();
+		if (shouldMorph) this.clearReceiptMotion();
 		this.receipt = model;
 		this.element.dataset.receiptView = model.view;
 		this.element.dataset.seamsConfirmSurface = "wallet-iframe";
 		this.element.dataset.seamsConfirmVariant = "modal";
 		this.renderSurface();
 		const target = this.element.querySelector(".modal-container-root");
-		if (viewChanged && previousBounds && target && !window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
+		if (shouldMorph && previousBounds && target && !window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
 			const bounds = target.getBoundingClientRect();
 			const shell = this.element.ownerDocument.createElement("div");
 			shell.className = "seams-receipt-morph-shell";
@@ -168,7 +203,7 @@ var MountedConfirmationSurface = class {
 			this.element.appendChild(shell);
 			this.receiptShell = shell;
 			this.element.setAttribute("data-receipt-morphing", "");
-			this.receiptMotion = [shell.animate([{
+			const morph = shell.animate([{
 				left: `${previousBounds.left}px`,
 				top: `${previousBounds.top}px`,
 				width: `${previousBounds.width}px`,
@@ -184,17 +219,17 @@ var MountedConfirmationSurface = class {
 				duration: RECEIPT_MORPH_DURATION_MS,
 				easing: RECEIPT_MORPH_EASING,
 				fill: "both"
-			})];
+			});
+			this.receiptMotion = [morph];
+			const geometryAnimations = [morph];
 			const handedOver = leaving ? this.handOverCapture(leaving, target) : false;
 			const shared = /* @__PURE__ */ new Set();
 			for (const anchor of anchors) {
 				const element = target.querySelector(anchor.selector);
 				if (!element || element.textContent !== anchor.text) continue;
-				const destination = element.getBoundingClientRect();
 				shared.add(element);
-				const scale = parseFloat(anchor.fontSize) / parseFloat(getComputedStyle(element).fontSize);
-				this.receiptMotion.push(element.animate([{
-					transform: `translate(${anchor.bounds.left - destination.left}px, ${anchor.bounds.top - destination.top}px) scale(${scale})`,
+				const animation = element.animate([{
+					transform: receiptAnchorTransform(anchor, element),
 					transformOrigin: "top left"
 				}, {
 					transform: "translate(0, 0) scale(1)",
@@ -202,14 +237,17 @@ var MountedConfirmationSurface = class {
 				}], {
 					duration: RECEIPT_MORPH_DURATION_MS,
 					easing: RECEIPT_MORPH_EASING
-				}));
+				});
+				this.receiptMotion.push(animation);
+				geometryAnimations.push(animation);
 			}
 			const details = target.querySelectorAll(".seams-transaction-receipt > :not(.seams-receipt-heading), .seams-receipt-heading > .seams-receipt-symbol, .seams-receipt-heading h2, .seams-receipt-heading p, .seams-transaction-toast > :not(.seams-transaction-toast-text, .seams-toast-progress), .seams-transaction-toast-text > *");
 			let order = 0;
 			for (const detail of details) {
 				if (shared.has(detail)) continue;
 				const toolbar = leaving !== null && detail.matches(".seams-review-toolbar");
-				this.receiptMotion.push(detail.animate(toolbar ? [{ opacity: 0 }, { opacity: 1 }] : [{
+				const stationary = toolbar || detail.matches(".seams-receipt-footer");
+				this.receiptMotion.push(detail.animate(stationary ? [{ opacity: 0 }, { opacity: 1 }] : [{
 					opacity: 0,
 					transform: "translateY(8px)"
 				}, {
@@ -228,12 +266,83 @@ var MountedConfirmationSurface = class {
 				}));
 				if (!toolbar) order += 1;
 			}
+			this.resizeReceipt({
+				element: target,
+				animations: geometryAnimations,
+				fromHeight: previousBounds.height,
+				toHeight: bounds.height
+			});
 			const motion = this.receiptMotion;
 			Promise.all(motion.map((animation) => animation.finished)).then(() => {
 				if (this.receiptMotion === motion) this.clearReceiptMotion();
 			}, ignoreCancelledMotion);
 		}
 	}
+	resizeReceipt(resize) {
+		if (Math.abs(resize.toHeight - resize.fromHeight) < 1) return;
+		this.receiptResize = resize;
+		for (const animation of resize.animations) {
+			animation.pause();
+			animation.effect?.updateTiming({ easing: "linear" });
+		}
+		resize.element.classList.add("seams-surface-height-driven");
+		this.setReceiptHeight(resize, resize.fromHeight);
+		if (announceSurfaceResize(resize.element, {
+			reason: "receipt-transition",
+			fromCssPx: resize.fromHeight,
+			toCssPx: resize.toHeight,
+			setHeightCssPx: this.setReceiptHeight.bind(this, resize),
+			finish: this.finishReceiptResize.bind(this, resize)
+		})) {
+			this.fitReceiptToViewport(resize);
+			return;
+		}
+		this.receiptResize = null;
+		resize.element.classList.remove("seams-surface-height-driven");
+		this.styles.deleteDynamicRule(`${this.element.id}-receipt-resize`);
+		for (const animation of resize.animations) {
+			animation.effect?.updateTiming({ easing: RECEIPT_MORPH_EASING });
+			animation.play();
+		}
+	}
+	fitReceiptToViewport(resize) {
+		const footer = resize.element.querySelector(".seams-receipt-footer");
+		for (const animation of resize.animations) {
+			const effect = animation.effect;
+			if (!(effect instanceof KeyframeEffect)) continue;
+			if (effect.target === this.receiptShell) {
+				this.receiptShell?.classList.add("seams-receipt-morph-shell--hosted");
+				const frames = effect.getKeyframes();
+				for (const frame of frames) {
+					delete frame.height;
+					delete frame.width;
+				}
+				effect.setKeyframes(frames);
+			} else if (footer && effect.target === footer) {
+				const frames = effect.getKeyframes();
+				for (const frame of frames) delete frame.transform;
+				effect.setKeyframes(frames);
+			}
+		}
+		footer?.classList.add("seams-receipt-footer--hosted");
+	}
+	setReceiptHeight(resize, height) {
+		if (this.receiptResize !== resize) return;
+		this.styles.setDynamicDeclarations(`${this.element.id}-receipt-resize`, `#${resize.element.id}`, {
+			[CONFIRM_SURFACE_HEIGHT_DRIVEN_VAR]: `${height}px`,
+			"--seams-receipt-target-height": `${resize.toHeight}px`
+		});
+		const progress = (height - resize.fromHeight) / (resize.toHeight - resize.fromHeight);
+		for (const animation of resize.animations) animation.currentTime = Math.max(0, Math.min(1, progress)) * RECEIPT_MORPH_DURATION_MS;
+	}
+	finishReceiptResize(resize) {
+		if (this.receiptResize !== resize) return;
+		this.receiptResize = null;
+		resize.element.classList.remove("seams-surface-height-driven");
+		resize.element.querySelector(".seams-receipt-footer--hosted")?.classList.remove("seams-receipt-footer--hosted");
+		this.styles.deleteDynamicRule(`${this.element.id}-receipt-resize`);
+		for (const animation of resize.animations) animation.finish();
+	}
 	/** The auth method capture still on screen, measured before the receipt replaces it. */
 	liveCapture() {
 		if (this.state.kind !== "mounted" || this.state.model.content.kind !== "transaction") return null;

package/dist/esm/core/ui/messages.js

@@ -37,6 +37,17 @@ const walletMessages = [
 	["Enter a recovery code to recover your wallet.", "リカバリーコードを入力してウォレットを復元してください。"],
 	["Create new passkey", "新しいパスキーを作成"],
 	["Continue with Google", "Google で続ける"],
+	["Connect wallet", "ウォレットを接続"],
+	["Back to wallet selection", "ウォレットの選択に戻る"],
+	["Choose how you’d like to get started.", "開始方法を選択してください。"],
+	["Create a Seams Wallet", "Seams ウォレットを作成"],
+	["Get started with a passkey", "パスキーで開始"],
+	["Use your existing wallet", "既存のウォレットを使用"],
+	["Connect Meteor Wallet", "Meteor Wallet を接続"],
+	["Connect HOT Wallet", "HOT Wallet を接続"],
+	["Connect Intear Wallet", "Intear Wallet を接続"],
+	["Mainnet only", "メインネットのみ"],
+	["Complete the request in your wallet.", "ウォレットでリクエストを完了してください。"],
 	["Verify email code", "メールのコードを確認"],
 	["Unlock with Google", "Google でロック解除"],
 	["Unlock with new passkey", "新しいパスキーでロック解除"],
@@ -232,6 +243,7 @@ const walletMessages = [
 	["Create a wallet", "ウォレットを作成"],
 	["Create wallet with passkey", "パスキーでウォレットを作成"],
 	["Unlock with passkey", "パスキーでロック解除"],
+	["Unlock with email code", "メールのコードでロック解除"],
 	["Saved wallets", "保存済みウォレット"],
 	["Generate another name", "別の名前を生成"],
 	["Other options", "その他の方法"],
@@ -293,6 +305,11 @@ const walletMessages = [
 	["Dark mode", "ダークモード"],
 	["Unable to lock your wallet. Try again.", "ウォレットをロックできません。もう一度お試しください。"],
 	["Unlocked on this device", "このデバイスでロック解除済み"],
+	["Connected with Google", "Google で接続中"],
+	["Wallet access", "ウォレットへのアクセス"],
+	["Connected to your wallet", "ウォレットに接続しています"],
+	["Method {value0}", "認証方法 {value0}"],
+	["Confirm with a wallet authentication method to make security changes.", "セキュリティ設定を変更するには、ウォレットの認証方法で本人確認してください。"],
 	["All settings", "すべての設定"],
 	["Locking…", "ロック中…"],
 	["Lock wallet", "ウォレットをロック"],

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

@@ -4,7 +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 { AccountSettingsDialog } from "./AccountSettingsDialog.js";
 import { LockKeyholeIcon } from "./icons/LockKeyholeIcon.js";
 import { useLayoutEffect, useRef, useState } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
@@ -13,9 +13,9 @@ import "./Web3AuthProfileButton.css";
 function measurePanel(element, setHeight) {
 	setHeight(element.offsetHeight);
 }
-function observePanel(contentRef, isOpen, setHeight) {
+function observePanel(contentRef, isOpen, presentation, setHeight) {
 	const content = contentRef.current;
-	if (!content || !isOpen) {
+	if (!content || !isOpen || presentation === "drawer") {
 		setHeight(null);
 		return;
 	}
@@ -28,14 +28,14 @@ function observePanel(contentRef, isOpen, setHeight) {
 function closeWithEscape(presentation, onClose, event) {
 	if (event.key !== "Escape" || event.defaultPrevented) return;
 	event.preventDefault();
-	if (presentation === "modal") event.stopPropagation();
+	if (presentation !== "dropdown") event.stopPropagation();
 	onClose();
 }
-function revealModalScreen(presentation, event) {
-	if (presentation !== "modal" || !(event.target instanceof HTMLElement)) return;
+function revealDialogScreen(presentation, event) {
+	if (presentation === "dropdown" || !(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;
+	const scrollArea = presentation === "drawer" ? event.target.closest(".seams-account-main") : event.currentTarget.closest("dialog.seams-account-dialog");
+	if (scrollArea) scrollArea.scrollTop = 0;
 }
 function restoreTriggerFocus(buttonRef, previousOpen, isOpen) {
 	if (previousOpen.current && !isOpen) buttonRef.current?.querySelector("[aria-expanded]")?.focus({ preventScroll: true });
@@ -55,20 +55,21 @@ function AccountMenuButtonView({ presentation, buttonRef, dropdownRef, trigger,
 	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, presentation]);
+	useLayoutEffect(observePanel.bind(null, contentRef, trigger.isOpen, presentation, setHeight), [trigger.isOpen, presentation]);
+	const panelOpen = presentation !== "dropdown" || trigger.isOpen;
 	const panel = /* @__PURE__ */ jsx("div", {
 		ref: buttonRef,
-		className: `seams-profile-button-morphable ${trigger.isOpen ? "open" : "closed"} ${className ?? ""}`,
-		style: trigger.isOpen ? style : {
+		className: `seams-profile-button-morphable ${panelOpen ? "open" : "closed"} ${className ?? ""}`,
+		style: panelOpen ? style : {
 			...style,
 			width: "fit-content"
 		},
-		"data-state": trigger.isOpen ? "open" : "closed",
-		onFocusCapture: revealModalScreen.bind(null, presentation),
-		children: trigger.isOpen ? /* @__PURE__ */ jsx("div", {
+		"data-state": panelOpen ? "open" : "closed",
+		onFocusCapture: revealDialogScreen.bind(null, presentation),
+		children: panelOpen ? /* @__PURE__ */ jsx("div", {
 			className: "seams-account-resize",
 			onKeyDown: closeWithEscape.bind(null, presentation, dropdown.onClose),
-			style: { height: height ?? void 0 },
+			style: { height: presentation === "drawer" ? void 0 : height ?? void 0 },
 			children: /* @__PURE__ */ jsxs("div", {
 				ref: contentRef,
 				className: "seams-account-panel-content",
@@ -92,7 +93,11 @@ function AccountMenuButtonView({ presentation, buttonRef, dropdownRef, trigger,
 									strokeWidth: "1.5",
 									children: /* @__PURE__ */ jsx("path", { d: "m6 6 12 12M18 6 6 18" })
 								})
-							})
+							}),
+							presentation === "drawer" ? /* @__PURE__ */ jsx("h2", {
+								className: "seams-account-drawer-title",
+								children: /* @__PURE__ */ jsx(WalletText, { message: "Wallet settings" })
+							}) : null
 						]
 					}),
 					/* @__PURE__ */ jsx("div", {
@@ -131,12 +136,20 @@ function AccountMenuButtonView({ presentation, buttonRef, dropdownRef, trigger,
 			})
 		}) : /* @__PURE__ */ jsx(UserAccountButton, { ...trigger })
 	});
-	if (presentation === "modal") return /* @__PURE__ */ jsx(AccountMenuModal, {
-		isOpen: trigger.isOpen,
-		onClose: dropdown.onClose,
-		children: panel
-	});
-	return panel;
+	switch (presentation) {
+		case "dropdown": return panel;
+		case "modal":
+		case "drawer": return /* @__PURE__ */ jsx(AccountSettingsDialog, {
+			presentation,
+			isOpen: trigger.isOpen,
+			onClose: dropdown.onClose,
+			children: panel
+		});
+		default: return assertNever(presentation);
+	}
+}
+function assertNever(value) {
+	throw new Error(`Unsupported account menu presentation: ${String(value)}`);
 }
 //#endregion
 export { AccountMenuButtonView };

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

@@ -0,0 +1,157 @@
+import { walletText } from "../../../core/ui/messages.js";
+import { useWalletLocale } from "../../context/WalletLocale.js";
+import { Theme, useTheme } from "../theme/ThemeProvider.js";
+import { Component } from "react";
+import { createPortal } from "react-dom";
+import { jsx } from "react/jsx-runtime";
+//#region src/react/components/AccountMenuButton/AccountSettingsDialog.tsx
+const DRAWER_DURATION_MS = 240;
+const DRAWER_EASING = "cubic-bezier(0.32, 0.72, 0, 1)";
+function ignoreCancelledAnimation() {}
+function assertNever(value) {
+	throw new Error(`Unsupported settings dialog state: ${String(value)}`);
+}
+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;
+}
+var SettingsDialog = class extends Component {
+	state = { dialog: { kind: "closed" } };
+	dialog = null;
+	motion = null;
+	startedOutside = false;
+	static getDerivedStateFromProps(props, state) {
+		if (props.isOpen) return { dialog: {
+			kind: "open",
+			content: props.children
+		} };
+		switch (state.dialog.kind) {
+			case "closed": return null;
+			case "open":
+				if (props.presentation === "modal") return { dialog: { kind: "closed" } };
+				return { dialog: {
+					kind: "closing",
+					content: state.dialog.content
+				} };
+			case "closing": return props.presentation === "modal" ? { dialog: { kind: "closed" } } : null;
+			default: return assertNever(state.dialog);
+		}
+	}
+	componentDidMount() {
+		this.syncDialog("closed", this.props.presentation);
+	}
+	componentDidUpdate(previousProps, previousState) {
+		this.syncDialog(previousState.dialog.kind, previousProps.presentation);
+	}
+	componentWillUnmount() {
+		this.clearMotion();
+		this.dialog?.close();
+	}
+	setDialog = (dialog) => {
+		if (dialog === this.dialog) return;
+		this.clearMotion();
+		this.dialog?.close();
+		this.dialog = dialog;
+	};
+	clearMotion() {
+		this.motion?.cancel();
+		this.motion = null;
+	}
+	syncDialog(previous, presentation) {
+		const dialog = this.dialog;
+		if (!dialog) return;
+		dialog.inert = this.state.dialog.kind === "closing";
+		if (!dialog.open) dialog.showModal();
+		if (this.props.presentation === "modal") {
+			this.clearMotion();
+			return;
+		}
+		if (previous === this.state.dialog.kind && presentation === this.props.presentation) return;
+		if (previous === "closing" && this.state.dialog.kind === "open") dialog.querySelector(".seams-account-close")?.focus({ preventScroll: true });
+		this.animateDrawer(previous === "closed" || presentation !== this.props.presentation);
+	}
+	animateDrawer(entering) {
+		const dialog = this.dialog;
+		if (!dialog) return;
+		const computed = getComputedStyle(dialog);
+		const offset = computed.getPropertyValue("--seams-account-drawer-offset").trim();
+		const from = entering ? offset : computed.transform;
+		this.clearMotion();
+		if (matchMedia("(prefers-reduced-motion: reduce)").matches) {
+			if (this.state.dialog.kind === "closing") this.setState({ dialog: { kind: "closed" } });
+			return;
+		}
+		const to = this.state.dialog.kind === "closing" ? offset : "none";
+		const animation = dialog.animate([{ transform: from }, { transform: to }], {
+			duration: DRAWER_DURATION_MS,
+			easing: DRAWER_EASING,
+			fill: "both"
+		});
+		this.motion = animation;
+		animation.finished.then(this.finishMotion.bind(this, animation), ignoreCancelledAnimation);
+	}
+	finishMotion(animation) {
+		if (this.motion !== animation) return;
+		if (this.state.dialog.kind === "closing") {
+			this.setState({ dialog: { kind: "closed" } });
+			return;
+		}
+		this.clearMotion();
+	}
+	requestClose = () => {
+		if (this.state.dialog.kind === "open") this.props.onClose();
+	};
+	rememberBackdrop = (event) => {
+		this.startedOutside = isBackdrop(event);
+	};
+	closeBackdrop = (event) => {
+		const shouldClose = this.startedOutside && isBackdrop(event);
+		this.startedOutside = false;
+		if (!shouldClose) return;
+		event.stopPropagation();
+		this.requestClose();
+	};
+	cancelDialog = (event) => {
+		event.preventDefault();
+		event.stopPropagation();
+		this.requestClose();
+	};
+	render() {
+		if (this.state.dialog.kind === "closed" || typeof document === "undefined") return null;
+		return createPortal(/* @__PURE__ */ jsx(Theme, {
+			tag: "div",
+			theme: this.props.theme,
+			tokens: { [this.props.theme]: this.props.tokens },
+			children: /* @__PURE__ */ jsx("dialog", {
+				ref: this.setDialog,
+				"data-seams-root": "",
+				"data-presentation": this.props.presentation,
+				"data-state": this.state.dialog.kind,
+				className: "seams-account-dialog",
+				"aria-label": this.props.label,
+				onCancel: this.cancelDialog,
+				onPointerDown: this.rememberBackdrop,
+				onClick: this.closeBackdrop,
+				children: this.state.dialog.content
+			})
+		}), document.body);
+	}
+};
+function AccountSettingsDialog(props) {
+	const locale = useWalletLocale();
+	const { theme, tokens } = useTheme();
+	return /* @__PURE__ */ jsx(SettingsDialog, {
+		presentation: props.presentation,
+		isOpen: props.isOpen,
+		onClose: props.onClose,
+		theme,
+		tokens,
+		label: walletText(locale, "Wallet settings"),
+		children: props.children
+	});
+}
+//#endregion
+export { AccountSettingsDialog };
+
+//# sourceMappingURL=AccountSettingsDialog.js.map

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

@@ -2,6 +2,7 @@ import { walletDisplayText, walletText } from "../../../core/ui/messages.js";
 import { WalletText, useWalletLocale } from "../../context/WalletLocale.js";
 import { useSeams } from "../../context/index.js";
 import { AccountMenuDialogFrame } from "./AccountMenuDialog.js";
+import { ExternalWalletSettingsView } from "./ExternalWalletSettings.js";
 import { AuthenticationMethodRow } from "./AuthenticationMethodRow.js";
 import { VoiceIdMethodRow, VoiceIdSetupRow } from "./VoiceIdAvailabilityControl.js";
 import { AuthenticationMethodsView } from "./AuthenticationMethodsView.js";
@@ -115,7 +116,18 @@ function methodDescription(method) {
 		case "voiceid": return "Voice unlock on this device";
 	}
 }
-const AuthenticationMethodsModal = ({ walletId, isOpen, onClose, presentation }) => {
+function AuthenticationMethodsModal(props) {
+	const { loginState } = useSeams();
+	if (!props.isOpen) return null;
+	if (loginState.isLoggedIn && loginState.access === "external") return /* @__PURE__ */ jsx(ExternalWalletSettingsView, {
+		settings: loginState.externalSettings,
+		view: "methods",
+		presentation: props.presentation,
+		onClose: props.onClose
+	});
+	return /* @__PURE__ */ jsx(OwnerAuthenticationMethodsModal, { ...props });
+}
+const OwnerAuthenticationMethodsModal = ({ walletId, isOpen, onClose, presentation }) => {
 	const locale = useWalletLocale();
 	const { seams, loginState, refreshSession } = useSeams();
 	const [loadState, setLoadState] = React.useState({ kind: "idle" });

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

@@ -0,0 +1,46 @@
+import { walletText } from "../../../core/ui/messages.js";
+import { WalletText, useWalletLocale } from "../../context/WalletLocale.js";
+import { AccountMenuDialogFrame } from "./AccountMenuDialog.js";
+import { AccountMenuDeviceDetails } from "./AccountMenuDeviceDetails.js";
+import { useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/react/components/AccountMenuButton/ExternalWalletSettings.tsx
+function ExternalWalletSettingsView(props) {
+	const locale = useWalletLocale();
+	const ref = useRef(null);
+	const title = props.view === "methods" ? "Authentication methods" : "Linked devices";
+	const details = props.view === "methods" ? props.settings.methods.map(methodDetail.bind(null, locale)) : props.settings.devices.map(deviceDetail.bind(null, locale));
+	return /* @__PURE__ */ jsxs(AccountMenuDialogFrame, {
+		presentation: props.presentation,
+		onClose: props.onClose,
+		dialogRef: ref,
+		contentClassName: "",
+		titleId: `external-wallet-${props.view}`,
+		title,
+		children: [/* @__PURE__ */ jsx(AccountMenuDeviceDetails, {
+			title: "Wallet access",
+			description: "Connected to your wallet",
+			details
+		}), /* @__PURE__ */ jsx("p", { children: /* @__PURE__ */ jsx(WalletText, { message: "Confirm with a wallet authentication method to make security changes." }) })]
+	});
+}
+function methodDetail(locale, method, index) {
+	return {
+		label: walletText(locale, "Method {value0}", { value0: index + 1 }),
+		value: {
+			passkey: "Passkey",
+			email_otp: "Email code",
+			voiceid: "VoiceID"
+		}[method.kind]
+	};
+}
+function deviceDetail(locale, _device, index) {
+	return {
+		label: walletText(locale, "Device {value0}", { value0: index + 1 }),
+		value: "Active"
+	};
+}
+//#endregion
+export { ExternalWalletSettingsView };
+
+//# sourceMappingURL=ExternalWalletSettings.js.map

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

@@ -1,8 +1,9 @@
 import { walletDisplayText, walletText } from "../../../core/ui/messages.js";
 import { WalletText, useWalletLocale } from "../../context/WalletLocale.js";
 import { useSeams } from "../../context/index.js";
-import { AccountMenuDeviceDetails } from "./AccountMenuDeviceDetails.js";
 import { AccountMenuDialogFrame } from "./AccountMenuDialog.js";
+import { AccountMenuDeviceDetails } from "./AccountMenuDeviceDetails.js";
+import { ExternalWalletSettingsView } from "./ExternalWalletSettings.js";
 import { MailIcon } from "./icons/MailIcon.js";
 import { AuthenticationMethodRow } from "./AuthenticationMethodRow.js";
 import { LaptopIcon } from "./icons/LaptopIcon.js";
@@ -214,7 +215,18 @@ function withLinkedDevicesLoadTimeout(promise) {
 		});
 	});
 }
-const LinkedDevicesModal = ({ walletId, isOpen, onClose, presentation }) => {
+function LinkedDevicesModal(props) {
+	const { loginState } = useSeams();
+	if (!props.isOpen) return null;
+	if (loginState.isLoggedIn && loginState.access === "external") return /* @__PURE__ */ jsx(ExternalWalletSettingsView, {
+		settings: loginState.externalSettings,
+		view: "devices",
+		presentation: props.presentation,
+		onClose: props.onClose
+	});
+	return /* @__PURE__ */ jsx(OwnerLinkedDevicesModal, { ...props });
+}
+const OwnerLinkedDevicesModal = ({ walletId, isOpen, onClose, presentation }) => {
 	const locale = useWalletLocale();
 	const { seams, loginState } = useSeams();
 	const [loadState, setLoadState] = React.useState({ kind: "idle" });