@tatchi-xyz/sdk 0.21.0 → 0.31.0

package/dist/esm/sdk/iframe-host-CefZOSX2.js

@@ -1,1105 +0,0 @@
-import { LitElementWithProps, e, ensureExternalStyles, n, x } from "./css-loader-BHxJyE5o.js";
-import { resolveEmbeddedBase } from "./asset-base-K63RlTrt.js";
-import { TX_TREE_THEMES } from "./tx-tree-themes-BND0SU2h.js";
-import { IFRAME_TX_BUTTON_BOOTSTRAP_MODULE, W3A_BUTTON_WITH_TOOLTIP_ID, defineTag } from "./tags-C2Wlhqjd.js";
-
-//#region src/core/sdkPaths/base.ts
-/**
-* SDK Base (wallet origin)
-*
-* The wallet iframe host announces the absolute SDK base URL so that all
-* embedded assets (host script, Lit bundles) and module workers resolve from
-* the wallet origin in production. This keeps sensitive execution isolated
-* under the wallet site while allowing cross‑origin embedding.
-*
-* Writers:
-*  - Wallet iframe host (service) on boot and after PM_SET_CONFIG
-*  - App provider hook in dev when walletOrigin is configured
-*
-* Readers:
-*  - WebAuthnManager (to set worker base origin for managers)
-*  - Lit wrappers (to resolve embedded script/css URLs)
-*/
-const W3A_WALLET_SDK_BASE_KEY = "__W3A_WALLET_SDK_BASE__";
-const W3A_WALLET_SDK_BASE_EVENT = "W3A_WALLET_SDK_BASE_CHANGED";
-/**
-* @returns Absolute SDK base URL (e.g., `${walletOrigin}/sdk/`) when set, otherwise undefined.
-*/
-function getEmbeddedBase() {
-	if (typeof window === "undefined") return void 0;
-	const w = window;
-	const v = w[W3A_WALLET_SDK_BASE_KEY];
-	return typeof v === "string" && v.length > 0 ? v : void 0;
-}
-/**
-* @param url - Absolute SDK base URL (e.g., `${walletOrigin}/sdk/`).
-* @returns void
-*/
-function setEmbeddedBase(url) {
-	if (typeof window === "undefined") return;
-	const w = window;
-	w[W3A_WALLET_SDK_BASE_KEY] = url;
-	window.dispatchEvent(new CustomEvent(W3A_WALLET_SDK_BASE_EVENT, { detail: url }));
-}
-/**
-* @param cb - Callback invoked with the new absolute base URL when it changes.
-* @returns Unsubscribe function to remove the listener.
-*/
-function onEmbeddedBaseChange(cb) {
-	if (typeof window === "undefined") return () => {};
-	const handler = (e$1) => {
-		const d = e$1.detail;
-		if (typeof d === "string" && d.length > 0) cb(d);
-	};
-	window.addEventListener(W3A_WALLET_SDK_BASE_EVENT, handler, { passive: true });
-	return () => window.removeEventListener(W3A_WALLET_SDK_BASE_EVENT, handler);
-}
-
-//#endregion
-//#region src/core/WebAuthnManager/LitComponents/IframeButtonWithTooltipConfirmer/iframe-geometry.ts
-/**
-* Rounding & pixel-snapping strategy
-*
-* DOM measurements from getBoundingClientRect() often contain fractional values
-* (e.g., width: 200.4px). If these are rounded the wrong way, the iframe that
-* hosts the embedded UI can end up undersized by up to 1px, which manifests as
-* a faint scrollbar or a clipped tooltip.
-*
-* To avoid this, we follow these rules across the embedded tooltip flow:
-* - Positions (x, y): Math.floor — never extend negative space; align to pixels.
-* - Sizes (width, height): Math.ceil — never shrink rectangles; ensure fit.
-*
-* The embedded element applies this when constructing TooltipGeometry from
-* DOMRects. See EmbeddedTxButton.ts (buildGeometry).
-* On the host side, computeExpandedIframeSizeFromGeometryPure()
-* already uses Math.ceil on the right/bottom edges as a second line of defense.
-*/
-/**
-* IframeClipPathGenerator creates precise clip-path polygons for button + tooltip unions.
-* Supports all 8 tooltip positions with optimized shape algorithms.
-*/
-var IframeClipPathGenerator = class {
-	static generateUnion(geometry, paddingPx = 0) {
-		const pad = (r) => ({
-			x: r.x - paddingPx,
-			y: r.y - paddingPx,
-			width: r.width + 2 * paddingPx,
-			height: r.height + 2 * paddingPx,
-			borderRadius: r.borderRadius
-		});
-		const button = paddingPx ? pad(geometry.button) : geometry.button;
-		const tooltip = paddingPx ? pad(geometry.tooltip) : geometry.tooltip;
-		const { position, gap } = geometry;
-		if (!CSS.supports("clip-path: polygon(0 0)")) {
-			console.warn("clip-path not supported, skipping shape generation");
-			return "";
-		}
-		switch (position) {
-			case "top-left": {
-				const upper = button.y <= tooltip.y ? button : tooltip;
-				const lower = upper === button ? tooltip : button;
-				return this.generateVerticalLUnion(upper, lower, "left");
-			}
-			case "top-center": return this.generateTopCenterUnion(button, tooltip, gap);
-			case "top-right": {
-				const upper = button.y <= tooltip.y ? button : tooltip;
-				const lower = upper === button ? tooltip : button;
-				return this.generateVerticalLUnion(upper, lower, "right");
-			}
-			case "left": return this.generateLeftUnion(button, tooltip, gap);
-			case "right": return this.generateRightUnion(button, tooltip, gap);
-			case "bottom-left": {
-				const upper = button.y <= tooltip.y ? button : tooltip;
-				const lower = upper === button ? tooltip : button;
-				return this.generateVerticalLUnion(upper, lower, "left");
-			}
-			case "bottom-center": return this.generateBottomCenterUnion(button, tooltip, gap);
-			case "bottom-right": {
-				const upper = button.y <= tooltip.y ? button : tooltip;
-				const lower = upper === button ? tooltip : button;
-				return this.generateVerticalLUnion(upper, lower, "right");
-			}
-			default:
-				console.warn(`Unknown tooltip position: ${position}`);
-				return this.generateTopCenterUnion(button, tooltip, gap);
-		}
-	}
-	/**
-	* Build an L-shaped rectilinear polygon for two vertically stacked rectangles (upper over lower).
-	* The hingeSide selects which side (left|right) the connecting corridor should hug to avoid
-	* capturing the opposite empty corner.
-	*/
-	static generateVerticalLUnion(upper, lower, hingeSide) {
-		if (upper.y > lower.y) {
-			const tmp = upper;
-			upper = lower;
-			lower = tmp;
-		}
-		const uL = upper.x;
-		const uR = upper.x + upper.width;
-		const uT = upper.y;
-		const uB = upper.y + upper.height;
-		const lL = lower.x;
-		const lR = lower.x + lower.width;
-		const lT = lower.y;
-		const lB = lower.y + lower.height;
-		const overlapY = Math.max(0, Math.min(uB, lB) - Math.max(uT, lT));
-		if (overlapY > 0) {
-			const minX = Math.min(uL, lL);
-			const maxX = Math.max(uR, lR);
-			const minY = Math.min(uT, lT);
-			const maxY = Math.max(uB, lB);
-			return `polygon(${minX}px ${minY}px, ${maxX}px ${minY}px, ${maxX}px ${maxY}px, ${minX}px ${maxY}px)`;
-		}
-		let points = [];
-		if (hingeSide === "left") points = [
-			{
-				x: uL,
-				y: uT
-			},
-			{
-				x: uR,
-				y: uT
-			},
-			{
-				x: uR,
-				y: uB
-			},
-			{
-				x: uL,
-				y: uB
-			},
-			{
-				x: lL,
-				y: uB
-			},
-			{
-				x: lL,
-				y: lB
-			},
-			{
-				x: lR,
-				y: lB
-			},
-			{
-				x: lR,
-				y: lT
-			},
-			{
-				x: uL,
-				y: lT
-			},
-			{
-				x: uL,
-				y: uT
-			}
-		];
-		else points = [
-			{
-				x: uL,
-				y: uT
-			},
-			{
-				x: uR,
-				y: uT
-			},
-			{
-				x: uR,
-				y: uB
-			},
-			{
-				x: lR,
-				y: uB
-			},
-			{
-				x: lR,
-				y: lB
-			},
-			{
-				x: lL,
-				y: lB
-			},
-			{
-				x: lL,
-				y: lT
-			},
-			{
-				x: uR,
-				y: lT
-			},
-			{
-				x: uR,
-				y: uT
-			},
-			{
-				x: uL,
-				y: uT
-			}
-		];
-		const deduped = points.filter((p, i, arr) => i === 0 || !(p.x === arr[i - 1].x && p.y === arr[i - 1].y));
-		const coords = deduped.map((p) => `${p.x}px ${p.y}px`).join(", ");
-		return `polygon(${coords})`;
-	}
-	static generateTopCenterUnion(button, tooltip, gap) {
-		const minX = Math.min(button.x, tooltip.x);
-		const maxX = Math.max(button.x + button.width, tooltip.x + tooltip.width);
-		const minY = tooltip.y;
-		const maxY = button.y + button.height;
-		const borderRadius = 2;
-		const width = maxX - minX;
-		const height = maxY - minY;
-		return `polygon(${this.createRoundedRect(minX, minY, width, height, borderRadius)})`;
-	}
-	static generateBottomCenterUnion(button, tooltip, gap) {
-		const minX = Math.min(button.x, tooltip.x);
-		const maxX = Math.max(button.x + button.width, tooltip.x + tooltip.width);
-		const minY = button.y;
-		const maxY = tooltip.y + tooltip.height;
-		const borderRadius = 2;
-		const width = maxX - minX;
-		const height = maxY - minY;
-		return `polygon(${this.createRoundedRect(minX, minY, width, height, borderRadius)})`;
-	}
-	static generateLeftUnion(button, tooltip, gap) {
-		const minX = tooltip.x;
-		const maxX = button.x + button.width;
-		const minY = Math.min(button.y, tooltip.y);
-		const maxY = Math.max(button.y + button.height, tooltip.y + tooltip.height);
-		const borderRadius = 2;
-		const width = maxX - minX;
-		const height = maxY - minY;
-		return `polygon(${this.createRoundedRect(minX, minY, width, height, borderRadius)})`;
-	}
-	static generateRightUnion(button, tooltip, gap) {
-		const minX = button.x;
-		const maxX = tooltip.x + tooltip.width;
-		const minY = Math.min(button.y, tooltip.y);
-		const maxY = Math.max(button.y + button.height, tooltip.y + tooltip.height);
-		const borderRadius = 2;
-		const width = maxX - minX;
-		const height = maxY - minY;
-		return `polygon(${this.createRoundedRect(minX, minY, width, height, borderRadius)})`;
-	}
-	static createRoundedRect(x$1, y, width, height, radius) {
-		const r = Math.min(radius, width / 2, height / 2);
-		return [
-			`${x$1 + r}px ${y}px`,
-			`${x$1 + width - r}px ${y}px`,
-			`${x$1 + width}px ${y + r}px`,
-			`${x$1 + width}px ${y + height - r}px`,
-			`${x$1 + width - r}px ${y + height}px`,
-			`${x$1 + r}px ${y + height}px`,
-			`${x$1}px ${y + height - r}px`,
-			`${x$1}px ${y + r}px`
-		].join(", ");
-	}
-	static buildButtonClipPathPure(rect, paddingPx = 0) {
-		const x$1 = rect.x - paddingPx;
-		const y = rect.y - paddingPx;
-		const width = rect.width + 2 * paddingPx;
-		const height = rect.height + 2 * paddingPx;
-		const clipPath = `polygon(${x$1}px ${y}px, ${x$1 + width}px ${y}px, ${x$1 + width}px ${y + height}px, ${x$1}px ${y + height}px)`;
-		return clipPath;
-	}
-};
-function toPx(v) {
-	return typeof v === "number" ? `${v}px` : v;
-}
-function utilParsePx(value) {
-	if (typeof value === "number") return value;
-	if (typeof value === "string") {
-		if (value === "auto") throw new Error("Cannot parse \"auto\" value for pixel calculations. Please provide a specific pixel value.");
-		const match = value.match(/^(\d+(?:\.\d+)?)px$/);
-		if (match) return parseFloat(match[1]);
-		try {
-			if (typeof document !== "undefined" && document.body) {
-				const probe = document.createElement("div");
-				probe.style.position = "absolute";
-				probe.style.visibility = "hidden";
-				probe.style.width = value;
-				document.body.appendChild(probe);
-				const computed = window.getComputedStyle(probe).width;
-				document.body.removeChild(probe);
-				const m2 = computed.match(/^(\d+(?:\.\d+)?)px$/);
-				if (m2) return parseFloat(m2[1]);
-			}
-		} catch {}
-		throw new Error(`Invalid pixel value: "${value}". Expected format: "123px" or numeric value.`);
-	}
-	return 0;
-}
-function computeIframeSizePure(input) {
-	const p = input.paddingPx ?? 8;
-	const { buttonWidthPx: bw, buttonHeightPx: bh, tooltipWidthPx: tw, tooltipHeightPx: th, offsetPx: o, position } = input;
-	let width = 0, height = 0, buttonPositionX = 0, buttonPositionY = 0;
-	let flushClass = "flush-top-center";
-	switch (position) {
-		case "top-left":
-			flushClass = "flush-bottom-left";
-			width = Math.max(bw, tw) + p;
-			height = bh + o + th + p;
-			buttonPositionX = 0;
-			buttonPositionY = th + o;
-			break;
-		case "top-center":
-			flushClass = "flush-bottom-center";
-			width = Math.max(bw, tw) + p;
-			height = bh + o + th + p;
-			buttonPositionX = (width - bw) / 2;
-			buttonPositionY = th + o;
-			break;
-		case "top-right":
-			flushClass = "flush-bottom-right";
-			width = Math.max(bw, tw) + p;
-			height = bh + o + th + p;
-			buttonPositionX = width - bw;
-			buttonPositionY = th + o;
-			break;
-		case "left":
-			flushClass = "flush-right";
-			width = tw + o + bw + p;
-			height = Math.max(bh, th) + p;
-			buttonPositionX = tw + o;
-			buttonPositionY = (height - bh) / 2;
-			break;
-		case "right":
-			flushClass = "flush-left";
-			width = bw + o + tw + p;
-			height = Math.max(bh, th) + p;
-			buttonPositionX = 0;
-			buttonPositionY = (height - bh) / 2;
-			break;
-		case "bottom-left":
-			flushClass = "flush-top-left";
-			width = Math.max(bw, tw) + p;
-			height = bh + o + th + p;
-			buttonPositionX = 0;
-			buttonPositionY = 0;
-			break;
-		case "bottom-center":
-			flushClass = "flush-top-center";
-			width = Math.max(bw, tw) + p;
-			height = bh + o + th + p;
-			buttonPositionX = (width - bw) / 2;
-			buttonPositionY = 0;
-			break;
-		case "bottom-right":
-			flushClass = "flush-top-right";
-			width = Math.max(bw, tw) + p;
-			height = bh + o + th + p;
-			buttonPositionX = width - bw;
-			buttonPositionY = 0;
-			break;
-	}
-	return {
-		width,
-		height,
-		flushClass,
-		buttonPositionX,
-		buttonPositionY
-	};
-}
-function computeExpandedIframeSizeFromGeometryPure(input) {
-	const p = input.paddingPx ?? 8;
-	const g = input.geometry;
-	const right = Math.max(g.button.x + g.button.width, g.tooltip.x + g.tooltip.width);
-	const bottom = Math.max(g.button.y + g.button.height, g.tooltip.y + g.tooltip.height);
-	return {
-		width: Math.max(input.fallback.width, Math.ceil(right) + p),
-		height: Math.max(input.fallback.height, Math.ceil(bottom) + p)
-	};
-}
-
-//#endregion
-//#region src/core/WebAuthnManager/LitComponents/IframeButtonWithTooltipConfirmer/iframe-host.ts
-/**
-* Lit component that hosts the SecureTxConfirmButton iframe and manages all iframe communication.
-*/
-var IframeButtonHost = class extends LitElementWithProps {
-	static properties = {
-		nearAccountId: {
-			type: String,
-			attribute: "near-account-id"
-		},
-		txSigningRequests: {
-			type: Array,
-			hasChanged(_newVal, _oldVal) {
-				return true;
-			}
-		},
-		color: { type: String },
-		buttonTextElement: { type: String },
-		buttonStyle: {
-			type: Object,
-			hasChanged(newVal, oldVal) {
-				return JSON.stringify(newVal) !== JSON.stringify(oldVal);
-			}
-		},
-		buttonHoverStyle: {
-			type: Object,
-			hasChanged(newVal, oldVal) {
-				return JSON.stringify(newVal) !== JSON.stringify(oldVal);
-			}
-		},
-		tooltipPosition: {
-			type: Object,
-			hasChanged(newVal, oldVal) {
-				return JSON.stringify(newVal) !== JSON.stringify(oldVal);
-			}
-		},
-		txTreeTheme: {
-			type: String,
-			attribute: "tooltip-theme"
-		},
-		showLoading: {
-			type: Boolean,
-			attribute: "show-loading"
-		},
-		options: {
-			type: Object,
-			hasChanged(newVal, oldVal) {
-				return JSON.stringify(newVal) !== JSON.stringify(oldVal);
-			}
-		},
-		onSuccess: { type: Object },
-		onCancel: { type: Object },
-		onLoadTouchIdPrompt: { type: Object },
-		externalConfirm: { type: Object }
-	};
-	createRenderRoot() {
-		const root = super.createRenderRoot();
-		ensureExternalStyles(root, "iframe-button-host.css", "data-w3a-iframe-button-host-css").catch(() => {});
-		return root;
-	}
-	iframeInitialized = false;
-	currentGeometry = null;
-	clipPathSupported = false;
-	iframeRef = e();
-	hostRef = e();
-	tooltipVisible = false;
-	styleScopeClass = `w3a-host-${Math.random().toString(36).slice(2)}`;
-	scopedSheet = null;
-	onAssetsBaseSet = () => {
-		this.iframeInitialized = false;
-		this.initializeIframe();
-		this.iframeInitialized = true;
-	};
-	onDocPointerDown = (ev) => {
-		if (!this.tooltipVisible) return;
-		const hostEl = this.hostRef.value;
-		if (!hostEl) return;
-		const target = ev.target;
-		if (target && hostEl.contains(target)) return;
-		this.postToIframe("SET_TOOLTIP_VISIBILITY", false);
-	};
-	onSuccess;
-	onCancel;
-	onLoadTouchIdPrompt;
-	messageHandler;
-	pendingUiDigestResolve;
-	pendingUiDigestReject;
-	offEmbeddedBaseChange;
-	constructor() {
-		super();
-		this.nearAccountId = "";
-		this.txSigningRequests = [];
-		this.buttonStyle = {};
-		this.buttonHoverStyle = {};
-		this.buttonTextElement = "Sign Transaction";
-		this.tooltipPosition = {
-			width: "min(330px, calc(var(--w3a-vw, 100vw) - 1rem))",
-			height: "300px",
-			position: "top-center",
-			offset: "6px",
-			boxPadding: "5px"
-		};
-		this.txTreeTheme = "dark";
-		this.showLoading = false;
-		this.options = {};
-		this.externalConfirm = void 0;
-	}
-	connectedCallback() {
-		super.connectedCallback();
-		this.setupClipPathSupport();
-		this.applyButtonStyle();
-		this.offEmbeddedBaseChange = onEmbeddedBaseChange(() => this.onAssetsBaseSet());
-	}
-	updated(changedProperties) {
-		super.updated(changedProperties);
-		if (changedProperties.has("buttonStyle") || changedProperties.has("buttonHoverStyle") || changedProperties.has("tooltipPosition")) {
-			this.applyButtonStyle();
-			if (changedProperties.has("buttonStyle")) {
-				const w = this.buttonStyle?.width;
-				const isPercent = typeof w === "string" && /%\s*$/.test(w.trim());
-				if (isPercent) try {
-					requestAnimationFrame(() => this.forceIframeReinitialize());
-				} catch {
-					this.forceIframeReinitialize();
-				}
-			}
-		}
-		if (!this.iframeInitialized) {
-			this.initializeIframe();
-			this.iframeInitialized = true;
-		} else this.updateIframeViaPostMessage(changedProperties);
-	}
-	disconnectedCallback() {
-		super.disconnectedCallback();
-		if (this.messageHandler) {
-			window.removeEventListener("message", this.messageHandler);
-			this.messageHandler = void 0;
-		}
-		document.removeEventListener("pointerdown", this.onDocPointerDown, true);
-		this.offEmbeddedBaseChange?.();
-		this.offEmbeddedBaseChange = void 0;
-	}
-	applyButtonStyle() {
-		if (!this.buttonStyle) return;
-		const toDecls = (obj) => {
-			if (!obj) return "";
-			const skip = new Set(["width", "height"]);
-			return Object.entries(obj).filter(([k, v]) => v != null && !skip.has(k)).map(([k, v]) => `${this.camelToKebab(k)}: ${String(v)};`).join(" ");
-		};
-		const baseDecls = toDecls(this.buttonStyle);
-		const hoverDecls = toDecls(this.buttonHoverStyle);
-		const btnW = this.resolveButtonWidthString();
-		const btnH = toPx(this.buttonStyle?.height || "48px");
-		const iframeSize = this.calculateIframeSize();
-		const baseRules = `.iframe-button-host.${this.styleScopeClass} { display:inline-block; position:relative; width: var(--button-width, ${btnW}); height: var(--button-height, ${btnH}); box-sizing:border-box; }
-.iframe-button-host.${this.styleScopeClass} .host-button-visual { position:absolute; inset:0; display:grid; place-items:center; pointer-events:none; }
-.iframe-button-host.${this.styleScopeClass} iframe { position:absolute; border:0; background:transparent; color-scheme:normal; width:${iframeSize.width}px; height:${iframeSize.height}px; clip-path: var(--w3a-iframe-clip-path, none); }
-.iframe-button-host.${this.styleScopeClass} iframe.flush-top-left { top:0; left:0; }
-.iframe-button-host.${this.styleScopeClass} iframe.flush-top-center { top:0; left:50%; transform: translateX(-50%); }
-.iframe-button-host.${this.styleScopeClass} iframe.flush-top-right { top:0; right:0; }
-.iframe-button-host.${this.styleScopeClass} iframe.flush-left { top:50%; left:0; transform: translateY(-50%); }
-.iframe-button-host.${this.styleScopeClass} iframe.flush-right { top:50%; right:0; transform: translateY(-50%); }
-.iframe-button-host.${this.styleScopeClass} iframe.flush-bottom-left { bottom:0; left:0; }
-.iframe-button-host.${this.styleScopeClass} iframe.flush-bottom-center { bottom:0; left:50%; transform: translateX(-50%); }
-.iframe-button-host.${this.styleScopeClass} iframe.flush-bottom-right { bottom:0; right:0; }`;
-		const cssText = `${baseRules}\n.iframe-button-host.${this.styleScopeClass} { ${baseDecls} --button-width: ${btnW}; --button-height: ${btnH}; }\n.iframe-button-host.${this.styleScopeClass}[data-hovered=\"true\"] { ${hoverDecls} }`;
-		if (this.renderRoot instanceof ShadowRoot && "adoptedStyleSheets" in this.renderRoot && "replaceSync" in CSSStyleSheet.prototype) {
-			if (!this.scopedSheet) this.scopedSheet = new CSSStyleSheet();
-			try {
-				this.scopedSheet.replaceSync(cssText);
-			} catch {}
-			const sheets = this.renderRoot.adoptedStyleSheets || [];
-			if (!sheets.includes(this.scopedSheet)) this.renderRoot.adoptedStyleSheets = [...sheets, this.scopedSheet];
-		}
-		this.setCssVars({
-			"--button-width": btnW,
-			"--button-height": btnH
-		});
-	}
-	render() {
-		const iframeSize = this.calculateIframeSize();
-		return x`
-      <div class="iframe-button-host ${this.styleScopeClass}" ${n(this.hostRef)}>
-        <div class="host-button-visual"><slot>${this.buttonTextElement}</slot></div>
-        <!--
-          Embedded iframe hosting the secure button UI.
-          - ref(this.iframeRef): gives us a handle to contentWindow for postMessage.
-          - class="${iframeSize.flushClass}": positions the iframe relative to the host (top/left/center, etc.).
-          - width/height attributes: CSP‑safe sizing fallback computed in calculateIframeSize(); also updated later
-            via updateIframeSizeCss(). We avoid inline styles; external CSS + constructable sheets do the rest.
-          - sandbox="allow-scripts": runs srcdoc on an opaque origin (no allow‑same‑origin) for tighter isolation;
-            all coordination happens via postMessage; module/CSS assets load from our /sdk base with CORS enabled.
-          - Interaction window is further constrained at runtime via clip‑path set on the iframe through the
-            --w3a-iframe-clip-path CSS variable (button‑only vs button+tooltip), and an 'interactive' class toggle.
-        -->
-        <iframe
-          ${n(this.iframeRef)}
-          class="${iframeSize.flushClass}"
-          width="${iframeSize.width}"
-          height="${iframeSize.height}"
-          sandbox="allow-scripts allow-popups allow-popups-to-escape-sandbox"
-        ></iframe>
-      </div>
-    `;
-	}
-	calculateIframeSize() {
-		const { buttonWidth, buttonHeight } = this.resolveButtonSizePx();
-		const tooltipWidth = utilParsePx(this.tooltipPosition.width);
-		const tooltipHeight = this.tooltipPosition.height === "auto" ? 200 : utilParsePx(this.tooltipPosition.height);
-		const offset = utilParsePx(this.tooltipPosition.offset);
-		return computeIframeSizePure({
-			buttonWidthPx: buttonWidth,
-			buttonHeightPx: buttonHeight,
-			tooltipWidthPx: tooltipWidth,
-			tooltipHeightPx: tooltipHeight,
-			offsetPx: offset,
-			position: this.tooltipPosition.position,
-			paddingPx: 0
-		});
-	}
-	buildStyleDecls() {
-		const toDecls = (obj) => {
-			if (!obj) return "";
-			const skip = new Set(["width", "height"]);
-			return Object.entries(obj).filter(([k, v]) => v != null && !skip.has(k)).map(([k, v]) => `${this.camelToKebab(k)}: ${String(v)};`).join(" ");
-		};
-		const baseDecls = toDecls(this.buttonStyle);
-		const hoverDecls = toDecls(this.buttonHoverStyle);
-		const btnW = this.resolveButtonWidthString();
-		const btnH = toPx(this.buttonStyle?.height || "48px");
-		return {
-			baseDecls,
-			hoverDecls,
-			btnW,
-			btnH
-		};
-	}
-	updateIframeSizeCss(iframeW, iframeH) {
-		const { baseDecls, hoverDecls, btnW, btnH } = this.buildStyleDecls();
-		const baseRules = `.iframe-button-host.${this.styleScopeClass} { display:inline-block; position:relative; width: var(--button-width, ${btnW}); height: var(--button-height, ${btnH}); box-sizing:border-box; }\n.iframe-button-host.${this.styleScopeClass} .host-button-visual { position:absolute; inset:0; display:grid; place-items:center; pointer-events:none; }\n.iframe-button-host.${this.styleScopeClass} iframe { position:absolute; border:0; background:transparent; color-scheme:normal; clip-path: var(--w3a-iframe-clip-path, none); width:${iframeW}px; height:${iframeH}px; }\n.iframe-button-host.${this.styleScopeClass} iframe.flush-top-left { top:0; left:0; }\n.iframe-button-host.${this.styleScopeClass} iframe.flush-top-center { top:0; left:50%; transform: translateX(-50%); }\n.iframe-button-host.${this.styleScopeClass} iframe.flush-top-right { top:0; right:0; }\n.iframe-button-host.${this.styleScopeClass} iframe.flush-left { top:50%; left:0; transform: translateY(-50%); }\n.iframe-button-host.${this.styleScopeClass} iframe.flush-right { top:50%; right:0; transform: translateY(-50%); }\n.iframe-button-host.${this.styleScopeClass} iframe.flush-bottom-left { bottom:0; left:0; }\n.iframe-button-host.${this.styleScopeClass} iframe.flush-bottom-center { bottom:0; left:50%; transform: translateX(-50%); }\n.iframe-button-host.${this.styleScopeClass} iframe.flush-bottom-right { bottom:0; right:0; }`;
-		const cssText = `${baseRules}\n.iframe-button-host.${this.styleScopeClass} { ${baseDecls} --button-width: ${btnW}; --button-height: ${btnH}; }\n.iframe-button-host.${this.styleScopeClass}[data-hovered=\"true\"] { ${hoverDecls} }`;
-		if (this.renderRoot instanceof ShadowRoot && "adoptedStyleSheets" in this.renderRoot && "replaceSync" in CSSStyleSheet.prototype) {
-			if (!this.scopedSheet) this.scopedSheet = new CSSStyleSheet();
-			try {
-				this.scopedSheet.replaceSync(cssText);
-			} catch {}
-			const sheets = this.renderRoot.adoptedStyleSheets || [];
-			if (!sheets.includes(this.scopedSheet)) this.renderRoot.adoptedStyleSheets = [...sheets, this.scopedSheet];
-		}
-		const iframe = this.iframeRef.value;
-		if (iframe) {
-			iframe.setAttribute("width", String(iframeW));
-			iframe.setAttribute("height", String(iframeH));
-		}
-	}
-	buildInitData() {
-		const buttonSize = {
-			width: this.resolveButtonWidthString(),
-			height: this.buttonStyle?.height || "48px"
-		};
-		const iframeSize = this.calculateIframeSize();
-		return {
-			size: {
-				width: toPx(buttonSize.width),
-				height: toPx(buttonSize.height)
-			},
-			tooltip: {
-				width: toPx(this.tooltipPosition.width),
-				height: this.tooltipPosition.height,
-				position: this.tooltipPosition.position,
-				offset: toPx(this.tooltipPosition.offset)
-			},
-			buttonPosition: {
-				x: iframeSize.buttonPositionX,
-				y: iframeSize.buttonPositionY
-			},
-			backgroundColor: String(this.buttonStyle?.background || this.buttonStyle?.backgroundColor || this.color),
-			tagName: W3A_BUTTON_WITH_TOOLTIP_ID,
-			targetOrigin: window.location.origin
-		};
-	}
-	generateIframeHtml() {
-		const embeddedTxButtonTag = W3A_BUTTON_WITH_TOOLTIP_ID;
-		const iframeBootstrapTag = IFRAME_TX_BUTTON_BOOTSTRAP_MODULE;
-		const base = resolveEmbeddedBase();
-		const isAbsoluteBase = /^https?:/i.test(base);
-		if (!isAbsoluteBase) try {
-			console.warn("[W3A][IframeButtonHost] Embedded SDK base is not absolute. Skipping CSS preloads. Configure an absolute base so assets resolve: React → set TatchiPasskeyProvider config { iframeWallet: { walletOrigin: \"https://wallet.example.com\", sdkBasePath: \"/sdk\" } }, ");
-		} catch {}
-		return `<!DOCTYPE html>
-      <html>
-        <head>
-          <meta charset="utf-8" />
-          <meta name="viewport" content="width=device-width, initial-scale=1" />
-          <link rel="stylesheet" href="${base}wallet-service.css" />
-          ${isAbsoluteBase ? `<script src="${base}wallet-shims.js"><\/script>` : ""}
-          <!-- Pre-ensure critical stylesheets using absolute wallet base when available.
-               When the base isn't absolute yet (e.g., early dev), skip these here and let
-               in-iframe bootstrap ensure them to avoid host-origin ORB. -->
-          ${isAbsoluteBase ? `<link rel="stylesheet" href="${base}w3a-components.css" data-w3a-components-css />` : ""}
-          ${isAbsoluteBase ? `<link rel="stylesheet" href="${base}button-with-tooltip.css" data-w3a-button-tooltip-css />` : ""}
-          ${isAbsoluteBase ? `<link rel="stylesheet" href="${base}tx-tree.css" data-w3a-tx-tree-css />` : ""}
-          <script type="module" crossorigin="anonymous" src="${base}${embeddedTxButtonTag}.js"><\/script>
-          <script type="module" crossorigin="anonymous" src="${base}${iframeBootstrapTag}"><\/script>
-        </head>
-        <body class="w3a-transparent">
-          <${embeddedTxButtonTag} id="etx"></${embeddedTxButtonTag}>
-          <!-- bootstrap handled by external ${iframeBootstrapTag} module -->
-        </body>
-      </html>`;
-	}
-	initializeIframe() {
-		if (!this.iframeRef.value) {
-			console.warn("[IframeButtonHost]: ⚠️ No iframe ref available for initialization");
-			return;
-		}
-		const html = this.generateIframeHtml();
-		const iframeEl = this.iframeRef.value;
-		iframeEl.srcdoc = html;
-		this.setupMessageHandling();
-		this.setHostContainerToButtonSize();
-	}
-	setHostContainerToButtonSize() {
-		const buttonWidth = this.resolveButtonWidthString();
-		const buttonHeight = this.buttonStyle?.height || "48px";
-		this.setCssVars({
-			"--button-width": typeof buttonWidth === "number" ? `${buttonWidth}px` : String(buttonWidth),
-			"--button-height": typeof buttonHeight === "number" ? `${buttonHeight}px` : String(buttonHeight)
-		});
-	}
-	updateIframeViaPostMessage(changedProperties) {
-		if (!this.iframeRef.value?.contentWindow) return;
-		this.postToIframe("SET_TX_DATA", {
-			nearAccountId: this.nearAccountId,
-			txSigningRequests: this.txSigningRequests
-		});
-		if (changedProperties.has("showLoading")) {
-			this.postToIframe("SET_LOADING", this.showLoading);
-			this.onLoadTouchIdPrompt?.(!!this.showLoading);
-		}
-		if (changedProperties.has("buttonStyle") || changedProperties.has("buttonHoverStyle") || changedProperties.has("tooltipPosition") || changedProperties.has("txTreeTheme") || changedProperties.has("color")) {
-			this.postStyleUpdateToIframe();
-			if (changedProperties.has("buttonStyle")) this.setHostContainerToButtonSize();
-		}
-	}
-	getIframeWindow() {
-		return this.iframeRef.value?.contentWindow || null;
-	}
-	postToIframe(type, payload) {
-		const w = this.getIframeWindow();
-		if (!w) return;
-		w.postMessage({
-			type,
-			payload
-		}, "*");
-	}
-	postInitialStateToIframe() {
-		this.postToIframe("SET_TX_DATA", {
-			nearAccountId: this.nearAccountId,
-			txSigningRequests: this.txSigningRequests
-		});
-		this.postToIframe("SET_LOADING", !!this.showLoading);
-		this.postStyleUpdateToIframe();
-	}
-	postStyleUpdateToIframe() {
-		const buttonSize = {
-			width: this.resolveButtonWidthString(),
-			height: this.buttonStyle?.height || "48px"
-		};
-		const treeTheme = this.txTreeTheme === "dark" ? "dark" : "light";
-		const tooltipTreeStyles = TX_TREE_THEMES[treeTheme];
-		const stylePayload = {
-			buttonSizing: buttonSize,
-			tooltipPosition: this.tooltipPosition,
-			tooltipTreeStyles,
-			theme: treeTheme,
-			activationMode: "press"
-		};
-		this.postToIframe("SET_STYLE", stylePayload);
-		this.postToIframe("HS1_INIT", this.buildInitData());
-	}
-	setupMessageHandling() {
-		if (!this.iframeRef.value) return;
-		const onMessage = (e$1) => {
-			const w = this.getIframeWindow();
-			if (!w || e$1.source !== w) return;
-			const { type, payload } = e$1.data || {};
-			switch (type) {
-				case "IFRAME_ERROR":
-				case "IFRAME_UNHANDLED_REJECTION":
-					console.error("[IframeButton iframe]", type, payload);
-					return;
-				case "ETX_DEFINED":
-					this.postInitialStateToIframe();
-					return;
-				case "HS2_POSITIONED":
-					this.postToIframe("HS3_GEOMETRY_REQUEST");
-					return;
-				case "HS5_GEOMETRY_RESULT":
-					this.handleInitGeometry(payload);
-					return;
-				case "TOOLTIP_STATE":
-					this.handleTooltipState(payload);
-					return;
-				case "BUTTON_HOVER": {
-					const p = payload;
-					this.handleButtonHover(p);
-					{
-						const el = this.hostRef.value;
-						if (el) el.dataset.hovered = p?.hovering ? "true" : "false";
-					}
-					return;
-				}
-				case "BUTTON_FOCUS": {
-					const p = payload;
-					{
-						const el = this.hostRef.value;
-						if (el) el.dataset.focused = p?.focused ? "true" : "false";
-					}
-					return;
-				}
-				case "UI_INTENT_DIGEST": {
-					const p = payload;
-					if (p?.ok && p?.digest && this.pendingUiDigestResolve) this.pendingUiDigestResolve(p.digest);
-					else if (!p?.ok && this.pendingUiDigestReject) this.pendingUiDigestReject(new Error(p?.error || "UI digest failed"));
-					this.pendingUiDigestResolve = void 0;
-					this.pendingUiDigestReject = void 0;
-					return;
-				}
-				case "READY":
-					this.postToIframe("HS1_INIT", {
-						...this.buildInitData(),
-						targetOrigin: window.location.origin
-					});
-					this.applyOptimisticClipPath();
-					return;
-				case "CONFIRM":
-					this.handleConfirm();
-					return;
-				default: return;
-			}
-		};
-		if (this.messageHandler) window.removeEventListener("message", this.messageHandler);
-		this.messageHandler = onMessage;
-		window.addEventListener("message", onMessage);
-	}
-	setupClipPathSupport() {
-		this.clipPathSupported = CSS.supports("clip-path: polygon(0 0)");
-		if (!this.clipPathSupported) console.warn("[IframeButton] clip-path not supported, using rectangular iframe");
-	}
-	/**
-	* Apply clip-path using calculated button position before geometry is available
-	*/
-	applyOptimisticClipPath() {
-		if (!this.iframeRef.value) return;
-		const iframeSize = this.calculateIframeSize();
-		const { buttonWidth, buttonHeight } = this.resolveButtonSizePx();
-		const buttonX = iframeSize.buttonPositionX;
-		const buttonY = iframeSize.buttonPositionY;
-		const pad = 4;
-		const optimisticClipPath = `polygon(${buttonX - pad}px ${buttonY - pad}px, ${buttonX + buttonWidth + pad}px ${buttonY - pad}px, ${buttonX + buttonWidth + pad}px ${buttonY + buttonHeight + pad}px, ${buttonX - pad}px ${buttonY + buttonHeight + pad}px)`;
-		this.setIframeClipPath(optimisticClipPath);
-		this.iframeRef.value.classList.remove("interactive");
-	}
-	/**
-	* Resolves button width/height in pixels with robust handling of percentage and `auto` values.
-	* When a percentage is provided (e.g., '100%'), prefer measuring the host element’s width/height
-	* to avoid collapsing to 0 due to lack of a containing block during early layout.
-	*/
-	resolveButtonSizePx() {
-		const rawW = this.buttonStyle?.width ?? "200px";
-		const rawH = this.buttonStyle?.height ?? "48px";
-		const resolveOne = (raw, fallback, axis) => {
-			const isPlainPercent = typeof raw === "string" && /^\s*\d+(?:\.\d+)?%\s*$/.test(raw);
-			typeof raw === "string" && raw.includes("%");
-			const isAuto = raw === "auto";
-			if (isPlainPercent || isAuto) {
-				const host = this.hostRef?.value;
-				const rect = host?.getBoundingClientRect?.();
-				const measured = rect ? axis === "w" ? rect.width : rect.height : 0;
-				if (measured && measured > 0) return Math.ceil(measured);
-				const parent = host?.parentElement;
-				const prect = parent?.getBoundingClientRect?.();
-				const measuredParent = prect ? axis === "w" ? prect.width : prect.height : 0;
-				if (measuredParent && measuredParent > 0) return Math.ceil(measuredParent);
-				if (isPlainPercent) {
-					this.warnPercentWidthCollapseOnce();
-					return fallback;
-				}
-				try {
-					return utilParsePx(raw);
-				} catch {
-					return fallback;
-				}
-			}
-			try {
-				return utilParsePx(raw);
-			} catch {
-				return fallback;
-			}
-		};
-		const buttonWidth = resolveOne(rawW, 200, "w");
-		const buttonHeight = resolveOne(rawH, 48, "h");
-		return {
-			buttonWidth,
-			buttonHeight
-		};
-	}
-	/**
-	* Resolve the effective button width as a CSS string.
-	* - If buttonStyle is provided without width, default to '200px'.
-	* - If no buttonStyle is provided, default to 'min(100%, 420px)'.
-	* - If width is a plain percentage (e.g., '100%'), try to measure the host or its parent; if not
-	*   measurable yet, warn once and return the 200px fallback to avoid collapsing to 0.
-	* - If width is a number, return with 'px'.
-	*/
-	resolveButtonWidthString() {
-		const hasStyle = !!this.buttonStyle && Object.keys(this.buttonStyle).length > 0;
-		const hasExplicitWidth = this.buttonStyle && this.buttonStyle.width !== void 0 && String(this.buttonStyle.width).trim() !== "";
-		const rawW = hasExplicitWidth ? this.buttonStyle.width : hasStyle ? "200px" : "min(100%, 420px)";
-		const isPlainPercent = typeof rawW === "string" && /^\s*\d+(?:\.\d+)?%\s*$/.test(rawW);
-		if (isPlainPercent) {
-			const measured = this.resolveButtonSizePx();
-			return `${measured.buttonWidth}px`;
-		}
-		return typeof rawW === "number" ? `${rawW}px` : String(rawW);
-	}
-	_warnedPercentWidthCollapse = false;
-	warnPercentWidthCollapseOnce() {
-		if (this._warnedPercentWidthCollapse) return;
-		this._warnedPercentWidthCollapse = true;
-		try {
-			console.warn("[IframeButtonHost] buttonStyle.width is a percentage but container width is not measurable at init. Defaulting to 200px. Consider setting an explicit pixel width or ensuring the parent has a definite width.");
-		} catch {}
-	}
-	/**
-	* Apply clip-path that restricts interaction to button area only
-	*/
-	applyButtonOnlyClipPath() {
-		if (!this.iframeRef.value || !this.currentGeometry) return;
-		if (!this.clipPathSupported) return;
-		const { button } = this.currentGeometry;
-		const buttonClipPath = IframeClipPathGenerator.buildButtonClipPathPure(button, 4);
-		this.setIframeClipPath(buttonClipPath);
-		this.iframeRef.value.classList.remove("interactive");
-	}
-	/**
-	* Apply clip-path that includes both button and tooltip areas (for hover state)
-	*/
-	applyButtonTooltipClipPath() {
-		if (!this.iframeRef.value || !this.currentGeometry) return;
-		if (!this.clipPathSupported) return;
-		try {
-			const unionClipPath = IframeClipPathGenerator.generateUnion(this.currentGeometry, 8);
-			if (unionClipPath) {
-				this.setIframeClipPath(unionClipPath);
-				this.iframeRef.value.classList.add("interactive");
-			}
-		} catch (error) {
-			console.error("[IframeButton] Error generating button+tooltip clip-path:", error);
-			this.applyButtonOnlyClipPath();
-		}
-	}
-	/**
-	* Set iframe clip-path via CSS variable (CSP-safe).
-	*/
-	setIframeClipPath(path) {
-		const v = path && typeof path === "string" && path.trim().length ? path : "none";
-		this.setCssVars({ "--w3a-iframe-clip-path": v });
-	}
-	/**
-	* Force iframe re-initialization when tooltip style changes
-	* This recalculates iframe size and positioning based on new tooltip dimensions
-	*/
-	forceIframeReinitialize() {
-		this.iframeInitialized = false;
-		this.currentGeometry = null;
-		this.initializeIframe();
-		this.iframeInitialized = true;
-	}
-	/**
-	* Update tooltip theme dynamically - called by React component when user changes theme preference
-	*/
-	updateTheme(newTheme) {
-		this.txTreeTheme = newTheme;
-		if (this.iframeInitialized) this.postStyleUpdateToIframe();
-		this.requestUpdate();
-	}
-	/**
-	* Handle initial geometry setup from iframe
-	* Applies button-only clip-path to prevent blocking clicks
-	*/
-	handleInitGeometry(geometry) {
-		this.currentGeometry = geometry;
-		this.applyButtonOnlyClipPath();
-	}
-	/**
-	* Handle combined tooltip state updates (geometry + visibility) from the iframe
-	*/
-	handleTooltipState(geometry) {
-		this.currentGeometry = geometry;
-		const wasVisible = this.tooltipVisible;
-		this.tooltipVisible = !!geometry.visible;
-		if (!wasVisible && this.tooltipVisible) document.addEventListener("pointerdown", this.onDocPointerDown, true);
-		else if (wasVisible && !this.tooltipVisible) document.removeEventListener("pointerdown", this.onDocPointerDown, true);
-		if (!geometry.visible) {
-			this.applyButtonOnlyClipPath();
-			const iframe = this.iframeRef.value;
-			if (iframe) {
-				const size = this.calculateIframeSize();
-				this.updateIframeSizeCss(size.width, size.height);
-			}
-		} else {
-			const iframe = this.iframeRef.value;
-			if (iframe) {
-				const fallback = this.calculateIframeSize();
-				const size = computeExpandedIframeSizeFromGeometryPure({
-					geometry,
-					fallback,
-					paddingPx: 2
-				});
-				this.updateIframeSizeCss(size.width, size.height);
-			}
-			this.applyButtonTooltipClipPath();
-		}
-	}
-	/**
-	* Handle button hover state for dual clip-path management
-	* - Not hovering: Clip-path restricts to button area only
-	* - Hovering: Clip-path expands to include button + tooltip area
-	*/
-	handleButtonHover(payload) {
-		if (!this.iframeRef.value || !this.currentGeometry) return;
-		if (payload.hovering) this.applyButtonTooltipClipPath();
-		else if (!this.currentGeometry.visible) this.applyButtonOnlyClipPath();
-	}
-	requestUiIntentDigest() {
-		return new Promise((resolve, reject) => {
-			if (!this.getIframeWindow()) return reject(/* @__PURE__ */ new Error("iframe not ready"));
-			if (this.pendingUiDigestReject) this.pendingUiDigestReject(/* @__PURE__ */ new Error("superseded"));
-			this.pendingUiDigestResolve = resolve;
-			this.pendingUiDigestReject = reject;
-			this.postToIframe("REQUEST_UI_DIGEST");
-			setTimeout(() => {
-				if (this.pendingUiDigestReject) {
-					this.pendingUiDigestReject(/* @__PURE__ */ new Error("UI digest timeout"));
-					this.pendingUiDigestResolve = void 0;
-					this.pendingUiDigestReject = void 0;
-				}
-			}, 3e3);
-		});
-	}
-	async handleConfirm() {
-		if (!this.nearAccountId || !this.txSigningRequests || this.txSigningRequests.length === 0) {
-			const err = /* @__PURE__ */ new Error("Missing required data for transaction");
-			this.options?.onError?.(err);
-			return;
-		}
-		this.postToIframe("SET_LOADING", true);
-		this.onLoadTouchIdPrompt?.(true);
-		try {
-			let txResults;
-			if (typeof this.externalConfirm === "function") {
-				const treeTheme = this.txTreeTheme === "dark" ? "dark" : "light";
-				txResults = await this.externalConfirm({
-					nearAccountId: this.nearAccountId,
-					txSigningRequests: this.txSigningRequests,
-					options: {
-						onEvent: this.options?.onEvent,
-						onError: this.options?.onError,
-						waitUntil: this.options?.waitUntil,
-						executionWait: this.options?.executionWait,
-						confirmationConfig: this.options?.confirmationConfig
-					},
-					theme: treeTheme
-				});
-			} else throw new Error("No external confirm handler provided");
-			this.onSuccess?.(txResults);
-		} catch (err) {
-			const error = err instanceof Error ? err : new Error(String(err));
-			this.options?.onError?.(error);
-		} finally {
-			this.postToIframe("SET_LOADING", false);
-			this.onLoadTouchIdPrompt?.(false);
-		}
-	}
-};
-defineTag("txButton", IframeButtonHost);
-var iframe_host_default = IframeButtonHost;
-
-//#endregion
-export { IframeButtonHost, getEmbeddedBase, iframe_host_default, onEmbeddedBaseChange, setEmbeddedBase };