@gemx-dev/heatmap-react 3.5.35 → 3.5.37

package/dist/esm/components/Layout/ContentToolbar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ContentToolbar.d.ts","sourceRoot":"","sources":["../../../src/components/Layout/ContentToolbar.tsx"],"names":[],"mappings":"AAEA,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAkBlC,CAAC"}
+{"version":3,"file":"ContentToolbar.d.ts","sourceRoot":"","sources":["../../../src/components/Layout/ContentToolbar.tsx"],"names":[],"mappings":"AAEA,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAmBlC,CAAC"}

package/dist/esm/components/Layout/LeftSidebar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LeftSidebar.d.ts","sourceRoot":"","sources":["../../../src/components/Layout/LeftSidebar.tsx"],"names":[],"mappings":"AAOA,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAoC/B,CAAC"}
+{"version":3,"file":"LeftSidebar.d.ts","sourceRoot":"","sources":["../../../src/components/Layout/LeftSidebar.tsx"],"names":[],"mappings":"AAOA,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAqC/B,CAAC"}

package/dist/esm/components/VizDom/VizDomContainer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"VizDomContainer.d.ts","sourceRoot":"","sources":["../../../src/components/VizDom/VizDomContainer.tsx"],"names":[],"mappings":"AAIA,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAoBnC,CAAC"}
+{"version":3,"file":"VizDomContainer.d.ts","sourceRoot":"","sources":["../../../src/components/VizDom/VizDomContainer.tsx"],"names":[],"mappings":"AAIA,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAiCnC,CAAC"}

package/dist/esm/configs/iframe.d.ts

@@ -3,7 +3,7 @@ interface IFrameAttrs {
     title: string;
     sandbox: string;
     scrolling: string;
-    height: string;
+    height?: string;
 }
 export declare const HEATMAP_IFRAME: IFrameAttrs;
 export {};

package/dist/esm/configs/iframe.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"iframe.d.ts","sourceRoot":"","sources":["../../src/configs/iframe.ts"],"names":[],"mappings":"AAAA,UAAU,WAAW;IACnB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,EAAE,MAAM,CAAC;IAClB,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,eAAO,MAAM,cAAc,EAAE,WAM5B,CAAC"}
+{"version":3,"file":"iframe.d.ts","sourceRoot":"","sources":["../../src/configs/iframe.ts"],"names":[],"mappings":"AAAA,UAAU,WAAW;IACnB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,eAAO,MAAM,cAAc,EAAE,WAM5B,CAAC"}

package/dist/esm/helpers/index.d.ts

@@ -2,4 +2,6 @@ export * from './elm-callout';
 export * from './elm-getter';
 export * from './iframe';
 export * from './viz-elements';
+export * from './viewport-fixer';
+export * from './viewport-replacer';
 //# sourceMappingURL=index.d.ts.map

package/dist/esm/helpers/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/helpers/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC;AAC9B,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,gBAAgB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/helpers/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC;AAC9B,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,gBAAgB,CAAC;AAE/B,cAAc,kBAAkB,CAAC;AACjC,cAAc,qBAAqB,CAAC"}

package/dist/esm/helpers/viewport-fixer.d.ts

@@ -0,0 +1,13 @@
+import { DebugInfo, ViewportConfig } from '../types';
+export declare class ViewportUnitsFixer {
+    private iframe;
+    private config;
+    constructor(config: ViewportConfig);
+    private init;
+    private injectScript;
+    private handleMessage;
+    recalculate(): void;
+}
+export declare function initViewportFixer(config: ViewportConfig): ViewportUnitsFixer;
+export declare function debugViewportUnits(): DebugInfo | null;
+//# sourceMappingURL=viewport-fixer.d.ts.map

