@gemx-dev/heatmap-react 3.5.46 → 3.5.48

package/dist/esm/index.mjs

@@ -61,6 +61,8 @@ 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;
@@ -91,18 +93,37 @@ var IHeatmapType;
     IHeatmapType["Click"] = "click";
     IHeatmapType["Scroll"] = "scroll";
 })(IHeatmapType || (IHeatmapType = {}));
+var IClickType;
+(function (IClickType) {
+    IClickType["Total"] = "total-clicks";
+    IClickType["Rage"] = "rage-clicks";
+    IClickType["Dead"] = "dead-clicks";
+    IClickType["Error"] = "error-clicks";
+    IClickType["First"] = "first-clicks";
+    IClickType["Last"] = "last-clicks";
+})(IClickType || (IClickType = {}));
+var IScrollType;
+(function (IScrollType) {
+    IScrollType["Depth"] = "scroll-depth";
+    IScrollType["Attention"] = "attention-scroll";
+    IScrollType["Revenue"] = "revenue-scroll";
+})(IScrollType || (IScrollType = {}));
 
 const useHeatmapConfigStore = create()((set, get) => {
     return {
         mode: 'single',
         width: 1440,
         sidebarWidth: DEFAULT_SIDEBAR_WIDTH,
-        heatmapType: IHeatmapType.Click,
+        heatmapType: IHeatmapType.Scroll,
+        clickType: IClickType.Total,
+        scrollType: IScrollType.Depth,
         setMode: (mode) => set({ mode }),
         resetMode: () => set({ mode: 'single' }),
         setWidth: (width) => set({ width }),
         setSidebarWidth: (sidebarWidth) => set({ sidebarWidth }),
         setHeatmapType: (heatmapType) => set({ heatmapType }),
+        setClickType: (clickType) => set({ clickType }),
+        setScrollType: (scrollType) => set({ scrollType }),
     };
 });
 
@@ -111,11 +132,13 @@ const useHeatmapDataStore = create()((set, get) => {
         data: undefined,
         clickmap: undefined,
         dataInfo: undefined,
+        scrollmap: undefined,
         isRendering: true,
         setIsRendering: (isRendering) => set({ isRendering }),
         setDataInfo: (dataInfo) => set({ dataInfo }),
         setData: (data) => set({ data }),
         setClickmap: (clickmap) => set({ clickmap }),
+        setScrollmap: (scrollmap) => set({ scrollmap }),
     };
 });
 
@@ -138,16 +161,30 @@ const useHeatmapVizStore = create()((set, get) => {
     return {
         isRenderViz: false,
         setIsRenderViz: (isRenderViz) => set({ isRenderViz }),
+        zoomRatio: 100,
+        minZoomRatio: 10,
+        setMinZoomRatio: (minZoomRatio) => set({ minZoomRatio }),
+        setZoomRatio: (zoomRatio) => set({ zoomRatio }),
         scale: 1,
-        vizRef: undefined,
-        iframeHeight: 0,
         setScale: (scale) => set({ scale }),
-        setVizRef: (vizRef) => set({ vizRef }),
-        setIframeHeight: (iframeHeight) => set({ iframeHeight }),
+        isScaledToFit: false,
+        setIsScaledToFit: (isScaledToFit) => set({ isScaledToFit }),
+    };
+});
+
+const useHeatmapVizScrollmapStore = create()((set, get) => {
+    return {
+        zones: [],
+        hoveredZone: null,
+        showMinimap: true,
+        setZones: (zones) => set({ zones }),
+        setHoveredZone: (hoveredZone) => set({ hoveredZone }),
+        setShowMinimap: (showMinimap) => set({ showMinimap }),
     };
 });
 
 const initialState = {
+    payloads: [],
     htmlContent: '',
     wrapperHeight: 0,
     iframeHeight: 0,
@@ -156,12 +193,23 @@ 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);
@@ -209,16 +257,25 @@ const useRegisterData = (data, dataInfo) => {
     }, [dataInfo]);
 };
 
-const useRegisterHeatmap = (clickmap) => {
+const useRegisterHeatmap = ({ clickmap, scrollmap }) => {
     const setClickmap = useHeatmapDataStore((state) => state.setClickmap);
+    const setScrollmap = useHeatmapDataStore((state) => state.setScrollmap);
     const handleSetClickmap = useCallback((clickmap) => {
         if (!clickmap)
             return;
         setClickmap(clickmap);
     }, [clickmap]);
+    const handleSetScrollmap = useCallback((scrollmap) => {
+        if (!scrollmap)
+            return;
+        setScrollmap(scrollmap);
+    }, [scrollmap]);
     useEffect(() => {
         handleSetClickmap(clickmap);
     }, [clickmap]);
+    useEffect(() => {
+        handleSetScrollmap(scrollmap);
+    }, [scrollmap]);
 };
 
 const PADDING = 0;
@@ -501,91 +558,311 @@ function isElementInViewport(elementRect, visualRef, scale) {
     return elementBottom > viewportTop && elementTop < viewportBottom;
 }
 
-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;
+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);
         this.init();
     }
-    async init() {
-        if (!this.iframe) {
-            console.error('[Parent] Required elements not found');
-            return;
-        }
-        // this.injectScriptContent = await generateIframeInjectScript();
-        window.addEventListener('message', this.handleMessage.bind(this));
-        if (this.iframe.contentDocument?.readyState === 'complete') {
-            await this.injectScript();
+    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();
         }
-        else {
-            this.iframe.addEventListener('load', () => this.injectScript());
+        catch (error) {
+            console.error('[NavigationBlocker] Init error:', error);
         }
     }
-    async injectScript() {
-        if (!this.iframe?.contentWindow || !this.iframe.contentDocument)
-            return;
-        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,
+    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');
+                            }
+                        });
+                    }
+                });
             });
-        };
-        doc.head.appendChild(script);
+        });
+        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');
+            }
+        }
+        catch (error) {
+            console.warn('[NavigationBlocker] Could not inject CSP:', error);
+        }
+    }
+    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);
+        }
+    }
+    shouldShowMessage(url) {
+        return !url.startsWith('#') && url !== 'reload' && url !== 'popup';
     }
-    handleMessage(event) {
-        const data = event.data;
-        if (!data || data.type !== 'IFRAME_HEIGHT_CALCULATED')
+    showBlockedMessage(url) {
+        if (!this.showMessage)
             return;
-        this.config.onSuccess?.(data);
+        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);
     }
-    recalculate() {
-        this.injectScript();
+    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');
+    }
+    disableMessage() {
+        this.showMessage = false;
+        console.log('[NavigationBlocker] Disabled message');
+    }
+    destroy() {
+        this.isEnabled = false;
+        this.showMessage = false;
+        // Cleanup observers
+        this.observers.forEach((observer) => observer.disconnect());
+        this.observers = [];
+        console.log('[NavigationBlocker] Destroyed');
     }
