@hexclave/next 1.0.14 → 1.0.16

package/dist/esm/clickmap/clickmap-core.js

@@ -0,0 +1,1525 @@
+import { AnalyticsClickmapResponseBodySchema } from "@hexclave/shared/dist/interface/admin-metrics";
+import { CLICKMAP_OVERLAY_RESUME_STORAGE_KEY, CLICKMAP_OVERLAY_TOKEN_STORAGE_KEY, CLICKMAP_OVERLAY_TOKEN_UPDATED_EVENT } from "@hexclave/shared/dist/utils/analytics-clickmap-overlay";
+import { CLICKMAP_ROOT_ID, DEV_TOOL_ROOT_ID } from "@hexclave/shared/dist/utils/dev-tool";
+import { cssEscapeIdent } from "@hexclave/shared/dist/utils/dom";
+import { buildElementsChain, parseElementsChain } from "@hexclave/shared/dist/utils/elements-chain";
+import { runAsynchronously } from "@hexclave/shared/dist/utils/promises";
+import { stringCompare } from "@hexclave/shared/dist/utils/strings";
+import { getGlobalUiInstance, h, hasAppendChild, setGlobalUiInstance, setHtml } from "../in-page-ui/dom.js";
+import { hexclaveAppInternalsSymbol } from "../lib/hexclave-app/common.js";
+import { clickmapCSS } from "./clickmap-styles.js";
+
+//#region src/clickmap/clickmap-core.ts
+const CLICKMAP_FILTERS_STORAGE_KEY = "hexclave-clickmap-overlay-filters";
+const CLICKMAP_DEFAULT_FILTERS = {
+	range: "7d",
+	device: "all",
+	urlPattern: "",
+	elementSearch: "",
+	showDead: false
+};
+const CLICKMAP_RANGE_MS = {
+	"24h": 1440 * 60 * 1e3,
+	"7d": 10080 * 60 * 1e3,
+	"30d": 720 * 60 * 60 * 1e3
+};
+const CLICKMAP_VIEWPORT_BUCKETS = {
+	mobile: {
+		min: 0,
+		max: 767
+	},
+	tablet: {
+		min: 768,
+		max: 1023
+	},
+	laptop: {
+		min: 1024,
+		max: 1199
+	},
+	desktop: {
+		min: 1200,
+		max: 1439
+	},
+	widescreen: {
+		min: 1440,
+		max: 1919
+	},
+	tv: {
+		min: 1920,
+		max: null
+	}
+};
+function getClickmapViewportBucket(device) {
+	if (device === "all") return null;
+	return CLICKMAP_VIEWPORT_BUCKETS[device];
+}
+function isClickmapViewportWidthInBucket(width, bucket) {
+	return width >= bucket.min && (bucket.max == null || width <= bucket.max);
+}
+function getClickmapRecommendedViewportWidth(bucket) {
+	if (bucket.max == null) return bucket.min;
+	return Math.round((bucket.min + bucket.max) / 2);
+}
+function formatClickmapViewportBucket(bucket) {
+	if (bucket.max == null) return `${bucket.min}px+`;
+	return `${bucket.min}-${bucket.max}px`;
+}
+function isClickmapRangeKey(value) {
+	return value === "24h" || value === "7d" || value === "30d";
+}
+function isClickmapDeviceKey(value) {
+	return value === "all" || value === "mobile" || value === "tablet" || value === "laptop" || value === "desktop" || value === "widescreen" || value === "tv";
+}
+const CLICKMAP_DOM_INDEX_DEBOUNCE_MS = 250;
+function cssEscapeAttrValue(value) {
+	return value.replace(/\\/g, "\\\\").replace(/"/g, "\\\"");
+}
+function readChainAttr(segment, attr) {
+	if (!Object.prototype.hasOwnProperty.call(segment.attrs, attr)) return "";
+	const value = segment.attrs[attr];
+	return typeof value === "string" ? value : "";
+}
+function formatClickmapCount(value) {
+	let scaled = value;
+	let suffix = "";
+	for (const nextSuffix of [
+		"k",
+		"m",
+		"b"
+	]) {
+		if (scaled < 999.95) break;
+		scaled /= 1e3;
+		suffix = nextSuffix;
+	}
+	if (suffix === "") return String(Math.round(scaled));
+	return `${Math.round(scaled * 10) / 10}${suffix}`;
+}
+function getClickmapHue(count, maxCount) {
+	if (maxCount <= 1) return 185;
+	const intensity = Math.min(1, count / maxCount);
+	return 185 - Math.round(intensity * 155);
+}
+function getReadableElementLabel(element) {
+	const ariaLabel = element.getAttribute("aria-label");
+	if (ariaLabel != null && ariaLabel.trim() !== "") return ariaLabel.trim().slice(0, 80);
+	const title = element.getAttribute("title");
+	if (title != null && title.trim() !== "") return title.trim().slice(0, 80);
+	const text = element.textContent.trim().replace(/\s+/g, " ");
+	if (text !== "") return text.slice(0, 80);
+	return element.tagName.toLowerCase();
+}
+function isElementVisibleForClickmap(element) {
+	if (element.closest(`#${cssEscapeIdent(CLICKMAP_ROOT_ID)}, #${cssEscapeIdent(DEV_TOOL_ROOT_ID)}`) != null) return false;
+	if (element.closest("[hidden], [aria-hidden=\"true\"], [inert]") != null) return false;
+	const rect = element.getBoundingClientRect();
+	if (rect.width <= 0 || rect.height <= 0) return false;
+	const style = window.getComputedStyle(element);
+	if (style.display === "none" || style.visibility === "hidden" || style.opacity === "0") return false;
+	return true;
+}
+function getElementFromSelector(selector) {
+	try {
+		return Array.from(document.querySelectorAll(selector)).find(isElementVisibleForClickmap) ?? null;
+	} catch {
+		return null;
+	}
+}
+function getSessionStorageString(key) {
+	try {
+		const value = sessionStorage.getItem(key);
+		return value == null || value.trim() === "" ? null : value;
+	} catch {
+		return null;
+	}
+}
+function removeSessionStorageItem(key) {
+	try {
+		sessionStorage.removeItem(key);
+	} catch {}
+}
+function getJwtPayloadClaim(token, claim) {
+	const tokenParts = token.split(".");
+	if (tokenParts.length < 2 || tokenParts[1] === "") return null;
+	try {
+		const normalized = tokenParts[1].replace(/-/g, "+").replace(/_/g, "/");
+		const padded = normalized.padEnd(Math.ceil(normalized.length / 4) * 4, "=");
+		const payload = JSON.parse(atob(padded));
+		if (typeof payload !== "object" || payload === null) return null;
+		const value = Reflect.get(payload, claim);
+		return typeof value === "string" ? value : null;
+	} catch {
+		return null;
+	}
+}
+function getClickmapTokenFromStorage() {
+	return getSessionStorageString(CLICKMAP_OVERLAY_TOKEN_STORAGE_KEY);
+}
+function getClickmapOriginFromStorage() {
+	const token = getClickmapTokenFromStorage();
+	return token == null ? null : getJwtPayloadClaim(token, "origin");
+}
+function clearClickmapTokenStorage() {
+	removeSessionStorageItem(CLICKMAP_OVERLAY_TOKEN_STORAGE_KEY);
+}
+function parseServerClickmapResponse(value, path) {
+	let parsed;
+	try {
+		parsed = AnalyticsClickmapResponseBodySchema.validateSync(value);
+	} catch {
+		return {
+			path,
+			totalClicks: 0,
+			selectors: [],
+			elements: []
+		};
+	}
+	return {
+		path,
+		totalClicks: parsed.routes.reduce((sum, route) => sum + route.clicks, 0),
+		selectors: parsed.selectors.map((selector) => ({
+			selector: selector.selector,
+			clicks: selector.clicks
+		})),
+		elements: parsed.elements.map((element) => ({
+			elementsChain: element.elements_chain,
+			elementsText: element.elements_text,
+			tagName: element.tag_name,
+			href: element.href,
+			clicks: element.clicks,
+			deadClicks: element.dead_clicks
+		}))
+	};
+}
+function isDynamicPathSegment(segment) {
+	if (segment === "") return false;
+	let decoded = segment;
+	try {
+		decoded = decodeURIComponent(segment);
+	} catch {}
+	if (/^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i.test(decoded)) return true;
+	if (/^[0-9a-f]{32}$/i.test(decoded)) return true;
+	if (/^[0-9a-f]{24}$/i.test(decoded)) return true;
+	if (/^[0-9A-HJKMNP-TV-Z]{26}$/i.test(decoded)) return true;
+	if (/^\d+$/.test(decoded)) return true;
+	return false;
+}
+function wildcardizePathname(pathname) {
+	const trailingSlash = pathname.length > 1 && pathname.endsWith("/");
+	const joined = pathname.split("/").map((segment) => isDynamicPathSegment(segment) ? "*" : segment).join("/");
+	return trailingSlash ? `${joined}/` : joined;
+}
+function globToRegexSource(glob) {
+	return glob.split("*").map((part) => part.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")).join(".*");
+}
+function patternMatchesPath(pattern, path) {
+	if (pattern === "") return true;
+	try {
+		return new RegExp(`^${globToRegexSource(pattern)}$`).test(path);
+	} catch {
+		return false;
+	}
+}
+function createClickmapPanel(app, onClose) {
+	const container = h("div", { className: "sdt-hm" });
+	const overlayHighlight = h("div", { className: "sdt-hm-highlight" });
+	const overlayRoot = h("div", {
+		className: "sdt-hm-overlay-root",
+		"aria-hidden": "true"
+	}, overlayHighlight);
+	const statsCount = h("div", { className: "sdt-hm-stat-value" }, "0");
+	const selectorCount = h("div", { className: "sdt-hm-stat-value" }, "0");
+	const viewportValue = h("div", { className: "sdt-hm-stat-value" }, `${window.innerWidth}x${window.innerHeight}`);
+	const list = h("div", { className: "sdt-hm-list" });
+	const empty = h("div", { className: "sdt-hm-empty" }, "Paste a clickmap token from the dashboard to load aggregated element clicks for this page.");
+	const status = h("div", { className: "sdt-hm-token-status" });
+	const viewportWarningTitle = h("div", { className: "sdt-hm-viewport-warning-title" });
+	const viewportWarningBody = h("div", { className: "sdt-hm-viewport-warning-body" });
+	const viewportWarningWidthValue = h("code", { className: "sdt-hm-viewport-warning-code" });
+	const viewportWarningHeightValue = h("code", { className: "sdt-hm-viewport-warning-code" });
+	const viewportWarningWidthCopy = h("button", {
+		className: "sdt-hm-copy-btn",
+		type: "button"
+	});
+	const viewportWarningHeightCopy = h("button", {
+		className: "sdt-hm-copy-btn",
+		type: "button"
+	});
+	const viewportWarning = h("div", {
+		className: "sdt-hm-viewport-warning",
+		role: "status"
+	}, viewportWarningTitle, viewportWarningBody, h("div", { className: "sdt-hm-viewport-warning-actions" }, h("span", { className: "sdt-hm-viewport-warning-action" }, h("span", { className: "sdt-hm-viewport-warning-label" }, "Width"), viewportWarningWidthValue, viewportWarningWidthCopy), h("span", { className: "sdt-hm-viewport-warning-action" }, h("span", { className: "sdt-hm-viewport-warning-label" }, "Height"), viewportWarningHeightValue, viewportWarningHeightCopy)));
+	const overlayToggle = h("button", { className: "sdt-hm-btn sdt-hm-btn-primary" }, "Hide");
+	const expandButton = h("button", {
+		className: "sdt-hm-icon-btn",
+		"aria-label": "Expand clickmap options",
+		"data-sdt-tip": "Expand clickmap options"
+	});
+	const closeButton = h("button", {
+		className: "sdt-hm-icon-btn",
+		"aria-label": "Close clickmap",
+		"data-sdt-tip": "Close clickmap"
+	});
+	const miniClicks = h("span", { className: "sdt-hm-toolbar-metric-value" }, "0");
+	const miniElements = h("span", { className: "sdt-hm-toolbar-metric-value" }, "0");
+	function readStoredFilters() {
+		try {
+			const raw = sessionStorage.getItem(CLICKMAP_FILTERS_STORAGE_KEY);
+			if (raw == null) return { ...CLICKMAP_DEFAULT_FILTERS };
+			const parsed = JSON.parse(raw);
+			if (parsed == null || typeof parsed !== "object") return { ...CLICKMAP_DEFAULT_FILTERS };
+			const obj = parsed;
+			return {
+				range: isClickmapRangeKey(obj.range) ? obj.range : CLICKMAP_DEFAULT_FILTERS.range,
+				device: isClickmapDeviceKey(obj.device) ? obj.device : CLICKMAP_DEFAULT_FILTERS.device,
+				urlPattern: typeof obj.urlPattern === "string" ? obj.urlPattern : CLICKMAP_DEFAULT_FILTERS.urlPattern,
+				elementSearch: typeof obj.elementSearch === "string" ? obj.elementSearch : CLICKMAP_DEFAULT_FILTERS.elementSearch,
+				showDead: typeof obj.showDead === "boolean" ? obj.showDead : CLICKMAP_DEFAULT_FILTERS.showDead
+			};
+		} catch {
+			return { ...CLICKMAP_DEFAULT_FILTERS };
+		}
+	}
+	function persistFilters(next) {
+		try {
+			sessionStorage.setItem(CLICKMAP_FILTERS_STORAGE_KEY, JSON.stringify(next));
+		} catch {}
+	}
+	let currentPath = window.location.pathname;
+	let serverClickmap = {
+		path: currentPath,
+		totalClicks: 0,
+		selectors: [],
+		elements: []
+	};
+	let loadingServerClickmap = false;
+	let serverClickmapError = null;
+	let serverClickmapRequestId = 0;
+	let overlayVisible = true;
+	let expanded = false;
+	let renderFrame = 0;
+	let overlayMode = "hidden";
+	let highlightedGroupSelector = null;
+	let highlightRenderedSelector = null;
+	let highlightSettleTimer = null;
+	let hoveredGroupSelector = null;
+	const mutedGroupSelectors = /* @__PURE__ */ new Set();
+	const selectedGroupSelectors = /* @__PURE__ */ new Set();
+	let selectionAnchorSelector = null;
+	let latestGroups = [];
+	const groupOverlayElements = /* @__PURE__ */ new Map();
+	const listRowElements = /* @__PURE__ */ new Map();
+	function resetCopyButton(button, label) {
+		button.textContent = label;
+	}
+	function copyClickmapViewportValue(button, value, label) {
+		runAsynchronously(async () => {
+			try {
+				await navigator.clipboard.writeText(value);
+				button.textContent = "Copied";
+				window.setTimeout(() => resetCopyButton(button, label), 1200);
+			} catch {
+				button.textContent = "Copy failed";
+				window.setTimeout(() => resetCopyButton(button, label), 1600);
+			}
+		});
+	}
+	const domIndex = /* @__PURE__ */ new Map();
+	let domIndexDirty = true;
+	let domIndexDebounce = 0;
+	function rebuildDomIndex() {
+		domIndex.clear();
+		trimTargetCache = /* @__PURE__ */ new WeakMap();
+		const all = document.querySelectorAll("*");
+		for (const el of all) {
+			if (!isElementVisibleForClickmap(el)) continue;
+			const tag = el.tagName.toLowerCase();
+			const bucket = domIndex.get(tag) ?? [];
+			bucket.push(el);
+			domIndex.set(tag, bucket);
+		}
+		domIndexDirty = false;
+	}
+	const CLICKMAP_TRIM_TARGET_SELECTOR = "a[href], button, input, select, textarea, summary, label, [role=\"button\"], [role=\"link\"], [role=\"menuitem\"], [role=\"menuitemcheckbox\"], [role=\"menuitemradio\"], [role=\"tab\"], [role=\"checkbox\"], [role=\"radio\"], [role=\"switch\"], [role=\"option\"], [contenteditable=\"true\"]";
+	const CLICKMAP_TRIM_MAX_HOPS = 10;
+	let trimTargetCache = /* @__PURE__ */ new WeakMap();
+	function resolveClickTarget(start) {
+		const cached = trimTargetCache.get(start);
+		if (cached != null) return cached;
+		let target = start;
+		let current = start;
+		for (let hops = 0; current != null && current !== document.body && current !== document.documentElement && hops < CLICKMAP_TRIM_MAX_HOPS; hops++) {
+			if (current.matches(CLICKMAP_TRIM_TARGET_SELECTOR)) {
+				target = current;
+				break;
+			}
+			const parent = current.parentElement;
+			if (window.getComputedStyle(current).cursor === "pointer" && (parent == null || window.getComputedStyle(parent).cursor !== "pointer")) {
+				target = current;
+				break;
+			}
+			current = parent;
+		}
+		const resolved = {
+			target,
+			key: buildElementsChain(target)
+		};
+		trimTargetCache.set(start, resolved);
+		return resolved;
+	}
+	function ensureDomIndex() {
+		if (domIndexDirty) rebuildDomIndex();
+	}
+	function invalidateDomIndex() {
+		domIndexDirty = true;
+	}
+	function scheduleDomIndexInvalidation() {
+		if (domIndexDebounce !== 0) window.clearTimeout(domIndexDebounce);
+		domIndexDebounce = window.setTimeout(() => {
+			domIndexDebounce = 0;
+			invalidateDomIndex();
+			scheduleRender();
+		}, CLICKMAP_DOM_INDEX_DEBOUNCE_MS);
+	}
+	function isElementChainCandidateUnique(matches) {
+		const visible = matches.filter(isElementVisibleForClickmap);
+		return visible.length === 1 ? visible[0] : null;
+	}
+	function queryUniqueBySelector(selector) {
+		try {
+			return isElementChainCandidateUnique(Array.from(document.querySelectorAll(selector)));
+		} catch {
+			return null;
+		}
+	}
+	function elementMatchesSegment(element, segment, useClasses) {
+		if (element.tagName.toLowerCase() !== segment.tag) return false;
+		if (useClasses) {
+			for (const cls of segment.classes) if (!element.classList.contains(cls)) return false;
+		}
+		return true;
+	}
+	function ancestorMatchesChain(leaf, chain, useClasses, useNthOfType, useNthChild) {
+		let cursor = leaf;
+		for (let i = 0; i < chain.length; i++) {
+			if (cursor == null) return false;
+			const segment = chain[i];
+			if (!elementMatchesSegment(cursor, segment, useClasses)) return false;
+			if (useNthOfType && segment.nthOfType != null) {
+				if (computeNthOfType(cursor) !== segment.nthOfType) return false;
+			}
+			if (useNthChild && segment.nthChild != null) {
+				if (computeNthChild(cursor) !== segment.nthChild) return false;
+			}
+			cursor = cursor.parentElement;
+		}
+		return true;
+	}
+	function computeNthOfType(el) {
+		let n = 1;
+		let sib = el.previousElementSibling;
+		const tag = el.tagName;
+		while (sib != null) {
+			if (sib.tagName === tag) n += 1;
+			sib = sib.previousElementSibling;
+		}
+		return n;
+	}
+	function computeNthChild(el) {
+		let n = 1;
+		let sib = el.previousElementSibling;
+		while (sib != null) {
+			n += 1;
+			sib = sib.previousElementSibling;
+		}
+		return n;
+	}
+	function inferElementFromChain(chain) {
+		if (chain.length === 0) return null;
+		const leaf = chain[0];
+		for (const { attr } of [
+			{ attr: "data-hexclave-id" },
+			{ attr: "data-testid" },
+			{ attr: "data-test-id" },
+			{ attr: "name" }
+		]) {
+			const value = readChainAttr(leaf, attr);
+			if (value === "") continue;
+			const match = queryUniqueBySelector(`[${attr}="${cssEscapeAttrValue(value)}"]`);
+			if (match) return match;
+		}
+		const id = readChainAttr(leaf, "id");
+		if (id !== "") {
+			const match = queryUniqueBySelector(`#${cssEscapeIdent(id)}`);
+			if (match) return match;
+		}
+		if (leaf.href != null && leaf.href !== "" && leaf.tag === "a") {
+			const match = queryUniqueBySelector(`a[href="${cssEscapeAttrValue(leaf.href)}"]`);
+			if (match) return match;
+		}
+		for (const attr of [
+			"aria-label",
+			"role",
+			"placeholder",
+			"title",
+			"type"
+		]) {
+			const value = readChainAttr(leaf, attr);
+			if (value === "") continue;
+			const match = queryUniqueBySelector(`${leaf.tag}[${attr}="${cssEscapeAttrValue(value)}"]`);
+			if (match) return match;
+		}
+		ensureDomIndex();
+		const candidates = domIndex.get(leaf.tag) ?? [];
+		if (candidates.length === 0) return null;
+		const v3 = [];
+		for (const candidate of candidates) if (ancestorMatchesChain(candidate, chain, true, false, false)) v3.push(candidate);
+		const u3 = isElementChainCandidateUnique(v3);
+		if (u3 != null) return u3;
+		const v4 = [];
+		for (const candidate of candidates) if (ancestorMatchesChain(candidate, chain, true, true, false)) v4.push(candidate);
+		const u4 = isElementChainCandidateUnique(v4);
+		if (u4 != null) return u4;
+		const v5 = [];
+		for (const candidate of candidates) if (ancestorMatchesChain(candidate, chain, true, true, true)) v5.push(candidate);
+		const u5 = isElementChainCandidateUnique(v5);
+		if (u5 != null) return u5;
+		return null;
+	}
+	setHtml(closeButton, "<svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M18 6 6 18\"/><path d=\"m6 6 12 12\"/></svg>");
+	const chevronUpSvg = "<svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m18 15-6-6-6 6\"/></svg>";
+	const chevronDownSvg = "<svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m6 9 6 6 6-6\"/></svg>";
+	const clicksIconSvg = "<svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M14 4.1 12 6\"/><path d=\"m5.1 8-2.9-.8\"/><path d=\"m6 12-1.9 2\"/><path d=\"M7.2 2.2 8 5.1\"/><path d=\"M9.037 9.69a.498.498 0 0 1 .653-.653l11 4.5a.5.5 0 0 1-.074.949l-4.349 1.041a1 1 0 0 0-.74.739l-1.04 4.35a.5.5 0 0 1-.95.074z\"/></svg>";
+	const elementsIconSvg = "<svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect width=\"18\" height=\"18\" x=\"3\" y=\"3\" rx=\"2\"/><path d=\"M3 9h18\"/><path d=\"M9 21V9\"/></svg>";
+	const eyeIconSvg = "<svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0\"/><circle cx=\"12\" cy=\"12\" r=\"3\"/></svg>";
+	const eyeOffIconSvg = "<svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M10.733 5.076a10.744 10.744 0 0 1 11.205 6.575 1 1 0 0 1 0 .696 10.747 10.747 0 0 1-1.444 2.49\"/><path d=\"M14.084 14.158a3 3 0 0 1-4.242-4.242\"/><path d=\"M17.479 17.499a10.75 10.75 0 0 1-15.417-5.151 1 1 0 0 1 0-.696 10.75 10.75 0 0 1 4.446-5.143\"/><path d=\"m2 2 20 20\"/></svg>";
+	let renderedExpandIcon = "";
+	function syncExpandIcon() {
+		const icon = expanded ? chevronDownSvg : chevronUpSvg;
+		if (renderedExpandIcon === icon) return;
+		renderedExpandIcon = icon;
+		setHtml(expandButton, icon);
+	}
+	syncExpandIcon();
+	resetCopyButton(viewportWarningWidthCopy, "Copy width");
+	resetCopyButton(viewportWarningHeightCopy, "Copy height");
+	viewportWarningWidthCopy.addEventListener("click", () => {
+		copyClickmapViewportValue(viewportWarningWidthCopy, viewportWarningWidthValue.textContent, "Copy width");
+	});
+	viewportWarningHeightCopy.addEventListener("click", () => {
+		copyClickmapViewportValue(viewportWarningHeightCopy, viewportWarningHeightValue.textContent, "Copy height");
+	});
+	const stats = h("div", { className: "sdt-hm-stats" }, h("div", { className: "sdt-hm-stat" }, h("div", { className: "sdt-hm-stat-label" }, "Clicks"), statsCount), h("div", { className: "sdt-hm-stat" }, h("div", { className: "sdt-hm-stat-label" }, "Elements"), selectorCount), h("div", { className: "sdt-hm-stat" }, h("div", { className: "sdt-hm-stat-label" }, "Viewport"), viewportValue));
+	let filters = readStoredFilters();
+	let filterReloadDebounce = 0;
+	let urlPatternUserEdited = filters.urlPattern.trim() !== "";
+	function getEffectiveUrlPattern() {
+		if (urlPatternUserEdited) return filters.urlPattern.trim();
+		return wildcardizePathname(window.location.pathname);
+	}
+	function syncAutoUrlPattern() {
+		if (urlPatternUserEdited) return;
+		const auto = wildcardizePathname(window.location.pathname);
+		if (urlPatternInput.value !== auto) urlPatternInput.value = auto;
+	}
+	function makeFilterSelect(options, value) {
+		const el = h("select", { className: "sdt-hm-filter-input" });
+		for (const [optValue, label] of options) {
+			const opt = h("option", { value: optValue }, label);
+			el.appendChild(opt);
+		}
+		el.value = value;
+		return el;
+	}
+	const rangeSelect = makeFilterSelect([
+		["24h", "Last 24h"],
+		["7d", "Last 7 days"],
+		["30d", "Last 30 days"]
+	], filters.range);
+	const deviceOptions = [
+		["all", "All"],
+		["mobile", "Mobile"],
+		["tablet", "Tablet"],
+		["laptop", "Laptop"],
+		["desktop", "Desktop"],
+		["widescreen", "Wide"],
+		["tv", "TV"]
+	];
+	const deviceThumb = h("span", {
+		className: "sdt-hm-seg-thumb",
+		"aria-hidden": "true"
+	});
+	const deviceSwitcher = h("div", {
+		className: "sdt-hm-seg",
+		role: "radiogroup",
+		"aria-label": "Viewport"
+	}, deviceThumb);
+	const deviceButtons = /* @__PURE__ */ new Map();
+	let deviceThumbPlaced = false;
+	function positionDeviceThumb() {
+		const active = deviceButtons.get(filters.device);
+		if (active == null || active.offsetWidth === 0) return;
+		if (!deviceThumbPlaced) deviceThumb.style.transition = "none";
+		deviceThumb.style.transform = `translateX(${active.offsetLeft}px)`;
+		deviceThumb.style.width = `${active.offsetWidth}px`;
+		if (!deviceThumbPlaced) {
+			deviceThumb.offsetWidth;
+			deviceThumb.style.transition = "";
+			deviceThumbPlaced = true;
+		}
+	}
+	for (const [key, label] of deviceOptions) {
+		const btn = h("button", {
+			className: "sdt-hm-seg-btn",
+			type: "button",
+			role: "radio"
+		}, label);
+		btn.setAttribute("aria-checked", String(key === filters.device));
+		btn.addEventListener("click", () => {
+			if (filters.device === key) return;
+			updateFilters({ device: key });
+			for (const [k, b] of deviceButtons) b.setAttribute("aria-checked", String(k === key));
+			positionDeviceThumb();
+		});
+		deviceButtons.set(key, btn);
+		deviceSwitcher.appendChild(btn);
+	}
+	const urlPatternInput = h("input", {
+		className: "sdt-hm-filter-input",
+		type: "text",
+		placeholder: "/products/*",
+		spellcheck: "false",
+		autocomplete: "off",
+		autocapitalize: "off"
+	});
+	urlPatternInput.value = getEffectiveUrlPattern();
+	const urlPatternReset = h("button", {
+		className: "sdt-hm-filter-reset",
+		type: "button",
+		"aria-label": "Revert the URL pattern to the current page",
+		"data-sdt-tip": "Revert to the current page"
+	});
+	setHtml(urlPatternReset, "<svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M9 14 4 9l5-5\"/><path d=\"M4 9h10.5a5.5 5.5 0 0 1 5.5 5.5v0a5.5 5.5 0 0 1-5.5 5.5H11\"/></svg>");
+	function syncUrlPatternResetVisibility() {
+		const auto = wildcardizePathname(window.location.pathname);
+		const showReset = urlPatternUserEdited && filters.urlPattern.trim() !== auto;
+		urlPatternReset.classList.toggle("sdt-hm-filter-reset-visible", showReset);
+	}
+	const urlPatternInfo = h("button", {
+		className: "sdt-hm-filter-info",
+		type: "button",
+		"aria-label": "URL pattern help",
+		"aria-expanded": "false",
+		"data-sdt-tip": "How URL patterns work"
+	});
+	setHtml(urlPatternInfo, "<svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"10\"/><path d=\"M12 16v-4\"/><path d=\"M12 8h.01\"/></svg>");
+	function makeUrlHelpRow(pattern, description) {
+		return h("div", { className: "sdt-hm-url-help-row" }, h("code", { className: "sdt-hm-url-help-code" }, pattern), h("span", { className: "sdt-hm-url-help-desc" }, description));
+	}
+	function makeCode(text) {
+		return h("code", { className: "sdt-hm-url-help-code" }, text);
+	}
+	const urlHelpTitle = h("div", { className: "sdt-hm-url-help-title" });
+	const urlHelpBody = h("div", { className: "sdt-hm-url-help-body" });
+	const urlHelpRows = h("div", { className: "sdt-hm-url-help-rows" });
+	function renderUrlHelp() {
+		urlHelpTitle.textContent = "URL pattern · glob";
+		urlHelpBody.replaceChildren("Limits the clickmap to pages whose path matches. Matched against the pathname only — no domain, hash, or query string. ", makeCode("*"), " is the only wildcard and stands in for any characters (including ", makeCode("/"), "). Everything else is matched literally.");
+		urlHelpRows.replaceChildren(makeUrlHelpRow("/pricing", "That exact page"), makeUrlHelpRow("/products/*", "Any path under /products/"), makeUrlHelpRow("/teams/*/members", "A wildcard segment in the middle"), makeUrlHelpRow("*/settings", "Any path ending in /settings"), makeUrlHelpRow("*", "Every page"), makeUrlHelpRow("(empty)", "Auto-tracks the page you are viewing"));
+	}
+	const urlPatternHelp = h("div", {
+		className: "sdt-hm-url-help",
+		role: "dialog",
+		"aria-label": "URL pattern help"
+	}, urlHelpTitle, urlHelpBody, urlHelpRows);
+	let urlHelpOpen = false;
+	function setUrlHelpOpen(open) {
+		urlHelpOpen = open;
+		urlPatternHelp.classList.toggle("sdt-hm-url-help-open", open);
+		urlPatternInfo.setAttribute("aria-expanded", String(open));
+	}
+	urlPatternInfo.addEventListener("click", (event) => {
+		event.stopPropagation();
+		setUrlHelpOpen(!urlHelpOpen);
+	});
+	urlPatternHelp.addEventListener("click", (event) => {
+		event.stopPropagation();
+	});
+	renderUrlHelp();
+	const elementSearchInput = h("input", {
+		className: "sdt-hm-filter-input",
+		type: "text",
+		placeholder: "Search element text or tag",
+		"aria-label": "Search element text or tag",
+		spellcheck: "false",
+		autocomplete: "off",
+		autocapitalize: "off"
+	});
+	elementSearchInput.value = filters.elementSearch;
+	function wrapFilterField(label, input, action) {
+		const labelRow = h("span", { className: "sdt-hm-filter-label-row" }, h("span", { className: "sdt-hm-filter-label" }, label));
+		if (action != null) labelRow.appendChild(action);
+		return h("label", { className: "sdt-hm-filter-field" }, labelRow, input);
+	}
+	const clicksIcon = h("span", { className: "sdt-hm-toolbar-metric-icon" });
+	const elementsIcon = h("span", { className: "sdt-hm-toolbar-metric-icon" });
+	setHtml(clicksIcon, clicksIconSvg);
+	setHtml(elementsIcon, elementsIconSvg);
+	const showDeadIconSvg = "<svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M9 10h.01\"/><path d=\"M15 10h.01\"/><path d=\"M12 2a8 8 0 0 0-8 8v12l3-3 2.5 2.5L12 19l2.5 2.5L17 19l3 3V10a8 8 0 0 0-8-8z\"/></svg>";
+	const showDeadMiniToggle = h("button", {
+		className: "sdt-hm-icon-btn sdt-hm-dead-toggle",
+		type: "button",
+		"aria-pressed": "false",
+		"aria-label": "Show dead clicks",
+		"data-sdt-tip": "Show dead clicks"
+	});
+	setHtml(showDeadMiniToggle, showDeadIconSvg);
+	const showDeadToggleIcon = h("span", { className: "sdt-hm-dead-toggle-icon" });
+	setHtml(showDeadToggleIcon, showDeadIconSvg);
+	const showDeadToggle = h("button", {
+		className: "sdt-hm-btn sdt-hm-dead-toggle",
+		type: "button",
+		"aria-pressed": "false",
+		"data-sdt-tip": "Include clicks that had no effect"
+	}, showDeadToggleIcon, "Dead clicks");
+	function syncShowDeadToggles() {
+		for (const button of [showDeadMiniToggle, showDeadToggle]) {
+			button.setAttribute("aria-pressed", String(filters.showDead));
+			button.classList.toggle("sdt-hm-dead-toggle-active", filters.showDead);
+		}
+	}
+	function setShowDead(next) {
+		if (filters.showDead === next) return;
+		filters = {
+			...filters,
+			showDead: next
+		};
+		persistFilters(filters);
+		syncShowDeadToggles();
+		scheduleRender();
+	}
+	showDeadMiniToggle.addEventListener("click", () => setShowDead(!filters.showDead));
+	showDeadToggle.addEventListener("click", () => setShowDead(!filters.showDead));
+	syncShowDeadToggles();
+	const overlayMiniToggle = h("button", {
+		className: "sdt-hm-icon-btn",
+		type: "button",
+		"aria-pressed": "false",
+		"aria-label": "Hide overlay",
+		"data-sdt-tip": "Hide overlay"
+	});
+	let renderedOverlayMiniIcon = "";
+	function syncOverlayMiniToggle() {
+		overlayMiniToggle.setAttribute("aria-pressed", String(!overlayVisible));
+		const label = overlayVisible ? "Hide overlay" : "Show overlay";
+		overlayMiniToggle.setAttribute("aria-label", label);
+		overlayMiniToggle.setAttribute("data-sdt-tip", label);
+		overlayMiniToggle.classList.toggle("sdt-hm-overlay-mini-off", !overlayVisible);
+		const icon = overlayVisible ? eyeIconSvg : eyeOffIconSvg;
+		if (renderedOverlayMiniIcon !== icon) {
+			renderedOverlayMiniIcon = icon;
+			setHtml(overlayMiniToggle, icon);
+		}
+	}
+	overlayMiniToggle.addEventListener("click", () => {
+		overlayVisible = !overlayVisible;
+		render();
+	});
+	syncOverlayMiniToggle();
+	const toolbar = h("div", { className: "sdt-hm-toolbar" }, closeButton, h("div", { className: "sdt-hm-toolbar-title" }, "Clickmap"), h("div", { className: "sdt-hm-toolbar-filters" }, rangeSelect, h("div", { className: "sdt-hm-toolbar-url" }, urlPatternInput, urlPatternReset, urlPatternInfo, urlPatternHelp)), h("div", { className: "sdt-hm-toolbar-metrics" }, h("span", {
+		className: "sdt-hm-toolbar-metric",
+		"data-sdt-tip": "Aggregate clicks"
+	}, miniClicks, clicksIcon), h("span", {
+		className: "sdt-hm-toolbar-metric",
+		"data-sdt-tip": "Mapped elements"
+	}, miniElements, elementsIcon)), showDeadMiniToggle, overlayMiniToggle, expandButton);
+	const filterRow = h("div", { className: "sdt-hm-filters" }, wrapFilterField("Viewport", deviceSwitcher), viewportWarning);
+	function scheduleFilterReload() {
+		if (filterReloadDebounce !== 0) window.clearTimeout(filterReloadDebounce);
+		filterReloadDebounce = window.setTimeout(() => {
+			filterReloadDebounce = 0;
+			runAsynchronously(loadServerClickmap());
+		}, 250);
+	}
+	function updateFilters(next) {
+		filters = {
+			...filters,
+			...next
+		};
+		persistFilters(filters);
+		scheduleFilterReload();
+	}
+	let elementSearchDebounce = 0;
+	function updateElementSearch(value) {
+		filters = {
+			...filters,
+			elementSearch: value
+		};
+		persistFilters(filters);
+		if (elementSearchDebounce !== 0) window.clearTimeout(elementSearchDebounce);
+		elementSearchDebounce = window.setTimeout(() => {
+			elementSearchDebounce = 0;
+			scheduleRender();
+		}, 120);
+	}
+	rangeSelect.addEventListener("change", () => {
+		if (isClickmapRangeKey(rangeSelect.value)) updateFilters({ range: rangeSelect.value });
+	});
+	urlPatternInput.addEventListener("input", () => {
+		const value = urlPatternInput.value;
+		urlPatternUserEdited = value.trim() !== "";
+		updateFilters({ urlPattern: value });
+		syncUrlPatternResetVisibility();
+	});
+	urlPatternReset.addEventListener("click", () => {
+		urlPatternUserEdited = false;
+		urlPatternInput.value = wildcardizePathname(window.location.pathname);
+		updateFilters({ urlPattern: "" });
+		syncUrlPatternResetVisibility();
+	});
+	elementSearchInput.addEventListener("input", () => {
+		updateElementSearch(elementSearchInput.value);
+	});
+	const head = h("div", { className: "sdt-hm-head" }, filterRow, h("div", { className: "sdt-hm-actions" }, stats, showDeadToggle, overlayToggle));
+	const listHeaderCheck = h("button", {
+		className: "sdt-hm-row-check",
+		type: "button",
+		role: "checkbox",
+		"aria-checked": "false",
+		"aria-label": "Select all elements"
+	});
+	const listHeaderSummary = h("span", { className: "sdt-hm-list-header-summary" });
+	const listShowButton = h("button", {
+		className: "sdt-hm-btn sdt-hm-btn-sm",
+		type: "button"
+	}, "Show all");
+	const listHideButton = h("button", {
+		className: "sdt-hm-btn sdt-hm-btn-sm",
+		type: "button"
+	}, "Hide all");
+	const listHeader = h("div", { className: "sdt-hm-list-header" }, listHeaderCheck, listHeaderSummary, elementSearchInput, listShowButton, listHideButton);
+	listHeaderCheck.addEventListener("click", () => {
+		if (latestGroups.length > 0 && latestGroups.every((group) => selectedGroupSelectors.has(group.selector))) {
+			clearSelection();
+			return;
+		}
+		selectedGroupSelectors.clear();
+		for (const group of latestGroups) selectedGroupSelectors.add(group.selector);
+		selectionAnchorSelector = null;
+		scheduleRender();
+	});
+	listShowButton.addEventListener("click", () => {
+		for (const group of getBulkActionGroups()) mutedGroupSelectors.delete(group.selector);
+		scheduleRender();
+	});
+	listHideButton.addEventListener("click", () => {
+		for (const group of getBulkActionGroups()) mutedGroupSelectors.add(group.selector);
+		scheduleRender();
+	});
+	const body = h("div", { className: "sdt-hm-body" }, status, listHeader, list);
+	const details = h("div", { className: "sdt-hm-details" }, head, body);
+	function getGroups() {
+		const byKey = /* @__PURE__ */ new Map();
+		if (serverClickmap.path !== currentPath) return [];
+		const searchQuery = filters.elementSearch.trim().toLowerCase();
+		const matchesSearch = (entry) => {
+			if (searchQuery === "") return true;
+			return [
+				entry.elementsText,
+				entry.tagName,
+				entry.href ?? "",
+				entry.elementsChain
+			].some((value) => value.toLowerCase().includes(searchQuery));
+		};
+		if (serverClickmap.elements.length > 0) {
+			ensureDomIndex();
+			for (const elementEntry of serverClickmap.elements) {
+				if (!matchesSearch(elementEntry)) continue;
+				const chain = parseElementsChain(elementEntry.elementsChain);
+				let element = chain.length > 0 ? inferElementFromChain(chain) : null;
+				if (element == null && elementEntry.href != null && elementEntry.href !== "" && elementEntry.tagName.toLowerCase() === "a") element = queryUniqueBySelector(`a[href="${cssEscapeAttrValue(elementEntry.href)}"]`);
+				if (element == null) continue;
+				const { target, key } = resolveClickTarget(element);
+				const existing = byKey.get(key);
+				if (existing != null) {
+					existing.count += elementEntry.clicks;
+					existing.deadCount += elementEntry.deadClicks;
+					continue;
+				}
+				byKey.set(key, {
+					selector: key,
+					label: getReadableElementLabel(target),
+					count: elementEntry.clicks,
+					deadCount: elementEntry.deadClicks,
+					element: target,
+					rect: target.getBoundingClientRect()
+				});
+			}
+		}
+		if (byKey.size === 0) for (const selectorClickmap of serverClickmap.selectors) {
+			if (searchQuery !== "" && !selectorClickmap.selector.toLowerCase().includes(searchQuery)) continue;
+			const element = getElementFromSelector(selectorClickmap.selector);
+			if (element == null) continue;
+			const { target, key } = resolveClickTarget(element);
+			const existing = byKey.get(key);
+			if (existing != null) {
+				existing.count += selectorClickmap.clicks;
+				continue;
+			}
+			byKey.set(key, {
+				selector: key,
+				label: getReadableElementLabel(target),
+				count: selectorClickmap.clicks,
+				deadCount: 0,
+				element: target,
+				rect: target.getBoundingClientRect()
+			});
+		}
+		let groups = Array.from(byKey.values());
+		if (!filters.showDead) groups = groups.filter((group) => getGroupDisplayCount(group) > 0);
+		return groups.sort((a, b) => getGroupDisplayCount(b) - getGroupDisplayCount(a) || stringCompare(a.selector, b.selector));
+	}
+	function getGroupDisplayCount(group) {
+		return filters.showDead ? group.count : Math.max(0, group.count - group.deadCount);
+	}
+	function getDeadClickPercentage(group) {
+		if (group.count <= 0) return 100;
+		return Math.min(100, Math.round(group.deadCount / group.count * 100));
+	}
+	function scheduleRender() {
+		cancelAnimationFrame(renderFrame);
+		renderFrame = requestAnimationFrame(render);
+	}
+	function clearClickmapOverlayElements() {
+		groupOverlayElements.clear();
+		overlayRoot.replaceChildren(overlayHighlight);
+		overlayHighlight.classList.remove("sdt-hm-highlight-visible", "sdt-hm-highlight-animating");
+		highlightRenderedSelector = null;
+	}
+	function clearClickmapListElements() {
+		listRowElements.clear();
+		list.replaceChildren();
+	}
+	function getClickmapViewportSize() {
+		const visualViewport = window.visualViewport;
+		if (visualViewport != null) return {
+			width: visualViewport.width,
+			height: visualViewport.height
+		};
+		return {
+			width: window.innerWidth,
+			height: window.innerHeight
+		};
+	}
+	function shouldShowElements() {
+		return overlayVisible;
+	}
+	function toggleMutedGroup(selector) {
+		if (mutedGroupSelectors.has(selector)) mutedGroupSelectors.delete(selector);
+		else mutedGroupSelectors.add(selector);
+		scheduleRender();
+	}
+	function clearSelection() {
+		if (selectedGroupSelectors.size === 0 && highlightedGroupSelector == null) return;
+		selectedGroupSelectors.clear();
+		selectionAnchorSelector = null;
+		highlightedGroupSelector = null;
+		scheduleRender();
+	}
+	function toggleSelectedGroup(selector) {
+		if (selectedGroupSelectors.has(selector)) {
+			selectedGroupSelectors.delete(selector);
+			if (highlightedGroupSelector === selector) highlightedGroupSelector = null;
+		} else {
+			selectedGroupSelectors.add(selector);
+			highlightedGroupSelector = selector;
+		}
+		selectionAnchorSelector = selector;
+		scheduleRender();
+	}
+	function selectGroupFromEvent(group, event) {
+		const toggle = event.ctrlKey || event.metaKey;
+		if (event.shiftKey && selectionAnchorSelector != null) {
+			const order = latestGroups.map((candidate) => candidate.selector);
+			const anchorIndex = order.indexOf(selectionAnchorSelector);
+			const targetIndex = order.indexOf(group.selector);
+			if (anchorIndex !== -1 && targetIndex !== -1) {
+				if (!toggle) selectedGroupSelectors.clear();
+				const [start, end] = anchorIndex <= targetIndex ? [anchorIndex, targetIndex] : [targetIndex, anchorIndex];
+				for (const selector of order.slice(start, end + 1)) selectedGroupSelectors.add(selector);
+				highlightedGroupSelector = group.selector;
+				scheduleRender();
+				return;
+			}
+		}
+		if (toggle) {
+			toggleSelectedGroup(group.selector);
+			return;
+		}
+		selectionAnchorSelector = group.selector;
+		if (selectedGroupSelectors.size === 1 && selectedGroupSelectors.has(group.selector)) {
+			selectedGroupSelectors.delete(group.selector);
+			highlightedGroupSelector = null;
+		} else {
+			selectedGroupSelectors.clear();
+			selectedGroupSelectors.add(group.selector);
+			highlightedGroupSelector = group.selector;
+		}
+		scheduleRender();
+	}
+	function getBulkActionGroups() {
+		if (selectedGroupSelectors.size > 0) return latestGroups.filter((group) => selectedGroupSelectors.has(group.selector));
+		return latestGroups;
+	}
+	function setHoveredGroup(selector) {
+		if (hoveredGroupSelector === selector) return;
+		hoveredGroupSelector = selector;
+		scheduleRender();
+	}
+	const checkIconSvg = "<svg width=\"11\" height=\"11\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M20 6 9 17l-5-5\"/></svg>";
+	const dashIconSvg = "<svg width=\"11\" height=\"11\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M5 12h14\"/></svg>";
+	function createListRowElement(selector) {
+		const count = h("span", { className: "sdt-hm-row-count" });
+		const label = h("span", { className: "sdt-hm-row-label" });
+		const dead = h("span", { className: "sdt-hm-row-dead" });
+		const selectorText = h("span", { className: "sdt-hm-row-selector" });
+		const check = h("button", {
+			className: "sdt-hm-row-check",
+			type: "button",
+			role: "checkbox",
+			"aria-checked": "false"
+		});
+		const eye = h("button", {
+			className: "sdt-hm-row-eye",
+			type: "button"
+		});
+		const row = h("div", {
+			className: "sdt-hm-row",
+			role: "button",
+			tabindex: "0"
+		}, check, count, h("span", { className: "sdt-hm-row-meta" }, h("span", { className: "sdt-hm-row-label-row" }, label, dead), selectorText), eye);
+		const rowElement = {
+			row,
+			count,
+			check,
+			eye,
+			label,
+			dead,
+			selector: selectorText,
+			group: null,
+			renderedEyeIcon: "",
+			renderedCheckIcon: ""
+		};
+		check.addEventListener("click", (event) => {
+			event.preventDefault();
+			event.stopPropagation();
+			if (rowElement.group == null) return;
+			if (event.shiftKey && selectionAnchorSelector != null) {
+				selectGroupFromEvent(rowElement.group, {
+					shiftKey: true,
+					ctrlKey: true,
+					metaKey: false
+				});
+				return;
+			}
+			toggleSelectedGroup(rowElement.group.selector);
+		});
+		eye.addEventListener("click", (event) => {
+			event.preventDefault();
+			event.stopPropagation();
+			toggleMutedGroup(selector);
+		});
+		row.addEventListener("click", (event) => {
+			if (rowElement.group == null) return;
+			selectGroupFromEvent(rowElement.group, event);
+		});
+		row.addEventListener("keydown", (event) => {
+			if (event.key !== "Enter" && event.key !== " ") return;
+			event.preventDefault();
+			if (rowElement.group == null) return;
+			selectGroupFromEvent(rowElement.group, event);
+		});
+		return rowElement;
+	}
+	function updateListRowElement(rowElement, group) {
+		const muted = mutedGroupSelectors.has(group.selector);
+		const highlighted = highlightedGroupSelector === group.selector;
+		const selected = selectedGroupSelectors.has(group.selector);
+		rowElement.group = group;
+		rowElement.row.classList.toggle("sdt-hm-row-muted", muted);
+		rowElement.row.classList.toggle("sdt-hm-row-highlighted", highlighted);
+		rowElement.row.classList.toggle("sdt-hm-row-selected", selected);
+		rowElement.check.setAttribute("aria-checked", String(selected));
+		rowElement.check.setAttribute("aria-label", selected ? `Deselect ${group.label}` : `Select ${group.label}`);
+		const checkIcon = selected ? checkIconSvg : "";
+		if (rowElement.renderedCheckIcon !== checkIcon) {
+			rowElement.renderedCheckIcon = checkIcon;
+			setHtml(rowElement.check, checkIcon);
+		}
+		rowElement.count.textContent = formatClickmapCount(getGroupDisplayCount(group));
+		rowElement.eye.setAttribute("aria-pressed", String(muted));
+		rowElement.eye.setAttribute("aria-label", muted ? `Unmute ${group.label}` : `Mute ${group.label}`);
+		rowElement.eye.title = muted ? "Unmute element" : "Mute element";
+		const eyeIcon = muted ? eyeOffIconSvg : eyeIconSvg;
+		if (rowElement.renderedEyeIcon !== eyeIcon) {
+			rowElement.renderedEyeIcon = eyeIcon;
+			setHtml(rowElement.eye, eyeIcon);
+		}
+		rowElement.label.textContent = group.label;
+		if (filters.showDead && group.deadCount > 0) {
+			const deadPct = getDeadClickPercentage(group);
+			rowElement.dead.textContent = `${deadPct}% dead`;
+			rowElement.dead.title = `${formatClickmapCount(group.deadCount)} of ${formatClickmapCount(group.count)} clicks had no visible effect`;
+			rowElement.dead.classList.add("sdt-hm-row-dead-visible");
+		} else {
+			rowElement.dead.textContent = "";
+			rowElement.dead.title = "";
+			rowElement.dead.classList.remove("sdt-hm-row-dead-visible");
+		}
+		rowElement.selector.textContent = group.selector;
+	}
+	function renderOverlay(groups) {
+		const nextMode = shouldShowElements() ? "elements" : "hidden";
+		if (overlayMode !== nextMode) {
+			overlayMode = nextMode;
+			clearClickmapOverlayElements();
+		}
+		if (!shouldShowElements()) return;
+		const visibleGroupKeys = /* @__PURE__ */ new Set();
+		const maxCount = Math.max(1, ...groups.map(getGroupDisplayCount));
+		for (const group of groups) {
+			if (group.rect == null || group.rect.width <= 0 || group.rect.height <= 0) continue;
+			visibleGroupKeys.add(group.selector);
+			const displayCount = getGroupDisplayCount(group);
+			const hue = getClickmapHue(displayCount, maxCount);
+			const muted = mutedGroupSelectors.has(group.selector);
+			const highlighted = highlightedGroupSelector === group.selector || selectedGroupSelectors.has(group.selector);
+			let overlayElement = groupOverlayElements.get(group.selector);
+			if (overlayElement == null) {
+				const marker = h("button", {
+					className: "sdt-hm-marker",
+					type: "button",
+					tabindex: "-1"
+				});
+				marker.addEventListener("click", (event) => {
+					event.preventDefault();
+					event.stopPropagation();
+					toggleMutedGroup(group.selector);
+				});
+				marker.addEventListener("pointerenter", () => setHoveredGroup(group.selector));
+				marker.addEventListener("pointerleave", () => {
+					if (hoveredGroupSelector === group.selector) setHoveredGroup(null);
+				});
+				overlayElement = {
+					marker,
+					outline: h("div", { className: "sdt-hm-outline" })
+				};
+				groupOverlayElements.set(group.selector, overlayElement);
+				overlayRoot.append(overlayElement.outline, overlayElement.marker);
+			}
+			const { marker, outline } = overlayElement;
+			const deadSuffix = filters.showDead && group.deadCount > 0 && group.count > 0 ? ` (${getDeadClickPercentage(group)}% dead)` : "";
+			marker.title = muted ? `Unmute ${group.selector}` : `Mute ${displayCount} clicks${deadSuffix} on ${group.selector}`;
+			marker.setAttribute("aria-label", marker.title);
+			marker.style.left = `${Math.round(group.rect.left + group.rect.width / 2)}px`;
+			marker.style.top = `${Math.round(group.rect.top + group.rect.height / 2)}px`;
+			marker.style.background = `hsla(${hue}, 96%, 58%, 0.94)`;
+			marker.style.boxShadow = `0 0 0 1px hsla(${hue}, 96%, 22%, 0.35), 0 8px 24px hsla(${hue}, 96%, 45%, 0.32)`;
+			marker.textContent = formatClickmapCount(displayCount);
+			marker.classList.toggle("sdt-hm-marker-muted", muted);
+			marker.classList.toggle("sdt-hm-marker-highlighted", highlighted);
+			outline.style.left = `${group.rect.left}px`;
+			outline.style.top = `${group.rect.top}px`;
+			outline.style.width = `${group.rect.width}px`;
+			outline.style.height = `${group.rect.height}px`;
+			outline.style.borderColor = `hsla(${hue}, 96%, 58%, 0.5)`;
+			outline.style.background = hoveredGroupSelector === group.selector ? `hsla(${hue}, 96%, 58%, 0.16)` : "";
+			outline.classList.toggle("sdt-hm-outline-muted", muted);
+			outline.classList.toggle("sdt-hm-outline-highlighted", highlighted);
+		}
+		for (const [key, overlayElement] of groupOverlayElements) if (!visibleGroupKeys.has(key)) {
+			overlayElement.marker.remove();
+			overlayElement.outline.remove();
+			groupOverlayElements.delete(key);
+		}
+		renderHighlightBox(groups);
+	}
+	function renderHighlightBox(groups) {
+		const group = highlightedGroupSelector == null ? null : groups.find((candidate) => candidate.selector === highlightedGroupSelector) ?? null;
+		const rect = group?.rect ?? null;
+		if (group == null || rect == null || rect.width <= 0 || rect.height <= 0) {
+			if (highlightSettleTimer != null) {
+				window.clearTimeout(highlightSettleTimer);
+				highlightSettleTimer = null;
+			}
+			overlayHighlight.classList.remove("sdt-hm-highlight-visible", "sdt-hm-highlight-animating");
+			highlightRenderedSelector = null;
+			return;
+		}
+		if (overlayHighlight.classList.contains("sdt-hm-highlight-visible") && highlightRenderedSelector !== group.selector) {
+			overlayHighlight.classList.add("sdt-hm-highlight-animating");
+			if (highlightSettleTimer != null) window.clearTimeout(highlightSettleTimer);
+			highlightSettleTimer = window.setTimeout(() => {
+				overlayHighlight.classList.remove("sdt-hm-highlight-animating");
+				highlightSettleTimer = null;
+			}, 700);
+		}
+		highlightRenderedSelector = group.selector;
+		overlayHighlight.style.left = `${rect.left}px`;
+		overlayHighlight.style.top = `${rect.top}px`;
+		overlayHighlight.style.width = `${rect.width}px`;
+		overlayHighlight.style.height = `${rect.height}px`;
+		overlayHighlight.classList.add("sdt-hm-highlight-visible");
+	}
+	function renderList(groups) {
+		if (groups.length === 0) {
+			clearClickmapListElements();
+			list.appendChild(empty);
+			return;
+		}
+		const previousScrollTop = body.scrollTop;
+		empty.remove();
+		const renderedKeys = /* @__PURE__ */ new Set();
+		let nextRowNode = list.firstChild;
+		for (const group of groups.slice(0, 30)) {
+			renderedKeys.add(group.selector);
+			let rowElement = listRowElements.get(group.selector);
+			if (rowElement == null) {
+				rowElement = createListRowElement(group.selector);
+				listRowElements.set(group.selector, rowElement);
+			}
+			updateListRowElement(rowElement, group);
+			if (rowElement.row !== nextRowNode) list.insertBefore(rowElement.row, nextRowNode);
+			nextRowNode = rowElement.row.nextSibling;
+		}
+		for (const [selector, rowElement] of listRowElements) {
+			if (renderedKeys.has(selector)) continue;
+			rowElement.row.remove();
+			listRowElements.delete(selector);
+		}
+		body.scrollTop = previousScrollTop;
+	}
+	let renderedHeaderCheckIcon = "";
+	function syncListHeader(groups) {
+		const visible = groups.length > 0 || filters.elementSearch.trim() !== "";
+		listHeader.classList.toggle("sdt-hm-list-header-visible", visible);
+		if (!visible) return;
+		const selectedCount = selectedGroupSelectors.size;
+		const allSelected = selectedCount > 0 && groups.every((group) => selectedGroupSelectors.has(group.selector));
+		listHeaderCheck.setAttribute("aria-checked", allSelected ? "true" : selectedCount > 0 ? "mixed" : "false");
+		listHeaderCheck.setAttribute("aria-label", allSelected ? "Clear selection" : "Select all elements");
+		const headerCheckIcon = allSelected ? checkIconSvg : selectedCount > 0 ? dashIconSvg : "";
+		if (renderedHeaderCheckIcon !== headerCheckIcon) {
+			renderedHeaderCheckIcon = headerCheckIcon;
+			setHtml(listHeaderCheck, headerCheckIcon);
+		}
+		listHeaderSummary.textContent = selectedCount > 0 ? `${formatClickmapCount(selectedCount)} of ${formatClickmapCount(groups.length)} selected` : `${formatClickmapCount(groups.length)} element${groups.length === 1 ? "" : "s"}`;
+		const bulkTargets = getBulkActionGroups();
+		const bulkScope = selectedCount > 0 ? "selected" : "all";
+		listShowButton.textContent = `Show ${bulkScope}`;
+		listHideButton.textContent = `Hide ${bulkScope}`;
+		listShowButton.disabled = bulkTargets.every((group) => !mutedGroupSelectors.has(group.selector));
+		listHideButton.disabled = bulkTargets.every((group) => mutedGroupSelectors.has(group.selector));
+	}
+	function render() {
+		if (currentPath !== window.location.pathname) {
+			currentPath = window.location.pathname;
+			serverClickmap = {
+				path: currentPath,
+				totalClicks: 0,
+				selectors: [],
+				elements: []
+			};
+			serverClickmapError = null;
+			clearClickmapListElements();
+			syncAutoUrlPattern();
+			runAsynchronously(loadServerClickmap());
+		}
+		const groups = getGroups();
+		latestGroups = groups;
+		const groupKeys = new Set(groups.map((group) => group.selector));
+		for (const mutedGroupSelector of mutedGroupSelectors) if (!groupKeys.has(mutedGroupSelector)) mutedGroupSelectors.delete(mutedGroupSelector);
+		for (const selectedGroupSelector of selectedGroupSelectors) if (!groupKeys.has(selectedGroupSelector)) selectedGroupSelectors.delete(selectedGroupSelector);
+		if (selectionAnchorSelector != null && !groupKeys.has(selectionAnchorSelector)) selectionAnchorSelector = null;
+		if (highlightedGroupSelector != null && !groupKeys.has(highlightedGroupSelector)) highlightedGroupSelector = null;
+		if (hoveredGroupSelector != null && !groupKeys.has(hoveredGroupSelector)) hoveredGroupSelector = null;
+		const mappedClicks = groups.reduce((sum, group) => sum + getGroupDisplayCount(group), 0);
+		const aggregateClicks = serverClickmap.path === currentPath ? serverClickmap.totalClicks : 0;
+		const viewport = getClickmapViewportSize();
+		const roundedViewportWidth = Math.round(viewport.width);
+		const roundedViewportHeight = Math.round(viewport.height);
+		const selectedViewportBucket = getClickmapViewportBucket(filters.device);
+		const viewportFilterMatches = selectedViewportBucket == null || isClickmapViewportWidthInBucket(roundedViewportWidth, selectedViewportBucket);
+		statsCount.textContent = formatClickmapCount(aggregateClicks);
+		selectorCount.textContent = formatClickmapCount(groups.length);
+		viewportValue.textContent = `${roundedViewportWidth}x${roundedViewportHeight}`;
+		overlayToggle.textContent = overlayVisible ? "Hide overlay" : "Show overlay";
+		syncOverlayMiniToggle();
+		viewportWarning.classList.toggle("sdt-hm-viewport-warning-visible", !viewportFilterMatches);
+		if (selectedViewportBucket != null && !viewportFilterMatches) {
+			const recommendedWidth = getClickmapRecommendedViewportWidth(selectedViewportBucket);
+			const recommendedHeight = Math.max(1, roundedViewportHeight);
+			viewportWarningTitle.textContent = "Viewport filter mismatch";
+			viewportWarningBody.textContent = `This page is ${roundedViewportWidth}px wide, but ${filters.device} is ${formatClickmapViewportBucket(selectedViewportBucket)}. Resize the window or use the DevTools device toolbar before comparing this clickmap.`;
+			viewportWarningWidthValue.textContent = String(recommendedWidth);
+			viewportWarningHeightValue.textContent = String(recommendedHeight);
+		}
+		const effectiveUrlPattern = getEffectiveUrlPattern();
+		const urlPatternMatchesPath = patternMatchesPath(effectiveUrlPattern, currentPath);
+		syncUrlPatternResetVisibility();
+		const token = getClickmapTokenFromStorage();
+		const tokenOrigin = getClickmapOriginFromStorage();
+		if (token == null) status.textContent = serverClickmapError ?? "No clickmap token in sessionStorage. Paste one from the dashboard to load this page.";
+		else if (tokenOrigin != null && tokenOrigin !== window.location.origin) status.textContent = `Token was minted for ${tokenOrigin}, but this page is ${window.location.origin}. Generate a token for this exact origin.`;
+		else if (loadingServerClickmap) status.textContent = "Loading aggregate clickmap...";
+		else if (serverClickmapError != null) status.textContent = serverClickmapError;
+		else {
+			const scope = effectiveUrlPattern !== "" && effectiveUrlPattern !== currentPath ? effectiveUrlPattern : currentPath;
+			let message = `Loaded ${formatClickmapCount(aggregateClicks)} aggregate clicks for ${scope}.`;
+			if (aggregateClicks === 0) message = `No clicks recorded for ${scope} in this range.`;
+			else if (!urlPatternMatchesPath) message += " This page isn’t covered by the pattern — reset it or open a matching page to see the overlay.";
+			else if (groups.length === 0) message += " No matching elements found on this page yet.";
+			else if (mappedClicks < aggregateClicks) message += ` ${formatClickmapCount(mappedClicks)} mapped to elements on this page.`;
+			status.textContent = message;
+		}
+		status.classList.toggle("sdt-hm-token-status-error", serverClickmapError != null || token != null && tokenOrigin != null && tokenOrigin !== window.location.origin);
+		miniClicks.textContent = formatClickmapCount(aggregateClicks);
+		miniElements.textContent = formatClickmapCount(groups.length);
+		container.classList.toggle("sdt-hm-expanded", expanded);
+		expandButton.setAttribute("aria-expanded", String(expanded));
+		expandButton.setAttribute("aria-label", expanded ? "Collapse clickmap options" : "Expand clickmap options");
+		expandButton.setAttribute("data-sdt-tip", expanded ? "Collapse clickmap options" : "Expand clickmap options");
+		syncExpandIcon();
+		positionDeviceThumb();
+		renderOverlay(groups);
+		syncListHeader(groups);
+		renderList(groups);
+	}
+	async function loadServerClickmap() {
+		const requestId = serverClickmapRequestId + 1;
+		serverClickmapRequestId = requestId;
+		const isLatestRequest = () => requestId === serverClickmapRequestId;
+		const token = getClickmapTokenFromStorage();
+		if (token == null) {
+			serverClickmap = {
+				path: currentPath,
+				totalClicks: 0,
+				selectors: [],
+				elements: []
+			};
+			serverClickmapError = null;
+			loadingServerClickmap = false;
+			render();
+			return;
+		}
+		const tokenOrigin = getClickmapOriginFromStorage();
+		if (tokenOrigin != null && tokenOrigin !== window.location.origin) {
+			serverClickmap = {
+				path: currentPath,
+				totalClicks: 0,
+				selectors: [],
+				elements: []
+			};
+			serverClickmapError = null;
+			loadingServerClickmap = false;
+			render();
+			return;
+		}
+		loadingServerClickmap = true;
+		serverClickmapError = null;
+		render();
+		try {
+			const until = /* @__PURE__ */ new Date();
+			const since = new Date(until.getTime() - CLICKMAP_RANGE_MS[filters.range]);
+			const requestedPath = window.location.pathname;
+			const effectiveUrlPattern = getEffectiveUrlPattern();
+			const body = {
+				clickmap_token: token,
+				origin: window.location.origin,
+				since: since.toISOString(),
+				until: until.toISOString()
+			};
+			if (effectiveUrlPattern !== "") body.url_pattern = effectiveUrlPattern;
+			else body.route_path = requestedPath;
+			if (filters.device !== "all") body.device = filters.device;
+			const response = await app[hexclaveAppInternalsSymbol].sendRequest("/analytics/clickmap", {
+				method: "POST",
+				headers: { "content-type": "application/json" },
+				body: JSON.stringify(body)
+			}, "client");
+			if (!response.ok) throw new Error(`Clickmap request failed with HTTP ${response.status}`);
+			const responseBody = await response.json();
+			if (!isLatestRequest()) return;
+			serverClickmap = parseServerClickmapResponse(responseBody, requestedPath);
+		} catch (error) {
+			if (!isLatestRequest()) return;
+			serverClickmap = {
+				path: currentPath,
+				totalClicks: 0,
+				selectors: [],
+				elements: []
+			};
+			if (error instanceof Error && error.message.includes("Clickmap token does not belong to this project")) {
+				clearClickmapTokenStorage();
+				serverClickmapError = "The stored clickmap token belongs to another project. Generate a fresh token for this project.";
+			} else serverClickmapError = error instanceof Error ? error.message : "Failed to load clickmap data";
+		} finally {
+			if (isLatestRequest()) {
+				loadingServerClickmap = false;
+				render();
+			}
+		}
+	}
+	const onBeforeUnloadResume = () => {
+		const token = getClickmapTokenFromStorage();
+		const tokenOrigin = getClickmapOriginFromStorage();
+		if (token == null || tokenOrigin != null && tokenOrigin !== window.location.origin) return;
+		try {
+			sessionStorage.setItem(CLICKMAP_OVERLAY_RESUME_STORAGE_KEY, "1");
+		} catch {}
+	};
+	const pinPressToButton = (button) => {
+		button.addEventListener("pointerdown", (event) => {
+			try {
+				button.setPointerCapture(event.pointerId);
+			} catch {}
+		});
+	};
+	pinPressToButton(overlayToggle);
+	pinPressToButton(closeButton);
+	pinPressToButton(expandButton);
+	pinPressToButton(showDeadMiniToggle);
+	pinPressToButton(showDeadToggle);
+	pinPressToButton(overlayMiniToggle);
+	pinPressToButton(listHeaderCheck);
+	pinPressToButton(listShowButton);
+	pinPressToButton(listHideButton);
+	overlayToggle.addEventListener("click", () => {
+		overlayVisible = !overlayVisible;
+		render();
+	});
+	closeButton.addEventListener("click", onClose);
+	expandButton.addEventListener("click", () => {
+		expanded = !expanded;
+		render();
+	});
+	const onTokenUpdated = () => {
+		runAsynchronously(loadServerClickmap());
+	};
+	const routePollInterval = window.setInterval(scheduleRender, 500);
+	const isSelfMutationTarget = (target) => {
+		const element = target instanceof Element ? target : target?.parentElement ?? null;
+		if (element == null) return false;
+		return overlayRoot.contains(element) || element.closest(`#${cssEscapeIdent(CLICKMAP_ROOT_ID)}, #${cssEscapeIdent(DEV_TOOL_ROOT_ID)}`) != null;
+	};
+	const mutationObserver = new MutationObserver((mutations) => {
+		if (mutations.every((mutation) => isSelfMutationTarget(mutation.target))) return;
+		scheduleDomIndexInvalidation();
+		scheduleRender();
+	});
+	const visualViewport = window.visualViewport;
+	mutationObserver.observe(document.body, {
+		attributes: true,
+		childList: true,
+		subtree: true
+	});
+	(document.getElementById(CLICKMAP_ROOT_ID) ?? document.body).appendChild(overlayRoot);
+	rebuildDomIndex();
+	scheduleRender();
+	window.addEventListener("beforeunload", onBeforeUnloadResume);
+	const onWindowResize = () => {
+		scheduleRender();
+	};
+	document.addEventListener("scroll", scheduleRender, true);
+	window.addEventListener("resize", onWindowResize);
+	visualViewport?.addEventListener("resize", scheduleRender);
+	visualViewport?.addEventListener("scroll", scheduleRender);
+	window.addEventListener(CLICKMAP_OVERLAY_TOKEN_UPDATED_EVENT, onTokenUpdated);
+	const onDocumentPointerDown = (event) => {
+		if (!urlHelpOpen) return;
+		if (event.target instanceof Node && urlPatternHelp.contains(event.target)) return;
+		if (event.target instanceof Node && urlPatternInfo.contains(event.target)) return;
+		setUrlHelpOpen(false);
+	};
+	const onDocumentKeyDown = (event) => {
+		if (event.key !== "Escape") return;
+		if (urlHelpOpen) {
+			setUrlHelpOpen(false);
+			return;
+		}
+		clearSelection();
+	};
+	document.addEventListener("mousedown", onDocumentPointerDown, true);
+	document.addEventListener("keydown", onDocumentKeyDown, true);
+	render();
+	runAsynchronously(loadServerClickmap());
+	container.append(details, toolbar);
+	return {
+		element: container,
+		cleanup: () => {
+			cancelAnimationFrame(renderFrame);
+			if (domIndexDebounce !== 0) window.clearTimeout(domIndexDebounce);
+			if (filterReloadDebounce !== 0) window.clearTimeout(filterReloadDebounce);
+			if (elementSearchDebounce !== 0) window.clearTimeout(elementSearchDebounce);
+			window.clearInterval(routePollInterval);
+			mutationObserver.disconnect();
+			clearClickmapOverlayElements();
+			domIndex.clear();
+			window.removeEventListener("beforeunload", onBeforeUnloadResume);
+			document.removeEventListener("scroll", scheduleRender, true);
+			window.removeEventListener("resize", onWindowResize);
+			visualViewport?.removeEventListener("resize", scheduleRender);
+			visualViewport?.removeEventListener("scroll", scheduleRender);
+			window.removeEventListener(CLICKMAP_OVERLAY_TOKEN_UPDATED_EVENT, onTokenUpdated);
+			document.removeEventListener("mousedown", onDocumentPointerDown, true);
+			document.removeEventListener("keydown", onDocumentKeyDown, true);
+			overlayRoot.remove();
+		}
+	};
+}
+const GLOBAL_INSTANCE_KEY = "__hexclave-clickmap-instance";
+/**
+* Opens the clickmap overlay: mounts its own root element, injects its own
+* styles, and shows the bottom-centered panel.
+*
+* Returns a cleanup that tears everything down. `onClosed` fires exactly once,
+* when the overlay is closed (by the user or via the returned cleanup), so the
+* caller can let a later token event reopen it.
+*/
+function openClickmapOverlay(app, onClosed) {
+	if (typeof document === "undefined" || typeof document.createElement !== "function") return () => {};
+	const body = Reflect.get(document, "body");
+	if (!hasAppendChild(body)) return () => {};
+	getGlobalUiInstance(GLOBAL_INSTANCE_KEY)?.cleanup();
+	let existingRoot = document.getElementById(CLICKMAP_ROOT_ID);
+	while (existingRoot !== null) {
+		existingRoot.remove();
+		existingRoot = document.getElementById(CLICKMAP_ROOT_ID);
+	}
+	const root = document.createElement("div");
+	root.id = CLICKMAP_ROOT_ID;
+	body.appendChild(root);
+	const wrapper = h("div", { className: "hexclave-clickmap" });
+	root.appendChild(wrapper);
+	const style = document.createElement("style");
+	style.textContent = clickmapCSS;
+	wrapper.appendChild(style);
+	const panel = createClickmapPanel(app, () => instance.cleanup());
+	wrapper.appendChild(h("div", { className: "sdt-hm-panel" }, h("div", { className: "sdt-hm-panel-inner" }, panel.element)));
+	let didCleanup = false;
+	const instance = { cleanup: () => {
+		if (didCleanup) return;
+		didCleanup = true;
+		if (getGlobalUiInstance(GLOBAL_INSTANCE_KEY) === instance) setGlobalUiInstance(GLOBAL_INSTANCE_KEY, null);
+		panel.cleanup?.();
+		if (root.parentNode) root.parentNode.removeChild(root);
+		onClosed();
+	} };
+	setGlobalUiInstance(GLOBAL_INSTANCE_KEY, instance);
+	return () => {
+		instance.cleanup();
+	};
+}
+
+//#endregion
+export { openClickmapOverlay };
+//# sourceMappingURL=clickmap-core.js.map