@seams/wallet 0.23.0 → 0.24.0

package/dist/esm/react/components/HostedSeamsAuthMenu/shell.js

@@ -1,6 +1,7 @@
 import { buildHostedAuthMenuOpenRequest, hostedAuthMenuExternalAuthRequestIdFromBoundary, hostedAuthMenuSessionIdFromBoundary } from "../../../SeamsWeb/walletIframe/shared/messages.js";
 import { useSeams } from "../../context/index.js";
 import { SeamsAuthMenuMock } from "./SeamsAuthMenuMock.js";
+import { endHostedAuthMenuAnchor, resetHostedAuthMenuAnchor } from "../../../SeamsWeb/walletIframe/client/authMenuAnchor.js";
 import React from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/react/components/HostedSeamsAuthMenu/shell.tsx
@@ -129,7 +130,7 @@ var HostedAuthMenuSessionController = class {
 	start() {
 		if (this.isActive) return;
 		this.isActive = true;
-		this.anchorElement.style.setProperty("--seams-auth-menu-placeholder-opacity", "1");
+		resetHostedAuthMenuAnchor(this.anchorElement);
 		this.unsubscribeExternalAuthRequest = this.seams.authMenu.onExternalAuthRequest(this.handleExternalAuthRequestBound);
 		this.open();
 	}
@@ -218,7 +219,7 @@ var HostedAuthMenuSessionController = class {
 	emitOutcome(outcome) {
 		if (this.hasTerminalOutcome) return;
 		this.hasTerminalOutcome = true;
-		this.anchorElement.style.setProperty("--seams-auth-menu-placeholder-opacity", "0");
+		endHostedAuthMenuAnchor(this.anchorElement);
 		try {
 			this.onOutcome.current(outcome);
 		} catch {}
@@ -246,7 +247,8 @@ function terminalGateFor(seams) {
 	if (existing) return existing;
 	const gate = {
 		completed: false,
-		observedLoggedIn: false
+		observedLoggedIn: false,
+		logoutGeneration: 0
 	};
 	hostedAuthMenuTerminalGates.set(seams, gate);
 	return gate;
@@ -261,6 +263,7 @@ function syncTerminalGate(gate, isLoggedIn) {
 	if (!gate.observedLoggedIn) return;
 	gate.completed = false;
 	gate.observedLoggedIn = false;
+	gate.logoutGeneration += 1;
 }
 function forwardHostedAuthMenuOutcome(terminalGateRef, onOutcomeRef, outcome) {
 	if (isTerminalHostedAuthMenuSuccess(outcome) && terminalGateRef.current) terminalGateRef.current.completed = true;
@@ -296,6 +299,7 @@ const HostedSeamsAuthMenu = ({ initialMode = "login", registrationAccountInput =
 	terminalGateRef.current = terminalGate;
 	forwardedOutcomeRef.current = forwardHostedAuthMenuOutcome.bind(null, terminalGateRef, onOutcomeRef);
 	const effectConfigKey = hostedAuthMenuEffectConfigKey(effectConfigRef.current);
+	const logoutGeneration = terminalGate?.logoutGeneration ?? 0;
 	React.useEffect(() => {
 		const anchorElement = anchorRef.current;
 		if (!seams || !anchorElement || typeof window === "undefined") return void 0;
@@ -317,7 +321,7 @@ const HostedSeamsAuthMenu = ({ initialMode = "login", registrationAccountInput =
 		return session.cleanup.bind(session);
 	}, [
 		seams,
-		isLoggedIn,
+		logoutGeneration,
 		effectConfigKey
 	]);
 	return /* @__PURE__ */ jsx("span", {

package/dist/esm/react/context/useLoginStateRefresher.js

@@ -1,7 +1,7 @@
 import { toWalletId } from "../../core/signingEngine/interfaces/ecdsaChainTarget.js";
 import { isWalletSessionReadyForUi } from "./walletSessionReadiness.js";
 import { buildReactLoggedInLoginStateFromSession, buildReactLoggedOutLoginState } from "./reactLoginStateBuilders.js";
-import { useCallback, useEffect } from "react";
+import { useCallback, useEffect, useRef } from "react";
 //#region src/react/context/useLoginStateRefresher.ts
 function syncAccountNameFromWalletId(setAccountName, walletId) {
 	const value = String(walletId || "").trim();
@@ -18,7 +18,10 @@ async function resolveExactReactLoginWalletId(seams, requestedWalletId) {
 }
 function useLoginStateRefresher(args) {
 	const { seams, setLoginState, setAccountName } = args;
+	const refreshGeneration = useRef(0);
 	const refreshSession = useCallback(async (walletId) => {
+		const generation = ++refreshGeneration.current;
+		const selectedWallet = seams.preferences.getCurrentWalletId();
 		try {
 			let exactWalletId;
 			if (seams.configs.wallet.mode === "iframe") {
@@ -26,6 +29,7 @@ function useLoginStateRefresher(args) {
 				if (requestedWalletId) exactWalletId = requestedWalletId;
 				else {
 					const state = await seams.getWalletIframeExactSessionState();
+					if (generation !== refreshGeneration.current || selectedWallet !== seams.preferences.getCurrentWalletId()) return;
 					switch (state.kind) {
 						case "active_session":
 						case "expired_session":
@@ -39,12 +43,16 @@ function useLoginStateRefresher(args) {
 						default: return;
 					}
 				}
-			} else exactWalletId = await resolveExactReactLoginWalletId(seams, walletId);
+			} else {
+				exactWalletId = await resolveExactReactLoginWalletId(seams, walletId);
+				if (generation !== refreshGeneration.current || selectedWallet !== seams.preferences.getCurrentWalletId()) return;
+			}
 			if (!exactWalletId) {
 				setLoginState(buildReactLoggedOutLoginState());
 				return;
 			}
 			const session = await seams.auth.getSession(exactWalletId);
+			if (generation !== refreshGeneration.current || selectedWallet !== seams.preferences.getCurrentWalletId()) return;
 			if (session.authentication.kind === "authenticated" && session.appIdentity.kind !== "resolved") return;
 			if (!isWalletSessionReadyForUi({ session })) {
 				setLoginState(buildReactLoggedOutLoginState());

package/dist/esm/react/index.js

@@ -8,9 +8,9 @@ import { ActionType, TxExecutionStatus } from "../shared-ts/src/near/actions.js"
 import { AmountError, parseEther, parseNear, parseUnits, yoctoNear } from "../core/types/amounts.js";
 import { addKey, createAccount, deleteAccount, deleteKey, deployContract, functionCall, stake, transfer } from "../core/types/actionBuilders.js";
 import { logWalletEvents } from "../core/types/eventLogging.js";
+import { TransactionReviewError } from "../SeamsWeb/walletIframe/shared/transactionReview.js";
 import { useNearClient } from "./hooks/useNearClient.js";
 import { useAccountInput } from "./hooks/useAccountInput.js";
-import { TransactionReviewError } from "../SeamsWeb/walletIframe/shared/transactionReview.js";
 import { TransactionReviewHost } from "./transactionReview/TransactionReviewHost.js";
 import { SeamsContextProvider, useSeams } from "./context/index.js";
 import { ExternalEvmWalletPicker, useExternalEvm } from "./externalEvm.js";
@@ -31,7 +31,5 @@ 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, AccountMenuButtonMock, AccountSyncEventPhase, ActionType, AmountError, 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, parseEther, parseNear, parseUnits, seamsTestnetConfig, stake, thresholdEcdsaChainTargetFromChainFamily, thresholdEcdsaChainTargetFromConfig, thresholdEcdsaChainTargetFromConfiguredRequest, thresholdEcdsaChainTargetFromRequest, thresholdEcdsaChainTargetKey, thresholdEcdsaChainTargetsEqual, toWalletId, transfer, useAccountInput, useDeviceLinking, useExternalEvm, useNearClient, useQRCamera, useSeams, useTheme, useWalletAuth, useWalletDevices, walletIdFromWalletProfile, walletSessionRefFromSession, yoctoNear };
+export { AccountMenuButton, AccountMenuButtonMock, AccountSyncEventPhase, ActionType, AmountError, 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, 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, parseEther, parseNear, parseUnits, seamsTestnetConfig, stake, thresholdEcdsaChainTargetFromChainFamily, thresholdEcdsaChainTargetFromConfig, thresholdEcdsaChainTargetFromConfiguredRequest, thresholdEcdsaChainTargetFromRequest, thresholdEcdsaChainTargetKey, thresholdEcdsaChainTargetsEqual, toWalletId, transfer, useAccountInput, useDeviceLinking, useExternalEvm, useNearClient, useQRCamera, useSeams, useTheme, useWalletAuth, useWalletDevices, walletIdFromWalletProfile, walletSessionRefFromSession, yoctoNear };

package/dist/esm/react/styles/styles.css

@@ -532,7 +532,7 @@
   padding: 0;
   border: 0;
 }
-.seams-transaction-review + .seams-transaction-group {
+.seams-transaction-review-setting + .seams-transaction-group {
   padding-top: 40px;
   border-top: 1px solid var(--seams-colors-borderPrimary);
 }
@@ -622,16 +622,18 @@
   cursor: not-allowed;
 }
 
-/* The switch row uses the card grid, so its edge lines up with the cards. */
-.seams-transaction-review {
+/* The switch row uses the card grid, so its edge lines up with the cards. It has its
+   own class: the transaction confirmer's review is .seams-transaction-review, and a
+   page that loads both must not lay that review out on this grid. */
+.seams-transaction-review-setting {
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
   gap: 10px 16px;
 }
-.seams-transaction-review > * {
+.seams-transaction-review-setting > * {
   grid-column: span 2;
 }
-.seams-transaction-review > p {
+.seams-transaction-review-setting > p {
   margin: 0;
   padding-inline: 4px;
   color: var(--seams-colors-textSecondary);
@@ -787,7 +789,7 @@
 }
 
 @media (max-width: 600px) {
-  [data-presentation='page'] .seams-transaction-review > * {
+  [data-presentation='page'] .seams-transaction-review-setting > * {
     grid-column: 1 / -1;
   }
   [data-presentation='page'] .seams-transaction-review-row {
@@ -836,7 +838,7 @@
   gap: 16px;
   padding-bottom: 4px;
 }
-[data-presentation='menu'] .seams-transaction-review + .seams-transaction-group {
+[data-presentation='menu'] .seams-transaction-review-setting + .seams-transaction-group {
   padding-top: 16px;
 }
 [data-presentation='menu'] .seams-transaction-group legend {
@@ -901,10 +903,10 @@
 [data-presentation='menu'] [data-preview='drawer'] .seams-tp-panel {
   padding-top: 7px;
 }
-[data-presentation='menu'] .seams-transaction-review > * {
+[data-presentation='menu'] .seams-transaction-review-setting > * {
   grid-column: 1 / -1;
 }
-[data-presentation='menu'] .seams-transaction-review {
+[data-presentation='menu'] .seams-transaction-review-setting {
   gap: 8px;
 }
 [data-presentation='menu'] .seams-transaction-review-row {
@@ -916,7 +918,7 @@
   font-size: 14px;
 }
 [data-presentation='menu'] .seams-transaction-review-text > span,
-[data-presentation='menu'] .seams-transaction-review > p {
+[data-presentation='menu'] .seams-transaction-review-setting > p {
   font-size: 12px;
   line-height: 1.4;
 }
@@ -1230,19 +1232,21 @@
   margin-top: 4px;
 }
 .seams-account-footer {
-  border-top: 1px solid var(--seams-colors-borderPrimary);
+  border-top: 1px solid color-mix(in srgb, var(--seams-colors-borderPrimary) 60%, transparent);
   display: flex;
   justify-content: center;
-  align-items: center;
-  gap: 8px;
-  height: 44px;
+  align-items: baseline;
+  gap: 6px;
+  padding: 10px 16px;
   color: var(--seams-colors-textSecondary);
-  font-size: 12px;
+  font-size: 11px;
+  line-height: 16px;
+  letter-spacing: 0.01em;
 }
 .seams-account-wordmark {
-  width: 70px;
-  height: 18px;
-  color: var(--seams-colors-textPrimary);
+  flex: none;
+  width: 50px;
+  height: 10px;
 }
 .seams-account-description {
   font-size: 14px;
@@ -2924,320 +2928,6 @@
   background: var(--seams-colors-surface2, #f1f5f9);
 }
 
-.voice-assistant-card {
-  --voice-surface: #1d1d1d;
-  --voice-foreground: #f2f2f2;
-  --voice-muted: rgb(202 202 202 / 70%);
-  --voice-bubble: #303030;
-  --voice-divider: rgb(255 255 255 / 4%);
-  --voice-button: rgb(255 255 255 / 10%);
-  --voice-button-shadow:
-    0 1px 1px rgb(0 0 0 / 24%), inset 0 0 0 1px rgb(255 255 255 / 4%),
-    inset 0 1px 0 rgb(255 255 255 / 6%);
-  display: grid;
-  inline-size: 360px;
-  max-inline-size: 100%;
-  min-inline-size: 0;
-  border-radius: 24px;
-  background: var(--voice-surface);
-  color: var(--voice-foreground);
-  font: 400 14px / 20px var(--seams-fonts-sans, Inter, system-ui, sans-serif);
-  -webkit-font-smoothing: antialiased;
-  color-scheme: dark;
-}
-
-.voice-assistant-card[data-theme='light'] {
-  --voice-surface: #fff;
-  --voice-foreground: #0d0d0d;
-  --voice-muted: #6c6c6c;
-  --voice-bubble: #f0f0f0;
-  --voice-divider: rgb(0 0 0 / 4%);
-  --voice-button: rgb(255 255 255 / 40%);
-  --voice-button-shadow:
-    0 1px 3px rgb(0 0 0 / 4%), inset 0 0 0 1px rgb(0 0 0 / 8%), inset 0 -1px 0 rgb(0 0 0 / 8%);
-  box-shadow:
-    0 0 0 1px rgb(0 0 0 / 4%),
-    0 8px 32px -4px rgb(0 0 0 / 6%),
-    0 1px 3px rgb(0 0 0 / 4%);
-  color-scheme: light;
-}
-
-.voice-assistant-card,
-.voice-assistant-card * {
-  box-sizing: border-box;
-}
-
-.voice-assistant-beam {
-  margin: -1px;
-  border-radius: 25px;
-  min-inline-size: 0;
-}
-
-.voice-assistant-content {
-  position: relative;
-  z-index: 5;
-  display: flex;
-  flex-direction: column;
-  min-block-size: 342px;
-  border-radius: 25px;
-}
-
-.voice-assistant-header {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  padding: 16px;
-}
-
-.voice-assistant-avatar {
-  display: grid;
-  flex: none;
-  place-items: center;
-  inline-size: 32px;
-  block-size: 32px;
-  border-radius: 50%;
-  background: #27272e;
-  color: #e6dfec;
-  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 4%);
-  font-size: 13px;
-  font-weight: 500;
-  line-height: 1;
-}
-
-.voice-assistant-card[data-theme='light'] .voice-assistant-avatar {
-  background: #eee9f2;
-  color: #37364f;
-  box-shadow: inset 0 0 0 1px rgb(0 0 0 / 2%);
-}
-
-.voice-assistant-identity {
-  min-inline-size: 0;
-}
-
-.voice-assistant-identity h2,
-.voice-assistant-identity p {
-  margin: 0;
-  overflow-wrap: anywhere;
-}
-
-.voice-assistant-identity h2 {
-  font-size: 16px;
-  font-weight: 500;
-  line-height: 22px;
-}
-
-.voice-assistant-identity p {
-  color: var(--voice-muted);
-  font-size: 12px;
-  line-height: 16px;
-}
-
-.voice-assistant-divider {
-  flex: none;
-  block-size: 1px;
-  background: linear-gradient(90deg, transparent, var(--voice-divider) 20% 80%, transparent);
-}
-
-.voice-assistant-body {
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
-  padding: 24px 24px 0;
-  overflow-wrap: anywhere;
-}
-
-.voice-assistant-bubble-row {
-  padding-inline-start: 8px;
-  animation: voice-assistant-float 4s ease-in-out infinite;
-}
-
-.voice-assistant-bubble {
-  position: relative;
-  display: inline-block;
-  max-inline-size: 240px;
-  margin: 0;
-  padding: 8px 12px;
-  border-radius: 18px;
-  background: var(--voice-bubble);
-  font-size: 14px;
-  line-height: 20px;
-}
-
-.voice-assistant-bubble span {
-  position: relative;
-  z-index: 1;
-}
-
-.voice-assistant-bubble::before {
-  content: '';
-  position: absolute;
-  inset-block-end: 0;
-  inset-inline-start: -7px;
-  inline-size: 20px;
-  block-size: 20px;
-  border-end-end-radius: 16px 14px;
-  background: var(--voice-bubble);
-}
-
-.voice-assistant-bubble::after {
-  content: '';
-  position: absolute;
-  inset-block-end: 0;
-  inset-inline-start: -26px;
-  inline-size: 26px;
-  block-size: 20px;
-  border-end-end-radius: 10px;
-  background: var(--voice-surface);
-}
-
-.voice-assistant-transcript {
-  padding-inline-start: 32px;
-  text-align: end;
-  text-wrap: pretty;
-}
-
-.voice-assistant-footer {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 12px;
-  margin-block-start: auto;
-  padding: 24px;
-}
-
-.voice-assistant-caption {
-  display: grid;
-  color: var(--voice-muted);
-  font-size: 12px;
-  line-height: 16px;
-}
-
-.voice-assistant-caption > span {
-  grid-area: 1 / 1;
-  text-align: center;
-  opacity: 0;
-  transform: translateY(4px);
-  transition:
-    opacity var(--seams-voice-transition, 150ms ease-out),
-    transform var(--seams-voice-transition, 150ms ease-out);
-}
-
-.voice-assistant-caption > span[data-visible='true'] {
-  opacity: 1;
-  transform: translateY(0);
-}
-
-.voice-assistant-status {
-  position: absolute;
-  inline-size: 1px;
-  block-size: 1px;
-  overflow: hidden;
-  clip-path: inset(50%);
-  white-space: nowrap;
-}
-
-.voice-assistant-mic {
-  display: grid;
-  place-items: center;
-  inline-size: 48px;
-  block-size: 48px;
-  padding: 0;
-  border: 0;
-  border-radius: 50%;
-  background: var(--voice-button);
-  box-shadow: var(--voice-button-shadow);
-  color: inherit;
-  font: inherit;
-  cursor: pointer;
-  touch-action: manipulation;
-  -webkit-tap-highlight-color: transparent;
-  user-select: none;
-  transition: transform var(--seams-voice-transition, 150ms ease-out);
-}
-
-.voice-assistant-mic:active {
-  transform: scale(0.95);
-}
-
-.voice-assistant-mic:focus-visible {
-  outline: 2px solid var(--voice-foreground);
-  outline-offset: 3px;
-}
-
-@media (hover: hover) and (pointer: fine) {
-  .voice-assistant-mic:hover {
-    background-image: linear-gradient(rgb(128 128 128 / 4%) 0 100%);
-  }
-}
-
-.voice-assistant-wave {
-  display: flex;
-  align-items: center;
-  gap: 2px;
-  block-size: 20px;
-}
-
-.voice-assistant-wave i {
-  inline-size: 2px;
-  block-size: 6px;
-  border-radius: 1px;
-  background: currentColor;
-}
-
-.voice-assistant-wave i:nth-child(2),
-.voice-assistant-wave i:nth-child(4) {
-  block-size: 12px;
-}
-
-.voice-assistant-wave i:nth-child(3) {
-  block-size: 18px;
-}
-
-.voice-assistant-card[data-state='listening'] .voice-assistant-wave i {
-  animation: voice-assistant-wave 900ms ease-in-out infinite;
-}
-
-.voice-assistant-wave i:nth-child(2) {
-  animation-delay: -270ms;
-}
-
-.voice-assistant-wave i:nth-child(3) {
-  animation-delay: -540ms;
-}
-
-.voice-assistant-wave i:nth-child(4) {
-  animation-delay: -135ms;
-}
-
-.voice-assistant-wave i:nth-child(5) {
-  animation-delay: -405ms;
-}
-
-@keyframes voice-assistant-wave {
-  50% {
-    transform: scaleY(0.35);
-  }
-}
-
-@keyframes voice-assistant-float {
-  50% {
-    transform: translateY(-3px);
-  }
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .voice-assistant-bubble-row,
-  .voice-assistant-card[data-state='listening'] .voice-assistant-wave i {
-    animation: none;
-  }
-
-  .voice-assistant-caption > span,
-  .voice-assistant-mic {
-    transition: none;
-    transform: none;
-  }
-}
-
 
 /* Global default z-index tokens for wallet overlay + SDK modals */
 :root {

package/dist/esm/react/styles.css

@@ -15,7 +15,6 @@
 /* Import QR Code Scanner styles */
 @import './components/QRCodeScanner.css';
 @import './components/ShowQRCode.css';
-@import './components/VoiceAssistantCard.css';
 
 /* Global default z-index tokens for wallet overlay + SDK modals */
 :root {

package/dist/esm/sdk/ConfirmationDrawer-CTaGM1AE.js

@@ -0,0 +1 @@
+import{a as e,i as t,r as n}from"./csp-stylesheet-DeuiM0Mo.js";import{c as r,i,r as a,s as o}from"./appearance-token-vars-CgYTfCKg.js";async function s(e,t,n){if(!e.isConnected||n?.aborted)return!1;let r=e.ownerDocument,i=r.defaultView?.navigator.clipboard;if(i?.writeText)try{return await i.writeText(t),!0}catch{}if(!e.isConnected||n?.aborted)return!1;let a=r.createElement(`textarea`);a.value=t,a.readOnly=!0,a.className=`seams-offscreen`,e.appendChild(a),a.select();try{return r.execCommand(`copy`)}finally{a.remove()}}function c(){return n(`span`,{class:`copy-icon`,"aria-hidden":`true`,children:[n(`span`,{class:`copy-icon-check`,children:n(`svg`,{width:`16`,height:`16`,viewBox:`0 0 24 24`,fill:`none`,stroke:`currentColor`,children:n(`path`,{d:`M20 6 9 17l-5-5`})})}),n(`span`,{class:`copy-icon-copy`,children:n(`svg`,{width:`16`,height:`16`,viewBox:`0 0 24 24`,fill:`none`,stroke:`currentColor`,children:[n(`rect`,{width:`14`,height:`14`,x:`8`,y:`8`,rx:`2`,ry:`2`}),n(`path`,{d:`M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2`})]})})]})}let l=0;function u(e){return n(d,{...e},e.context)}var d=class extends t{static contextType=a;dialog=e();hosted=e();containerId=`seams-confirmation-modal-${++l}`;componentDidMount(){this.props.context===`standalone`?this.dialog.current?.showModal():this.hosted.current?.focus({preventScroll:!0})}componentWillUnmount(){this.dialog.current?.close()}cancel=e=>{e.preventDefault(),e.stopPropagation(),this.props.onCancel()};backdropClick=e=>{let t=this.dialog.current;if(!t||e.target!==t)return;let n=t.getBoundingClientRect();(e.clientX<n.left||e.clientX>n.right||e.clientY<n.top||e.clientY>n.bottom)&&this.cancel(e)};hostedKeyDown=e=>{!e.defaultPrevented&&e.key===`Escape`&&this.cancel(e)};render(){return this.props.context===`standalone`?n(`dialog`,{ref:this.dialog,class:`seams-confirmation-modal`,"aria-label":o(this.context,this.props.label),onCancel:this.cancel,onClick:this.backdropClick,children:n(`div`,{id:this.containerId,class:`modal-container-root`,tabIndex:-1,children:this.props.children})}):n(`div`,{ref:this.hosted,class:`seams-confirmation-modal seams-confirmation-modal--hosted`,tabIndex:-1,onKeyDown:this.hostedKeyDown,children:n(`div`,{id:this.containerId,class:`modal-container-root`,children:this.props.children})})}};function f(e){let t=e.startTranslatePx+e.deltaPx;if(t>=e.restTranslatePx)return t;let n=Math.max(e.sheetHeightPx*.5,e.viewportHeightPx*.5,e.minimumOverpullPx),r=e.restTranslatePx-t;return e.restTranslatePx-n*(1-1/(r/n+1))}function p(e){let t=e.totalDeltaPx/Math.max(1,e.durationMs);return Math.min(e.velocityPxPerMs,t)<=-.6||Math.max(e.velocityPxPerMs,t)>=.7||e.translatePx>=e.sheetHeightPx-50}let m=0;function h(e){return n(g,{...e},e.context)}var g=class extends t{static contextType=a;state={settled:!1};id=`seams-confirmation-drawer-${++m}`;dialog=e();sheet=e();body=e();content=e();observer=null;frame=null;closeTimer=null;gesture={kind:`idle`};lifetime=`active`;closeReported=!1;suppressPointerClick=!1;componentDidMount(){let e=this.sheet.current,t=e.ownerDocument.defaultView;this.dialog.current?.showModal(),this.dialog.current||e.focus({preventScroll:!0}),this.observer=new ResizeObserver(this.measureContent),this.observer.observe(this.content.current),this.observer.observe(e),t.addEventListener(`resize`,this.scheduleMeasure),t.visualViewport?.addEventListener(`resize`,this.scheduleMeasure),this.measure(),this.frame=t.requestAnimationFrame(this.openAfterLayout),this.props.state.kind===`closing`&&this.startClose()}openAfterLayout=()=>{this.frame=null,this.setState({settled:!0})};componentDidUpdate(e){e.styles!==this.props.styles&&(e.styles.deleteDynamicRule(this.id),e.styles.deleteDynamicRule(`${this.id}-drag`),this.resetGesture(),this.measure()),e.state.kind!==this.props.state.kind&&(this.props.state.kind===`closing`?this.startClose():(this.clearCloseTimer(),this.closeReported=!1)),this.props.state.kind===`open`&&this.props.state.interaction===`busy`&&this.resetGesture()}componentWillUnmount(){this.lifetime=`disposed`,this.resetGesture();let e=this.sheet.current.ownerDocument.defaultView;this.frame!==null&&e.cancelAnimationFrame(this.frame),this.clearCloseTimer(),this.observer?.disconnect(),e.removeEventListener(`resize`,this.scheduleMeasure),e.visualViewport?.removeEventListener(`resize`,this.scheduleMeasure),this.props.styles.deleteDynamicRule(this.id),this.dialog.current?.close()}scheduleMeasure=()=>{this.lifetime===`disposed`||this.frame!==null||(this.frame=this.sheet.current.ownerDocument.defaultView.requestAnimationFrame(this.measureFrame))};measureFrame=()=>{this.frame=null,this.measure()};measureContent=()=>{this.lifetime===`active`&&this.measure()};measure(){if(this.gesture.kind!==`idle`)return;let e=this.sheet.current,t=this.content.current,n=Math.round(t.getBoundingClientRect().bottom-e.getBoundingClientRect().top),r=this.props.context===`standalone`?Math.max(0,e.offsetHeight-n):0;this.props.styles.setDynamicDeclarations(this.id,`#${this.id}`,{"--seams-drawer-rest":`${r}px`})}startClose(){this.resetGesture(),this.clearCloseTimer();let e=this.sheet.current.ownerDocument.defaultView,t=e.matchMedia(`(prefers-reduced-motion: reduce)`).matches?0:150;this.closeTimer=e.setTimeout(this.reportClosed,t)}clearCloseTimer(){this.closeTimer!==null&&(this.sheet.current.ownerDocument.defaultView.clearTimeout(this.closeTimer),this.closeTimer=null)}reportClosed=()=>{this.clearCloseTimer(),!(this.lifetime===`disposed`||this.closeReported||this.props.state.kind!==`closing`)&&(this.closeReported=!0,this.props.state.onClosed())};transitionEnd=e=>{e.target===this.sheet.current&&e.propertyName===`transform`&&this.reportClosed()};cancel=e=>{e.preventDefault(),e.stopPropagation(),this.props.state.kind===`open`&&this.props.onCancel()};backdropClick=e=>{this.props.dismissOnBackdrop!==!1&&e.target===this.dialog.current&&this.canDrag()&&this.cancel(e)};keyDown=e=>{!e.defaultPrevented&&e.key===`Escape`&&this.cancel(e)};canDrag(){return this.props.state.kind===`open`&&this.props.state.interaction===`ready`}pointerDown=e=>{if(this.clearClickSuppression(),!this.canDrag()||this.gesture.kind!==`idle`||!e.isPrimary||e.button!==0)return;let t=e.target;if(t instanceof Element&&t.closest(`a, input, textarea, select, summary, button:not(.seams-drawer-handle), [data-seams-drawer-no-drag]`))return;this.gesture={kind:`pending`,pointerId:e.pointerId,startY:e.clientY};let n=this.sheet.current.ownerDocument;n.addEventListener(`pointermove`,this.pointerMove,{passive:!1}),n.addEventListener(`pointerup`,this.pointerUp),n.addEventListener(`pointercancel`,this.pointerCancel)};pointerMove=e=>{let t=this.gesture;if(t.kind===`idle`||t.pointerId!==e.pointerId)return;let n=this.sheet.current;if(t.kind===`pending`){if(Math.abs(e.clientY-t.startY)<8||this.body.current.scrollTop>0)return;let r=n.ownerDocument.defaultView,i=new DOMMatrixReadOnly(r.getComputedStyle(n).transform).m42;t={kind:`dragging`,pointerId:t.pointerId,startY:t.startY,lastY:t.startY,startedAt:e.timeStamp,lastTime:e.timeStamp,velocity:0,rest:i,translate:i,height:n.offsetHeight},this.gesture=t,n.setPointerCapture(e.pointerId),n.classList.add(`is-dragging`)}let r=e.timeStamp-t.lastTime;r>0&&(t.velocity=(e.clientY-t.lastY)/r),t.lastY=e.clientY,t.lastTime=e.timeStamp,t.translate=f({startTranslatePx:t.rest,deltaPx:e.clientY-t.startY,restTranslatePx:t.rest,sheetHeightPx:t.height,viewportHeightPx:n.ownerDocument.defaultView.innerHeight,minimumOverpullPx:160}),this.props.styles.setDynamicDeclarations(`${this.id}-drag`,`#${this.id}`,{"--seams-drawer-drag":`${t.translate}px`}),e.preventDefault()};pointerUp=e=>{let t=this.gesture;if(t.kind===`idle`||t.pointerId!==e.pointerId)return;let n=t.kind===`dragging`&&p({velocityPxPerMs:t.velocity,totalDeltaPx:t.lastY-t.startY,durationMs:e.timeStamp-t.startedAt,translatePx:t.translate,sheetHeightPx:t.height});t.kind===`dragging`&&(this.suppressPointerClick=!0,e.preventDefault()),this.resetGesture(),n&&this.props.state.kind===`open`&&this.props.onCancel()};pointerCancel=e=>{this.gesture.kind!==`idle`&&this.gesture.pointerId===e.pointerId&&(this.gesture.kind===`dragging`&&(this.suppressPointerClick=!0),this.resetGesture())};clearClickSuppression=()=>{this.suppressPointerClick=!1};suppressDragClick=e=>{!this.suppressPointerClick||e.detail===0||(this.suppressPointerClick=!1,e.preventDefault(),e.stopPropagation())};resetGesture(){let e=this.sheet.current,t=this.gesture;this.gesture={kind:`idle`},t.kind!==`idle`&&e.hasPointerCapture(t.pointerId)&&e.releasePointerCapture(t.pointerId),e.classList.remove(`is-dragging`);let n=e.ownerDocument;n.removeEventListener(`pointermove`,this.pointerMove),n.removeEventListener(`pointerup`,this.pointerUp),n.removeEventListener(`pointercancel`,this.pointerCancel),this.props.styles.deleteDynamicRule(`${this.id}-drag`),this.lifetime===`active`&&this.scheduleMeasure()}render(){let e=this.state.settled&&this.props.state.kind===`open`,t=[`seams-confirmation-drawer`];e&&t.push(`is-open`),this.gesture.kind===`dragging`&&t.push(`is-dragging`);let a=n(`section`,{ref:this.sheet,id:this.id,class:t.join(` `),"data-context":this.props.context,tabIndex:-1,onPointerDownCapture:this.pointerDown,onClickCapture:this.suppressDragClick,onLostPointerCapture:this.pointerCancel,onTransitionEnd:this.transitionEnd,onKeyDown:this.keyDown,children:[n(`div`,{class:`seams-drawer-controls`,children:[this.props.origin&&n(`div`,{class:`seams-drawer-origin`,children:this.props.origin}),n(`button`,{type:`button`,class:`seams-drawer-handle`,"aria-label":r(this.context,`Dismiss confirmation`),disabled:!this.canDrag(),onClick:this.cancel,children:n(`span`,{})}),n(`button`,{type:`button`,class:`seams-drawer-close`,"aria-label":r(this.context,`Close`),disabled:!this.canDrag(),onClick:this.cancel,children:`×`})]}),n(`div`,{class:`seams-drawer-body`,ref:this.body,children:[this.props.errorMessage&&n(`div`,{class:`error`,children:n(i,{copy:this.props.errorMessage})}),n(`div`,{class:`seams-drawer-content`,ref:this.content,children:this.props.children})]})]});return this.props.context===`wallet-iframe`?a:n(`dialog`,{class:`seams-drawer-dialog`,ref:this.dialog,"aria-label":o(this.context,this.props.label),onCancel:this.cancel,onClick:this.backdropClick,onClickCapture:this.suppressDragClick,onPointerDownCapture:this.clearClickSuppression,children:a})}};export{s as i,u as n,c as r,h as t};