@gemx-dev/heatmap-react 3.5.44 → 3.5.46

package/dist/esm/index.js

@@ -61,8 +61,6 @@ const HEATMAP_STYLE = {
     },
     wrapper: {
         padding: `${HEATMAP_CONFIG.padding}px 0`,
-        paddingBlock: `${HEATMAP_CONFIG.padding}px`,
-        paddingInline: `${HEATMAP_CONFIG.padding}px`,
     },
 };
 const DEFAULT_SIDEBAR_WIDTH = 260;
@@ -141,12 +139,15 @@ const useHeatmapVizStore = create()((set, get) => {
         isRenderViz: false,
         setIsRenderViz: (isRenderViz) => set({ isRenderViz }),
         scale: 1,
+        vizRef: undefined,
+        iframeHeight: 0,
         setScale: (scale) => set({ scale }),
+        setVizRef: (vizRef) => set({ vizRef }),
+        setIframeHeight: (iframeHeight) => set({ iframeHeight }),
     };
 });
 
 const initialState = {
-    payloads: [],
     htmlContent: '',
     wrapperHeight: 0,
     iframeHeight: 0,
@@ -155,23 +156,12 @@ const useHeatmapLiveStore = create()((set, get) => {
     return {
         ...initialState,
         reset: () => set(initialState),
-        setPayloads: (payloads) => set({ payloads }),
-        addPayload: (payload) => set((state) => ({ payloads: [...state.payloads, payload] })),
         setHtmlContent: (htmlContent) => set({ htmlContent }),
         setWrapperHeight: (wrapperHeight) => set({ wrapperHeight }),
         setIframeHeight: (iframeHeight) => set({ iframeHeight }),
     };
 });
 
-const useHeatmapSingleStore = create()((set, get) => {
-    return {
-        vizRef: null,
-        iframeHeight: 0,
-        setVizRef: (vizRef) => set({ vizRef }),
-        setIframeHeight: (iframeHeight) => set({ iframeHeight }),
-    };
-});
-
 const useRegisterConfig = () => {
     const mode = useHeatmapConfigStore((state) => state.mode);
     const width = useHeatmapConfigStore((state) => state.width);
@@ -511,311 +501,91 @@ function isElementInViewport(elementRect, visualRef, scale) {
     return elementBottom > viewportTop && elementTop < viewportBottom;
 }
 
-class IframeNavigationBlockerV2 {
-    doc;
-    win;
-    isEnabled = false;
-    showMessage = false;
-    originalWindowOpen;
-    observers = [];
-    constructor(iframe) {
-        if (!iframe.contentDocument || !iframe.contentWindow) {
-            throw new Error('Iframe document or window not accessible');
-        }
-        this.doc = iframe.contentDocument;
-        this.win = iframe.contentWindow;
-        this.originalWindowOpen = this.win.open.bind(this.win);
+const getScriptInjectCode = async () => {
+    const moduleResult = (await Promise.resolve().then(function () { return viewportReplacer; }));
+    const ActualClass = moduleResult.default;
+    const classCode = ActualClass.toString();
+    const classInstantiateCode = ActualClass.name;
+    const scriptCode = `
+    (function() {
+      'use strict';
+      ${classCode}
+      new ${classInstantiateCode}()
+    })();
+    `;
+    return scriptCode;
+};
+class ViewportUnitsFixer {
+    iframe = null;
+    config;
+    constructor(config) {
+        this.config = config;
+        this.iframe = config.iframe;
         this.init();
     }
-    init() {
-        console.log('[NavigationBlocker] Initializing...');
-        try {
-            // Chặn navigation qua links
-            this.blockLinkNavigation();
-            // Chặn form submissions
-            this.blockFormSubmissions();
-            // Chặn window.open (này an toàn)
-            this.blockWindowOpen();
-            // Chặn beforeunload để prevent navigation
-            this.blockBeforeUnload();
-            // Monitor DOM changes để block dynamic links
-            this.monitorDOMChanges();
-            // Inject CSP nếu có thể
-            this.injectCSP();
-        }
-        catch (error) {
-            console.error('[NavigationBlocker] Init error:', error);
-        }
-    }
-    blockLinkNavigation() {
-        // Sử dụng capture phase để chặn sớm nhất
-        this.doc.addEventListener('click', (e) => {
-            if (!this.isEnabled)
-                return;
-            const target = e.target;
-            const link = target.closest('a');
-            if (link) {
-                const href = link.getAttribute('href');
-                // Cho phép hash links và empty links
-                if (!href || href === '' || href === '#' || href.startsWith('#')) {
-                    console.log('[NavigationBlocker] Allowed hash navigation:', href);
-                    return;
-                }
-                // Chặn tất cả các loại navigation
-                console.log('[NavigationBlocker] Blocked link navigation to:', href);
-                e.preventDefault();
-                e.stopPropagation();
-                e.stopImmediatePropagation();
-                this.notifyBlockedNavigation(href);
-            }
-        }, true);
-        // Chặn cả middle click và right click "open in new tab"
-        this.doc.addEventListener('auxclick', (e) => {
-            if (!this.isEnabled)
-                return;
-            const target = e.target;
-            const link = target.closest('a');
-            if (link) {
-                const href = link.getAttribute('href');
-                if (href && !href.startsWith('#')) {
-                    console.log('[NavigationBlocker] Blocked auxclick navigation');
-                    e.preventDefault();
-                    e.stopPropagation();
-                    e.stopImmediatePropagation();
-                }
-            }
-        }, true);
-        // Disable tất cả links ngay từ đầu
-        this.disableAllLinks();
-    }
-    disableAllLinks() {
-        this.doc.querySelectorAll('a[href]').forEach((link) => {
-            const href = link.getAttribute('href');
-            if (href && !href.startsWith('#')) {
-                // Thêm pointer-events: none và cursor
-                link.style.cursor = 'not-allowed';
-                link.setAttribute('data-navigation-blocked', 'true');
-                // Remove href để browser không hiện preview
-                link.setAttribute('data-original-href', href);
-                link.removeAttribute('href');
-                // Hoặc giữ href nhưng disable
-                // link.setAttribute('onclick', 'return false');
-            }
-        });
-    }
-    blockFormSubmissions() {
-        this.doc.addEventListener('submit', (e) => {
-            if (!this.isEnabled)
-                return;
-            const form = e.target;
-            const action = form.getAttribute('action');
-            // Cho phép forms không có action
-            if (!action || action === '' || action === '#') {
-                console.log('[NavigationBlocker] Allowed same-page form');
-                e.preventDefault();
-                this.handleFormSubmit(form);
-                return;
-            }
-            // Chặn tất cả external submissions
-            console.log('[NavigationBlocker] Blocked form submission to:', action);
-            e.preventDefault();
-            e.stopPropagation();
-            e.stopImmediatePropagation();
-            this.notifyBlockedNavigation(action);
-        }, true);
-    }
-    blockWindowOpen() {
-        // Override window.open - đây là safe
-        this.win.open = ((...args) => {
-            if (!this.isEnabled) {
-                return this.originalWindowOpen(...args);
-            }
-            const url = args[0]?.toString() || 'popup';
-            console.log('[NavigationBlocker] Blocked window.open:', url);
-            this.notifyBlockedNavigation(url);
-            return null;
-        });
-    }
-    blockBeforeUnload() {
-        // Chặn unload
-        this.win.addEventListener('beforeunload', (e) => {
-            if (!this.isEnabled)
-                return;
-            console.log('[NavigationBlocker] Blocked beforeunload');
-            e.preventDefault();
-            e.returnValue = '';
-            return '';
-        }, true);
-        // Chặn unload
-        this.win.addEventListener('unload', (e) => {
-            if (!this.isEnabled)
-                return;
-            console.log('[NavigationBlocker] Blocked unload');
-            e.preventDefault();
-            e.stopPropagation();
-        }, true);
-        // Monitor popstate
-        this.win.addEventListener('popstate', (e) => {
-            if (!this.isEnabled)
-                return;
-            console.log('[NavigationBlocker] Blocked popstate');
-            e.preventDefault();
-            e.stopPropagation();
-        }, true);
-    }
-    monitorDOMChanges() {
-        // Monitor khi có links mới được thêm vào
-        const observer = new MutationObserver((mutations) => {
-            if (!this.isEnabled)
-                return;
-            mutations.forEach((mutation) => {
-                mutation.addedNodes.forEach((node) => {
-                    if (node.nodeType === Node.ELEMENT_NODE) {
-                        const element = node;
-                        // Nếu là link
-                        if (element.tagName === 'A') {
-                            const href = element.getAttribute('href');
-                            if (href && !href.startsWith('#')) {
-                                element.style.cursor = 'not-allowed';
-                                element.setAttribute('data-navigation-blocked', 'true');
-                                element.setAttribute('data-original-href', href);
-                                element.removeAttribute('href');
-                            }
-                        }
-                        // Tìm links trong subtree
-                        element.querySelectorAll('a[href]').forEach((link) => {
-                            const href = link.getAttribute('href');
-                            if (href && !href.startsWith('#')) {
-                                link.style.cursor = 'not-allowed';
-                                link.setAttribute('data-navigation-blocked', 'true');
-                                link.setAttribute('data-original-href', href);
-                                link.removeAttribute('href');
-                            }
-                        });
-                    }
-                });
-            });
-        });
-        observer.observe(this.doc.body, {
-            childList: true,
-            subtree: true,
-        });
-        this.observers.push(observer);
-    }
-    injectCSP() {
-        // Thêm CSP meta tag nếu chưa có (optional)
-        try {
-            const existingCSP = this.doc.querySelector('meta[http-equiv="Content-Security-Policy"]');
-            if (!existingCSP) {
-                const meta = this.doc.createElement('meta');
-                meta.httpEquiv = 'Content-Security-Policy';
-                meta.content = "navigate-to 'none'"; // Chặn tất cả navigation
-                this.doc.head.appendChild(meta);
-                console.log('[NavigationBlocker] Injected CSP');
-            }
+    async init() {
+        if (!this.iframe) {
+            console.error('[Parent] Required elements not found');
+            return;
         }
-        catch (error) {
-            console.warn('[NavigationBlocker] Could not inject CSP:', error);
+        // this.injectScriptContent = await generateIframeInjectScript();
+        window.addEventListener('message', this.handleMessage.bind(this));
+        if (this.iframe.contentDocument?.readyState === 'complete') {
+            await this.injectScript();
         }
-    }
-    handleFormSubmit(form) {
-        const formData = new FormData(form);
-        const data = {};
-        formData.forEach((value, key) => {
-            data[key] = value;
-        });
-        console.log('[NavigationBlocker] Handling form data:', data);
-        window.dispatchEvent(new CustomEvent('iframe-form-submit', {
-            detail: { form, data },
-        }));
-    }
-    notifyBlockedNavigation(url) {
-        console.warn('[NavigationBlocker] Navigation blocked to:', url);
-        window.dispatchEvent(new CustomEvent('iframe-navigation-blocked', {
-            detail: { url, timestamp: Date.now() },
-        }));
-        if (this.shouldShowMessage(url)) {
-            this.showBlockedMessage(url);
+        else {
+            this.iframe.addEventListener('load', () => this.injectScript());
         }
     }
-    shouldShowMessage(url) {
-        return !url.startsWith('#') && url !== 'reload' && url !== 'popup';
-    }
-    showBlockedMessage(url) {
-        if (!this.showMessage)
+    async injectScript() {
+        if (!this.iframe?.contentWindow || !this.iframe.contentDocument)
             return;
-        const message = this.doc.createElement('div');
-        message.style.cssText = `
-      position: fixed;
-      top: 20px;
-      right: 20px;
-      background: #ff6b6b;
-      color: white;
-      padding: 12px 20px;
-      border-radius: 8px;
-      box-shadow: 0 4px 12px rgba(0,0,0,0.15);
-      z-index: 999999;
-      font-family: system-ui, -apple-system, sans-serif;
-      font-size: 14px;
-      max-width: 300px;
-      word-break: break-word;
-      pointer-events: none;
-    `;
-        const shortUrl = url.length > 50 ? url.substring(0, 47) + '...' : url;
-        message.innerHTML = `
-      <div style="font-weight: 600; margin-bottom: 4px;">🚫 Navigation Blocked</div>
-      <div style="font-size: 12px; opacity: 0.9;">${this.escapeHtml(shortUrl)}</div>
-    `;
-        this.doc.body.appendChild(message);
-        setTimeout(() => {
-            message.style.opacity = '0';
-            message.style.transition = 'opacity 0.3s';
-            setTimeout(() => message.remove(), 300);
-        }, 3000);
-    }
-    escapeHtml(text) {
-        const div = this.doc.createElement('div');
-        div.textContent = text;
-        return div.innerHTML;
-    }
-    enable() {
-        this.isEnabled = true;
-        console.log('[NavigationBlocker] Enabled');
-    }
-    enableMessage() {
-        this.showMessage = true;
-        console.log('[NavigationBlocker] Enabled message');
-    }
-    disable() {
-        this.isEnabled = false;
-        console.log('[NavigationBlocker] Disabled');
+        const win = this.iframe.contentWindow;
+        const doc = this.iframe.contentDocument;
+        win.__viewportConfig = this.config;
+        const script = doc.createElement('script');
+        const codeInject = await getScriptInjectCode();
+        script.textContent = codeInject;
+        script.type = 'text/javascript';
+        script.id = 'viewport-replacer';
+        script.onload = () => console.log('[Parent] Viewport replacer module loaded');
+        script.onerror = () => {
+            this.config.onSuccess?.({
+                height: 1000,
+            });
+        };
+        doc.head.appendChild(script);
     }
-    disableMessage() {
-        this.showMessage = false;
-        console.log('[NavigationBlocker] Disabled message');
+    handleMessage(event) {
+        const data = event.data;
+        if (!data || data.type !== 'IFRAME_HEIGHT_CALCULATED')
+            return;
+        this.config.onSuccess?.(data);
     }
-    destroy() {
-        this.isEnabled = false;
-        this.showMessage = false;
-        // Cleanup observers
-        this.observers.forEach((observer) => observer.disconnect());
-        this.observers = [];
-        console.log('[NavigationBlocker] Destroyed');
+    recalculate() {
+        this.injectScript();
     }
 }
+function initViewportFixer(config) {
+    const fixer = new ViewportUnitsFixer(config);
+    window.viewportFixer = fixer;
+    window.addEventListener('iframe-dimensions-applied', ((e) => {
+        const ev = e;
+        console.log('Iframe dimensions finalized:', ev.detail);
+    }));
+    return fixer;
+}
 
-class IframeStyleReplacer {
-    doc;
-    win;
+class ViewportUnitsReplacer {
     config;
     regex = /([-.\d]+)(vh|svh|lvh|dvh|vw|svw|lvw|dvw)/gi;
-    constructor(iframe, config) {
-        if (!iframe.contentDocument || !iframe.contentWindow) {
-            throw new Error('Iframe document or window not accessible');
+    constructor() {
+        if (!window.__viewportConfig) {
+            throw new Error('[Iframe] Do not have viewport config');
         }
-        this.doc = iframe.contentDocument;
-        this.win = iframe.contentWindow;
-        this.config = config;
+        this.config = window.__viewportConfig;
+        console.log('[Iframe] ViewportUnitsReplacer started with config:', this.config);
+        this.init();
     }
     px(value) {
         return `${value.toFixed(2)}px`;
@@ -841,28 +611,26 @@ class IframeStyleReplacer {
     }
     processInlineStyles() {
         let count = 0;
-        this.doc.querySelectorAll('[style]').forEach((el) => {
+        document.querySelectorAll('[style]').forEach((el) => {
             const style = el.getAttribute('style');
             if (style && this.regex.test(style)) {
-                this.regex.lastIndex = 0;
                 el.setAttribute('style', this.replaceInText(style));
                 count++;
             }
         });
-        console.log(`[IframeStyleReplacer] Replaced ${count} inline style elements`);
+        console.log(`[Iframe] Replaced ${count} inline style elements`);
         return count;
     }
     processStyleTags() {
         let count = 0;
-        this.doc.querySelectorAll('style').forEach((tag) => {
+        document.querySelectorAll('style').forEach((tag) => {
             const css = tag.textContent || '';
             if (this.regex.test(css)) {
-                this.regex.lastIndex = 0;
                 tag.textContent = this.replaceInText(css);
                 count++;
             }
         });
-        console.log(`[IframeStyleReplacer] Replaced ${count} <style> tags`);
+        console.log(`[Iframe] Replaced ${count} <style> tags`);
         return count;
     }
     processRule(rule) {
@@ -873,7 +641,6 @@ class IframeStyleReplacer {
                 const prop = style[i];
                 const value = style.getPropertyValue(prop);
                 if (value && this.regex.test(value)) {
-                    this.regex.lastIndex = 0;
                     style.setProperty(prop, this.replaceInText(value), style.getPropertyPriority(prop));
                     count++;
                 }
@@ -889,11 +656,11 @@ class IframeStyleReplacer {
     }
     processStylesheets() {
         let total = 0;
-        Array.from(this.doc.styleSheets).forEach((sheet) => {
+        Array.from(document.styleSheets).forEach((sheet) => {
             try {
                 // Bỏ qua external CSS (cross-origin)
-                if (sheet.href && !sheet.href.startsWith(this.win.location.origin)) {
-                    console.log('[IframeStyleReplacer] Skipping external CSS:', sheet.href);
+                if (sheet.href && !sheet.href.startsWith(location.origin)) {
+                    console.log('[Iframe] Skipping external CSS:', sheet.href);
                     return;
                 }
                 const rules = sheet.cssRules || sheet.rules;
@@ -904,27 +671,26 @@ class IframeStyleReplacer {
                 }
             }
             catch (e) {
-                console.warn('[IframeStyleReplacer] Cannot read stylesheet (CORS?):', e.message);
+                console.warn('[Iframe] Cannot read stylesheet (CORS?):', e.message);
             }
         });
-        console.log(`[IframeStyleReplacer] Replaced ${total} rules in stylesheets`);
+        console.log(`[Iframe] Replaced ${total} rules in stylesheets`);
         return total;
     }
     async processLinkedStylesheets() {
-        const links = this.doc.querySelectorAll('link[rel="stylesheet"]');
+        const links = document.querySelectorAll('link[rel="stylesheet"]');
         let count = 0;
         for (const link of Array.from(links)) {
-            if (!link.href.startsWith(this.win.location.origin)) {
-                console.log('[IframeStyleReplacer] Skipping external CSS:', link.href);
+            if (!link.href.startsWith(location.origin)) {
+                console.log('[Iframe] Skipping external CSS:', link.href);
                 continue;
             }
             try {
                 const res = await fetch(link.href);
                 let css = await res.text();
                 if (this.regex.test(css)) {
-                    this.regex.lastIndex = 0;
                     css = this.replaceInText(css);
-                    const style = this.doc.createElement('style');
+                    const style = document.createElement('style');
                     style.textContent = css;
                     style.dataset.originalHref = link.href;
                     link.parentNode?.insertBefore(style, link);
@@ -933,25 +699,30 @@ class IframeStyleReplacer {
                 }
             }
             catch (e) {
-                console.warn('[IframeStyleReplacer] Cannot load CSS:', link.href, e);
+                console.warn('[Iframe] Cannot load CSS:', link.href, e);
             }
         }
-        console.log(`[IframeStyleReplacer] Replaced ${count} linked CSS files`);
+        console.log(`[Iframe] Replaced ${count} linked CSS files`);
         return count;
     }
     getFinalHeight() {
         // Trigger reflow
-        void this.doc.body.offsetHeight;
-        return Math.max(this.doc.body.scrollHeight, this.doc.body.offsetHeight, this.doc.documentElement.scrollHeight, this.doc.documentElement.offsetHeight, this.doc.documentElement.clientHeight);
+        void document.body.offsetHeight;
+        return Math.max(document.body.scrollHeight, document.body.offsetHeight, document.documentElement.scrollHeight, document.documentElement.offsetHeight, document.documentElement.clientHeight);
     }
-    getFinalWidth() {
-        return Math.max(this.doc.body.scrollWidth, this.doc.body.offsetWidth, this.doc.documentElement.scrollWidth, this.doc.documentElement.offsetWidth, this.doc.documentElement.clientWidth);
+    notifyParent(height) {
+        window.parent.postMessage({
+            type: 'IFRAME_HEIGHT_CALCULATED',
+            height,
+            width: document.body.scrollWidth,
+        }, '*');
+        console.log('[Iframe] Sent height to parent:', height);
     }
     async waitForResources() {
-        if ('fonts' in this.doc) {
-            await this.doc.fonts.ready;
+        if ('fonts' in document) {
+            await document.fonts.ready;
         }
-        const images = Array.from(this.doc.images).filter((img) => !img.complete);
+        const images = Array.from(document.images).filter((img) => !img.complete);
         if (images.length > 0) {
             await Promise.all(images.map((img) => new Promise((resolve) => {
                 img.onload = img.onerror = resolve;
@@ -960,131 +731,35 @@ class IframeStyleReplacer {
     }
     async run() {
         try {
-            console.log('[IframeStyleReplacer] Starting viewport units replacement...');
             this.processInlineStyles();
             this.processStyleTags();
             this.processStylesheets();
             await this.processLinkedStylesheets();
             // await this.waitForResources();
-            return await new Promise((resolve) => {
-                requestAnimationFrame(() => {
-                    const height = this.getFinalHeight();
-                    const width = this.getFinalWidth();
-                    console.log('[IframeStyleReplacer] Calculated dimensions:', { height, width });
-                    resolve({ height, width });
-                });
+            requestAnimationFrame(() => {
+                const height = this.getFinalHeight();
+                this.notifyParent(height);
             });
         }
         catch (err) {
-            console.error('[IframeStyleReplacer] Critical error:', err);
-            return {
-                height: this.doc.body.scrollHeight || 1000,
-                width: this.doc.body.scrollWidth || 1000,
-            };
+            console.error('[Iframe] Critical error:', err);
+            this.notifyParent(document.body.scrollHeight || 1000);
         }
     }
-    updateConfig(config) {
-        this.config = { ...this.config, ...config };
-    }
-}
-
-class IframeHelperFixer {
-    iframe;
-    config;
-    replacer = null;
-    navigationBlocker = null;
-    constructor(config) {
-        this.config = config;
-        this.iframe = config.iframe;
-        this.init();
-    }
-    async init() {
-        if (!this.iframe) {
-            console.error('[IframeHelper] iframe not found');
-            this.config.onError?.(new Error('iframe not found'));
-            return;
-        }
-        // Wait for iframe to load completely
-        if (this.iframe.contentDocument?.readyState === 'complete') {
-            await this.process();
+    init() {
+        if (document.readyState === 'loading') {
+            document.addEventListener('DOMContentLoaded', () => this.run());
         }
         else {
-            this.iframe.addEventListener('load', () => this.process());
-        }
-    }
-    async process() {
-        if (!this.iframe.contentDocument || !this.iframe.contentWindow) {
-            console.error('[IframeHelper] Cannot access iframe document');
-            this.config.onError?.(new Error('Cannot access iframe document'));
-            return;
-        }
-        try {
-            console.log('[IframeHelper] Processing viewport units...');
-            // Create replacer instance
-            this.replacer = new IframeStyleReplacer(this.iframe, this.config);
-            // Create navigation blocker
-            this.navigationBlocker = new IframeNavigationBlockerV2(this.iframe);
-            // Run replacement
-            const result = await this.replacer.run();
-            console.log('[IframeHelper] Process completed:', result);
-            // Trigger success callback
-            this.config.onSuccess?.(result);
-            // Dispatch custom event
-            window.dispatchEvent(new CustomEvent('iframe-dimensions-applied', {
-                detail: result,
-            }));
-        }
-        catch (error) {
-            console.error('[IframeHelper] Failed to process:', error);
-            this.config.onError?.(error);
-        }
-    }
-    async recalculate() {
-        console.log('[IframeHelper] Recalculating...');
-        await this.process();
-    }
-    updateConfig(config) {
-        this.config = { ...this.config, ...config };
-        if (this.replacer) {
-            this.replacer.updateConfig(config);
+            this.run();
         }
     }
-    enableNavigationBlocking() {
-        this.navigationBlocker?.enable();
-    }
-    enableNavigationBlockingMessage() {
-        this.navigationBlocker?.enableMessage();
-    }
-    disableNavigationBlocking() {
-        this.navigationBlocker?.disable();
-    }
-    disableNavigationBlockingMessage() {
-        this.navigationBlocker?.disableMessage();
-    }
-    destroy() {
-        this.replacer = null;
-        this.navigationBlocker?.destroy();
-        this.navigationBlocker = null;
-        console.log('[IframeHelper] Destroyed');
-    }
 }
 
-function initIframeHelperFixer(config) {
-    const fixer = new IframeHelperFixer(config);
-    window.addEventListener('iframe-dimensions-applied', ((e) => {
-        const ev = e;
-        console.log('[IframeHelper] Iframe dimensions finalized:', ev.detail);
-    }));
-    window.addEventListener('iframe-navigation-blocked', ((e) => {
-        const ev = e;
-        console.warn('[IframeHelper] Iframe tried to navigate to:', ev.detail.url);
-    }));
-    window.addEventListener('iframe-form-submit', ((e) => {
-        const ev = e;
-        console.log('[IframeHelper] Iframe form submitted:', ev.detail.data);
-    }));
-    return fixer;
-}
+var viewportReplacer = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    default: ViewportUnitsReplacer
+});
 
 const scrollToElementIfNeeded = (visualRef, rect, scale) => {
     if (!visualRef.current)
@@ -1198,7 +873,7 @@ const useHeatmapEffects = ({ isVisible, isElementSidebarOpen, setShouldShowCallo
 
 const useHeatmapElementPosition = ({ iframeRef, wrapperRef, visualizer }) => {
     const widthScale = useHeatmapVizStore((state) => state.scale);
-    const iframeHeight = useHeatmapSingleStore((state) => state.iframeHeight);
+    const iframeHeight = useHeatmapVizStore((state) => state.iframeHeight);
     const heatmapWidth = useHeatmapConfigStore((state) => state.width);
     return useCallback((element) => {
         const hash = element?.hash;
@@ -1246,179 +921,6 @@ const debounce = (fn, delay) => {
     };
 };
 
-// ===================== CONSTANTS =====================
-const HEATMAP_ELEMENT_ATTRIBUTE = 'data-clarity-hashalpha'; // Hoặc attribute bạn đang dùng
-// ===================== UTILITY FUNCTIONS =====================
-/**
- * Lấy bounding box tuyệt đối của element (relative to document)
- */
-function getBoundingBox(element) {
-    if (typeof element.getBoundingClientRect !== 'function') {
-        return null;
-    }
-    const rect = element.getBoundingClientRect();
-    // Lấy scroll offset (hỗ trợ cả cách cũ và mới)
-    const scrollLeft = 'pageXOffset' in window ? window.pageXOffset : document.documentElement.scrollLeft;
-    const scrollTop = 'pageYOffset' in window ? window.pageYOffset : document.documentElement.scrollTop;
-    // Kiểm tra element có kích thước hợp lệ
-    if (!rect || (rect.height === 0 && rect.width === 0)) {
-        return null;
-    }
-    // Trả về vị trí tuyệt đối
-    return {
-        left: Math.floor(rect.left + scrollLeft),
-        top: Math.floor(rect.top + scrollTop),
-        width: Math.floor(rect.width),
-        height: Math.floor(rect.height),
-    };
-}
-/**
- * Lấy tất cả elements tại tọa độ (x, y), hỗ trợ Shadow DOM
- */
-function getElementsAtPoint(documentOrShadowRoot, x, y, filterFunction, visitedShadowRoots = new Set()) {
-    // Lấy tất cả elements tại vị trí
-    const elementsAtPoint = documentOrShadowRoot.elementsFromPoint(x, y);
-    if (!filterFunction) {
-        return elementsAtPoint;
-    }
-    // Tìm element đầu tiên match với filter
-    const matchedElement = elementsAtPoint.find(filterFunction);
-    // Nếu element có Shadow DOM và chưa visit -> đệ quy vào
-    if (matchedElement?.shadowRoot && !visitedShadowRoots.has(matchedElement.shadowRoot)) {
-        visitedShadowRoots.add(matchedElement.shadowRoot);
-        return getElementsAtPoint(matchedElement.shadowRoot, x, y, filterFunction, visitedShadowRoots);
-    }
-    return elementsAtPoint;
-}
-// ===================== MAIN HOOK =====================
-function useHeatmapMouseHandler(props) {
-    const { heatmapWrapperRef, iframeRef, parentRef, heatmapInfo, scaleRatio, onElementHover } = props;
-    const handleMouseMove = useCallback((event) => {
-        // Kiểm tra tất cả refs và data cần thiết
-        if (!heatmapWrapperRef?.current ||
-            !iframeRef?.current ||
-            !iframeRef.current.contentDocument ||
-            !heatmapInfo?.elementMapInfo ||
-            !parentRef?.current) {
-            return;
-        }
-        try {
-            // Tính toán scroll position (đã scale)
-            const scrollTop = parentRef.current.scrollTop / scaleRatio;
-            console.log(`🚀 🐥 ~ useHeatmapMouseHandler ~ scrollTop:`, scrollTop);
-            // Lấy vị trí của heatmap wrapper
-            const wrapperRect = heatmapWrapperRef.current.getBoundingClientRect();
-            // Tính toán tọa độ chuột trong iframe (đã scale)
-            const mouseX = (event.clientX - wrapperRect.left) / scaleRatio;
-            const mouseY = (event.clientY - wrapperRect.top) / scaleRatio - scrollTop;
-            // Tìm elements tại vị trí chuột
-            const elementsAtPoint = getElementsAtPoint(iframeRef.current.contentDocument, Math.round(mouseX), Math.round(mouseY), 
-            // Filter: chỉ lấy elements có heatmap attribute
-            (element) => element.hasAttribute(HEATMAP_ELEMENT_ATTRIBUTE));
-            if (!elementsAtPoint || elementsAtPoint.length === 0) {
-                return;
-            }
-            // Duyệt qua các elements tìm được
-            for (let i = 0; i < elementsAtPoint.length; i++) {
-                const element = elementsAtPoint[i];
-                // Lấy hash/id của element
-                const elementHash = element.getAttribute(HEATMAP_ELEMENT_ATTRIBUTE);
-                // Kiểm tra element có data trong heatmapInfo không
-                if (elementHash && heatmapInfo.elementMapInfo[elementHash]) {
-                    const elementData = heatmapInfo.elementMapInfo[elementHash];
-                    // Lấy bounding box của element
-                    const boundingBox = getBoundingBox(element);
-                    if (boundingBox) {
-                        // Tính rank của element
-                        const rank = Array.isArray(heatmapInfo.sortedElements) && elementData
-                            ? heatmapInfo.sortedElements.indexOf(elementData) + 1
-                            : NaN;
-                        // Callback với thông tin element
-                        onElementHover({
-                            ...boundingBox,
-                            // Giới hạn width không vượt quá width của heatmap
-                            width: Math.min(boundingBox.width, heatmapInfo.width || 0),
-                            // Adjust top position với scroll
-                            top: boundingBox.top + scrollTop,
-                            // Metadata
-                            hash: elementHash,
-                            clicks: elementData.totalclicks,
-                            rank: rank,
-                            selector: elementData.selector || '',
-                        });
-                        // Dừng loop khi tìm thấy element hợp lệ đầu tiên
-                        break;
-                    }
-                }
-            }
-        }
-        catch (error) {
-            console.warn('Error handling mouse move on heatmap:', error);
-        }
-    }, [heatmapWrapperRef, iframeRef, parentRef, heatmapInfo, scaleRatio, onElementHover]);
-    return { handleMouseMove };
-}
-// ===================== EXAMPLE USAGE =====================
-/*
-import { useRef, useState } from 'react';
-
-function HeatmapComponent() {
-  const heatmapWrapperRef = useRef<HTMLDivElement>(null);
-  const iframeRef = useRef<HTMLIFrameElement>(null);
-  const parentRef = useRef<HTMLDivElement>(null);
-
-  const [hoveredElement, setHoveredElement] = useState<HoveredElementInfo | null>(null);
-
-  const heatmapInfo = {
-    width: 1920,
-    elementMapInfo: {
-      'hash123': {
-        totalclicks: 45,
-        selector: 'button.submit'
-      }
-    },
-    sortedElements: [...]
-  };
-
-  const { handleMouseMove } = useHeatmapMouseHandler({
-    heatmapWrapperRef,
-    iframeRef,
-    parentRef,
-    heatmapInfo,
-    scaleRatio: 0.8, // 80% zoom
-    onElementHover: (info) => {
-      setHoveredElement(info);
-      console.log('Hovered element:', info);
-    }
-  });
-
-  return (
-    <div ref={parentRef}>
-      <div
-        ref={heatmapWrapperRef}
-        onMouseMove={handleMouseMove}
-      >
-        <iframe ref={iframeRef} />
-
-        {hoveredElement && (
-          <div className="tooltip" style={{
-            position: 'absolute',
-            left: hoveredElement.left,
-            top: hoveredElement.top
-          }}>
-            Clicks: {hoveredElement.clicks}
-            <br />
-            Rank: #{hoveredElement.rank}
-            <br />
-            Selector: {hoveredElement.selector}
-          </div>
-        )}
-      </div>
-    </div>
-  );
-}
-*/
-
 const useHoveredElement = ({ iframeRef, getRect }) => {
     const hoveredElement = useHeatmapInteractionStore((state) => state.hoveredElement);
     const setHoveredElement = useHeatmapInteractionStore((state) => state.setHoveredElement);
@@ -1440,7 +942,7 @@ const useHoveredElement = ({ iframeRef, getRect }) => {
         const doc = iframe.contentDocument;
         const iframeRect = iframe.getBoundingClientRect();
         const { x, y } = convertViewportToIframeCoords(event.clientX, event.clientY, iframeRect, widthScale);
-        const targetElement = findTargetElement(doc, x, y, heatmapInfo);
+        const targetElement = findTargetElement(doc, x, y);
         if (!targetElement || !isValidElement(targetElement, heatmapInfo)) {
             reset();
             return;
@@ -1491,25 +993,7 @@ const convertViewportToIframeCoords = (clientX, clientY, iframeRect, scale) => {
     }
     return { x, y };
 };
-const findTargetElement = (doc, x, y, heatmapInfo) => {
-    const HEATMAP_ELEMENT_ATTRIBUTE = 'data-clarity-hashalpha';
-    const elementsAtPoint = getElementsAtPoint(doc, Math.round(x), Math.round(y), (element) => element.hasAttribute(HEATMAP_ELEMENT_ATTRIBUTE));
-    let dataElement = null;
-    for (let i = 0; i < elementsAtPoint.length; i++) {
-        const element = elementsAtPoint[i];
-        const elementHash = element.getAttribute(HEATMAP_ELEMENT_ATTRIBUTE);
-        if (elementHash && heatmapInfo.elementMapInfo?.[elementHash]) {
-            heatmapInfo.elementMapInfo[elementHash];
-            const boundingBox = getBoundingBox(element);
-            if (boundingBox) {
-                dataElement = element;
-                break;
-            }
-        }
-    }
-    if (!!dataElement) {
-        return dataElement;
-    }
+const findTargetElement = (doc, x, y) => {
     let targetElement = getElementAtPoint(doc, x, y);
     if (!targetElement) {
         targetElement = doc.elementFromPoint(x, y);
@@ -1533,9 +1017,9 @@ var MessageType;
     MessageType["GX_DOM_TRACKING_PAYLOAD"] = "GX_DOM_TRACKING_PAYLOAD";
     MessageType["CLARITY_READY"] = "CLARITY_READY";
 })(MessageType || (MessageType = {}));
-function useVizLiveIframeMsg(options = {}) {
+function useIframeMessage(options = {}) {
     const { trustedOrigins = [], onMessage } = options;
-    const addPayload = useHeatmapLiveStore((state) => state.addPayload);
+    const [payloads, setPayloads] = useState([]);
     const [isReady, setIsReady] = useState(false);
     const iframeRef = useRef(null);
     const isValidOrigin = useCallback((origin) => {
@@ -1561,9 +1045,9 @@ function useVizLiveIframeMsg(options = {}) {
         switch (message.type) {
             case MessageType.GX_DOM_TRACKING_PAYLOAD:
                 if (message.payload) {
-                    const data = decodePayloads(message.payload);
-                    if (data) {
-                        addPayload(data);
+                    const decodedPayloads = decodePayloads(message.payload);
+                    if (decodedPayloads) {
+                        setPayloads((prev) => [...prev, decodedPayloads]);
                     }
                 }
                 break;
@@ -1578,19 +1062,27 @@ function useVizLiveIframeMsg(options = {}) {
             window.removeEventListener('message', handleMessage);
         };
     }, [handleMessage]);
+    const clearPayloads = useCallback(() => {
+        setPayloads([]);
+    }, []);
+    const reset = useCallback(() => {
+        setPayloads([]);
+        setIsReady(false);
+    }, []);
     return {
         iframeRef,
+        payloads,
         isReady,
+        clearPayloads,
+        reset,
     };
 }
-
-function useVizLiveRender() {
+function useIframeRender() {
     const wrapperHeight = useHeatmapLiveStore((state) => state.wrapperHeight);
-    const setIframeHeight = useHeatmapLiveStore((state) => state.setIframeHeight);
     const contentWidth = useHeatmapConfigStore((state) => state.width);
+    const setIframeHeight = useHeatmapVizStore((state) => state.setIframeHeight);
     const htmlContent = useHeatmapLiveStore((state) => state.htmlContent);
-    const setIsRenderViz = useHeatmapVizStore((state) => state.setIsRenderViz);
-    const { iframeRef, isReady } = useVizLiveIframeMsg();
+    const { iframeRef, payloads, isReady } = useIframeMessage();
     useEffect(() => {
         if (!htmlContent || !iframeRef.current)
             return;
@@ -1610,50 +1102,50 @@ function useVizLiveRender() {
         const iframe = iframeRef.current;
         if (!iframe || !htmlContent)
             return;
-        setIsRenderViz(false);
-        reset(iframe, { width: contentWidth, height: wrapperHeight }, (height) => {
-            height && setIframeHeight(height);
-            setIsRenderViz(true);
+        reset$1(iframe, { width: contentWidth, height: wrapperHeight }, (height) => {
+            setIframeHeight(height);
         });
     }, [isReady, contentWidth, wrapperHeight]);
     return {
         iframeRef,
+        payloads,
+        isReady,
     };
 }
-function reset(iframe, rect, onSuccess) {
-    const fixer = initIframeHelperFixer({
-        targetWidth: rect.width,
-        targetHeight: rect.height,
+function reset$1(iframe, payloads, onSuccess) {
+    const viewportFixer = initViewportFixer({
+        targetWidth: payloads.width,
+        targetHeight: payloads.height,
         iframe: iframe,
         onSuccess: (data) => {
-            iframe.height = `${data.height}px`;
             onSuccess(data.height);
+            iframe.height = `${data.height}px`;
         },
     });
-    // fixer.recalculate();
-    fixer.enableNavigationBlocking();
+    viewportFixer.recalculate();
+    return iframe;
 }
 
-let visualizer = new Visualizer();
 const useHeatmapRender = () => {
     const data = useHeatmapDataStore((state) => state.data);
-    const setVizRef = useHeatmapSingleStore((state) => state.setVizRef);
+    const setVizRef = useHeatmapVizStore((state) => state.setVizRef);
     const setIsRenderViz = useHeatmapVizStore((state) => state.setIsRenderViz);
-    const setIframeHeight = useHeatmapSingleStore((state) => state.setIframeHeight);
+    const setIframeHeight = useHeatmapVizStore((state) => state.setIframeHeight);
     const iframeRef = useRef(null);
     const renderHeatmap = useCallback(async (payloads) => {
         if (!payloads || payloads.length === 0)
             return;
         setIsRenderViz(false);
+        const visualizer = new Visualizer();
         const iframe = iframeRef.current;
         if (!iframe?.contentWindow)
             return;
         await visualizer.html(payloads, iframe.contentWindow);
-        initIframe(iframe, payloads, (height) => {
+        reset(iframe, payloads, (height) => {
             height && setIframeHeight(height);
             setIsRenderViz(true);
-            setVizRef(visualizer);
         });
+        setVizRef(visualizer);
     }, []);
     useEffect(() => {
         if (!data || data.length === 0)
@@ -1667,20 +1159,21 @@ const useHeatmapRender = () => {
         iframeRef,
     };
 };
-function initIframe(iframe, payloads, onSuccess) {
+function reset(iframe, payloads, onSuccess) {
     const { size } = findLastSizeOfDom(payloads);
     const docWidth = size.width ?? 0;
     const docHeight = size.height ?? 0;
-    initIframeHelperFixer({
+    const viewportFixer = initViewportFixer({
         targetWidth: docWidth,
         targetHeight: docHeight,
         iframe: iframe,
         onSuccess: (data) => {
-            iframe.height = `${data.height}px`;
             onSuccess(data.height);
+            iframe.height = `${data.height}px`;
         },
     });
-    // fixer.recalculate();
+    viewportFixer.recalculate();
+    return iframe;
 }
 
 function isMobileDevice(userAgent) {
@@ -1865,64 +1358,30 @@ const useContentDimensions = ({ iframeRef, }) => {
     return { contentWidth };
 };
 
-const useObserveIframeHeight = (props) => {
+const useIframeHeight = (props) => {
     const { iframeRef, setIframeHeight } = props;
     const isRenderViz = useHeatmapVizStore((state) => state.isRenderViz);
     const resizeObserverRef = useRef(null);
     const mutationObserverRef = useRef(null);
-    const debounceTimerRef = useRef(null);
-    const lastHeightRef = useRef(0);
-    const animationFrameRef = useRef(null);
     const updateIframeHeight = useCallback(() => {
         const iframe = iframeRef.current;
-        if (!iframe || !setIframeHeight)
+        if (!iframe)
             return;
         try {
             const iframeDocument = iframe.contentDocument;
             const iframeBody = iframeDocument?.body;
-            const iframeDocumentElement = iframeDocument?.documentElement;
-            if (!iframeBody || !iframeDocumentElement)
+            if (!iframeBody)
                 return;
-            iframe.style.height = 'auto';
-            requestAnimationFrame(() => {
-                const bodyHeight = Math.max(iframeBody.scrollHeight, iframeBody.offsetHeight, iframeBody.clientHeight);
-                const documentHeight = Math.max(iframeDocumentElement.scrollHeight, iframeDocumentElement.offsetHeight, iframeDocumentElement.clientHeight);
-                const actualHeight = Math.max(bodyHeight, documentHeight);
-                if (actualHeight > 0) {
-                    lastHeightRef.current = actualHeight;
-                    iframe.height = `${actualHeight}px`;
-                    iframe.style.height = `${actualHeight}px`;
-                    setIframeHeight(actualHeight);
-                }
-            });
+            const bodyHeight = Math.max(iframeBody.scrollHeight, iframeBody.offsetHeight, iframeBody.clientHeight);
+            if (bodyHeight > 0) {
+                iframe.height = `${bodyHeight}px`;
+                setIframeHeight(bodyHeight);
+            }
         }
         catch (error) {
             console.warn('Cannot measure iframe content:', error);
         }
     }, [iframeRef, setIframeHeight]);
-    const debouncedUpdate = useCallback(() => {
-        // Cancel pending updates
-        if (debounceTimerRef.current) {
-            clearTimeout(debounceTimerRef.current);
-        }
-        if (animationFrameRef.current) {
-            cancelAnimationFrame(animationFrameRef.current);
-        }
-        debounceTimerRef.current = setTimeout(() => {
-            animationFrameRef.current = requestAnimationFrame(() => {
-                updateIframeHeight();
-            });
-        }, 50);
-    }, [updateIframeHeight]);
-    // Immediate update không debounce (cho ResizeObserver)
-    const immediateUpdate = useCallback(() => {
-        if (animationFrameRef.current) {
-            cancelAnimationFrame(animationFrameRef.current);
-        }
-        animationFrameRef.current = requestAnimationFrame(() => {
-            updateIframeHeight();
-        });
-    }, [updateIframeHeight]);
     useEffect(() => {
         const iframe = iframeRef.current;
         if (!iframe || !isRenderViz)
@@ -1940,24 +1399,22 @@ const useObserveIframeHeight = (props) => {
                 if (mutationObserverRef.current) {
                     mutationObserverRef.current.disconnect();
                 }
+                // ResizeObserver for size changes
                 if (typeof window.ResizeObserver !== 'undefined') {
-                    resizeObserverRef.current = new ResizeObserver(immediateUpdate);
+                    resizeObserverRef.current = new ResizeObserver(updateIframeHeight);
                     resizeObserverRef.current.observe(iframeBody);
-                    const iframeDocumentElement = iframeDocument?.documentElement;
-                    if (iframeDocumentElement) {
-                        resizeObserverRef.current.observe(iframeDocumentElement);
-                    }
                 }
+                // MutationObserver for DOM changes
                 if (typeof window.MutationObserver !== 'undefined') {
-                    mutationObserverRef.current = new MutationObserver(immediateUpdate);
+                    mutationObserverRef.current = new MutationObserver(updateIframeHeight);
                     mutationObserverRef.current.observe(iframeBody, {
                         childList: true,
                         subtree: true,
                         attributes: true,
-                        attributeFilter: ['style', 'class'],
-                        characterData: false,
+                        characterData: true,
                     });
                 }
+                // Initial measurement
                 updateIframeHeight();
             }
             catch (error) {
@@ -1971,23 +1428,15 @@ const useObserveIframeHeight = (props) => {
             iframe.addEventListener('load', setupObservers, { once: true });
         }
         return () => {
-            // Cleanup observers
             if (resizeObserverRef.current) {
                 resizeObserverRef.current.disconnect();
             }
             if (mutationObserverRef.current) {
                 mutationObserverRef.current.disconnect();
             }
-            // Cleanup timers
-            if (debounceTimerRef.current) {
-                clearTimeout(debounceTimerRef.current);
-            }
-            if (animationFrameRef.current) {
-                cancelAnimationFrame(animationFrameRef.current);
-            }
             iframe.removeEventListener('load', setupObservers);
         };
-    }, [iframeRef, isRenderViz, updateIframeHeight, debouncedUpdate, immediateUpdate]);
+    }, [iframeRef, isRenderViz, updateIframeHeight]);
     return {};
 };
 
@@ -2033,18 +1482,16 @@ const useHeatmapScale = (props) => {
     // 2. Get content dimensions from config
     const { contentWidth } = useContentDimensions({ iframeRef });
     // 3. Observe iframe height (now reacts to width changes)
-    useObserveIframeHeight({ iframeRef, setIframeHeight });
+    useIframeHeight({ iframeRef, setIframeHeight });
     // 4. Calculate scale
     const { scale } = useScaleCalculation({ containerWidth, contentWidth });
     // 5. Setup scroll sync
     const { handleScroll } = useScrollSync({ iframeRef });
-    const scaledHeight = iframeHeight * scale;
-    const scaledWidth = contentWidth * scale;
     return {
         containerWidth,
         containerHeight,
-        scaledWidth,
-        scaledHeight,
+        scaledWidth: contentWidth * scale,
+        scaledHeight: iframeHeight * scale,
         handleScroll,
     };
 };
@@ -2204,159 +1651,35 @@ const VizContainer = ({ children, setWrapperHeight }) => {
 const useClickmap = () => {
     const [isInitialized, setIsInitialized] = useState(false);
     const clickmap = useHeatmapDataStore((state) => state.clickmap);
-    const vizRef = useHeatmapSingleStore((state) => state.vizRef);
-    const start = useCallback(() => {
+    const vizRef = useHeatmapVizStore((state) => state.vizRef);
+    useEffect(() => {
         if (isInitialized)
             return;
         if (!vizRef || !clickmap || clickmap.length === 0)
             return;
-        try {
-            vizRef?.clearmap?.();
-            vizRef?.clickmap?.(clickmap);
-            setIsInitialized(true);
-        }
-        catch (error) {
-            console.error(`🚀 🐥 ~ useClickmap ~ error:`, error);
-        }
+        vizRef.clearmap();
+        vizRef?.clickmap(clickmap);
+        setIsInitialized(true);
     }, [vizRef, clickmap]);
-    return { start };
+    return {};
 };
 
-const DATA_SCROLLMAP = [
-    {
-        scrollReachY: 5,
-        cumulativeSum: 0,
-        percUsers: 0,
-    },
-    {
-        scrollReachY: 10,
-        cumulativeSum: 0,
-        percUsers: 0,
-    },
-    {
-        scrollReachY: 15,
-        cumulativeSum: 0,
-        percUsers: 0,
-    },
-    {
-        scrollReachY: 20,
-        cumulativeSum: 0,
-        percUsers: 0,
-    },
-    {
-        scrollReachY: 25,
-        cumulativeSum: 0,
-        percUsers: 0,
-    },
-    {
-        scrollReachY: 30,
-        cumulativeSum: 0,
-        percUsers: 0,
-    },
-    {
-        scrollReachY: 35,
-        cumulativeSum: 0,
-        percUsers: 0,
-    },
-    {
-        scrollReachY: 40,
-        cumulativeSum: 0,
-        percUsers: 0,
-    },
-    {
-        scrollReachY: 45,
-        cumulativeSum: 0,
-        percUsers: 0,
-    },
-    {
-        scrollReachY: 50,
-        cumulativeSum: 0,
-        percUsers: 0,
-    },
-    {
-        scrollReachY: 55,
-        cumulativeSum: 0,
-        percUsers: 0,
-    },
-    {
-        scrollReachY: 60,
-        cumulativeSum: 0,
-        percUsers: 0,
-    },
-    {
-        scrollReachY: 65,
-        cumulativeSum: 0,
-        percUsers: 0,
-    },
-    {
-        scrollReachY: 70,
-        cumulativeSum: 0,
-        percUsers: 0,
-    },
-    {
-        scrollReachY: 75,
-        cumulativeSum: 0,
-        percUsers: 0,
-    },
-    {
-        scrollReachY: 80,
-        cumulativeSum: 0,
-        percUsers: 0,
-    },
-    {
-        scrollReachY: 85,
-        cumulativeSum: 0,
-        percUsers: 0,
-    },
-    {
-        scrollReachY: 90,
-        cumulativeSum: 0,
-        percUsers: 0,
-    },
-    {
-        scrollReachY: 95,
-        cumulativeSum: 0,
-        percUsers: 0,
-    },
-    {
-        scrollReachY: 100,
-        cumulativeSum: 0,
-        percUsers: 0,
-    },
-];
 const useScrollmap = () => {
-    const vizRef = useHeatmapSingleStore((state) => state.vizRef);
-    const start = useCallback(() => {
-        // if (isInitialized) return;
-        const scrollmap = DATA_SCROLLMAP;
-        if (!vizRef || !scrollmap || scrollmap.length === 0)
-            return;
-        try {
-            vizRef?.clearmap?.();
-            vizRef?.scrollmap?.(scrollmap);
-            // setIsInitialized(true);
-        }
-        catch (error) {
-            console.error(`🚀 🐥 ~ useScrollmap ~ error:`, error);
-        }
-    }, [vizRef]);
-    return { start };
+    useHeatmapDataStore((state) => state.clickmap);
+    return {};
 };
 
 const useHeatmapVizCanvas = () => {
     const heatmapType = useHeatmapConfigStore((state) => state.heatmapType);
-    const { start: startClickmap } = useClickmap();
-    const { start: startScrollmap } = useScrollmap();
-    useEffect(() => {
+    const heatmapRender = useMemo(() => {
         switch (heatmapType) {
             case IHeatmapType.Click:
-                startClickmap();
-                break;
+                return useClickmap;
             case IHeatmapType.Scroll:
-                startClickmap();
-                break;
+                return useScrollmap;
         }
-    }, [heatmapType, startClickmap, startScrollmap]);
+    }, [heatmapType]);
+    return heatmapRender?.();
 };
 
 const CLICKED_ELEMENT_ID = 'gx-hm-clicked-element';
@@ -2419,7 +1742,7 @@ const ElementCallout = (props) => {
             window.removeEventListener('resize', handleUpdate);
             visualRef?.current?.removeEventListener('scroll', handleUpdate);
         };
-    }, [element, target, visualRef, hozOffset, alignment]);
+    }, [target, visualRef, hozOffset, alignment]);
     const calloutContent = (jsx("div", { ref: calloutRef, className: `clarity-callout clarity-callout--${position.placement} clarity-callout--align-${position.horizontalAlign}`, style: {
             position: 'fixed',
             top: position.top,
@@ -2484,8 +1807,7 @@ const ELEMENT_CALLOUT = {
     alignment: 'left',
 };
 const HeatmapElements = (props) => {
-    const iframeHeight = useHeatmapSingleStore((state) => state.iframeHeight);
-    const setHoveredElement = useHeatmapInteractionStore((state) => state.setHoveredElement);
+    const height = useHeatmapVizStore((state) => state.iframeHeight);
     const { iframeRef, wrapperRef, visualRef, visualizer, iframeDimensions, isElementSidebarOpen, isVisible = true, areDefaultRanksHidden, isSecondary, ...rest } = props;
     const getRect = useHeatmapElementPosition({
         iframeRef,
@@ -2500,27 +1822,6 @@ const HeatmapElements = (props) => {
         iframeRef,
         getRect,
     });
-    const heatmapInfo = useHeatmapDataStore((state) => state.dataInfo);
-    useHeatmapMouseHandler({
-        heatmapWrapperRef: wrapperRef,
-        iframeRef,
-        parentRef: visualRef,
-        heatmapInfo: heatmapInfo || {},
-        scaleRatio: 0.8, // 80% zoom
-        onElementHover: (info) => {
-            setHoveredElement({
-                hash: info.hash,
-                clicks: info.clicks,
-                rank: info.rank,
-                selector: info.selector,
-                top: info.top,
-                left: info.left,
-                width: info.width,
-                height: info.height,
-            });
-            console.log(`🚀 🐥 ~ HeatmapElements ~ info:`, info);
-        },
-    });
     useElementCalloutVisible({
         visualRef,
         getRect,
@@ -2536,21 +1837,14 @@ const HeatmapElements = (props) => {
     });
     if (!isVisible)
         return null;
-    return (jsxs("div", { onMouseMove: (event) => {
-            handleMouseMove(event);
-            // handleMouseMove2(event as any);
-        }, onMouseLeave: handleMouseLeave, className: "gx-hm-elements", style: { ...iframeDimensions, height: `${iframeHeight}px` }, children: [jsx(ElementMissing, { show: showMissingElement }), jsx(DefaultRankBadges, { getRect: getRect, hidden: areDefaultRanksHidden }), jsx(ElementOverlay, { type: "clicked", element: clickedElement, isSecondary: isSecondary }), jsx(ElementOverlay, { type: "hovered", element: hoveredElement, isSecondary: isSecondary, onClick: handleClick }), hoveredElement?.hash !== clickedElement?.hash && hoveredElement && (jsx(ElementCallout, { element: hoveredElement, target: `#${HOVERED_ELEMENT_ID}`, visualRef: visualRef, ...ELEMENT_CALLOUT })), shouldShowCallout && clickedElement && (jsx(ElementCallout, { element: clickedElement, target: `#${CLICKED_ELEMENT_ID}`, visualRef: visualRef, ...ELEMENT_CALLOUT }))] }));
+    return (jsxs("div", { onMouseMove: handleMouseMove, onMouseLeave: handleMouseLeave, className: "gx-hm-elements", style: { ...iframeDimensions, height }, children: [jsx(ElementMissing, { show: showMissingElement }), jsx(DefaultRankBadges, { getRect: getRect, hidden: areDefaultRanksHidden }), jsx(ElementOverlay, { type: "clicked", element: clickedElement, isSecondary: isSecondary }), jsx(ElementOverlay, { type: "hovered", element: hoveredElement, isSecondary: isSecondary, onClick: handleClick }), hoveredElement?.hash !== clickedElement?.hash && hoveredElement && (jsx(ElementCallout, { element: hoveredElement, target: `#${HOVERED_ELEMENT_ID}`, visualRef: visualRef, ...ELEMENT_CALLOUT })), shouldShowCallout && clickedElement && (jsx(ElementCallout, { element: clickedElement, target: `#${CLICKED_ELEMENT_ID}`, visualRef: visualRef, ...ELEMENT_CALLOUT }))] }));
 };
 
 const VizElements = ({ iframeRef, visualRef, wrapperRef }) => {
     const heatmapInfo = useHeatmapDataStore((state) => state.dataInfo);
-    const contentWidth = useHeatmapConfigStore((state) => state.width);
-    const vizRef = useHeatmapSingleStore((state) => state.vizRef);
+    const contentWidth = useHeatmapDataStore((state) => state.config?.width ?? 0);
     const visualizer = {
         get: (hash) => {
-            if (vizRef) {
-                return vizRef.get(hash);
-            }
             const doc = iframeRef.current?.contentDocument;
             if (!doc)
                 return null;
@@ -2610,8 +1904,8 @@ const WrapperVisual = ({ children, visualRef, wrapperRef, scaledHeight, iframeHe
 
 const VizDomRenderer = ({ mode = 'heatmap' }) => {
     const width = useHeatmapConfigStore((state) => state.width);
-    const iframeHeight = useHeatmapSingleStore((state) => state.iframeHeight);
-    const setIframeHeight = useHeatmapSingleStore((state) => state.setIframeHeight);
+    const iframeHeight = useHeatmapVizStore((state) => state.iframeHeight);
+    const setIframeHeight = useHeatmapVizStore((state) => state.setIframeHeight);
     const setSelectedElement = useHeatmapInteractionStore((state) => state.setSelectedElement);
     const wrapperRef = useRef(null);
     const visualRef = useRef(null);
@@ -2621,6 +1915,7 @@ const VizDomRenderer = ({ mode = 'heatmap' }) => {
         iframeRef,
         visualRef,
         iframeHeight,
+        setIframeHeight,
     });
     const contentWidth = width ?? 0;
     const onScroll = (e) => {
@@ -2635,7 +1930,7 @@ const VizDomRenderer = ({ mode = 'heatmap' }) => {
     useEffect(() => {
         return cleanUp;
     }, []);
-    return (jsxs(WrapperVisual, { visualRef: visualRef, wrapperRef: wrapperRef, scaledHeight: scaledHeight, onScroll: onScroll, iframeHeight: iframeHeight, children: [jsx(VizElements, { iframeRef: iframeRef, visualRef: visualRef, wrapperRef: wrapperRef }), jsx("iframe", { ref: iframeRef, ...HEATMAP_IFRAME, width: contentWidth, scrolling: "no" })] }));
+    return (jsxs(WrapperVisual, { visualRef: visualRef, wrapperRef: wrapperRef, scaledHeight: scaledHeight, onScroll: onScroll, iframeHeight: iframeHeight, children: [jsx(VizElements, { iframeRef: iframeRef, visualRef: visualRef, wrapperRef: wrapperRef }), jsx("iframe", { ref: iframeRef, ...HEATMAP_IFRAME, width: contentWidth, height: iframeHeight, scrolling: "no" })] }));
 };
 
 const VizLoading = () => {
@@ -2645,12 +1940,12 @@ const VizLoading = () => {
 const VizDomHeatmap = () => {
     const controls = useHeatmapControlStore((state) => state.controls);
     const isRendering = useHeatmapDataStore((state) => state.isRendering);
-    const iframeHeight = useHeatmapSingleStore((state) => state.iframeHeight);
-    const setIframeHeight = useHeatmapSingleStore((state) => state.setIframeHeight);
-    const setVizRef = useHeatmapSingleStore((state) => state.setVizRef);
+    const iframeHeight = useHeatmapVizStore((state) => state.iframeHeight);
+    const setIframeHeight = useHeatmapVizStore((state) => state.setIframeHeight);
+    const setVizRef = useHeatmapVizStore((state) => state.setVizRef);
     useEffect(() => {
         return () => {
-            setVizRef(null);
+            setVizRef(undefined);
             setIframeHeight(0);
         };
     }, []);
@@ -2665,7 +1960,7 @@ const VizLiveRenderer = () => {
     const setIframeHeight = useHeatmapLiveStore((state) => state.setIframeHeight);
     const visualRef = useRef(null);
     const wrapperRef = useRef(null);
-    const { iframeRef } = useVizLiveRender();
+    const { iframeRef } = useIframeRender();
     const { scaledHeight, handleScroll } = useHeatmapScale({
         wrapperRef,
         iframeRef,
@@ -2677,15 +1972,13 @@ 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={iframeHeight}
-            scrolling: "no", sandbox: "allow-scripts allow-same-origin" }) }));
+    return (jsx(WrapperVisual, { visualRef: visualRef, wrapperRef: wrapperRef, scaledHeight: scaledHeight, iframeHeight: iframeHeight, onScroll: onScroll, children: jsx("iframe", { ref: iframeRef, ...HEATMAP_IFRAME, width: contentWidth, height: iframeHeight, scrolling: "no", sandbox: "allow-scripts allow-same-origin" }) }));
 };
 
 const VizLiveHeatmap = () => {
     const controls = useHeatmapControlStore((state) => state.controls);
     const isRendering = useHeatmapDataStore((state) => state.isRendering);
-    const iframeHeight = useHeatmapLiveStore((state) => state.iframeHeight);
+    const iframeHeight = useHeatmapVizStore((state) => state.iframeHeight);
     const wrapperHeight = useHeatmapLiveStore((state) => state.wrapperHeight);
     const setWrapperHeight = useHeatmapLiveStore((state) => state.setWrapperHeight);
     const reset = useHeatmapLiveStore((state) => state.reset);
@@ -2760,4 +2053,4 @@ const HeatmapLayout = ({ data, clickmap, controls, dataInfo, }) => {
     }
 };
 
-export { GraphView, HeatmapLayout, IHeatmapType, useHeatmapConfigStore, useHeatmapDataStore, useHeatmapInteractionStore, useHeatmapLiveStore, useHeatmapVizStore };
+export { GraphView, HeatmapLayout, IHeatmapType, useHeatmapConfigStore, useHeatmapDataStore, useHeatmapInteractionStore, useHeatmapLiveStore };