@tatchi-xyz/sdk 0.21.0 → 0.31.1

package/dist/esm/sdk/tx-confirmer-wrapper-DWKpXTUW.js

@@ -0,0 +1,3248 @@
+import { LitElementWithProps, M, T, e, e$1, ensureExternalStyles, i as i$1, i$1 as i, m, n, p, s, t, v, x } from "./css-loader-CAIkFQ3i.js";
+import { isNumber, isObject, isString } from "./validation-BTq6LGPp.js";
+import { WalletIframeDomEvents } from "./events-D2g80q67.js";
+import { fromTransactionInputsWasm, isActionArgsWasm, toActionArgsWasm } from "./actions-fHadejPs.js";
+import { computeUiIntentDigestFromTxs, orderActionForDigest } from "./intentDigest-yivVENNK.js";
+import { W3A_DRAWER_ID, W3A_DRAWER_TX_CONFIRMER_ID, W3A_HALO_BORDER_ID, W3A_MODAL_TX_CONFIRMER_ID, W3A_PASSKEY_HALO_LOADING_ID, W3A_TX_CONFIRMER_ID, W3A_TX_CONFIRM_CONTENT_ID, W3A_TX_TREE_ID } from "./tags-ByzxP7Cc.js";
+import { dispatchLitCancel, dispatchLitConfirm, dispatchLitTreeToggled } from "./lit-events-Bb4tAEO2.js";
+
+//#region src/core/WebAuthnManager/LitComponents/Drawer/index.ts
+const SHEET_HEIGHT_VH = 100;
+const DEFAULT_VISIBLE_VH = 50;
+const FLICK_UP_CLOSE_THRESHOLD = -.6;
+const FLICK_DOWN_CLOSE_THRESHOLD = .7;
+const NEAR_CLOSED_PX = 50;
+const OVERPULL_SHEET_FACTOR = .5;
+const OVERPULL_VIEWPORT_FACTOR = .5;
+function clamp(n$1, min, max) {
+	return Math.max(min, Math.min(max, n$1));
+}
+var DrawerElement = class extends LitElementWithProps {
+	static properties = {
+		open: {
+			type: Boolean,
+			reflect: true
+		},
+		theme: {
+			type: String,
+			reflect: true
+		},
+		loading: { type: Boolean },
+		errorMessage: { type: String },
+		dragToClose: {
+			type: Boolean,
+			attribute: "drag-to-close"
+		},
+		showCloseButton: {
+			type: Boolean,
+			attribute: "show-close-button"
+		},
+		height: { type: String },
+		overpullPx: {
+			type: Number,
+			attribute: "overpull-px"
+		}
+	};
+	isDragging = false;
+	pendingDrag = false;
+	startY = 0;
+	currentY = 0;
+	dragDistance = 0;
+	lastDragTime = 0;
+	velocity = 0;
+	drawerElement = null;
+	overlayElement = null;
+	bodyElement = null;
+	drawerHeight = 0;
+	startTranslateYPx = 0;
+	openRestTranslateYPx = 0;
+	dragStartTime = 0;
+	isClosing = false;
+	aboveFoldResizeObserver;
+	drawerResizeObserver;
+	detachViewportSync;
+	_syncRAF = null;
+	_lastOpenTranslatePct;
+	_contentAnimRAF = null;
+	_activeHeightTransitions = 0;
+	detachContentAnimSync;
+	_initialMount = true;
+	_firstOpen = true;
+	_stylesReady = false;
+	_stylePromises = [];
+	_stylesAwaiting = null;
+	_childObserver = null;
+	createRenderRoot() {
+		const root = this;
+		const p$1 = ensureExternalStyles(root, "drawer.css", "data-w3a-drawer-css");
+		this._stylePromises.push(p$1);
+		p$1.catch(() => {});
+		return root;
+	}
+	constructor() {
+		super();
+		this.open = false;
+		this.theme = "dark";
+		this.loading = false;
+		this.dragToClose = true;
+		this.showCloseButton = true;
+		this.height = void 0;
+		this.overpullPx = 120;
+	}
+	getComponentPrefix() {
+		return "modal";
+	}
+	_initialChildren = null;
+	connectedCallback() {
+		if (!this._initialChildren) {
+			this._initialChildren = Array.from(this.childNodes);
+			try {
+				for (const n$1 of this._initialChildren) this.removeChild(n$1);
+			} catch {}
+		}
+		super.connectedCallback();
+		this.attachViewportSync();
+	}
+	shouldUpdate(_changed) {
+		if (this._stylesReady) return true;
+		if (!this._stylesAwaiting) {
+			const settle = Promise.all(this._stylePromises).then(() => new Promise((r) => requestAnimationFrame(() => requestAnimationFrame(() => r()))));
+			this._stylesAwaiting = settle.then(() => {
+				this._stylesReady = true;
+				this.requestUpdate();
+			});
+		}
+		return false;
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this.removeDragListeners();
+		this.drawerElement?.removeEventListener("transitionend", this.handleTransitionEnd);
+		this.aboveFoldResizeObserver?.disconnect();
+		this.drawerResizeObserver?.disconnect();
+		if (this.detachViewportSync) {
+			this.detachViewportSync();
+			this.detachViewportSync = void 0;
+		}
+		if (this.detachContentAnimSync) {
+			this.detachContentAnimSync();
+			this.detachContentAnimSync = void 0;
+		}
+		if (this._childObserver) {
+			this._childObserver.disconnect();
+			this._childObserver = null;
+		}
+	}
+	attributeChangedCallback(name, oldVal, newVal) {
+		super.attributeChangedCallback?.(name, oldVal, newVal);
+		if (name === "open" && newVal !== oldVal) {
+			if (newVal !== null) this.isClosing = false;
+		}
+	}
+	firstUpdated() {
+		const root = this.renderRoot;
+		this.drawerElement = root.querySelector(".drawer");
+		this.overlayElement = root.querySelector(".overlay");
+		this.bodyElement = root.querySelector(".body");
+		this.syncCssVarsForOpenTranslate();
+		try {
+			this.setCssVars({ "--w3a-drawer__drag-translate": "var(--w3a-drawer__open-translate)" });
+		} catch {}
+		requestAnimationFrame(() => {
+			this._initialMount = false;
+			this.requestUpdate();
+		});
+		this.drawerElement?.addEventListener("transitionend", this.handleTransitionEnd);
+		this.setupAnimateWithContentSync();
+		window.addEventListener("resize", this.syncCssVarsForOpenTranslate.bind(this));
+		const above = root.querySelector(".above-fold");
+		if (above && "ResizeObserver" in window) {
+			this.aboveFoldResizeObserver = new ResizeObserver(() => this.syncCssVarsForOpenTranslate());
+			this.aboveFoldResizeObserver.observe(above);
+		}
+		if (this.drawerElement && "ResizeObserver" in window) {
+			this.drawerResizeObserver = new ResizeObserver(() => this.syncCssVarsForOpenTranslate());
+			this.drawerResizeObserver.observe(this.drawerElement);
+		}
+		this.setupDragListeners();
+		this.adoptContentIntoSlot();
+		this._childObserver = new MutationObserver(() => this.adoptContentIntoSlot());
+		this._childObserver.observe(this, { childList: true });
+	}
+	updated(changedProperties) {
+		super.updated(changedProperties);
+		if (changedProperties.has("open")) if (this.open) {
+			this.isClosing = false;
+			this._firstOpen = false;
+			this.dispatchEvent(new CustomEvent("w3a:drawer-open-start", {
+				bubbles: true,
+				composed: true
+			}));
+		} else this.dispatchEvent(new CustomEvent("w3a:drawer-close-start", {
+			bubbles: true,
+			composed: true
+		}));
+		if (changedProperties.has("dragToClose")) {
+			this.removeDragListeners();
+			this.setupDragListeners();
+		}
+		if (changedProperties.has("height") || changedProperties.has("open")) setTimeout(() => this.syncCssVarsForOpenTranslate(), 0);
+	}
+	adoptContentIntoSlot() {
+		const root = this.renderRoot;
+		const above = root.querySelector(".above-fold");
+		if (!above) return;
+		const host = this;
+		const toMove = [];
+		host.childNodes.forEach((n$1) => {
+			if (n$1.nodeType !== Node.ELEMENT_NODE) return;
+			const el = n$1;
+			if (el.classList?.contains("overlay")) return;
+			if (el.classList?.contains("drawer")) return;
+			toMove.push(n$1);
+		});
+		toMove.forEach((n$1) => above.appendChild(n$1));
+		this.syncCssVarsForOpenTranslate();
+	}
+	get contentRoot() {
+		const root = this.renderRoot;
+		return root && root.querySelector(".above-fold") || null;
+	}
+	getVisibleVh() {
+		const h = (this.height || "").trim();
+		const m$1 = h.match(/^([0-9]+(?:\.[0-9]+)?)\s*(d?vh|svh|lvh|vh)$/i);
+		if (m$1) return clamp(parseFloat(m$1[1]), 0, 100);
+		return DEFAULT_VISIBLE_VH;
+	}
+	getOpenTranslateRatio() {
+		const visible = this.getVisibleVh();
+		return clamp((SHEET_HEIGHT_VH - visible) / SHEET_HEIGHT_VH, 0, 1);
+	}
+	_performSyncCssVarsForOpenTranslate() {
+		const drawer = this.drawerElement;
+		if (!drawer) return;
+		if (this.isDragging || this.pendingDrag) return;
+		const h = (this.height || "").trim();
+		const m$1 = h.match(/^([0-9]+(?:\.[0-9]+)?)\s*(d?vh|svh|lvh|vh)$/i);
+		if (m$1) {
+			const unit$1 = (m$1[2] || "vh").toLowerCase();
+			const visibleVh = clamp(parseFloat(m$1[1]), 0, 100);
+			const pct$1 = clamp(100 - visibleVh, 0, 100);
+			this.setCssVars({ "--w3a-drawer__sheet-height": `100${unit$1}` });
+			if (!this.open) this.setCssVars({ "--w3a-drawer__open-translate": pct$1 + "%" });
+			return;
+		}
+		const unit = typeof CSS !== "undefined" && CSS.supports && CSS.supports("height", "1dvh") ? "dvh" : "vh";
+		this.setCssVars({ "--w3a-drawer__sheet-height": `${SHEET_HEIGHT_VH}${unit}` });
+		const root = this.renderRoot;
+		const above = root.querySelector(".above-fold");
+		if (!above) return;
+		const drawerRect = drawer.getBoundingClientRect();
+		const aboveRect = above.getBoundingClientRect();
+		const contentBottomPx = Math.max(0, Math.round(aboveRect.bottom - drawerRect.top));
+		const sheetPx = drawer.offsetHeight || (typeof window !== "undefined" ? window.innerHeight : contentBottomPx);
+		const measured = clamp(1 - contentBottomPx / Math.max(1, sheetPx), 0, 1);
+		const ratio = measured;
+		const pct = (ratio * 100).toFixed(4) + "%";
+		if (pct === this._lastOpenTranslatePct) return;
+		if (this.open) this.drawerElement?.classList.remove("vv-sync");
+		this.setCssVars({ "--w3a-drawer__open-translate": pct });
+		this._lastOpenTranslatePct = pct;
+	}
+	syncCssVarsForOpenTranslate() {
+		if (this._syncRAF != null) return;
+		this._syncRAF = requestAnimationFrame(() => {
+			this._syncRAF = null;
+			this._performSyncCssVarsForOpenTranslate();
+		});
+	}
+	handleTransitionEnd = (e$2) => {
+		if (!this.drawerElement) return;
+		if (e$2.target !== this.drawerElement) return;
+		if (e$2.propertyName !== "transform") return;
+		const type = this.open ? "w3a:drawer-open-end" : "w3a:drawer-close-end";
+		this.dispatchEvent(new CustomEvent(type, {
+			bubbles: true,
+			composed: true
+		}));
+	};
+	setupAnimateWithContentSync() {
+		const root = this.renderRoot;
+		const host = root.querySelector(".drawer");
+		if (!host) return;
+		const ensureLoop = () => {
+			if (this._contentAnimRAF != null) return;
+			const step = () => {
+				this._contentAnimRAF = null;
+				this._performSyncCssVarsForOpenTranslate();
+				this._contentAnimRAF = requestAnimationFrame(step);
+			};
+			this._contentAnimRAF = requestAnimationFrame(step);
+		};
+		const stopLoop = () => {
+			if (this._contentAnimRAF != null) {
+				cancelAnimationFrame(this._contentAnimRAF);
+				this._contentAnimRAF = null;
+			}
+			this.syncCssVarsForOpenTranslate();
+		};
+		const syncTimingFromElement = (el) => {
+			const cs = getComputedStyle(el);
+			const props = (cs.transitionProperty || "").split(",").map((s$1) => s$1.trim());
+			const durations = (cs.transitionDuration || "").split(",").map((s$1) => s$1.trim());
+			const easings = (cs.transitionTimingFunction || "").split(",").map((s$1) => s$1.trim());
+			let idx = props.findIndex((p$1) => p$1 === "height");
+			if (idx < 0) idx = props.findIndex((p$1) => p$1 === "all");
+			if (idx < 0) idx = 0;
+			const dur = durations[Math.min(idx, durations.length - 1)] || "100ms";
+			const ease = easings[Math.min(idx, easings.length - 1)] || "cubic-bezier(0.2, 0.6, 0.2, 1)";
+			this.setCssVars({
+				"--w3a-drawer__transition-duration": dur,
+				"--w3a-drawer__transition-easing": ease
+			});
+		};
+		const onRun = (ev) => {
+			const e$2 = ev;
+			if (!this.open) return;
+			if (e$2.propertyName !== "height") return;
+			this._activeHeightTransitions++;
+			ensureLoop();
+		};
+		const onStart = (ev) => {
+			const e$2 = ev;
+			if (!this.open) return;
+			if (e$2.propertyName !== "height") return;
+			if (e$2.target && e$2.target instanceof Element) syncTimingFromElement(e$2.target);
+			this._activeHeightTransitions++;
+			ensureLoop();
+		};
+		const onEnd = (ev) => {
+			const e$2 = ev;
+			if (e$2.propertyName !== "height") return;
+			this._activeHeightTransitions = Math.max(0, this._activeHeightTransitions - 1);
+			if (this._activeHeightTransitions === 0) stopLoop();
+		};
+		host.addEventListener("transitionrun", onRun, true);
+		host.addEventListener("transitionstart", onStart, true);
+		host.addEventListener("transitionend", onEnd, true);
+		this.detachContentAnimSync = () => {
+			host.removeEventListener("transitionrun", onRun, true);
+			host.removeEventListener("transitionstart", onStart, true);
+			host.removeEventListener("transitionend", onEnd, true);
+			if (this._contentAnimRAF != null) {
+				cancelAnimationFrame(this._contentAnimRAF);
+				this._contentAnimRAF = null;
+			}
+			this._activeHeightTransitions = 0;
+		};
+	}
+	setupDragListeners() {
+		if (!this.dragToClose) return;
+		setTimeout(() => {
+			const root = this.renderRoot;
+			const drawerElement = root.querySelector(".drawer");
+			if (!drawerElement) {
+				console.warn("Drawer element not found for drag listeners");
+				return;
+			}
+			this.removeDragListeners();
+			const supportsPointer = typeof window !== "undefined" && "PointerEvent" in window;
+			if (supportsPointer) {
+				drawerElement.addEventListener("pointerdown", this.handlePointerDown, { capture: true });
+				document.addEventListener("pointermove", this.handlePointerMove);
+				document.addEventListener("pointerup", this.handlePointerUp);
+				document.addEventListener("pointercancel", this.handlePointerCancel);
+			} else {
+				drawerElement.addEventListener("mousedown", this.handleMouseDown, { capture: true });
+				document.addEventListener("mousemove", this.handleMouseMove);
+				document.addEventListener("mouseup", this.handleMouseUp);
+				drawerElement.addEventListener("touchstart", this.handleTouchStart, {
+					passive: false,
+					capture: true
+				});
+				document.addEventListener("touchmove", this.handleTouchMove, { passive: false });
+				document.addEventListener("touchend", this.handleTouchEnd, { passive: false });
+			}
+		}, 0);
+	}
+	attachViewportSync() {
+		const root = this.renderRoot;
+		const drawerElement = root.querySelector(".drawer");
+		if (!drawerElement) return;
+		const vv = typeof window !== "undefined" ? window.visualViewport : void 0;
+		const schedule = () => this.suppressTransitionForViewportTick();
+		window.addEventListener("resize", schedule, { passive: true });
+		window.addEventListener("orientationchange", schedule, { passive: true });
+		vv && vv.addEventListener && vv.addEventListener("resize", schedule);
+		vv && vv.addEventListener && vv.addEventListener("scroll", schedule);
+		this.detachViewportSync = () => {
+			window.removeEventListener("resize", schedule);
+			window.removeEventListener("orientationchange", schedule);
+			vv && vv.removeEventListener && vv.removeEventListener("resize", schedule);
+			vv && vv.removeEventListener && vv.removeEventListener("scroll", schedule);
+		};
+	}
+	suppressTransitionForViewportTick() {
+		const root = this.renderRoot;
+		const drawerElement = root.querySelector(".drawer");
+		if (!drawerElement) return;
+		if (!this.isDragging) drawerElement.classList.add("vv-sync");
+	}
+	removeDragListeners() {
+		const root = this.renderRoot;
+		const drawerElement = root.querySelector(".drawer");
+		if (!drawerElement) return;
+		drawerElement.removeEventListener("touchstart", this.handleTouchStart);
+		drawerElement.removeEventListener("mousedown", this.handleMouseDown);
+		drawerElement.removeEventListener("pointerdown", this.handlePointerDown);
+		document.removeEventListener("touchmove", this.handleTouchMove);
+		document.removeEventListener("touchend", this.handleTouchEnd);
+		document.removeEventListener("mousemove", this.handleMouseMove);
+		document.removeEventListener("mouseup", this.handleMouseUp);
+		document.removeEventListener("pointermove", this.handlePointerMove);
+		document.removeEventListener("pointerup", this.handlePointerUp);
+		document.removeEventListener("pointercancel", this.handlePointerCancel);
+	}
+	handlePointerDown = (e$2) => {
+		if (this.loading || !this.open) return;
+		if (e$2.pointerType === "mouse" && e$2.button !== 0) return;
+		this.pendingDrag = true;
+		this.startY = e$2.clientY;
+		this.currentY = e$2.clientY;
+		this.dragStartTime = Date.now();
+	};
+	handlePointerMove = (e$2) => {
+		if (!this.pendingDrag && !this.isDragging) return;
+		const y = e$2.clientY;
+		if (this.pendingDrag) {
+			const dy = y - this.startY;
+			const absDy = Math.abs(dy);
+			const ACTIVATE_PX = 8;
+			const body = this.bodyElement;
+			const atTop = !body || body.scrollTop <= 0;
+			if (absDy >= ACTIVATE_PX && atTop) {
+				this.pendingDrag = false;
+				this.startDrag(this.startY);
+				e$2.target?.setPointerCapture?.(e$2.pointerId);
+			} else return;
+		}
+		if (this.isDragging) {
+			this.updateDrag(y);
+			e$2.preventDefault();
+		}
+	};
+	handlePointerUp = (e$2) => {
+		if (this.pendingDrag) this.pendingDrag = false;
+		if (this.isDragging) {
+			this.endDrag();
+			e$2.preventDefault();
+		}
+		e$2.target?.releasePointerCapture?.(e$2.pointerId);
+	};
+	handlePointerCancel = (e$2) => {
+		if (this.pendingDrag) this.pendingDrag = false;
+		if (this.isDragging) this.endDrag();
+		e$2.target?.releasePointerCapture?.(e$2.pointerId);
+	};
+	handleTouchStart = (e$2) => {
+		if (this.loading || !this.open) return;
+		const target = e$2.target;
+		if (target && target.closest && target.closest(".close-btn")) return;
+		const touch = e$2.touches[0];
+		this.pendingDrag = true;
+		this.startY = touch.clientY;
+		this.currentY = touch.clientY;
+	};
+	handleTouchMove = (e$2) => {
+		const touch = e$2.touches[0];
+		if (this.pendingDrag && !this.isDragging) {
+			const dy = touch.clientY - this.startY;
+			const absDy = Math.abs(dy);
+			const ACTIVATE_PX = 8;
+			const body = this.bodyElement;
+			body && (body.scrollHeight, body.clientHeight);
+			const atTop = !body || body.scrollTop <= 0;
+			if (absDy >= ACTIVATE_PX) {
+				if (atTop) {
+					this.startDrag(this.startY);
+					this.isDragging = true;
+					this.pendingDrag = false;
+				}
+			}
+		}
+		if (!this.isDragging) return;
+		this.updateDrag(touch.clientY);
+		e$2.preventDefault();
+	};
+	handleTouchEnd = (e$2) => {
+		this.pendingDrag = false;
+		if (!this.isDragging) return;
+		this.endDrag();
+		e$2.preventDefault();
+	};
+	handleMouseDown = (e$2) => {
+		if (this.loading || !this.open) return;
+		this.startDrag(e$2.clientY);
+		e$2.preventDefault();
+	};
+	handleMouseMove = (e$2) => {
+		if (!this.isDragging) return;
+		this.updateDrag(e$2.clientY);
+		e$2.preventDefault();
+	};
+	handleMouseUp = (e$2) => {
+		if (!this.isDragging) return;
+		this.endDrag();
+		e$2.preventDefault();
+	};
+	startDrag(y) {
+		this.isDragging = true;
+		this.startY = y;
+		this.currentY = y;
+		this.dragDistance = 0;
+		this.dragStartTime = Date.now();
+		this.lastDragTime = this.dragStartTime;
+		this.velocity = 0;
+		if (this.drawerElement) {
+			this.drawerHeight = this.drawerElement.offsetHeight;
+			this.openRestTranslateYPx = this.drawerHeight * this.getOpenTranslateRatio();
+			const computed = getComputedStyle(this.drawerElement);
+			const transform = computed.transform || "";
+			const ty = this.parseTranslateY(transform);
+			this.startTranslateYPx = Number.isFinite(ty) ? ty : this.openRestTranslateYPx;
+			if (Number.isFinite(ty)) this.openRestTranslateYPx = ty;
+			this.setCssVars({ "--w3a-drawer__drag-translate": `${this.startTranslateYPx}px` });
+			try {
+				this.drawerElement.offsetHeight;
+			} catch {}
+			this.drawerElement.classList.add("dragging");
+		}
+	}
+	updateDrag(y) {
+		if (!this.isDragging || !this.drawerElement) return;
+		const now = Date.now();
+		const deltaTime = now - this.lastDragTime;
+		const deltaY = y - this.currentY;
+		if (deltaTime > 0) this.velocity = deltaY / deltaTime;
+		this.currentY = y;
+		this.dragDistance = y - this.startY;
+		const viewportHalf = typeof window !== "undefined" && window.innerHeight ? window.innerHeight * OVERPULL_VIEWPORT_FACTOR : 0;
+		const maxOverdragUpPx = Math.max(this.drawerHeight * OVERPULL_SHEET_FACTOR, viewportHalf, this.overpullPx);
+		const rawTargetTranslateY = this.startTranslateYPx + this.dragDistance;
+		let targetTranslateY = rawTargetTranslateY;
+		if (rawTargetTranslateY < this.openRestTranslateYPx) {
+			const overdragUp = this.openRestTranslateYPx - rawTargetTranslateY;
+			const elasticUp = maxOverdragUpPx * (1 - 1 / (overdragUp / maxOverdragUpPx + 1));
+			targetTranslateY = this.openRestTranslateYPx - elasticUp;
+		}
+		this.setCssVars({ "--w3a-drawer__drag-translate": `${targetTranslateY}px` });
+		this.lastDragTime = now;
+	}
+	endDrag() {
+		if (!this.isDragging || !this.drawerElement) return;
+		this.isDragging = false;
+		this.pendingDrag = false;
+		this.drawerElement.classList.remove("dragging");
+		const drawerHeight = this.drawerHeight || this.drawerElement.offsetHeight;
+		const openRestPx = Number.isFinite(this.openRestTranslateYPx) ? this.openRestTranslateYPx : drawerHeight * .2;
+		const now = Date.now();
+		const gestureMs = Math.max(1, now - this.dragStartTime);
+		const totalDeltaPx = this.currentY - this.startY;
+		const avgVelocity = totalDeltaPx / gestureMs;
+		const effectiveDownV = Math.max(this.velocity, avgVelocity);
+		const effectiveUpV = Math.min(this.velocity, avgVelocity);
+		if (effectiveUpV <= FLICK_UP_CLOSE_THRESHOLD) {
+			this.closeDrawer();
+			this.resetDragState();
+			return;
+		}
+		if (effectiveDownV >= FLICK_DOWN_CLOSE_THRESHOLD) {
+			this.closeDrawer();
+			this.resetDragState();
+			return;
+		}
+		const currentTransformTy = this.parseTranslateY(getComputedStyle(this.drawerElement).transform);
+		const currentTranslatePx = Number.isFinite(currentTransformTy) ? currentTransformTy : openRestPx;
+		if (currentTranslatePx >= drawerHeight - NEAR_CLOSED_PX) {
+			this.closeDrawer();
+			this.resetDragState();
+			return;
+		}
+		this.resetDragState();
+	}
+	resetDragState() {
+		this.dragDistance = 0;
+		this.velocity = 0;
+	}
+	parseTranslateY(transform) {
+		if (!transform || transform === "none") return NaN;
+		if (transform.startsWith("matrix(")) {
+			const values = transform.slice(7, -1).split(",").map((v$1) => parseFloat(v$1.trim()));
+			return values.length === 6 ? values[5] : NaN;
+		}
+		if (transform.startsWith("matrix3d(")) {
+			const values = transform.slice(9, -1).split(",").map((v$1) => parseFloat(v$1.trim()));
+			return values.length === 16 ? values[13] : NaN;
+		}
+		const match = transform.match(/translateY\(([-\d.]+)px\)/);
+		if (match) return parseFloat(match[1]);
+		return NaN;
+	}
+	closeDrawer() {
+		if (this.isClosing) return;
+		this.isClosing = true;
+		if (this.drawerElement) this.drawerElement.classList.remove("dragging");
+		this.open = false;
+		dispatchLitCancel(this);
+		setTimeout(() => {
+			this.isClosing = false;
+		}, 300);
+	}
+	onClose = () => {
+		if (this.loading) return;
+		if (this.isClosing) return;
+		if (this.drawerElement) this.drawerElement.classList.remove("dragging");
+		this.open = false;
+		dispatchLitCancel(this);
+		this.isClosing = true;
+		setTimeout(() => {
+			this.isClosing = false;
+		}, 300);
+	};
+	onHandleClick = () => {
+		if (!this.open) this.show();
+		else this.hide("handle");
+	};
+	show() {
+		if (this.drawerElement) this.drawerElement.classList.remove("dragging");
+		this.open = true;
+	}
+	hide(reason = "programmatic") {
+		if (this.drawerElement) this.drawerElement.classList.remove("dragging");
+		this.open = false;
+		dispatchLitCancel(this, { reason });
+	}
+	toggle(force) {
+		const target = typeof force === "boolean" ? force : !this.open;
+		if (target) this.show();
+		else this.hide("toggle");
+	}
+	handleOpen() {
+		this.show();
+	}
+	handleClose() {
+		this.hide("handleClose");
+	}
+	render() {
+		return x`
+      <div class="overlay" @click=${this.onClose}></div>
+      <section class="drawer ${this._initialMount ? "init" : ""}" role="dialog" aria-modal="true">
+        <div class="relative">
+          <div class="handle" @click=${this.onHandleClick}></div>
+          ${this.showCloseButton ? x`<button aria-label="Close" title="Close" class="close-btn" @click=${this.onClose} @touchend=${this.onClose}>×</button>` : null}
+        </div>
+        <div class="body">
+          ${this.errorMessage ? x`<div class="error">${this.errorMessage}</div>` : null}
+          <div class="above-fold">${this._initialChildren}</div>
+        </div>
+      </section>
+    `;
+	}
+};
+var Drawer_default = (function ensureDefined() {
+	const TAG = W3A_DRAWER_ID;
+	if (!customElements.get(TAG)) customElements.define(TAG, DrawerElement);
+	return DrawerElement;
+})();
+
+//#endregion
+//#region ../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/repeat.js
+/**
+* @license
+* Copyright 2017 Google LLC
+* SPDX-License-Identifier: BSD-3-Clause
+*/
+const u = (e$2, s$1, t$1) => {
+	const r = /* @__PURE__ */ new Map();
+	for (let l = s$1; l <= t$1; l++) r.set(e$2[l], l);
+	return r;
+}, c = e$1(class extends i$1 {
+	constructor(e$2) {
+		if (super(e$2), e$2.type !== t.CHILD) throw Error("repeat() can only be used in text expressions");
+	}
+	dt(e$2, s$1, t$1) {
+		let r;
+		void 0 === t$1 ? t$1 = s$1 : void 0 !== s$1 && (r = s$1);
+		const l = [], o = [];
+		let i$2 = 0;
+		for (const s$2 of e$2) l[i$2] = r ? r(s$2, i$2) : i$2, o[i$2] = t$1(s$2, i$2), i$2++;
+		return {
+			values: o,
+			keys: l
+		};
+	}
+	render(e$2, s$1, t$1) {
+		return this.dt(e$2, s$1, t$1).values;
+	}
+	update(s$1, [t$1, r, c$1]) {
+		const d = p(s$1), { values: p$1, keys: a } = this.dt(t$1, r, c$1);
+		if (!Array.isArray(d)) return this.ut = a, p$1;
+		const h = this.ut ??= [], v$1 = [];
+		let m$1, y, x$1 = 0, j = d.length - 1, k = 0, w = p$1.length - 1;
+		for (; x$1 <= j && k <= w;) if (null === d[x$1]) x$1++;
+		else if (null === d[j]) j--;
+		else if (h[x$1] === a[k]) v$1[k] = v(d[x$1], p$1[k]), x$1++, k++;
+		else if (h[j] === a[w]) v$1[w] = v(d[j], p$1[w]), j--, w--;
+		else if (h[x$1] === a[w]) v$1[w] = v(d[x$1], p$1[w]), s(s$1, v$1[w + 1], d[x$1]), x$1++, w--;
+		else if (h[j] === a[k]) v$1[k] = v(d[j], p$1[k]), s(s$1, d[x$1], d[j]), j--, k++;
+		else if (void 0 === m$1 && (m$1 = u(a, k, w), y = u(h, x$1, j)), m$1.has(h[x$1])) if (m$1.has(h[j])) {
+			const e$2 = y.get(a[k]), t$2 = void 0 !== e$2 ? d[e$2] : null;
+			if (null === t$2) {
+				const e$3 = s(s$1, d[x$1]);
+				v(e$3, p$1[k]), v$1[k] = e$3;
+			} else v$1[k] = v(t$2, p$1[k]), s(s$1, d[x$1], t$2), d[e$2] = null;
+			k++;
+		} else M(d[j]), j--;
+		else M(d[x$1]), x$1++;
+		for (; k <= w;) {
+			const e$2 = s(s$1, v$1[w + 1]);
+			v(e$2, p$1[k]), v$1[k++] = e$2;
+		}
+		for (; x$1 <= j;) {
+			const e$2 = d[x$1++];
+			null !== e$2 && M(e$2);
+		}
+		return this.ut = a, m(s$1, v$1), T;
+	}
+});
+
+//#endregion
+//#region src/theme/palette.json
+var grey = {
+	"25": "oklch(0.99 0.001 240)",
+	"50": "oklch(0.98 0.001 240)",
+	"75": "oklch(0.97 0.002 240)",
+	"100": "oklch(0.95 0.005 240)",
+	"150": "oklch(0.92 0.007 240)",
+	"200": "oklch(0.88 0.01 240)",
+	"250": "oklch(0.85 0.012 240)",
+	"300": "oklch(0.82 0.014 240)",
+	"350": "oklch(0.75 0.016 240)",
+	"400": "oklch(0.65 0.02 240)",
+	"450": "oklch(0.6 0.021 240)",
+	"500": "oklch(0.53 0.02 240)",
+	"550": "oklch(0.48 0.02 240)",
+	"600": "oklch(0.4 0.02 240)",
+	"650": "oklch(0.35 0.018 240)",
+	"700": "oklch(0.3 0.015 240)",
+	"750": "oklch(0.25 0.012 240)",
+	"800": "oklch(0.2 0.01 240)",
+	"825": "oklch(0.17 0.009 240)",
+	"850": "oklch(0.15 0.008 240)",
+	"900": "oklch(0.1 0.005 240)",
+	"950": "oklch(0.05 0.002 240)",
+	"975": "oklch(0.025 0.001 240)"
+};
+var slate = {
+	"25": "oklch(0.99 0.003 240)",
+	"50": "oklch(0.98 0.005 240)",
+	"75": "oklch(0.965 0.007 240)",
+	"100": "oklch(0.95 0.01 240)",
+	"150": "oklch(0.915 0.0125 240)",
+	"200": "oklch(0.88 0.015 240)",
+	"250": "oklch(0.84 0.0175 240)",
+	"300": "oklch(0.8 0.02 240)",
+	"350": "oklch(0.725 0.0225 240)",
+	"400": "oklch(0.65 0.025 240)",
+	"450": "oklch(0.59 0.0275 240)",
+	"500": "oklch(0.53 0.03 240)",
+	"550": "oklch(0.465 0.0275 240)",
+	"600": "oklch(0.4 0.025 240)",
+	"650": "oklch(0.35 0.0225 240)",
+	"700": "oklch(0.3 0.02 240)",
+	"750": "oklch(0.25 0.0175 240)",
+	"800": "oklch(0.2 0.015 240)",
+	"825": "oklch(0.175 0.015 240)",
+	"850": "oklch(0.15 0.0125 240)",
+	"900": "oklch(0.1 0.01 240)"
+};
+var cream = {
+	"25": "oklch(0.99 0.004 95)",
+	"50": "oklch(0.98 0.006 95)",
+	"75": "oklch(0.965 0.008 95)",
+	"100": "oklch(0.95 0.010 95)",
+	"150": "oklch(0.92 0.012 95)",
+	"200": "oklch(0.885 0.014 95)",
+	"250": "oklch(0.85 0.016 95)",
+	"300": "oklch(0.81 0.018 95)",
+	"350": "oklch(0.74 0.020 95)",
+	"400": "oklch(0.67 0.022 95)",
+	"450": "oklch(0.61 0.023 95)",
+	"500": "oklch(0.55 0.024 95)",
+	"550": "oklch(0.49 0.022 95)",
+	"600": "oklch(0.43 0.020 95)",
+	"650": "oklch(0.37 0.018 95)",
+	"700": "oklch(0.31 0.016 95)",
+	"750": "oklch(0.26 0.014 95)",
+	"800": "oklch(0.21 0.012 95)",
+	"825": "oklch(0.185 0.012 95)",
+	"850": "oklch(0.16 0.010 95)",
+	"900": "oklch(0.11 0.008 95)"
+};
+var yellow = {
+	"50": "oklch(0.97 0.050 95)",
+	"100": "oklch(0.95 0.070 95)",
+	"150": "oklch(0.93 0.082 95)",
+	"200": "oklch(0.90 0.094 95)",
+	"250": "oklch(0.87 0.108 95)",
+	"300": "oklch(0.82 0.140 95)",
+	"350": "oklch(0.78 0.160 95)",
+	"400": "oklch(0.74 0.176 95)",
+	"450": "oklch(0.70 0.184 95)",
+	"500": "oklch(0.66 0.188 95)",
+	"550": "oklch(0.62 0.182 95)",
+	"600": "oklch(0.56 0.160 95)",
+	"650": "oklch(0.52 0.138 95)",
+	"700": "oklch(0.46 0.106 95)",
+	"750": "oklch(0.42 0.086 95)",
+	"800": "oklch(0.36 0.062 95)",
+	"850": "oklch(0.32 0.052 95)",
+	"900": "oklch(0.26 0.044 95)",
+	"950": "oklch(0.22 0.036 95)"
+};
+var blue = {
+	"50": "oklch(0.97 0.040 255)",
+	"100": "oklch(0.95 0.062 255)",
+	"150": "oklch(0.93 0.074 255)",
+	"200": "oklch(0.90 0.086 255)",
+	"250": "oklch(0.87 0.100 255)",
+	"300": "oklch(0.82 0.130 255)",
+	"350": "oklch(0.78 0.150 255)",
+	"400": "oklch(0.74 0.166 255)",
+	"450": "oklch(0.70 0.174 255)",
+	"500": "oklch(0.66 0.180 255)",
+	"550": "oklch(0.62 0.176 255)",
+	"600": "oklch(0.56 0.158 255)",
+	"650": "oklch(0.52 0.138 255)",
+	"700": "oklch(0.46 0.108 255)",
+	"750": "oklch(0.42 0.088 255)",
+	"800": "oklch(0.36 0.065 255)",
+	"850": "oklch(0.32 0.056 255)",
+	"900": "oklch(0.26 0.050 255)",
+	"950": "oklch(0.22 0.040 255)"
+};
+var red = {
+	"50": "oklch(0.97 0.040 19)",
+	"100": "oklch(0.95 0.060 19)",
+	"150": "oklch(0.93 0.072 19)",
+	"200": "oklch(0.90 0.086 19)",
+	"250": "oklch(0.87 0.100 19)",
+	"300": "oklch(0.82 0.130 19)",
+	"350": "oklch(0.78 0.150 19)",
+	"400": "oklch(0.74 0.166 19)",
+	"450": "oklch(0.70 0.174 19)",
+	"500": "oklch(0.66 0.180 19)",
+	"550": "oklch(0.62 0.176 19)",
+	"600": "oklch(0.56 0.158 19)",
+	"650": "oklch(0.52 0.138 19)",
+	"700": "oklch(0.46 0.108 19)",
+	"750": "oklch(0.42 0.088 19)",
+	"800": "oklch(0.36 0.065 19)",
+	"850": "oklch(0.32 0.056 19)",
+	"900": "oklch(0.26 0.050 19)",
+	"950": "oklch(0.22 0.040 19)"
+};
+var orange = {
+	"100": "oklch(0.82 0.08 52)",
+	"200": "oklch(0.8 0.1 55)",
+	"300": "oklch(0.75 0.12 58)",
+	"400": "oklch(0.7 0.14 60)",
+	"500": "oklch(0.65 0.13 62)",
+	"600": "oklch(0.6 0.12 65)",
+	"700": "oklch(0.55 0.11 68)",
+	"800": "oklch(0.5 0.1 70)",
+	"900": "oklch(0.45 0.09 72)"
+};
+var violet = {
+	"100": "oklch(0.80 0.08 308)",
+	"200": "oklch(0.75 0.1 305)",
+	"300": "oklch(0.72 0.12 302)",
+	"400": "oklch(0.68 0.14 300)",
+	"500": "oklch(0.65 0.15 298)",
+	"600": "oklch(0.6 0.14 295)",
+	"700": "oklch(0.55 0.13 292)",
+	"800": "oklch(0.5 0.12 290)",
+	"900": "oklch(0.45 0.11 288)"
+};
+var green = {
+	"50": "oklch(0.97 0.040 170)",
+	"100": "oklch(0.95 0.062 170)",
+	"150": "oklch(0.93 0.074 170)",
+	"200": "oklch(0.90 0.086 170)",
+	"250": "oklch(0.87 0.100 170)",
+	"300": "oklch(0.82 0.130 170)",
+	"350": "oklch(0.78 0.150 170)",
+	"400": "oklch(0.74 0.166 170)",
+	"450": "oklch(0.70 0.174 170)",
+	"500": "oklch(0.66 0.180 170)",
+	"550": "oklch(0.62 0.176 170)",
+	"600": "oklch(0.56 0.158 170)",
+	"650": "oklch(0.52 0.138 170)",
+	"700": "oklch(0.46 0.108 170)",
+	"750": "oklch(0.42 0.088 170)",
+	"800": "oklch(0.36 0.065 170)",
+	"850": "oklch(0.32 0.056 170)",
+	"900": "oklch(0.26 0.050 170)",
+	"950": "oklch(0.22 0.040 170)"
+};
+var gradients = {
+	"blue": "linear-gradient(45deg, oklch(0.82 0.130 255) 0%, oklch(0.66 0.180 255) 50%)",
+	"red": "linear-gradient(45deg, oklch(0.82 0.130 19) 0%, oklch(0.66 0.180 19) 50%)",
+	"green": "linear-gradient(45deg, oklch(0.82 0.130 170) 0%, oklch(0.66 0.180 170) 50%)",
+	"black": "linear-gradient(45deg, oklch(0.53 0.03 240) 0%, oklch(0.2 0.015 240) 50%)",
+	"blueWhite": "linear-gradient(90deg, hsla(213, 62%, 45%, 1) 0%, hsla(203, 89%, 71%, 1) 50%, hsla(0, 0%, 96%, 1) 100%)",
+	"blackWhite": "linear-gradient(90deg, oklch(0.20 0.010 240) 0%, oklch(0.95 0.005 240) 100%)"
+};
+var palette_default = {
+	grey,
+	slate,
+	cream,
+	yellow,
+	blue,
+	red,
+	orange,
+	violet,
+	green,
+	gradients
+};
+
+//#endregion
+//#region src/theme/base-styles.js
+function createThemeTokens(palette) {
+	const CHROMA_COLORS$1 = {
+		...fromScale("yellow", palette.yellow),
+		...fromScale("blue", palette.blue),
+		...fromScale("red", palette.red),
+		...fromScale("orange", palette.orange),
+		...fromScale("violet", palette.violet),
+		...fromScale("green", palette.green)
+	};
+	const GREY_COLORS$1 = {
+		...fromScale("grey", palette.grey),
+		...fromScale("slate", palette.slate)
+	};
+	const CREAM_COLORS$1 = { ...fromScale("cream", palette.cream) };
+	const GRADIENTS$1 = {
+		blue: palette.gradients?.blue,
+		red: palette.gradients?.red,
+		green: palette.gradients?.green,
+		black: palette.gradients?.black,
+		blueWhite: palette.gradients?.blueWhite,
+		blackWhite: palette.gradients?.blackWhite
+	};
+	const DARK_THEME$1 = {
+		...GREY_COLORS$1,
+		...CHROMA_COLORS$1,
+		textPrimary: GREY_COLORS$1.grey75,
+		textSecondary: GREY_COLORS$1.grey500,
+		textMuted: GREY_COLORS$1.grey650,
+		textButton: GREY_COLORS$1.grey75,
+		colorBackground: GREY_COLORS$1.grey800,
+		surface: GREY_COLORS$1.slate700,
+		surface2: GREY_COLORS$1.slate750,
+		surface3: GREY_COLORS$1.slate800,
+		surface4: GREY_COLORS$1.slate825,
+		primary: CHROMA_COLORS$1.blue600,
+		primaryHover: CHROMA_COLORS$1.blue500,
+		secondary: CHROMA_COLORS$1.violet600,
+		secondaryHover: CHROMA_COLORS$1.violet500,
+		accent: CHROMA_COLORS$1.green400,
+		buttonBackground: CHROMA_COLORS$1.blue500,
+		buttonHoverBackground: CHROMA_COLORS$1.blue450,
+		hover: GREY_COLORS$1.grey850,
+		active: GREY_COLORS$1.grey650,
+		focus: CHROMA_COLORS$1.blue400,
+		success: CHROMA_COLORS$1.blue400,
+		warning: (palette.yellow || {})["400"],
+		error: CHROMA_COLORS$1.red400,
+		info: CHROMA_COLORS$1.blue400,
+		borderPrimary: GREY_COLORS$1.grey650,
+		borderSecondary: GREY_COLORS$1.slate650,
+		borderHover: GREY_COLORS$1.grey600,
+		backgroundGradientPrimary: GRADIENTS$1.blue,
+		backgroundGradientSecondary: GRADIENTS$1.blueWhite,
+		backgroundGradient3: GRADIENTS$1.blackWhite,
+		backgroundGradient4: GRADIENTS$1.black,
+		highlightReceiverId: CHROMA_COLORS$1.blue400,
+		highlightMethodName: CHROMA_COLORS$1.blue400,
+		highlightAmount: CHROMA_COLORS$1.blue400
+	};
+	const LIGHT_THEME$1 = {
+		...GREY_COLORS$1,
+		...CHROMA_COLORS$1,
+		textPrimary: GREY_COLORS$1.grey650,
+		textSecondary: GREY_COLORS$1.grey500,
+		textMuted: GREY_COLORS$1.grey350,
+		textButton: GREY_COLORS$1.grey75,
+		colorBackground: GREY_COLORS$1.grey50,
+		surface: GREY_COLORS$1.slate100,
+		surface2: GREY_COLORS$1.slate150,
+		surface3: GREY_COLORS$1.slate200,
+		surface4: GREY_COLORS$1.slate250,
+		primary: CHROMA_COLORS$1.blue600,
+		primaryHover: CHROMA_COLORS$1.blue500,
+		secondary: CHROMA_COLORS$1.violet600,
+		secondaryHover: CHROMA_COLORS$1.violet500,
+		accent: CHROMA_COLORS$1.green400,
+		buttonBackground: CHROMA_COLORS$1.blue500,
+		buttonHoverBackground: CHROMA_COLORS$1.blue450,
+		hover: GREY_COLORS$1.grey100,
+		active: GREY_COLORS$1.grey200,
+		focus: CHROMA_COLORS$1.blue400,
+		success: CHROMA_COLORS$1.blue500,
+		warning: (palette.yellow || {})["500"],
+		error: CHROMA_COLORS$1.red500,
+		info: CHROMA_COLORS$1.blue500,
+		borderPrimary: GREY_COLORS$1.slate300,
+		borderSecondary: GREY_COLORS$1.grey300,
+		borderHover: GREY_COLORS$1.slate350,
+		backgroundGradientPrimary: GRADIENTS$1.blue,
+		backgroundGradientSecondary: GRADIENTS$1.blueWhite,
+		backgroundGradient3: GRADIENTS$1.blackWhite,
+		backgroundGradient4: GRADIENTS$1.black,
+		highlightReceiverId: CHROMA_COLORS$1.blue500,
+		highlightMethodName: CHROMA_COLORS$1.blue500,
+		highlightAmount: CHROMA_COLORS$1.blue500
+	};
+	const CREAM_THEME$1 = {
+		...GREY_COLORS$1,
+		...CREAM_COLORS$1,
+		...CHROMA_COLORS$1,
+		textPrimary: GREY_COLORS$1.grey650,
+		textSecondary: GREY_COLORS$1.grey600,
+		textMuted: GREY_COLORS$1.grey450,
+		textButton: GREY_COLORS$1.grey75,
+		colorBackground: CREAM_COLORS$1.cream50,
+		surface: CREAM_COLORS$1.cream100,
+		surface2: CREAM_COLORS$1.cream150,
+		surface3: CREAM_COLORS$1.cream200,
+		surface4: CREAM_COLORS$1.cream250,
+		primary: GREY_COLORS$1.grey700,
+		primaryHover: GREY_COLORS$1.grey650,
+		secondary: CHROMA_COLORS$1.violet600,
+		secondaryHover: CHROMA_COLORS$1.violet500,
+		accent: CHROMA_COLORS$1.green400,
+		buttonBackground: CHROMA_COLORS$1.blue500,
+		buttonHoverBackground: CHROMA_COLORS$1.blue450,
+		hover: CREAM_COLORS$1.cream75,
+		active: CREAM_COLORS$1.cream200,
+		focus: CHROMA_COLORS$1.yellow500,
+		success: CHROMA_COLORS$1.yellow300,
+		warning: CHROMA_COLORS$1.yellow600,
+		error: CHROMA_COLORS$1.red500,
+		info: CHROMA_COLORS$1.blue500,
+		borderPrimary: CREAM_COLORS$1.cream300,
+		borderSecondary: CREAM_COLORS$1.cream200,
+		borderHover: CREAM_COLORS$1.cream350,
+		backgroundGradientPrimary: GRADIENTS$1.black,
+		backgroundGradientSecondary: GRADIENTS$1.blackWhite,
+		backgroundGradient3: GRADIENTS$1.blackWhite,
+		backgroundGradient4: GRADIENTS$1.black,
+		highlightReceiverId: CHROMA_COLORS$1.yellow400,
+		highlightMethodName: CHROMA_COLORS$1.yellow400,
+		highlightAmount: CHROMA_COLORS$1.yellow400
+	};
+	return {
+		CHROMA_COLORS: CHROMA_COLORS$1,
+		GREY_COLORS: GREY_COLORS$1,
+		CREAM_COLORS: CREAM_COLORS$1,
+		GRADIENTS: GRADIENTS$1,
+		DARK_THEME: DARK_THEME$1,
+		LIGHT_THEME: LIGHT_THEME$1,
+		CREAM_THEME: CREAM_THEME$1
+	};
+}
+const fromScale = (prefix, scale) => {
+	if (!scale) return {};
+	const out = {};
+	for (const k of Object.keys(scale)) out[`${prefix}${k}`] = scale[k];
+	return out;
+};
+
+//#endregion
+//#region src/base-styles.ts
+const built = createThemeTokens(palette_default);
+const CHROMA_COLORS = built.CHROMA_COLORS;
+const GREY_COLORS = built.GREY_COLORS;
+const CREAM_COLORS = built.CREAM_COLORS;
+const GRADIENTS = built.GRADIENTS;
+const DARK_THEME = built.DARK_THEME;
+const LIGHT_THEME = built.LIGHT_THEME;
+const CREAM_THEME = built.CREAM_THEME;
+
+//#endregion
+//#region src/core/WebAuthnManager/LitComponents/TxTree/tx-tree-themes.ts
+const TX_TREE_THEMES = {
+	dark: {
+		...DARK_THEME,
+		host: {
+			fontFamily: "-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif",
+			fontSize: "1rem",
+			color: DARK_THEME.textPrimary,
+			backgroundColor: DARK_THEME.colorBackground
+		},
+		tooltipBorderOuter: {
+			borderRadius: "24px",
+			border: `1px solid transparent`,
+			boxShadow: "0 1px 3px 0px rgba(5, 5, 5, 0.4)"
+		},
+		tooltipTreeRoot: {
+			padding: "0rem",
+			background: DARK_THEME.surface2,
+			border: "none",
+			color: DARK_THEME.textPrimary
+		},
+		tooltipTreeChildren: {},
+		details: {
+			borderRadius: "0.5rem",
+			background: "transparent"
+		},
+		summary: { padding: "0.5rem 0.75rem" },
+		summaryRow: { background: "transparent" },
+		summaryRowHover: {
+			background: DARK_THEME.surface,
+			borderColor: DARK_THEME.textSecondary
+		},
+		row: {
+			color: DARK_THEME.textPrimary,
+			borderRadius: "0.375rem",
+			transition: "all 160ms cubic-bezier(0.2, 0.6, 0.2, 1)"
+		},
+		indent: {},
+		label: {
+			color: DARK_THEME.textPrimary,
+			fontSize: "0.875rem",
+			gap: "4px",
+			lineHeight: "1.5",
+			border: "1px solid transparent",
+			padding: "4px 16px",
+			borderRadius: "1rem"
+		},
+		labelHover: {
+			background: DARK_THEME.borderPrimary,
+			borderColor: DARK_THEME.textSecondary
+		},
+		chevron: {
+			color: DARK_THEME.textSecondary,
+			width: "14px",
+			height: "14px"
+		},
+		fileRow: {
+			padding: "0.5rem 0.75rem",
+			fontSize: "0.875rem"
+		},
+		fileContent: {
+			background: DARK_THEME.surface2,
+			border: `1px solid none`,
+			color: DARK_THEME.textSecondary,
+			fontFamily: "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace",
+			borderRadius: "0.5rem",
+			padding: "0.25rem",
+			scrollbarTrackBackground: DARK_THEME.surface,
+			scrollbarThumbBackground: DARK_THEME.textSecondary
+		},
+		connector: {
+			color: DARK_THEME.grey600,
+			thickness: "2px",
+			elbowLength: "10px"
+		},
+		folderChildren: {
+			padding: "0.5rem 0",
+			marginLeft: "1rem"
+		},
+		highlightReceiverId: {
+			color: DARK_THEME.highlightReceiverId,
+			fontWeight: "600"
+		},
+		highlightMethodName: {
+			color: DARK_THEME.highlightMethodName,
+			fontWeight: "600"
+		},
+		highlightAmount: {
+			color: DARK_THEME.highlightAmount,
+			fontWeight: "600"
+		},
+		rootMobile: {
+			borderRadius: "0.5rem",
+			margin: "0"
+		},
+		treeChildrenMobile: { padding: "0.75rem" },
+		folderChildrenMobile: { marginLeft: "0.75rem" },
+		rowMobile: { padding: "0.5rem" },
+		fileContentMobile: {
+			fontSize: "0.7rem",
+			maxHeight: "150px"
+		}
+	},
+	light: {
+		...LIGHT_THEME,
+		host: {
+			fontFamily: "-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif",
+			fontSize: "1rem",
+			color: LIGHT_THEME.textPrimary,
+			backgroundColor: LIGHT_THEME.colorBackground
+		},
+		tooltipBorderOuter: {
+			borderRadius: "24px",
+			border: `1px solid ${LIGHT_THEME.slate300}`,
+			boxShadow: "0 4px 6px -1px rgb(0 0 0 / 0.1)"
+		},
+		tooltipTreeRoot: {
+			padding: "0rem",
+			background: LIGHT_THEME.surface,
+			border: "none",
+			color: LIGHT_THEME.textPrimary
+		},
+		tooltipTreeChildren: {},
+		details: {
+			borderRadius: "0.5rem",
+			background: "transparent"
+		},
+		summary: { padding: "0.5rem 0.75rem" },
+		summaryRow: { background: "transparent" },
+		summaryRowHover: {
+			background: LIGHT_THEME.surface2,
+			borderColor: LIGHT_THEME.borderPrimary
+		},
+		row: {
+			color: LIGHT_THEME.textPrimary,
+			borderRadius: "0.375rem",
+			transition: "all 160ms cubic-bezier(0.2, 0.6, 0.2, 1)"
+		},
+		indent: {},
+		label: {
+			color: LIGHT_THEME.textPrimary,
+			fontSize: "0.875rem",
+			gap: "4px",
+			lineHeight: "1.5",
+			border: "1px solid transparent",
+			padding: "4px 16px",
+			borderRadius: "1rem"
+		},
+		labelHover: {
+			background: LIGHT_THEME.grey75,
+			borderColor: LIGHT_THEME.borderPrimary
+		},
+		chevron: {
+			color: LIGHT_THEME.textSecondary,
+			width: "14px",
+			height: "14px"
+		},
+		fileRow: {
+			padding: "0.5rem 0.75rem",
+			fontSize: "0.875rem"
+		},
+		fileContent: {
+			background: LIGHT_THEME.surface,
+			border: `1px solid ${LIGHT_THEME.borderPrimary}`,
+			color: LIGHT_THEME.textPrimary,
+			fontFamily: "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace",
+			borderRadius: "0.5rem",
+			padding: "0.25rem",
+			scrollbarTrackBackground: LIGHT_THEME.surface,
+			scrollbarThumbBackground: LIGHT_THEME.borderPrimary
+		},
+		connector: {
+			color: LIGHT_THEME.slate200,
+			thickness: "2px",
+			elbowLength: "10px"
+		},
+		folderChildren: {
+			padding: "0.5rem 0",
+			marginLeft: "1rem"
+		},
+		highlightReceiverId: {
+			color: LIGHT_THEME.highlightReceiverId,
+			fontWeight: "600"
+		},
+		highlightMethodName: {
+			color: LIGHT_THEME.highlightMethodName,
+			fontWeight: "600"
+		},
+		highlightAmount: {
+			color: LIGHT_THEME.highlightAmount,
+			fontWeight: "600"
+		},
+		rootMobile: {
+			borderRadius: "0.5rem",
+			margin: "0"
+		},
+		treeChildrenMobile: { padding: "0.75rem" },
+		folderChildrenMobile: { marginLeft: "0.75rem" },
+		rowMobile: { padding: "0.5rem" },
+		fileContentMobile: {
+			fontSize: "0.7rem",
+			maxHeight: "150px"
+		}
+	}
+};
+
+//#endregion
+//#region src/core/WebAuthnManager/LitComponents/common/formatters.ts
+function formatArgs(args) {
+	if (!args) return "";
+	if (typeof args === "string") return args;
+	try {
+		return JSON.stringify(args, (_k, v$1) => typeof v$1 === "bigint" ? v$1.toString() : v$1, 2);
+	} catch (e$2) {
+		return String(args);
+	}
+}
+function formatDeposit(deposit) {
+	if (!deposit || deposit === "0") return "0 NEAR";
+	try {
+		const yocto = BigInt(deposit);
+		const YOCTO_FACTOR = BigInt("1000000000000000000000000");
+		const whole = yocto / YOCTO_FACTOR;
+		const frac = yocto % YOCTO_FACTOR;
+		const maxDecimals = 5;
+		if (frac === BigInt(0)) return `${whole.toString()} NEAR`;
+		const fracStrFull = frac.toString().padStart(24, "0");
+		let fracStr = fracStrFull.slice(0, maxDecimals);
+		fracStr = fracStr.replace(/0+$/g, "");
+		if (fracStr.length === 0) return `${whole.toString()} NEAR`;
+		return `${whole.toString()}.${fracStr} NEAR`;
+	} catch (e$2) {
+		return deposit;
+	}
+}
+function formatGas(gas) {
+	if (!gas) return "";
+	try {
+		const gasValue = BigInt(gas);
+		const tgas = gasValue / BigInt("1000000000000");
+		return `${tgas} Tgas`;
+	} catch (e$2) {
+		return gas;
+	}
+}
+/**
+* Shorten a long public key or identifier by keeping a head and tail
+* and replacing the middle with an ellipsis.
+* Example: ed25519:ABCDEFGH...WXYZ12
+*/
+function shortenPubkey(pk, opts = {}) {
+	if (!pk || typeof pk !== "string") return "";
+	const { prefix = 12, suffix = 6 } = opts;
+	if (pk.length <= prefix + suffix + 3) return pk;
+	const head = pk.slice(0, prefix);
+	const tail = pk.slice(-suffix);
+	return `${head}...${tail}`;
+}
+function formatCodeSize(code) {
+	if (!code) return "0 bytes";
+	if (code instanceof Uint8Array) return `${code.byteLength} bytes`;
+	if (Array.isArray(code)) return `${code.length} bytes`;
+	if (typeof code === "string") return `${code.length} bytes`;
+	return "unknown";
+}
+
+//#endregion
+//#region src/core/WebAuthnManager/LitComponents/TxTree/index.ts
+/**
+* TxTree
+* A small, dependency-free Lit component that renders a tree-like UI suitable for tooltips.
+*
+* Usage:
+*   <w3a-tx-tree .node=${node} depth="0"></w3a-tx-tree>
+*
+* Mapping note: txSigningRequests (TransactionInput[]) → TreeNode structure
+* Example (single FunctionCall):
+* {
+*   id: 'txs-root', label: 'Transaction', type: 'folder', open: true,
+*   children: [
+*     {
+*       id: 'tx-0',
+*       label: 'Transaction 1 to w3a-v1.testnet',
+*       type: 'folder',
+*       open: true,
+*       children: [
+*         {
+*           id: 'action-0',
+*           label: 'Action 1: FunctionCall',
+*           type: 'folder',
+*           open: false,
+*           children: [
+*             { id: 'a0-method', label: 'method: set_greeting', type: 'file' },
+*             { id: 'a0-gas', label: 'gas: 30000000000000', type: 'file' },
+*             { id: 'a0-deposit', label: 'deposit: 0', type: 'file' },
+*             { id: 'a0-args', label: 'args', type: 'file', content: '{\n  "greeting": "Hello from Embedded Component! [...]"\n}' }
+*           ]
+*         }
+*       ]
+*     }
+*   ]
+* }
+*/
+var TxTree = class extends LitElementWithProps {
+	static properties = {
+		node: { attribute: false },
+		depth: {
+			type: Number,
+			attribute: false
+		},
+		styles: {
+			attribute: false,
+			state: true
+		},
+		theme: {
+			type: String,
+			reflect: true
+		},
+		width: { type: String },
+		shadowDom: {
+			type: Boolean,
+			attribute: "shadow-dom"
+		},
+		nearExplorerUrl: {
+			type: String,
+			attribute: "near-explorer-url"
+		},
+		showShadow: {
+			type: Boolean,
+			attribute: "show-shadow"
+		}
+	};
+	node;
+	depth;
+	styles;
+	theme;
+	class;
+	width;
+	shadowDom;
+	nearExplorerUrl;
+	showShadow = true;
+	_copied = /* @__PURE__ */ new Set();
+	_copyTimers = /* @__PURE__ */ new Map();
+	_animating = /* @__PURE__ */ new WeakSet();
+	isCopied(id) {
+		return this._copied.has(id);
+	}
+	async handleCopyClick(e$2, node) {
+		e$2.stopPropagation();
+		const value = node.copyValue;
+		if (!value) return;
+		try {
+			if (navigator.clipboard && navigator.clipboard.writeText) await navigator.clipboard.writeText(value);
+			else {
+				const ta = document.createElement("textarea");
+				ta.value = value;
+				ta.setAttribute("readonly", "");
+				ta.className = "w3a-offscreen";
+				document.body.appendChild(ta);
+				ta.select();
+				try {
+					document.execCommand("copy");
+				} catch {}
+				document.body.removeChild(ta);
+			}
+			this._copied.add(node.id);
+			this.requestUpdate();
+			const existing = this._copyTimers.get(node.id);
+			if (existing) window.clearTimeout(existing);
+			const timer = window.setTimeout(() => {
+				this._copied.delete(node.id);
+				this._copyTimers.delete(node.id);
+				this.requestUpdate();
+			}, 2e3);
+			this._copyTimers.set(node.id, timer);
+		} catch {}
+	}
+	handleToggle() {
+		dispatchLitTreeToggled(this);
+	}
+	/**
+	* Intercept summary clicks to run height animations for open/close.
+	* Keeps native semantics by toggling details.open at the appropriate time.
+	*/
+	onSummaryClick = (e$2) => {
+		const summary = e$2.currentTarget;
+		if (!summary) return;
+		const path = e$2.composedPath?.();
+		let clickedReceiverLink = null;
+		if (Array.isArray(path)) {
+			for (const t$1 of path) if (t$1 && typeof t$1.matches === "function" && t$1.matches("a.highlight-receiver-id")) {
+				clickedReceiverLink = t$1;
+				break;
+			}
+		} else {
+			const target = e$2.target;
+			clickedReceiverLink = target?.closest?.("a.highlight-receiver-id") ?? null;
+		}
+		if (clickedReceiverLink) {
+			e$2.preventDefault();
+			e$2.stopPropagation();
+			try {
+				window.open(clickedReceiverLink.href, "_blank", "noopener");
+			} catch {}
+			return;
+		}
+		e$2.preventDefault();
+		e$2.stopPropagation();
+		const details = summary.closest("details");
+		if (!details || this._animating.has(details)) return;
+		const body = details.querySelector(":scope > .folder-children, :scope > .row.file-row");
+		if (!body) {
+			details.open = !details.open;
+			this.handleToggle();
+			return;
+		}
+		const reduceMotion = (() => {
+			return typeof window !== "undefined" && "matchMedia" in window ? window.matchMedia("(prefers-reduced-motion: reduce)").matches : false;
+		})();
+		if (reduceMotion) {
+			details.open = !details.open;
+			this.handleToggle();
+			return;
+		}
+		if (!details.open) this.animateOpen(details, body);
+		else this.animateClose(details, body);
+	};
+	animateOpen(details, body) {
+		this._animating.add(details);
+		body.classList.add("anim-h");
+		details.open = true;
+		requestAnimationFrame(() => {
+			const target = `${body.scrollHeight}px`;
+			this.setCssVars({ "--w3a-tree__anim-target": target });
+			body.classList.add("anim-h-active");
+			let done = false;
+			const cleanup = () => {
+				if (done) return;
+				done = true;
+				body.classList.remove("anim-h");
+				body.classList.remove("anim-h-active");
+				this._animating.delete(details);
+				this.handleToggle();
+			};
+			const onEnd = (ev) => {
+				if (ev.propertyName !== "height") return;
+				body.removeEventListener("transitionend", onEnd);
+				cleanup();
+			};
+			body.addEventListener("transitionend", onEnd);
+			window.setTimeout(() => {
+				body.removeEventListener("transitionend", onEnd);
+				cleanup();
+			}, 200);
+		});
+	}
+	animateClose(details, body) {
+		this._animating.add(details);
+		const start = `${body.scrollHeight}px`;
+		this.setCssVars({ "--w3a-tree__anim-target": start });
+		body.classList.add("anim-h");
+		body.classList.add("anim-h-active");
+		body.offsetHeight;
+		requestAnimationFrame(() => {
+			body.classList.remove("anim-h-active");
+			let done = false;
+			const cleanup = () => {
+				if (done) return;
+				done = true;
+				body.removeEventListener("transitionend", onEnd);
+				details.open = false;
+				body.classList.remove("anim-h");
+				this._animating.delete(details);
+				this.handleToggle();
+			};
+			const onEnd = (ev) => {
+				if (ev.propertyName !== "height") return;
+				cleanup();
+			};
+			body.addEventListener("transitionend", onEnd);
+			window.setTimeout(() => cleanup(), 250);
+		});
+	}
+	getComponentPrefix() {
+		return "tree";
+	}
+	applyStyles(styles) {
+		super.applyStyles(styles, "tree");
+	}
+	createRenderRoot() {
+		if (this.shadowDom) {
+			const root$1 = super.createRenderRoot();
+			ensureExternalStyles(root$1, "tx-tree.css", "data-w3a-tx-tree-css").catch(() => {});
+			return root$1;
+		}
+		ensureExternalStyles(this, "tx-tree.css", "data-w3a-tx-tree-css").catch(() => {});
+		const root = this.getRootNode && this.getRootNode();
+		if (root && typeof root === "object" && "host" in root) ensureExternalStyles(root, "tx-tree.css", "data-w3a-tx-tree-css").catch(() => {});
+		return this;
+	}
+	/**
+	* Lifecycle method to apply styles when they change
+	*/
+	updated(changedProperties) {
+		super.updated(changedProperties);
+		const hasExplicitStyles = !!this.styles && Object.keys(this.styles).length > 0;
+		if (changedProperties.has("styles") && hasExplicitStyles) this.applyStyles(this.styles);
+		if (changedProperties.has("theme") && !hasExplicitStyles && this.theme) {
+			const preset = TX_TREE_THEMES[this.theme] || TX_TREE_THEMES.dark;
+			this.applyStyles(preset);
+		}
+	}
+	connectedCallback() {
+		super.connectedCallback();
+	}
+	renderLabelWithSelectiveHighlight(treeNode) {
+		if (treeNode.action) {
+			const a = treeNode.action;
+			switch (a.type) {
+				case "FunctionCall": {
+					let method = a.methodName;
+					let gasStr = formatGas(a.gas);
+					let depositStr = formatDeposit(a.deposit);
+					return x`Calling <span class="highlight-method-name">${method}</span>
+              ${depositStr !== "0 NEAR" ? x` with <span class="highlight-method-name">${depositStr}</span>` : ""}
+              ${gasStr ? x` using <span class="highlight-method-name">${gasStr}</span>` : ""}`;
+				}
+				case "Transfer": {
+					let amount = formatDeposit(a.amount);
+					return x`Transfer <span class="highlight-amount">${amount}</span>`;
+				}
+				case "CreateAccount": return "Creating Account";
+				case "DeleteAccount": return "Deleting Account";
+				case "Stake": return `Staking ${formatDeposit(a.stake)}`;
+				case "AddKey":
+					a.accessKey;
+					return `Adding Key`;
+				case "DeleteKey": return `Deleting Key`;
+				case "DeployContract": {
+					const codeSize = formatCodeSize(a.code);
+					return `Deploying WASM contract (${codeSize})`;
+				}
+				case "DeployGlobalContract": {
+					const codeSize = formatCodeSize(a.code);
+					const mode = a.deployMode || "Unknown";
+					return `Deploy global WASM contract (mode: ${mode}, size ${codeSize})`;
+				}
+				case "UseGlobalContract": {
+					const accountId = a.accountId;
+					const codeHash = a.codeHash;
+					if (accountId) {
+						const base = (this.nearExplorerUrl || "https://testnet.nearblocks.io").replace(/\/$/, "");
+						const href = `${base}/address/${encodeURIComponent(accountId)}`;
+						return x`Use global contract <a
+              class="highlight-receiver-id"
+              href=${href}
+              target="_blank"
+              rel="noopener noreferrer"
+            >${accountId}</a>`;
+					}
+					if (codeHash) {
+						const short = shortenPubkey(codeHash, {
+							prefix: 10,
+							suffix: 6
+						});
+						return x`Use global contract by hash <span class="highlight-method-name">${short}</span>`;
+					}
+					return "Use global contract";
+				}
+				default: {
+					const idxText = isNumber(treeNode.actionIndex) ? ` ${treeNode.actionIndex + 1}` : "";
+					const typeText = a.type || "Unknown";
+					return `Action ${idxText}: ${typeText}`;
+				}
+			}
+		}
+		if (treeNode.transaction) {
+			const total = treeNode.totalTransactions ?? 1;
+			const idx = treeNode.transactionIndex ?? 0;
+			const prefix = total > 1 ? `Transaction ${idx + 1}: to ` : "Transaction to ";
+			const receiverId = treeNode.transaction.receiverId;
+			const base = (this.nearExplorerUrl || "https://testnet.nearblocks.io").replace(/\/$/, "");
+			const href = `${base}/address/${encodeURIComponent(receiverId)}`;
+			return x`${prefix}<a
+        class="highlight-receiver-id"
+        href=${href}
+        target="_blank"
+        rel="noopener noreferrer"
+      >${receiverId}</a>`;
+		}
+		return treeNode.label || "";
+	}
+	/**
+	* Compute a plain-text version of the label for use in the title tooltip.
+	* Mirrors renderLabelWithSelectiveHighlight but without inline HTML/spans.
+	*/
+	computePlainLabel(treeNode) {
+		if (treeNode.action) {
+			const a = treeNode.action;
+			switch (a.type) {
+				case "FunctionCall": {
+					const method = a.methodName;
+					const gasStr = formatGas(a.gas);
+					const depositStr = formatDeposit(a.deposit);
+					return `Calling ${method} with ${depositStr} using ${gasStr}`;
+				}
+				case "Transfer": return `Transfer ${formatDeposit(a.amount)}`;
+				case "CreateAccount": return "Creating Account";
+				case "DeleteAccount": return "Deleting Account";
+				case "Stake": return `Staking ${formatDeposit(a.stake)}`;
+				case "AddKey": return "Adding Key";
+				case "DeleteKey": return "Deleting Key";
+				case "DeployContract": return "Deploying WASM contract";
+				case "DeployGlobalContract": {
+					const codeSize = formatCodeSize(a.code);
+					const mode = a.deployMode || "Unknown";
+					return `Deploy global WASM contract (mode: ${mode}, size ${codeSize})`;
+				}
+				case "UseGlobalContract": {
+					const accountId = a.accountId;
+					const codeHash = a.codeHash;
+					if (accountId) return `Use global contract by account ${accountId}`;
+					if (codeHash) return `Use global contract by hash ${codeHash}`;
+					return "Use global contract";
+				}
+				default: {
+					const idxText = isNumber(treeNode.actionIndex) ? ` ${treeNode.actionIndex + 1}` : "";
+					const typeText = a.type || "Unknown";
+					return `Action${idxText}: ${typeText}`;
+				}
+			}
+		}
+		if (treeNode.transaction) {
+			const total = treeNode.totalTransactions ?? 1;
+			const idx = treeNode.transactionIndex ?? 0;
+			const prefix = total > 1 ? `Transaction ${idx + 1}: to ` : "Transaction to ";
+			const receiverId = treeNode.transaction.receiverId;
+			return `${prefix}${receiverId}`;
+		}
+		return treeNode.label || "";
+	}
+	renderLeaf(depth, node) {
+		const depthIndex = Math.max(0, depth - 1);
+		if (isString(node.content) && node.content.length > 0) return x`
+        <details class="tree-node file" ?open=${!!node.open}>
+          <summary class="row summary-row depth-${depthIndex}"
+            data-no-elbow="${!!node.hideLabel}"
+            @click=${this.onSummaryClick}
+          >
+            <span class="indent"></span>
+            <span class="label label-action-node" ?hidden=${!!node.hideLabel}>
+              ${!node.hideChevron ? x`
+                  <svg class="chevron" viewBox="0 0 16 16" aria-hidden="true">
+                    <path fill="currentColor" d="M6 3l5 5-5 5z" />
+                  </svg>` : ""}
+              <span class="label-text" title=${this.computePlainLabel(node)}>
+                ${this.renderLabelWithSelectiveHighlight(node)}
+              </span>
+              ${node.copyValue ? x`
+                  <span class="copy-badge"
+                    data-copied=${this.isCopied(node.id)}
+                    @click=${(e$2) => this.handleCopyClick(e$2, node)}
+                    title=${this.isCopied(node.id) ? "Copied" : "Copy"}
+                  >
+                    ${this.isCopied(node.id) ? "copied" : "copy"}
+                  </span>` : ""}
+            </span>
+            <!-- Move file-content into .summary-row so we can collapse it by default -->
+            <div class="file-content">${node.content}</div>
+          </summary>
+          <!-- Alternative rendering for file content kept for reference; no inline styles allowed -->
+        </details>
+      `;
+		return x`
+      <div class="row file-row depth-${depthIndex}"
+        data-no-elbow="${!!node.hideLabel}"
+        ?open=${!!node.open}
+      >
+        <span class="indent"></span>
+        <span class="label label-action-node" ?hidden=${!!node.hideLabel}>
+          <span class="label-text" title=${this.computePlainLabel(node)}>
+            ${this.renderLabelWithSelectiveHighlight(node)}
+          </span>
+          ${node.copyValue ? x`
+            <span class="copy-badge"
+              data-copied=${this.isCopied(node.id)}
+              @click=${(e$2) => this.handleCopyClick(e$2, node)}
+              title=${this.isCopied(node.id) ? "Copied" : "Copy"}
+            >${this.isCopied(node.id) ? "copied" : "copy"}</span>
+          ` : ""}
+        </span>
+      </div>
+    `;
+	}
+	renderFolder(depth, node) {
+		const { children: nodeChildren } = node;
+		const depthIndex = Math.max(0, depth - 1);
+		return x`
+      <details class="tree-node folder" ?open=${!!node.open}>
+        <summary class="row summary-row depth-${depthIndex}"
+          data-no-elbow="${!!node.hideLabel}"
+          @click=${this.onSummaryClick}
+        >
+          <span class="indent"></span>
+          <span class="label" ?hidden=${!!node.hideLabel}>
+            ${!node.hideChevron ? x`
+              <svg class="chevron" viewBox="0 0 16 16" aria-hidden="true">
+                <path fill="currentColor" d="M6 3l5 5-5 5z" />
+              </svg>
+            ` : ""}
+            <span class="label-text" title=${this.computePlainLabel(node)}>
+              ${this.renderLabelWithSelectiveHighlight(node)}
+            </span>
+          </span>
+        </summary>
+        ${nodeChildren && nodeChildren.length > 0 ? x`
+          <div class="folder-children">
+            ${c(nodeChildren, (c$1) => c$1.id, (c$1) => this.renderAnyNode(c$1, depth + 1))}
+          </div>
+        ` : x``}
+      </details>
+    `;
+	}
+	renderAnyNode(node, depth) {
+		return node.type === "file" ? this.renderLeaf(depth, node) : this.renderFolder(depth, node);
+	}
+	render() {
+		if (!this.node || this.node.type === "folder" && !this.node.children?.length) return x``;
+		let depth = this.depth ?? 0;
+		let content;
+		if (depth === 0) {
+			const extraClass = this.class ? ` ${this.class}` : "";
+			const scrollClass = this.class ? " scrollable-root" : "";
+			const inner = x`
+        <div class="tooltip-tree-root${extraClass}${scrollClass}">
+          <div class="tooltip-tree-children">
+            ${c(Array.isArray(this.node.children) ? this.node.children : [], (child) => child.id, (child) => this.renderAnyNode(child, depth + 1))}
+          </div>
+        </div>
+      `;
+			content = this.showShadow ? x`<div class="tooltip-border-outer">${inner}</div>` : inner;
+		} else if (this.node.type === "folder") content = this.renderFolder(depth, this.node);
+		else if (this.node.type === "file") content = this.renderLeaf(depth, this.node);
+		return content;
+	}
+};
+if (!customElements.get(W3A_TX_TREE_ID)) customElements.define(W3A_TX_TREE_ID, TxTree);
+if (!customElements.get("tx-tree")) {
+	class TxTreeAlias extends TxTree {}
+	customElements.define("tx-tree", TxTreeAlias);
+}
+var TxTree_default = TxTree;
+
+//#endregion
+//#region src/core/WebAuthnManager/LitComponents/TxTree/tx-tree-utils.ts
+function buildActionNode(action, idx) {
+	let actionNodes;
+	switch (action.type) {
+		case "FunctionCall":
+			actionNodes = [{
+				id: `a${idx}-args`,
+				label: "using args:",
+				type: "file",
+				open: false,
+				hideChevron: true,
+				hideLabel: true,
+				content: formatArgs(action.args)
+			}];
+			break;
+		case "Transfer":
+			actionNodes = [];
+			break;
+		case "CreateAccount":
+			actionNodes = [];
+			break;
+		case "DeployContract": {
+			const code = action.code;
+			const codeSize = formatCodeSize(code);
+			actionNodes = [{
+				id: `a${idx}-code-size`,
+				label: `WASM contract code size: ${codeSize}`,
+				type: "file",
+				open: false
+			}];
+			break;
+		}
+		case "DeployGlobalContract": {
+			const code = action.code;
+			const deployMode = action.deployMode;
+			const codeSize = formatCodeSize(code);
+			actionNodes = [{
+				id: `a${idx}-deploy-mode`,
+				label: `mode: ${deployMode}`,
+				type: "file",
+				open: false
+			}, {
+				id: `a${idx}-code-size`,
+				label: `WASM global contract code size: ${codeSize}`,
+				type: "file",
+				open: false
+			}];
+			break;
+		}
+		case "UseGlobalContract": {
+			const accountId = action.accountId;
+			const codeHash = action.codeHash;
+			let label;
+			if (accountId) label = `by account: ${accountId}`;
+			else if (codeHash) {
+				const short = shortenPubkey(codeHash, {
+					prefix: 10,
+					suffix: 6
+				});
+				label = `by hash: ${short}`;
+			} else label = "by global contract identifier";
+			actionNodes = [{
+				id: `a${idx}-identifier`,
+				label,
+				type: "file",
+				open: false
+			}];
+			break;
+		}
+		case "Stake":
+			actionNodes = [{
+				id: `a${idx}-publicKey`,
+				label: `validator: ${shortenPubkey(action.publicKey)}`,
+				type: "file",
+				open: true,
+				copyValue: action.publicKey
+			}];
+			break;
+		case "AddKey":
+			const ak = action.accessKey;
+			let permissions = "";
+			try {
+				const accessKeyObj = isString(ak) ? JSON.parse(ak) : ak;
+				permissions = accessKeyObj.permission === "FullAccess" ? "Full Access" : "Function Call";
+			} catch {
+				permissions = "Unknown";
+			}
+			actionNodes = [{
+				id: `a${idx}-publicKey`,
+				label: `key: ${shortenPubkey(action.publicKey)}`,
+				open: false,
+				type: "file",
+				copyValue: action.publicKey
+			}, {
+				id: `a${idx}-permissions`,
+				label: `permissions: ${permissions}`,
+				open: false,
+				type: "file"
+			}];
+			break;
+		case "DeleteKey":
+			actionNodes = [{
+				id: `a${idx}-publicKey`,
+				label: `key: ${shortenPubkey(action.publicKey)}`,
+				open: false,
+				type: "file",
+				copyValue: action.publicKey
+			}];
+			break;
+		case "DeleteAccount":
+			actionNodes = [{
+				id: `a${idx}-beneficiaryId`,
+				label: `sending balance to: ${action.beneficiaryId}`,
+				open: false,
+				type: "file"
+			}];
+			break;
+		default:
+			let raw = "";
+			try {
+				raw = JSON.stringify(action, null, 2);
+			} catch {
+				raw = String(action);
+			}
+			actionNodes = [{
+				id: `a${idx}-action`,
+				label: `Action: ${action.type || "Unknown"}`,
+				open: false,
+				type: "file"
+			}, {
+				id: `a${idx}-raw`,
+				label: "Raw Data",
+				type: "file",
+				open: false,
+				content: raw
+			}];
+			break;
+	}
+	return {
+		id: `action-${idx}`,
+		label: "",
+		type: "folder",
+		open: false,
+		hideChevron: true,
+		action,
+		actionIndex: idx,
+		children: actionNodes
+	};
+}
+function buildTransactionNode(tx, tIdx, totalTransactions, styles) {
+	const actionFolders = tx.actions.map((action, idx) => buildActionNode(action, idx));
+	return {
+		id: `tx-${tIdx}`,
+		label: "",
+		type: "folder",
+		open: true,
+		hideChevron: true,
+		transaction: tx,
+		transactionIndex: tIdx,
+		totalTransactions,
+		children: [...actionFolders]
+	};
+}
+function buildDisplayTreeFromTxPayloads(txSigningRequests, styles) {
+	const totalTransactions = txSigningRequests.length;
+	const txFolders = txSigningRequests.map((tx, tIdx) => buildTransactionNode(tx, tIdx, totalTransactions, styles));
+	return {
+		id: "txs-root",
+		label: totalTransactions > 1 ? "Transactions" : "Transaction",
+		type: "folder",
+		open: true,
+		children: txFolders
+	};
+}
+
+//#endregion
+//#region src/core/WebAuthnManager/LitComponents/IframeTxConfirmer/tx-confirm-content.ts
+/**
+* Shared confirmation content surface used by both Modal and Drawer containers.
+* - Renders summary, TxTree, and confirm/cancel actions
+* - Emits semantic events: `lit-confirm` and `lit-cancel` (containers bridge to w3a:* events)
+* - Does not own backdrop, focus traps, or ESC handling
+*/
+var TxConfirmContentElement = class extends LitElementWithProps {
+	static requiredChildTags = [W3A_TX_TREE_ID, "tx-tree"];
+	static keepDefinitions = [TxTree_default];
+	static properties = {
+		nearAccountId: {
+			type: String,
+			attribute: "near-account-id"
+		},
+		txSigningRequests: { type: Array },
+		intentDigest: {
+			type: String,
+			attribute: "intent-digest"
+		},
+		vrfChallenge: { type: Object },
+		theme: { type: String },
+		loading: { type: Boolean },
+		errorMessage: { type: String },
+		title: { type: String },
+		confirmText: { type: String },
+		cancelText: { type: String },
+		_treeNode: {
+			attribute: false,
+			state: true
+		},
+		tooltipWidth: {
+			type: String,
+			attribute: "tooltip-width"
+		},
+		nearExplorerUrl: {
+			type: String,
+			attribute: "near-explorer-url"
+		},
+		showShadow: {
+			type: Boolean,
+			attribute: "show-shadow"
+		}
+	};
+	_treeNode = null;
+	_ensureTreeDefinition = TxTree_default;
+	_txTreeWidth = "var(--tooltip-width, 100%)";
+	_stylesReady = false;
+	_stylePromises = [];
+	_stylesAwaiting = null;
+	constructor() {
+		super();
+		const root = document?.documentElement || null;
+		if (root) this._stylePromises.push(ensureExternalStyles(root, "tx-tree.css", "data-w3a-tx-tree-css"), ensureExternalStyles(root, "tx-confirmer.css", "data-w3a-tx-confirmer-css"), ensureExternalStyles(root, "w3a-components.css", "data-w3a-components-css"));
+		this.nearAccountId = "";
+		this.txSigningRequests = [];
+		this.theme = "dark";
+		this.loading = false;
+		this.title = "Review Transaction";
+		this.confirmText = "Confirm";
+		this.cancelText = "Cancel";
+		this.showShadow = false;
+	}
+	getComponentPrefix() {
+		return "tx-confirm-content";
+	}
+	createRenderRoot() {
+		const root = this;
+		this._stylePromises.push(ensureExternalStyles(root, "tx-tree.css", "data-w3a-tx-tree-css"));
+		this._stylePromises.push(ensureExternalStyles(root, "tx-confirmer.css", "data-w3a-tx-confirmer-css"));
+		return root;
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		this._applyTooltipWidthVar();
+		this._rebuildTree();
+		this.addEventListener("pointerdown", this._stopDragStart);
+		this.addEventListener("mousedown", this._stopDragStart);
+		this.addEventListener("touchstart", this._stopDragStart, { passive: false });
+	}
+	disconnectedCallback() {
+		this.removeEventListener("pointerdown", this._stopDragStart);
+		this.removeEventListener("mousedown", this._stopDragStart);
+		this.removeEventListener("touchstart", this._stopDragStart);
+		super.disconnectedCallback();
+	}
+	shouldUpdate(_changed) {
+		if (this._stylesReady) return true;
+		if (!this._stylesAwaiting) {
+			const p$1 = Promise.all(this._stylePromises).then(() => new Promise((r) => requestAnimationFrame(() => requestAnimationFrame(() => r()))));
+			this._stylesAwaiting = p$1.then(() => {
+				this._stylesReady = true;
+				this.requestUpdate();
+			});
+		}
+		return false;
+	}
+	updated(changed) {
+		super.updated(changed);
+		if (changed.has("txSigningRequests")) this._rebuildTree();
+		if (changed.has("tooltipWidth")) this._applyTooltipWidthVar();
+	}
+	_applyTooltipWidthVar() {
+		const w = this._normalizeWidth(this.tooltipWidth);
+		if (w) this.setCssVars({ "--tooltip-width": w });
+	}
+	_normalizeWidth(val) {
+		if (val === void 0 || val === null) return void 0;
+		if (typeof val === "number" && Number.isFinite(val)) return `${val}px`;
+		const s$1 = String(val).trim();
+		return s$1.length ? s$1 : void 0;
+	}
+	_rebuildTree() {
+		try {
+			const inputs = Array.isArray(this.txSigningRequests) ? this.txSigningRequests : [];
+			const uiTxs = fromTransactionInputsWasm(inputs);
+			this._treeNode = buildDisplayTreeFromTxPayloads(uiTxs);
+		} catch (e$2) {
+			console.warn("[TxConfirmContent] failed to build TxTree", e$2);
+			this._treeNode = null;
+		}
+		this.requestUpdate();
+	}
+	_stopDragStart = (e$2) => {
+		e$2.stopPropagation();
+	};
+	onConfirm = () => {
+		if (this.loading) return;
+		dispatchLitConfirm(this);
+	};
+	onCancel = () => {
+		if (this.loading) return;
+		dispatchLitCancel(this);
+	};
+	render() {
+		return x`
+      <div class="txc-root">
+        ${this.errorMessage ? x`<div class="error">${this.errorMessage}</div>` : null}
+        ${(() => {
+			const treeTheme = this.theme === "dark" ? "dark" : "light";
+			const explorerBase = this.nearExplorerUrl || "https://testnet.nearblocks.io";
+			return this._treeNode ? x`<div class="tooltip-width">
+                    <w3a-tx-tree
+                      light-dom
+                      .node=${this._treeNode}
+                      .theme=${treeTheme}
+                      .width=${this._txTreeWidth}
+                      .nearExplorerUrl=${explorerBase}
+                      .showShadow=${this.showShadow}
+                    ></w3a-tx-tree>
+                  </div>` : x`<div class="muted">No actions</div>`;
+		})()}
+        <div class="actions">
+          <button
+            class="cancel"
+            @click=${this.onCancel}
+            ?disabled=${this.loading}
+          >
+            ${this.cancelText}
+          </button>
+          <button
+            class="confirm ${this.loading ? "loading" : ""}"
+            @click=${this.onConfirm}
+            ?disabled=${this.loading}
+          >
+            ${this.loading ? x`<span class="loading-indicator" role="progressbar" aria-label="Loading"></span><span class="sr-only">Loading</span>` : x`${this.confirmText}`}
+          </button>
+        </div>
+      </div>
+    `;
+	}
+};
+if (!customElements.get(W3A_TX_CONFIRM_CONTENT_ID)) customElements.define(W3A_TX_CONFIRM_CONTENT_ID, TxConfirmContentElement);
+var tx_confirm_content_default = TxConfirmContentElement;
+
+//#endregion
+//#region src/core/WebAuthnManager/LitComponents/common/PadlockIcon.ts
+var PadlockIconElement = class extends i {
+	static properties = {
+		size: { type: String },
+		strokeWidth: {
+			type: Number,
+			attribute: "stroke-width"
+		}
+	};
+	createRenderRoot() {
+		const root = super.createRenderRoot();
+		ensureExternalStyles(root, "padlock-icon.css", "data-w3a-padlock-icon-css").catch(() => {});
+		return root;
+	}
+	constructor() {
+		super();
+		this.size = void 0;
+		this.strokeWidth = 2;
+	}
+	render() {
+		const size = this.size || void 0;
+		const sw = Number(this.strokeWidth) || 2;
+		return x`
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width=${sw}
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        width=${size || "100%"}
+        height=${size || "100%"}
+        aria-hidden="true"
+        focusable="false"
+      >
+        <rect width="18" height="11" x="3" y="11" rx="2" ry="2"/>
+        <path d="M7 11V7a5 5 0 0 1 10 0v4"/>
+      </svg>
+    `;
+	}
+};
+try {
+	if (!customElements.get("w3a-padlock-icon")) customElements.define("w3a-padlock-icon", PadlockIconElement);
+} catch {}
+var PadlockIcon_default = PadlockIconElement;
+
+//#endregion
+//#region src/core/WebAuthnManager/LitComponents/IframeTxConfirmer/viewer-drawer.ts
+/**
+* DrawerTxConfirmer: Drawer variant of the transaction confirmer
+*/
+var DrawerTxConfirmerElement = class extends LitElementWithProps {
+	static requiredChildTags = ["w3a-tx-confirm-content", "w3a-drawer"];
+	static strictChildDefinitions = true;
+	static keepDefinitions = [tx_confirm_content_default, PadlockIcon_default];
+	static properties = {
+		nearAccountId: {
+			type: String,
+			attribute: "near-account-id"
+		},
+		txSigningRequests: { type: Array },
+		vrfChallenge: { type: Object },
+		theme: {
+			type: String,
+			reflect: true
+		},
+		loading: { type: Boolean },
+		errorMessage: { type: String },
+		body: { type: String },
+		title: { type: String },
+		confirmText: { type: String },
+		cancelText: { type: String },
+		deferClose: {
+			type: Boolean,
+			attribute: "defer-close"
+		},
+		nearExplorerUrl: {
+			type: String,
+			attribute: "near-explorer-url"
+		}
+	};
+	_ensureDrawerDefinition = Drawer_default;
+	_drawerEl = null;
+	_open = false;
+	_onWindowMessage = (ev) => {
+		const data = ev && ev.data || {};
+		if (!data || typeof data.type !== "string") return;
+		if (data.type === "MODAL_TIMEOUT") {
+			const msg = typeof data.payload === "string" && data.payload ? data.payload : "Operation timed out";
+			this.loading = false;
+			this.errorMessage = msg;
+			this._drawerEl?.handleClose?.();
+			this.dispatchEvent(new CustomEvent(WalletIframeDomEvents.TX_CONFIRMER_CANCEL, {
+				bubbles: true,
+				composed: true,
+				detail: { confirmed: false }
+			}));
+		}
+	};
+	_onKeyDown = (e$2) => {
+		if (e$2.key === "Escape" || e$2.key === "Esc") {
+			if (this.loading) return;
+			e$2.preventDefault();
+			this._drawerEl?.handleClose();
+			if (!this._drawerEl) this.dispatchEvent(new CustomEvent(WalletIframeDomEvents.TX_CONFIRMER_CANCEL, {
+				bubbles: true,
+				composed: true,
+				detail: { confirmed: false }
+			}));
+		}
+	};
+	constructor() {
+		super();
+		this.nearAccountId = "";
+		this.txSigningRequests = [];
+		this.theme = "dark";
+		this.loading = false;
+		this.body = "";
+		this.title = "";
+		this.confirmText = "Next";
+		this.cancelText = "Cancel";
+		this.deferClose = false;
+	}
+	getComponentPrefix() {
+		return "drawer-tx";
+	}
+	createRenderRoot() {
+		const root = this;
+		ensureExternalStyles(root, "w3a-components.css", "data-w3a-components-css").catch(() => {});
+		ensureExternalStyles(root, "tx-tree.css", "data-w3a-tx-tree-css").catch(() => {});
+		ensureExternalStyles(root, "tx-confirmer.css", "data-w3a-tx-confirmer-css").catch(() => {});
+		return root;
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		try {
+			const docEl = this.ownerDocument?.documentElement;
+			if (docEl && this.theme) {
+				const current = docEl.getAttribute("data-w3a-theme");
+				if (!current || current === "dark" || current === "light") {
+					docEl.setAttribute("data-w3a-theme", this.theme);
+					this._ownsThemeAttr = true;
+				}
+			}
+		} catch {}
+		try {
+			const docEl = this.ownerDocument?.documentElement;
+			if (docEl) ensureExternalStyles(docEl, "w3a-components.css", "data-w3a-components-css").catch(() => {});
+		} catch {}
+		window.addEventListener("keydown", this._onKeyDown);
+		window.addEventListener("message", this._onWindowMessage);
+		const hostEl = this;
+		if (hostEl.tabIndex === void 0 || hostEl.tabIndex === null) hostEl.tabIndex = -1;
+		hostEl.focus({ preventScroll: true });
+		if (typeof window.focus === "function") window.focus();
+	}
+	async firstUpdated() {
+		this._drawerEl = this.querySelector(W3A_DRAWER_ID);
+		const root = this.renderRoot;
+		await Promise.all([
+			ensureExternalStyles(root, "w3a-components.css", "data-w3a-components-css"),
+			ensureExternalStyles(root, "tx-tree.css", "data-w3a-tx-tree-css"),
+			ensureExternalStyles(root, "tx-confirmer.css", "data-w3a-tx-confirmer-css"),
+			ensureExternalStyles(root, "drawer.css", "data-w3a-drawer-css")
+		]);
+		await new Promise((r) => requestAnimationFrame(() => requestAnimationFrame(() => r())));
+		this._open = true;
+		this.requestUpdate();
+	}
+	disconnectedCallback() {
+		window.removeEventListener("keydown", this._onKeyDown);
+		window.removeEventListener("message", this._onWindowMessage);
+		super.disconnectedCallback();
+	}
+	updated(changed) {
+		super.updated(changed);
+		if (changed.has("theme")) {
+			const docEl = this.ownerDocument?.documentElement;
+			if (docEl && this.theme && this._ownsThemeAttr) docEl.setAttribute("data-w3a-theme", this.theme);
+		}
+	}
+	onDrawerCancel = () => {
+		if (this.loading) return;
+		this._open = false;
+		this.requestUpdate();
+		this.dispatchEvent(new CustomEvent(WalletIframeDomEvents.TX_CONFIRMER_CANCEL, {
+			bubbles: true,
+			composed: true,
+			detail: { confirmed: false }
+		}));
+	};
+	onContentConfirm = () => {
+		if (this.loading) return;
+		this.loading = true;
+		this.requestUpdate();
+		this.dispatchEvent(new CustomEvent(WalletIframeDomEvents.TX_CONFIRMER_CONFIRM, {
+			bubbles: true,
+			composed: true,
+			detail: { confirmed: true }
+		}));
+	};
+	onContentCancel = () => {
+		if (this.loading) return;
+		this._drawerEl?.handleClose();
+		this._open = false;
+		this.requestUpdate();
+		this.dispatchEvent(new CustomEvent(WalletIframeDomEvents.TX_CONFIRMER_CANCEL, {
+			bubbles: true,
+			composed: true,
+			detail: { confirmed: false }
+		}));
+	};
+	close(_confirmed) {
+		this.remove();
+	}
+	render() {
+		return x`
+      <w3a-drawer
+        .open=${this._open}
+        theme=${this.theme}
+        .loading=${this.loading}
+        .errorMessage=${this.errorMessage || ""}
+        .height=${"auto"}
+        .overpullPx=${160}
+        .dragToClose=${true}
+        .showCloseButton=${true}
+        @lit-cancel=${this.onDrawerCancel}
+      >
+        <div class="drawer-tx-confirmer-root">
+          <div class="section responsive-card margin-left1">
+            <div class="drawer-header">
+              ${(() => {
+			const isRegistration = (this.txSigningRequests?.length || 0) === 0;
+			const fallback = isRegistration ? "Register with Passkey" : "Confirm with Passkey";
+			const titleText = (this.title || "").trim();
+			const heading = titleText || fallback;
+			return x`<h2 class="drawer-title">${heading}</h2>`;
+		})()}
+            </div>
+          </div>
+
+          <div class="section responsive-card margin-left1">
+            <div class="rpid-wrapper">
+              <div class="rpid">
+                <div class="secure-indicator">
+                      <w3a-padlock-icon class="padlock-icon"></w3a-padlock-icon>
+                  ${this.vrfChallenge?.rpId ? x`<span class="domain-text">${this.vrfChallenge.rpId}</span>` : ""}
+                </div>
+                <span class="security-details">
+                  <svg xmlns="http://www.w3.org/2000/svg"
+                    class="block-height-icon"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-width="2"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                  >
+                    <path d="M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z"/>
+                    <path d="m3.3 7 8.7 5 8.7-5"/>
+                    <path d="M12 22V12"/>
+                  </svg>
+                  ${this.vrfChallenge?.blockHeight ? x`block ${this.vrfChallenge.blockHeight}` : ""}
+                </span>
+              </div>
+            </div>
+            ${this.body && this.body.trim() ? x`<div class="confirmation-body">${this.body}</div>` : ""}
+          </div>
+          <div class="section responsive-card responsive-card-center">
+            <w3a-tx-confirm-content
+              .nearAccountId=${this.nearAccountId || ""}
+              .txSigningRequests=${this.txSigningRequests || []}
+              .intentDigest=${this.intentDigest}
+              .vrfChallenge=${this.vrfChallenge}
+              .theme=${this.theme}
+              .nearExplorerUrl=${this.nearExplorerUrl}
+              .showShadow=${false}
+              .loading=${this.loading}
+              .errorMessage=${this.errorMessage || ""}
+              .title=${this.title}
+              .confirmText=${this.confirmText}
+              .cancelText=${this.cancelText}
+              @lit-confirm=${this.onContentConfirm}
+              @lit-cancel=${this.onContentCancel}
+            ></w3a-tx-confirm-content>
+          </div>
+
+        </div>
+      </w3a-drawer>
+    `;
+	}
+};
+if (!customElements.get(W3A_DRAWER_TX_CONFIRMER_ID)) customElements.define(W3A_DRAWER_TX_CONFIRMER_ID, DrawerTxConfirmerElement);
+
+//#endregion
+//#region src/core/WebAuthnManager/LitComponents/HaloBorder/index.ts
+var HaloBorderElement = class extends LitElementWithProps {
+	static properties = {
+		animated: { type: Boolean },
+		theme: { type: String },
+		durationMs: {
+			type: Number,
+			attribute: "duration-ms"
+		},
+		ringGap: {
+			type: Number,
+			attribute: "ring-gap"
+		},
+		ringWidth: {
+			type: Number,
+			attribute: "ring-width"
+		},
+		ringBorderRadius: {
+			type: String,
+			attribute: "ring-border-radius"
+		},
+		ringBorderShadow: {
+			type: String,
+			attribute: "ring-border-shadow"
+		},
+		ringBackground: {
+			type: String,
+			attribute: "ring-background"
+		},
+		padding: { type: String },
+		innerPadding: {
+			type: String,
+			attribute: "inner-padding"
+		},
+		innerBackground: {
+			type: String,
+			attribute: "inner-background"
+		}
+	};
+	_stylesReady = false;
+	_stylePromises = [];
+	_stylesAwaiting = null;
+	createRenderRoot() {
+		const root = super.createRenderRoot();
+		const p$1 = ensureExternalStyles(root, "halo-border.css", "data-w3a-halo-border-css");
+		this._stylePromises.push(p$1);
+		p$1.catch(() => {});
+		return root;
+	}
+	shouldUpdate(_changed) {
+		if (this._stylesReady) return true;
+		if (!this._stylesAwaiting) {
+			const settle = Promise.all(this._stylePromises).then(() => new Promise((r) => requestAnimationFrame(() => requestAnimationFrame(() => r()))));
+			this._stylesAwaiting = settle.then(() => {
+				this._stylesReady = true;
+				this.requestUpdate();
+			});
+		}
+		return false;
+	}
+	_rafId = null;
+	_startTs = 0;
+	_running = false;
+	updated(changed) {
+		const vars = {};
+		if (typeof this.ringGap === "number") vars["--ring-gap"] = `${this.ringGap}px`;
+		if (typeof this.ringWidth === "number") vars["--ring-width"] = `${this.ringWidth}px`;
+		if (this.ringBorderRadius) vars["--ring-border-radius"] = this.ringBorderRadius;
+		if (this.innerPadding) vars["--inner-padding"] = this.innerPadding;
+		if (this.innerBackground) vars["--inner-background"] = this.innerBackground;
+		if (this.ringBackground) vars["--ring-stops"] = this.ringBackground;
+		if (this.ringBorderShadow) vars["--halo-box-shadow"] = this.ringBorderShadow;
+		vars["--halo-angle"] = vars["--halo-angle"] || "0deg";
+		this.setCssVars(vars);
+		if (!changed) return;
+		if (changed.has("animated") || changed.has("durationMs")) if (this.animated) this.start();
+		else this.stop();
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		if (this.animated) this.start();
+	}
+	disconnectedCallback() {
+		this.stop();
+		super.disconnectedCallback();
+	}
+	tick = (ts) => {
+		if (!this._running) return;
+		if (!this._startTs) this._startTs = ts;
+		const dur = typeof this.durationMs === "number" && this.durationMs > 0 ? this.durationMs : 1150;
+		const delta = (ts - this._startTs) % dur;
+		const angle = delta / dur * 360;
+		this.setCssVars({ "--halo-angle": `${angle}deg` });
+		this._rafId = requestAnimationFrame(this.tick);
+	};
+	start() {
+		if (this._running) return;
+		this._running = true;
+		this._startTs = 0;
+		this._rafId = requestAnimationFrame(this.tick);
+	}
+	stop() {
+		this._running = false;
+		if (this._rafId) {
+			cancelAnimationFrame(this._rafId);
+			this._rafId = null;
+		}
+		this.setCssVars({ "--halo-angle": `0deg` });
+	}
+	render() {
+		return x`
+      <div class="halo-root ${this.theme ?? "light"} ${this.animated ? "animated" : ""}">
+        <div class="halo-inner">
+          <div class="halo-outer">
+            ${this.animated ? x`<div class="halo-ring"></div>` : ""}
+            <div class="halo-content"><slot></slot></div>
+          </div>
+        </div>
+      </div>
+    `;
+	}
+};
+if (!customElements.get(W3A_HALO_BORDER_ID)) customElements.define(W3A_HALO_BORDER_ID, HaloBorderElement);
+var HaloBorder_default = HaloBorderElement;
+
+//#endregion
+//#region src/core/WebAuthnManager/LitComponents/PasskeyHaloLoading/index.ts
+var PasskeyHaloLoadingElement = class extends LitElementWithProps {
+	static properties = {
+		animated: { type: Boolean },
+		theme: { type: String },
+		ringGap: {
+			type: Number,
+			attribute: "ring-gap"
+		},
+		ringWidth: {
+			type: Number,
+			attribute: "ring-width"
+		},
+		ringBorderRadius: {
+			type: String,
+			attribute: "ring-border-radius"
+		},
+		ringBorderShadow: {
+			type: String,
+			attribute: "ring-border-shadow"
+		},
+		ringBackground: {
+			type: String,
+			attribute: "ring-background"
+		},
+		padding: { type: String },
+		innerPadding: {
+			type: String,
+			attribute: "inner-padding"
+		},
+		innerBackground: {
+			type: String,
+			attribute: "inner-background"
+		},
+		height: { type: Number },
+		width: { type: Number },
+		iconContainerBorderRadius: {
+			type: String,
+			attribute: "icon-container-border-radius"
+		},
+		iconContainerBackgroundColor: {
+			type: String,
+			attribute: "icon-container-background-color"
+		}
+	};
+	_stylesReady = false;
+	_stylePromises = [];
+	_stylesAwaiting = null;
+	createRenderRoot() {
+		const root = super.createRenderRoot();
+		const p$1 = ensureExternalStyles(root, "passkey-halo-loading.css", "data-w3a-passkey-halo-loading-css");
+		this._stylePromises.push(p$1);
+		p$1.catch(() => {});
+		return root;
+	}
+	shouldUpdate(_changed) {
+		if (this._stylesReady) return true;
+		if (!this._stylesAwaiting) {
+			const settle = Promise.all(this._stylePromises).then(() => new Promise((r) => requestAnimationFrame(() => requestAnimationFrame(() => r()))));
+			this._stylesAwaiting = settle.then(() => {
+				this._stylesReady = true;
+				this.requestUpdate();
+			});
+		}
+		return false;
+	}
+	updated() {
+		const vars = {};
+		if (this.iconContainerBackgroundColor) vars["--w3a-modal__passkey-halo-loading-icon-container__background-color"] = this.iconContainerBackgroundColor;
+		if (this.iconContainerBorderRadius) vars["--w3a-modal__passkey-halo-loading-icon-container__border-radius"] = this.iconContainerBorderRadius;
+		if (Object.keys(vars).length) this.setCssVars(vars);
+	}
+	render() {
+		const theme = this.theme ?? "light";
+		const height = this.height ?? 24;
+		const width = this.width ?? 24;
+		const animated = this.animated ?? true;
+		const ringGap = this.ringGap ?? 4;
+		const ringWidth = this.ringWidth ?? 4;
+		const ringBorderRadius = this.ringBorderRadius ?? "1.125rem";
+		const ringBorderShadow = this.ringBorderShadow;
+		const ringBackground = this.ringBackground;
+		const padding = this.padding;
+		const innerPadding = this.innerPadding ?? "4px";
+		const innerBackground = this.innerBackground;
+		return x`
+      <div class="w3a-passkey-loading-root ${theme}">
+        <w3a-halo-border
+          .theme=${theme}
+          .animated=${animated}
+          .ringGap=${ringGap}
+          .ringWidth=${ringWidth}
+          .ringBorderRadius=${ringBorderRadius}
+          .ringBorderShadow=${ringBorderShadow}
+          .ringBackground=${ringBackground}
+          .padding=${padding}
+          .innerPadding=${innerPadding}
+          .innerBackground=${innerBackground}
+        >
+          <div class="w3a-passkey-loading-touch-icon-container">
+            ${this.renderTouchIcon({
+			height,
+			width
+		})}
+          </div>
+        </w3a-halo-border>
+      </div>
+    `;
+	}
+	renderTouchIcon({ height, width }) {
+		const strokeWidth = "var(--w3a-modal__passkey-halo-loading-touch-icon__stroke-width, 3)";
+		return x`
+      <svg
+        class="w3a-passkey-loading-touch-icon"
+        width=${width}
+        height=${height}
+        viewBox="0 0 24 24"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M6.40519 19.0481C6.58912 18.6051 6.75832 18.1545 6.91219 17.6969M14.3433 20.6926C14.6095 19.9418 14.8456 19.1768 15.0502 18.399C15.2359 17.6934 15.3956 16.9772 15.5283 16.2516M19.4477 17.0583C19.8121 15.0944 20.0026 13.0694 20.0026 11C20.0026 6.58172 16.4209 3 12.0026 3C10.7472 3 9.55932 3.28918 8.50195 3.80456M3.52344 15.0245C3.83663 13.7343 4.00262 12.3865 4.00262 11C4.00262 9.25969 4.55832 7.64917 5.50195 6.33621M12.003 11C12.003 13.7604 11.5557 16.4163 10.7295 18.8992C10.5169 19.5381 10.2792 20.1655 10.0176 20.7803M7.71227 14.5C7.90323 13.3618 8.00262 12.1925 8.00262 11C8.00262 8.79086 9.79348 7 12.0026 7C14.2118 7 16.0026 8.79086 16.0026 11C16.0026 11.6166 15.9834 12.2287 15.9455 12.8357"
+          stroke="currentColor"
+          stroke-width=${strokeWidth}
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          vector-effect="non-scaling-stroke"
+          pathLength="1"
+        />
+      </svg>
+    `;
+	}
+};
+if (!customElements.get(W3A_PASSKEY_HALO_LOADING_ID)) customElements.define(W3A_PASSKEY_HALO_LOADING_ID, PasskeyHaloLoadingElement);
+var PasskeyHaloLoading_default = PasskeyHaloLoadingElement;
+
+//#endregion
+//#region src/core/WebAuthnManager/LitComponents/IframeTxConfirmer/viewer-modal.ts
+/**
+* Modal transaction confirmation component with multiple display variants.
+* Built with Lit with strict CSP for XSS protection and reactive updates.
+*/
+var ModalTxConfirmElement = class extends LitElementWithProps {
+	static requiredChildTags = ["w3a-tx-confirm-content"];
+	static strictChildDefinitions = true;
+	static keepDefinitions = [tx_confirm_content_default];
+	static properties = {
+		nearAccountId: {
+			type: String,
+			attribute: "near-account-id"
+		},
+		to: { type: String },
+		totalAmount: { type: String },
+		method: { type: String },
+		fingerprint: { type: String },
+		body: { type: String },
+		title: { type: String },
+		cancelText: { type: String },
+		confirmText: { type: String },
+		txSigningRequests: { type: Array },
+		vrfChallenge: { type: Object },
+		loading: { type: Boolean },
+		errorMessage: { type: String },
+		theme: {
+			type: String,
+			attribute: "theme",
+			reflect: true
+		},
+		nearExplorerUrl: {
+			type: String,
+			attribute: "near-explorer-url"
+		}
+	};
+	totalAmount = "";
+	method = "";
+	fingerprint = "";
+	body = "";
+	title = "";
+	cancelText = "Cancel";
+	confirmText = "Next";
+	txSigningRequests = [];
+	vrfChallenge;
+	loading = false;
+	errorMessage = void 0;
+	theme = "dark";
+	nearExplorerUrl;
+	intentDigest;
+	deferClose = false;
+	_stylesReady = false;
+	_stylePromises = [];
+	_stylesAwaiting = null;
+	_ensureTreeDefinition = TxTree_default;
+	_ensureHaloElements = [HaloBorder_default, PasskeyHaloLoading_default];
+	_onKeyDown = (e$2) => {
+		if (e$2.key === "Escape" || e$2.key === "Esc") {
+			e$2.preventDefault();
+			this._handleCancel();
+		}
+	};
+	_onWindowMessage = (ev) => {
+		const data = ev && ev.data || {};
+		if (!data || typeof data.type !== "string") return;
+		if (data.type === "MODAL_TIMEOUT") {
+			const msg = typeof data.payload === "string" && data.payload ? data.payload : "Operation timed out";
+			this.loading = false;
+			this.errorMessage = msg;
+			this._handleCancel();
+		}
+	};
+	_backdropArmed = false;
+	constructor() {
+		super();
+		const root = document?.documentElement || null;
+		if (root) this._stylePromises.push(ensureExternalStyles(root, "w3a-components.css", "data-w3a-components-css"), ensureExternalStyles(root, "tx-tree.css", "data-w3a-tx-tree-css"), ensureExternalStyles(root, "tx-confirmer.css", "data-w3a-tx-confirmer-css"), ensureExternalStyles(root, "halo-border.css", "data-w3a-halo-border-css"), ensureExternalStyles(root, "passkey-halo-loading.css", "data-w3a-passkey-halo-loading-css"));
+	}
+	_ownsThemeAttr = false;
+	updated(changedProperties) {
+		super.updated(changedProperties);
+		if (changedProperties.has("theme")) try {
+			const docEl = this.ownerDocument?.documentElement;
+			if (docEl && this.theme && this._ownsThemeAttr) docEl.setAttribute("data-w3a-theme", this.theme);
+		} catch {}
+	}
+	getComponentPrefix() {
+		return "modal";
+	}
+	createRenderRoot() {
+		const root = this;
+		this._stylePromises.push(ensureExternalStyles(root, "tx-tree.css", "data-w3a-tx-tree-css"));
+		this._stylePromises.push(ensureExternalStyles(root, "tx-confirmer.css", "data-w3a-tx-confirmer-css"));
+		this._stylePromises.push(ensureExternalStyles(root, "halo-border.css", "data-w3a-halo-border-css"));
+		this._stylePromises.push(ensureExternalStyles(root, "passkey-halo-loading.css", "data-w3a-passkey-halo-loading-css"));
+		return root;
+	}
+	disconnectedCallback() {
+		window.removeEventListener("keydown", this._onKeyDown);
+		window.removeEventListener("message", this._onWindowMessage);
+		super.disconnectedCallback();
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		try {
+			const docEl = this.ownerDocument?.documentElement;
+			if (docEl && this.theme) {
+				const current = docEl.getAttribute("data-w3a-theme");
+				if (!current || current === "dark" || current === "light") {
+					docEl.setAttribute("data-w3a-theme", this.theme);
+					this._ownsThemeAttr = true;
+				}
+			}
+		} catch {}
+		setTimeout(() => {
+			this._backdropArmed = true;
+		}, 0);
+		window.addEventListener("keydown", this._onKeyDown);
+		window.addEventListener("message", this._onWindowMessage);
+		const hostEl = this;
+		hostEl.tabIndex = hostEl.tabIndex ?? -1;
+		hostEl.focus({ preventScroll: true });
+		if (typeof window.focus === "function") window.focus();
+	}
+	shouldUpdate(_changed) {
+		if (this._stylesReady) return true;
+		if (!this._stylesAwaiting) {
+			const p$1 = Promise.all(this._stylePromises).then(() => new Promise((r) => requestAnimationFrame(() => requestAnimationFrame(() => r()))));
+			this._stylesAwaiting = p$1.then(() => {
+				this._stylesReady = true;
+				this.requestUpdate();
+			});
+		}
+		return false;
+	}
+	render() {
+		return x`
+      <!-- Separate backdrop layer for independent animation -->
+      <div class="modal-backdrop-blur" @click=${this._handleBackdropClick}></div>
+      <!-- Modal content layer -->
+      <div class="modal-backdrop" @click=${this._handleContentClick}>
+        <div class="modal-container-root">
+
+          <div class="responsive-card">
+            <div class="hero">
+              <w3a-passkey-halo-loading
+                .theme=${this.theme}
+                .animated=${!this.errorMessage ? true : false}
+                .ringGap=${4}
+                .ringWidth=${4}
+                .ringBorderRadius=${"1.125rem"}
+                .ringBackground=${"var(--w3a-modal__passkey-halo-loading__ring-background)"}
+                .innerPadding=${"0px"}
+                .innerBackground=${"var(--w3a-modal__passkey-halo-loading__inner-background)"}
+                .height=${36}
+                .width=${36}
+              ></w3a-passkey-halo-loading>
+              <div class="hero-container">
+                <!-- Hero heading -->
+                ${(() => {
+			const isRegistration = (this.txSigningRequests?.length || 0) === 0;
+			const fallback = isRegistration ? "Register with Passkey" : "Confirm with Passkey";
+			const titleText = (this.title || "").trim();
+			const heading = titleText || fallback;
+			return x`<h2 class="hero-heading">${heading}</h2>`;
+		})()}
+                ${this.errorMessage ? x`<div class="error-banner">${this.errorMessage}</div>` : ""}
+                <!-- RpID Section -->
+                <div class="rpid-wrapper">
+                  <div class="rpid">
+                    <div class="secure-indicator">
+                      <svg xmlns="http://www.w3.org/2000/svg"
+                        class="padlock-icon"
+                        viewBox="0 0 24 24"
+                        fill="none"
+                        stroke="currentColor"
+                        stroke-width="2"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                      >
+                        <rect width="18" height="11" x="3" y="11" rx="2" ry="2"/>
+                        <path d="M7 11V7a5 5 0 0 1 10 0v4"/>
+                      </svg>
+                      ${this.vrfChallenge?.rpId ? x`<span class="domain-text">${this.vrfChallenge.rpId}</span>` : ""}
+                    </div>
+                    <span class="security-details">
+                      <svg xmlns="http://www.w3.org/2000/svg"
+                        class="block-height-icon"
+                        viewBox="0 0 24 24"
+                        fill="none"
+                        stroke="currentColor"
+                        stroke-width="2"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                      >
+                        <path d="M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A 2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z"/>
+                        <path d="m3.3 7 8.7 5 8.7-5"/>
+                        <path d="M12 22V12"/>
+                      </svg>
+                      ${this.vrfChallenge?.blockHeight ? x`block ${this.vrfChallenge.blockHeight}` : ""}
+                    </span>
+                  </div>
+                </div>
+              </div>
+            </div>
+            ${this.body && this.body.trim() ? x`<div class="confirmation-body">${this.body}</div>` : ""}
+          </div>
+
+          <div class="responsive-card">
+            <w3a-tx-confirm-content
+              .nearAccountId=${this["nearAccountId"] || ""}
+              .txSigningRequests=${this.txSigningRequests || []}
+              .intentDigest=${this.intentDigest}
+              .vrfChallenge=${this.vrfChallenge}
+              .theme=${this.theme}
+              .nearExplorerUrl=${this.nearExplorerUrl}
+              .showShadow=${false}
+              .loading=${this.loading}
+              .errorMessage=${this.errorMessage || ""}
+              .title=${this.title}
+              .confirmText=${this.confirmText}
+              .cancelText=${this.cancelText}
+              @lit-confirm=${this._handleConfirm}
+              @lit-cancel=${this._handleCancel}
+            ></w3a-tx-confirm-content>
+          </div>
+        </div>
+      </div>
+    `;
+	}
+	_handleCancel() {
+		if (this.loading) return;
+		this.dispatchEvent(new CustomEvent(WalletIframeDomEvents.TX_CONFIRMER_CANCEL, {
+			bubbles: true,
+			composed: true,
+			detail: { confirmed: false }
+		}));
+		if (!this.deferClose) this._resolveAndCleanup(false);
+	}
+	_handleConfirm() {
+		if (this.loading) return;
+		this.loading = true;
+		this.requestUpdate();
+		this.dispatchEvent(new CustomEvent(WalletIframeDomEvents.TX_CONFIRMER_CONFIRM, {
+			bubbles: true,
+			composed: true,
+			detail: { confirmed: true }
+		}));
+		if (!this.deferClose) this._resolveAndCleanup(true);
+	}
+	_handleBackdropClick() {
+		if (!this._backdropArmed) return;
+		this._handleCancel();
+	}
+	_handleContentClick(e$2) {
+		e$2.stopPropagation();
+	}
+	_resolveAndCleanup(confirmed) {
+		this.remove();
+	}
+	close(confirmed) {
+		this._resolveAndCleanup(confirmed);
+	}
+};
+if (!customElements.get(W3A_MODAL_TX_CONFIRMER_ID)) customElements.define(W3A_MODAL_TX_CONFIRMER_ID, ModalTxConfirmElement);
+
+//#endregion
+//#region src/core/WebAuthnManager/LitComponents/IframeTxConfirmer/tx-confirmer-wrapper.ts
+const DEFAULT_VARIANT = "modal";
+function isTransactionInput(candidate) {
+	if (!isObject(candidate)) return false;
+	const record = candidate;
+	const receiver = record.receiverId;
+	const actions = record.actions;
+	return isString(receiver) && Array.isArray(actions);
+}
+/**
+* Thin wrapper that renders the modal or drawer confirmer inline instead of
+* inside a nested iframe. It forwards props to the active variant element,
+* performs intent digest validation, and re-emits canonical events.
+*/
+var TxConfirmerWrapperElement = class extends LitElementWithProps {
+	static properties = {
+		variant: {
+			type: String,
+			reflect: true
+		},
+		nearAccountId: {
+			type: String,
+			attribute: "near-account-id"
+		},
+		txSigningRequests: { type: Array },
+		vrfChallenge: { type: Object },
+		theme: { type: String },
+		loading: { type: Boolean },
+		errorMessage: {
+			type: String,
+			attribute: "error-message"
+		},
+		intentDigest: {
+			type: String,
+			attribute: "intent-digest"
+		},
+		body: { type: String },
+		title: { type: String },
+		confirmText: {
+			type: String,
+			attribute: "confirm-text"
+		},
+		cancelText: {
+			type: String,
+			attribute: "cancel-text"
+		},
+		deferClose: {
+			type: Boolean,
+			attribute: "defer-close"
+		},
+		nearExplorerUrl: {
+			type: String,
+			attribute: "near-explorer-url"
+		}
+	};
+	static keepDefinitions = [ModalTxConfirmElement, DrawerTxConfirmerElement];
+	childRef = e();
+	redispatchingEvent = false;
+	currentChild = null;
+	boundConfirmListener = (event) => {
+		this.handleChildConfirm(event);
+	};
+	boundCancelListener = (_event) => {
+		this.handleChildCancel();
+	};
+	constructor() {
+		super();
+		this.variant = DEFAULT_VARIANT;
+		this.nearAccountId = "";
+		this.txSigningRequests = [];
+		this.theme = "dark";
+		this.loading = false;
+		this.deferClose = true;
+		this.body = "";
+		this.title = "";
+		this.confirmText = "Confirm";
+		this.cancelText = "Cancel";
+	}
+	createRenderRoot() {
+		return this;
+	}
+	updated(changed) {
+		super.updated(changed);
+		this.syncChildProps();
+		if (changed.has("errorMessage")) this.syncErrorAttribute();
+	}
+	render() {
+		const variant = this.variant === "drawer" ? "drawer" : "modal";
+		if (variant === "drawer") return x`
+        <w3a-drawer-tx-confirmer
+          ${n(this.childRef)}
+          .nearAccountId=${this.nearAccountId}
+          .txSigningRequests=${this.txSigningRequests}
+          .vrfChallenge=${this.vrfChallenge}
+          .theme=${this.theme}
+          .nearExplorerUrl=${this.nearExplorerUrl}
+          .loading=${this.loading}
+          .errorMessage=${this.errorMessage || ""}
+          .body=${this.body}
+          .title=${this.title}
+          .confirmText=${this.confirmText}
+          .cancelText=${this.cancelText}
+          .deferClose=${this.deferClose}
+        ></w3a-drawer-tx-confirmer>
+      `;
+		return x`
+      <w3a-modal-tx-confirmer
+        ${n(this.childRef)}
+        .nearAccountId=${this.nearAccountId}
+        .txSigningRequests=${this.txSigningRequests}
+        .vrfChallenge=${this.vrfChallenge}
+        .theme=${this.theme}
+        .loading=${this.loading}
+        .errorMessage=${this.errorMessage || ""}
+        .body=${this.body}
+        .title=${this.title}
+        .confirmText=${this.confirmText}
+        .cancelText=${this.cancelText}
+        .deferClose=${this.deferClose}
+      ></w3a-modal-tx-confirmer>
+    `;
+	}
+	syncChildProps() {
+		const child = this.childRef.value;
+		if (!child) return;
+		child.nearAccountId = this.nearAccountId;
+		child.txSigningRequests = this.txSigningRequests;
+		child.vrfChallenge = this.vrfChallenge;
+		child.theme = this.theme;
+		child.loading = this.loading;
+		child.errorMessage = this.errorMessage;
+		child.body = this.body;
+		child.title = this.title;
+		child.confirmText = this.confirmText;
+		child.cancelText = this.cancelText;
+		child.deferClose = this.deferClose;
+		child.nearExplorerUrl = this.nearExplorerUrl;
+		child.requestUpdate?.();
+		this.attachChildListeners();
+	}
+	syncErrorAttribute() {
+		if (this.errorMessage) this.setAttribute("data-error-message", this.errorMessage);
+		else this.removeAttribute("data-error-message");
+	}
+	attachChildListeners() {
+		const child = this.childRef.value;
+		if (!child || child === this.currentChild) return;
+		if (this.currentChild) this.detachChildListeners();
+		child.addEventListener(WalletIframeDomEvents.TX_CONFIRMER_CONFIRM, this.boundConfirmListener);
+		child.addEventListener(WalletIframeDomEvents.TX_CONFIRMER_CANCEL, this.boundCancelListener);
+		this.currentChild = child;
+	}
+	detachChildListeners() {
+		if (!this.currentChild) return;
+		this.currentChild.removeEventListener(WalletIframeDomEvents.TX_CONFIRMER_CONFIRM, this.boundConfirmListener);
+		this.currentChild.removeEventListener(WalletIframeDomEvents.TX_CONFIRMER_CANCEL, this.boundCancelListener);
+		this.currentChild = null;
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this.detachChildListeners();
+		this.removeEventListener(WalletIframeDomEvents.TX_CONFIRMER_CONFIRM, this.boundConfirmListener, { capture: true });
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		this.addEventListener(WalletIframeDomEvents.TX_CONFIRMER_CONFIRM, this.boundConfirmListener, { capture: true });
+	}
+	handleChildCancel() {
+		if (this.loading) {
+			this.loading = false;
+			this.syncChildProps();
+		}
+	}
+	async handleChildConfirm(event) {
+		if (this.redispatchingEvent) return;
+		const child = this.childRef.value;
+		const detail = event?.detail;
+		let confirmed = detail?.confirmed !== false;
+		let error = typeof detail?.error === "string" ? detail.error : void 0;
+		this.redispatchingEvent = true;
+		try {
+			event.stopImmediatePropagation();
+			if (confirmed && this.intentDigest && (this.txSigningRequests?.length ?? 0) > 0) try {
+				const digest = await this.computeIntentDigest();
+				if (digest !== this.intentDigest) {
+					confirmed = false;
+					error = "INTENT_DIGEST_MISMATCH";
+				}
+			} catch (err) {
+				confirmed = false;
+				error = "UI_DIGEST_VALIDATION_FAILED";
+				console.warn("[TxConfirmerWrapper] intent digest validation failed", err);
+			}
+			if (confirmed) {
+				if (!this.loading) {
+					this.loading = true;
+					this.syncChildProps();
+				}
+				this.dispatchEvent(new CustomEvent(WalletIframeDomEvents.TX_CONFIRMER_CONFIRM, {
+					detail: { confirmed: true },
+					bubbles: true,
+					composed: true
+				}));
+				return;
+			}
+			this.loading = false;
+			this.syncChildProps();
+			if (child?.close) child.close(false);
+			else this.remove();
+			const detail$1 = { confirmed: false };
+			if (typeof error === "string") detail$1.error = error;
+			this.dispatchEvent(new CustomEvent(WalletIframeDomEvents.TX_CONFIRMER_CANCEL, {
+				detail: detail$1,
+				bubbles: true,
+				composed: true
+			}));
+		} finally {
+			this.redispatchingEvent = false;
+		}
+	}
+	async computeIntentDigest() {
+		const raw = Array.isArray(this.txSigningRequests) ? this.txSigningRequests : [];
+		const txs = raw.filter(isTransactionInput).map((tx) => ({
+			receiverId: tx.receiverId,
+			actions: tx.actions.map((action) => isActionArgsWasm(action) ? action : toActionArgsWasm(action)).map((action) => orderActionForDigest(action))
+		}));
+		return computeUiIntentDigestFromTxs(txs);
+	}
+};
+if (!customElements.get(W3A_TX_CONFIRMER_ID)) customElements.define(W3A_TX_CONFIRMER_ID, TxConfirmerWrapperElement);
+
+//#endregion
+export { TxConfirmerWrapperElement };