@seams/wallet 0.9.1 → 0.9.2

package/README.md

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

package/dist/.build-inputs.sha256

@@ -1 +1 @@
-ae160ae14f2523702c4fef83cd460099dc8ebef71ae5079e056f38d97cc5d19d
+392dfb0f192f2256956e72a6ec24a6d93a8c39e38b83581ad6c62f1dd73df7a5

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

@@ -1,4 +1,4 @@
-import { dispatchSurfaceResizeBegin } from "./surface-resize-events.js";
+import { addSurfaceResizeBeginListener, dispatchSurfaceResizeBegin } from "./surface-resize-events.js";
 //#region src/core/signingEngine/uiConfirm/ui/confirm-surface-resize.ts
 /**
 * Host-driven height changes for wallet-iframe confirmations.
@@ -25,6 +25,10 @@ import { dispatchSurfaceResizeBegin } from "./surface-resize-events.js";
 *
 * The module owns the rules for iframe-hosted confirmation reflow.
 */
+const CONFIRM_SURFACE_MODE_ATTR = "data-seams-confirm-surface";
+const CONFIRM_SURFACE_MODE_WALLET_IFRAME = "wallet-iframe";
+/** Marks the confirmer host while its height is held at a motion's target. */
+const CONFIRM_SURFACE_PINNED_CLASS = "seams-confirm-surface-pinned";
 /**
 * Marks the document root for the same span. It is a second class rather than
 * the one above because the host rule must match any element that hosts a
@@ -37,6 +41,24 @@ const CONFIRM_SURFACE_PINNED_ROOT_CLASS = "seams-confirm-surface-pinned-root";
 const CONFIRM_SURFACE_HEIGHT_DRIVEN_CLASS = "seams-surface-height-driven";
 /** The CSS variable the class above reads. Components own the write (CSP). */
 const CONFIRM_SURFACE_HEIGHT_DRIVEN_VAR = "--seams-surface-height-driven-target";
+/** Frames the box may sit still, after it has moved, before its motion counts as over. */
+const SETTLED_FRAMES_AFTER_MOTION = 8;
+/** Frames to wait for the parent to react at all before giving up on it. */
+const SETTLED_FRAMES_WITHOUT_MOTION = 20;
+/**
+* The parent writes the destination box and forces a layout BEFORE it starts
+* its ease, and a cross-origin iframe can receive that destination size for one
+* frame before the animation snaps it back to the origin. Landing on that
+* frame finishes the interior instantly and leaves the box to ease on its
+* own — the exact jank this module exists to remove. A box that jumps straight
+* to the target therefore has to stay there this many frames before the
+* content lands on it; a box that eased through intermediate sizes lands at
+* once. The parent pins the iframe to the origin for that read
+* (`overlay-styles.ts pinDialogIframe`), so this is the second of two guards.
+*/
+const LANDING_CONFIRM_FRAMES = 3;
+/** The parent rounds the measured size; allow that much slack when asking whether the box hugs the host. */
+const HUG_TOLERANCE_CSS_PX = 1;
 /** A host that claims a motion and never lands it must not leave content clamped. */
 const ANNOUNCE_SAFETY_MS = 1500;
 /** Height changes below this are not worth a motion, and round to nothing. */
@@ -169,7 +191,156 @@ function announceClampedSurfaceResize(args) {
 	if (!claimed) element.classList.remove(...addedClasses);
 	return claimed;
 }