package/dist/esm/helpers/viewport-fixer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"viewport-fixer.d.ts","sourceRoot":"","sources":["../../src/helpers/viewport-fixer.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAyC,cAAc,EAAE,MAAM,UAAU,CAAC;AAE5F,qBAAa,kBAAkB;IAC7B,OAAO,CAAC,MAAM,CAAkC;IAChD,OAAO,CAAC,MAAM,CAAiB;gBAEnB,MAAM,EAAE,cAAc;YAOpB,IAAI;YAgBJ,YAAY;IAwB1B,OAAO,CAAC,aAAa;IAMd,WAAW,IAAI,IAAI;CAG3B;AAED,wBAAgB,iBAAiB,CAAC,MAAM,EAAE,cAAc,GAAG,kBAAkB,CAU5E;AAED,wBAAgB,kBAAkB,IAAI,SAAS,GAAG,IAAI,CA+BrD"}

package/dist/esm/helpers/viewport-replacer.d.ts

@@ -0,0 +1,25 @@
+import type { ViewportConfig } from '../types';
+declare global {
+    interface Window {
+        __viewportConfig?: ViewportConfig;
+    }
+}
+export default class ViewportUnitsReplacer {
+    private config;
+    private readonly regex;
+    constructor();
+    private px;
+    private convert;
+    private replaceInText;
+    private processInlineStyles;
+    private processStyleTags;
+    private processRule;
+    private processStylesheets;
+    private processLinkedStylesheets;
+    private getFinalHeight;
+    private notifyParent;
+    private waitForResources;
+    private run;
+    private init;
+}
+//# sourceMappingURL=viewport-replacer.d.ts.map

package/dist/esm/helpers/viewport-replacer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"viewport-replacer.d.ts","sourceRoot":"","sources":["../../src/helpers/viewport-replacer.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAE/C,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,MAAM;QACd,gBAAgB,CAAC,EAAE,cAAc,CAAC;KACnC;CACF;AAED,MAAM,CAAC,OAAO,OAAO,qBAAqB;IACxC,OAAO,CAAC,MAAM,CAAiB;IAC/B,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAgD;;IAatE,OAAO,CAAC,EAAE;IAIV,OAAO,CAAC,OAAO;IAkBf,OAAO,CAAC,aAAa;IAIrB,OAAO,CAAC,mBAAmB;IAa3B,OAAO,CAAC,gBAAgB;IAaxB,OAAO,CAAC,WAAW;IAyBnB,OAAO,CAAC,kBAAkB;YAwBZ,wBAAwB;IAkCtC,OAAO,CAAC,cAAc;IAatB,OAAO,CAAC,YAAY;YAYN,gBAAgB;YAkBhB,GAAG;IAmBjB,OAAO,CAAC,IAAI;CAOb"}

package/dist/esm/hooks/viz-render/useHeatmapRender.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useHeatmapRender.d.ts","sourceRoot":"","sources":["../../../src/hooks/viz-render/useHeatmapRender.ts"],"names":[],"mappings":"AAKA,UAAU,uBAAuB;IAC/B,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC,iBAAiB,GAAG,IAAI,CAAC,CAAC;CACtD;AAED,eAAO,MAAM,gBAAgB,QAAO,uBAyCnC,CAAC"}
+{"version":3,"file":"useHeatmapRender.d.ts","sourceRoot":"","sources":["../../../src/hooks/viz-render/useHeatmapRender.ts"],"names":[],"mappings":"AAMA,UAAU,uBAAuB;IAC/B,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC,iBAAiB,GAAG,IAAI,CAAC,CAAC;CACtD;AAED,eAAO,MAAM,gBAAgB,QAAO,uBAsCnC,CAAC"}

package/dist/esm/hooks/viz-scale/useContentDimensions.d.ts

