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

package/dist/esm/index.mjs

@@ -162,6 +162,11 @@ var EHeatmapType;
     EHeatmapType["Click"] = "click";
     EHeatmapType["Scroll"] = "scroll";
 })(EHeatmapType || (EHeatmapType = {}));
+var EHeatmapMode;
+(function (EHeatmapMode) {
+    EHeatmapMode["Heatmap"] = "heatmap";
+    EHeatmapMode["Replay"] = "replay";
+})(EHeatmapMode || (EHeatmapMode = {}));
 var EClickType;
 (function (EClickType) {
     /** Return all clicks (default) */
@@ -198,7 +203,6 @@ var EScrollType;
     EScrollType["Attention"] = "ATTENTION";
     EScrollType["Revenue"] = "REVENUE";
 })(EScrollType || (EScrollType = {}));
-var EHeatmapMode;
 (function (EHeatmapMode) {
     EHeatmapMode["Single"] = "single";
     EHeatmapMode["Live"] = "live";
@@ -620,16 +624,16 @@ const useHeatmapSettingStore = create()(subscribeWithSelector((set) => {
 
 const useHeatmapVizStore = create()(subscribeWithSelector((set) => {
     return {
-        isRenderedViz: new Map([[DEFAULT_VIEW_ID, false]]),
+        isDomLoaded: new Map([[DEFAULT_VIEW_ID, false]]),
         zoomRatio: new Map([[DEFAULT_VIEW_ID, DEFAULT_ZOOM_RATIO.DEFAULT]]),
         minZoomRatio: new Map([[DEFAULT_VIEW_ID, DEFAULT_ZOOM_RATIO.MIN]]),
         maxZoomRatio: new Map([[DEFAULT_VIEW_ID, DEFAULT_ZOOM_RATIO.MAX]]),
         scale: new Map([[DEFAULT_VIEW_ID, 1]]),
         isScaledToFit: new Map([[DEFAULT_VIEW_ID, false]]),
-        setIsRenderedViz: (isRenderedViz, viewId = DEFAULT_VIEW_ID) => set((prev) => {
-            const newIsRenderedViz = new Map(prev.isRenderedViz);
-            newIsRenderedViz.set(viewId, isRenderedViz);
-            return { isRenderedViz: newIsRenderedViz };
+        setIsDomLoaded: (isDomLoaded, viewId = DEFAULT_VIEW_ID) => set((prev) => {
+            const newIsDomLoaded = new Map(prev.isDomLoaded);
+            newIsDomLoaded.set(viewId, isDomLoaded);
+            return { isDomLoaded: newIsDomLoaded };
         }),
         setZoomRatio: (zoomRatio, viewId = DEFAULT_VIEW_ID) => set((prev) => {
             const newZoomRatio = new Map(prev.zoomRatio);
@@ -657,18 +661,18 @@ const useHeatmapVizStore = create()(subscribeWithSelector((set) => {
             return { isScaledToFit: newIsScaledToFit };
         }),
         copyView: (fromViewId, toViewId) => set((prev) => {
-            const newIsRenderedViz = new Map(prev.isRenderedViz);
+            const newIsDomLoaded = new Map(prev.isDomLoaded);
             const newZoomRatio = new Map(prev.zoomRatio);
             const newMinZoomRatio = new Map(prev.minZoomRatio);
             const newScale = new Map(prev.scale);
             const newIsScaledToFit = new Map(prev.isScaledToFit);
-            newIsRenderedViz.set(toViewId, prev.isRenderedViz.get(fromViewId) ?? false);
+            newIsDomLoaded.set(toViewId, prev.isDomLoaded.get(fromViewId) ?? false);
             newZoomRatio.set(toViewId, prev.zoomRatio.get(fromViewId) ?? 100);
             newMinZoomRatio.set(toViewId, prev.minZoomRatio.get(fromViewId) ?? 10);
             newScale.set(toViewId, prev.scale.get(fromViewId) ?? 1);
             newIsScaledToFit.set(toViewId, prev.isScaledToFit.get(fromViewId) ?? false);
             return {
-                isRenderedViz: newIsRenderedViz,
+                isDomLoaded: newIsDomLoaded,
                 zoomRatio: newZoomRatio,
                 minZoomRatio: newMinZoomRatio,
                 scale: newScale,
@@ -676,18 +680,18 @@ const useHeatmapVizStore = create()(subscribeWithSelector((set) => {
             };
         }),
         clearView: (viewId) => set((prev) => {
-            const newIsRenderedViz = new Map(prev.isRenderedViz);
+            const newIsDomLoaded = new Map(prev.isDomLoaded);
             const newZoomRatio = new Map(prev.zoomRatio);
             const newMinZoomRatio = new Map(prev.minZoomRatio);
             const newScale = new Map(prev.scale);
             const newIsScaledToFit = new Map(prev.isScaledToFit);
-            newIsRenderedViz.delete(viewId);
+            newIsDomLoaded.delete(viewId);
             newZoomRatio.delete(viewId);
             newMinZoomRatio.delete(viewId);
             newScale.delete(viewId);
             newIsScaledToFit.delete(viewId);
             return {
-                isRenderedViz: newIsRenderedViz,
+                isDomLoaded: newIsDomLoaded,
                 zoomRatio: newZoomRatio,
                 minZoomRatio: newMinZoomRatio,
                 scale: newScale,
@@ -695,7 +699,7 @@ const useHeatmapVizStore = create()(subscribeWithSelector((set) => {
             };
         }),
         resetAll: () => set({
-            isRenderedViz: new Map([[DEFAULT_VIEW_ID, false]]),
+            isDomLoaded: new Map([[DEFAULT_VIEW_ID, false]]),
             zoomRatio: new Map([[DEFAULT_VIEW_ID, 100]]),
             minZoomRatio: new Map([[DEFAULT_VIEW_ID, 10]]),
             scale: new Map([[DEFAULT_VIEW_ID, 1]]),
@@ -1415,7 +1419,7 @@ const useHeatmapSettingContext = createViewContextHook({
 const useHeatmapVizContext = createViewContextHook({
     useStore: useHeatmapVizStore,
     getState: (store, viewId) => ({
-        isRenderedViz: store.isRenderedViz.get(viewId) ?? false,
+        isDomLoaded: store.isDomLoaded.get(viewId) ?? false,
         zoomRatio: store.zoomRatio.get(viewId) ?? DEFAULT_ZOOM_RATIO.DEFAULT,
         minZoomRatio: store.minZoomRatio.get(viewId) ?? DEFAULT_ZOOM_RATIO.MIN,
         maxZoomRatio: store.maxZoomRatio.get(viewId) ?? DEFAULT_ZOOM_RATIO.MAX,
@@ -1423,7 +1427,7 @@ const useHeatmapVizContext = createViewContextHook({
         isScaledToFit: store.isScaledToFit.get(viewId) ?? false,
     }),
     getActions: (store, viewId) => ({
-        setIsRenderedViz: (value) => store.setIsRenderedViz(value, viewId),
+        setIsDomLoaded: (value) => store.setIsDomLoaded(value, viewId),
         setZoomRatio: (value) => store.setZoomRatio(value, viewId),
         setMinZoomRatio: (value) => store.setMinZoomRatio(value, viewId),
         setMaxZoomRatio: (value) => store.setMaxZoomRatio(value, viewId),
@@ -1525,10 +1529,11 @@ const useHeatmapCopyView = () => {
     };
 };
 
-const useHeatmapWidthByDevice = () => {
+const useHeatmapViewportByDevice = () => {
     const deviceType = useHeatmapSettingContext((state) => state.deviceType);
     const width = useMemo(() => calcWidthByDeviceType(deviceType), [deviceType]);
-    return width;
+    const height = useMemo(() => calcHeightByDeviceType(deviceType), [deviceType]);
+    return { width, height };
     function calcWidthByDeviceType(deviceType) {
         if (!deviceType)
             return 1440;
@@ -1543,6 +1548,20 @@ const useHeatmapWidthByDevice = () => {
                 return 375;
         }
     }
+    function calcHeightByDeviceType(deviceType) {
+        if (!deviceType)
+            return 900;
+        switch (deviceType) {
+            case EDeviceType.DesktopLarge:
+                return 1080; // 1920×1080
+            case EDeviceType.Desktop:
+                return 900; // 1440×900
+            case EDeviceType.Tablet:
+                return 1024; // 768×1024 (iPad portrait)
+            case EDeviceType.Mobile:
+                return 812; // 375×812 (iPhone X/11/12/13)
+        }
+    }
 };
 
 const useRegisterConfig = ({ shopId, isLoading, isLoadingCanvas, excludeClassNames, }) => {
@@ -1567,7 +1586,7 @@ const useRegisterConfig = ({ shopId, isLoading, isLoadingCanvas, excludeClassNam
         setIsRendering(true);
         setTimeout(() => {
             setIsRendering(false);
-        }, 100);
+        }, 500);
     }, [mode, deviceType, sidebarWidth]); // eslint-disable-line react-hooks/exhaustive-deps
     useEffect(() => {
         setIsRendering(!!isLoading);
@@ -3504,18 +3523,20 @@ const useAreaClickmap = () => {
 const useClickmap = () => {
     const vizRef = useHeatmapVizRectContext((s) => s.vizRef);
     const clickmap = useHeatmapDataContext((s) => s.clickmap);
-    const isRenderedViz = useHeatmapVizContext((s) => s.isRenderedViz);
+    const isDomLoaded = useHeatmapVizContext((s) => s.isDomLoaded);
     const start = useCallback(() => {
-        if (!vizRef || !clickmap || clickmap.length === 0 || !isRenderedViz)
+        if (!vizRef || !clickmap || clickmap.length === 0 || !isDomLoaded)
             return;
         try {
-            vizRef?.clearmap?.();
-            vizRef?.clickmap?.(clickmap);
+            requestIdleCallback(() => {
+                vizRef?.clearmap?.();
+                vizRef?.clickmap?.(clickmap);
+            }, { timeout: 300 });
         }
         catch (error) {
             console.error(`🚀 🐥 ~ useClickmap ~ error:`, error);
         }
-    }, [vizRef, clickmap, isRenderedViz]);
+    }, [vizRef, clickmap, isDomLoaded]);
     return { start };
 };
 
@@ -3523,6 +3544,7 @@ const useScrollmap = () => {
     const vizRef = useHeatmapVizRectContext((s) => s.vizRef);
     const scrollType = useHeatmapSettingContext((s) => s.scrollType);
     const scrollmap = useHeatmapDataContext((s) => s.scrollmap);
+    const isDomLoaded = useHeatmapVizContext((s) => s.isDomLoaded);
     useMemo(() => {
         switch (scrollType) {
             case EScrollType.Depth:
@@ -3536,16 +3558,18 @@ const useScrollmap = () => {
         }
     }, [scrollmap, scrollType]);
     const start = useCallback(() => {
-        if (!vizRef || !scrollmap || scrollmap.length === 0)
+        if (!vizRef || !scrollmap || scrollmap.length === 0 || !isDomLoaded)
             return;
         try {
-            vizRef?.clearmap?.();
-            vizRef?.scrollmap?.(scrollmap);
+            requestIdleCallback(() => {
+                vizRef?.clearmap?.();
+                vizRef?.scrollmap?.(scrollmap);
+            }, { timeout: 300 });
         }
         catch (error) {
             logger$4.error(`🚀 🐥 ~ useScrollmap ~ error:`, error);
         }
-    }, [vizRef, scrollmap]);
+    }, [vizRef, scrollmap, isDomLoaded]);
     return { start };
 };
 
@@ -3709,7 +3733,7 @@ const useHeatmapEffects = ({ isVisible }) => {
 };
 
 const useHeatmapElementPosition = ({ iframeRef, wrapperRef, visualizer }) => {
-    const heatmapWidth = useHeatmapWidthByDevice();
+    const viewport = useHeatmapViewportByDevice();
     const iframeHeight = useHeatmapVizRectContext((s) => s.iframeHeight);
     const widthScale = useHeatmapVizContext((s) => s.widthScale);
     const getRect = useCallback((element) => {
@@ -3737,17 +3761,17 @@ const useHeatmapElementPosition = ({ iframeRef, wrapperRef, visualizer }) => {
         const outOfBounds = adjustedTop < 0 ||
             adjustedTop > (iframeHeight || Infinity) ||
             layout.left < 0 ||
-            (typeof heatmapWidth === 'number' && layout.left > heatmapWidth);
+            (typeof viewport.width === 'number' && layout.left > viewport.width);
         if (outOfBounds)
             return null;
         return {
             left: layout.left,
             top: adjustedTop,
-            width: Math.min(layout.width, heatmapWidth || layout.width),
+            width: Math.min(layout.width, viewport.width || layout.width),
             height: layout.height,
             outOfBounds,
         };
-    }, [iframeRef, wrapperRef, visualizer, heatmapWidth, iframeHeight, widthScale]);
+    }, [iframeRef, wrapperRef, visualizer, viewport, iframeHeight, widthScale]);
     return { getRect };
 };
 
@@ -4148,7 +4172,7 @@ function flush() {
     window.__gemxPerf = getReport();
 }
 // ── Global singleton export ───────────────────────────────────────────────────
-const perf$1 = {
+const perf$2 = {
     startSession,
     endSession,
     mark: globalMark,
@@ -4941,7 +4965,7 @@ const YIELD_EVERY_RULES = 100;
  * Uses `scheduler.yield()` (Chrome 115+) when available; falls back to a
  * zero-timeout macrotask which is universally supported.
  */
-function yieldToMain() {
+function yieldToMain$1() {
     if (typeof globalThis !== 'undefined' && 'scheduler' in globalThis) {
         return globalThis.scheduler.yield();
     }
@@ -5101,7 +5125,7 @@ async function processStylesheets(ctx) {
                 rulesSinceYield++;
                 if (rulesSinceYield >= YIELD_EVERY_RULES) {
                     rulesSinceYield = 0;
-                    await yieldToMain();
+                    await yieldToMain$1();
                 }
             }
         }
@@ -5384,52 +5408,52 @@ function configure(debug) {
 }
 async function run$1(ctx, activeGlobal, shopFix) {
     // ── Phase 1: beforeProcess ────────────────────────────────────────────────
-    const t1 = perf$1.mark('phase1.beforeProcess');
+    const t1 = perf$2.mark('phase1.beforeProcess');
     for (const fix of activeGlobal) {
         if (fix.beforeProcess) {
             logger.log(`[beforeProcess] ${fix.name}`);
-            const t = perf$1.mark(`phase1.${fix.name}.beforeProcess`);
+            const t = perf$2.mark(`phase1.${fix.name}.beforeProcess`);
             await fix.beforeProcess(ctx);
-            perf$1.measure(`phase1.${fix.name}.beforeProcess`, t);
+            perf$2.measure(`phase1.${fix.name}.beforeProcess`, t);
         }
     }
     if (shopFix?.beforeProcess) {
         logger.log('[beforeProcess] shop');
-        const t = perf$1.mark('phase1.shop.beforeProcess');
+        const t = perf$2.mark('phase1.shop.beforeProcess');
         await shopFix.beforeProcess(ctx);
-        perf$1.measure('phase1.shop.beforeProcess', t);
+        perf$2.measure('phase1.shop.beforeProcess', t);
     }
-    perf$1.measure('phase1.beforeProcess', t1);
+    perf$2.measure('phase1.beforeProcess', t1);
     // ── Phase 2: process ──────────────────────────────────────────────────────
-    const t2 = perf$1.mark('phase2.process');
+    const t2 = perf$2.mark('phase2.process');
     for (const fix of activeGlobal) {
         if (fix.process) {
             logger.log(`[process] ${fix.name}`);
-            const t = perf$1.mark(`phase2.${fix.name}.process`);
+            const t = perf$2.mark(`phase2.${fix.name}.process`);
             await fix.process(ctx);
-            perf$1.measure(`phase2.${fix.name}.process`, t);
+            perf$2.measure(`phase2.${fix.name}.process`, t);
         }
     }
-    perf$1.measure('phase2.process', t2);
+    perf$2.measure('phase2.process', t2);
     // ── Phase 3: afterProcess ─────────────────────────────────────────────────
-    const t3 = perf$1.mark('phase3.afterProcess');
+    const t3 = perf$2.mark('phase3.afterProcess');
     if (shopFix?.afterProcess) {
         logger.log('[afterProcess] shop');
-        const t = perf$1.mark('phase3.shop.afterProcess');
+        const t = perf$2.mark('phase3.shop.afterProcess');
         await shopFix.afterProcess(ctx);
-        perf$1.measure('phase3.shop.afterProcess', t);
+        perf$2.measure('phase3.shop.afterProcess', t);
     }
     for (const fix of activeGlobal) {
         if (fix.afterProcess) {
             logger.log(`[afterProcess] ${fix.name}`);
-            const t = perf$1.mark(`phase3.${fix.name}.afterProcess`);
+            const t = perf$2.mark(`phase3.${fix.name}.afterProcess`);
             await fix.afterProcess(ctx);
-            perf$1.measure(`phase3.${fix.name}.afterProcess`, t);
+            perf$2.measure(`phase3.${fix.name}.afterProcess`, t);
         }
     }
-    perf$1.measure('phase3.afterProcess', t3);
+    perf$2.measure('phase3.afterProcess', t3);
     // ── Phase 4: getDimensions ────────────────────────────────────────────────
-    const t4 = perf$1.mark('phase4.getDimensions');
+    const t4 = perf$2.mark('phase4.getDimensions');
     return new Promise((resolve) => {
         requestAnimationFrame(() => {
             let dimensions = null;
@@ -5454,7 +5478,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$1.measure('phase4.getDimensions', t4);
+            perf$2.measure('phase4.getDimensions', t4);
             resolve(dimensions);
         });
     });
@@ -5582,14 +5606,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$1.mark('viewport.run');
+    const tRun = perf$2.mark('viewport.run');
     try {
         const result = await run$1(ctx, activeGlobal, s.shopFix);
-        perf$1.measure('viewport.run', tRun);
+        perf$2.measure('viewport.run', tRun);
         return result;
     }
     catch (err) {
-        perf$1.measure('viewport.run', tRun);
+        perf$2.measure('viewport.run', tRun);
         s.logger.error('Critical error:', err);
         return { height: s.doc.body?.scrollHeight || 1000, width: s.doc.body?.scrollWidth || 1000 };
     }
@@ -5639,22 +5663,22 @@ async function process(s) {
         return;
     }
     const sessionId = `render-${Date.now()}`;
-    perf$1.startSession(sessionId);
-    const t0 = perf$1.mark('orchestrator.process');
+    perf$2.startSession(sessionId);
+    const t0 = perf$2.mark('orchestrator.process');
     try {
         s.logger.log('Processing viewport units...');
         s.viewportReplacer.start(s.iframe, s.config);
         s.navigationBlocker.start(s.iframe, { debug: s.config.debug });
         const result = await s.viewportReplacer.run();
-        perf$1.measure('orchestrator.process', t0);
-        perf$1.endSession();
+        perf$2.measure('orchestrator.process', t0);
+        perf$2.endSession();
         s.logger.log('Process completed:', result);
         s.config.onSuccess?.(result);
         dispatchDimensionsEvent(result);
     }
     catch (error) {
-        perf$1.measure('orchestrator.process', t0);
-        perf$1.endSession();
+        perf$2.measure('orchestrator.process', t0);
+        perf$2.endSession();
         s.logger.error('Failed to process:', error);
         s.config.onError?.(error);
     }
@@ -5805,13 +5829,13 @@ function useVizLiveRender() {
     const setIframeHeight = useHeatmapVizRectContext((s) => s.setIframeHeight);
     const wrapperHeight = useHeatmapVizRectContext((s) => s.wrapperHeight);
     const wrapperWidth = useHeatmapVizRectContext((s) => s.wrapperWidth);
-    const setIsRenderedViz = useHeatmapVizContext((s) => s.setIsRenderedViz);
+    const setIsDomLoaded = useHeatmapVizContext((s) => s.setIsDomLoaded);
     const htmlContent = useHeatmapLiveContext((s) => s.htmlContent);
     const targetUrl = useHeatmapLiveContext((s) => s.targetUrl);
     const deviceType = useHeatmapSettingContext((s) => s.deviceType);
     const renderMode = useHeatmapLiveContext((s) => s.renderMode);
     const storefrontPassword = useHeatmapLiveContext((s) => s.storefrontPassword);
-    useHeatmapWidthByDevice();
+    useHeatmapViewportByDevice();
     const { iframeRef, isReady } = useVizLiveIframeMsg();
     // Handle iframe rendering based on mode
     useEffect(() => {
@@ -5851,10 +5875,10 @@ function useVizLiveRender() {
         const hasContent = (renderMode === 'portal' && targetUrl) || (renderMode === 'inline' && htmlContent);
         if (!iframe || !hasContent)
             return;
-        setIsRenderedViz(true);
+        setIsDomLoaded(true);
         startIframe$1(iframe, deviceType, { width: wrapperWidth, height: wrapperHeight }, (height) => {
             height && setIframeHeight(height);
-            setIsRenderedViz(true);
+            setIsDomLoaded(true);
         });
         return () => { };
     }, [
@@ -5866,7 +5890,7 @@ function useVizLiveRender() {
         targetUrl,
         htmlContent,
         iframeRef,
-        setIsRenderedViz,
+        setIsDomLoaded,
         setIframeHeight,
     ]);
     return {
@@ -5901,6 +5925,109 @@ function startIframe$1(iframe, deviceType = EDeviceType.Desktop, rect, onSuccess
     iframeHelper.enableNavigationBlocking();
 }
 
+const DEFAULT_CONFIG = {
+    dbName: 'gx-viz-html-cache',
+    maxEntries: 20,
+    ttlMs: 24 * 60 * 60 * 1000, // 24 hours
+    cacheVersion: 3.0,
+};
+let _config = { ...DEFAULT_CONFIG };
+function getHtmlCacheConfig() {
+    return _config;
+}
+/** Build a full cache key that includes the cache version to handle invalidation. */
+function buildCacheKey(baseKey, shortCircuitStrategy) {
+    return `v${_config.cacheVersion}:${baseKey}:${shortCircuitStrategy}`;
+}
+
+const STORE_NAME = 'entries';
+const IDB_SCHEMA_VERSION = 1;
+function openDb() {
+    const { dbName } = getHtmlCacheConfig();
+    return new Promise((resolve, reject) => {
+        const req = indexedDB.open(dbName, IDB_SCHEMA_VERSION);
+        req.onupgradeneeded = () => {
+            const db = req.result;
+            if (!db.objectStoreNames.contains(STORE_NAME)) {
+                const store = db.createObjectStore(STORE_NAME, { keyPath: 'key' });
+                store.createIndex('timestamp', 'timestamp');
+            }
+        };
+        req.onsuccess = () => resolve(req.result);
+        req.onerror = () => reject(req.error);
+    });
+}
+async function evict(db) {
+    const { maxEntries } = getHtmlCacheConfig();
+    return new Promise((resolve) => {
+        const tx = db.transaction(STORE_NAME, 'readwrite');
+        const store = tx.objectStore(STORE_NAME);
+        const countReq = store.count();
+        countReq.onsuccess = () => {
+            if (countReq.result <= maxEntries) {
+                resolve();
+                return;
+            }
+            const idx = store.index('timestamp');
+            const cursorReq = idx.openCursor();
+            let toDelete = countReq.result - maxEntries;
+            cursorReq.onsuccess = () => {
+                const cursor = cursorReq.result;
+                if (cursor && toDelete > 0) {
+                    cursor.delete();
+                    toDelete--;
+                    cursor.continue();
+                }
+                else {
+                    resolve();
+                }
+            };
+            cursorReq.onerror = () => resolve();
+        };
+        countReq.onerror = () => resolve();
+    });
+}
+const htmlCache = {
+    async get(key) {
+        try {
+            const { ttlMs } = getHtmlCacheConfig();
+            const db = await openDb();
+            return new Promise((resolve) => {
+                const tx = db.transaction(STORE_NAME, 'readonly');
+                const req = tx.objectStore(STORE_NAME).get(key);
+                req.onsuccess = () => {
+                    const entry = req.result;
+                    if (!entry || Date.now() - entry.timestamp > ttlMs) {
+                        resolve(null);
+                    }
+                    else {
+                        resolve(entry);
+                    }
+                };
+                req.onerror = () => resolve(null);
+            });
+        }
+        catch {
+            return null;
+        }
+    },
+    async set(entry) {
+        try {
+            const db = await openDb();
+            await new Promise((resolve, reject) => {
+                const tx = db.transaction(STORE_NAME, 'readwrite');
+                tx.objectStore(STORE_NAME).put(entry);
+                tx.oncomplete = () => resolve();
+                tx.onerror = () => reject(tx.error);
+            });
+            await evict(db);
+        }
+        catch {
+            // ignore cache write errors
+        }
+    },
+};
+
 const CANVAS_ID = 'clarity-heatmap-canvas';
 const ATTENTION_HUES = [240, 210, 180, 150, 120, 90, 60, 30, 0];
 const CANVAS_MAX_HEIGHT = 65535;
@@ -6109,6 +6236,250 @@ class AttentionMapRenderer {
     };
 }
 
+var Event;
+(function (Event) {
+    /* Data */
+    Event[Event["Metric"] = 0] = "Metric";
+    Event[Event["Dimension"] = 1] = "Dimension";
+    Event[Event["Upload"] = 2] = "Upload";
+    Event[Event["Upgrade"] = 3] = "Upgrade";
+    Event[Event["Baseline"] = 4] = "Baseline";
+    Event[Event["Discover"] = 5] = "Discover";
+    Event[Event["Mutation"] = 6] = "Mutation";
+    Event[Event["Region"] = 7] = "Region";
+    Event[Event["Document"] = 8] = "Document";
+    Event[Event["Click"] = 9] = "Click";
+    Event[Event["Scroll"] = 10] = "Scroll";
+    Event[Event["Resize"] = 11] = "Resize";
+    Event[Event["MouseMove"] = 12] = "MouseMove";
+    Event[Event["MouseDown"] = 13] = "MouseDown";
+    Event[Event["MouseUp"] = 14] = "MouseUp";
+    Event[Event["MouseWheel"] = 15] = "MouseWheel";
+    Event[Event["DoubleClick"] = 16] = "DoubleClick";
+    Event[Event["TouchStart"] = 17] = "TouchStart";
+    Event[Event["TouchEnd"] = 18] = "TouchEnd";
+    Event[Event["TouchMove"] = 19] = "TouchMove";
+    Event[Event["TouchCancel"] = 20] = "TouchCancel";
+    Event[Event["Selection"] = 21] = "Selection";
+    Event[Event["Timeline"] = 22] = "Timeline";
+    Event[Event["Page"] = 23] = "Page";
+    Event[Event["Custom"] = 24] = "Custom";
+    Event[Event["Ping"] = 25] = "Ping";
+    Event[Event["Unload"] = 26] = "Unload";
+    Event[Event["Input"] = 27] = "Input";
+    Event[Event["Visibility"] = 28] = "Visibility";
+    Event[Event["Navigation"] = 29] = "Navigation";
+    /**
+     * @deprecated No longer support Network Connection
+     */
+    Event[Event["Connection"] = 30] = "Connection";
+    Event[Event["ScriptError"] = 31] = "ScriptError";
+    /**
+     * @deprecated No longer support Image Error
+     */
+    Event[Event["ImageError"] = 32] = "ImageError";
+    Event[Event["Log"] = 33] = "Log";
+    Event[Event["Variable"] = 34] = "Variable";
+    Event[Event["Limit"] = 35] = "Limit";
+    Event[Event["Summary"] = 36] = "Summary";
+    /**
+     * @deprecated No longer support Box event
+     */
+    Event[Event["Box"] = 37] = "Box";
+    Event[Event["Clipboard"] = 38] = "Clipboard";
+    Event[Event["Submit"] = 39] = "Submit";
+    Event[Event["Extract"] = 40] = "Extract";
+    Event[Event["Fraud"] = 41] = "Fraud";
+    Event[Event["Change"] = 42] = "Change";
+    Event[Event["Snapshot"] = 43] = "Snapshot";
+    Event[Event["Animation"] = 44] = "Animation";
+    Event[Event["StyleSheetAdoption"] = 45] = "StyleSheetAdoption";
+    Event[Event["StyleSheetUpdate"] = 46] = "StyleSheetUpdate";
+    Event[Event["Consent"] = 47] = "Consent";
+    Event[Event["ContextMenu"] = 48] = "ContextMenu";
+    // 49 is reserved for internal use
+    Event[Event["Focus"] = 50] = "Focus";
+    Event[Event["CustomElement"] = 51] = "CustomElement";
+    Event[Event["Chat"] = 52] = "Chat";
+    // Apps specific events
+    Event[Event["WebViewDiscover"] = 100] = "WebViewDiscover";
+    Event[Event["WebViewMutation"] = 101] = "WebViewMutation";
+    Event[Event["MutationError"] = 102] = "MutationError";
+    Event[Event["FragmentVisibility"] = 103] = "FragmentVisibility";
+    Event[Event["Keystrokes"] = 104] = "Keystrokes";
+    Event[Event["BackGesture"] = 105] = "BackGesture";
+    Event[Event["WebViewStatus"] = 106] = "WebViewStatus";
+    Event[Event["AppInstallReferrer"] = 107] = "AppInstallReferrer";
+    // 200-300 reserved for internal use
+})(Event || (Event = {}));
+
+var Constant;
+(function (Constant) {
+    Constant["Empty"] = "";
+    Constant["SvgPrefix"] = "svg:";
+    Constant["DataPrefix"] = "data:";
+    Constant["IFramePrefix"] = "iframe:";
+    Constant["SvgNamespace"] = "http://www.w3.org/2000/svg";
+    Constant["Id"] = "id";
+    Constant["Class"] = "class";
+    Constant["Style"] = "style";
+    Constant["Href"] = "href";
+    Constant["Src"] = "src";
+    Constant["Srcset"] = "srcset";
+    Constant["Hash"] = "#";
+    Constant["Dot"] = ".";
+    Constant["Separator"] = ">";
+    Constant["Tilde"] = "~";
+    Constant["Bang"] = "!";
+    Constant["Period"] = ".";
+    Constant["Comma"] = ",";
+    Constant["DataAttribute"] = "data-";
+    Constant["MaskData"] = "data-clarity-mask";
+    Constant["UnmaskData"] = "data-clarity-unmask";
+    Constant["RegionData"] = "data-clarity-region";
+    Constant["GXDialogModal"] = "gx-dialog-modal";
+    Constant["Type"] = "type";
+    Constant["Submit"] = "submit";
+    Constant["Name"] = "name";
+    Constant["Base"] = "*B";
+    Constant["SameOrigin"] = "*O";
+    Constant["Object"] = "object";
+    Constant["Function"] = "function";
+    Constant["StyleTag"] = "STYLE";
+    Constant["LinkTag"] = "LINK";
+    Constant["InputTag"] = "INPUT";
+    Constant["IFrameTag"] = "IFRAME";
+    Constant["ImageTag"] = "IMG";
+    Constant["TitleTag"] = "TITLE";
+    Constant["BodyTag"] = "BODY";
+    Constant["SvgTag"] = "svg:svg";
+    Constant["BaseTag"] = "BASE";
+    Constant["NativeCode"] = "[native code]";
+    Constant["DocumentTag"] = "*D";
+    Constant["ShadowDomTag"] = "*S";
+    Constant["PolyfillShadowDomTag"] = "*P";
+    Constant["TextTag"] = "*T";
+    Constant["SuspendMutationTag"] = "*M";
+    Constant["ChildList"] = "childList";
+    Constant["Attributes"] = "attributes";
+    Constant["CharacterData"] = "characterData";
+    Constant["Throttle"] = "throttle";
+    Constant["LoadEvent"] = "load";
+    Constant["Pixel"] = "px";
+    Constant["BorderBox"] = "border-box";
+    Constant["Value"] = "value";
+    Constant["MutationObserver"] = "MutationObserver";
+    Constant["JsonLD"] = "application/ld+json";
+    Constant["String"] = "string";
+    Constant["Number"] = "number";
+    Constant["Disable"] = "disable";
+    Constant["HTML"] = "HTML";
+    Constant["Property"] = "property";
+    Constant["Content"] = "content";
+    Constant["Generator"] = "generator";
+    Constant["ogType"] = "og:type";
+    Constant["ogTitle"] = "og:title";
+    Constant["SvgStyle"] = "svg:style";
+    Constant["StyleSheet"] = "stylesheet";
+})(Constant || (Constant = {}));
+
+var ShortCircuitStrategy;
+(function (ShortCircuitStrategy) {
+    ShortCircuitStrategy[ShortCircuitStrategy["None"] = 0] = "None";
+    ShortCircuitStrategy[ShortCircuitStrategy["HashFirstTimestamp"] = 1] = "HashFirstTimestamp";
+    ShortCircuitStrategy[ShortCircuitStrategy["HashFirstTimestampPlusBuffer"] = 2] = "HashFirstTimestampPlusBuffer";
+    ShortCircuitStrategy[ShortCircuitStrategy["HashBeforeDeleted"] = 3] = "HashBeforeDeleted";
+})(ShortCircuitStrategy || (ShortCircuitStrategy = {}));
+
+function isShadowDomNode(tag) {
+    return tag === Constant.ShadowDomTag || tag === Constant.PolyfillShadowDomTag;
+}
+/** Scan the rendered DOM (including nested shadow roots) to collect tag names of shadow host elements. */
+function collectShadowHostTags(root, tags = new Set()) {
+    root.querySelectorAll('*').forEach((el) => {
+        if (el.shadowRoot) {
+            tags.add(el.tagName);
+            collectShadowHostTags(el.shadowRoot, tags);
+        }
+    });
+    return tags;
+}
+/** Build a shadow subtree ID set from all DOM events.
+ *  Two-pass cascade to handle any event ordering:
+ *  Pass 1 — seed *S/*P node IDs.
+ *  Pass 2 — cascade: any node whose parent is in the set is also in the set (repeat until stable). */
+function buildShadowSubtreeIds(allDomEvents) {
+    const subtreeIds = new Set();
+    for (const e of allDomEvents) {
+        const data = e.data;
+        for (const node of data ?? []) {
+            if (isShadowDomNode(node.tag))
+                subtreeIds.add(node.id);
+        }
+    }
+    let changed = true;
+    while (changed) {
+        changed = false;
+        for (const e of allDomEvents) {
+            const data = e.data;
+            for (const node of data ?? []) {
+                if (!subtreeIds.has(node.id) && subtreeIds.has(node.parent)) {
+                    subtreeIds.add(node.id);
+                    changed = true;
+                }
+            }
+        }
+    }
+    return subtreeIds;
+}
+function filterShadowNodes(data, subtreeIds, shadowHostTags) {
+    return (data?.filter((node) => {
+        if (isShadowDomNode(node.tag))
+            return true;
+        if (shadowHostTags.has(node.tag ?? '') && subtreeIds.has(node.parent))
+            return true;
+        return subtreeIds.has(node.id);
+    }) ?? []);
+}
+/** Extract shadow DOM nodes from merged.dom (initial Discover event, processed by setup()).
+ *  Returns a filtered copy of the dom event, or null if no shadow DOM present. */
+function extractSpecialDom(dom, events, shadowHostTags) {
+    const mutationEvents = events.filter((e) => e.event === Event.Mutation);
+    const subtreeIds = buildShadowSubtreeIds([dom, ...mutationEvents]);
+    const shadowNodes = filterShadowNodes(dom.data, subtreeIds, shadowHostTags);
+    return shadowNodes.length ? { ...dom, data: shadowNodes } : null;
+}
+/** Extract shadow DOM mutations + StyleSheet + CustomElement events from merged.events. */
+function extractSpecialEvents(events, dom, shadowHostTags) {
+    const mutationEvents = events.filter((e) => e.event === Event.Mutation);
+    const subtreeIds = buildShadowSubtreeIds([dom, ...mutationEvents]);
+    const result = [];
+    for (const e of events) {
+        const ev = e.event;
+        if (ev === Event.StyleSheetAdoption ||
+            ev === Event.StyleSheetUpdate ||
+            ev === Event.CustomElement) {
+            result.push(e);
+            continue;
+        }
+        if (ev === Event.Mutation) {
+            const shadowNodes = filterShadowNodes(e.data, subtreeIds, shadowHostTags);
+            if (shadowNodes.length)
+                result.push({ ...e, data: shadowNodes });
+        }
+    }
+    return result;
+}
+
+const YIELD_INTERVAL_MS = 16;
+async function yieldToMain() {
+    if ('scheduler' in globalThis && typeof globalThis.scheduler?.yield === 'function') {
+        await globalThis.scheduler.yield();
+    }
+    else {
+        await new Promise((resolve) => setTimeout(resolve, 0));
+    }
+}
 class GXVisualizer extends Visualizer {
     attentionMap;
     originalClearmap;
@@ -6120,6 +6491,7 @@ 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();
@@ -6131,6 +6503,99 @@ class GXVisualizer extends Visualizer {
         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;
+                }
+            }
+        }
+    };
+    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);
+            }
+        }
+        return this;
+    };
+    htmlCached = async (cacheKey, decoded, target, portalCanvasId, hash = '', useproxy, logerror, shortCircuitStrategy = 0) => {
+        if (!decoded || decoded.length === 0 || !target)
+            return this;
+        const fullKey = buildCacheKey(cacheKey, 0);
+        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);
+                return this;
+            }
+            catch (e) {
+                if (logerror)
+                    logerror(e);
+            }
+        }
+        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);
+            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(),
+            });
+        }
+        catch (e) {
+            if (logerror)
+                logerror(e);
+        }
+        return this;
+    };
     /**
      * Render attention/engagement map.
      * @param attentionData - Array of attention data points with start/end element hashes and time spent
@@ -6143,93 +6608,72 @@ class GXVisualizer extends Visualizer {
     };
 }
 
-const perf = createPerfTimer('Render');
-const useHeatmapRender = () => {
-    const viewId = useViewIdContext();
-    const data = useHeatmapDataContext((s) => s.data);
+const perf$1 = createPerfTimer('Render');
+const useHeatmapIframeProcessor = () => {
     const shopId = useHeatmapConfigStore((s) => s.shopId);
-    const excludeClassNames = useHeatmapConfigStore((s) => s.excludeClassNames);
-    const vizRef = useHeatmapVizRectContext((s) => s.vizRef);
-    const setVizRef = useHeatmapVizRectContext((s) => s.setVizRef);
-    const setIframeHeight = useHeatmapVizRectContext((s) => s.setIframeHeight);
-    const setIsRenderedViz = useHeatmapVizContext((s) => s.setIsRenderedViz);
-    const wrapperHeight = useHeatmapVizRectContext((s) => s.wrapperHeight);
-    const contentWidth = useHeatmapWidthByDevice();
     const deviceType = useHeatmapSettingContext((s) => s.deviceType);
-    const iframeRef = useRef(null);
+    const viewport = useHeatmapViewportByDevice();
+    const setIframeHeight = useHeatmapVizRectContext((s) => s.setIframeHeight);
+    const setIsDomLoaded = useHeatmapVizContext((s) => s.setIsDomLoaded);
     const helperRef = useRef(null);
-    const abortRef = useRef(null);
-    const pendingDataRef = useRef(null);
-    const wrapperHeightRef = useRef(wrapperHeight);
-    wrapperHeightRef.current = wrapperHeight;
-    const contentWidthRef = useRef(contentWidth);
-    contentWidthRef.current = contentWidth;
-    const renderHeatmap = useCallback(async (payloads) => {
-        if (contentWidthRef.current === 0 || wrapperHeightRef.current === 0) {
-            pendingDataRef.current = payloads;
+    const pendingRef = useRef(null);
+    const reset = useCallback(() => {
+        pendingRef.current = null;
+    }, []);
+    const run = useCallback((iframe, t0, abort) => {
+        if (viewport.width === 0 || viewport.height === 0) {
+            pendingRef.current = { iframe, t0, abort };
             return;
         }
-        pendingDataRef.current = null;
-        if (!payloads || payloads.length === 0)
-            return;
-        const iframe = iframeRef.current;
-        if (!iframe?.contentWindow)
-            return;
-        abortRef.current?.abort();
-        const abort = new AbortController();
-        abortRef.current = abort;
-        const t0 = perf.mark('renderHeatmap start');
-        const visualizer = vizRef ?? new GXVisualizer();
-        if (!vizRef)
-            setVizRef(visualizer);
-        visualizer.configure({ excludeClassNames });
-        setIsRenderedViz(false);
-        await perf.wrap('visualizer.html', () => visualizer.html(payloads, iframe.contentWindow, viewId));
-        if (abort.signal.aborted)
-            return;
-        const size = { width: contentWidthRef.current, height: wrapperHeightRef.current };
         startIframe({
             helperRef,
             iframe,
             shopId,
             deviceType,
-            size,
+            size: viewport,
             t0,
             onSuccess: (height) => {
                 if (abort.signal.aborted)
                     return;
                 if (height)
                     setIframeHeight(height);
-                setIsRenderedViz(true);
+                setIsDomLoaded(true);
             },
         });
     }, [deviceType]);
+    // Retry when dims become available
     useEffect(() => {
-        if (!data || data.length === 0)
+        if (viewport.width === 0 || viewport.height === 0)
             return;
-        const decoded = decodeArrayClarity(data);
-        renderHeatmap(decoded);
-        return () => { };
-    }, [data, renderHeatmap]);
-    // Retry pending render when dimensions become available
-    useEffect(() => {
-        if (contentWidth === 0 || wrapperHeight === 0)
+        if (!pendingRef.current)
             return;
-        if (!pendingDataRef.current)
+        const { iframe, t0, abort } = pendingRef.current;
+        pendingRef.current = null;
+        if (abort.signal.aborted)
             return;
-        const pending = pendingDataRef.current;
-        pendingDataRef.current = null;
-        renderHeatmap(pending);
-    }, [contentWidth, wrapperHeight, renderHeatmap]);
+        startIframe({
+            helperRef,
+            iframe,
+            shopId,
+            deviceType,
+            size: viewport,
+            t0,
+            onSuccess: (height) => {
+                if (abort.signal.aborted)
+                    return;
+                if (height)
+                    setIframeHeight(height);
+                setIsDomLoaded(true);
+            },
+        });
+    }, [viewport]); // eslint-disable-line react-hooks/exhaustive-deps
     useEffect(() => {
         return () => {
-            setVizRef(null);
-            abortRef.current?.abort();
             helperRef.current?.stop();
             helperRef.current = null;
         };
-    }, [setVizRef]);
-    return { iframeRef };
+    }, []);
+    return { run, reset };
 };
 // ── Helpers ───────────────────────────────────────────────────────────────────
 function startIframe({ helperRef, iframe, shopId, deviceType = EDeviceType.Desktop, size, t0, onSuccess, }) {
@@ -6238,7 +6682,7 @@ function startIframe({ helperRef, iframe, shopId, deviceType = EDeviceType.Deskt
     if (docHeight === 0)
         return;
     helperRef.current?.stop();
-    const tHelper = perf.mark('IframeHelper.start');
+    const tHelper = perf$1.mark('IframeHelper.start');
     const helper = createIframeHelper();
     helperRef.current = helper;
     helper.start({
@@ -6249,17 +6693,81 @@ function startIframe({ helperRef, iframe, shopId, deviceType = EDeviceType.Deskt
         debug: true,
         shopId,
         onSuccess: (data) => {
-            perf.measure('IframeHelper processing', tHelper);
-            perf.measure('Total render', t0);
+            perf$1.measure('IframeHelper processing', tHelper);
+            perf$1.measure('Total render', t0);
             iframe.style.height = `${data.height}px`;
             onSuccess(data.height);
         },
     });
 }
 
+const EShortCircuitStrategy = {
+    None: 0,
+    HashFirstTimestamp: 1,
+    HashFirstTimestampPlusBuffer: 2,
+    HashBeforeDeleted: 3,
+};
+const perf = createPerfTimer('Render');
+const useHeatmapRenderDom = () => {
+    const viewId = useViewIdContext();
+    const data = useHeatmapDataContext((s) => s.data);
+    const excludeClassNames = useHeatmapConfigStore((s) => s.excludeClassNames);
+    const setVizRef = useHeatmapVizRectContext((s) => s.setVizRef);
+    const vizRef = useHeatmapVizRectContext((s) => s.vizRef);
+    const setIsDomLoaded = useHeatmapVizContext((s) => s.setIsDomLoaded);
+    const deviceType = useHeatmapSettingContext((s) => s.deviceType);
+    const heatmapType = useHeatmapSettingContext((s) => s.heatmapType);
+    const elementToShow = useHeatmapDataContext((s) => s.dataInfo?.elementToShow);
+    const dataHash = useHeatmapDataContext((s) => s.dataHash);
+    const iframeRef = useRef(null);
+    const abortRef = useRef(null);
+    const elementToShowRef = useRef(null);
+    const dataHashRef = useRef(null);
+    const heatmapTypeRef = useRef(heatmapType);
+    elementToShowRef.current = elementToShow ?? null;
+    dataHashRef.current = dataHash ?? null;
+    heatmapTypeRef.current = heatmapType;
+    const { run: runIframeSetup, reset: resetIframeSetup } = useHeatmapIframeProcessor();
+    const renderHeatmap = useCallback(async (payloads) => {
+        if (!payloads || payloads.length === 0)
+            return;
+        const iframe = iframeRef.current;
+        const contentWindow = iframe?.contentWindow;
+        if (!contentWindow)
+            return;
+        abortRef.current?.abort();
+        const abort = new AbortController();
+        abortRef.current = abort;
+        resetIframeSetup();
+        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));
+        if (abort.signal.aborted)
+            return;
+        // Phase 2: iframe setup — deferred to useIframeSetup (handles dims dependency)
+        runIframeSetup(iframe, t0, abort);
+    }, [deviceType]);
+    useEffect(() => {
+        if (!data || data.length === 0)
+            return;
+        renderHeatmap(decodeArrayClarity(data));
+    }, [data, renderHeatmap]);
+    return { iframeRef };
+};
+
 const useReplayRender = () => {
     const data = useHeatmapDataContext((s) => s.data);
-    const setIsRenderedViz = useHeatmapVizContext((s) => s.setIsRenderedViz);
+    const setIsDomLoaded = useHeatmapVizContext((s) => s.setIsDomLoaded);
     const setIframeHeight = useHeatmapVizRectContext((s) => s.setIframeHeight);
     const visualizerRef = useRef(null);
     const iframeRef = useRef(null);
@@ -6279,7 +6787,7 @@ const useReplayRender = () => {
             version: envelope.version,
             onresize: (height) => {
                 height && setIframeHeight(height);
-                setIsRenderedViz(true);
+                setIsDomLoaded(true);
             },
             mobile,
             vNext: true,
@@ -6382,10 +6890,12 @@ const useReplayRender = () => {
 const useHeatmapRenderByMode = (mode) => {
     const heatmapResult = useMemo(() => {
         switch (mode) {
-            case 'heatmap':
-                return useHeatmapRender;
-            case 'replay':
+            case EHeatmapMode.Heatmap:
+                return useHeatmapRenderDom;
+            case EHeatmapMode.Replay:
                 return useReplayRender;
+            default:
+                return useHeatmapRenderDom;
         }
     }, [mode]);
     return heatmapResult();
@@ -6420,22 +6930,10 @@ const useContainerDimensions = (props) => {
     return { containerWidth, containerHeight };
 };
 
-const useContentDimensions = ({ iframeRef }) => {
-    const contentWidth = useHeatmapWidthByDevice();
-    useEffect(() => {
-        if (!contentWidth)
-            return;
-        if (!iframeRef.current)
-            return;
-        // iframeRef.current.width = `${contentWidth}px`;
-    }, [contentWidth, iframeRef]);
-    return { contentWidth };
-};
-
 const useObserveIframeHeight = (props) => {
     const iframeHeight = useHeatmapVizRectContext((s) => s.iframeHeight);
     const setIframeHeight = useHeatmapVizRectContext((s) => s.setIframeHeight);
-    const isRenderedViz = useHeatmapVizContext((s) => s.isRenderedViz);
+    const isDomLoaded = useHeatmapVizContext((s) => s.isDomLoaded);
     const wrapperHeight = useHeatmapVizRectContext((s) => s.wrapperHeight);
     const { iframeRef } = props;
     const resizeObserverRef = useRef(null);
@@ -6496,7 +6994,7 @@ const useObserveIframeHeight = (props) => {
     }, [updateIframeHeight]);
     useEffect(() => {
         const iframe = iframeRef.current;
-        if (!iframe || !iframeHeight || !isRenderedViz)
+        if (!iframe || !iframeHeight || !isDomLoaded)
             return;
         const setupObservers = () => {
             try {
@@ -6558,7 +7056,7 @@ const useObserveIframeHeight = (props) => {
             }
             iframe.removeEventListener('load', setupObservers);
         };
-    }, [iframeRef, iframeHeight, isRenderedViz]);
+    }, [iframeRef, iframeHeight, isDomLoaded]);
     return {};
 };
 
@@ -6571,9 +7069,10 @@ const useScaleCalculation = (props) => {
     const setScale = useHeatmapVizContext((s) => s.setScale);
     const setIsScaledToFit = useHeatmapVizContext((s) => s.setIsScaledToFit);
     const setMinZoomRatio = useHeatmapVizContext((s) => s.setMinZoomRatio);
-    const { containerWidth, containerHeight, contentWidth, contentHeight } = props;
+    const viewport = useHeatmapViewportByDevice();
+    const { containerWidth, containerHeight, iframeHeight } = props;
     const calculateScaleResult = useCallback(() => {
-        if (containerWidth > 0 && contentWidth > 0 && containerHeight > 0 && contentHeight > 0) {
+        if (containerWidth > 0 && viewport.width > 0 && containerHeight > 0 && iframeHeight > 0) {
             // 1. Calculate available dimensions
             const availableWidth = containerWidth - HEATMAP_CONFIG['padding'] * 2;
             const toolbarHeight = HEATMAP_CONFIG['heightToolbar'] || 0;
@@ -6581,12 +7080,12 @@ const useScaleCalculation = (props) => {
             const availableHeight = containerHeight - toolbarHeight - paddingTotal;
             // 2. Calculate widthScale (base scale to fit content width into container width)
             // This represents 100% zoom (fit to width)
-            const widthScale = Math.min(availableWidth / contentWidth, 1);
+            const widthScale = Math.min(availableWidth / viewport.width, 1);
             // 3. Calculate minZoomRatio (zoom ratio to fit height)
             // At minZoomRatio, the content should fit entirely within the container height
-            // Formula: contentHeight * widthScale * (minZoomRatio / 100) = availableHeight
-            // => minZoomRatio = (availableHeight / (contentHeight * widthScale)) * 100
-            const calculatedMinZoomRatio = (availableHeight / (contentHeight * widthScale)) * 100;
+            // Formula: iframeHeight * widthScale * (minZoomRatio / 100) = availableHeight
+            // => minZoomRatio = (availableHeight / (iframeHeight * widthScale)) * 100
+            const calculatedMinZoomRatio = (availableHeight / (iframeHeight * widthScale)) * 100;
             // Limit minZoomRatio: cannot exceed MAX_ZOOM_RATIO (100%)
             // and should have a reasonable minimum (e.g., 1%)
             const finalMinZoomRatio = Math.max(1, Math.min(calculatedMinZoomRatio, maxZoomRatio));
@@ -6605,7 +7104,7 @@ const useScaleCalculation = (props) => {
             setIsScaledToFit(isCurrentlyFitted);
             setMinZoomRatio(finalMinZoomRatio);
         }
-    }, [containerWidth, containerHeight, contentWidth, contentHeight, zoomRatio, maxZoomRatio]);
+    }, [containerWidth, containerHeight, viewport.width, iframeHeight, zoomRatio, maxZoomRatio]);
     useEffect(() => {
         calculateScaleResult();
     }, [calculateScaleResult]);
@@ -6638,20 +7137,15 @@ const useHeatmapScale = (props) => {
     // 1. Observe container dimensions
     const { containerWidth, containerHeight } = useContainerDimensions({ wrapperRef });
     // 2. Get content dimensions from config
-    const { contentWidth } = useContentDimensions({ iframeRef });
+    const viewport = useHeatmapViewportByDevice();
     // 3. Observe iframe height (now reacts to width changes)
     useObserveIframeHeight({ iframeRef });
     // 4. Calculate scale
-    const { widthScale } = useScaleCalculation({
-        containerWidth,
-        containerHeight,
-        contentWidth,
-        contentHeight: iframeHeight,
-    });
+    const { widthScale } = useScaleCalculation({ containerWidth, containerHeight, iframeHeight });
     // 5. Setup scroll sync
     const { handleScroll } = useScrollSync({ widthScale, iframeRef });
     const scaledHeight = iframeHeight * widthScale;
-    const scaledWidth = contentWidth * widthScale;
+    const scaledWidth = viewport.width * widthScale;
     return {
         scaledWidth,
         scaledHeight,
@@ -7690,11 +8184,11 @@ const AutoScrollHandler = ({ visualRef }) => {
 };
 
 const PortalAreaRenderer = ({ iframeRef, visualRef, shadowRoot, onAreaCreated, onAreaClick, }) => {
-    const isRenderedViz = useHeatmapVizContext((s) => s.isRenderedViz);
+    const isDomLoaded = useHeatmapVizContext((s) => s.isDomLoaded);
     const iframeDocument = iframeRef.current?.contentDocument || undefined;
     const { shadowContainer, isReady } = useAreaRendererContainer(iframeDocument, shadowRoot);
-    useAreaRectSync({ iframeDocument, shadowRoot, enabled: isReady && isRenderedViz });
-    useAreaPositionsUpdater({ iframeRef, visualRef, enabled: isReady && isRenderedViz });
+    useAreaRectSync({ iframeDocument, shadowRoot, enabled: isReady && isDomLoaded });
+    useAreaPositionsUpdater({ iframeRef, visualRef, enabled: isReady && isDomLoaded });
     if (!shadowContainer || !isReady)
         return null;
     return (jsxs(Fragment$1, { children: [jsx(AutoScrollHandler, { visualRef: visualRef }), jsx(AreasPortal, { shadowContainer: shadowContainer, onAreaClick: onAreaClick }), jsx(AreaEditHighlightPortal, { shadowContainer: shadowContainer, iframeRef: iframeRef, customShadowRoot: shadowRoot, onAreaCreated: onAreaCreated })] }));
@@ -7703,7 +8197,7 @@ const PortalAreaRenderer = ({ iframeRef, visualRef, shadowRoot, onAreaCreated, o
 const VizAreaClick = ({ iframeRef, visualRef, shadowRoot, autoCreateTopN = 10, enableOverlapResolution = true, onAreaClick, }) => {
     const clickAreas = useHeatmapDataContext((s) => s.clickAreas);
     const resetView = useHeatmapAreaClickContext((s) => s.resetView);
-    const isRenderedViz = useHeatmapVizContext((s) => s.isRenderedViz);
+    const isDomLoaded = useHeatmapVizContext((s) => s.isDomLoaded);
     useAreaTopAutoDetect({ autoCreateTopN, shadowRoot, disabled: !!clickAreas?.length });
     useAreaFilterVisible({ iframeRef, enableOverlapResolution });
     useAreaHydration({ shadowRoot });
@@ -7712,7 +8206,7 @@ const VizAreaClick = ({ iframeRef, visualRef, shadowRoot, autoCreateTopN = 10, e
             resetView();
         };
     }, []);
-    if (!iframeRef.current || !isRenderedViz)
+    if (!iframeRef.current || !isDomLoaded)
         return null;
     return (jsx(Fragment, { children: jsx(PortalAreaRenderer, { iframeRef: iframeRef, visualRef: visualRef, shadowRoot: shadowRoot, onAreaClick: onAreaClick }) }));
 };
@@ -7843,7 +8337,7 @@ const useAnchorPosition = (calloutRef, props) => {
 const ElementMissing = ({ show = true, visualRef }) => {
     const widthScale = useHeatmapVizContext((s) => s.widthScale);
     const missingElementRef = useRef(null);
-    const wrapperWidth = useHeatmapWidthByDevice();
+    const viewport = useHeatmapViewportByDevice();
     const [scrollPosition, setScrollPosition] = useState({ scrollTop: 0, scrollLeft: 0 });
     useEffect(() => {
         const container = visualRef.current;
@@ -7873,7 +8367,7 @@ const ElementMissing = ({ show = true, visualRef }) => {
     const containerHeight = containerRect?.height ?? 0;
     const topPosition = scrollTop + (containerHeight + elementHeightCenter) / 2;
     const topPositionScaled = topPosition / widthScale;
-    const leftPosition = wrapperWidth / 2;
+    const leftPosition = viewport.width / 2;
     return (jsxs(Fragment, { children: [jsx("div", { className: "missingElement-backdrop", style: {
                     position: 'absolute',
                     top: 0,
@@ -7998,7 +8492,7 @@ const ElementOverlayComponent = (props) => {
     const { type, element, onClick, elementId, hideOutline } = props;
     const widthScale = useHeatmapVizContext((s) => s.widthScale);
     const viewportHeight = useHeatmapVizRectContext((s) => s.iframeHeight);
-    const viewportWidth = useHeatmapWidthByDevice();
+    const viewport = useHeatmapViewportByDevice();
     const overlayStyle = useMemo(() => {
         const isInvalid = !element || (element.width === 0 && element.height === 0);
         if (isInvalid)
@@ -8015,7 +8509,7 @@ const ElementOverlayComponent = (props) => {
     const isHovered = type === 'hovered';
     const badgeWidthScale = isHovered ? 1 : widthScale;
     const showCallout = !!element?.mousePosition && !isHovered;
-    return (jsxs(Fragment$1, { children: [jsx("div", { onClick: onClick, className: `heatmapElement heatmapElement--${type} ${hideOutline ? 'heatmapElement--hide-outline' : ''}`, id: elementId, style: overlayStyle, children: showCallout && jsx(ElementCalloutOverlay, { ...props }) }), jsx(BackdropCanvas, { activeElement: overlayStyle, viewportWidth: viewportWidth, viewportHeight: viewportHeight, show: !isHovered }), jsx(RankBadge, { hash: element.hash, show: isHovered, index: element.rank, elementRect: element, widthScale: badgeWidthScale, clickOnElement: onClick })] }));
+    return (jsxs(Fragment$1, { children: [jsx("div", { onClick: onClick, className: `heatmapElement heatmapElement--${type} ${hideOutline ? 'heatmapElement--hide-outline' : ''}`, id: elementId, style: overlayStyle, children: showCallout && jsx(ElementCalloutOverlay, { ...props }) }), jsx(BackdropCanvas, { activeElement: overlayStyle, viewportWidth: viewport.width, viewportHeight: viewportHeight, show: !isHovered }), jsx(RankBadge, { hash: element.hash, show: isHovered, index: element.rank, elementRect: element, widthScale: badgeWidthScale, clickOnElement: onClick })] }));
 };
 ElementOverlayComponent.displayName = 'ElementOverlay';
 const ElementOverlay = memo(ElementOverlayComponent);
@@ -8080,7 +8574,7 @@ const HeatmapElements = (props) => {
 };
 
 const VizElements = ({ iframeRef, visualRef, wrapperRef }) => {
-    const contentWidth = useHeatmapWidthByDevice();
+    const viewport = useHeatmapViewportByDevice();
     const dataInfo = useHeatmapDataContext((s) => s.dataInfo);
     const vizRef = useHeatmapVizRectContext((s) => s.vizRef);
     const visualizer = {
@@ -8094,7 +8588,7 @@ const VizElements = ({ iframeRef, visualRef, wrapperRef }) => {
     if (!iframeRef.current)
         return null;
     return (jsx(HeatmapElements, { visualizer: visualizer, visualRef: visualRef, iframeRef: iframeRef, wrapperRef: wrapperRef, heatmapInfo: dataInfo, isVisible: true, positionMode: DEFAULT_POSITION_MODE, isHideTopRank: true, iframeDimensions: {
-            width: contentWidth,
+            width: viewport.width,
             position: 'absolute',
             top: 0,
             left: 0,
@@ -8358,7 +8852,7 @@ const VizLoadingCanvas = () => {
 const WrapperVisual = ({ children, visualRef, wrapperRef, scaledHeight, iframeHeight, onScroll, }) => {
     const isLoadingCanvas = useHeatmapSettingContext((state) => state.isLoadingCanvas);
     const widthScale = useHeatmapVizContext((s) => s.widthScale);
-    const contentWidth = useHeatmapWidthByDevice();
+    const viewport = useHeatmapViewportByDevice();
     const contentHeight = calcContentHeight();
     return (jsx("div", { ref: visualRef, className: "gx-hm-visual Polaris-Scrollable Polaris-Scrollable--vertical Polaris-Scrollable--scrollbarWidthThin Polaris-Scrollable--scrollbarGutterStable", onScroll: onScroll, style: {
             overflowX: 'hidden',
@@ -8380,7 +8874,7 @@ const WrapperVisual = ({ children, visualRef, wrapperRef, scaledHeight, iframeHe
                 paddingBottom: HEATMAP_STYLE['viz']['paddingBottom'],
                 background: HEATMAP_STYLE['viz']['background'],
             }, children: jsx("div", { className: "gx-hm-wrapper", ref: wrapperRef, style: {
-                    width: contentWidth,
+                    width: viewport.width,
                     height: iframeHeight,
                     transform: `scale(${widthScale})`,
                     transformOrigin: 'top center',
@@ -8393,14 +8887,14 @@ const WrapperVisual = ({ children, visualRef, wrapperRef, scaledHeight, iframeHe
     }
 };
 
-const VizDomRenderer = ({ mode = 'heatmap' }) => {
+const VizDomRenderer = ({ mode }) => {
     const viewId = useViewIdContext();
-    const contentWidth = useHeatmapWidthByDevice();
+    const viewport = useHeatmapViewportByDevice();
     const iframeHeight = useHeatmapVizRectContext((s) => s.iframeHeight);
     const wrapperHeight = useHeatmapVizRectContext((s) => s.wrapperHeight);
     const wrapperRef = useRef(null);
     const visualRef = useRef(null);
-    const { iframeRef } = useHeatmapRenderByMode(mode);
+    const { iframeRef } = useHeatmapRenderDom();
     const { scaledHeight, handleScroll } = useHeatmapScale({ wrapperRef, iframeRef, visualRef });
     useHeatmapCanvas();
     useRenderCount('VizDomRenderer');
@@ -8408,7 +8902,7 @@ const VizDomRenderer = ({ mode = 'heatmap' }) => {
         const scrollTop = e.currentTarget.scrollTop;
         handleScroll(scrollTop);
     };
-    return (jsxs(WrapperVisual, { visualRef: visualRef, wrapperRef: wrapperRef, scaledHeight: scaledHeight, onScroll: onScroll, iframeHeight: iframeHeight, children: [jsx(VizClickmap, { iframeRef: iframeRef, visualRef: visualRef, wrapperRef: wrapperRef }), jsx("iframe", { ...HEATMAP_IFRAME, id: `clarity-iframe-${viewId}`, ref: iframeRef, width: contentWidth, height: wrapperHeight }), jsx(VizLoadingCanvas, {}), jsx(VizScrollMap, { visualRef: visualRef, iframeRef: iframeRef, wrapperRef: wrapperRef })] }));
+    return (jsxs(WrapperVisual, { visualRef: visualRef, wrapperRef: wrapperRef, scaledHeight: scaledHeight, onScroll: onScroll, iframeHeight: iframeHeight, children: [jsx(VizClickmap, { iframeRef: iframeRef, visualRef: visualRef, wrapperRef: wrapperRef }), jsx("iframe", { ...HEATMAP_IFRAME, id: `clarity-iframe-${viewId}`, ref: iframeRef, width: viewport.width, height: wrapperHeight }), jsx(VizLoadingCanvas, {}), jsx(VizScrollMap, { visualRef: visualRef, iframeRef: iframeRef, wrapperRef: wrapperRef })] }));
 };
 
 const VizLoading = () => {
@@ -8425,8 +8919,9 @@ const VizLoading = () => {
 const VizDomHeatmap = () => {
     const iframeHeight = useHeatmapVizRectContext((s) => s.iframeHeight);
     const setIframeHeight = useHeatmapVizRectContext((s) => s.setIframeHeight);
+    const setWrapperHeight = useHeatmapVizRectContext((s) => s.setWrapperHeight);
     const setVizRef = useHeatmapVizRectContext((s) => s.setVizRef);
-    const setIsRenderedViz = useHeatmapVizContext((s) => s.setIsRenderedViz);
+    const setIsDomLoaded = useHeatmapVizContext((s) => s.setIsDomLoaded);
     const setSelectedElement = useHeatmapClickContext((s) => s.setSelectedElement);
     const setHoveredElement = useHeatmapHoverContext((s) => s.setHoveredElement);
     // const setSelectedArea = useHeatmapAreaClickContext((s) => s.setSelectedArea);
@@ -8436,7 +8931,8 @@ const VizDomHeatmap = () => {
     const cleanUp = () => {
         setVizRef(null);
         setIframeHeight(0);
-        setIsRenderedViz(false);
+        setWrapperHeight(0);
+        setIsDomLoaded(false);
         setSelectedElement(null);
         setHoveredElement(null);
         // setSelectedArea(null);
@@ -8445,13 +8941,13 @@ const VizDomHeatmap = () => {
     };
     useEffect(() => {
         return cleanUp;
-    }, []);
-    return (jsxs(VizContainer, { isActive: true, children: [jsx(VizDomRenderer, {}), iframeHeight === 0 && jsx(VizLoading, {})] }));
+    }, []); // eslint-disable-line react-hooks/exhaustive-deps
+    return (jsxs(VizContainer, { isActive: true, children: [jsx(VizDomRenderer, { mode: EHeatmapMode.Heatmap }), iframeHeight === 0 && jsx(VizLoading, {})] }));
 };
 VizDomHeatmap.displayName = 'VizDomHeatmap';
 
 const VizLiveRenderer = () => {
-    const contentWidth = useHeatmapWidthByDevice();
+    const viewport = useHeatmapViewportByDevice();
     const iframeHeight = useHeatmapVizRectContext((s) => s.iframeHeight);
     const wrapperHeight = useHeatmapVizRectContext((s) => s.wrapperHeight);
     const visualRef = useRef(null);
@@ -8462,7 +8958,7 @@ const VizLiveRenderer = () => {
         const scrollTop = e.currentTarget.scrollTop;
         handleScroll(scrollTop);
     };
-    return (jsx(WrapperVisual, { visualRef: visualRef, wrapperRef: wrapperRef, scaledHeight: scaledHeight, iframeHeight: iframeHeight, onScroll: onScroll, children: jsx("iframe", { ref: iframeRef, ...HEATMAP_IFRAME, width: contentWidth, height: wrapperHeight, scrolling: "no" }) }));
+    return (jsx(WrapperVisual, { visualRef: visualRef, wrapperRef: wrapperRef, scaledHeight: scaledHeight, iframeHeight: iframeHeight, onScroll: onScroll, children: jsx("iframe", { ref: iframeRef, ...HEATMAP_IFRAME, width: viewport.width, height: wrapperHeight, scrolling: "no" }) }));
 };
 
 const VizLiveHeatmap = () => {
@@ -8553,4 +9049,4 @@ const HeatmapLayout = ({ shopId, data, clickmap, clickAreas, scrollmap, attentio
     }
 };
 
-export { BACKDROP_CONFIG, DEFAULT_SIDEBAR_WIDTH, DEFAULT_VIEW_ID, DEFAULT_ZOOM_RATIO, EClickMode, EClickRankType, EClickType, EDeviceType, EHeatmapDataSource, EHeatmapMode, EHeatmapType, ELM_CALLOUT_CONFIG, EScrollType, GraphView, HEATMAP_CONFIG, HEATMAP_IFRAME, HEATMAP_STYLE, HeatmapLayout, ViewIdContext, Z_INDEX$1 as Z_INDEX, compareViewPerformance, convertViewportToIframeCoords, createStorePerformanceTracker, createViewContextHook, decodeArrayClarity, decodeClarity, downloadPerformanceReport, getCompareViewId, getMetricsByViewId, getPerformanceReportJSON, getScrollGradientColor, performanceLogger, printPerformanceSummary, scrollToElementIfNeeded, sendPerformanceReport, serializeAreas, trackStoreAction, useAreaCreation, useAreaEditMode, useAreaFilterVisible, useAreaHydration, useAreaInteraction, useAreaPositionsUpdater, useAreaRectSync, useAreaRendererContainer, useAreaTopAutoDetect, useClickedElement, useDebounceCallback, useElementCalloutVisible, useHeatmapAreaClickContext, useHeatmapCanvas, useHeatmapClickContext, useHeatmapCompareStore, useHeatmapConfigStore, useHeatmapCopyView, useHeatmapDataContext, useHeatmapEffects, useHeatmapElementPosition, useHeatmapHoverContext, useHeatmapLiveContext, useHeatmapRenderByMode, useHeatmapScale, useHeatmapScroll, useHeatmapScrollContext, useHeatmapSettingContext, useHeatmapVizContext, useHeatmapVizRectContext, useHeatmapWidthByDevice, useHoveredElement, useMeasureFunction, useRegisterConfig, useRegisterControl, useRegisterData, useRegisterHeatmap, useRenderCount, useScrollmapZones, useTrackHookCall, useViewIdContext, useVizLiveRender, useWhyDidYouUpdate, useWrapperRefHeight, useZonePositions, withPerformanceTracking };
+export { BACKDROP_CONFIG, DEFAULT_SIDEBAR_WIDTH, DEFAULT_VIEW_ID, DEFAULT_ZOOM_RATIO, EClickMode, EClickRankType, EClickType, EDeviceType, EHeatmapDataSource, EHeatmapMode, EHeatmapType, ELM_CALLOUT_CONFIG, EScrollType, GraphView, HEATMAP_CONFIG, HEATMAP_IFRAME, HEATMAP_STYLE, HeatmapLayout, ViewIdContext, Z_INDEX$1 as Z_INDEX, compareViewPerformance, convertViewportToIframeCoords, createStorePerformanceTracker, createViewContextHook, decodeArrayClarity, decodeClarity, downloadPerformanceReport, getCompareViewId, getMetricsByViewId, getPerformanceReportJSON, getScrollGradientColor, performanceLogger, printPerformanceSummary, scrollToElementIfNeeded, sendPerformanceReport, serializeAreas, trackStoreAction, useAreaCreation, useAreaEditMode, useAreaFilterVisible, useAreaHydration, useAreaInteraction, useAreaPositionsUpdater, useAreaRectSync, useAreaRendererContainer, useAreaTopAutoDetect, useClickedElement, useDebounceCallback, useElementCalloutVisible, useHeatmapAreaClickContext, useHeatmapCanvas, useHeatmapClickContext, useHeatmapCompareStore, useHeatmapConfigStore, useHeatmapCopyView, useHeatmapDataContext, useHeatmapEffects, useHeatmapElementPosition, useHeatmapHoverContext, useHeatmapLiveContext, useHeatmapRenderByMode, useHeatmapScale, useHeatmapScroll, useHeatmapScrollContext, useHeatmapSettingContext, useHeatmapViewportByDevice, useHeatmapVizContext, useHeatmapVizRectContext, useHoveredElement, useMeasureFunction, useRegisterConfig, useRegisterControl, useRegisterData, useRegisterHeatmap, useRenderCount, useScrollmapZones, useTrackHookCall, useViewIdContext, useVizLiveRender, useWhyDidYouUpdate, useWrapperRefHeight, useZonePositions, withPerformanceTracking };