+let diagnosticHost = null;
+const surfaceMotionDiagnostics = {
+	blipFrames: 0,
+	trace(durationMs = 2e3) {
+		return new Promise((resolve) => {
+			const lines = [];
+			const startedAt = performance.now();
+			const tick = () => {
+				const host = diagnosticHost;
+				const pinned = host?.classList.contains(CONFIRM_SURFACE_PINNED_CLASS) ? "*" : "";
+				lines.push(`${Math.round(performance.now() - startedAt)}: box=${document.documentElement.clientHeight} content=${host ? Math.round(host.getBoundingClientRect().height) : "-"}${pinned}`);
+				if (performance.now() - startedAt < durationMs) requestAnimationFrame(tick);
+				else resolve(lines);
+			};
+			requestAnimationFrame(tick);
+		});
+	}
+};
+function publishDiagnostics(element) {
+	diagnosticHost = element;
+	try {
+		window.__seamsSurfaceMotion = surfaceMotionDiagnostics;
+	} catch {}
+}
+function defaultViewportHeightCssPx() {
+	const height = document.documentElement?.clientHeight ?? 0;
+	return height > 0 ? height : window.innerHeight;
+}
+function clamp(value, min, max) {
+	return Math.min(Math.max(value, min), max);
+}
+function isWalletIframeConfirmSurface(element) {
+	return element.getAttribute(CONFIRM_SURFACE_MODE_ATTR) === CONFIRM_SURFACE_MODE_WALLET_IFRAME;
+}
+function createHostHeightPin(element) {
+	if (typeof CSSStyleSheet !== "function" || !("adoptedStyleSheets" in document)) return null;
+	let sheet = null;
+	const release = () => {
+		element.classList.remove(CONFIRM_SURFACE_PINNED_CLASS);
+		document.documentElement.classList.remove(CONFIRM_SURFACE_PINNED_ROOT_CLASS);
+	};
+	return {
+		set(px) {
+			try {
+				if (!sheet) sheet = new CSSStyleSheet();
+				sheet.replaceSync(`.${CONFIRM_SURFACE_PINNED_CLASS}{height:${Math.max(0, Math.round(px))}px}.${CONFIRM_SURFACE_PINNED_ROOT_CLASS}{overflow:hidden}`);
+				if (!document.adoptedStyleSheets.includes(sheet)) document.adoptedStyleSheets = [...document.adoptedStyleSheets, sheet];
+			} catch {
+				return false;
+			}
+			element.classList.add(CONFIRM_SURFACE_PINNED_CLASS);
+			document.documentElement.classList.add(CONFIRM_SURFACE_PINNED_ROOT_CLASS);
+			return true;
+		},
+		release,
+		dispose() {
+			release();
+			if (!sheet) return;
+			const retired = sheet;
+			sheet = null;
+			try {
+				document.adoptedStyleSheets = document.adoptedStyleSheets.filter((s) => s !== retired);
+			} catch {}
+		}
+	};
+}
+function attachConfirmSurfaceResizeChoreographer(element, options = {}) {
+	const readViewportHeightCssPx = options.viewportHeightCssPx ?? defaultViewportHeightCssPx;
+	const pin = createHostHeightPin(element);
+	publishDiagnostics(element);
+	let active = null;
+	const settle = () => {
+		const current = active;
+		if (!current) return;
+		active = null;
+		if (current.frame !== null) cancelAnimationFrame(current.frame);
+		current.driver.setProgress(1);
+		current.driver.finish();
+		pin?.release();
+	};
+	const step = () => {
+		const current = active;
+		if (!current) return;
+		current.frame = null;
+		const viewportPx = readViewportHeightCssPx();
+		if (viewportPx !== current.lastViewportPx) {
+			current.lastViewportPx = viewportPx;
+			current.framesSinceChange = 0;
+			current.moved = true;
+		} else current.framesSinceChange += 1;
+		const progress = clamp((viewportPx - current.originHostPx) / current.deltaCssPx, 0, 1);
+		if (progress >= 1) {
+			current.framesAtTarget += 1;
+			if (current.sawIntermediate || current.framesAtTarget >= LANDING_CONFIRM_FRAMES) {
+				settle();
+				return;
+			}
+			current.frame = requestAnimationFrame(step);
+			return;
+		}
+		if (current.framesAtTarget > 0) surfaceMotionDiagnostics.blipFrames += 1;
+		current.framesAtTarget = 0;
+		if (progress > 0) current.sawIntermediate = true;
+		current.driver.setProgress(progress);
+		const settledFrames = current.moved ? SETTLED_FRAMES_AFTER_MOTION : SETTLED_FRAMES_WITHOUT_MOTION;
+		if (current.framesSinceChange >= settledFrames) {
+			settle();
+			return;
+		}
+		current.frame = requestAnimationFrame(step);
+	};
+	const onSurfaceResizeBegin = (event) => {
+		const detail = event.detail;
+		if (!pin || !detail || !isWalletIframeConfirmSurface(element)) return;
+		const deltaCssPx = detail.deltaCssPx;
+		if (!Number.isFinite(deltaCssPx) || Math.abs(deltaCssPx) < MIN_ANNOUNCED_DELTA_CSS_PX) return;
+		settle();
+		const viewportPx = readViewportHeightCssPx();
+		const hostPx = element.getBoundingClientRect().height;
+		if (!(viewportPx > 0) || !(hostPx > 0) || Math.abs(viewportPx - hostPx) > HUG_TOLERANCE_CSS_PX) return;
+		const originHostPx = Math.round(hostPx);
+		const targetHostPx = originHostPx + deltaCssPx;
+		if (!(targetHostPx > 0)) return;
+		if (!pin.set(targetHostPx)) return;
+		const driver = detail.claim();
+		if (!driver) {
+			pin.release();
+			return;
+		}
+		active = {
+			driver,
+			originHostPx,
+			deltaCssPx,
+			lastViewportPx: viewportPx,
+			framesSinceChange: 0,
+			moved: false,
+			sawIntermediate: false,
+			framesAtTarget: 0,
+			frame: null
+		};
+		active.frame = requestAnimationFrame(step);
+	};
+	const removeListener = addSurfaceResizeBeginListener(element, onSurfaceResizeBegin);
+	return { dispose() {
+		removeListener();
+		settle();
+		pin?.dispose();
+	} };
+}
 //#endregion