@@ -4,6 +4,6 @@ interface IUseContentDimensionsProps {
 interface IUseContentDimensionsResult {
     contentWidth: number;
 }
-export declare const useContentDimensions: (props: IUseContentDimensionsProps) => IUseContentDimensionsResult;
+export declare const useContentDimensions: ({ iframeRef, }: IUseContentDimensionsProps) => IUseContentDimensionsResult;
 export {};
 //# sourceMappingURL=useContentDimensions.d.ts.map

package/dist/esm/hooks/viz-scale/useContentDimensions.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useContentDimensions.d.ts","sourceRoot":"","sources":["../../../src/hooks/viz-scale/useContentDimensions.ts"],"names":[],"mappings":"AAGA,UAAU,0BAA0B;IAClC,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC,iBAAiB,GAAG,IAAI,CAAC,CAAC;CACtD;AAED,UAAU,2BAA2B;IACnC,YAAY,EAAE,MAAM,CAAC;CACtB;AAED,eAAO,MAAM,oBAAoB,GAC/B,OAAO,0BAA0B,KAChC,2BAaF,CAAC"}
+{"version":3,"file":"useContentDimensions.d.ts","sourceRoot":"","sources":["../../../src/hooks/viz-scale/useContentDimensions.ts"],"names":[],"mappings":"AAGA,UAAU,0BAA0B;IAClC,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC,iBAAiB,GAAG,IAAI,CAAC,CAAC;CACtD;AAED,UAAU,2BAA2B;IACnC,YAAY,EAAE,MAAM,CAAC;CACtB;AAED,eAAO,MAAM,oBAAoB,GAAI,gBAElC,0BAA0B,KAAG,2BAa/B,CAAC"}

package/dist/esm/hooks/viz-scale/useHeatmapScale.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useHeatmapScale.d.ts","sourceRoot":"","sources":["../../../src/hooks/viz-scale/useHeatmapScale.ts"],"names":[],"mappings":"AAMA,UAAU,kBAAkB;IAC1B,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IACnD,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC,iBAAiB,GAAG,IAAI,CAAC,CAAC;IACrD,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;CACnD;AAED,UAAU,sBAAsB;IAC9B,cAAc,EAAE,MAAM,CAAC;IACvB,eAAe,EAAE,MAAM,CAAC;IACxB,WAAW,EAAE,MAAM,CAAC;IACpB,YAAY,EAAE,MAAM,CAAC;IACrB,YAAY,EAAE,MAAM,CAAC;IACrB,YAAY,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;CAC3C;AAED,eAAO,MAAM,eAAe,GAAI,OAAO,kBAAkB,KAAG,sBA0B3D,CAAC"}
+{"version":3,"file":"useHeatmapScale.d.ts","sourceRoot":"","sources":["../../../src/hooks/viz-scale/useHeatmapScale.ts"],"names":[],"mappings":"AAMA,UAAU,kBAAkB;IAC1B,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IACnD,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC,iBAAiB,GAAG,IAAI,CAAC,CAAC;IACrD,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;CACnD;AAED,UAAU,sBAAsB;IAC9B,cAAc,EAAE,MAAM,CAAC;IACvB,eAAe,EAAE,MAAM,CAAC;IACxB,WAAW,EAAE,MAAM,CAAC;IACpB,YAAY,EAAE,MAAM,CAAC;IACrB,YAAY,EAAE,MAAM,CAAC;IACrB,YAAY,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;CAC3C;AAED,eAAO,MAAM,eAAe,GAAI,OAAO,kBAAkB,KAAG,sBA4B3D,CAAC"}

package/dist/esm/hooks/viz-scale/useIframeHeight.d.ts

@@ -1,6 +1,5 @@
 interface IUseIframeHeightProps {
     iframeRef: React.RefObject<HTMLIFrameElement | null>;
-    contentWidth: number;
 }
 interface IUseIframeHeightResult {
     iframeHeight: number;

package/dist/esm/hooks/viz-scale/useIframeHeight.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useIframeHeight.d.ts","sourceRoot":"","sources":["../../../src/hooks/viz-scale/useIframeHeight.ts"],"names":[],"mappings":"AAKA,UAAU,qBAAqB;IAC7B,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC,iBAAiB,GAAG,IAAI,CAAC,CAAC;IACrD,YAAY,EAAE,MAAM,CAAC;CACtB;AAED,UAAU,sBAAsB;IAC9B,YAAY,EAAE,MAAM,CAAC;CACtB;AAED,eAAO,MAAM,eAAe,GAAI,OAAO,qBAAqB,KAAG,sBAuG9D,CAAC"}
+{"version":3,"file":"useIframeHeight.d.ts","sourceRoot":"","sources":["../../../src/hooks/viz-scale/useIframeHeight.ts"],"names":[],"mappings":"AAGA,UAAU,qBAAqB;IAC7B,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC,iBAAiB,GAAG,IAAI,CAAC,CAAC;CACtD;AAED,UAAU,sBAAsB;IAC9B,YAAY,EAAE,MAAM,CAAC;CACtB;AAED,eAAO,MAAM,eAAe,GAAI,OAAO,qBAAqB,KAAG,sBA8F9D,CAAC"}

package/dist/esm/hooks/viz-scale/useScrollSync.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useScrollSync.d.ts","sourceRoot":"","sources":["../../../src/hooks/viz-scale/useScrollSync.ts"],"names":[],"mappings":"AAGA,UAAU,mBAAmB;IAC3B,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC,iBAAiB,GAAG,IAAI,CAAC,CAAC;CACtD;AAED,UAAU,oBAAoB;IAC5B,YAAY,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;CAC3C;AAED,eAAO,MAAM,aAAa,GAAI,eAAe,mBAAmB,KAAG,oBAyBlE,CAAC"}
+{"version":3,"file":"useScrollSync.d.ts","sourceRoot":"","sources":["../../../src/hooks/viz-scale/useScrollSync.ts"],"names":[],"mappings":"AAGA,UAAU,mBAAmB;IAC3B,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC,iBAAiB,GAAG,IAAI,CAAC,CAAC;CACtD;AAED,UAAU,oBAAoB;IAC5B,YAAY,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;CAC3C;AAED,eAAO,MAAM,aAAa,GAAI,eAAe,mBAAmB,KAAG,oBAwBlE,CAAC"}

package/dist/esm/index.js

@@ -128,6 +128,8 @@ const useHeatmapInteractionStore = create()((set, get) => {
 
 const useHeatmapVizStore = create()((set, get) => {
     return {
+        isRenderViz: false,
+        setIsRenderViz: (isRenderViz) => set({ isRenderViz }),
         scale: 1,
         vizRef: undefined,
         iframeHeight: 0,
@@ -436,6 +438,253 @@ function isElementInViewport(elementRect, visualRef, scale) {
     return elementBottom > viewportTop && elementTop < viewportBottom;
 }
 
+class ViewportUnitsFixer {
+    iframe = null;
+    config;
+    constructor(config) {
+        this.config = config;
+        this.iframe = config.iframe;
+        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();
+        }
+        else {
+            this.iframe.addEventListener('load', () => this.injectScript());
+        }
+    }
+    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');
+        script.textContent = `
+    (function() {
+      'use strict';
+      ${(await Promise.resolve().then(function () { return viewportReplacer; })).default}
+      new ViewportUnitsReplacer()
+    })();
+    `;
+        script.type = 'text/javascript';
+        script.id = 'viewport-replacer';
+        script.onload = () => console.log('[Parent] Viewport replacer module loaded');
+        script.onerror = () => console.error('[Parent] Không load được replacer script');
+        doc.head.appendChild(script);
+    }
+    handleMessage(event) {
+        const data = event.data;
+        if (!data || data.type !== 'IFRAME_HEIGHT_CALCULATED')
+            return;
+        this.config.onSuccess?.(data);
+    }
+    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 ViewportUnitsReplacer {
+    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');
+        }
+        this.config = window.__viewportConfig;
+        console.log('[Iframe] ViewportUnitsReplacer started with config:', this.config);
+        this.init();
+    }
+    px(value) {
+        return `${value.toFixed(2)}px`;
+    }
+    convert(value, unit) {
+        const num = parseFloat(value);
+        if (isNaN(num))
+            return value;
+        const map = {
+            vh: this.config.targetHeight,
+            svh: this.config.targetHeight,
+            lvh: this.config.targetHeight,
+            dvh: this.config.targetHeight,
+            vw: this.config.targetWidth,
+            svw: this.config.targetWidth,
+            lvw: this.config.targetWidth,
+            dvw: this.config.targetWidth,
+        };
+        return this.px((num / 100) * (map[unit.toLowerCase()] || 0));
+    }
+    replaceInText(cssText) {
+        return cssText.replace(this.regex, (_, value, unit) => this.convert(value, unit));
+    }
+    processInlineStyles() {
+        let count = 0;
+        document.querySelectorAll('[style]').forEach((el) => {
+            const style = el.getAttribute('style');
+            if (style && this.regex.test(style)) {
+                el.setAttribute('style', this.replaceInText(style));
+                count++;
+            }
+        });
+        console.log(`[Iframe] Replaced ${count} inline style elements`);
+        return count;
+    }
+    processStyleTags() {
+        let count = 0;
+        document.querySelectorAll('style').forEach((tag) => {
+            const css = tag.textContent || '';
+            if (this.regex.test(css)) {
+                tag.textContent = this.replaceInText(css);
+                count++;
+            }
+        });
+        console.log(`[Iframe] Replaced ${count} <style> tags`);
+        return count;
+    }
+    processRule(rule) {
+        let count = 0;
+        if ('style' in rule && rule.style) {
+            const style = rule.style;
+            for (let i = 0; i < style.length; i++) {
+                const prop = style[i];
+                const value = style.getPropertyValue(prop);
+                if (value && this.regex.test(value)) {
+                    style.setProperty(prop, this.replaceInText(value), style.getPropertyPriority(prop));
+                    count++;
+                }
+            }
+        }
+        if ('cssRules' in rule) {
+            const rules = rule;
+            for (const r of Array.from(rules.cssRules || [])) {
+                count += this.processRule(r);
+            }
+        }
+        return count;
+    }
+    processStylesheets() {
+        let total = 0;
+        Array.from(document.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);
+                    return;
+                }
+                const rules = sheet.cssRules || sheet.rules;
+                if (!rules)
+                    return;
+                for (const rule of Array.from(rules)) {
+                    total += this.processRule(rule);
+                }
+            }
+            catch (e) {
+                console.warn('[Iframe] Cannot read stylesheet (CORS?):', e.message);
+            }
+        });
+        console.log(`[Iframe] Replaced ${total} rules in stylesheets`);
+        return total;
+    }
+    async processLinkedStylesheets() {
+        const links = document.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);
+                continue;
+            }
+            try {
+                const res = await fetch(link.href);
+                let css = await res.text();
+                if (this.regex.test(css)) {
+                    css = this.replaceInText(css);
+                    const style = document.createElement('style');
+                    style.textContent = css;
+                    style.dataset.originalHref = link.href;
+                    link.parentNode?.insertBefore(style, link);
+                    link.remove();
+                    count++;
+                }
+            }
+            catch (e) {
+                console.warn('[Iframe] Cannot load CSS:', link.href, e);
+            }
+        }
+        console.log(`[Iframe] 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);
+    }
+    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 document) {
+            await document.fonts.ready;
+        }
+        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;
+            })));
+        }
+    }
+    async run() {
+        try {
+            this.processInlineStyles();
+            this.processStyleTags();
+            this.processStylesheets();
+            await this.processLinkedStylesheets();
+            // await this.waitForResources();
+            requestAnimationFrame(() => {
+                const height = this.getFinalHeight();
+                this.notifyParent(height);
+            });
+        }
+        catch (err) {
+            console.error('[Iframe] Critical error:', err);
+            this.notifyParent(document.body.scrollHeight || 1000);
+        }
+    }
+    init() {
+        if (document.readyState === 'loading') {
+            document.addEventListener('DOMContentLoaded', () => this.run());
+        }
+        else {
+            this.run();
+        }
+    }
+}
+
+var viewportReplacer = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    default: ViewportUnitsReplacer
+});
+
 const scrollToElementIfNeeded = (visualRef, rect, scale) => {
     if (!visualRef.current)
         return;
@@ -691,24 +940,22 @@ const useHeatmapRender = () => {
     const data = useHeatmapDataStore((state) => state.data);
     const config = useHeatmapDataStore((state) => state.config);
     const setVizRef = useHeatmapVizStore((state) => state.setVizRef);
+    const setIsRenderViz = useHeatmapVizStore((state) => state.setIsRenderViz);
+    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);
-        // iframe.contentDocument?.body.querySelectorAll('body>*').forEach((element) => {
-        //   console.log(`🚀 🐥 ~ useHeatmapRender ~ element:`, element);
-        //   const isClosedEcomsendWidget = element.closest('#ecomsend-widget');
-        //   const isEcomsendWidget = element.querySelector('#ecomsend-widget');
-        //   const isRemove = !(isClosedEcomsendWidget || isEcomsendWidget);
-        //   if (isRemove) {
-        //     element.remove();
-        //   }
-        // });
+        reset(iframe, payloads, (height) => {
+            height && setIframeHeight(height);
+            setIsRenderViz(true);
+        });
         setVizRef(visualizer);
     }, []);
     useEffect(() => {
@@ -723,6 +970,50 @@ const useHeatmapRender = () => {
         iframeRef,
     };
 };
+function sort(a, b) {
+    return a.time - b.time;
+}
+function findLastSizeOfDom(data) {
+    const firstDoc = data.find((item) => item.envelope.sequence === 1)?.doc;
+    const docSorted = firstDoc?.sort(sort);
+    const firstEvent = docSorted?.[0];
+    const docSize = {
+        width: firstEvent?.data.width,
+        height: firstEvent?.data.height,
+    };
+    const newData = JSON.parse(JSON.stringify(data));
+    const reversedData = newData.reverse();
+    const lastResizeEvent = reversedData.find((item) => !!item.resize);
+    const firstEventResize = lastResizeEvent?.resize?.[0];
+    const resize = {
+        width: firstEventResize?.data.width,
+        height: firstEventResize?.data.height,
+    };
+    return {
+        doc: docSize,
+        resize: resize,
+        size: {
+            width: resize.width ?? docSize.width,
+            height: resize.height ?? docSize.height,
+        },
+    };
+}
+function reset(iframe, payloads, onSuccess) {
+    const { size } = findLastSizeOfDom(payloads);
+    const docWidth = size.width ?? 0;
+    const docHeight = size.height ?? 0;
+    const viewportFixer = initViewportFixer({
+        targetWidth: docWidth,
+        targetHeight: docHeight,
+        iframe: iframe,
+        onSuccess: (data) => {
+            onSuccess(data.height);
+            iframe.height = `${data.height}px`;
+        },
+    });
+    viewportFixer.recalculate();
+    return iframe;
+}
 
 function isMobileDevice(userAgent) {
     if (!userAgent)
@@ -894,24 +1185,24 @@ const useContainerDimensions = (props) => {
     return { containerWidth, containerHeight };
 };
 
-const useContentDimensions = (props) => {
-    const contentWidth = useHeatmapDataStore((state) => state.config?.width ?? 0);
-    const { iframeRef } = props;
+const useContentDimensions = ({ iframeRef, }) => {
+    const config = useHeatmapDataStore((state) => state.config);
+    const contentWidth = config?.width ?? 0;
     useEffect(() => {
         if (!contentWidth)
             return;
         if (!iframeRef.current)
             return;
-        iframeRef.current.width = `${contentWidth}px`;
+        // iframeRef.current.width = `${contentWidth}px`;
     }, [contentWidth, iframeRef]);
     return { contentWidth };
 };
 
-// Hook 3: Iframe Height Observer
 const useIframeHeight = (props) => {
-    const { iframeRef, contentWidth } = props;
+    const { iframeRef } = props;
     const iframeHeight = useHeatmapVizStore((state) => state.iframeHeight);
     const setIframeHeight = useHeatmapVizStore((state) => state.setIframeHeight);
+    const isRenderViz = useHeatmapVizStore((state) => state.isRenderViz);
     const resizeObserverRef = useRef(null);
     const mutationObserverRef = useRef(null);
     const updateIframeHeight = useCallback(() => {
@@ -933,17 +1224,9 @@ const useIframeHeight = (props) => {
             console.warn('Cannot measure iframe content:', error);
         }
     }, [iframeRef, setIframeHeight]);
-    useEffect(() => {
-        if (contentWidth > 0) {
-            const timeoutId = setTimeout(() => {
-                updateIframeHeight();
-            }, 100);
-            return () => clearTimeout(timeoutId);
-        }
-    }, [contentWidth]);
     useEffect(() => {
         const iframe = iframeRef.current;
-        if (!iframe)
+        if (!iframe || !isRenderViz)
             return;
         const setupObservers = () => {
             try {
@@ -995,7 +1278,7 @@ const useIframeHeight = (props) => {
             }
             iframe.removeEventListener('load', setupObservers);
         };
-    }, [iframeRef, updateIframeHeight]);
+    }, [iframeRef, isRenderViz, updateIframeHeight]);
     return { iframeHeight };
 };
 
@@ -1025,7 +1308,6 @@ const useScrollSync = ({ iframeRef }) => {
             if (iframeWindow && iframeDocument) {
                 const iframeScrollTop = scrollTop / widthScale;
                 iframe.style.top = `${iframeScrollTop}px`;
-                // iframeWindow.scrollTo({ top: iframeScrollTop, behavior: 'smooth' });
             }
         }
         catch (error) {
@@ -1036,13 +1318,14 @@ const useScrollSync = ({ iframeRef }) => {
 };
 
 const useHeatmapScale = (props) => {
+    // const iframeHeight = useHeatmapVizStore((state) => state.iframeHeight);
     const { wrapperRef, iframeRef, visualRef } = props;
     // 1. Observe container dimensions
     const { containerWidth, containerHeight } = useContainerDimensions({ wrapperRef });
     // 2. Get content dimensions from config
     const { contentWidth } = useContentDimensions({ iframeRef });
     // 3. Observe iframe height (now reacts to width changes)
-    const { iframeHeight } = useIframeHeight({ iframeRef, contentWidth });
+    const { iframeHeight } = useIframeHeight({ iframeRef });
     // 4. Calculate scale
     const { scale } = useScaleCalculation({ containerWidth, contentWidth });
     // 5. Setup scroll sync
@@ -1068,7 +1351,8 @@ const BoxStack = forwardRef(({ children, ...props }, ref) => {
     const style = props.style || {};
     const gap = props.gap || 0;
     const height = props.height || 'auto';
-    const zIndex = props.zIndex || 0;
+    const isZIndexDefined = typeof props.zIndex !== undefined;
+    const zIndex = props.zIndex;
     const backgroundColor = props.backgroundColor || 'transparent';
     const styleGap = useMemo(() => {
         switch (flexDirection) {
@@ -1091,8 +1375,8 @@ const BoxStack = forwardRef(({ children, ...props }, ref) => {
         justifyContent,
         alignItems,
         height,
-        zIndex,
         backgroundColor,
+        ...(isZIndexDefined ? { zIndex } : {}),
         ...styleGap,
         ...style,
     };
@@ -1414,11 +1698,12 @@ const VizDomRenderer = ({ mode = 'heatmap' }) => {
 const VizDomContainer = () => {
     const controls = useHeatmapControlStore((state) => state.controls);
     const isRendering = useHeatmapDataStore((state) => state.isRendering);
+    const iframeHeight = useHeatmapVizStore((state) => state.iframeHeight);
     if (isRendering)
         return controls.VizLoading ?? null;
-    return (jsx(BoxStack, { id: "gx-hm-viz-container", flexDirection: "column", flex: "1 1 auto", overflow: "auto", children: jsx(BoxStack, { id: "gx-hm-content", flexDirection: "column", flex: "1 1 auto", overflow: "hidden", style: {
+    return (jsx(BoxStack, { id: "gx-hm-viz-container", flexDirection: "column", flex: "1 1 auto", overflow: "auto", zIndex: 1, children: jsxs(BoxStack, { id: "gx-hm-content", flexDirection: "column", flex: "1 1 auto", overflow: "hidden", style: {
                 minWidth: '394px',
-            }, children: jsx(VizDomRenderer, {}) }) }));
+            }, children: [jsx(VizDomRenderer, {}), iframeHeight === 0 && (jsxs("div", { className: "gx-hm-loading", children: [jsx("div", { className: "gx-hm-loading--spinner" }), jsx("p", { className: "gx-hm-loading--text", children: "Loading visualization..." })] }))] }) }));
 };
 
 const ContentMetricBar = () => {
@@ -1431,6 +1716,7 @@ 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',
@@ -1451,6 +1737,7 @@ const LeftSidebar = () => {
     return (jsx("div", { className: "gx-hm-sidebar", style: {
             height: '100%',
             display: 'flex',
+            zIndex: 1,
             ...(isHideSidebar
                 ? {
                     width: '0',