@gemx-dev/heatmap-react 3.5.92-dev.19 → 3.5.92-dev.20

package/dist/esm/index.mjs

@@ -1948,7 +1948,7 @@ class Logger {
     }
 }
 // Export singleton instance
-const logger$4 = new Logger();
+const logger$3 = new Logger();
 // Export factory function để tạo logger với config riêng
 function createLogger(config = {}) {
     const instance = new Logger();
@@ -2337,7 +2337,7 @@ function findElementByHash(props) {
         }
     }
     catch (error) {
-        logger$4.warn(`Invalid selector "${selector}":`, error);
+        logger$3.warn(`Invalid selector "${selector}":`, error);
     }
     const elementByHash = iframeDocument.querySelector(`[data-clarity-hashalpha="${hash}"], [data-clarity-hash="${hash}"], [data-clarity-hashbeta="${hash}"]`);
     return elementByHash;
@@ -2359,7 +2359,7 @@ function hydrateAreaNode(props) {
     const { id, hash, selector } = persistedData;
     const element = findElementByHash({ hash, selector, iframeDocument, vizRef });
     if (!element) {
-        logger$4.warn(`Cannot hydrate area ${id}: element not found for hash ${hash} or selector ${selector}`);
+        logger$3.warn(`Cannot hydrate area ${id}: element not found for hash ${hash} or selector ${selector}`);
         return null;
     }
     const areaNode = buildAreaNode(element, hash, heatmapInfo, shadowRoot, persistedData);
@@ -2376,7 +2376,7 @@ function hydrateAreas(props) {
             hydratedAreas.push(area);
         }
     }
-    logger$4.info(`Hydrated ${hydratedAreas.length} of ${clickAreas.length} persisted areas`);
+    logger$3.info(`Hydrated ${hydratedAreas.length} of ${clickAreas.length} persisted areas`);
     return hydratedAreas;
 }
 /**
@@ -3080,16 +3080,16 @@ const calcCalloutPositionAbsolute = (props) => {
 
 function validateAreaCreation(dataInfo, hash, areas) {
     if (!dataInfo?.clickMapMetrics || !dataInfo?.totalClicks) {
-        logger$4.warn('Cannot create area: missing heatmap data');
+        logger$3.warn('Cannot create area: missing heatmap data');
         return false;
     }
     if (!hash) {
-        logger$4.warn('Cannot create area: missing hash');
+        logger$3.warn('Cannot create area: missing hash');
         return false;
     }
     const alreadyExists = areas.some((area) => area.hash === hash);
     if (alreadyExists) {
-        logger$4.warn(`Area already exists for element: ${hash}`);
+        logger$3.warn(`Area already exists for element: ${hash}`);
         return false;
     }
     return true;
@@ -3102,14 +3102,14 @@ function identifyConflictingAreas(area) {
     // Case 1: New area is a child of an existing area
     if (area.parentNode) {
         conflicts.parentId = area.parentNode.id;
-        logger$4.info(`New area "${area.selector}" is a child of existing area "${area.parentNode.selector}". Will remove parent.`);
+        logger$3.info(`New area "${area.selector}" is a child of existing area "${area.parentNode.selector}". Will remove parent.`);
     }
     // Case 2: New area is a parent of existing area(s)
     if (area.childNodes.size > 0) {
         area.childNodes.forEach((childArea) => {
             conflicts.childrenIds.push(childArea.id);
         });
-        logger$4.info(`New area "${area.selector}" is a parent of ${area.childNodes.size} existing area(s). Will remove children.`);
+        logger$3.info(`New area "${area.selector}" is a parent of ${area.childNodes.size} existing area(s). Will remove children.`);
     }
     return conflicts;
 }
@@ -3160,7 +3160,7 @@ function useAreaCreation(options = {}) {
             }
         }
         catch (error) {
-            logger$4.error('Failed to create area:', error);
+            logger$3.error('Failed to create area:', error);
         }
     }, [dataInfo, areas, addArea, removeArea, removeClickArea, customShadowRoot, onAreaCreated]);
     return {
@@ -3275,16 +3275,16 @@ function useAreaHydration(options) {
             return;
         if (!dataInfo)
             return;
-        logger$4.info(`Hydrating ${clickAreas.length} persisted areas...`);
+        logger$3.info(`Hydrating ${clickAreas.length} persisted areas...`);
         const hydratedAreas = hydrateAreas({ clickAreas, heatmapInfo: dataInfo, vizRef, shadowRoot });
         if (!hydratedAreas?.length) {
-            logger$4.warn('No areas could be hydrated - all elements may have been removed from DOM');
+            logger$3.warn('No areas could be hydrated - all elements may have been removed from DOM');
             return;
         }
         setIsInitializing(true);
         buildAreaGraph(hydratedAreas);
         setAreas(hydratedAreas);
-        logger$4.info(`Successfully hydrated ${hydratedAreas.length} areas`);
+        logger$3.info(`Successfully hydrated ${hydratedAreas.length} areas`);
     }, [dataInfo, vizRef, isInitializing, clickAreas]);
     useEffect(() => {
         if (!enabled)
@@ -3418,7 +3418,7 @@ function useAreaRectSync(options) {
                 area.rect.update(newRect);
             }
             catch (error) {
-                logger$4.error(`Failed to update rect for area ${area.id}:`, error);
+                logger$3.error(`Failed to update rect for area ${area.id}:`, error);
             }
         });
         buildAreaGraph(areas);
@@ -3567,7 +3567,7 @@ const useScrollmap = () => {
             }, { timeout: 300 });
         }
         catch (error) {
-            logger$4.error(`🚀 🐥 ~ useScrollmap ~ error:`, error);
+            logger$3.error(`🚀 🐥 ~ useScrollmap ~ error:`, error);
         }
     }, [vizRef, scrollmap, isDomLoaded]);
     return { start };
@@ -4172,7 +4172,7 @@ function flush() {
     window.__gemxPerf = getReport();
 }
 // ── Global singleton export ───────────────────────────────────────────────────
-const perf$2 = {
+const perf$3 = {
     startSession,
     endSession,
     mark: globalMark,
@@ -4220,7 +4220,7 @@ function createPerfTimer(config) {
  * DOM observation setup — ResizeObserver + MutationObserver.
  * Returns a cleanup function that disconnects both observers.
  */