-export { CONFIRM_SURFACE_HEIGHT_DRIVEN_VAR, announceClampedSurfaceResize, createSurfaceHeightReflow };
+export { CONFIRM_SURFACE_HEIGHT_DRIVEN_VAR, CONFIRM_SURFACE_MODE_ATTR, announceClampedSurfaceResize, announceSurfaceResize, attachConfirmSurfaceResizeChoreographer, createSurfaceHeightReflow };
 
 //# sourceMappingURL=confirm-surface-resize.js.map

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

@@ -7,7 +7,12 @@ function dispatchSurfaceResizeBegin(target, detail) {
 		detail
 	}));
 }
+function addSurfaceResizeBeginListener(target, listener, options) {
+	const handler = listener;
+	target.addEventListener(SURFACE_RESIZE_BEGIN_EVENT, handler, options);
+	return () => target.removeEventListener(SURFACE_RESIZE_BEGIN_EVENT, handler, options);
+}
 //#endregion
-export { dispatchSurfaceResizeBegin };
+export { addSurfaceResizeBeginListener, dispatchSurfaceResizeBegin };
 
 //# sourceMappingURL=surface-resize-events.js.map

package/dist/public/headers.manifest.json

@@ -1,7 +1,7 @@
 {
   "schemaVersion": 1,
   "packageName": "@seams/wallet",
-  "packageVersion": "0.9.1",
+  "packageVersion": "0.9.2",
   "assetRoot": "dist/public",
   "routeClasses": [
     {

package/dist/public/wallet-assets.manifest.json

@@ -1,14 +1,14 @@
 {
   "schemaVersion": 1,
   "packageName": "@seams/wallet",
-  "packageVersion": "0.9.1",
+  "packageVersion": "0.9.2",
   "assetRoot": "dist/public",
   "sdkBasePath": "/sdk",
   "walletServicePath": "/wallet-service",
   "headersManifest": "headers.manifest.json",
   "versionSkewContract": {
     "kind": "wallet_iframe_protocol_handshake",
-    "packageVersion": "0.9.1",
+    "packageVersion": "0.9.2",
     "protocolVersion": "15.0.0",
     "readyPayloadField": "protocolVersion",
     "failureMode": "typed_error",

package/dist/public/wallet-service/index.html

@@ -5,14 +5,14 @@
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>Web3Authn Wallet Service</title>
     <!-- Surface styles are external so strict CSP can keep style-src 'self' -->
-    <link rel="stylesheet" href="/sdk/wallet-ui.css?v=0.9.1" />
+    <link rel="stylesheet" href="/sdk/wallet-ui.css?v=0.9.2" />
     <!-- Minimal shims some ESM bundles expect (externalized to enable strict CSP) -->
-    <script src="/sdk/wallet-shims.js?v=0.9.1"></script>
+    <script src="/sdk/wallet-shims.js?v=0.9.2"></script>
     <!-- Hint the browser to fetch the host script earlier -->
-    <link rel="modulepreload" href="/sdk/wallet-iframe-host-runtime.js?v=0.9.1" crossorigin>
+    <link rel="modulepreload" href="/sdk/wallet-iframe-host-runtime.js?v=0.9.2" crossorigin>
   </head>
   <body>
     <!-- sdkBasePath points to the SDK root (e.g. '/sdk'). Load the host directly. -->
-    <script type="module" src="/sdk/wallet-iframe-host-runtime.js?v=0.9.1"></script>
+    <script type="module" src="/sdk/wallet-iframe-host-runtime.js?v=0.9.2"></script>
   </body>
 </html>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seams/wallet",
-  "version": "0.9.1",
+  "version": "0.9.2",
   "type": "module",
   "description": "Seams web and runtime TypeScript SDK for NEAR and EVM-family wallets",
   "main": "./dist/esm/index.js",