@tatchi-xyz/sdk 0.21.0 → 0.31.1

package/dist/cjs/core/WebAuthnManager/LitComponents/IframeButtonWithTooltipConfirmer/iframe-host.js

@@ -1,707 +0,0 @@
-const require_rolldown_runtime = require('../../../../_virtual/rolldown_runtime.js');
-const require_base = require('../../../sdkPaths/base.js');
-const require_tags = require('../tags.js');
-const require_LitElementWithProps = require('../LitElementWithProps.js');
-const require_asset_base = require('../asset-base.js');
-const require_css_loader = require('../css/css-loader.js');
-const require_tx_tree_themes = require('../TxTree/tx-tree-themes.js');
-const require_iframe_geometry = require('./iframe-geometry.js');
-let lit = require("lit");
-lit = require_rolldown_runtime.__toESM(lit);
-let lit_directives_ref_js = require("lit/directives/ref.js");
-lit_directives_ref_js = require_rolldown_runtime.__toESM(lit_directives_ref_js);
-
-//#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 require_LitElementWithProps.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();
-		require_css_loader.ensureExternalStyles(root, "iframe-button-host.css", "data-w3a-iframe-button-host-css").catch(() => {});
-		return root;
-	}
-	iframeInitialized = false;
-	currentGeometry = null;
-	clipPathSupported = false;
-	iframeRef = (0, lit_directives_ref_js.createRef)();
-	hostRef = (0, lit_directives_ref_js.createRef)();
-	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 = require_base.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 = require_iframe_geometry.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 lit.html`
-      <div class="iframe-button-host ${this.styleScopeClass}" ${(0, lit_directives_ref_js.ref)(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
-          ${(0, lit_directives_ref_js.ref)(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 = require_iframe_geometry.utilParsePx(this.tooltipPosition.width);
-		const tooltipHeight = this.tooltipPosition.height === "auto" ? 200 : require_iframe_geometry.utilParsePx(this.tooltipPosition.height);
-		const offset = require_iframe_geometry.utilParsePx(this.tooltipPosition.offset);
-		return require_iframe_geometry.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 = require_iframe_geometry.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: require_iframe_geometry.toPx(buttonSize.width),
-				height: require_iframe_geometry.toPx(buttonSize.height)
-			},
-			tooltip: {
-				width: require_iframe_geometry.toPx(this.tooltipPosition.width),
-				height: this.tooltipPosition.height,
-				position: this.tooltipPosition.position,
-				offset: require_iframe_geometry.toPx(this.tooltipPosition.offset)
-			},
-			buttonPosition: {
-				x: iframeSize.buttonPositionX,
-				y: iframeSize.buttonPositionY
-			},
-			backgroundColor: String(this.buttonStyle?.background || this.buttonStyle?.backgroundColor || this.color),
-			tagName: require_tags.W3A_BUTTON_WITH_TOOLTIP_ID,
-			targetOrigin: window.location.origin
-		};
-	}
-	generateIframeHtml() {
-		const embeddedTxButtonTag = require_tags.W3A_BUTTON_WITH_TOOLTIP_ID;
-		const iframeBootstrapTag = require_tags.IFRAME_TX_BUTTON_BOOTSTRAP_MODULE;
-		const base = require_asset_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$1 = this.generateIframeHtml();
-		const iframeEl = this.iframeRef.value;
-		iframeEl.srcdoc = html$1;
-		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 = require_tx_tree_themes.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) => {
-			const w = this.getIframeWindow();
-			if (!w || e.source !== w) return;
-			const { type, payload } = e.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 require_iframe_geometry.utilParsePx(raw);
-				} catch {
-					return fallback;
-				}
-			}
-			try {
-				return require_iframe_geometry.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 = require_iframe_geometry.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 = require_iframe_geometry.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 = require_iframe_geometry.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);
-		}
-	}
-};
-require_tags.defineTag("txButton", IframeButtonHost);
-var iframe_host_default = IframeButtonHost;
-
-//#endregion
-exports.IframeButtonHost = IframeButtonHost;
-exports.default = iframe_host_default;
-//# sourceMappingURL=iframe-host.js.map