-}
-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 ViewportUnitsReplacer {
+class IframeStyleReplacer {
+    doc;
+    win;
     config;
     regex = /([-.\d]+)(vh|svh|lvh|dvh|vw|svw|lvw|dvw)/gi;
-    constructor() {
-        if (!window.__viewportConfig) {
-            throw new Error('[Iframe] Do not have viewport config');
+    constructor(iframe, config) {
+        if (!iframe.contentDocument || !iframe.contentWindow) {
+            throw new Error('Iframe document or window not accessible');
         }
-        this.config = window.__viewportConfig;
-        console.log('[Iframe] ViewportUnitsReplacer started with config:', this.config);
-        this.init();
+        this.doc = iframe.contentDocument;
+        this.win = iframe.contentWindow;
+        this.config = config;
     }
     px(value) {
         return `${value.toFixed(2)}px`;
@@ -611,26 +888,28 @@ class ViewportUnitsReplacer {
     }
     processInlineStyles() {
         let count = 0;
-        document.querySelectorAll('[style]').forEach((el) => {
+        this.doc.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(`[Iframe] Replaced ${count} inline style elements`);
+        console.log(`[IframeStyleReplacer] Replaced ${count} inline style elements`);
         return count;
     }
     processStyleTags() {
         let count = 0;
-        document.querySelectorAll('style').forEach((tag) => {
+        this.doc.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(`[Iframe] Replaced ${count} <style> tags`);
+        console.log(`[IframeStyleReplacer] Replaced ${count} <style> tags`);
         return count;
     }
     processRule(rule) {
@@ -641,6 +920,7 @@ class ViewportUnitsReplacer {
                 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++;
                 }
@@ -656,11 +936,11 @@ class ViewportUnitsReplacer {
     }
     processStylesheets() {
         let total = 0;
-        Array.from(document.styleSheets).forEach((sheet) => {
+        Array.from(this.doc.styleSheets).forEach((sheet) => {
             try {
                 // Bỏ qua external CSS (cross-origin)
-                if (sheet.href && !sheet.href.startsWith(location.origin)) {
-                    console.log('[Iframe] Skipping external CSS:', sheet.href);
+                if (sheet.href && !sheet.href.startsWith(this.win.location.origin)) {
+                    console.log('[IframeStyleReplacer] Skipping external CSS:', sheet.href);
                     return;
                 }
                 const rules = sheet.cssRules || sheet.rules;
@@ -671,26 +951,27 @@ class ViewportUnitsReplacer {
                 }
             }
             catch (e) {
-                console.warn('[Iframe] Cannot read stylesheet (CORS?):', e.message);
+                console.warn('[IframeStyleReplacer] Cannot read stylesheet (CORS?):', e.message);
             }
         });
-        console.log(`[Iframe] Replaced ${total} rules in stylesheets`);
+        console.log(`[IframeStyleReplacer] Replaced ${total} rules in stylesheets`);
         return total;
     }
     async processLinkedStylesheets() {
-        const links = document.querySelectorAll('link[rel="stylesheet"]');
+        const links = this.doc.querySelectorAll('link[rel="stylesheet"]');
         let count = 0;
         for (const link of Array.from(links)) {
-            if (!link.href.startsWith(location.origin)) {
-                console.log('[Iframe] Skipping external CSS:', link.href);
+            if (!link.href.startsWith(this.win.location.origin)) {
+                console.log('[IframeStyleReplacer] 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 = document.createElement('style');
+                    const style = this.doc.createElement('style');
                     style.textContent = css;
                     style.dataset.originalHref = link.href;
                     link.parentNode?.insertBefore(style, link);
@@ -699,30 +980,25 @@ class ViewportUnitsReplacer {
                 }
             }
             catch (e) {
-                console.warn('[Iframe] Cannot load CSS:', link.href, e);
+                console.warn('[IframeStyleReplacer] Cannot load CSS:', link.href, e);
             }
         }
-        console.log(`[Iframe] Replaced ${count} linked CSS files`);
+        console.log(`[IframeStyleReplacer] Replaced ${count} linked CSS files`);
         return count;
     }
     getFinalHeight() {
         // Trigger reflow
-        void document.body.offsetHeight;
-        return Math.max(document.body.scrollHeight, document.body.offsetHeight, document.documentElement.scrollHeight, document.documentElement.offsetHeight, document.documentElement.clientHeight);
+        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);
     }
-    notifyParent(height) {
-        window.parent.postMessage({
-            type: 'IFRAME_HEIGHT_CALCULATED',
-            height,
-            width: document.body.scrollWidth,
-        }, '*');
-        console.log('[Iframe] Sent height to parent:', height);
+    getFinalWidth() {
+        return Math.max(this.doc.body.scrollWidth, this.doc.body.offsetWidth, this.doc.documentElement.scrollWidth, this.doc.documentElement.offsetWidth, this.doc.documentElement.clientWidth);
     }
     async waitForResources() {
-        if ('fonts' in document) {
-            await document.fonts.ready;
+        if ('fonts' in this.doc) {
+            await this.doc.fonts.ready;
         }
-        const images = Array.from(document.images).filter((img) => !img.complete);
+        const images = Array.from(this.doc.images).filter((img) => !img.complete);
         if (images.length > 0) {
             await Promise.all(images.map((img) => new Promise((resolve) => {
                 img.onload = img.onerror = resolve;
@@ -731,35 +1007,131 @@ class ViewportUnitsReplacer {
     }
     async run() {
         try {
+            console.log('[IframeStyleReplacer] Starting viewport units replacement...');
             this.processInlineStyles();
             this.processStyleTags();
             this.processStylesheets();
             await this.processLinkedStylesheets();
             // await this.waitForResources();
-            requestAnimationFrame(() => {
-                const height = this.getFinalHeight();
-                this.notifyParent(height);
+            return await new Promise((resolve) => {
+                requestAnimationFrame(() => {
+                    const height = this.getFinalHeight();
+                    const width = this.getFinalWidth();
+                    console.log('[IframeStyleReplacer] Calculated dimensions:', { height, width });
+                    resolve({ height, width });
+                });
             });
         }
         catch (err) {
-            console.error('[Iframe] Critical error:', err);
-            this.notifyParent(document.body.scrollHeight || 1000);
+            console.error('[IframeStyleReplacer] Critical error:', err);
+            return {
+                height: this.doc.body.scrollHeight || 1000,
+                width: this.doc.body.scrollWidth || 1000,
+            };
         }
     }
-    init() {
-        if (document.readyState === 'loading') {
-            document.addEventListener('DOMContentLoaded', () => this.run());
+    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();
         }
         else {
-            this.run();
+            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);
+        }
+    }
+    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');
+    }
 }
 
-var viewportReplacer = /*#__PURE__*/Object.freeze({
-    __proto__: null,
-    default: ViewportUnitsReplacer
-});
+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;
+}
 
 const scrollToElementIfNeeded = (visualRef, rect, scale) => {
     if (!visualRef.current)
@@ -873,7 +1245,7 @@ const useHeatmapEffects = ({ isVisible, isElementSidebarOpen, setShouldShowCallo
 
 const useHeatmapElementPosition = ({ iframeRef, wrapperRef, visualizer }) => {
     const widthScale = useHeatmapVizStore((state) => state.scale);
-    const iframeHeight = useHeatmapVizStore((state) => state.iframeHeight);
+    const iframeHeight = useHeatmapSingleStore((state) => state.iframeHeight);
     const heatmapWidth = useHeatmapConfigStore((state) => state.width);
     return useCallback((element) => {
         const hash = element?.hash;
@@ -921,6 +1293,109 @@ const debounce = (fn, delay) => {
     };
 };
 
+// ===================== 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;
+}
+// ===================== 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);
@@ -942,7 +1417,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);
+        const targetElement = findTargetElement(doc, x, y, heatmapInfo);
         if (!targetElement || !isValidElement(targetElement, heatmapInfo)) {
             reset();
             return;
@@ -993,7 +1468,25 @@ const convertViewportToIframeCoords = (clientX, clientY, iframeRect, scale) => {
     }
     return { x, y };
 };
-const findTargetElement = (doc, 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;
+    }
     let targetElement = getElementAtPoint(doc, x, y);
     if (!targetElement) {
         targetElement = doc.elementFromPoint(x, y);
@@ -1017,9 +1510,9 @@ var MessageType;
     MessageType["GX_DOM_TRACKING_PAYLOAD"] = "GX_DOM_TRACKING_PAYLOAD";
     MessageType["CLARITY_READY"] = "CLARITY_READY";
 })(MessageType || (MessageType = {}));
-function useIframeMessage(options = {}) {
+function useVizLiveIframeMsg(options = {}) {
     const { trustedOrigins = [], onMessage } = options;
-    const [payloads, setPayloads] = useState([]);
+    const addPayload = useHeatmapLiveStore((state) => state.addPayload);
     const [isReady, setIsReady] = useState(false);
     const iframeRef = useRef(null);
     const isValidOrigin = useCallback((origin) => {
@@ -1045,9 +1538,9 @@ function useIframeMessage(options = {}) {
         switch (message.type) {
             case MessageType.GX_DOM_TRACKING_PAYLOAD:
                 if (message.payload) {
-                    const decodedPayloads = decodePayloads(message.payload);
-                    if (decodedPayloads) {
-                        setPayloads((prev) => [...prev, decodedPayloads]);
+                    const data = decodePayloads(message.payload);
+                    if (data) {
+                        addPayload(data);
                     }
                 }
                 break;
@@ -1062,27 +1555,19 @@ function useIframeMessage(options = {}) {
             window.removeEventListener('message', handleMessage);
         };
     }, [handleMessage]);
-    const clearPayloads = useCallback(() => {
-        setPayloads([]);
-    }, []);
-    const reset = useCallback(() => {
-        setPayloads([]);
-        setIsReady(false);
-    }, []);
     return {
         iframeRef,
-        payloads,
         isReady,
-        clearPayloads,
-        reset,
     };
 }
-function useIframeRender() {
+
+function useVizLiveRender() {
     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 { iframeRef, payloads, isReady } = useIframeMessage();
+    const setIsRenderViz = useHeatmapVizStore((state) => state.setIsRenderViz);
+    const { iframeRef, isReady } = useVizLiveIframeMsg();
     useEffect(() => {
         if (!htmlContent || !iframeRef.current)
             return;
@@ -1102,50 +1587,50 @@ function useIframeRender() {
         const iframe = iframeRef.current;
         if (!iframe || !htmlContent)
             return;
-        reset$1(iframe, { width: contentWidth, height: wrapperHeight }, (height) => {
-            setIframeHeight(height);
+        setIsRenderViz(false);
+        reset(iframe, { width: contentWidth, height: wrapperHeight }, (height) => {
+            height && setIframeHeight(height);
+            setIsRenderViz(true);
         });
     }, [isReady, contentWidth, wrapperHeight]);
     return {
         iframeRef,
-        payloads,
-        isReady,
     };
 }
-function reset$1(iframe, payloads, onSuccess) {
-    const viewportFixer = initViewportFixer({
-        targetWidth: payloads.width,
-        targetHeight: payloads.height,
+function reset(iframe, rect, onSuccess) {
+    const fixer = initIframeHelperFixer({
+        targetWidth: rect.width,
+        targetHeight: rect.height,
         iframe: iframe,
         onSuccess: (data) => {
-            onSuccess(data.height);
             iframe.height = `${data.height}px`;
+            onSuccess(data.height);
         },
     });
-    viewportFixer.recalculate();
-    return iframe;
+    // fixer.recalculate();
+    fixer.enableNavigationBlocking();
 }
 
+let visualizer = new Visualizer();
 const useHeatmapRender = () => {
     const data = useHeatmapDataStore((state) => state.data);
-    const setVizRef = useHeatmapVizStore((state) => state.setVizRef);
+    const setVizRef = useHeatmapSingleStore((state) => state.setVizRef);
     const setIsRenderViz = useHeatmapVizStore((state) => state.setIsRenderViz);
-    const setIframeHeight = useHeatmapVizStore((state) => state.setIframeHeight);
+    const setIframeHeight = useHeatmapSingleStore((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);
-        reset(iframe, payloads, (height) => {
+        initIframe(iframe, payloads, (height) => {
             height && setIframeHeight(height);
             setIsRenderViz(true);
+            setVizRef(visualizer);
         });
-        setVizRef(visualizer);
     }, []);
     useEffect(() => {
         if (!data || data.length === 0)
@@ -1159,21 +1644,20 @@ const useHeatmapRender = () => {
         iframeRef,
     };
 };
-function reset(iframe, payloads, onSuccess) {
+function initIframe(iframe, payloads, onSuccess) {
     const { size } = findLastSizeOfDom(payloads);
     const docWidth = size.width ?? 0;
     const docHeight = size.height ?? 0;
-    const viewportFixer = initViewportFixer({
+    initIframeHelperFixer({
         targetWidth: docWidth,
         targetHeight: docHeight,
         iframe: iframe,
         onSuccess: (data) => {
-            onSuccess(data.height);
             iframe.height = `${data.height}px`;
+            onSuccess(data.height);
         },
     });
-    viewportFixer.recalculate();
-    return iframe;
+    // fixer.recalculate();
 }
 
 function isMobileDevice(userAgent) {
@@ -1358,30 +1842,64 @@ const useContentDimensions = ({ iframeRef, }) => {
     return { contentWidth };
 };
 
-const useIframeHeight = (props) => {
+const useObserveIframeHeight = (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)
+        if (!iframe || !setIframeHeight)
             return;
         try {
             const iframeDocument = iframe.contentDocument;
             const iframeBody = iframeDocument?.body;
-            if (!iframeBody)
+            const iframeDocumentElement = iframeDocument?.documentElement;
+            if (!iframeBody || !iframeDocumentElement)
                 return;
-            const bodyHeight = Math.max(iframeBody.scrollHeight, iframeBody.offsetHeight, iframeBody.clientHeight);
-            if (bodyHeight > 0) {
-                iframe.height = `${bodyHeight}px`;
-                setIframeHeight(bodyHeight);
-            }
+            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);
+                }
+            });
         }
         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)
@@ -1399,22 +1917,24 @@ const useIframeHeight = (props) => {
                 if (mutationObserverRef.current) {
                     mutationObserverRef.current.disconnect();
                 }
-                // ResizeObserver for size changes
                 if (typeof window.ResizeObserver !== 'undefined') {
-                    resizeObserverRef.current = new ResizeObserver(updateIframeHeight);
+                    resizeObserverRef.current = new ResizeObserver(immediateUpdate);
                     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(updateIframeHeight);
+                    mutationObserverRef.current = new MutationObserver(immediateUpdate);
                     mutationObserverRef.current.observe(iframeBody, {
                         childList: true,
                         subtree: true,
                         attributes: true,
-                        characterData: true,
+                        attributeFilter: ['style', 'class'],
+                        characterData: false,
                     });
                 }
-                // Initial measurement
                 updateIframeHeight();
             }
             catch (error) {
@@ -1428,30 +1948,74 @@ const useIframeHeight = (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]);
+    }, [iframeRef, isRenderViz, updateIframeHeight, debouncedUpdate, immediateUpdate]);
     return {};
 };
 
 const useScaleCalculation = (props) => {
     const scale = useHeatmapVizStore((state) => state.scale);
+    const zoomRatio = useHeatmapVizStore((state) => state.zoomRatio);
     const setScale = useHeatmapVizStore((state) => state.setScale);
-    const { containerWidth, contentWidth } = props;
-    useEffect(() => {
-        if (containerWidth > 0 && contentWidth > 0) {
+    const isScaledToFit = useHeatmapVizStore((state) => state.isScaledToFit);
+    const setIsScaledToFit = useHeatmapVizStore((state) => state.setIsScaledToFit);
+    const minZoomRatio = useHeatmapVizStore((state) => state.minZoomRatio);
+    const setMinZoomRatio = useHeatmapVizStore((state) => state.setMinZoomRatio);
+    const { containerWidth, containerHeight, contentWidth, contentHeight } = props;
+    const calculateScaleResult = useCallback(() => {
+        if (containerWidth > 0 && contentWidth > 0 && containerHeight > 0 && contentHeight > 0) {
+            // 1. Calculate widthScale (base scale from width)
             const availableWidth = containerWidth - HEATMAP_CONFIG['padding'] * 2;
-            const calculatedScale = Math.min(availableWidth / contentWidth, 1);
-            setScale(calculatedScale);
+            const widthScale = Math.min(availableWidth / contentWidth, 1);
+            // 2. Calculate available height
+            const toolbarHeight = HEATMAP_CONFIG['heightToolbar'] ;
+            const paddingTotal = HEATMAP_CONFIG['padding'] * 2;
+            const availableHeight = containerHeight - toolbarHeight - paddingTotal; // 10px buffer to avoid scroll bar
+            // 3. Calculate minZoomRatio (zoom ratio minimum to fit iframe in container)
+            const roundedMinZoomRatio = (availableHeight / (contentHeight * widthScale)) * 100;
+            // Limit minZoomRatio to a reasonable range (10-100)
+            const finalMinZoomRatio = Math.max(10, Math.min(roundedMinZoomRatio, 100));
+            // 4. Apply zoom ratio (cannot be less than minZoomRatio)
+            const clampedZoomRatio = Math.max(zoomRatio, finalMinZoomRatio);
+            const zoomMultiplier = clampedZoomRatio / 100;
+            // 5. Calculate finalScale
+            const finalScale = widthScale * zoomMultiplier;
+            // 6. Check if it is currently fitted
+            const isCurrentlyFitted = zoomRatio <= finalMinZoomRatio;
+            // 7. Update store
+            setScale(finalScale);
+            setIsScaledToFit(isCurrentlyFitted);
+            setMinZoomRatio(finalMinZoomRatio);
         }
-    }, [containerWidth, contentWidth]);
-    return { scale };
+    }, [
+        containerWidth,
+        containerHeight,
+        contentWidth,
+        contentHeight,
+        zoomRatio,
+        setScale,
+        setIsScaledToFit,
+        setMinZoomRatio,
+    ]);
+    useEffect(() => {
+        calculateScaleResult();
+    }, [calculateScaleResult]);
+    return { scale, isScaledToFit, minZoomRatio };
 };
 
 const useScrollSync = ({ iframeRef }) => {
@@ -1482,16 +2046,23 @@ const useHeatmapScale = (props) => {
     // 2. Get content dimensions from config
     const { contentWidth } = useContentDimensions({ iframeRef });
     // 3. Observe iframe height (now reacts to width changes)
-    useIframeHeight({ iframeRef, setIframeHeight });
+    useObserveIframeHeight({ iframeRef, setIframeHeight });
     // 4. Calculate scale
-    const { scale } = useScaleCalculation({ containerWidth, contentWidth });
+    const { scale } = useScaleCalculation({
+        containerWidth,
+        containerHeight,
+        contentWidth,
+        contentHeight: iframeHeight,
+    });
     // 5. Setup scroll sync
     const { handleScroll } = useScrollSync({ iframeRef });
+    const scaledHeight = iframeHeight * scale;
+    const scaledWidth = contentWidth * scale;
     return {
         containerWidth,
         containerHeight,
-        scaledWidth: contentWidth * scale,
-        scaledHeight: iframeHeight * scale,
+        scaledWidth,
+        scaledHeight,
         handleScroll,
     };
 };
@@ -1565,6 +2136,135 @@ const useWrapperRefHeight = (props) => {
     return {};
 };
 
+const useZonePositions = (options) => {
+    const iframeHeight = useHeatmapSingleStore((state) => state.iframeHeight);
+    const getZonePosition = useCallback((zone) => {
+        if (!iframeHeight) {
+            return null;
+        }
+        const startYPx = (zone.startY / 100) * iframeHeight;
+        const heightPx = ((zone.endY - zone.startY) / 100) * iframeHeight;
+        return {
+            top: startYPx,
+            height: heightPx,
+        };
+    }, [iframeHeight]);
+    return {
+        getZonePosition,
+    };
+};
+
+const SCROLL_GRADIENT_COLORS = [
+    [255, 0, 0], // Red
+    [255, 255, 0], // Yellow
+    [0, 255, 0], // Green
+];
+const useScrollmapZones = (options) => {
+    const { mode = 'basic', enabled = true, iframeRef, wrapperRef } = options;
+    const [isReady, setIsReady] = useState(false);
+    const [zones, setZones] = useState([]);
+    const scrollmap = useHeatmapDataStore((state) => state.scrollmap);
+    const scrollMapInfo = useHeatmapDataStore((state) => state.dataInfo?.scrollMapInfo);
+    const { getZonePosition } = useZonePositions();
+    const maxUsers = useMemo(() => {
+        if (!scrollmap || scrollmap.length === 0)
+            return 100;
+        return Math.max(...scrollmap.map((d) => d.percUsers));
+    }, [scrollmap]);
+    const createZones = useCallback((data) => {
+        if (mode === 'basic') {
+            const breakpoints = [0, 25, 50, 75, 100];
+            const zones = [];
+            for (let i = 0; i < breakpoints.length - 1; i++) {
+                const startY = breakpoints[i];
+                const endY = breakpoints[i + 1];
+                const pointsInRange = data.filter((d) => d.scrollReachY >= startY && d.scrollReachY < endY);
+                const avgUsers = pointsInRange.length > 0
+                    ? pointsInRange.reduce((sum, p) => sum + p.percUsers, 0) / pointsInRange.length
+                    : 0;
+                zones.push({
+                    id: `zone_${startY}_${endY}`,
+                    startY,
+                    endY,
+                    percUsers: avgUsers,
+                    label: `${startY}% - ${endY}%`,
+                });
+            }
+            return zones;
+        }
+        else {
+            // Metrics mode: 20 zones (5% intervals)
+            const zones = [];
+            const interval = 5;
+            // Prepare metrics map
+            let metricsMap;
+            if (scrollMapInfo && Object.keys(scrollMapInfo).length > 0) {
+                metricsMap = new Map();
+                Object.entries(scrollMapInfo).forEach(([key, value]) => {
+                    metricsMap.set(Number(key), value);
+                });
+            }
+            for (let i = 0; i < 100; i += interval) {
+                const startY = i;
+                const endY = i + interval;
+                const point = data.find((d) => d.scrollReachY === startY) || {
+                    scrollReachY: startY,
+                    cumulativeSum: 0,
+                    percUsers: 0,
+                };
+                const metrics = metricsMap?.get(startY);
+                zones.push({
+                    id: `zone_${startY}_${endY}`,
+                    startY,
+                    endY,
+                    percUsers: point.percUsers,
+                    metrics,
+                    label: `${startY}% - ${endY}%`,
+                });
+            }
+            return zones;
+        }
+    }, [mode, scrollMapInfo]);
+    /**
+     * Initialize zones
+     */
+    useEffect(() => {
+        if (!enabled || !scrollmap || scrollmap.length === 0) {
+            setIsReady(false);
+            return;
+        }
+        try {
+            const newZones = createZones(scrollmap);
+            setZones(newZones);
+            setIsReady(true);
+            console.log(`[useScrollmap] Created ${newZones.length} zones in ${mode} mode`);
+        }
+        catch (error) {
+            console.error('[useScrollmap] Error:', error);
+            setIsReady(false);
+        }
+    }, [enabled, scrollmap, mode, createZones]);
+    return {
+        zones,
+        isReady,
+        maxUsers,
+        getZonePosition,
+    };
+};
+/**
+ * Get scroll gradient color for minimap
+ */
+const getScrollGradientColor = (normalized) => {
+    const idx = Math.min(Math.floor(normalized * 2), 1);
+    const [r1, g1, b1] = SCROLL_GRADIENT_COLORS[idx];
+    const [r2, g2, b2] = SCROLL_GRADIENT_COLORS[idx + 1];
+    const localPercent = (normalized * 2) % 1;
+    const r = Math.round(r1 + (r2 - r1) * localPercent);
+    const g = Math.round(g1 + (g2 - g1) * localPercent);
+    const b = Math.round(b1 + (b2 - b1) * localPercent);
+    return `rgb(${r}, ${g}, ${b})`;
+};
+
 const BoxStack = forwardRef(({ children, ...props }, ref) => {
     const id = props.id;
     const flexDirection = props.flexDirection;
@@ -1626,7 +2326,6 @@ const ContentMetricBar = () => {
 const ContentToolbar = () => {
     const controls = useHeatmapControlStore((state) => state.controls);
     return (jsx("div", { id: "gx-hm-content-toolbar", style: {
-            zIndex: 2,
             position: 'absolute',
             bottom: 0,
             left: '8px',
@@ -1651,35 +2350,57 @@ const VizContainer = ({ children, setWrapperHeight }) => {
 const useClickmap = () => {
     const [isInitialized, setIsInitialized] = useState(false);
     const clickmap = useHeatmapDataStore((state) => state.clickmap);
-    const vizRef = useHeatmapVizStore((state) => state.vizRef);
-    useEffect(() => {
+    const vizRef = useHeatmapSingleStore((state) => state.vizRef);
+    const start = useCallback(() => {
         if (isInitialized)
             return;
         if (!vizRef || !clickmap || clickmap.length === 0)
             return;
-        vizRef.clearmap();
-        vizRef?.clickmap(clickmap);
-        setIsInitialized(true);
+        try {
+            vizRef?.clearmap?.();
+            vizRef?.clickmap?.(clickmap);
+            setIsInitialized(true);
+        }
+        catch (error) {
+            console.error(`🚀 🐥 ~ useClickmap ~ error:`, error);
+        }
     }, [vizRef, clickmap]);
-    return {};
+    return { start };
 };
 
 const useScrollmap = () => {
-    useHeatmapDataStore((state) => state.clickmap);
-    return {};
+    const vizRef = useHeatmapSingleStore((state) => state.vizRef);
+    const scrollmap = useHeatmapDataStore((state) => state.scrollmap);
+    const start = useCallback(() => {
+        // if (isInitialized) return;
+        if (!vizRef || !scrollmap || scrollmap.length === 0)
+            return;
+        try {
+            vizRef?.clearmap?.();
+            vizRef?.scrollmap?.(scrollmap);
+            // setIsInitialized(true);
+        }
+        catch (error) {
+            console.error(`🚀 🐥 ~ useScrollmap ~ error:`, error);
+        }
+    }, [vizRef, scrollmap]);
+    return { start };
 };
 
-const useHeatmapVizCanvas = () => {
+const useHeatmapCanvas = ({ iframeRef, }) => {
     const heatmapType = useHeatmapConfigStore((state) => state.heatmapType);
-    const heatmapRender = useMemo(() => {
+    const { start: startClickmap } = useClickmap();
+    const { start: startScrollmap } = useScrollmap();
+    useEffect(() => {
         switch (heatmapType) {
             case IHeatmapType.Click:
-                return useClickmap;
+                startClickmap();
+                break;
             case IHeatmapType.Scroll:
-                return useScrollmap;
+                startScrollmap();
+                break;
         }
-    }, [heatmapType]);
-    return heatmapRender?.();
+    }, [heatmapType, startClickmap, startScrollmap]);
 };
 
 const CLICKED_ELEMENT_ID = 'gx-hm-clicked-element';
@@ -1742,7 +2463,7 @@ const ElementCallout = (props) => {
             window.removeEventListener('resize', handleUpdate);
             visualRef?.current?.removeEventListener('scroll', handleUpdate);
         };
-    }, [target, visualRef, hozOffset, alignment]);
+    }, [element, 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,
@@ -1807,8 +2528,8 @@ const ELEMENT_CALLOUT = {
     alignment: 'left',
 };
 const HeatmapElements = (props) => {
-    const height = useHeatmapVizStore((state) => state.iframeHeight);
-    const { iframeRef, wrapperRef, visualRef, visualizer, iframeDimensions, isElementSidebarOpen, isVisible = true, areDefaultRanksHidden, isSecondary, ...rest } = props;
+    const iframeHeight = useHeatmapSingleStore((state) => state.iframeHeight);
+    const { iframeRef, wrapperRef, visualRef, visualizer, iframeDimensions, isElementSidebarOpen, isVisible = true, areDefaultRanksHidden, isSecondary, } = props;
     const getRect = useHeatmapElementPosition({
         iframeRef,
         wrapperRef,
@@ -1837,14 +2558,21 @@ const HeatmapElements = (props) => {
     });
     if (!isVisible)
         return null;
-    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 }))] }));
+    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 }))] }));
 };
 
 const VizElements = ({ iframeRef, visualRef, wrapperRef }) => {
     const heatmapInfo = useHeatmapDataStore((state) => state.dataInfo);
-    const contentWidth = useHeatmapDataStore((state) => state.config?.width ?? 0);
+    const contentWidth = useHeatmapConfigStore((state) => state.width);
+    const vizRef = useHeatmapSingleStore((state) => state.vizRef);
     const visualizer = {
         get: (hash) => {
+            if (vizRef) {
+                return vizRef.get(hash);
+            }
             const doc = iframeRef.current?.contentDocument;
             if (!doc)
                 return null;
@@ -1870,6 +2598,293 @@ const VizElements = ({ iframeRef, visualRef, wrapperRef }) => {
         } }));
 };
 
+const AverageFoldLine = ({ iframeRef, wrapperRef }) => {
+    const averageFold = useHeatmapDataStore((state) => state.dataInfo?.averageFold || 50);
+    const { getZonePosition } = useZonePositions();
+    const position = getZonePosition({
+        startY: averageFold,
+        endY: averageFold,
+    });
+    if (!position)
+        return null;
+    return (jsx("div", { style: {
+            position: 'absolute',
+            top: `${position.top}px`,
+            left: 0,
+            width: '100%',
+            height: '2px',
+            backgroundColor: '#0078D4',
+            pointerEvents: 'none',
+            zIndex: 2,
+            boxShadow: '0 0 4px rgba(0,120,212,0.5)',
+            display: 'flex',
+            alignItems: 'center',
+        }, children: jsxs("div", { style: {
+                position: 'absolute',
+                padding: '8px',
+                backgroundColor: 'rgba(0, 120, 212, 0.9)',
+                color: 'white',
+                fontSize: '16px',
+                fontWeight: 600,
+                borderRadius: '4px',
+                whiteSpace: 'nowrap',
+                left: '12px',
+                minWidth: '120px',
+                textAlign: 'center',
+            }, children: ["Average fold - ", averageFold.toFixed(0), "%"] }) }));
+};
+
+const ScrollmapMarker = ({ iframeRef, wrapperRef }) => {
+    const scrollmap = useHeatmapDataStore((state) => state.scrollmap);
+    const scrollType = useHeatmapConfigStore((state) => state.scrollType);
+    const { getZonePosition } = useZonePositions();
+    if (!scrollmap || scrollmap.length === 0)
+        return null;
+    const findScrollPositionForUserPercent = (targetPercent) => {
+        for (let i = 0; i < scrollmap.length; i++) {
+            if (scrollmap[i].percUsers <= targetPercent) {
+                if (i > 0) {
+                    return scrollmap[i - 1].scrollReachY;
+                }
+                return scrollmap[i].scrollReachY;
+            }
+        }
+        return scrollmap[scrollmap.length - 1]?.scrollReachY || null;
+    };
+    const boundaries = [
+        { percent: 75, label: '75%', color: '#10B981' },
+        { percent: 50, label: '50%', color: '#F59E0B' },
+        { percent: 25, label: '25%', color: '#EF4444' },
+        { percent: 5, label: '5%', color: '#8B5CF6' },
+    ];
+    const isScrollDepth = scrollType === IScrollType.Depth;
+    if (!isScrollDepth)
+        return null;
+    return (jsx(Fragment, { children: boundaries.map((boundary) => {
+            const scrollY = findScrollPositionForUserPercent(boundary.percent);
+            if (scrollY === null)
+                return null;
+            const position = getZonePosition({
+                startY: scrollY,
+                endY: scrollY,
+            });
+            if (!position)
+                return null;
+            return (jsx("div", { className: `marker-boundary-line-${boundary.percent}`, style: {
+                    position: 'absolute',
+                    top: `${position.top}px`,
+                    left: 0,
+                    transformOrigin: 'left center',
+                    width: '100%',
+                    height: '0px',
+                    // borderBottom: `2px dashed #323130`,
+                    borderBottom: `2px solid ${boundary.color}`,
+                    // background: 'repeating-linear-gradient(90deg, #323130, transparent 2px 3px)',
+                    zIndex: 1,
+                    display: 'flex',
+                    alignItems: 'center',
+                }, children: jsx("div", { style: {
+                        position: 'absolute',
+                        padding: '8px',
+                        backgroundColor: boundary.color,
+                        color: 'white',
+                        fontSize: '16px',
+                        fontWeight: 600,
+                        borderRadius: '4px',
+                        whiteSpace: 'nowrap',
+                        left: '12px',
+                        minWidth: '120px',
+                        textAlign: 'center',
+                        // textAlign: 'center',
+                        // padding: '8px',
+                        // paddingInline: '8px',
+                        // fontSize: '16px',
+                        // background: '#fff',
+                        // width: 'auto',
+                        // borderRadius: '4px',
+                        // position: 'absolute',
+                        // left: '12px',
+                        // minWidth: '120px',
+                    }, children: boundary.label }) }, boundary.label));
+        }) }));
+};
+
+const ScrollMapMinimap = ({ zones, maxUsers }) => {
+    const showMinimap = useHeatmapVizScrollmapStore((state) => state.showMinimap);
+    const scrollType = useHeatmapConfigStore((state) => state.scrollType);
+    const isScrollType = [IScrollType.Attention].includes(scrollType);
+    if (!showMinimap || !isScrollType)
+        return null;
+    return (jsx("div", { style: {
+            position: 'fixed',
+            left: '20px',
+            top: '50%',
+            transform: 'translateY(-50%)',
+            width: '60px',
+            height: '400px',
+            backgroundColor: 'white',
+            borderRadius: '8px',
+            boxShadow: '0 4px 16px rgba(0,0,0,0.15)',
+            zIndex: 10002,
+            padding: '8px',
+            boxSizing: 'border-box',
+        }, children: jsx("div", { style: {
+                width: '100%',
+                height: '100%',
+                borderRadius: '4px',
+                overflow: 'hidden',
+                display: 'flex',
+                flexDirection: 'column',
+            }, children: zones.map((zone) => {
+                const normalized = maxUsers > 0 ? zone.percUsers / maxUsers : 0;
+                const color = getScrollGradientColor(normalized);
+                return (jsx("div", { title: `${zone.label}: ${zone.percUsers.toFixed(2)}%`, style: {
+                        width: '100%',
+                        flex: `${zone.endY - zone.startY}`,
+                        backgroundColor: color,
+                        borderBottom: '1px solid rgba(255,255,255,0.2)',
+                    } }, zone.id));
+            }) }) }));
+};
+
+const ScrollZoneTooltip = ({ zone, position, currentScrollPercent, scrollmap, }) => {
+    const tooltipRef = useRef(null);
+    const currentData = useMemo(() => {
+        if (!scrollmap || scrollmap.length === 0)
+            return null;
+        const roundedPercent = Math.floor(currentScrollPercent);
+        return scrollmap.find((d) => d.scrollReachY === roundedPercent) || null;
+    }, [scrollmap, currentScrollPercent]);
+    return (jsxs("div", { id: "gx-hm-scrollmap-tooltip", ref: tooltipRef, style: {
+            position: 'fixed',
+            top: `${position.y}px`,
+            backgroundColor: 'black',
+            zIndex: 10001,
+            pointerEvents: 'none',
+            width: '100%',
+            height: '2px',
+        }, children: [jsxs("div", { style: {
+                    position: 'absolute',
+                    left: '50%',
+                    top: '-50%',
+                    transform: 'translate(-50%, -50%)',
+                    padding: '16px',
+                    borderRadius: '8px',
+                    boxShadow: '0 4px 16px rgba(0,0,0,0.15)',
+                    fontSize: '14px',
+                    width: 'fit-content',
+                    backgroundColor: 'white',
+                    minWidth: '230px',
+                    display: 'flex',
+                    gap: '8px',
+                    alignItems: 'center',
+                }, children: [jsxs("p", { style: {
+                            fontWeight: 650,
+                            fontSize: '20px',
+                            lineHeight: '24px',
+                            letterSpacing: '-0.2px',
+                            verticalAlign: 'middle',
+                            fontVariantNumeric: 'tabular-nums',
+                        }, children: [currentData?.percUsers?.toFixed(2), "%", ' '] }), jsx("p", { style: { fontWeight: 450 }, children: "user scrolled this far" })] }), jsx(TooltipByZone, { zone: zone })] }));
+};
+const TooltipByZone = ({ zone }) => {
+    const scrollType = useHeatmapConfigStore((state) => state.scrollType);
+    if (!zone)
+        return null;
+    const contentMarkup = () => {
+        switch (scrollType) {
+            case IScrollType.Depth:
+                return jsx(BasicTooltipContent, { zone: zone });
+            case IScrollType.Attention:
+                return jsx(MetricsTooltipContent, { zone: zone });
+            default:
+                return jsx(BasicTooltipContent, { zone: zone });
+        }
+    };
+    return (jsx("div", { style: { paddingTop: '12px', borderTop: '1px solid #E5E7EB' }, children: contentMarkup() }));
+};
+const BasicTooltipContent = ({ zone }) => {
+    if (!zone)
+        return null;
+    return (jsxs(Fragment, { children: [jsx("div", { style: { fontWeight: 600, marginBottom: '8px' }, children: zone.label }), jsxs("div", { style: { fontSize: '24px', fontWeight: 700, color: '#0078D4' }, children: [zone.percUsers.toFixed(2), "%"] }), jsx("div", { style: { fontSize: '12px', color: '#605E5C', marginTop: '4px' }, children: "of users reached this point" })] }));
+};
+const MetricsTooltipContent = ({ zone }) => {
+    if (!zone)
+        return null;
+    return (jsxs(Fragment, { children: [jsx("div", { style: { fontWeight: 600, marginBottom: '8px' }, children: zone.label }), jsxs("div", { style: { fontSize: '20px', fontWeight: 700, marginBottom: '8px' }, children: [zone.percUsers.toFixed(2), "% users"] }), zone.metrics && (jsxs("div", { style: { display: 'grid', gap: '6px', fontSize: '13px' }, children: [zone.metrics.revenue !== undefined && (jsx(MetricRow, { label: "Revenue", value: `$${zone.metrics.revenue.toFixed(2)}` })), zone.metrics.conversionRate !== undefined && (jsx(MetricRow, { label: "Conversion", value: `${zone.metrics.conversionRate.toFixed(2)}%` })), zone.metrics.orders !== undefined && (jsx(MetricRow, { label: "Orders", value: zone.metrics.orders.toString() }))] }))] }));
+};
+const MetricRow = ({ label, value }) => (jsxs("div", { style: { display: 'flex', justifyContent: 'space-between' }, children: [jsxs("span", { style: { color: '#605E5C' }, children: [label, ":"] }), jsx("span", { style: { fontWeight: 600 }, children: value })] }));
+
+const HoverZones = ({ iframeRef, wrapperRef, position, currentScrollPercent, }) => {
+    const scrollmap = useHeatmapDataStore((state) => state.scrollmap);
+    // const hoveredZone = useHeatmapVizScrollmapStore((state) => state.hoveredZone);
+    // const setHoveredZone = useHeatmapVizScrollmapStore((state) => state.setHoveredZone);
+    const { zones, isReady, maxUsers } = useScrollmapZones({
+        iframeRef,
+        wrapperRef,
+    });
+    if (!isReady || !zones.length)
+        return null;
+    if (!position)
+        return null;
+    return (jsxs(Fragment, { children: [jsx(ScrollZoneTooltip, { position: position, currentScrollPercent: currentScrollPercent, scrollmap: scrollmap || [] }), jsx(ScrollMapMinimap, { zones: zones, maxUsers: maxUsers })] }));
+};
+
+const ScrollMapOverlay = ({ wrapperRef, iframeRef }) => {
+    const overlayRef = useRef(null);
+    const [position, setPosition] = useState();
+    const [currentScrollPercent, setCurrentScrollPercent] = useState(0);
+    const widthScale = useHeatmapVizStore((state) => state.scale);
+    const iframeHeight = useHeatmapSingleStore((state) => state.iframeHeight);
+    const handleMouseMove = (event) => {
+        if (!iframeRef.current || !wrapperRef.current)
+            return;
+        const iframe = iframeRef.current;
+        const iframeRect = iframe.getBoundingClientRect();
+        const { x, y } = convertViewportToIframeCoords(event.clientX, event.clientY, iframeRect, widthScale);
+        const wrapperEl = wrapperRef.current;
+        const scrollOffset = (wrapperEl?.scrollTop || 0) / widthScale;
+        const actualY = y + scrollOffset;
+        const scrollPercent = Math.min(100, Math.max(0, (actualY / iframeHeight) * 100));
+        setCurrentScrollPercent(scrollPercent);
+        setPosition({ x, y });
+    };
+    const onMouseMove = useCallback((event) => {
+        requestAnimationFrame(() => handleMouseMove(event));
+    }, [handleMouseMove]);
+    const onMouseLeave = () => {
+        requestAnimationFrame(() => {
+            setCurrentScrollPercent(0);
+            setPosition(undefined);
+        });
+    };
+    return (jsx("div", { ref: overlayRef, id: "gx-hm-scrollmap-overlay", onMouseMove: onMouseMove, onMouseLeave: onMouseLeave, style: {
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            width: '100%',
+            height: `${iframeHeight}px`,
+            zIndex: 3,
+        }, children: jsx(HoverZones, { position: position, currentScrollPercent: currentScrollPercent, iframeRef: iframeRef, wrapperRef: wrapperRef }) }));
+};
+
+const SCROLL_TYPES = [IHeatmapType.Scroll];
+const VizScrollMap = ({ iframeRef, wrapperRef }) => {
+    const iframeHeight = useHeatmapSingleStore((state) => state.iframeHeight);
+    const heatmapType = useHeatmapConfigStore((state) => state.heatmapType);
+    const isHeatmapScroll = SCROLL_TYPES.includes(heatmapType);
+    if (!iframeHeight || !isHeatmapScroll)
+        return null;
+    return (jsxs("div", { style: {
+            position: 'absolute',
+            top: 0,
+            left: '2px',
+            width: `calc(100% - 4px)`,
+            height: '100%',
+            transform: 'translateZ(0)',
+        }, children: [jsx(ScrollmapMarker, { iframeRef: iframeRef, wrapperRef: wrapperRef }), jsx(AverageFoldLine, { iframeRef: iframeRef, wrapperRef: wrapperRef }), jsx(ScrollMapOverlay, { wrapperRef: wrapperRef, iframeRef: iframeRef })] }));
+};
+
 const WrapperVisual = ({ children, visualRef, wrapperRef, scaledHeight, iframeHeight, onScroll, }) => {
     const contentWidth = useHeatmapConfigStore((state) => state.width);
     const widthScale = useHeatmapVizStore((state) => state.scale);
@@ -1877,7 +2892,7 @@ const WrapperVisual = ({ children, visualRef, wrapperRef, scaledHeight, iframeHe
         ? `${scaledHeight + HEATMAP_CONFIG['heightToolbar'] + HEATMAP_CONFIG['padding'] * 2}px`
         : 'auto';
     return (jsx("div", { ref: visualRef, className: "gx-hm-visual", onScroll: onScroll, style: {
-            overflow: 'hidden auto',
+            overflow: 'hidden scroll',
             display: 'flex',
             position: 'relative',
             justifyContent: 'center',
@@ -1904,8 +2919,9 @@ const WrapperVisual = ({ children, visualRef, wrapperRef, scaledHeight, iframeHe
 
 const VizDomRenderer = ({ mode = 'heatmap' }) => {
     const width = useHeatmapConfigStore((state) => state.width);
-    const iframeHeight = useHeatmapVizStore((state) => state.iframeHeight);
-    const setIframeHeight = useHeatmapVizStore((state) => state.setIframeHeight);
+    const heatmapType = useHeatmapConfigStore((state) => state.heatmapType);
+    const iframeHeight = useHeatmapSingleStore((state) => state.iframeHeight);
+    const setIframeHeight = useHeatmapSingleStore((state) => state.setIframeHeight);
     const setSelectedElement = useHeatmapInteractionStore((state) => state.setSelectedElement);
     const wrapperRef = useRef(null);
     const visualRef = useRef(null);
@@ -1915,14 +2931,13 @@ const VizDomRenderer = ({ mode = 'heatmap' }) => {
         iframeRef,
         visualRef,
         iframeHeight,
-        setIframeHeight,
     });
     const contentWidth = width ?? 0;
     const onScroll = (e) => {
         const scrollTop = e.currentTarget.scrollTop;
         handleScroll(scrollTop);
     };
-    useHeatmapVizCanvas();
+    useHeatmapCanvas({ iframeRef: iframeRef });
     const cleanUp = () => {
         setIframeHeight(0);
         setSelectedElement(null);
@@ -1930,7 +2945,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, height: iframeHeight, scrolling: "no" })] }));
+    return (jsxs(WrapperVisual, { visualRef: visualRef, wrapperRef: wrapperRef, scaledHeight: scaledHeight, onScroll: onScroll, iframeHeight: iframeHeight, children: [heatmapType === IHeatmapType.Click && (jsx(VizElements, { iframeRef: iframeRef, visualRef: visualRef, wrapperRef: wrapperRef })), jsx("iframe", { ref: iframeRef, ...HEATMAP_IFRAME, width: contentWidth, scrolling: "no" }), jsx(VizScrollMap, { iframeRef: iframeRef, wrapperRef: visualRef })] }));
 };
 
 const VizLoading = () => {
@@ -1940,12 +2955,12 @@ const VizLoading = () => {
 const VizDomHeatmap = () => {
     const controls = useHeatmapControlStore((state) => state.controls);
     const isRendering = useHeatmapDataStore((state) => state.isRendering);
-    const iframeHeight = useHeatmapVizStore((state) => state.iframeHeight);
-    const setIframeHeight = useHeatmapVizStore((state) => state.setIframeHeight);
-    const setVizRef = useHeatmapVizStore((state) => state.setVizRef);
+    const iframeHeight = useHeatmapSingleStore((state) => state.iframeHeight);
+    const setIframeHeight = useHeatmapSingleStore((state) => state.setIframeHeight);
+    const setVizRef = useHeatmapSingleStore((state) => state.setVizRef);
     useEffect(() => {
         return () => {
-            setVizRef(undefined);
+            setVizRef(null);
             setIframeHeight(0);
         };
     }, []);
@@ -1960,7 +2975,7 @@ const VizLiveRenderer = () => {
     const setIframeHeight = useHeatmapLiveStore((state) => state.setIframeHeight);
     const visualRef = useRef(null);
     const wrapperRef = useRef(null);
-    const { iframeRef } = useIframeRender();
+    const { iframeRef } = useVizLiveRender();
     const { scaledHeight, handleScroll } = useHeatmapScale({
         wrapperRef,
         iframeRef,
@@ -1972,13 +2987,15 @@ 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 = useHeatmapVizStore((state) => state.iframeHeight);
+    const iframeHeight = useHeatmapLiveStore((state) => state.iframeHeight);
     const wrapperHeight = useHeatmapLiveStore((state) => state.wrapperHeight);
     const setWrapperHeight = useHeatmapLiveStore((state) => state.setWrapperHeight);
     const reset = useHeatmapLiveStore((state) => state.reset);
@@ -2035,10 +3052,10 @@ const WrapperLayout = () => {
     return (jsxs(BoxStack, { id: "gx-hm-layout", flexDirection: "column", flex: "1", children: [jsx(ContentTopBar, {}), jsx(WrapperPreview, {})] }));
 };
 
-const HeatmapLayout = ({ data, clickmap, controls, dataInfo, }) => {
+const HeatmapLayout = ({ data, clickmap, scrollmap, controls, dataInfo, }) => {
     useRegisterControl(controls);
     useRegisterData(data, dataInfo);
-    useRegisterHeatmap(clickmap);
+    useRegisterHeatmap({ clickmap, scrollmap });
     useRegisterConfig();
     return (jsx(BoxStack, { id: "gx-hm-project", flexDirection: "column", flex: "1", height: "100%", style: getVariableStyle(), children: jsx(BoxStack, { id: "gx-hm-project-content", flexDirection: "column", flex: "1", children: jsx("div", { style: {
                     minHeight: '100%',
@@ -2053,4 +3070,4 @@ const HeatmapLayout = ({ data, clickmap, controls, dataInfo, }) => {
     }
 };
 
-export { GraphView, HeatmapLayout, IHeatmapType, useHeatmapConfigStore, useHeatmapDataStore, useHeatmapInteractionStore, useHeatmapLiveStore };
+export { GraphView, HeatmapLayout, IClickType, IHeatmapType, IScrollType, useHeatmapConfigStore, useHeatmapDataStore, useHeatmapInteractionStore, useHeatmapLiveStore, useHeatmapVizStore };