-const logger$3 = createLogger({ enabled: false, prefix: 'IframeHeightObserver' });
+const logger$2 = createLogger({ enabled: false, prefix: 'IframeHeightObserver' });
 function setup(doc, onChange) {
     const resizeObserver = new ResizeObserver(onChange);
     resizeObserver.observe(doc.documentElement);
@@ -4232,11 +4232,11 @@ function setup(doc, onChange) {
         attributes: true,
         attributeFilter: ['style', 'class', 'hidden', 'data-v'],
     });
-    logger$3.log('DOM observers started (ResizeObserver + MutationObserver)');
+    logger$2.log('DOM observers started (ResizeObserver + MutationObserver)');
     return () => {
         resizeObserver.disconnect();
         mutationObserver.disconnect();
-        logger$3.log('DOM observers disconnected');
+        logger$2.log('DOM observers disconnected');
     };
 }
 
@@ -4452,9 +4452,9 @@ function createNavigationListeners() {
     };
 }
 
-const logger$2 = createLogger({ enabled: false, prefix: 'IframeNavigationBlocker' });
+const logger$1 = createLogger({ enabled: false, prefix: 'IframeNavigationBlocker' });
 function configure$1(debug) {
-    logger$2.configure({ enabled: debug });
+    logger$1.configure({ enabled: debug });
 }
 // ─── DOM Utilities ────────────────────────────────────────────────────────────
 function disableAllLinks(doc) {
@@ -4478,10 +4478,10 @@ function setupLinkBlocker(doc, isEnabled, onBlocked) {
             return;
         const href = link.getAttribute('href');
         if (!href || href === '' || href === '#' || href.startsWith('#')) {
-            logger$2.log('Allowed hash navigation:', href);
+            logger$1.log('Allowed hash navigation:', href);
             return;
         }
-        logger$2.log('Blocked link navigation to:', href);
+        logger$1.log('Blocked link navigation to:', href);
         e.preventDefault();
         e.stopPropagation();
         e.stopImmediatePropagation();
@@ -4495,7 +4495,7 @@ function setupLinkBlocker(doc, isEnabled, onBlocked) {
             return;
         const href = link.getAttribute('href');
         if (href && !href.startsWith('#')) {
-            logger$2.log('Blocked auxclick navigation');
+            logger$1.log('Blocked auxclick navigation');
             e.preventDefault();
             e.stopPropagation();
             e.stopImmediatePropagation();
@@ -4516,7 +4516,7 @@ function setupFormBlocker(doc, isEnabled, onBlocked, onFormSubmit) {
         const form = e.target;
         const action = form.getAttribute('action');
         if (!action || action === '' || action === '#') {
-            logger$2.log('Allowed same-page form');
+            logger$1.log('Allowed same-page form');
             e.preventDefault();
             const data = {};
             new FormData(form).forEach((value, key) => {
@@ -4525,7 +4525,7 @@ function setupFormBlocker(doc, isEnabled, onBlocked, onFormSubmit) {
             onFormSubmit(form, data);
             return;
         }
-        logger$2.log('Blocked form submission to:', action);
+        logger$1.log('Blocked form submission to:', action);
         e.preventDefault();
         e.stopPropagation();
         e.stopImmediatePropagation();
@@ -4539,7 +4539,7 @@ function setupWindowOpenBlocker(win, originalOpen, isEnabled, onBlocked) {
         if (!isEnabled())
             return originalOpen(...args);
         const url = args[0]?.toString() || 'popup';
-        logger$2.log('Blocked window.open:', url);
+        logger$1.log('Blocked window.open:', url);
         onBlocked(url);
         return null;
     });
@@ -4551,14 +4551,14 @@ function setupUnloadBlocker(win, isEnabled) {
     const beforeUnloadListener = (e) => {
         if (!isEnabled())
             return;
-        logger$2.log('Blocked beforeunload');
+        logger$1.log('Blocked beforeunload');
         e.preventDefault();
         e.returnValue = '';
     };
     const unloadListener = (e) => {
         if (!isEnabled())
             return;
-        logger$2.log('Blocked unload');
+        logger$1.log('Blocked unload');
         e.preventDefault();
         e.stopPropagation();
     };
@@ -4602,7 +4602,7 @@ function start$4(s, iframe, cfg) {
     ];
     s.listeners.attach(cfg?.debug);
     s.running = true;
-    s.logger.log('Navigation blocker started');
+    s.logger.log('Started');
 }
 function stop$4(s) {
     if (!s.running)
@@ -4613,7 +4613,7 @@ function stop$4(s) {
     s.isEnabled = false;
     s.showMessage = false;
     s.running = false;
-    s.logger.log('Navigation blocker stopped');
+    s.logger.log('Stopped');
 }
 function enable(s) {
     if (!s.running) {
@@ -4674,8 +4674,8 @@ function createNavigationBlocker() {
 function attach(s, debug) {
     s.logger.configure({ enabled: !!debug });
     s.dimensionsListener = (e) => {
-        const ev = e;
-        s.logger.log('Dimensions applied:', ev.detail);
+        // const ev = e as CustomEvent<IframeDimensionsDetail>;
+        // s.logger.log('Dimensions applied:', ev.detail);
     };
     window.addEventListener('iframe-dimensions-applied', s.dimensionsListener);
 }
@@ -4807,7 +4807,7 @@ function start$3(s, d, w, cfg, options = {}) {
     s.config = cfg;
     s.running = true;
     s.logger.configure({ enabled: !!options.debug });
-    s.logger.log('Computed style enforcer started');
+    s.logger.log('Started');
 }
 function stop$3(s) {
     if (!s.running)
@@ -4818,7 +4818,7 @@ function stop$3(s) {
     s.elementsWithViewportUnits.clear();
     s.originalValues = new WeakMap();
     s.running = false;
-    s.logger.log('Computed style enforcer stopped');
+    s.logger.log('Stopped');
 }
 function reset(s) {
     if (!s.running) {
@@ -4827,7 +4827,7 @@ function reset(s) {
     }
     s.elementsWithViewportUnits.clear();
     s.originalValues = new WeakMap();
-    s.logger.log('Computed style enforcer reset');
+    s.logger.log('Reset');
 }
 function trackElement(s, element, propertyOriginalValues) {
     if (!s.running) {
@@ -4945,254 +4945,6 @@ function getActiveFixes(ctx) {
     });
 }
 
-/**
- * Core viewport unit replacement logic.
- * Converts vh/vw/svh/dvh/% to pixel values across all CSS in the iframe.
- */
-const logger$1 = createLogger({ enabled: false, prefix: 'ViewportUnitReplacer' });
-// ─── Constants ────────────────────────────────────────────────────────────────
-const HEIGHT_RELATED_PROPERTIES = ['height', 'min-height', 'max-height', 'top', 'bottom'];
-/**
- * Number of top-level CSS rules to process before yielding to the browser.
- * Keeps the main thread responsive during large stylesheets (prevents tab kill on mobile).
- */
-const YIELD_EVERY_RULES = 100;
-// ─── Scheduler ────────────────────────────────────────────────────────────────
-/**
- * Yield control back to the browser so it can handle input, paint frames, and
- * avoid "page unresponsive" / tab-kill on mobile during heavy CSS processing.
- *
- * Uses `scheduler.yield()` (Chrome 115+) when available; falls back to a
- * zero-timeout macrotask which is universally supported.
- */
-function yieldToMain$1() {
-    if (typeof globalThis !== 'undefined' && 'scheduler' in globalThis) {
-        return globalThis.scheduler.yield();
-    }
-    return new Promise((resolve) => setTimeout(resolve, 0));
-}
-// ─── Per-run tracking state (reset on each process() call) ───────────────────
-let elementsWithViewportUnits = new Set();
-let originalValues = new WeakMap();
-// ─── Regex ────────────────────────────────────────────────────────────────────
-/**
- * Stateless test-only regex (no `g` flag) — safe to share across calls.
- * Used exclusively for `.test()` checks before doing a full replacement.
- */
-const VIEWPORT_RE_TEST = /([-.?\d]+)(vh|svh|lvh|dvh|vw|svw|lvw|dvw)/i;
-/** Fresh `g`-flagged instance for String.replace() callbacks. */
-function createRegex() {
-    return /([-.?\d]+)(vh|svh|lvh|dvh|vw|svw|lvw|dvw)/gi;
-}
-// ─── Unit conversion ─────────────────────────────────────────────────────────
-function px(value) {
-    return `${value.toFixed(2)}px`;
-}
-function buildUnitMap(ctx) {
-    return {
-        vh: ctx.targetHeight,
-        svh: ctx.targetHeight,
-        lvh: ctx.targetHeight,
-        dvh: ctx.targetHeight,
-        vw: ctx.targetWidth,
-        svw: ctx.targetWidth,
-        lvw: ctx.targetWidth,
-        dvw: ctx.targetWidth,
-    };
-}
-function toPx(value, unit, unitMap, targetHeight) {
-    const u = unit.toLowerCase();
-    if (u === '%')
-        return (value / 100) * targetHeight;
-    return (value / 100) * (unitMap[u] ?? 0);
-}
-function convert(value, unit, unitMap, targetHeight) {
-    const num = parseFloat(value);
-    return isNaN(num) ? value : px(toPx(num, unit, unitMap, targetHeight));
-}
-function isHeightRelated(prop) {
-    return HEIGHT_RELATED_PROPERTIES.includes(prop);
-}
-/**
- * Use `matchOffset` (from replace() callback) instead of indexOf to get the
- * exact position of the current match — avoids false matches for duplicate values.
- */
-function extractProperty(cssText, matchOffset) {
-    const before = cssText.substring(0, matchOffset);
-    const m = before.match(/([a-z-]+)\s*:\s*[^;{}]*$/i);
-    return m ? m[1].toLowerCase() : '';
-}
-function replaceInText(cssText, ctx) {
-    const unitMap = buildUnitMap(ctx);
-    const { targetHeight } = ctx;
-    return cssText.replace(createRegex(), (match, value, unit, offset) => {
-        if (unit === '%') {
-            return isHeightRelated(extractProperty(cssText, offset)) ? convert(value, unit, unitMap, targetHeight) : match;
-        }
-        return convert(value, unit, unitMap, targetHeight);
-    });
-}
-// ─── Element tracking ─────────────────────────────────────────────────────────
-function trackSelector(selector, propOriginals, ctx) {
-    try {
-        ctx.doc.querySelectorAll(selector).forEach((el) => {
-            elementsWithViewportUnits.add(el);
-            let originals = originalValues.get(el);
-            if (!originals) {
-                originals = new Map();
-                originalValues.set(el, originals);
-            }
-            propOriginals.forEach((v, k) => {
-                if (!originals.has(k))
-                    originals.set(k, v);
-            });
-            ctx.enforcer?.trackElement(el, propOriginals);
-        });
-    }
-    catch {
-        logger$1.warn('Invalid selector, skipping:', selector);
-    }
-}
-// ─── CSS processing ───────────────────────────────────────────────────────────
-function processInlineStyles(ctx) {
-    let count = 0;
-    ctx.doc.querySelectorAll('[style]').forEach((el) => {
-        const style = el.getAttribute('style');
-        if (style && VIEWPORT_RE_TEST.test(style)) {
-            elementsWithViewportUnits.add(el);
-            el.setAttribute('style', replaceInText(style, ctx));
-            count++;
-        }
-    });
-    logger$1.log(`Replaced ${count} inline style elements`);
-    return count;
-}
-function processStyleTags(ctx) {
-    let count = 0;
-    ctx.doc.querySelectorAll('style').forEach((tag) => {
-        const css = tag.textContent || '';
-        if (VIEWPORT_RE_TEST.test(css)) {
-            tag.textContent = replaceInText(css, ctx);
-            count++;
-        }
-    });
-    logger$1.log(`Replaced ${count} <style> tags`);
-    return count;
-}
-function processRule(rule, ctx) {
-    let count = 0;
-    if ('style' in rule && rule.style) {
-        const cssRule = rule;
-        const style = cssRule.style;
-        let hasVp = false;
-        const propOriginals = new Map();
-        for (let i = 0; i < style.length; i++) {
-            const prop = style[i];
-            const value = style.getPropertyValue(prop);
-            if (value && VIEWPORT_RE_TEST.test(value)) {
-                hasVp = true;
-                propOriginals.set(prop, value);
-                style.setProperty(prop, replaceInText(value, ctx), style.getPropertyPriority(prop));
-                count++;
-            }
-        }
-        if (hasVp && cssRule.selectorText)
-            trackSelector(cssRule.selectorText, propOriginals, ctx);
-    }
-    if ('cssRules' in rule) {
-        const nested = rule.cssRules;
-        if (nested) {
-            for (let i = 0; i < nested.length; i++) {
-                count += processRule(nested[i], ctx);
-            }
-        }
-    }
-    return count;
-}
-/** Processes only inline <style> sheets. Linked sheets are handled by processLinkedStylesheets. */
-async function processStylesheets(ctx) {
-    let total = 0;
-    let rulesSinceYield = 0;
-    const sheets = ctx.doc.styleSheets;
-    for (let i = 0; i < sheets.length; i++) {
-        const sheet = sheets[i];
-        if (sheet.href)
-            continue; // deferred to processLinkedStylesheets
-        try {
-            const rules = sheet.cssRules;
-            for (let j = 0; j < rules.length; j++) {
-                total += processRule(rules[j], ctx);
-                rulesSinceYield++;
-                if (rulesSinceYield >= YIELD_EVERY_RULES) {
-                    rulesSinceYield = 0;
-                    await yieldToMain$1();
-                }
-            }
-        }
-        catch (e) {
-            logger$1.warn('Cannot read stylesheet (CORS?):', e.message);
-        }
-    }
-    logger$1.log(`Replaced ${total} rules in inline stylesheets`);
-    return total;
-}
-async function processLinkedStylesheets(ctx) {
-    const links = ctx.doc.querySelectorAll('link[rel="stylesheet"]');
-    let count = 0;
-    for (let i = 0; i < links.length; i++) {
-        const link = links[i];
-        // Skip cross-origin — already in browser CSSOM, handled via processStylesheets
-        if (link.href && !link.href.startsWith(ctx.win.location.origin)) {
-            logger$1.log('Skipping cross-origin CSS:', link.href);
-            continue;
-        }
-        try {
-            const res = await fetch(link.href);
-            let css = await res.text();
-            if (VIEWPORT_RE_TEST.test(css)) {
-                css = replaceInText(css, ctx);
-                const style = ctx.doc.createElement('style');
-                style.textContent = css;
-                style.dataset.originalHref = link.href;
-                link.parentNode?.insertBefore(style, link);
-                link.remove();
-                count++;
-            }
-        }
-        catch (e) {
-            logger$1.warn('Cannot load CSS:', link.href, e);
-        }
-    }
-    logger$1.log(`Replaced ${count} linked CSS files`);
-    return count;
-}
-// ─── Public entry point ───────────────────────────────────────────────────────
-async function process$1(ctx) {
-    logger$1.configure({ enabled: !!ctx.debug });
-    // Reset tracking state from any previous run
-    elementsWithViewportUnits = new Set();
-    originalValues = new WeakMap();
-    processInlineStyles(ctx);
-    processStyleTags(ctx);
-    await processStylesheets(ctx);
-    await processLinkedStylesheets(ctx);
-    // Wait for browser to apply the replaced styles
-    await new Promise((resolve) => requestAnimationFrame(resolve));
-    // Enforce final computed styles to inline with !important
-    const count = ctx.enforcer?.processAll({ debug: !!ctx.debug }) ?? 0;
-    logger$1.log(`Enforced ${count} computed styles for ${elementsWithViewportUnits.size} tracked elements`);
-}
-
-/**
- * Built-in global fix — always runs, no shouldApply condition.
- * Registered first so it runs before any other global process hooks.
- */
-register$1({
-    name: 'viewport-unit-replacer',
-    description: 'Core: convert vh/vw/svh/dvh/% to px values across all iframe CSS',
-    process: process$1,
-});
-
 /**
  * GemPages v7 Slider Fix
  *
@@ -5408,52 +5160,52 @@ function configure(debug) {
 }
 async function run$1(ctx, activeGlobal, shopFix) {
     // ── Phase 1: beforeProcess ────────────────────────────────────────────────
-    const t1 = perf$2.mark('phase1.beforeProcess');
+    const t1 = perf$3.mark('phase1.beforeProcess');
     for (const fix of activeGlobal) {
         if (fix.beforeProcess) {
             logger.log(`[beforeProcess] ${fix.name}`);
-            const t = perf$2.mark(`phase1.${fix.name}.beforeProcess`);
+            const t = perf$3.mark(`phase1.${fix.name}.beforeProcess`);
             await fix.beforeProcess(ctx);
-            perf$2.measure(`phase1.${fix.name}.beforeProcess`, t);
+            perf$3.measure(`phase1.${fix.name}.beforeProcess`, t);
         }
     }
     if (shopFix?.beforeProcess) {
         logger.log('[beforeProcess] shop');
-        const t = perf$2.mark('phase1.shop.beforeProcess');
+        const t = perf$3.mark('phase1.shop.beforeProcess');
         await shopFix.beforeProcess(ctx);
-        perf$2.measure('phase1.shop.beforeProcess', t);
+        perf$3.measure('phase1.shop.beforeProcess', t);
     }
-    perf$2.measure('phase1.beforeProcess', t1);
+    perf$3.measure('phase1.beforeProcess', t1);
     // ── Phase 2: process ──────────────────────────────────────────────────────
-    const t2 = perf$2.mark('phase2.process');
+    const t2 = perf$3.mark('phase2.process');
     for (const fix of activeGlobal) {
         if (fix.process) {
             logger.log(`[process] ${fix.name}`);
-            const t = perf$2.mark(`phase2.${fix.name}.process`);
+            const t = perf$3.mark(`phase2.${fix.name}.process`);
             await fix.process(ctx);
-            perf$2.measure(`phase2.${fix.name}.process`, t);
+            perf$3.measure(`phase2.${fix.name}.process`, t);
         }
     }
-    perf$2.measure('phase2.process', t2);
+    perf$3.measure('phase2.process', t2);
     // ── Phase 3: afterProcess ─────────────────────────────────────────────────
-    const t3 = perf$2.mark('phase3.afterProcess');
+    const t3 = perf$3.mark('phase3.afterProcess');
     if (shopFix?.afterProcess) {
         logger.log('[afterProcess] shop');
-        const t = perf$2.mark('phase3.shop.afterProcess');
+        const t = perf$3.mark('phase3.shop.afterProcess');
         await shopFix.afterProcess(ctx);
-        perf$2.measure('phase3.shop.afterProcess', t);
+        perf$3.measure('phase3.shop.afterProcess', t);
     }
     for (const fix of activeGlobal) {
         if (fix.afterProcess) {
             logger.log(`[afterProcess] ${fix.name}`);
-            const t = perf$2.mark(`phase3.${fix.name}.afterProcess`);
+            const t = perf$3.mark(`phase3.${fix.name}.afterProcess`);
             await fix.afterProcess(ctx);
-            perf$2.measure(`phase3.${fix.name}.afterProcess`, t);
+            perf$3.measure(`phase3.${fix.name}.afterProcess`, t);
         }
     }
-    perf$2.measure('phase3.afterProcess', t3);
+    perf$3.measure('phase3.afterProcess', t3);
     // ── Phase 4: getDimensions ────────────────────────────────────────────────
-    const t4 = perf$2.mark('phase4.getDimensions');
+    const t4 = perf$3.mark('phase4.getDimensions');
     return new Promise((resolve) => {
         requestAnimationFrame(() => {
             let dimensions = null;
@@ -5478,7 +5230,7 @@ async function run$1(ctx, activeGlobal, shopFix) {
                 dimensions = { height: getFinalHeight(ctx.doc, ctx.win), width: getFinalWidth(ctx.doc) };
             }
             logger.log('Final dimensions:', dimensions);
-            perf$2.measure('phase4.getDimensions', t4);
+            perf$3.measure('phase4.getDimensions', t4);
             resolve(dimensions);
         });
     });
@@ -5606,14 +5358,14 @@ async function run(s) {
     const activeGlobal = getActiveFixes(ctx);
     if (activeGlobal.length > 0)
         s.logger.log(`Active global fixes: ${activeGlobal.map((f) => f.name).join(', ')}`);
-    const tRun = perf$2.mark('viewport.run');
+    const tRun = perf$3.mark('viewport.run');
     try {
         const result = await run$1(ctx, activeGlobal, s.shopFix);
-        perf$2.measure('viewport.run', tRun);
+        perf$3.measure('viewport.run', tRun);
         return result;
     }
     catch (err) {
-        perf$2.measure('viewport.run', tRun);
+        perf$3.measure('viewport.run', tRun);
         s.logger.error('Critical error:', err);
         return { height: s.doc.body?.scrollHeight || 1000, width: s.doc.body?.scrollWidth || 1000 };
     }
@@ -5663,22 +5415,23 @@ async function process(s) {
         return;
     }
     const sessionId = `render-${Date.now()}`;
-    perf$2.startSession(sessionId);
-    const t0 = perf$2.mark('orchestrator.process');
+    perf$3.startSession(sessionId);
+    const t0 = perf$3.mark('orchestrator.process');
     try {
-        s.logger.log('Processing viewport units...');
+        s.logger.groupCollapsed('Processing...');
         s.viewportReplacer.start(s.iframe, s.config);
         s.navigationBlocker.start(s.iframe, { debug: s.config.debug });
         const result = await s.viewportReplacer.run();
-        perf$2.measure('orchestrator.process', t0);
-        perf$2.endSession();
+        perf$3.measure('orchestrator.process', t0);
+        perf$3.endSession();
+        s.logger.groupEnd();
         s.logger.log('Process completed:', result);
         s.config.onSuccess?.(result);
         dispatchDimensionsEvent(result);
     }
     catch (error) {
-        perf$2.measure('orchestrator.process', t0);
-        perf$2.endSession();
+        perf$3.measure('orchestrator.process', t0);
+        perf$3.endSession();
         s.logger.error('Failed to process:', error);
         s.config.onError?.(error);
     }
@@ -5706,7 +5459,7 @@ function start$1(s, cfg) {
     s.config = cfg;
     s.running = true;
     s.logger.configure({ enabled: !!cfg.debug });
-    s.logger.log('Iframe fixer started');
+    s.logger.log('Started');
     initialize(s);
 }
 function stop$1(s) {
@@ -5722,7 +5475,7 @@ function stop$1(s) {
     s.iframe = null;
     s.config = null;
     s.running = false;
-    s.logger.log('Iframe fixer stopped');
+    s.logger.log('Stopped');
 }
 async function recalculate$1(s) {
     if (!s.running) {
@@ -5936,7 +5689,7 @@ function getHtmlCacheConfig() {
     return _config;
 }
 /** Build a full cache key that includes the cache version to handle invalidation. */
-function buildCacheKey(baseKey, shortCircuitStrategy) {
+function buildCacheKey(baseKey, shortCircuitStrategy = 0) {
     return `v${_config.cacheVersion}:${baseKey}:${shortCircuitStrategy}`;
 }
 
@@ -6436,7 +6189,7 @@ function filterShadowNodes(data, subtreeIds, shadowHostTags) {
     return (data?.filter((node) => {
         if (isShadowDomNode(node.tag))
             return true;
-        if (shadowHostTags.has(node.tag ?? '') && subtreeIds.has(node.parent))
+        if (shadowHostTags.has(node.tag ?? ''))
             return true;
         return subtreeIds.has(node.id);
     }) ?? []);
@@ -6471,6 +6224,35 @@ function extractSpecialEvents(events, dom, shadowHostTags) {
     return result;
 }
 
+// utils/retry.ts
+const delay = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
+/**
+ * Retry until the callback returns truthy, or throw if the limit is exceeded.
+ *
+ * @example
+ * await retry(() => doc.readyState === 'complete', { timeout: 5000, label: 'DOM ready' });
+ *
+ * @example
+ * const el = await retry(() => document.getElementById('app'), { maxRetries: 20 });
+ */
+async function retry(callback, options = {}) {
+    const { interval = 100, label = 'Retry' } = options;
+    const maxRetries = options.timeout != null ? Math.ceil(options.timeout / interval) : (options.maxRetries ?? 50);
+    for (let attempt = 0; attempt <= maxRetries; attempt++) {
+        console.log(`🔄 [${label}] attempt ${attempt}/${maxRetries}`);
+        const result = await callback();
+        if (result) {
+            return result;
+        }
+        if (attempt < maxRetries) {
+            await delay(interval);
+        }
+    }
+    const totalMs = maxRetries * interval;
+    throw new Error(`[${label}] Timed out after ${maxRetries} retries (${totalMs}ms)`);
+}
+
+const perf$2 = createPerfTimer('Render');
 const YIELD_INTERVAL_MS = 16;
 async function yieldToMain() {
     if ('scheduler' in globalThis && typeof globalThis.scheduler?.yield === 'function') {
@@ -6480,6 +6262,43 @@ async function yieldToMain() {
         await new Promise((resolve) => setTimeout(resolve, 0));
     }
 }
+const renderLoop = async (ctx, options) => {
+    const { events, useproxy } = options;
+    const shortCircuitStrategy = options.shortCircuitStrategy ?? ShortCircuitStrategy.None;
+    const hash = options.hash ?? null;
+    const t0 = perf$2.mark('RenderLoop start');
+    let lastYield = performance.now();
+    const totalEvents = events.length;
+    for (let i = 0; i < totalEvents; i++) {
+        const entry = events[i];
+        const entryEvent = entry.event;
+        const now = performance.now();
+        if (now - lastYield > YIELD_INTERVAL_MS) {
+            console.log(`[RenderLoop] ${i}/${totalEvents} time:`, now - lastYield);
+            await yieldToMain();
+            lastYield = performance.now();
+        }
+        switch (entryEvent) {
+            case Event.StyleSheetAdoption:
+            case Event.StyleSheetUpdate:
+                ctx.layout.styleChange(entry);
+                break;
+            case Event.CustomElement:
+                ctx.layout.customElement(entry);
+                break;
+            case Event.Mutation: {
+                const domEvent = entry;
+                ctx.renderTime = domEvent.time;
+                if (ctx.shortCircuitRendering(shortCircuitStrategy, domEvent, hash))
+                    return;
+                ctx.layout.markup(domEvent, useproxy);
+                break;
+            }
+        }
+    }
+    perf$2.measure('RenderLoop', t0);
+};
+
 class GXVisualizer extends Visualizer {
     attentionMap;
     originalClearmap;
@@ -6491,104 +6310,93 @@ class GXVisualizer extends Visualizer {
         this.originalClearmap = this.clearmap;
         this.clearmap = this.clearmapOverride;
         this.setup = this.setupOverride;
-        this.html = this.htmlOverride;
     }
-    setupOverride = async (target, options) => {
-        this.attentionMap?.clear();
-        await this.originalSetup(target, options);
-        this.attentionMap = new AttentionMapRenderer(this.state);
-        return this;
-    };
-    clearmapOverride = () => {
-        this.originalClearmap();
-        this.attentionMap?.clear();
-    };
-    renderLoop = async (v, events, hash, useproxy, shortCircuitStrategy) => {
-        let lastYield = performance.now();
-        for (let i = 0; i < events.length; i++) {
-            const now = performance.now();
-            if (now - lastYield > YIELD_INTERVAL_MS) {
-                await yieldToMain();
-                lastYield = performance.now();
-            }
-            const entry = events[i];
-            const entryEvent = entry.event;
-            switch (entryEvent) {
-                case Event.StyleSheetAdoption:
-                case Event.StyleSheetUpdate:
-                    v.layout.styleChange(entry);
-                    break;
-                case Event.CustomElement:
-                    v.layout.customElement(entry);
-                    break;
-                case Event.Mutation: {
-                    const domEvent = entry;
-                    this.renderTime = domEvent.time;
-                    if (v.shortCircuitRendering(shortCircuitStrategy, domEvent, hash))
-                        return;
-                    v.layout.markup(domEvent, useproxy);
-                    break;
-                }
-            }
+    htmlRender = async (props) => {
+        const { decoded, target, portalCanvasId, useproxy, logerror } = props;
+        if (!decoded || decoded.length === 0 || !target)
+            return this;
+        try {
+            const merged = this.mergeForHtml(decoded);
+            await this.setup(target, { version: decoded[0].envelope.version, dom: merged.dom, useproxy, portalCanvasId });
+            await this.renderLoop(this, { events: merged.events, target, useproxy });
         }
-    };
-    htmlOverride = async (decoded, target, portalCanvasId, hash = '', useproxy, logerror, shortCircuitStrategy = ShortCircuitStrategy.None) => {
-        if (decoded && decoded.length > 0 && target) {
-            try {
-                const v = this;
-                const merged = v.mergeForHtml(decoded);
-                await this.setup(target, { version: decoded[0].envelope.version, dom: merged.dom, useproxy, portalCanvasId });
-                await this.renderLoop(v, merged.events, hash, useproxy, shortCircuitStrategy);
-            }
-            catch (e) {
-                if (logerror)
-                    logerror(e);
-            }
+        catch (e) {
+            if (logerror)
+                logerror(e);
         }
         return this;
     };
-    htmlCached = async (cacheKey, decoded, target, portalCanvasId, hash = '', useproxy, logerror, shortCircuitStrategy = 0) => {
+    htmlCached = async (cacheKey, options) => {
+        const { decoded, target } = options;
         if (!decoded || decoded.length === 0 || !target)
             return this;
-        const fullKey = buildCacheKey(cacheKey, 0);
+        const fullKey = buildCacheKey(cacheKey, options.shortCircuitStrategy);
         const cached = await htmlCache.get(fullKey);
         if (cached) {
             try {
-                const v = this;
-                await this.setup(target, { version: cached.version, useproxy, portalCanvasId });
-                target.document.open();
-                target.document.write(cached.html);
-                target.document.close();
-                v.layout.hydrate(target.document);
-                // Replay shadow DOM from initial Discover event (was processed by setup() in full render)
-                if (cached.specialDom) {
-                    v.layout.markup(cached.specialDom, useproxy);
-                }
-                // Replay shadow DOM mutations + StyleSheet + CustomElement
-                await this.renderLoop(v, cached.specialEvents, '', useproxy, 0);
+                await this.buildHtmlByCached(cached, options);
                 return this;
             }
             catch (e) {
-                if (logerror)
-                    logerror(e);
+                options?.logerror?.(e);
             }
         }
+        await this.buildHtmlForCache(fullKey, options);
+        return this;
+    };
+    /**
+     * Render attention/engagement map.
+     * @param attentionData - Array of attention data points with start/end element hashes and time spent
+     * @param avgFold - Average fold pixel position (used to scale top portion)
+     * @param isSecondary - Whether to use secondary comparison iframe IDs
+     */
+    attention = (attentionData, avgFold, isSecondary = false) => {
+        this.clearmapOverride();
+        this.attentionMap.attention(attentionData, avgFold, this, isSecondary);
+    };
+    buildHtmlByCached = async (cached, options) => {
+        const { target, useproxy, portalCanvasId } = options;
+        if (!cached || !target)
+            throw new Error('Failed to render HTML cached');
+        const doc = target.document;
+        target.window;
         try {
-            const v = this;
-            const merged = v.mergeForHtml(decoded);
+            await this.setup(target, { version: cached.version, useproxy, portalCanvasId });
+            doc.open();
+            doc.write(cached.html);
+            doc.close();
+            const process = async () => {
+                this.layout.hydrate(doc);
+                // Replay shadow DOM from initial Discover event
+                if (cached.specialDom) {
+                    this.layout.markup(cached.specialDom, useproxy);
+                }
+                // Replay shadow DOM mutations + StyleSheet + CustomElement
+                await this.renderLoop(this, { ...options, events: cached.specialEvents });
+            };
+            await retry(() => doc.readyState === 'complete', { timeout: 30000, label: 'DOM ready' });
+            await process();
+            return this;
+        }
+        catch (e) {
+            throw new Error('Failed to render HTML cached', { cause: e });
+        }
+    };
+    buildHtmlForCache = async (cacheKey, options) => {
+        const { decoded, target, useproxy, portalCanvasId, logerror } = options;
+        if (!decoded || decoded.length === 0 || !target)
+            return this;
+        try {
+            const merged = this.mergeForHtml(decoded);
             await this.setup(target, { version: decoded[0].envelope.version, dom: merged.dom, useproxy, portalCanvasId });
-            await this.renderLoop(v, merged.events, hash, useproxy, shortCircuitStrategy);
+            await this.renderLoop(this, { events: merged.events, target, useproxy });
+            const timestamp = Date.now();
+            const version = decoded[0].envelope.version;
+            const html = target.document.documentElement.outerHTML;
             const shadowHostTags = collectShadowHostTags(target.document);
             const specialDom = extractSpecialDom(merged.dom, merged.events, shadowHostTags);
             const specialEvents = extractSpecialEvents(merged.events, merged.dom, shadowHostTags);
-            void htmlCache.set({
-                key: fullKey,
-                html: target.document.documentElement.outerHTML,
-                specialDom: specialDom,
-                specialEvents,
-                version: decoded[0].envelope.version,
-                timestamp: Date.now(),
-            });
+            void htmlCache.set({ key: cacheKey, html, specialDom, specialEvents, version, timestamp });
         }
         catch (e) {
             if (logerror)
@@ -6596,15 +6404,18 @@ class GXVisualizer extends Visualizer {
         }
         return this;
     };
-    /**
-     * Render attention/engagement map.
-     * @param attentionData - Array of attention data points with start/end element hashes and time spent
-     * @param avgFold - Average fold pixel position (used to scale top portion)
-     * @param isSecondary - Whether to use secondary comparison iframe IDs
-     */
-    attention = (attentionData, avgFold, isSecondary = false) => {
-        this.clearmapOverride();
-        this.attentionMap.attention(attentionData, avgFold, this, isSecondary);
+    renderLoop = async (ctx, options) => {
+        await renderLoop(ctx, options);
+    };
+    setupOverride = async (target, options) => {
+        this.attentionMap?.clear();
+        await this.originalSetup(target, options);
+        this.attentionMap = new AttentionMapRenderer(this.state);
+        return this;
+    };
+    clearmapOverride = () => {
+        this.originalClearmap();
+        this.attentionMap?.clear();
     };
 }
 
@@ -6701,12 +6512,6 @@ function startIframe({ helperRef, iframe, shopId, deviceType = EDeviceType.Deskt
     });
 }
 
-const EShortCircuitStrategy = {
-    None: 0,
-    HashFirstTimestamp: 1,
-    HashFirstTimestampPlusBuffer: 2,
-    HashBeforeDeleted: 3,
-};
 const perf = createPerfTimer('Render');
 const useHeatmapRenderDom = () => {
     const viewId = useViewIdContext();
@@ -6739,19 +6544,23 @@ const useHeatmapRenderDom = () => {
         const abort = new AbortController();
         abortRef.current = abort;
         resetIframeSetup();
-        const t0 = perf.mark('renderHeatmap start');
+        const t0 = perf.mark('RenderHeatmap start');
         const visualizer = vizRef ?? new GXVisualizer();
         if (!vizRef)
             setVizRef(visualizer);
         visualizer.configure({ excludeClassNames });
         setIsDomLoaded(false);
         // Phase 1: render DOM — does not depend on contentWidth/wrapperHeight
-        const hash = elementToShowRef.current ?? undefined;
         const cacheKey = dataHashRef.current;
-        const strategy = hash ? EShortCircuitStrategy.HashFirstTimestampPlusBuffer : EShortCircuitStrategy.None;
-        await perf.wrap('visualizer.html', () => cacheKey
-            ? visualizer.htmlCached(cacheKey, payloads, contentWindow, viewId, hash, undefined, undefined, strategy)
-            : visualizer.html(payloads, contentWindow, viewId, hash, undefined, undefined, strategy));
+        const options = {
+            decoded: payloads,
+            target: contentWindow,
+            portalCanvasId: viewId,
+            logerror: (error) => {
+                console.error('Error rendering HTML', error);
+            },
+        };
+        await perf.wrap('RenderHtml', () => cacheKey ? visualizer.htmlCached(cacheKey, options) : visualizer.htmlRender(options));
         if (abort.signal.aborted)
             return;
         // Phase 2: iframe setup — deferred to useIframeSetup (handles dims dependency)
@@ -7351,10 +7160,10 @@ const useScrollmapZones = (options) => {
             const newZones = createZones(scrollmap);
             setZones(newZones);
             setIsReady(true);
-            logger$4.log(`[useScrollmap] Created ${newZones.length} zones in ${mode} mode`);
+            logger$3.log(`[useScrollmap] Created ${newZones.length} zones in ${mode} mode`);
         }
         catch (error) {
-            logger$4.error('[useScrollmap] Error:', error);
+            logger$3.error('[useScrollmap] Error:', error);
             setIsReady(false);
         }
     }, [enabled, scrollmap, mode, createZones]);