@gemx-dev/heatmap-react 3.5.92-dev.3 → 3.5.92-dev.30

package/dist/esm/index.js

@@ -152,6 +152,7 @@ function useDebounceCallback(callback, delay) {
 
 var EDeviceType;
 (function (EDeviceType) {
+    EDeviceType["DesktopLarge"] = "DESKTOP_LARGE";
     EDeviceType["Desktop"] = "DESKTOP";
     EDeviceType["Mobile"] = "MOBILE";
     EDeviceType["Tablet"] = "TABLET";
@@ -161,6 +162,11 @@ var EHeatmapType;
     EHeatmapType["Click"] = "click";
     EHeatmapType["Scroll"] = "scroll";
 })(EHeatmapType || (EHeatmapType = {}));
+var EHeatmapMode;
+(function (EHeatmapMode) {
+    EHeatmapMode["Heatmap"] = "heatmap";
+    EHeatmapMode["Replay"] = "replay";
+})(EHeatmapMode || (EHeatmapMode = {}));
 var EClickType;
 (function (EClickType) {
     /** Return all clicks (default) */
@@ -197,12 +203,16 @@ var EScrollType;
     EScrollType["Attention"] = "ATTENTION";
     EScrollType["Revenue"] = "REVENUE";
 })(EScrollType || (EScrollType = {}));
-var EHeatmapMode;
 (function (EHeatmapMode) {
     EHeatmapMode["Single"] = "single";
     EHeatmapMode["Live"] = "live";
     EHeatmapMode["Compare"] = "compare";
 })(EHeatmapMode || (EHeatmapMode = {}));
+var EHeatmapDataSource;
+(function (EHeatmapDataSource) {
+    EHeatmapDataSource["Snapshot"] = "snapshot";
+    EHeatmapDataSource["Live"] = "live";
+})(EHeatmapDataSource || (EHeatmapDataSource = {}));
 
 const ViewIdContext = createContext(undefined);
 const useViewIdContext = () => {
@@ -314,18 +324,21 @@ const useHeatmapConfigStore = create()((set) => {
     return {
         mode: EHeatmapMode.Single,
         sidebarWidth: DEFAULT_SIDEBAR_WIDTH,
-        clickMode: EClickMode.Default,
-        isRendering: true,
+        shopId: undefined,
+        excludeClassNames: [],
         setMode: (mode) => set({ mode }),
         resetMode: () => set({ mode: EHeatmapMode.Single }),
         setSidebarWidth: (sidebarWidth) => set({ sidebarWidth }),
-        setIsRendering: (isRendering) => set({ isRendering }),
+        setShopId: (shopId) => set({ shopId }),
+        setExcludeClassNames: (excludeClassNames) => set({ excludeClassNames }),
     };
 });
 
 const useHeatmapDataStore = create()(subscribeWithSelector((set) => {
     return {
         data: new Map([[DEFAULT_VIEW_ID, undefined]]),
+        dataHash: new Map([[DEFAULT_VIEW_ID, undefined]]),
+        dataSnapshot: new Map([[DEFAULT_VIEW_ID, undefined]]),
         clickmap: new Map([[DEFAULT_VIEW_ID, undefined]]),
         clickAreas: new Map([[DEFAULT_VIEW_ID, undefined]]),
         dataInfo: new Map([[DEFAULT_VIEW_ID, undefined]]),
@@ -358,6 +371,16 @@ const useHeatmapDataStore = create()(subscribeWithSelector((set) => {
             newData.set(viewId, data);
             return { data: newData };
         }),
+        setDataHash: (dataHash, viewId = DEFAULT_VIEW_ID) => set((prev) => {
+            const newDataHash = new Map(prev.dataHash);
+            newDataHash.set(viewId, dataHash);
+            return { dataHash: newDataHash };
+        }),
+        setDataSnapshot: (data, viewId = DEFAULT_VIEW_ID) => set((prev) => {
+            const newDataSnapshot = new Map(prev.dataSnapshot);
+            newDataSnapshot.set(viewId, data);
+            return { dataSnapshot: newDataSnapshot };
+        }),
         setClickmap: (clickmap, viewId = DEFAULT_VIEW_ID) => set((prev) => {
             const newClickmap = new Map(prev.clickmap);
             newClickmap.set(viewId, clickmap);
@@ -380,12 +403,16 @@ const useHeatmapDataStore = create()(subscribeWithSelector((set) => {
         }),
         copyView: (fromViewId, toViewId) => set((prev) => {
             const newData = new Map(prev.data);
+            const newDataSnapshot = new Map(prev.dataSnapshot);
             const newClickmap = new Map(prev.clickmap);
             const newClickAreas = new Map(prev.clickAreas);
             const newDataInfo = new Map(prev.dataInfo);
             const newScrollmap = new Map(prev.scrollmap);
             const newAttentionMap = new Map(prev.attentionMap);
+            const newDataHash = new Map(prev.dataHash);
             newData.set(toViewId, prev.data.get(fromViewId));
+            newDataSnapshot.set(toViewId, prev.dataSnapshot.get(fromViewId));
+            newDataHash.set(toViewId, prev.dataHash.get(fromViewId));
             newClickmap.set(toViewId, prev.clickmap.get(fromViewId));
             newClickAreas.set(toViewId, prev.clickAreas.get(fromViewId));
             newDataInfo.set(toViewId, prev.dataInfo.get(fromViewId));
@@ -393,21 +420,27 @@ const useHeatmapDataStore = create()(subscribeWithSelector((set) => {
             newAttentionMap.set(toViewId, prev.attentionMap.get(fromViewId));
             return {
                 data: newData,
+                dataSnapshot: newDataSnapshot,
                 clickmap: newClickmap,
                 clickAreas: newClickAreas,
                 dataInfo: newDataInfo,
                 scrollmap: newScrollmap,
                 attentionMap: newAttentionMap,
+                dataHash: newDataHash,
             };
         }),
         clearView: (viewId) => set((prev) => {
             const newData = new Map(prev.data);
+            const newDataSnapshot = new Map(prev.dataSnapshot);
             const newClickmap = new Map(prev.clickmap);
             const newClickAreas = new Map(prev.clickAreas);
             const newDataInfo = new Map(prev.dataInfo);
             const newScrollmap = new Map(prev.scrollmap);
             const newAttentionMap = new Map(prev.attentionMap);
+            const newDataHash = new Map(prev.dataHash);
             newData.delete(viewId);
+            newDataSnapshot.delete(viewId);
+            newDataHash.delete(viewId);
             newClickmap.delete(viewId);
             newClickAreas.delete(viewId);
             newDataInfo.delete(viewId);
@@ -415,6 +448,8 @@ const useHeatmapDataStore = create()(subscribeWithSelector((set) => {
             newAttentionMap.delete(viewId);
             return {
                 data: newData,
+                dataSnapshot: newDataSnapshot,
+                dataHash: newDataHash,
                 clickmap: newClickmap,
                 clickAreas: newClickAreas,
                 dataInfo: newDataInfo,
@@ -424,6 +459,8 @@ const useHeatmapDataStore = create()(subscribeWithSelector((set) => {
         }),
         resetAll: () => set({
             data: new Map([[DEFAULT_VIEW_ID, undefined]]),
+            dataSnapshot: new Map([[DEFAULT_VIEW_ID, undefined]]),
+            dataHash: new Map([[DEFAULT_VIEW_ID, undefined]]),
             clickmap: new Map([[DEFAULT_VIEW_ID, undefined]]),
             clickAreas: new Map([[DEFAULT_VIEW_ID, undefined]]),
             dataInfo: new Map([[DEFAULT_VIEW_ID, undefined]]),
@@ -445,6 +482,7 @@ const useHeatmapSettingStore = create()(subscribeWithSelector((set) => {
         clickMode: new Map([[DEFAULT_VIEW_ID, EClickMode.Default]]),
         scrollType: new Map([[DEFAULT_VIEW_ID, EScrollType.Depth]]),
         heatmapType: new Map([[DEFAULT_VIEW_ID, EHeatmapType.Click]]),
+        dataSource: new Map([[DEFAULT_VIEW_ID, EHeatmapDataSource.Snapshot]]),
         setIsRendering: (isRendering, viewId = DEFAULT_VIEW_ID) => set((prev) => {
             const newIsRendering = new Map(prev.isRendering);
             newIsRendering.set(viewId, isRendering);
@@ -495,6 +533,11 @@ const useHeatmapSettingStore = create()(subscribeWithSelector((set) => {
             newHeatmapType.set(viewId, heatmapType);
             return { heatmapType: newHeatmapType };
         }),
+        setDataSource: (dataSource, viewId = DEFAULT_VIEW_ID) => set((prev) => {
+            const newDataSource = new Map(prev.dataSource);
+            newDataSource.set(viewId, dataSource);
+            return { dataSource: newDataSource };
+        }),
         copyView: (fromViewId, toViewId) => set((prev) => {
             const newIsLoadingDom = new Map(prev.isLoadingDom);
             const newIsLoadingCanvas = new Map(prev.isLoadingCanvas);
@@ -505,6 +548,7 @@ const useHeatmapSettingStore = create()(subscribeWithSelector((set) => {
             const newClickMode = new Map(prev.clickMode);
             const newScrollType = new Map(prev.scrollType);
             const newHeatmapType = new Map(prev.heatmapType);
+            const newDataSource = new Map(prev.dataSource);
             newIsShowSidebar.set(toViewId, prev.isShowSidebar.get(fromViewId) ?? false);
             newRankedBy.set(toViewId, prev.rankedBy.get(fromViewId));
             newDeviceType.set(toViewId, prev.deviceType.get(fromViewId));
@@ -514,6 +558,7 @@ const useHeatmapSettingStore = create()(subscribeWithSelector((set) => {
             newHeatmapType.set(toViewId, prev.heatmapType.get(fromViewId));
             newIsLoadingDom.set(toViewId, prev.isLoadingDom.get(fromViewId) ?? false);
             newIsLoadingCanvas.set(toViewId, prev.isLoadingCanvas.get(fromViewId) ?? false);
+            newDataSource.set(toViewId, prev.dataSource.get(fromViewId) ?? EHeatmapDataSource.Snapshot);
             return {
                 isShowSidebar: newIsShowSidebar,
                 rankedBy: newRankedBy,
@@ -524,6 +569,7 @@ const useHeatmapSettingStore = create()(subscribeWithSelector((set) => {
                 clickMode: newClickMode,
                 scrollType: newScrollType,
                 heatmapType: newHeatmapType,
+                dataSource: newDataSource,
             };
         }),
         clearView: (viewId) => set((prev) => {
@@ -536,6 +582,7 @@ const useHeatmapSettingStore = create()(subscribeWithSelector((set) => {
             const newClickMode = new Map(prev.clickMode);
             const newScrollType = new Map(prev.scrollType);
             const newHeatmapType = new Map(prev.heatmapType);
+            const newDataSource = new Map(prev.dataSource);
             newIsShowSidebar.delete(viewId);
             newRankedBy.delete(viewId);
             newIsLoadingDom.delete(viewId);
@@ -545,6 +592,7 @@ const useHeatmapSettingStore = create()(subscribeWithSelector((set) => {
             newClickMode.delete(viewId);
             newScrollType.delete(viewId);
             newHeatmapType.delete(viewId);
+            newDataSource.delete(viewId);
             return {
                 isShowSidebar: newIsShowSidebar,
                 rankedBy: newRankedBy,
@@ -555,6 +603,7 @@ const useHeatmapSettingStore = create()(subscribeWithSelector((set) => {
                 clickMode: newClickMode,
                 scrollType: newScrollType,
                 heatmapType: newHeatmapType,
+                dataSource: newDataSource,
             };
         }),
         resetAll: () => set({
@@ -568,22 +617,23 @@ const useHeatmapSettingStore = create()(subscribeWithSelector((set) => {
             clickMode: new Map([[DEFAULT_VIEW_ID, EClickMode.Default]]),
             scrollType: new Map([[DEFAULT_VIEW_ID, EScrollType.Depth]]),
             heatmapType: new Map([[DEFAULT_VIEW_ID, EHeatmapType.Click]]),
+            dataSource: new Map([[DEFAULT_VIEW_ID, EHeatmapDataSource.Snapshot]]),
         }),
     };
 }));
 
 const useHeatmapVizStore = create()(subscribeWithSelector((set) => {
     return {
-        isRenderViz: new Map([[DEFAULT_VIEW_ID, false]]),
+        isDomLoaded: new Map([[DEFAULT_VIEW_ID, false]]),
         zoomRatio: new Map([[DEFAULT_VIEW_ID, DEFAULT_ZOOM_RATIO.DEFAULT]]),
         minZoomRatio: new Map([[DEFAULT_VIEW_ID, DEFAULT_ZOOM_RATIO.MIN]]),
         maxZoomRatio: new Map([[DEFAULT_VIEW_ID, DEFAULT_ZOOM_RATIO.MAX]]),
         scale: new Map([[DEFAULT_VIEW_ID, 1]]),
         isScaledToFit: new Map([[DEFAULT_VIEW_ID, false]]),
-        setIsRenderViz: (isRenderViz, viewId = DEFAULT_VIEW_ID) => set((prev) => {
-            const newIsRenderViz = new Map(prev.isRenderViz);
-            newIsRenderViz.set(viewId, isRenderViz);
-            return { isRenderViz: newIsRenderViz };
+        setIsDomLoaded: (isDomLoaded, viewId = DEFAULT_VIEW_ID) => set((prev) => {
+            const newIsDomLoaded = new Map(prev.isDomLoaded);
+            newIsDomLoaded.set(viewId, isDomLoaded);
+            return { isDomLoaded: newIsDomLoaded };
         }),
         setZoomRatio: (zoomRatio, viewId = DEFAULT_VIEW_ID) => set((prev) => {
             const newZoomRatio = new Map(prev.zoomRatio);
@@ -611,18 +661,18 @@ const useHeatmapVizStore = create()(subscribeWithSelector((set) => {
             return { isScaledToFit: newIsScaledToFit };
         }),
         copyView: (fromViewId, toViewId) => set((prev) => {
-            const newIsRenderViz = new Map(prev.isRenderViz);
+            const newIsDomLoaded = new Map(prev.isDomLoaded);
             const newZoomRatio = new Map(prev.zoomRatio);
             const newMinZoomRatio = new Map(prev.minZoomRatio);
             const newScale = new Map(prev.scale);
             const newIsScaledToFit = new Map(prev.isScaledToFit);
-            newIsRenderViz.set(toViewId, prev.isRenderViz.get(fromViewId) ?? false);
+            newIsDomLoaded.set(toViewId, prev.isDomLoaded.get(fromViewId) ?? false);
             newZoomRatio.set(toViewId, prev.zoomRatio.get(fromViewId) ?? 100);
             newMinZoomRatio.set(toViewId, prev.minZoomRatio.get(fromViewId) ?? 10);
             newScale.set(toViewId, prev.scale.get(fromViewId) ?? 1);
             newIsScaledToFit.set(toViewId, prev.isScaledToFit.get(fromViewId) ?? false);
             return {
-                isRenderViz: newIsRenderViz,
+                isDomLoaded: newIsDomLoaded,
                 zoomRatio: newZoomRatio,
                 minZoomRatio: newMinZoomRatio,
                 scale: newScale,
@@ -630,18 +680,18 @@ const useHeatmapVizStore = create()(subscribeWithSelector((set) => {
             };
         }),
         clearView: (viewId) => set((prev) => {
-            const newIsRenderViz = new Map(prev.isRenderViz);
+            const newIsDomLoaded = new Map(prev.isDomLoaded);
             const newZoomRatio = new Map(prev.zoomRatio);
             const newMinZoomRatio = new Map(prev.minZoomRatio);
             const newScale = new Map(prev.scale);
             const newIsScaledToFit = new Map(prev.isScaledToFit);
-            newIsRenderViz.delete(viewId);
+            newIsDomLoaded.delete(viewId);
             newZoomRatio.delete(viewId);
             newMinZoomRatio.delete(viewId);
             newScale.delete(viewId);
             newIsScaledToFit.delete(viewId);
             return {
-                isRenderViz: newIsRenderViz,
+                isDomLoaded: newIsDomLoaded,
                 zoomRatio: newZoomRatio,
                 minZoomRatio: newMinZoomRatio,
                 scale: newScale,
@@ -649,7 +699,7 @@ const useHeatmapVizStore = create()(subscribeWithSelector((set) => {
             };
         }),
         resetAll: () => set({
-            isRenderViz: new Map([[DEFAULT_VIEW_ID, false]]),
+            isDomLoaded: new Map([[DEFAULT_VIEW_ID, false]]),
             zoomRatio: new Map([[DEFAULT_VIEW_ID, 100]]),
             minZoomRatio: new Map([[DEFAULT_VIEW_ID, 10]]),
             scale: new Map([[DEFAULT_VIEW_ID, 1]]),
@@ -1047,24 +1097,108 @@ const useHeatmapCompareStore = create()((set, get) => {
 });
 
 const initialState = {
-    payloads: [],
-    htmlContent: '',
-    targetUrl: '',
-    renderMode: 'portal',
-    storefrontPassword: '',
-};
-const useHeatmapLiveStore = create()((set) => {
-    return {
-        ...initialState,
-        reset: () => set(initialState),
-        setPayloads: (payloads) => set({ payloads }),
-        addPayload: (payload) => set((state) => ({ payloads: [...state.payloads, payload] })),
-        setHtmlContent: (htmlContent) => set({ htmlContent }),
-        setTargetUrl: (targetUrl) => set({ targetUrl }),
-        setRenderMode: (renderMode) => set({ renderMode }),
-        setStorefrontPassword: (storefrontPassword) => set({ storefrontPassword }),
-    };
-});
+    decodedPayloads: new Map([[DEFAULT_VIEW_ID, []]]),
+    encodedPayloads: new Map([[DEFAULT_VIEW_ID, []]]),
+    htmlContent: new Map([[DEFAULT_VIEW_ID, '']]),
+    targetUrl: new Map([[DEFAULT_VIEW_ID, '']]),
+    renderMode: new Map([[DEFAULT_VIEW_ID, 'portal']]),
+    storefrontPassword: new Map([[DEFAULT_VIEW_ID, '']]),
+};
+const useHeatmapLiveStore = create()(subscribeWithSelector((set) => ({
+    ...initialState,
+    addPayload: (payload, viewId = DEFAULT_VIEW_ID) => set((prev) => {
+        const newDecoded = new Map(prev.decodedPayloads);
+        newDecoded.set(viewId, [...(newDecoded.get(viewId) ?? []), payload]);
+        const newEncoded = new Map(prev.encodedPayloads);
+        newEncoded.set(viewId, [...(newEncoded.get(viewId) ?? []), JSON.stringify(payload)]);
+        return { decodedPayloads: newDecoded, encodedPayloads: newEncoded };
+    }),
+    setPayloads: (payloads, viewId = DEFAULT_VIEW_ID) => set((prev) => {
+        const newDecoded = new Map(prev.decodedPayloads);
+        newDecoded.set(viewId, payloads);
+        const newEncoded = new Map(prev.encodedPayloads);
+        newEncoded.set(viewId, payloads.map((p) => JSON.stringify(p)));
+        return { decodedPayloads: newDecoded, encodedPayloads: newEncoded };
+    }),
+    setEncodedPayloads: (payloads, viewId = DEFAULT_VIEW_ID) => set((prev) => {
+        const newEncoded = new Map(prev.encodedPayloads);
+        newEncoded.set(viewId, payloads);
+        return { encodedPayloads: newEncoded };
+    }),
+    setHtmlContent: (htmlContent, viewId = DEFAULT_VIEW_ID) => set((prev) => {
+        const newHtmlContent = new Map(prev.htmlContent);
+        newHtmlContent.set(viewId, htmlContent);
+        return { htmlContent: newHtmlContent };
+    }),
+    setTargetUrl: (targetUrl, viewId = DEFAULT_VIEW_ID) => set((prev) => {
+        const newTargetUrl = new Map(prev.targetUrl);
+        newTargetUrl.set(viewId, targetUrl);
+        return { targetUrl: newTargetUrl };
+    }),
+    setRenderMode: (renderMode, viewId = DEFAULT_VIEW_ID) => set((prev) => {
+        const newRenderMode = new Map(prev.renderMode);
+        newRenderMode.set(viewId, renderMode);
+        return { renderMode: newRenderMode };
+    }),
+    setStorefrontPassword: (storefrontPassword, viewId = DEFAULT_VIEW_ID) => set((prev) => {
+        const newStorefrontPassword = new Map(prev.storefrontPassword);
+        newStorefrontPassword.set(viewId, storefrontPassword);
+        return { storefrontPassword: newStorefrontPassword };
+    }),
+    resetView: (viewId = DEFAULT_VIEW_ID) => set((prev) => {
+        const newDecoded = new Map(prev.decodedPayloads);
+        newDecoded.set(viewId, []);
+        const newEncoded = new Map(prev.encodedPayloads);
+        newEncoded.set(viewId, []);
+        return { decodedPayloads: newDecoded, encodedPayloads: newEncoded };
+    }),
+    copyView: (fromViewId, toViewId) => set((prev) => {
+        const newDecoded = new Map(prev.decodedPayloads);
+        const newEncoded = new Map(prev.encodedPayloads);
+        const newHtmlContent = new Map(prev.htmlContent);
+        const newTargetUrl = new Map(prev.targetUrl);
+        const newRenderMode = new Map(prev.renderMode);
+        const newStorefrontPassword = new Map(prev.storefrontPassword);
+        newDecoded.set(toViewId, prev.decodedPayloads.get(fromViewId) ?? []);
+        newEncoded.set(toViewId, prev.encodedPayloads.get(fromViewId) ?? []);
+        newHtmlContent.set(toViewId, prev.htmlContent.get(fromViewId) ?? '');
+        newTargetUrl.set(toViewId, prev.targetUrl.get(fromViewId) ?? '');
+        newRenderMode.set(toViewId, prev.renderMode.get(fromViewId) ?? 'portal');
+        newStorefrontPassword.set(toViewId, prev.storefrontPassword.get(fromViewId) ?? '');
+        return {
+            decodedPayloads: newDecoded,
+            encodedPayloads: newEncoded,
+            htmlContent: newHtmlContent,
+            targetUrl: newTargetUrl,
+            renderMode: newRenderMode,
+            storefrontPassword: newStorefrontPassword,
+        };
+    }),
+    clearView: (viewId) => set((prev) => {
+        const newDecoded = new Map(prev.decodedPayloads);
+        const newEncoded = new Map(prev.encodedPayloads);
+        const newHtmlContent = new Map(prev.htmlContent);
+        const newTargetUrl = new Map(prev.targetUrl);
+        const newRenderMode = new Map(prev.renderMode);
+        const newStorefrontPassword = new Map(prev.storefrontPassword);
+        newDecoded.delete(viewId);
+        newEncoded.delete(viewId);
+        newHtmlContent.delete(viewId);
+        newTargetUrl.delete(viewId);
+        newRenderMode.delete(viewId);
+        newStorefrontPassword.delete(viewId);
+        return {
+            decodedPayloads: newDecoded,
+            encodedPayloads: newEncoded,
+            htmlContent: newHtmlContent,
+            targetUrl: newTargetUrl,
+            renderMode: newRenderMode,
+            storefrontPassword: newStorefrontPassword,
+        };
+    }),
+    resetAll: () => set(initialState),
+    reset: () => set(initialState),
+})));
 
 const useHeatmapVizRectStore = create()(subscribeWithSelector((set) => {
     return {
@@ -1170,26 +1304,12 @@ const useHeatmapClickContext = createViewContextHook({
     }),
 });
 
-/**
- * Hook to access heatmap data state and actions with optional selector
- *
- * @example
- * ```tsx
- * // Get everything
- * const { data, clickmap, setData } = useHeatmapDataContext();
- *
- * // Get only what you need (no unnecessary re-renders)
- * const data = useHeatmapDataContext(s => s.data);
- * const { setData, setClickmap } = useHeatmapDataContext(s => ({
- *   setData: s.setData,
- *   setClickmap: s.setClickmap,
- * }));
- * ```
- */
 const useHeatmapDataContext = createViewContextHook({
     useStore: useHeatmapDataStore,
     getState: (store, viewId) => ({
         data: store.data.get(viewId),
+        dataHash: store.dataHash.get(viewId),
+        dataSnapshot: store.dataSnapshot.get(viewId),
         clickmap: store.clickmap.get(viewId),
         clickAreas: store.clickAreas.get(viewId),
         scrollmap: store.scrollmap.get(viewId),
@@ -1199,6 +1319,8 @@ const useHeatmapDataContext = createViewContextHook({
     }),
     getActions: (store, viewId) => ({
         setData: (newData) => store.setData(newData, viewId),
+        setDataSnapshot: (newData) => store.setDataSnapshot(newData, viewId),
+        setDataHash: (newHash) => store.setDataHash(newHash, viewId),
         setClickmap: (newClickmap) => store.setClickmap(newClickmap, viewId),
         setClickAreas: (newClickAreas) => store.setClickAreas(newClickAreas, viewId),
         setDataInfoByKey: (key, value) => store.setDataInfoByKey(key, value, viewId),
@@ -1221,6 +1343,32 @@ const useHeatmapHoverContext = createViewContextHook({
     }),
 });
 
+const useHeatmapLiveContext = createViewContextHook({
+    useStore: useHeatmapLiveStore,
+    getState: (store, viewId) => ({
+        decodedPayloads: store.decodedPayloads.get(viewId) ?? [],
+        encodedPayloads: store.encodedPayloads.get(viewId) ?? [],
+        htmlContent: store.htmlContent.get(viewId) ?? '',
+        targetUrl: store.targetUrl.get(viewId) ?? '',
+        renderMode: store.renderMode.get(viewId) ?? 'portal',
+        storefrontPassword: store.storefrontPassword.get(viewId) ?? '',
+    }),
+    getActions: (store, viewId) => ({
+        addPayload: (payload) => store.addPayload(payload, viewId),
+        setPayloads: (payloads) => store.setPayloads(payloads, viewId),
+        setEncodedPayloads: (payloads) => store.setEncodedPayloads(payloads, viewId),
+        setHtmlContent: (htmlContent) => store.setHtmlContent(htmlContent, viewId),
+        setTargetUrl: (targetUrl) => store.setTargetUrl(targetUrl, viewId),
+        setRenderMode: (mode) => store.setRenderMode(mode, viewId),
+        setStorefrontPassword: (password) => store.setStorefrontPassword(password, viewId),
+        resetView: () => store.resetView(viewId),
+        copyView: (fromViewId, toViewId) => store.copyView(fromViewId, toViewId),
+        clearView: (viewId) => store.clearView(viewId),
+        resetAll: () => store.resetAll(),
+        reset: () => store.reset(),
+    }),
+});
+
 const useHeatmapScrollContext = createViewContextHook({
     useStore: useHeatmapVizScrollStore,
     getState: (store, viewId) => ({
@@ -1250,6 +1398,7 @@ const useHeatmapSettingContext = createViewContextHook({
         clickMode: store.clickMode.get(viewId),
         scrollType: store.scrollType.get(viewId),
         heatmapType: store.heatmapType.get(viewId),
+        dataSource: store.dataSource.get(viewId) ?? EHeatmapDataSource.Snapshot,
     }),
     getActions: (store, viewId) => ({
         setIsShowSidebar: (isShowSidebar) => store.setIsShowSidebar(isShowSidebar, viewId),
@@ -1262,6 +1411,7 @@ const useHeatmapSettingContext = createViewContextHook({
         setIsRendering: (isRendering) => store.setIsRendering(isRendering, viewId),
         setIsLoadingDom: (isLoadingDom) => store.setIsLoadingDom(isLoadingDom, viewId),
         setIsLoadingCanvas: (isLoadingCanvas) => store.setIsLoadingCanvas(isLoadingCanvas, viewId),
+        setDataSource: (dataSource) => store.setDataSource(dataSource, viewId),
         clearView: (viewId) => store.clearView(viewId),
     }),
 });
@@ -1269,7 +1419,7 @@ const useHeatmapSettingContext = createViewContextHook({
 const useHeatmapVizContext = createViewContextHook({
     useStore: useHeatmapVizStore,
     getState: (store, viewId) => ({
-        isRenderViz: store.isRenderViz.get(viewId) ?? false,
+        isDomLoaded: store.isDomLoaded.get(viewId) ?? false,
         zoomRatio: store.zoomRatio.get(viewId) ?? DEFAULT_ZOOM_RATIO.DEFAULT,
         minZoomRatio: store.minZoomRatio.get(viewId) ?? DEFAULT_ZOOM_RATIO.MIN,
         maxZoomRatio: store.maxZoomRatio.get(viewId) ?? DEFAULT_ZOOM_RATIO.MAX,
@@ -1277,7 +1427,7 @@ const useHeatmapVizContext = createViewContextHook({
         isScaledToFit: store.isScaledToFit.get(viewId) ?? false,
     }),
     getActions: (store, viewId) => ({
-        setIsRenderViz: (value) => store.setIsRenderViz(value, viewId),
+        setIsDomLoaded: (value) => store.setIsDomLoaded(value, viewId),
         setZoomRatio: (value) => store.setZoomRatio(value, viewId),
         setMinZoomRatio: (value) => store.setMinZoomRatio(value, viewId),
         setMaxZoomRatio: (value) => store.setMaxZoomRatio(value, viewId),
@@ -1311,9 +1461,7 @@ const useHeatmapCopyView = () => {
     const copyVizView = useHeatmapVizStore((state) => state.copyView);
     const copyVizClickView = useHeatmapVizClickStore((state) => state.copyView);
     const copyVizAreaClickView = useHeatmapVizClickAreaStore((state) => state.copyView);
-    // const copyVizRectView = useHeatmapVizRectStore((state) => state.copyView);
-    // const copyVizHoverView = useHeatmapVizHoverStore((state) => state.copyView);
-    // const copyVizScrollView = useHeatmapVizScrollStore((state) => state.copyView);
+    const copyLiveView = useHeatmapLiveStore((state) => state.copyView);
     const clearDataView = useHeatmapDataStore((state) => state.clearView);
     const clearSettingView = useHeatmapSettingStore((state) => state.clearView);
     const clearVizView = useHeatmapVizStore((state) => state.clearView);
@@ -1322,6 +1470,7 @@ const useHeatmapCopyView = () => {
     const clearVizHoverView = useHeatmapVizHoverStore((state) => state.clearView);
     const clearVizScrollView = useHeatmapVizScrollStore((state) => state.clearView);
     const clearVizAreaClickView = useHeatmapVizClickAreaStore((state) => state.clearView);
+    const clearLiveView = useHeatmapLiveStore((state) => state.clearView);
     const resetDataAll = useHeatmapDataStore((state) => state.resetAll);
     const resetSettingAll = useHeatmapSettingStore((state) => state.resetAll);
     const resetVizAll = useHeatmapVizStore((state) => state.resetAll);
@@ -1330,15 +1479,14 @@ const useHeatmapCopyView = () => {
     const resetVizHoverAll = useHeatmapVizHoverStore((state) => state.resetAll);
     const resetVizScrollViewAll = useHeatmapVizScrollStore((state) => state.resetAll);
     const resetVizClickAreaAll = useHeatmapVizClickAreaStore((state) => state.resetAll);
+    const resetLiveAll = useHeatmapLiveStore((state) => state.resetAll);
     const copyView = (fromViewId, toViewId) => {
         copyDataView(fromViewId, toViewId);
         copySettingView(fromViewId, toViewId);
         copyVizView(fromViewId, toViewId);
-        // copyVizRectView(fromViewId, toViewId);
         copyVizClickView(fromViewId, toViewId);
-        // copyVizHoverView(fromViewId, toViewId);
-        // copyVizScrollView(fromViewId, toViewId);
         copyVizAreaClickView(fromViewId, toViewId);
+        copyLiveView(fromViewId, toViewId);
     };
     const copyViewToMultiple = (fromViewId, toViewIds) => {
         toViewIds.forEach((toViewId) => {
@@ -1354,6 +1502,7 @@ const useHeatmapCopyView = () => {
         clearVizHoverView(viewId);
         clearVizScrollView(viewId);
         clearVizAreaClickView(viewId);
+        clearLiveView(viewId);
     };
     const clearMultipleViews = (viewIds) => {
         viewIds.forEach((viewId) => {
@@ -1369,6 +1518,7 @@ const useHeatmapCopyView = () => {
         resetVizHoverAll();
         resetVizScrollViewAll();
         resetVizClickAreaAll();
+        resetLiveAll();
     };
     return {
         copyView,
@@ -1379,14 +1529,17 @@ const useHeatmapCopyView = () => {
     };
 };
 
-const useHeatmapWidthByDevice = () => {
+const useHeatmapViewportByDevice = () => {
     const deviceType = useHeatmapSettingContext((state) => state.deviceType);
     const width = useMemo(() => calcWidthByDeviceType(deviceType), [deviceType]);
-    return width;
+    const height = useMemo(() => calcHeightByDeviceType(deviceType), [deviceType]);
+    return { width, height };
     function calcWidthByDeviceType(deviceType) {
         if (!deviceType)
             return 1440;
         switch (deviceType) {
+            case EDeviceType.DesktopLarge:
+                return 1920;
             case EDeviceType.Desktop:
                 return 1440;
             case EDeviceType.Tablet:
@@ -1395,20 +1548,45 @@ const useHeatmapWidthByDevice = () => {
                 return 375;
         }
     }
+    function calcHeightByDeviceType(deviceType) {
+        if (!deviceType)
+            return 900;
+        switch (deviceType) {
+            case EDeviceType.DesktopLarge:
+                return 1080; // 1920×1080
+            case EDeviceType.Desktop:
+                return 900; // 1440×900
+            case EDeviceType.Tablet:
+                return 1024; // 768×1024 (iPad portrait)
+            case EDeviceType.Mobile:
+                return 812; // 375×812 (iPhone X/11/12/13)
+        }
+    }
 };
 
-const useRegisterConfig = ({ isLoading, isLoadingCanvas, }) => {
+const useRegisterConfig = ({ shopId, isLoading, isLoadingCanvas, excludeClassNames, }) => {
     const mode = useHeatmapConfigStore((state) => state.mode);
+    const shopIdStore = useHeatmapConfigStore((state) => state.shopId);
     const deviceType = useHeatmapSettingContext((state) => state.deviceType);
     const sidebarWidth = useHeatmapConfigStore((state) => state.sidebarWidth);
     const setIsRendering = useHeatmapSettingContext((state) => state.setIsRendering);
     const setIsLoadingDom = useHeatmapSettingContext((state) => state.setIsLoadingDom);
     const setIsLoadingCanvas = useHeatmapSettingContext((state) => state.setIsLoadingCanvas);
+    const setShopId = useHeatmapConfigStore((state) => state.setShopId);
+    const setExcludeClassNames = useHeatmapConfigStore((state) => state.setExcludeClassNames);
+    useEffect(() => {
+        if (!shopId || !!shopIdStore || shopIdStore === shopId)
+            return;
+        setShopId(shopId);
+    }, [shopId, setShopId, shopIdStore]);
+    useEffect(() => {
+        setExcludeClassNames(excludeClassNames || []);
+    }, [excludeClassNames, setExcludeClassNames]);
     useEffect(() => {
         setIsRendering(true);
         setTimeout(() => {
             setIsRendering(false);
-        }, 100);
+        }, 500);
     }, [mode, deviceType, sidebarWidth]); // eslint-disable-line react-hooks/exhaustive-deps
     useEffect(() => {
         setIsRendering(!!isLoading);
@@ -1499,30 +1677,15 @@ const drawBackdropWithCutout = (options) => {
     const height = Math.min(canvasHeight - top, activeRect.height + cutoutExpansion * 2);
     // Clear previous drawing
     ctx.clearRect(0, 0, canvasWidth, canvasHeight);
-    // Set backdrop style
+    // Draw backdrop as a single path with a cutout hole using evenodd fill rule.
+    // This avoids seam artifacts that appear when using 4 separate rectangles
+    // with fractional coordinates (sub-pixel gaps at rect boundaries).
     ctx.fillStyle = backdropColor;
     ctx.globalAlpha = backdropOpacity;
-    // Draw backdrop in 4 rectangles around the active element
-    // This creates a cutout effect
-    // Top rectangle (above active element)
-    if (top > 0) {
-        ctx.fillRect(0, 0, canvasWidth, top);
-    }
-    // Bottom rectangle (below active element)
-    const bottomY = top + height;
-    if (bottomY < canvasHeight) {
-        ctx.fillRect(0, bottomY, canvasWidth, canvasHeight - bottomY);
-    }
-    // Left rectangle (left of active element)
-    if (left > 0) {
-        ctx.fillRect(0, top, left, height);
-    }
-    // Right rectangle (right of active element)
-    const rightX = left + width;
-    if (rightX < canvasWidth) {
-        ctx.fillRect(rightX, top, canvasWidth - rightX, height);
-    }
-    // Reset alpha
+    ctx.beginPath();
+    ctx.rect(0, 0, canvasWidth, canvasHeight); // outer (full canvas)
+    ctx.rect(left, top, width, height); // inner (cutout hole)
+    ctx.fill('evenodd');
     ctx.globalAlpha = 1.0;
 };
 /**
@@ -1630,6 +1793,8 @@ const getElementAtPoint = (doc, x, y) => {
     return element;
 };
 function getElementHash(element) {
+    if (!element)
+        return null;
     return element.getAttribute('data-clarity-hashbeta') || element.getAttribute('data-clarity-hashalpha');
 }
 
@@ -1770,7 +1935,7 @@ class Logger {
     }
 }
 // Export singleton instance
-const logger$9 = new Logger();
+const logger$3 = new Logger();
 // Export factory function để tạo logger với config riêng
 function createLogger(config = {}) {
     const instance = new Logger();
@@ -2159,7 +2324,7 @@ function findElementByHash(props) {
         }
     }
     catch (error) {
-        logger$9.warn(`Invalid selector "${selector}":`, error);
+        logger$3.warn(`Invalid selector "${selector}":`, error);
     }
     const elementByHash = iframeDocument.querySelector(`[data-clarity-hashalpha="${hash}"], [data-clarity-hash="${hash}"], [data-clarity-hashbeta="${hash}"]`);
     return elementByHash;
@@ -2181,7 +2346,7 @@ function hydrateAreaNode(props) {
     const { id, hash, selector } = persistedData;
     const element = findElementByHash({ hash, selector, iframeDocument, vizRef });
     if (!element) {
-        logger$9.warn(`Cannot hydrate area ${id}: element not found for hash ${hash} or selector ${selector}`);
+        logger$3.warn(`Cannot hydrate area ${id}: element not found for hash ${hash} or selector ${selector}`);
         return null;
     }
     const areaNode = buildAreaNode(element, hash, heatmapInfo, shadowRoot, persistedData);
@@ -2198,7 +2363,7 @@ function hydrateAreas(props) {
             hydratedAreas.push(area);
         }
     }
-    logger$9.info(`Hydrated ${hydratedAreas.length} of ${clickAreas.length} persisted areas`);
+    logger$3.info(`Hydrated ${hydratedAreas.length} of ${clickAreas.length} persisted areas`);
     return hydratedAreas;
 }
 /**
@@ -2902,16 +3067,16 @@ const calcCalloutPositionAbsolute = (props) => {
 
 function validateAreaCreation(dataInfo, hash, areas) {
     if (!dataInfo?.clickMapMetrics || !dataInfo?.totalClicks) {
-        logger$9.warn('Cannot create area: missing heatmap data');
+        logger$3.warn('Cannot create area: missing heatmap data');
         return false;
     }
     if (!hash) {
-        logger$9.warn('Cannot create area: missing hash');
+        logger$3.warn('Cannot create area: missing hash');
         return false;
     }
     const alreadyExists = areas.some((area) => area.hash === hash);
     if (alreadyExists) {
-        logger$9.warn(`Area already exists for element: ${hash}`);
+        logger$3.warn(`Area already exists for element: ${hash}`);
         return false;
     }
     return true;
@@ -2924,14 +3089,14 @@ function identifyConflictingAreas(area) {
     // Case 1: New area is a child of an existing area
     if (area.parentNode) {
         conflicts.parentId = area.parentNode.id;
-        logger$9.info(`New area "${area.selector}" is a child of existing area "${area.parentNode.selector}". Will remove parent.`);
+        logger$3.info(`New area "${area.selector}" is a child of existing area "${area.parentNode.selector}". Will remove parent.`);
     }
     // Case 2: New area is a parent of existing area(s)
     if (area.childNodes.size > 0) {
         area.childNodes.forEach((childArea) => {
             conflicts.childrenIds.push(childArea.id);
         });
-        logger$9.info(`New area "${area.selector}" is a parent of ${area.childNodes.size} existing area(s). Will remove children.`);
+        logger$3.info(`New area "${area.selector}" is a parent of ${area.childNodes.size} existing area(s). Will remove children.`);
     }
     return conflicts;
 }
@@ -2982,7 +3147,7 @@ function useAreaCreation(options = {}) {
             }
         }
         catch (error) {
-            logger$9.error('Failed to create area:', error);
+            logger$3.error('Failed to create area:', error);
         }
     }, [dataInfo, areas, addArea, removeArea, removeClickArea, customShadowRoot, onAreaCreated]);
     return {
@@ -3043,7 +3208,7 @@ function useAreaEditMode({ iframeRef, onAreaCreatedElement, enabled = false, })
         }
         iframeDocument.addEventListener('mousemove', handleMouseMove);
         iframeDocument.addEventListener('scroll', handleMouseLeave);
-        iframeDocument.removeEventListener('mouseleave', handleMouseLeave);
+        iframeDocument.addEventListener('mouseleave', handleMouseLeave);
         iframeDocument.addEventListener('click', handleClick);
         return () => {
             iframeDocument.removeEventListener('mousemove', handleMouseMove);
@@ -3097,16 +3262,16 @@ function useAreaHydration(options) {
             return;
         if (!dataInfo)
             return;
-        logger$9.info(`Hydrating ${clickAreas.length} persisted areas...`);
+        logger$3.info(`Hydrating ${clickAreas.length} persisted areas...`);
         const hydratedAreas = hydrateAreas({ clickAreas, heatmapInfo: dataInfo, vizRef, shadowRoot });
         if (!hydratedAreas?.length) {
-            logger$9.warn('No areas could be hydrated - all elements may have been removed from DOM');
+            logger$3.warn('No areas could be hydrated - all elements may have been removed from DOM');
             return;
         }
         setIsInitializing(true);
         buildAreaGraph(hydratedAreas);
         setAreas(hydratedAreas);
-        logger$9.info(`Successfully hydrated ${hydratedAreas.length} areas`);
+        logger$3.info(`Successfully hydrated ${hydratedAreas.length} areas`);
     }, [dataInfo, vizRef, isInitializing, clickAreas]);
     useEffect(() => {
         if (!enabled)
@@ -3240,7 +3405,7 @@ function useAreaRectSync(options) {
                 area.rect.update(newRect);
             }
             catch (error) {
-                logger$9.error(`Failed to update rect for area ${area.id}:`, error);
+                logger$3.error(`Failed to update rect for area ${area.id}:`, error);
             }
         });
         buildAreaGraph(areas);
@@ -3329,34 +3494,41 @@ const useAreaTopAutoDetect = (props) => {
 const useAreaClickmap = () => {
     const vizRef = useHeatmapVizRectContext((s) => s.vizRef);
     const clickmap = useHeatmapDataContext((s) => s.clickmap);
+    const isDomLoaded = useHeatmapVizContext((s) => s.isDomLoaded);
     const start = useCallback(() => {
-        if (!vizRef || !clickmap || clickmap.length === 0)
+        if (!vizRef || !clickmap || !isDomLoaded)
             return;
         try {
             vizRef?.clearmap?.();
+            if (clickmap.length === 0)
+                return;
+            // implement area clickmap
+            // requestIdleCallback(() => vizRef?.areaClickmap?.(clickmap), { timeout: 300 });
         }
         catch (error) {
-            console.error(`🚀 🐥 ~ useAreaClickmap ~ error:`, error);
+            console.error(`useAreaClickmap ~ error:`, error);
         }
-    }, [vizRef, clickmap]);
+    }, [vizRef, clickmap, isDomLoaded]);
     return { start };
 };
 
 const useClickmap = () => {
     const vizRef = useHeatmapVizRectContext((s) => s.vizRef);
     const clickmap = useHeatmapDataContext((s) => s.clickmap);
-    const isRenderViz = useHeatmapVizContext((s) => s.isRenderViz);
+    const isDomLoaded = useHeatmapVizContext((s) => s.isDomLoaded);
     const start = useCallback(() => {
-        if (!vizRef || !clickmap || clickmap.length === 0 || !isRenderViz)
+        if (!vizRef || !clickmap || !isDomLoaded)
             return;
         try {
             vizRef?.clearmap?.();
-            vizRef?.clickmap?.(clickmap);
+            if (clickmap.length === 0)
+                return;
+            requestIdleCallback(() => vizRef?.clickmap?.(clickmap), { timeout: 300 });
         }
         catch (error) {
-            console.error(`🚀 🐥 ~ useClickmap ~ error:`, error);
+            console.error(`useClickmap ~ error:`, error);
         }
-    }, [vizRef, clickmap, isRenderViz]);
+    }, [vizRef, clickmap, isDomLoaded]);
     return { start };
 };
 
@@ -3364,29 +3536,53 @@ const useScrollmap = () => {
     const vizRef = useHeatmapVizRectContext((s) => s.vizRef);
     const scrollType = useHeatmapSettingContext((s) => s.scrollType);
     const scrollmap = useHeatmapDataContext((s) => s.scrollmap);
-    useMemo(() => {
-        switch (scrollType) {
-            case EScrollType.Depth:
-                return scrollmap;
-            case EScrollType.Attention:
-                return scrollmap;
-            case EScrollType.Revenue:
-                return scrollmap;
-            default:
-                return scrollmap;
+    const isDomLoaded = useHeatmapVizContext((s) => s.isDomLoaded);
+    const renderScrollmap = useCallback(() => {
+        if (!vizRef || !scrollmap || scrollmap.length === 0 || !isDomLoaded)
+            return;
+        try {
+            requestIdleCallback(() => vizRef?.scrollmap?.(scrollmap), { timeout: 300 });
+        }
+        catch (error) {
+            console.error(`🚀 🐥 ~ useScrollmap ~ renderScrollmap:`, error);
+        }
+    }, [vizRef, scrollmap, isDomLoaded]);
+    const renderScrollBucket = useCallback(() => {
+        if (!vizRef || !scrollmap || scrollmap.length === 0 || !isDomLoaded)
+            return;
+        const bucketData = scrollmap.map((point) => ({
+            position: point.scrollReachY,
+            value: point.cumulativeSum,
+            percent: point.percUsers,
+        }));
+        try {
+            requestIdleCallback(() => vizRef?.scrollBucket?.(bucketData), { timeout: 300 });
+        }
+        catch (error) {
+            console.error(`🚀 🐥 ~ useScrollmap ~ renderScrollBucket:`, error);
         }
-    }, [scrollmap, scrollType]);
+    }, [vizRef, scrollmap, isDomLoaded]);
     const start = useCallback(() => {
-        if (!vizRef || !scrollmap || scrollmap.length === 0)
+        if (!vizRef || !scrollmap || scrollmap.length === 0 || !isDomLoaded)
             return;
         try {
             vizRef?.clearmap?.();
-            vizRef?.scrollmap?.(scrollmap);
         }
         catch (error) {
-            logger$9.error(`🚀 🐥 ~ useScrollmap ~ error:`, error);
+            console.error(`🚀 🐥 ~ useScrollmap ~ start:`, error);
+        }
+        switch (scrollType) {
+            case EScrollType.Attention:
+            case EScrollType.Revenue: {
+                renderScrollBucket();
+                break;
+            }
+            case EScrollType.Depth:
+            default:
+                renderScrollmap();
+                break;
         }
-    }, [vizRef, scrollmap]);
+    }, [vizRef, scrollmap, isDomLoaded, scrollType, renderScrollmap, renderScrollBucket]);
     return { start };
 };
 
@@ -3394,6 +3590,7 @@ const useHeatmapCanvas = () => {
     const heatmapType = useHeatmapSettingContext((state) => state.heatmapType);
     const clickMode = useHeatmapSettingContext((state) => state.clickMode);
     const scrollType = useHeatmapSettingContext((state) => state.scrollType);
+    const setSelectedElement = useHeatmapClickContext((s) => s.setSelectedElement);
     const { start: startClickmap } = useClickmap();
     const { start: startAreaClickmap } = useAreaClickmap();
     const { start: startScrollmap } = useScrollmap();
@@ -3412,7 +3609,10 @@ const useHeatmapCanvas = () => {
                 startScrollmap();
                 break;
         }
-    }, [heatmapType, clickMode, startClickmap, startAreaClickmap, startScrollmap, scrollType]);
+        return () => {
+            setSelectedElement(null);
+        };
+    }, [heatmapType, clickMode, startClickmap, startAreaClickmap, startScrollmap, scrollType]); // eslint-disable-line react-hooks/exhaustive-deps
 };
 
 const scrollToElementIfNeeded = (visualRef, rect, scale, onScrollComplete) => {
@@ -3494,104 +3694,6 @@ const useClickedElement = ({ visualRef, getRect }) => {
     return { clickedElement, showMissingElement, shouldShowCallout };
 };
 
-const useElementCalloutVisible = ({ visualRef, getRect, positionMode }) => {
-    const selectedElement = useHeatmapClickContext((s) => s.selectedElement);
-    const setShouldShowCallout = useHeatmapClickContext((s) => s.setShouldShowCallout);
-    const widthScale = useHeatmapVizContext((s) => s.widthScale);
-    const dataInfo = useHeatmapDataContext((s) => s.dataInfo);
-    useEffect(() => {
-        const isAbsolute = positionMode === 'absolute';
-        if (isAbsolute)
-            return;
-        const hash = selectedElement?.hash;
-        if (!hash)
-            return;
-        const elementIsInViewportFn = () => {
-            const elementInfo = dataInfo?.clickMapMetrics?.[hash];
-            if (!elementInfo)
-                return;
-            const rect = getRect({ hash, selector: elementInfo.selector });
-            const isInViewport = isElementInViewport(rect, visualRef, widthScale);
-            setShouldShowCallout(isInViewport);
-        };
-        elementIsInViewportFn();
-        const handleUpdate = () => {
-            requestAnimationFrame(elementIsInViewportFn);
-        };
-        window.addEventListener('scroll', handleUpdate, true);
-        window.addEventListener('resize', handleUpdate);
-        visualRef?.current?.addEventListener('scroll', handleUpdate);
-        return () => {
-            window.removeEventListener('scroll', handleUpdate, true);
-            window.removeEventListener('resize', handleUpdate);
-            visualRef?.current?.removeEventListener('scroll', handleUpdate);
-        };
-    }, [selectedElement?.hash, visualRef, widthScale, dataInfo, getRect, setShouldShowCallout, positionMode]);
-    return {};
-};
-
-const useHeatmapEffects = ({ isVisible }) => {
-    // const selectedElement = useHeatmapClickContext((s) => s.selectedElement);
-    // const setShouldShowCallout = useHeatmapClickContext((s) => s.setShouldShowCallout);
-    const resetAll = () => {
-        // setShouldShowCallout(false);
-    };
-    // Reset khi ẩn
-    useEffect(() => {
-    }, [isVisible, resetAll]);
-    // Ẩn callout khi sidebar mở
-    // useEffect(() => {
-    //   if (isElementSidebarOpen && selectedElement) {
-    //     setShouldShowCallout(false);
-    //   } else if (!isElementSidebarOpen && selectedElement) {
-    //     setShouldShowCallout(true);
-    //   }
-    // }, [isElementSidebarOpen, selectedElement]);
-};
-
-const useHeatmapElementPosition = ({ iframeRef, wrapperRef, visualizer }) => {
-    const heatmapWidth = useHeatmapWidthByDevice();
-    const iframeHeight = useHeatmapVizRectContext((s) => s.iframeHeight);
-    const widthScale = useHeatmapVizContext((s) => s.widthScale);
-    const getRect = useCallback((element) => {
-        const hash = element?.hash;
-        if (!iframeRef.current?.contentDocument || !hash || !visualizer)
-            return null;
-        let domElement = null;
-        try {
-            domElement = visualizer.get(hash);
-        }
-        catch (error) {
-            console.error('Visualizer error:', { hash, error });
-            return null;
-        }
-        if (!domElement)
-            return null;
-        const layout = getElementLayout(domElement);
-        if (!layout)
-            return null;
-        const parentEl = wrapperRef.current;
-        if (!parentEl)
-            return null;
-        const scrollOffset = parentEl.scrollTop / widthScale;
-        const adjustedTop = layout.top + scrollOffset;
-        const outOfBounds = adjustedTop < 0 ||
-            adjustedTop > (iframeHeight || Infinity) ||
-            layout.left < 0 ||
-            (typeof heatmapWidth === 'number' && layout.left > heatmapWidth);
-        if (outOfBounds)
-            return null;
-        return {
-            left: layout.left,
-            top: adjustedTop,
-            width: Math.min(layout.width, heatmapWidth || layout.width),
-            height: layout.height,
-            outOfBounds,
-        };
-    }, [iframeRef, wrapperRef, visualizer, heatmapWidth, iframeHeight, widthScale]);
-    return { getRect };
-};
-
 function getBoundingBox(element) {
     if (typeof element.getBoundingClientRect !== 'function') {
         return null;
@@ -3706,15 +3808,12 @@ const useHoveredElement = ({ iframeRef, getRect }) => {
         const iframeRect = iframe.getBoundingClientRect();
         const { x, y } = convertViewportToIframeCoords(event.clientX, event.clientY, iframeRect, widthScale);
         const targetElement = findTargetElement(doc, x, y, dataInfo);
-        if (!targetElement || !isValidElement(targetElement, dataInfo)) {
+        const hash = getElementHash(targetElement);
+        if (!targetElement || !hash || !isElmInDataInfo(hash, dataInfo)) {
             reset();
             return;
         }
-        const hash = getElementHash(targetElement);
-        if (hash)
-            return hash;
-        reset();
-        return;
+        return hash;
     }, [dataInfo, iframeRef, widthScale, reset]);
     const onHandleMouseMove = useCallback((event) => {
         if (isLoadingCanvas)
@@ -3726,7 +3825,7 @@ const useHoveredElement = ({ iframeRef, getRect }) => {
         }
         if (isHoveredElement(hash))
             return;
-        const selector = dataInfo?.clickMapMetrics?.[hash];
+        const selector = dataInfo.clickMapMetrics?.[hash];
         const rect = getRect({ hash, selector });
         const elementInfo = buildElementInfo(hash, rect, dataInfo);
         if (!elementInfo) {
@@ -3814,83 +3913,181 @@ const findTargetElement = (doc, x, y, heatmapInfo) => {
 const isIframeReady = (iframeRef, heatmapInfo) => {
     return !!(iframeRef.current?.contentDocument && heatmapInfo?.clickMapMetrics);
 };
-const isValidElement = (element, heatmapInfo) => {
-    if (!element)
-        return false;
-    const hash = getElementHash(element);
+const isElmInDataInfo = (hash, heatmapInfo) => {
     if (!hash)
         return false;
-    return !!heatmapInfo?.clickMapMetrics?.[hash];
-};
-
-/**
- * Portal service configuration
- */
-const PORTAL_CONFIG = {
-    // Default portal service URL
-    // In production, this should be configured via environment or config
-    serviceUrl: 'https://ducky.ngrok.app',
-    // Portal tracking types
-    trackingTypes: {
-        HEATMAP: '1',
-        SESSION_REPLAY: '2',
-    },
+    const isInSortedElements = heatmapInfo?.sortedElements?.some((item) => item.hash === hash);
+    return !!isInSortedElements && !!heatmapInfo?.clickMapMetrics?.[hash];
 };
-/**
- * Get portal service URL from config or environment
- * Can be overridden by window.GEMX_PORTAL_URL for runtime configuration
- */
-function getPortalServiceUrl() {
-    // Allow runtime override via window global
-    if (typeof window !== 'undefined' && window.GEMX_PORTAL_URL) {
-        return window.GEMX_PORTAL_URL;
-    }
-    return PORTAL_CONFIG.serviceUrl;
-}
 
-var MessageType;
-(function (MessageType) {
-    MessageType["GX_DOM_TRACKING_PAYLOAD"] = "GX_DOM_TRACKING_PAYLOAD";
-    MessageType["CLARITY_READY"] = "CLARITY_READY";
-})(MessageType || (MessageType = {}));
-function useVizLiveIframeMsg(options = {}) {
-    const { trustedOrigins = [], onMessage } = options;
-    const addPayload = useHeatmapLiveStore((state) => state.addPayload);
-    const [isReady, setIsReady] = useState(false);
-    const iframeRef = useRef(null);
-    const isValidOrigin = useCallback((origin) => {
-        if (trustedOrigins.length === 0)
-            return true;
-        return trustedOrigins.includes(origin);
-    }, [trustedOrigins]);
-    const handleMessage = useCallback((event) => {
-        if (!isValidOrigin(event.origin)) {
-            console.warn('Message from untrusted origin:', event.origin);
-            return;
-        }
-        if (!event.data || typeof event.data !== 'object' || !event.data.type) {
+const useElementCalloutVisible = ({ visualRef, getRect, positionMode }) => {
+    const selectedElement = useHeatmapClickContext((s) => s.selectedElement);
+    const setShouldShowCallout = useHeatmapClickContext((s) => s.setShouldShowCallout);
+    const widthScale = useHeatmapVizContext((s) => s.widthScale);
+    const dataInfo = useHeatmapDataContext((s) => s.dataInfo);
+    useEffect(() => {
+        const isAbsolute = positionMode === 'absolute';
+        if (isAbsolute)
             return;
-        }
-        const message = event.data;
-        if (!Object.values(MessageType).includes(message.type)) {
+        const hash = selectedElement?.hash;
+        if (!hash)
             return;
-        }
-        if (onMessage) {
-            onMessage(message);
-        }
-        switch (message.type) {
-            case MessageType.GX_DOM_TRACKING_PAYLOAD:
-                if (message.payload) {
-                    const data = decodeClarity(message.payload);
-                    if (data) {
-                        addPayload(data);
-                    }
-                }
-                break;
-            case MessageType.CLARITY_READY:
-                setIsReady(true);
-                break;
-        }
+        const elementIsInViewportFn = () => {
+            if (!isElmInDataInfo(hash, dataInfo))
+                return;
+            const elementInfo = dataInfo?.clickMapMetrics?.[hash];
+            if (!elementInfo)
+                return;
+            const rect = getRect({ hash, selector: elementInfo.selector });
+            const isInViewport = isElementInViewport(rect, visualRef, widthScale);
+            setShouldShowCallout(isInViewport);
+        };
+        elementIsInViewportFn();
+        const handleUpdate = () => {
+            requestAnimationFrame(elementIsInViewportFn);
+        };
+        window.addEventListener('scroll', handleUpdate, true);
+        window.addEventListener('resize', handleUpdate);
+        visualRef?.current?.addEventListener('scroll', handleUpdate);
+        return () => {
+            window.removeEventListener('scroll', handleUpdate, true);
+            window.removeEventListener('resize', handleUpdate);
+            visualRef?.current?.removeEventListener('scroll', handleUpdate);
+        };
+    }, [selectedElement?.hash, visualRef, widthScale, dataInfo, getRect, setShouldShowCallout, positionMode]);
+    return {};
+};
+
+const useHeatmapEffects = ({ isVisible }) => {
+    // const selectedElement = useHeatmapClickContext((s) => s.selectedElement);
+    // const setShouldShowCallout = useHeatmapClickContext((s) => s.setShouldShowCallout);
+    const resetAll = () => {
+        // setShouldShowCallout(false);
+    };
+    // Reset khi ẩn
+    useEffect(() => {
+    }, [isVisible, resetAll]);
+    // Ẩn callout khi sidebar mở
+    // useEffect(() => {
+    //   if (isElementSidebarOpen && selectedElement) {
+    //     setShouldShowCallout(false);
+    //   } else if (!isElementSidebarOpen && selectedElement) {
+    //     setShouldShowCallout(true);
+    //   }
+    // }, [isElementSidebarOpen, selectedElement]);
+};
+
+const useHeatmapElementPosition = ({ iframeRef, wrapperRef, visualizer }) => {
+    const viewport = useHeatmapViewportByDevice();
+    const iframeHeight = useHeatmapVizRectContext((s) => s.iframeHeight);
+    const widthScale = useHeatmapVizContext((s) => s.widthScale);
+    const getRect = useCallback((element) => {
+        const hash = element?.hash;
+        if (!iframeRef.current?.contentDocument || !hash || !visualizer)
+            return null;
+        let domElement = null;
+        try {
+            domElement = visualizer.get(hash);
+        }
+        catch (error) {
+            console.error('Visualizer error:', { hash, error });
+            return null;
+        }
+        if (!domElement)
+            return null;
+        const layout = getElementLayout(domElement);
+        if (!layout)
+            return null;
+        const parentEl = wrapperRef.current;
+        if (!parentEl)
+            return null;
+        const scrollOffset = parentEl.scrollTop / widthScale;
+        const adjustedTop = layout.top + scrollOffset;
+        const outOfBounds = adjustedTop < 0 ||
+            adjustedTop > (iframeHeight || Infinity) ||
+            layout.left < 0 ||
+            (typeof viewport.width === 'number' && layout.left > viewport.width);
+        if (outOfBounds)
+            return null;
+        return {
+            left: layout.left,
+            top: adjustedTop,
+            width: Math.min(layout.width, viewport.width || layout.width),
+            height: layout.height,
+            outOfBounds,
+        };
+    }, [iframeRef, wrapperRef, visualizer, viewport, iframeHeight, widthScale]);
+    return { getRect };
+};
+
+/**
+ * Portal service configuration
+ */
+const PORTAL_CONFIG = {
+    // Default portal service URL
+    // In production, this should be configured via environment or config
+    serviceUrl: 'https://ducky.ngrok.app',
+    // Portal tracking types
+    trackingTypes: {
+        HEATMAP: '1',
+        SESSION_REPLAY: '2',
+    },
+};
+/**
+ * Get portal service URL from config or environment
+ * Can be overridden by window.GEMX_PORTAL_URL for runtime configuration
+ */
+function getPortalServiceUrl() {
+    // Allow runtime override via window global
+    if (typeof window !== 'undefined' && window.GEMX_PORTAL_URL) {
+        return window.GEMX_PORTAL_URL;
+    }
+    return PORTAL_CONFIG.serviceUrl;
+}
+
+var MessageType;
+(function (MessageType) {
+    MessageType["GX_DOM_TRACKING_PAYLOAD"] = "GX_DOM_TRACKING_PAYLOAD";
+    MessageType["CLARITY_READY"] = "CLARITY_READY";
+})(MessageType || (MessageType = {}));
+function useVizLiveIframeMsg(options = {}) {
+    const { trustedOrigins = [], onMessage } = options;
+    const addPayload = useHeatmapLiveContext((s) => s.addPayload);
+    const [isReady, setIsReady] = useState(false);
+    const iframeRef = useRef(null);
+    const isValidOrigin = useCallback((origin) => {
+        if (trustedOrigins.length === 0)
+            return true;
+        return trustedOrigins.includes(origin);
+    }, [trustedOrigins]);
+    const handleMessage = useCallback((event) => {
+        if (!isValidOrigin(event.origin)) {
+            console.warn('Message from untrusted origin:', event.origin);
+            return;
+        }
+        if (!event.data || typeof event.data !== 'object' || !event.data.type) {
+            return;
+        }
+        const message = event.data;
+        if (!Object.values(MessageType).includes(message.type)) {
+            return;
+        }
+        if (onMessage) {
+            onMessage(message);
+        }
+        switch (message.type) {
+            case MessageType.GX_DOM_TRACKING_PAYLOAD:
+                if (message.payload) {
+                    const data = JSON.parse(message.payload);
+                    if (data) {
+                        addPayload(data);
+                    }
+                }
+                break;
+            case MessageType.CLARITY_READY:
+                setIsReady(true);
+                break;
+        }
     }, [isValidOrigin, onMessage]);
     useEffect(() => {
         window.addEventListener('message', handleMessage);
@@ -3904,21 +4101,474 @@ function useVizLiveIframeMsg(options = {}) {
     };
 }
 
+/**
+ * Unified performance timing utility.
+ *
+ * Two complementary tools:
+ *
+ * 1. `perf` — global DevTools session recorder.
+ *    Stores structured timing in `window.__gemxPerf` for inspection.
+ *    Used by the iframe-processor rendering pipeline.
+ *
+ *    perf.startSession('render-1');
+ *    const t = perf.mark('viewport.run');
+ *    perf.measure('viewport.run', t);
+ *    perf.endSession();
+ *
+ * 2. `createPerfTimer` — per-module console logger factory.
+ *    Logs prefixed timings to the console AND records entries into the
+ *    active global session so they appear in `window.__gemxPerf` too.
+ *
+ *    const timer = createPerfTimer('Render');
+ *    const t0 = timer.mark('start');
+ *    await timer.wrap('visualizer.html', () => visualizer.html(...));
+ *    timer.measure('total', t0);
+ */
+const s = {
+    enabled: true,
+    current: null,
+    sessions: [],
+    maxSessions: 20,
+};
+// ── Global singleton functions ────────────────────────────────────────────────
+function startSession(id) {
+    if (!s.enabled)
+        return;
+    s.current = { id, startedAt: performance.now(), entries: [] };
+}
+function endSession() {
+    if (!s.enabled || !s.current)
+        return null;
+    const session = s.current;
+    session.total = performance.now() - session.startedAt;
+    s.sessions = [session, ...s.sessions].slice(0, s.maxSessions);
+    s.current = null;
+    flush();
+    return session;
+}
+/** Record a point-in-time mark. Returns `performance.now()` for use with measure(). */
+function globalMark(label) {
+    const now = performance.now();
+    if (s.enabled && s.current) {
+        s.current.entries.push({ label, t: now - s.current.startedAt });
+    }
+    return now;
+}
+/** Record a duration from a previous mark() timestamp. */
+function globalMeasure(label, t0) {
+    const duration = performance.now() - t0;
+    if (s.enabled && s.current) {
+        s.current.entries.push({ label, t: t0 - s.current.startedAt, duration });
+    }
+    return duration;
+}
+function getReport() {
+    return {
+        sessions: s.sessions,
+        latest: s.sessions[0] ?? null,
+    };
+}
+function clearSessions() {
+    s.current = null;
+    s.sessions = [];
+    if (typeof window !== 'undefined')
+        delete window.__gemxPerf;
+}
+function enableGlobal() {
+    s.enabled = true;
+}
+function disableGlobal() {
+    s.enabled = false;
+}
+function flush() {
+    if (typeof window === 'undefined')
+        return;
+    window.__gemxPerf = getReport();
+}
+// ── Global singleton export ───────────────────────────────────────────────────
+const perf$3 = {
+    startSession,
+    endSession,
+    mark: globalMark,
+    measure: globalMeasure,
+    getReport,
+    clear: clearSessions,
+    enable: enableGlobal,
+    disable: disableGlobal,
+};
+// ── createPerfTimer factory ───────────────────────────────────────────────────
+function createPerfTimer(config) {
+    let cfg = typeof config === 'string' ? { prefix: config, enabled: true } : { enabled: true, ...config };
+    function log(icon, label, extra) {
+        if (!cfg.enabled)
+            return;
+        const suffix = extra ? ` — ${extra}` : '';
+        console.log(`[${cfg.prefix}] ${icon} ${label}${suffix}`);
+    }
+    return {
+        configure(next) {
+            cfg = { ...cfg, ...next };
+        },
+        mark(label) {
+            const t = globalMark(`[${cfg.prefix}] ${label}`);
+            log('⏱', label);
+            return t;
+        },
+        measure(label, from) {
+            globalMeasure(`[${cfg.prefix}] ${label}`, from);
+            const ms = (performance.now() - from).toFixed(1);
+            log('✅', label, `${ms}ms`);
+        },
+        async wrap(label, fn) {
+            const t = globalMark(`[${cfg.prefix}] ${label}`);
+            log('⏱', label);
+            const result = await fn();
+            const duration = globalMeasure(`[${cfg.prefix}] ${label}`, t);
+            log('✅', label, `${duration.toFixed(1)}ms`);
+            return result;
+        },
+    };
+}
+
+/**
+ * Default iframe dimension calculation.
+ * Used as fallback when no fix overrides getDimensions().
+ */
+function getFinalHeight(doc, onlyClientHeight = true) {
+    void doc.body.offsetHeight; // trigger reflow
+    // const bodyMinHeight = parseFloat(win.getComputedStyle(doc.body).minHeight) || 0;
+    // const htmlMinHeight = parseFloat(win.getComputedStyle(doc.documentElement).minHeight) || 0;
+    if (onlyClientHeight) {
+        return Math.max(doc.body?.clientHeight || 0, doc.documentElement?.clientHeight || 0);
+    }
+    return Math.max(doc.body?.scrollHeight || 0, doc.body?.offsetHeight || 0, doc.documentElement?.scrollHeight || 0, doc.documentElement?.offsetHeight || 0, doc.documentElement?.clientHeight || 0);
+}
+function getFinalWidth(doc) {
+    return Math.max(
+    // doc.body?.scrollWidth || 0,
+    // doc.body?.offsetWidth || 0,
+    // doc.documentElement?.scrollWidth || 0,
+    // doc.documentElement?.offsetWidth || 0,
+    doc.documentElement?.clientWidth || 0);
+}
+
 /**
  * DOM observation setup — ResizeObserver + MutationObserver.
  * Returns a cleanup function that disconnects both observers.
  */
-createLogger({ enabled: false, prefix: 'IframeHeightObserver' });
+const logger$2 = createLogger({ enabled: false, prefix: 'IframeHeightObserver' });
+function setup(doc, onChange) {
+    const resizeObserver = new ResizeObserver(onChange);
+    resizeObserver.observe(doc.documentElement);
+    resizeObserver.observe(doc.body);
+    const mutationObserver = new MutationObserver(onChange);
+    mutationObserver.observe(doc.body, {
+        childList: true,
+        subtree: true,
+        attributes: true,
+        attributeFilter: ['style', 'class', 'hidden', 'data-v'],
+    });
+    logger$2.log('DOM observers started (ResizeObserver + MutationObserver)');
+    return () => {
+        resizeObserver.disconnect();
+        mutationObserver.disconnect();
+        logger$2.log('DOM observers disconnected');
+    };
+}
 
+// cspell:ignore cooldown
 /**
  * Height Observer Processor
  * Background observer — watches for iframe content height changes.
  */
-createLogger({ enabled: true, prefix: 'IframeHeightObserver' });
+// ── Helpers ───────────────────────────────────────────────────────────────────
+function readCurrentHeight(s) {
+    if (!s.iframe?.contentDocument || !s.iframe?.contentWindow)
+        return 0;
+    const height = getFinalHeight(s.iframe.contentDocument, false);
+    s.logger.log('Height:', height);
+    return height;
+}
+function isBlocked(s) {
+    return s.isProcessing || s.isCoolingDown || s.throttleTimeout !== null;
+}
+function hasHeightChanged(s, height) {
+    return height !== s.lastHeight;
+}
+// ── Cooldown ──────────────────────────────────────────────────────────────────
+function startCooldown(s) {
+    s.isCoolingDown = true;
+    s.cooldownTimeout = setTimeout(() => {
+        s.cooldownTimeout = null;
+        s.isCoolingDown = false;
+    }, s.cooldownMs);
+}
+function stopCooldown(s) {
+    if (s.cooldownTimeout) {
+        clearTimeout(s.cooldownTimeout);
+        s.cooldownTimeout = null;
+    }
+    s.isCoolingDown = false;
+}
+// ── Debounce ──────────────────────────────────────────────────────────────────
+function cancelPendingDebounce(s) {
+    if (s.debounceTimeout) {
+        clearTimeout(s.debounceTimeout);
+        s.debounceTimeout = null;
+    }
+}
+function processCurrentHeightIfChanged(s) {
+    const height = readCurrentHeight(s);
+    if (hasHeightChanged(s, height)) {
+        processHeightChange(s, height);
+    }
+}
+function scheduleDebounce(s) {
+    cancelPendingDebounce(s);
+    s.debounceTimeout = setTimeout(() => {
+        s.debounceTimeout = null;
+        processCurrentHeightIfChanged(s);
+    }, s.debounceMs);
+}
+// ── Throttle ──────────────────────────────────────────────────────────────────
+function scheduleThrottledCheck(s) {
+    s.throttleTimeout = setTimeout(() => {
+        s.throttleTimeout = null;
+        const height = readCurrentHeight(s);
+        if (!hasHeightChanged(s, height)) {
+            cancelPendingDebounce(s);
+            return;
+        }
+        s.logger.log(`Height changed: ${s.lastHeight}px -> ${height}px`);
+        scheduleDebounce(s);
+    }, s.throttleMs);
+}
+// ── Core ──────────────────────────────────────────────────────────────────────
+async function processHeightChange(s, newHeight) {
+    if (!s.iframe || !s.config)
+        return;
+    s.isProcessing = true;
+    s.logger.log(`Processing height change: ${newHeight}px`);
+    try {
+        const result = {
+            height: newHeight,
+            width: s.iframe.contentWindow?.innerWidth ?? 0,
+        };
+        s.lastHeight = newHeight;
+        s.config.onHeightChange?.(result);
+        window.dispatchEvent(new CustomEvent('iframe-dimensions-applied', { detail: result }));
+    }
+    catch (error) {
+        s.logger.error('Failed to process height change:', error);
+        s.config.onError?.(error);
+    }
+    finally {
+        s.isProcessing = false;
+        if (s.cooldownMs > 0)
+            startCooldown(s);
+    }
+}
+function handleHeightChange(s) {
+    if (isBlocked(s))
+        return;
+    scheduleThrottledCheck(s);
+}
+function attachObserver(s) {
+    if (!s.iframe?.contentDocument?.body) {
+        s.logger.warn('Cannot observe height changes: iframe body not found');
+        return;
+    }
+    s.observerCleanup?.();
+    const height = readCurrentHeight(s);
+    s.logger.log('Initial height:', height);
+    if (hasHeightChanged(s, height)) {
+        processHeightChange(s, height);
+    }
+    else {
+        s.lastHeight = height;
+    }
+    s.observerCleanup = setup(s.iframe.contentDocument, () => handleHeightChange(s));
+}
+function detachObserver(s) {
+    s.observerCleanup?.();
+    s.observerCleanup = null;
+}
+function clearAllTimers(s) {
+    if (s.throttleTimeout) {
+        clearTimeout(s.throttleTimeout);
+        s.throttleTimeout = null;
+    }
+    if (s.debounceTimeout) {
+        clearTimeout(s.debounceTimeout);
+        s.debounceTimeout = null;
+    }
+    if (s.startDelayTimeout) {
+        clearTimeout(s.startDelayTimeout);
+        s.startDelayTimeout = null;
+    }
+    stopCooldown(s);
+}
+// ── Lifecycle ─────────────────────────────────────────────────────────────────
+function observeImmediately(s) {
+    attachObserver(s);
+    s.logger.log('Height observer started');
+}
+function observeAfterDelay(s, delayMs) {
+    s.logger.log(`Height observer will start in ${delayMs}ms`);
+    s.startDelayTimeout = setTimeout(() => {
+        s.startDelayTimeout = null;
+        if (!s.running)
+            return;
+        attachObserver(s);
+        s.logger.log('Height observer started (after delay)');
+    }, delayMs);
+}
+function start$5(s, iframe, cfg) {
+    if (s.running) {
+        s.logger.warn('Observer is already running. Call stop() first.');
+        return;
+    }
+    s.iframe = iframe;
+    s.config = cfg;
+    s.throttleMs = cfg.throttleMs ?? 25;
+    s.debounceMs = cfg.debounceMs ?? 500;
+    s.cooldownMs = cfg.cooldownMs ?? 0;
+    s.running = true;
+    const startDelayMs = cfg.startDelayMs ?? 0;
+    if (startDelayMs > 0) {
+        observeAfterDelay(s, startDelayMs);
+    }
+    else {
+        observeImmediately(s);
+    }
+}
+function stop$5(s) {
+    if (!s.running)
+        return;
+    detachObserver(s);
+    clearAllTimers(s);
+    s.iframe = null;
+    s.config = null;
+    s.lastHeight = 0;
+    s.isProcessing = false;
+    s.isCoolingDown = false;
+    s.running = false;
+    s.logger.log('Height observer stopped');
+}
+function clear(s) {
+    detachObserver(s);
+    clearAllTimers(s);
+    s.lastHeight = 0;
+    s.isProcessing = false;
+}
+function updateConfig$3(s, cfg) {
+    if (!s.running || !s.config) {
+        s.logger.warn('Observer is not running.');
+        return;
+    }
+    s.config = { ...s.config, ...cfg };
+    if (cfg.throttleMs !== undefined)
+        s.throttleMs = cfg.throttleMs;
+    if (cfg.debounceMs !== undefined)
+        s.debounceMs = cfg.debounceMs;
+    if (cfg.cooldownMs !== undefined)
+        s.cooldownMs = cfg.cooldownMs;
+    s.logger.configure({ enabled: !!s.config.debug });
+    s.logger.log('Config updated');
+}
+// ── Factory ───────────────────────────────────────────────────────────────────
+function createHeightObserver() {
+    const s = {
+        logger: createLogger({ enabled: true, prefix: 'IframeHeightObserver' }),
+        iframe: null,
+        config: null,
+        observerCleanup: null,
+        lastHeight: 0,
+        throttleTimeout: null,
+        debounceTimeout: null,
+        startDelayTimeout: null,
+        cooldownTimeout: null,
+        isProcessing: false,
+        isCoolingDown: false,
+        throttleMs: 25,
+        debounceMs: 500,
+        cooldownMs: 0,
+        running: false,
+    };
+    return {
+        start: (iframe, cfg) => start$5(s, iframe, cfg),
+        stop: () => stop$5(s),
+        observe: () => attachObserver(s),
+        clear: () => clear(s),
+        updateConfig: (cfg) => updateConfig$3(s, cfg),
+        getCurrentHeight: () => s.lastHeight,
+        isRunning: () => s.running,
+        getStateInfo: () => ({
+            isRunning: s.running,
+            lastHeight: s.lastHeight,
+            isProcessing: s.isProcessing,
+            hasObservers: !!s.observerCleanup,
+        }),
+    };
+}
 
-const logger$8 = createLogger({ enabled: false, prefix: 'IframeNavigationBlocker' });
+/**
+ * Window-level event management for the navigation processor.
+ *
+ * Responsibilities:
+ *  - Subscribe to events dispatched by this processor (for logging/hooks)
+ *  - Dispatch navigation events to the parent window
+ */
+// ── Module-level functions ────────────────────────────────────────────────────
+function attach$1(s, debug) {
+    s.logger.configure({ enabled: !!debug });
+    s.navigationBlockedListener = (e) => {
+        const ev = e;
+        s.logger.log('Navigation blocked:', ev.detail.url);
+    };
+    s.formSubmitWindowListener = (e) => {
+        const ev = e;
+        s.logger.log('Form submitted:', ev.detail.data);
+    };
+    window.addEventListener('iframe-navigation-blocked', s.navigationBlockedListener);
+    window.addEventListener('iframe-form-submit', s.formSubmitWindowListener);
+}
+function detach$1(s) {
+    if (s.navigationBlockedListener) {
+        window.removeEventListener('iframe-navigation-blocked', s.navigationBlockedListener);
+        s.navigationBlockedListener = null;
+    }
+    if (s.formSubmitWindowListener) {
+        window.removeEventListener('iframe-form-submit', s.formSubmitWindowListener);
+        s.formSubmitWindowListener = null;
+    }
+}
+function dispatchBlocked(url, showMessage) {
+    if (showMessage)
+        alert(`Navigation blocked: ${url}`);
+    window.dispatchEvent(new CustomEvent('iframe-navigation-blocked', { detail: { url } }));
+}
+function dispatchFormSubmit(form, data) {
+    window.dispatchEvent(new CustomEvent('iframe-form-submit', { detail: { form, data } }));
+}
+// ── Factory ───────────────────────────────────────────────────────────────────
+function createNavigationListeners() {
+    const s = {
+        logger: createLogger({ enabled: false, prefix: 'IframeNavigationBlocker' }),
+        navigationBlockedListener: null,
+        formSubmitWindowListener: null,
+    };
+    return {
+        attach: (debug) => attach$1(s, debug),
+        detach: () => detach$1(s),
+        dispatchBlocked,
+        dispatchFormSubmit,
+    };
+}
+
+const logger$1 = createLogger({ enabled: false, prefix: 'IframeNavigationBlocker' });
 function configure$1(debug) {
-    logger$8.configure({ enabled: debug });
+    logger$1.configure({ enabled: debug });
 }
 // ─── DOM Utilities ────────────────────────────────────────────────────────────
 function disableAllLinks(doc) {
@@ -3942,10 +4592,10 @@ function setupLinkBlocker(doc, isEnabled, onBlocked) {
             return;
         const href = link.getAttribute('href');
         if (!href || href === '' || href === '#' || href.startsWith('#')) {
-            logger$8.log('Allowed hash navigation:', href);
+            logger$1.log('Allowed hash navigation:', href);
             return;
         }
-        logger$8.log('Blocked link navigation to:', href);
+        logger$1.log('Blocked link navigation to:', href);
         e.preventDefault();
         e.stopPropagation();
         e.stopImmediatePropagation();
@@ -3959,7 +4609,7 @@ function setupLinkBlocker(doc, isEnabled, onBlocked) {
             return;
         const href = link.getAttribute('href');
         if (href && !href.startsWith('#')) {
-            logger$8.log('Blocked auxclick navigation');
+            logger$1.log('Blocked auxclick navigation');
             e.preventDefault();
             e.stopPropagation();
             e.stopImmediatePropagation();
@@ -3980,7 +4630,7 @@ function setupFormBlocker(doc, isEnabled, onBlocked, onFormSubmit) {
         const form = e.target;
         const action = form.getAttribute('action');
         if (!action || action === '' || action === '#') {
-            logger$8.log('Allowed same-page form');
+            logger$1.log('Allowed same-page form');
             e.preventDefault();
             const data = {};
             new FormData(form).forEach((value, key) => {
@@ -3989,7 +4639,7 @@ function setupFormBlocker(doc, isEnabled, onBlocked, onFormSubmit) {
             onFormSubmit(form, data);
             return;
         }
-        logger$8.log('Blocked form submission to:', action);
+        logger$1.log('Blocked form submission to:', action);
         e.preventDefault();
         e.stopPropagation();
         e.stopImmediatePropagation();
@@ -4003,7 +4653,7 @@ function setupWindowOpenBlocker(win, originalOpen, isEnabled, onBlocked) {
         if (!isEnabled())
             return originalOpen(...args);
         const url = args[0]?.toString() || 'popup';
-        logger$8.log('Blocked window.open:', url);
+        logger$1.log('Blocked window.open:', url);
         onBlocked(url);
         return null;
     });
@@ -4015,14 +4665,14 @@ function setupUnloadBlocker(win, isEnabled) {
     const beforeUnloadListener = (e) => {
         if (!isEnabled())
             return;
-        logger$8.log('Blocked beforeunload');
+        logger$1.log('Blocked beforeunload');
         e.preventDefault();
         e.returnValue = '';
     };
     const unloadListener = (e) => {
         if (!isEnabled())
             return;
-        logger$8.log('Blocked unload');
+        logger$1.log('Blocked unload');
         e.preventDefault();
         e.stopPropagation();
     };
@@ -4039,65 +4689,14 @@ function setupDOMMonitor(doc) {
     return () => observer.disconnect();
 }
 
-/**
- * Window-level event management for the navigation processor.
- *
- * Responsibilities:
- *  - Subscribe to events dispatched by this processor (for logging/hooks)
- *  - Dispatch navigation events to the parent window
- */
-const logger$7 = createLogger({ enabled: false, prefix: 'IframeNavigationBlocker' });
-// ─── State ────────────────────────────────────────────────────────────────────
-let navigationBlockedListener = null;
-let formSubmitWindowListener = null;
-// ─── Subscriptions ────────────────────────────────────────────────────────────
-function attach$1(debug) {
-    logger$7.configure({ enabled: !!debug });
-    navigationBlockedListener = (e) => {
-        const ev = e;
-        logger$7.log('Navigation blocked:', ev.detail.url);
-    };
-    formSubmitWindowListener = (e) => {
-        const ev = e;
-        logger$7.log('Form submitted:', ev.detail.data);
-    };
-    window.addEventListener('iframe-navigation-blocked', navigationBlockedListener);
-    window.addEventListener('iframe-form-submit', formSubmitWindowListener);
-}
-function detach$1() {
-    if (navigationBlockedListener) {
-        window.removeEventListener('iframe-navigation-blocked', navigationBlockedListener);
-        navigationBlockedListener = null;
-    }
-    if (formSubmitWindowListener) {
-        window.removeEventListener('iframe-form-submit', formSubmitWindowListener);
-        formSubmitWindowListener = null;
-    }
-}
-// ─── Dispatchers ─────────────────────────────────────────────────────────────
-function dispatchBlocked(url, showMessage) {
-    if (showMessage)
-        alert(`Navigation blocked: ${url}`);
-    window.dispatchEvent(new CustomEvent('iframe-navigation-blocked', { detail: { url } }));
-}
-function dispatchFormSubmit(form, data) {
-    window.dispatchEvent(new CustomEvent('iframe-form-submit', { detail: { form, data } }));
-}
-
 /**
  * Navigation Processor
  * Continuous guard — blocks all navigation attempts within the iframe.
  */
-const logger$6 = createLogger({ enabled: false, prefix: 'IframeNavigationBlocker' });
-// ─── State ────────────────────────────────────────────────────────────────────
-let isEnabled = false;
-let showMessage = false;
-let running$4 = false;
-let cleanups = [];
-// ─── Public API ───────────────────────────────────────────────────────────────
-function start$5(iframe, cfg) {
-    if (running$4) {
-        logger$6.warn('Blocker is already running. Call stop() first.');
+// ── Module-level functions ────────────────────────────────────────────────────
+function start$4(s, iframe, cfg) {
+    if (s.running) {
+        s.logger.warn('Blocker is already running. Call stop() first.');
         return;
     }
     if (!iframe.contentDocument || !iframe.contentWindow) {
@@ -4106,76 +4705,114 @@ function start$5(iframe, cfg) {
     const doc = iframe.contentDocument;
     const win = iframe.contentWindow;
     const originalOpen = win.open.bind(win);
-    logger$6.configure({ enabled: !!cfg?.debug });
+    s.logger.configure({ enabled: !!cfg?.debug });
     configure$1(!!cfg?.debug);
-    cleanups = [
-        setupLinkBlocker(doc, () => isEnabled, (url) => dispatchBlocked(url, showMessage)),
-        setupFormBlocker(doc, () => isEnabled, (url) => dispatchBlocked(url, showMessage), dispatchFormSubmit),
-        setupWindowOpenBlocker(win, originalOpen, () => isEnabled, (url) => dispatchBlocked(url, showMessage)),
-        setupUnloadBlocker(win, () => isEnabled),
+    s.cleanups = [
+        setupLinkBlocker(doc, () => s.isEnabled, (url) => s.listeners.dispatchBlocked(url, s.showMessage)),
+        setupFormBlocker(doc, () => s.isEnabled, (url) => s.listeners.dispatchBlocked(url, s.showMessage), s.listeners.dispatchFormSubmit),
+        setupWindowOpenBlocker(win, originalOpen, () => s.isEnabled, (url) => s.listeners.dispatchBlocked(url, s.showMessage)),
+        setupUnloadBlocker(win, () => s.isEnabled),
         setupDOMMonitor(doc),
     ];
-    attach$1(cfg?.debug);
-    running$4 = true;
-    logger$6.log('Navigation blocker started');
+    s.listeners.attach(cfg?.debug);
+    s.running = true;
+    s.logger.log('Started');
 }
-function stop$5() {
-    if (!running$4)
+function stop$4(s) {
+    if (!s.running)
         return;
-    cleanups.forEach((fn) => fn());
-    cleanups = [];
-    detach$1();
-    isEnabled = false;
-    showMessage = false;
-    running$4 = false;
-    logger$6.log('Navigation blocker stopped');
-}
-function enable() {
-    if (!running$4) {
-        logger$6.warn('Blocker is not running. Call start() first.');
+    s.cleanups.forEach((fn) => fn());
+    s.cleanups = [];
+    s.listeners.detach();
+    s.isEnabled = false;
+    s.showMessage = false;
+    s.running = false;
+    s.logger.log('Stopped');
+}
+function enable(s) {
+    if (!s.running) {
+        s.logger.warn('Blocker is not running.');
         return;
     }
-    isEnabled = true;
-    logger$6.log('Navigation blocking enabled');
+    s.isEnabled = true;
+    s.logger.log('Navigation blocking enabled');
+}
+function disable(s) {
+    if (!s.running) {
+        s.logger.warn('Blocker is not running.');
+        return;
+    }
+    s.isEnabled = false;
+    s.logger.log('Navigation blocking disabled');
+}
+function enableMessage(s) {
+    if (!s.running) {
+        s.logger.warn('Blocker is not running.');
+        return;
+    }
+    s.showMessage = true;
+    s.logger.log('Navigation blocking message enabled');
+}
+function disableMessage(s) {
+    if (!s.running) {
+        s.logger.warn('Blocker is not running.');
+        return;
+    }
+    s.showMessage = false;
+    s.logger.log('Navigation blocking message disabled');
+}
+// ── Factory ───────────────────────────────────────────────────────────────────
+function createNavigationBlocker() {
+    const s = {
+        logger: createLogger({ enabled: false, prefix: 'IframeNavigationBlocker' }),
+        listeners: createNavigationListeners(),
+        isEnabled: false,
+        showMessage: false,
+        running: false,
+        cleanups: [],
+    };
+    return {
+        start: (iframe, cfg) => start$4(s, iframe, cfg),
+        stop: () => stop$4(s),
+        enable: () => enable(s),
+        disable: () => disable(s),
+        enableMessage: () => enableMessage(s),
+        disableMessage: () => disableMessage(s),
+        isRunning: () => s.running,
+        isBlockingEnabled: () => s.isEnabled,
+        getStateInfo: () => ({ isRunning: s.running, isEnabled: s.isEnabled, showMessage: s.showMessage }),
+    };
 }
 
-const registry$1 = [];
-/**
- * Register a global fix.
- * Fixes are run in registration order.
- */
-function register$1(fix) {
-    registry$1.push(fix);
+// ── Module-level functions ────────────────────────────────────────────────────
+function attach(s, debug) {
+    s.logger.configure({ enabled: !!debug });
+    s.dimensionsListener = (e) => {
+        // const ev = e as CustomEvent<IframeDimensionsDetail>;
+        // s.logger.log('Dimensions applied:', ev.detail);
+    };
+    window.addEventListener('iframe-dimensions-applied', s.dimensionsListener);
 }
-/**
- * Returns all fixes that are active for the given context.
- * A fix is active if it has no `shouldApply`, or `shouldApply` returns true.
- */
-function getActiveFixes(ctx) {
-    return registry$1.filter((fix) => {
-        try {
-            return !fix.shouldApply || fix.shouldApply(ctx);
-        }
-        catch {
-            return false;
-        }
-    });
+function detach(s) {
+    if (s.dimensionsListener) {
+        window.removeEventListener('iframe-dimensions-applied', s.dimensionsListener);
+        s.dimensionsListener = null;
+    }
+}
+// ── Factory ───────────────────────────────────────────────────────────────────
+function createViewportListeners() {
+    const s = {
+        logger: createLogger({ enabled: false, prefix: 'ViewportReplacer' }),
+        dimensionsListener: null,
+    };
+    return {
+        attach: (debug) => attach(s, debug),
+        detach: () => detach(s),
+    };
 }
 
-/**
- * Computed Style Enforcer Module
- * Enforces computed CSS styles with viewport unit verification
- * @module computed-style-enforcer
- */
-const logger$5 = createLogger({
-    enabled: false,
-    prefix: 'ComputedStyleEnforcer',
-});
-// ============================================================================
-// Constants
-// ============================================================================
 const DEFAULT_TOLERANCE_PX = 5;
-const VIEWPORT_UNIT_REGEX = /([-.\d]+)(vh|svh|lvh|dvh|%)/gi;
+const VIEWPORT_UNIT_REGEX = /([-.\\d]+)(vh|svh|lvh|dvh|%)/gi;
 const DEFAULT_CSS_VALUES = ['none', 'auto', 'normal', '0px'];
 const CRITICAL_PROPERTIES = [
     'display',
@@ -4212,423 +4849,215 @@ const CRITICAL_PROPERTIES = [
     'grid-template-rows',
     'gap',
 ];
-// ============================================================================
-// State
-// ============================================================================
-let doc$1 = null;
-let win$1 = null;
-let config$2 = null;
-const elementsWithViewportUnits$1 = new Set();
-let originalValues$1 = new WeakMap();
-let running$3 = false;
-// ============================================================================
-// Helper Functions
-// ============================================================================
-/**
- * Get viewport unit map for conversion from current state
- */
-function getViewportUnitMap() {
-    if (!config$2) {
+
+// ── Helpers ───────────────────────────────────────────────────────────────────
+function getViewportUnitMap(s) {
+    if (!s.config)
         throw new Error('Config is not initialized');
-    }
     return {
-        vh: config$2.targetHeight,
-        svh: config$2.targetHeight,
-        lvh: config$2.targetHeight,
-        dvh: config$2.targetHeight,
-        vw: config$2.targetWidth,
-        svw: config$2.targetWidth,
-        lvw: config$2.targetWidth,
-        dvw: config$2.targetWidth,
+        vh: s.config.targetHeight,
+        svh: s.config.targetHeight,
+        lvh: s.config.targetHeight,
+        dvh: s.config.targetHeight,
+        vw: s.config.targetWidth,
+        svw: s.config.targetWidth,
+        lvw: s.config.targetWidth,
+        dvw: s.config.targetWidth,
     };
 }
-/**
- * Calculate expected pixel value from viewport unit using current state
- */
-function calculateExpectedPx(value, unit) {
-    if (!config$2) {
+function calculateExpectedPx(s, value, unit) {
+    if (!s.config)
         throw new Error('Config is not initialized');
-    }
     const unitLower = unit.toLowerCase();
-    if (unitLower === '%') {
-        return (value / 100) * config$2.targetHeight;
-    }
-    const unitMap = getViewportUnitMap();
-    return (value / 100) * (unitMap[unitLower] || 0);
+    if (unitLower === '%')
+        return (value / 100) * s.config.targetHeight;
+    return (value / 100) * (getViewportUnitMap(s)[unitLower] || 0);
 }
-/**
- * Check if a CSS value is a default/initial value that should be skipped
- */
 function isDefaultCssValue(value) {
     return DEFAULT_CSS_VALUES.includes(value);
 }
-/**
- * Verify if we should replace the computed value using current state
- * Return true ONLY if computed value matches target config (within tolerance)
- * Return false if computed value is different - don't override correct values
- */
-function shouldReplaceValue(computedValue, originalValue, tolerance = DEFAULT_TOLERANCE_PX) {
-    if (!config$2) {
+function shouldReplaceValue(s, computedValue, originalValue, tolerance = DEFAULT_TOLERANCE_PX) {
+    if (!s.config)
         return false;
-    }
-    // Parse computed value (should be in px)
     const computedPx = parseFloat(computedValue);
-    if (isNaN(computedPx)) {
-        return false; // Cannot verify, don't replace
-    }
-    // Parse original value to check what it should be
+    if (isNaN(computedPx))
+        return false;
     const regex = new RegExp(VIEWPORT_UNIT_REGEX.source, VIEWPORT_UNIT_REGEX.flags);
     const match = originalValue.match(regex);
-    if (!match) {
-        return false; // No viewport units found, don't replace
-    }
+    if (!match)
+        return false;
     const [, value, unit] = match;
     const num = parseFloat(value);
-    if (isNaN(num)) {
+    if (isNaN(num))
         return false;
-    }
-    // Calculate expected value based on unit and target config
-    const expectedPx = calculateExpectedPx(num, unit);
-    // Check if computed value matches expected value (within tolerance)
+    const expectedPx = calculateExpectedPx(s, num, unit);
     const diff = Math.abs(computedPx - expectedPx);
     if (diff <= tolerance) {
-        // Matches target config, OK to replace
-        logger$5.log(`OK to replace: computed=${computedValue} matches expected=${expectedPx.toFixed(2)}px (diff=${diff.toFixed(2)}px)`);
+        s.logger.log(`OK to replace: computed=${computedValue} matches expected=${expectedPx.toFixed(2)}px (diff=${diff.toFixed(2)}px)`);
         return true;
     }
-    // Different from target config, DON'T replace - value already has correct computation
-    logger$5.log(`Skip replace: computed=${computedValue} differs from expected=${expectedPx.toFixed(2)}px (diff=${diff.toFixed(2)}px) - keeping current value`);
+    s.logger.log(`Skip replace: computed=${computedValue} differs from expected=${expectedPx.toFixed(2)}px (diff=${diff.toFixed(2)}px)`);
     return false;
 }
-/**
- * Apply a single property to an element with verification using current state
- */
-function applyPropertyWithVerification(element, prop, computedValue, originalValue, tolerance = DEFAULT_TOLERANCE_PX) {
-    // Verify before replacing - only replace if computed value matches target config
-    if (originalValue && shouldReplaceValue(computedValue, originalValue, tolerance)) {
+function applyPropertyWithVerification(s, element, prop, computedValue, originalValue, tolerance = DEFAULT_TOLERANCE_PX) {
+    if (originalValue && shouldReplaceValue(s, computedValue, originalValue, tolerance)) {
         element.style.setProperty(prop, computedValue, 'important');
         return true;
     }
     else if (!originalValue) {
-        // No original value tracked, use old behavior
         element.style.setProperty(prop, computedValue, 'important');
         return true;
     }
     return false;
 }
-// ============================================================================
-// Public API Functions
-// ============================================================================
-/**
- * Start the computed style enforcer
- * Initialize with iframe document and config
- */
-function start$4(d, w, cfg, options = {}) {
-    if (running$3) {
-        logger$5.warn('Enforcer is already running. Call stop() first.');
+// ── Exported module-level functions ───────────────────────────────────────────
+function start$3(s, d, w, cfg, options = {}) {
+    if (s.running) {
+        s.logger.warn('Enforcer is already running. Call stop() first.');
         return;
     }
-    doc$1 = d;
-    win$1 = w;
-    config$2 = cfg;
-    running$3 = true;
-    logger$5.configure({ enabled: !!options.debug });
-    logger$5.log('Computed style enforcer started');
+    s.doc = d;
+    s.win = w;
+    s.config = cfg;
+    s.running = true;
+    s.logger.configure({ enabled: !!options.debug });
+    s.logger.log('Started');
 }
-/**
- * Stop the enforcer and clear state
- */
-function stop$4() {
-    if (!running$3) {
+function stop$3(s) {
+    if (!s.running)
+        return;
+    s.doc = null;
+    s.win = null;
+    s.config = null;
+    s.elementsWithViewportUnits.clear();
+    s.originalValues = new WeakMap();
+    s.running = false;
+    s.logger.log('Stopped');
+}
+function reset(s) {
+    if (!s.running) {
+        s.logger.warn('Enforcer is not running. Call start() first.');
         return;
     }
-    doc$1 = null;
-    win$1 = null;
-    config$2 = null;
-    elementsWithViewportUnits$1.clear();
-    originalValues$1 = new WeakMap();
-    running$3 = false;
-    logger$5.log('Computed style enforcer stopped');
+    s.elementsWithViewportUnits.clear();
+    s.originalValues = new WeakMap();
+    s.logger.log('Reset');
 }
-/**
- * Track an element with viewport units
- * Store original CSS values for later verification
- */
-function trackElement(element, propertyOriginalValues) {
-    if (!running$3) {
-        logger$5.warn('Enforcer is not running. Call start() first.');
+function trackElement(s, element, propertyOriginalValues) {
+    if (!s.running) {
+        s.logger.warn('Enforcer is not running. Call start() first.');
         return;
     }
-    elementsWithViewportUnits$1.add(element);
-    // Store original values for this element
-    let elementOriginals = originalValues$1.get(element);
+    s.elementsWithViewportUnits.add(element);
+    let elementOriginals = s.originalValues.get(element);
     if (!elementOriginals) {
         elementOriginals = new Map();
-        originalValues$1.set(element, elementOriginals);
+        s.originalValues.set(element, elementOriginals);
     }
-    // Merge property original values (don't override existing)
     propertyOriginalValues.forEach((value, prop) => {
-        if (!elementOriginals.has(prop)) {
+        if (!elementOriginals.has(prop))
             elementOriginals.set(prop, value);
-        }
     });
 }
-/**
- * Process a single element - enforce computed styles to inline
- */
-function processElement(element, options = {}) {
-    if (!running$3 || !doc$1 || !win$1 || !config$2) {
-        logger$5.warn('Enforcer is not running. Call start() first.');
+function processElement(s, element, options = {}) {
+    if (!s.running || !s.doc || !s.win || !s.config) {
+        s.logger.warn('Enforcer is not running.');
         return 0;
     }
-    if (!elementsWithViewportUnits$1.has(element)) {
+    if (!s.elementsWithViewportUnits.has(element))
         return 0;
-    }
     const htmlElement = element;
-    const computed = win$1.getComputedStyle(htmlElement);
+    const computed = s.win.getComputedStyle(htmlElement);
     const inlineStyle = htmlElement.style;
-    const elementOriginals = originalValues$1.get(element);
+    const elementOriginals = s.originalValues.get(element);
     const tolerance = options.tolerance ?? DEFAULT_TOLERANCE_PX;
     let count = 0;
     CRITICAL_PROPERTIES.forEach((prop) => {
         const computedValue = computed.getPropertyValue(prop);
         const inlineValue = inlineStyle.getPropertyValue(prop);
-        if (computedValue && (!inlineValue || inlineValue !== computedValue)) {
-            if (!isDefaultCssValue(computedValue)) {
-                const originalValue = elementOriginals?.get(prop) || '';
-                if (applyPropertyWithVerification(htmlElement, prop, computedValue, originalValue, tolerance)) {
-                    count++;
-                }
-            }
-        }
-    });
-    return count;
-}
-/**
- * Process all tracked elements
- * Enforce computed styles to inline for all elements with viewport units
- */
-function processAll(options = {}) {
-    if (!running$3 || !doc$1 || !win$1 || !config$2) {
-        logger$5.warn('Enforcer is not running. Call start() first.');
-        return 0;
-    }
-    let totalCount = 0;
-    elementsWithViewportUnits$1.forEach((element) => {
-        totalCount += processElement(element, options);
-    });
-    logger$5.log(`Enforced ${totalCount} computed styles for ${elementsWithViewportUnits$1.size} elements`);
-    return totalCount;
-}
-
-/**
- * Core viewport unit replacement logic.
- * Converts vh/vw/svh/dvh/% to pixel values across all CSS in the iframe.
- */
-const logger$4 = createLogger({ enabled: false, prefix: 'ViewportUnitReplacer' });
-// ─── Constants ────────────────────────────────────────────────────────────────
-const HEIGHT_RELATED_PROPERTIES = ['height', 'min-height', 'max-height', 'top', 'bottom'];
-// ─── Per-run tracking state (reset on each process() call) ───────────────────
-let elementsWithViewportUnits = new Set();
-let originalValues = new WeakMap();
-// ─── Regex ────────────────────────────────────────────────────────────────────
-/** Fresh instance every call — avoids shared lastIndex state with the g flag. */
-function createRegex() {
-    return /([-.\\d]+)(vh|svh|lvh|dvh|vw|svw|lvw|dvw)/gi;
-}
-// ─── Unit conversion ─────────────────────────────────────────────────────────
-function px(value) {
-    return `${value.toFixed(2)}px`;
-}
-function getUnitMap(ctx) {
-    return {
-        vh: ctx.targetHeight,
-        svh: ctx.targetHeight,
-        lvh: ctx.targetHeight,
-        dvh: ctx.targetHeight,
-        vw: ctx.targetWidth,
-        svw: ctx.targetWidth,
-        lvw: ctx.targetWidth,
-        dvw: ctx.targetWidth,
-    };
-}
-function toPx(value, unit, ctx) {
-    const u = unit.toLowerCase();
-    if (u === '%')
-        return (value / 100) * ctx.targetHeight;
-    return (value / 100) * (getUnitMap(ctx)[u] ?? 0);
-}
-function convert(value, unit, ctx) {
-    const num = parseFloat(value);
-    return isNaN(num) ? value : px(toPx(num, unit, ctx));
-}
-function isHeightRelated(prop) {
-    return HEIGHT_RELATED_PROPERTIES.includes(prop);
-}
-/**
- * Use `matchOffset` (from replace() callback) instead of indexOf to get the
- * exact position of the current match — avoids false matches for duplicate values.
- */
-function extractProperty(cssText, matchOffset) {
-    const before = cssText.substring(0, matchOffset);
-    const m = before.match(/([a-z-]+)\s*:\s*[^;{}]*$/i);
-    return m ? m[1].toLowerCase() : '';
-}
-function replaceInText(cssText, ctx) {
-    return cssText.replace(createRegex(), (match, value, unit, offset) => {
-        if (unit === '%') {
-            return isHeightRelated(extractProperty(cssText, offset)) ? convert(value, unit, ctx) : match;
-        }
-        return convert(value, unit, ctx);
-    });
-}
-// ─── Element tracking ─────────────────────────────────────────────────────────
-function trackSelector(selector, propOriginals, ctx) {
-    try {
-        ctx.doc.querySelectorAll(selector).forEach((el) => {
-            elementsWithViewportUnits.add(el);
-            let originals = originalValues.get(el);
-            if (!originals) {
-                originals = new Map();
-                originalValues.set(el, originals);
-            }
-            propOriginals.forEach((v, k) => {
-                if (!originals.has(k))
-                    originals.set(k, v);
-            });
-            trackElement(el, propOriginals);
-        });
-    }
-    catch {
-        logger$4.warn('Invalid selector, skipping:', selector);
-    }
-}
-// ─── CSS processing ───────────────────────────────────────────────────────────
-function processInlineStyles(ctx) {
-    let count = 0;
-    ctx.doc.querySelectorAll('[style]').forEach((el) => {
-        const style = el.getAttribute('style');
-        if (style && createRegex().test(style)) {
-            elementsWithViewportUnits.add(el);
-            el.setAttribute('style', replaceInText(style, ctx));
-            count++;
-        }
-    });
-    logger$4.log(`Replaced ${count} inline style elements`);
-    return count;
-}
-function processStyleTags(ctx) {
-    let count = 0;
-    ctx.doc.querySelectorAll('style').forEach((tag) => {
-        const css = tag.textContent || '';
-        if (createRegex().test(css)) {
-            tag.textContent = replaceInText(css, ctx);
-            count++;
-        }
-    });
-    logger$4.log(`Replaced ${count} <style> tags`);
-    return count;
-}
-function processRule(rule, ctx) {
-    let count = 0;
-    if ('style' in rule && rule.style) {
-        const cssRule = rule;
-        const style = cssRule.style;
-        let hasVp = false;
-        const propOriginals = new Map();
-        for (let i = 0; i < style.length; i++) {
-            const prop = style[i];
-            const value = style.getPropertyValue(prop);
-            if (value && createRegex().test(value)) {
-                hasVp = true;
-                propOriginals.set(prop, value);
-                style.setProperty(prop, replaceInText(value, ctx), style.getPropertyPriority(prop));
+        if (computedValue && (!inlineValue || inlineValue !== computedValue) && !isDefaultCssValue(computedValue)) {
+            const originalValue = elementOriginals?.get(prop) || '';
+            if (applyPropertyWithVerification(s, htmlElement, prop, computedValue, originalValue, tolerance))
                 count++;
-            }
-        }
-        if (hasVp && cssRule.selectorText)
-            trackSelector(cssRule.selectorText, propOriginals, ctx);
-    }
-    if ('cssRules' in rule) {
-        for (const r of Array.from(rule.cssRules || [])) {
-            count += processRule(r, ctx);
-        }
-    }
-    return count;
-}
-/** Processes only inline <style> sheets. Linked sheets are handled by processLinkedStylesheets. */
-function processStylesheets(ctx) {
-    let total = 0;
-    Array.from(ctx.doc.styleSheets).forEach((sheet) => {
-        if (sheet.href)
-            return; // deferred to processLinkedStylesheets
-        try {
-            for (const rule of Array.from(sheet.cssRules || [])) {
-                total += processRule(rule, ctx);
-            }
-        }
-        catch (e) {
-            logger$4.warn('Cannot read stylesheet (CORS?):', e.message);
         }
     });
-    logger$4.log(`Replaced ${total} rules in inline stylesheets`);
-    return total;
+    return count;
 }
-async function processLinkedStylesheets(ctx) {
-    const links = ctx.doc.querySelectorAll('link[rel="stylesheet"]');
-    let count = 0;
-    for (const link of Array.from(links)) {
-        // Skip cross-origin — already in browser CSSOM, handled via processStylesheets
-        if (link.href && !link.href.startsWith(ctx.win.location.origin)) {
-            logger$4.log('Skipping cross-origin CSS:', link.href);
-            continue;
-        }
-        try {
-            const res = await fetch(link.href);
-            let css = await res.text();
-            if (createRegex().test(css)) {
-                css = replaceInText(css, ctx);
-                const style = ctx.doc.createElement('style');
-                style.textContent = css;
-                style.dataset.originalHref = link.href;
-                link.parentNode?.insertBefore(style, link);
-                link.remove();
-                count++;
-            }
-        }
-        catch (e) {
-            logger$4.warn('Cannot load CSS:', link.href, e);
-        }
+function processAll(s, options = {}) {
+    if (!s.running || !s.doc || !s.win || !s.config) {
+        s.logger.warn('Enforcer is not running.');
+        return 0;
     }
-    logger$4.log(`Replaced ${count} linked CSS files`);
-    return count;
+    let totalCount = 0;
+    s.elementsWithViewportUnits.forEach((element) => {
+        totalCount += processElement(s, element, options);
+    });
+    s.logger.log(`Enforced ${totalCount} computed styles for ${s.elementsWithViewportUnits.size} elements`);
+    return totalCount;
+}
+function updateConfig$2(s, cfg) {
+    if (!s.running || !s.config) {
+        s.logger.warn('Enforcer is not running.');
+        return;
+    }
+    s.config = { ...s.config, ...cfg };
+    s.logger.log('Config updated:', cfg);
 }
-// ─── Public entry point ───────────────────────────────────────────────────────
-async function process$1(ctx) {
-    logger$4.configure({ enabled: !!ctx.debug });
-    // Reset tracking state from any previous run
-    elementsWithViewportUnits = new Set();
-    originalValues = new WeakMap();
-    processInlineStyles(ctx);
-    processStyleTags(ctx);
-    processStylesheets(ctx);
-    await processLinkedStylesheets(ctx);
-    // Wait for browser to apply the replaced styles
-    await new Promise((resolve) => requestAnimationFrame(resolve));
-    // Enforce final computed styles to inline with !important
-    const count = processAll({ debug: !!ctx.debug });
-    logger$4.log(`Enforced ${count} computed styles for ${elementsWithViewportUnits.size} tracked elements`);
+
+/**
+ * Computed Style Enforcer
+ * Enforces computed CSS styles with viewport unit verification.
+ */
+// ── Factory ───────────────────────────────────────────────────────────────────
+function createEnforcer() {
+    const s = {
+        logger: createLogger({ enabled: false, prefix: 'ComputedStyleEnforcer' }),
+        doc: null,
+        win: null,
+        config: null,
+        elementsWithViewportUnits: new Set(),
+        originalValues: new WeakMap(),
+        running: false,
+    };
+    return {
+        start: (d, w, cfg, options) => start$3(s, d, w, cfg, options),
+        stop: () => stop$3(s),
+        reset: () => reset(s),
+        trackElement: (element, propertyOriginalValues) => trackElement(s, element, propertyOriginalValues),
+        processElement: (element, options) => processElement(s, element, options),
+        processAll: (options) => processAll(s, options),
+        updateConfig: (cfg) => updateConfig$2(s, cfg),
+        getStateInfo: () => ({
+            isRunning: s.running,
+            trackedElementsCount: s.elementsWithViewportUnits.size,
+            hasConfig: !!s.config,
+        }),
+        isRunning: () => s.running,
+    };
 }
 
+const registry$1 = [];
 /**
- * Built-in global fix — always runs, no shouldApply condition.
- * Registered first so it runs before any other global process hooks.
+ * Register a global fix.
+ * Fixes are run in registration order.
  */
-register$1({
-    name: 'viewport-unit-replacer',
-    description: 'Core: convert vh/vw/svh/dvh/% to px values across all iframe CSS',
-    process: process$1,
-});
+function register$1(fix) {
+    registry$1.push(fix);
+}
+/**
+ * Returns all fixes that are active for the given context.
+ * A fix is active if it has no `shouldApply`, or `shouldApply` returns true.
+ */
+function getActiveFixes(ctx) {
+    return registry$1.filter((fix) => {
+        try {
+            return !fix.shouldApply || fix.shouldApply(ctx);
+        }
+        catch {
+            return false;
+        }
+    });
+}
 
 /**
  * GemPages v7 Slider Fix
@@ -4713,6 +5142,9 @@ function getMaxWByDeviceType(deviceType) {
 // ─── Main fix ─────────────────────────────────────────────────────────────────
 function afterProcess$1({ doc, targetWidth, deviceType }) {
     doc.querySelectorAll(SLIDER_ITEM_SELECTOR).forEach((item) => {
+        // When !gp-min-w-full is set, the item fills 100% width via Tailwind — skip manual width override
+        if (item.classList.contains('!gp-min-w-full'))
+            return;
         const originalWidth = parseFloat(item.style.minWidth) || parseFloat(item.style.maxWidth) || 0;
         if (!originalWidth)
             return;
@@ -4813,37 +5245,6 @@ register$1({
     afterProcess,
 });
 
-const logger$3 = createLogger({ enabled: false, prefix: 'ViewportReplacer' });
-let dimensionsListener = null;
-function attach(debug) {
-    logger$3.configure({ enabled: !!debug });
-    dimensionsListener = (e) => {
-        const ev = e;
-        logger$3.log('Dimensions applied:', ev.detail);
-    };
-    window.addEventListener('iframe-dimensions-applied', dimensionsListener);
-}
-function detach() {
-    if (dimensionsListener) {
-        window.removeEventListener('iframe-dimensions-applied', dimensionsListener);
-        dimensionsListener = null;
-    }
-}
-
-/**
- * Default iframe dimension calculation.
- * Used as fallback when no fix overrides getDimensions().
- */
-function getFinalHeight(doc, win) {
-    void doc.body.offsetHeight; // trigger reflow
-    const bodyMinHeight = parseFloat(win.getComputedStyle(doc.body).minHeight) || 0;
-    const htmlMinHeight = parseFloat(win.getComputedStyle(doc.documentElement).minHeight) || 0;
-    return Math.max(doc.body?.scrollHeight || 0, doc.body?.offsetHeight || 0, doc.documentElement?.scrollHeight || 0, doc.documentElement?.offsetHeight || 0, doc.documentElement?.clientHeight || 0, bodyMinHeight, htmlMinHeight);
-}
-function getFinalWidth(doc) {
-    return Math.max(doc.body?.scrollWidth || 0, doc.body?.offsetWidth || 0, doc.documentElement?.scrollWidth || 0, doc.documentElement?.offsetWidth || 0, doc.documentElement?.clientWidth || 0);
-}
-
 /**
  * Viewport fix pipeline runner.
  *
@@ -4853,68 +5254,79 @@ function getFinalWidth(doc) {
  *   Phase 3: afterProcess   (shop → global)
  *   Phase 4: getDimensions  (shop → global → default)
  */
-const logger$2 = createLogger({ enabled: false, prefix: 'ViewportReplacer' });
+const logger = createLogger({ enabled: false, prefix: 'ViewportReplacer' });
 function configure(debug) {
-    logger$2.configure({ enabled: debug });
+    logger.configure({ enabled: debug });
 }
-async function run$1(ctx, activeGlobal, shopFix) {
-    // ── Phase 1: beforeProcess ────────────────────────────────────────────────
-    for (const fix of activeGlobal) {
-        if (fix.beforeProcess) {
-            logger$2.log(`[beforeProcess] ${fix.name}`);
-            await fix.beforeProcess(ctx);
-        }
-    }
-    if (shopFix?.beforeProcess) {
-        logger$2.log('[beforeProcess] shop');
-        await shopFix.beforeProcess(ctx);
-    }
-    // ── Phase 2: process ──────────────────────────────────────────────────────
-    for (const fix of activeGlobal) {
-        if (fix.process) {
-            logger$2.log(`[process] ${fix.name}`);
-            await fix.process(ctx);
+async function runTracked(label, fn) {
+    const t = perf$3.mark(label);
+    await fn();
+    perf$3.measure(label, t);
+}
+async function runPhase(ctx, options) {
+    const { phaseKey, methodName, entries } = options;
+    await runTracked(`${phaseKey}.${methodName}`, async () => {
+        for (const { name, fn } of entries) {
+            logger.log(`[${methodName}] ${name}`);
+            await runTracked(`${phaseKey}.${name}.${methodName}`, () => fn(ctx));
         }
-    }
-    // ── Phase 3: afterProcess ─────────────────────────────────────────────────
-    if (shopFix?.afterProcess) {
-        logger$2.log('[afterProcess] shop');
-        await shopFix.afterProcess(ctx);
-    }
-    for (const fix of activeGlobal) {
-        if (fix.afterProcess) {
-            logger$2.log(`[afterProcess] ${fix.name}`);
-            await fix.afterProcess(ctx);
+    });
+}
+function collectGlobalEntries(fixes, method) {
+    return fixes
+        .filter((fix) => fix[method] != null)
+        .map((fix) => ({ name: fix.name, fn: fix[method] }));
+}
+function shopEntry(shopFix, method) {
+    if (!shopFix?.[method])
+        return [];
+    return [{ name: 'shop', fn: shopFix[method] }];
+}
+function waitForAnimationFrame() {
+    return new Promise((resolve) => requestAnimationFrame(() => resolve()));
+}
+function resolveFirstDimensions(ctx, candidates) {
+    for (const { name, getDimensions } of candidates) {
+        if (!getDimensions)
+            continue;
+        const dims = getDimensions(ctx);
+        if (dims) {
+            logger.log(`Dimensions from ${name}:`, dims);
+            return dims;
         }
     }
-    // ── Phase 4: getDimensions ────────────────────────────────────────────────
-    return new Promise((resolve) => {
-        requestAnimationFrame(() => {
-            let dimensions = null;
-            // Priority: shop → global → default
-            if (shopFix?.getDimensions) {
-                dimensions = shopFix.getDimensions(ctx);
-                if (dimensions)
-                    logger$2.log('Dimensions from shop fix:', dimensions);
-            }
-            if (!dimensions) {
-                for (const fix of activeGlobal) {
-                    if (fix.getDimensions) {
-                        dimensions = fix.getDimensions(ctx);
-                        if (dimensions) {
-                            logger$2.log(`Dimensions from global fix [${fix.name}]:`, dimensions);
-                            break;
-                        }
-                    }
-                }
-            }
-            if (!dimensions) {
-                dimensions = { height: getFinalHeight(ctx.doc, ctx.win), width: getFinalWidth(ctx.doc) };
-            }
-            logger$2.log('Final dimensions:', dimensions);
-            resolve(dimensions);
-        });
+    return null;
+}
+// ── Pipeline ──────────────────────────────────────────────────────────────────
+async function run$1(ctx, activeGlobal, shopFix) {
+    // [Phase 1]: beforeProcess (global → shop)
+    const beforeGlobalEntries = collectGlobalEntries(activeGlobal, 'beforeProcess');
+    const beforeShopEntries = shopEntry(shopFix, 'beforeProcess');
+    await runPhase(ctx, {
+        phaseKey: 'phase1',
+        methodName: 'beforeProcess',
+        entries: [...beforeGlobalEntries, ...beforeShopEntries],
+    });
+    // [Phase 2]: process (global fixes)
+    const processGlobalEntries = collectGlobalEntries(activeGlobal, 'process');
+    await runPhase(ctx, { phaseKey: 'phase2', methodName: 'process', entries: [...processGlobalEntries] });
+    // [Phase 3]: afterProcess (shop → global)
+    const afterShopEntries = shopEntry(shopFix, 'afterProcess');
+    const afterGlobalEntries = collectGlobalEntries(activeGlobal, 'afterProcess');
+    await runPhase(ctx, {
+        phaseKey: 'phase3',
+        methodName: 'afterProcess',
+        entries: [...afterShopEntries, ...afterGlobalEntries],
     });
+    const t4 = perf$3.mark('phase4.getDimensions');
+    await waitForAnimationFrame();
+    const dimensions = resolveFirstDimensions(ctx, [
+        ...(shopFix ? [{ name: 'shop fix', ...shopFix }] : []),
+        ...activeGlobal,
+    ]) ?? { height: getFinalHeight(ctx.doc, false), width: getFinalWidth(ctx.doc) };
+    logger.log('Final dimensions:', dimensions);
+    perf$3.measure('phase4.getDimensions', t4);
+    return dimensions;
 }
 
 const registry = new Map();
@@ -4988,233 +5400,310 @@ register(`566240210141053597`, {
     afterProcess: restoreAndFixLayout,
 });
 
-const logger$1 = createLogger({ enabled: false, prefix: 'ViewportReplacer' });
-// ─── State ────────────────────────────────────────────────────────────────────
-let doc = null;
-let win = null;
-let config$1 = null;
-let shopFix = null;
-let running$2 = false;
-// ─── Public API ───────────────────────────────────────────────────────────────
-function start$3(iframe, cfg) {
-    if (running$2) {
-        logger$1.warn('Already running. Call stop() first.');
+// ── Module-level functions ────────────────────────────────────────────────────
+function start$2(s, iframe, cfg) {
+    if (s.running) {
+        s.logger.warn('Already running. Call stop() first.');
         return;
     }
     if (!iframe.contentDocument || !iframe.contentWindow) {
         throw new Error('Iframe document or window not accessible');
     }
-    doc = iframe.contentDocument;
-    win = iframe.contentWindow;
-    config$1 = cfg;
-    running$2 = true;
-    shopFix = cfg.shopId != null ? get(cfg.shopId) : null;
-    if (shopFix) {
-        logger$1.log(`Shop fix loaded for "${cfg.shopId}":`, shopFix.description ?? '(no description)');
-    }
-    logger$1.configure({ enabled: !!cfg.debug });
+    s.doc = iframe.contentDocument;
+    s.win = iframe.contentWindow;
+    s.config = cfg;
+    s.running = true;
+    s.shopFix = cfg.shopId != null ? get(cfg.shopId) : null;
+    if (s.shopFix)
+        s.logger.log(`Shop fix loaded for "${cfg.shopId}":`, s.shopFix.description ?? '(no description)');
+    s.logger.configure({ enabled: !!cfg.debug });
     configure(!!cfg.debug);
-    start$4(doc, win, cfg, { debug: !!cfg.debug });
-    attach(cfg.debug);
-    logger$1.log('Started');
+    s.enforcer.start(s.doc, s.win, cfg, { debug: !!cfg.debug });
+    s.listeners.attach(cfg.debug);
+    s.logger.log('Started');
 }
-function stop$3() {
-    if (!running$2)
+function stop$2(s) {
+    if (!s.running)
         return;
-    stop$4();
-    detach();
-    doc = null;
-    win = null;
-    config$1 = null;
-    shopFix = null;
-    running$2 = false;
-    logger$1.log('Stopped');
-}
-async function run() {
-    if (!running$2 || !doc || !win || !config$1) {
-        logger$1.warn('Not running. Call start() first.');
+    s.enforcer.stop();
+    s.listeners.detach();
+    s.doc = null;
+    s.win = null;
+    s.config = null;
+    s.shopFix = null;
+    s.running = false;
+    s.logger.log('Stopped');
+}
+async function run(s) {
+    if (!s.running || !s.doc || !s.win || !s.config) {
+        s.logger.warn('Not running. Call start() first.');
         return { height: 1000, width: 1000 };
     }
     const ctx = {
-        doc,
-        win,
-        deviceType: config$1.deviceType,
-        targetWidth: config$1.targetWidth,
-        targetHeight: config$1.targetHeight,
-        debug: config$1.debug,
+        doc: s.doc,
+        win: s.win,
+        deviceType: s.config.deviceType,
+        targetWidth: s.config.targetWidth,
+        targetHeight: s.config.targetHeight,
+        debug: s.config.debug,
+        enforcer: s.enforcer,
     };
     const activeGlobal = getActiveFixes(ctx);
-    if (activeGlobal.length > 0) {
-        logger$1.log(`Active global fixes: ${activeGlobal.map((f) => f.name).join(', ')}`);
-    }
+    if (activeGlobal.length > 0)
+        s.logger.log(`Active global fixes: ${activeGlobal.map((f) => f.name).join(', ')}`);
+    const tRun = perf$3.mark('viewport.run');
     try {
-        return await run$1(ctx, activeGlobal, shopFix);
+        const result = await run$1(ctx, activeGlobal, s.shopFix);
+        perf$3.measure('viewport.run', tRun);
+        return result;
     }
     catch (err) {
-        logger$1.error('Critical error:', err);
-        return { height: doc.body?.scrollHeight || 1000, width: doc.body?.scrollWidth || 1000 };
+        perf$3.measure('viewport.run', tRun);
+        s.logger.error('Critical error:', err);
+        return { height: s.doc.body?.scrollHeight || 1000, width: s.doc.body?.scrollWidth || 1000 };
     }
 }
-
-const logger = createLogger({
-    enabled: false,
-    prefix: 'IframeFixer',
-});
-// ============================================================================
-// State
-// ============================================================================
-let iframe = null;
-let config = null;
-let running$1 = false;
-let loadListener = null;
-// ============================================================================
-// Core API Functions
-// ============================================================================
-function start$2(cfg) {
-    if (running$1) {
-        logger.warn('Fixer is already running. Call stop() first.');
+function updateConfig$1(s, cfg) {
+    if (!s.running || !s.config) {
+        s.logger.warn('Not running. Call start() first.');
         return;
     }
-    iframe = cfg.iframe;
-    config = cfg;
-    running$1 = true;
-    logger.configure({ enabled: !!cfg.debug });
-    logger.log('Iframe fixer started');
-    initialize();
+    s.config = { ...s.config, ...cfg };
+    if (cfg.shopId !== undefined)
+        s.shopFix = cfg.shopId != null ? get(cfg.shopId) : null;
+    s.enforcer.updateConfig(cfg);
+    s.logger.log('Config updated');
+}
+// ── Factory ───────────────────────────────────────────────────────────────────
+function createViewportProcessor() {
+    const s = {
+        logger: createLogger({ enabled: false, prefix: 'ViewportReplacer' }),
+        enforcer: createEnforcer(),
+        listeners: createViewportListeners(),
+        doc: null,
+        win: null,
+        config: null,
+        shopFix: null,
+        running: false,
+    };
+    return {
+        start: (iframe, cfg) => start$2(s, iframe, cfg),
+        stop: () => stop$2(s),
+        run: () => run(s),
+        updateConfig: (cfg) => updateConfig$1(s, cfg),
+        isRunning: () => s.running,
+    };
+}
+
+// ── Module-level functions ────────────────────────────────────────────────────
+function dispatchDimensionsEvent(dimensions) {
+    window.dispatchEvent(new CustomEvent('iframe-dimensions-applied', { detail: dimensions }));
 }
-function stop$2() {
-    if (!running$1) {
+async function process(s) {
+    if (!s.iframe || !s.config)
         return;
-    }
-    // Stop viewport replacer
-    stop$3();
-    stop$5();
-    // Remove load listener
-    if (iframe && loadListener) {
-        iframe.removeEventListener('load', loadListener);
-        loadListener = null;
-    }
-    iframe = null;
-    config = null;
-    running$1 = false;
-    logger.log('Iframe fixer stopped');
-}
-async function initialize() {
-    if (!iframe || !config) {
-        logger.error('iframe not found');
-        config?.onError?.(new Error('iframe not found'));
+    if (!s.iframe.contentDocument || !s.iframe.contentWindow) {
+        s.logger.error('Cannot access iframe document');
+        s.config.onError?.(new Error('Cannot access iframe document'));
         return;
     }
-    // Wait for iframe to load completely
-    if (iframe.contentDocument?.readyState === 'complete') {
-        await process();
+    const sessionId = `render-${Date.now()}`;
+    perf$3.startSession(sessionId);
+    const t0 = perf$3.mark('orchestrator.process');
+    try {
+        s.logger.groupCollapsed('Processing...');
+        s.viewportReplacer.start(s.iframe, s.config);
+        s.navigationBlocker.start(s.iframe, { debug: s.config.debug });
+        const result = await s.viewportReplacer.run();
+        perf$3.measure('orchestrator.process', t0);
+        perf$3.endSession();
+        s.logger.groupEnd();
+        s.logger.log('Process completed:', result);
+        s.config.onSuccess?.(result);
+        dispatchDimensionsEvent(result);
     }
-    else {
-        loadListener = handleIframeLoad;
-        iframe.addEventListener('load', loadListener);
+    catch (error) {
+        perf$3.measure('orchestrator.process', t0);
+        perf$3.endSession();
+        s.logger.error('Failed to process:', error);
+        s.config.onError?.(error);
     }
 }
-async function process() {
-    if (!iframe || !config)
-        return;
-    if (!iframe.contentDocument || !iframe.contentWindow) {
-        logger.error('Cannot access iframe document');
-        config.onError?.(new Error('Cannot access iframe document'));
+async function initialize(s) {
+    if (!s.iframe || !s.config) {
+        s.logger.error('iframe not found');
+        s.config?.onError?.(new Error('iframe not found'));
         return;
     }
-    try {
-        logger.log('Processing viewport units...');
-        start$3(iframe, config);
-        start$5(iframe, { debug: config.debug });
-        const result = await run();
-        logger.log('Process completed:', result);
-        config.onSuccess?.(result);
-        dispatchDimensionsEvent(result);
-        // Optionally setup height observer
-        // setupHeightObserver();
+    if (s.iframe.contentDocument?.readyState === 'complete') {
+        await process(s);
     }
-    catch (error) {
-        logger.error('Failed to process:', error);
-        config.onError?.(error);
+    else {
+        s.loadListener = () => process(s);
+        s.iframe.addEventListener('load', s.loadListener);
     }
 }
-// ============================================================================
-// Helper Functions
-// ============================================================================
-function dispatchDimensionsEvent(dimensions) {
-    window.dispatchEvent(new CustomEvent('iframe-dimensions-applied', {
-        detail: dimensions,
-    }));
+function start$1(s, cfg) {
+    if (s.running) {
+        s.logger.warn('Fixer is already running. Call stop() first.');
+        return;
+    }
+    s.iframe = cfg.iframe;
+    s.config = cfg;
+    s.running = true;
+    s.logger.configure({ enabled: !!cfg.debug });
+    s.logger.log('Started');
+    initialize(s);
+}
+function stop$1(s) {
+    if (!s.running)
+        return;
+    s.viewportReplacer.stop();
+    s.heightObserver.stop();
+    s.navigationBlocker.stop();
+    if (s.iframe && s.loadListener) {
+        s.iframe.removeEventListener('load', s.loadListener);
+        s.loadListener = null;
+    }
+    s.iframe = null;
+    s.config = null;
+    s.running = false;
+    s.logger.log('Stopped');
+}
+function startHeightObserver(s) {
+    if (!s.iframe || !s.config)
+        return;
+    s.heightObserver.stop();
+    s.heightObserver.start(s.iframe, {
+        iframe: s.iframe,
+        debug: s.config.debug,
+        throttleMs: 25,
+        debounceMs: 500,
+        cooldownMs: 1000,
+        startDelayMs: s.config.heightObserverStartDelayMs,
+        onHeightChange: (result) => {
+            s.config?.onSuccess?.(result);
+            dispatchDimensionsEvent(result);
+        },
+        onError: (error) => {
+            s.config?.onError?.(error);
+        },
+    });
 }
-function handleIframeLoad() {
-    process();
+async function recalculate$1(s) {
+    if (!s.running) {
+        s.logger.warn('Fixer is not running.');
+        return;
+    }
+    s.logger.log('Recalculating...');
+    await process(s);
 }
-/**
- * Enable navigation blocking
- */
-function enableNavigationBlocking$2() {
-    if (!running$1) {
-        logger.warn('Fixer is not running. Call start() first.');
+function updateConfig(s, cfg) {
+    if (!s.running || !s.config) {
+        s.logger.warn('Fixer is not running.');
         return;
     }
-    enable();
+    s.config = { ...s.config, ...cfg };
+    s.viewportReplacer.updateConfig(cfg);
+    s.logger.log('Config updated');
+}
+// ── Factory ───────────────────────────────────────────────────────────────────
+function createOrchestrator() {
+    const s = {
+        logger: createLogger({ enabled: false, prefix: 'IframeFixer' }),
+        viewportReplacer: createViewportProcessor(),
+        navigationBlocker: createNavigationBlocker(),
+        heightObserver: createHeightObserver(),
+        iframe: null,
+        config: null,
+        running: false,
+        loadListener: null,
+    };
+    return {
+        start: (cfg) => start$1(s, cfg),
+        stop: () => stop$1(s),
+        recalculate: () => recalculate$1(s),
+        updateConfig: (cfg) => updateConfig(s, cfg),
+        enableNavigationBlocking: () => s.navigationBlocker.enable(),
+        enableNavigationBlockingMessage: () => s.navigationBlocker.enableMessage(),
+        disableNavigationBlocking: () => s.navigationBlocker.disable(),
+        disableNavigationBlockingMessage: () => s.navigationBlocker.disableMessage(),
+        startHeightObserver: () => startHeightObserver(s),
+        isRunning: () => s.running,
+        getStateInfo: () => ({
+            isRunning: s.running,
+            hasIframe: !!s.iframe,
+            hasConfig: !!s.config,
+            hasNavigationBlocker: s.navigationBlocker.isRunning(),
+            hasHeightObserver: s.heightObserver.isRunning(),
+            viewportReplacerRunning: s.viewportReplacer.isRunning(),
+        }),
+    };
 }
 
 /**
- * Iframe Helper Starter Module
- * @module start
+ * Iframe Helper — factory entry point.
+ *
+ * Each call to `createIframeHelper()` returns a fully isolated instance
+ * with its own processor state. Use one instance per iframe.
  */
-// ============================================================================
-// State
-// ============================================================================
-let running = false;
-// ============================================================================
-// Public API
-// ============================================================================
-function start$1(config) {
-    if (running) {
-        console.warn('[IframeHelperStarter] Already running. Call stop() first.');
+// ── Module-level functions ────────────────────────────────────────────────────
+function start(s, config) {
+    if (s.running) {
+        console.warn('[IframeHelper] Already running. Call stop() first.');
         return;
     }
-    start$2(config);
-    running = true;
+    s.fixer.start(config);
+    s.running = true;
 }
-function stop$1() {
-    if (!running) {
+function stop(s) {
+    if (!s.running)
         return;
-    }
-    stop$2();
-    running = false;
+    s.fixer.stop();
+    s.running = false;
 }
-function enableNavigationBlocking$1() {
-    if (!running) {
-        console.warn('[IframeHelperStarter] Not running. Call start() first.');
+async function recalculate(s) {
+    if (!s.running) {
+        console.warn('[IframeHelper] Not running. Call start() first.');
         return;
     }
-    enableNavigationBlocking$2();
+    await s.fixer.recalculate();
 }
-
-function start(config) {
-    start$1(config);
-}
-function stop() {
-    stop$1();
+function enableNavigationBlocking(s) {
+    if (!s.running) {
+        console.warn('[IframeHelper] Not running. Call start() first.');
+        return;
+    }
+    s.fixer.enableNavigationBlocking();
 }
-function enableNavigationBlocking() {
-    enableNavigationBlocking$1();
+// ── Factory ───────────────────────────────────────────────────────────────────
+function createIframeHelper() {
+    const s = {
+        fixer: createOrchestrator(),
+        running: false,
+    };
+    return {
+        start: (config) => start(s, config),
+        stop: () => stop(s),
+        recalculate: () => recalculate(s),
+        enableNavigationBlocking: () => enableNavigationBlocking(s),
+        startHeightObserver: () => s.fixer.startHeightObserver(),
+        isRunning: () => s.running,
+    };
 }
 
+const iframeHelper = createIframeHelper();
 function useVizLiveRender() {
     const setIframeHeight = useHeatmapVizRectContext((s) => s.setIframeHeight);
     const wrapperHeight = useHeatmapVizRectContext((s) => s.wrapperHeight);
     const wrapperWidth = useHeatmapVizRectContext((s) => s.wrapperWidth);
-    const setIsRenderViz = useHeatmapVizContext((s) => s.setIsRenderViz);
-    const htmlContent = useHeatmapLiveStore((s) => s.htmlContent);
-    const targetUrl = useHeatmapLiveStore((s) => s.targetUrl);
+    const setIsDomLoaded = useHeatmapVizContext((s) => s.setIsDomLoaded);
+    const htmlContent = useHeatmapLiveContext((s) => s.htmlContent);
+    const targetUrl = useHeatmapLiveContext((s) => s.targetUrl);
     const deviceType = useHeatmapSettingContext((s) => s.deviceType);
-    const renderMode = useHeatmapLiveStore((s) => s.renderMode);
-    const storefrontPassword = useHeatmapLiveStore((s) => s.storefrontPassword);
-    useHeatmapWidthByDevice();
+    const renderMode = useHeatmapLiveContext((s) => s.renderMode);
+    const storefrontPassword = useHeatmapLiveContext((s) => s.storefrontPassword);
+    useHeatmapViewportByDevice();
     const { iframeRef, isReady } = useVizLiveIframeMsg();
     // Handle iframe rendering based on mode
     useEffect(() => {
@@ -5254,10 +5743,10 @@ function useVizLiveRender() {
         const hasContent = (renderMode === 'portal' && targetUrl) || (renderMode === 'inline' && htmlContent);
         if (!iframe || !hasContent)
             return;
-        setIsRenderViz(true);
-        initIframeHelper$1(iframe, deviceType, { width: wrapperWidth, height: wrapperHeight }, (height) => {
+        setIsDomLoaded(true);
+        startIframe$1(iframe, deviceType, { width: wrapperWidth, height: wrapperHeight }, (height) => {
             height && setIframeHeight(height);
-            setIsRenderViz(true);
+            setIsDomLoaded(true);
         });
         return () => { };
     }, [
@@ -5269,7 +5758,7 @@ function useVizLiveRender() {
         targetUrl,
         htmlContent,
         iframeRef,
-        setIsRenderViz,
+        setIsDomLoaded,
         setIframeHeight,
     ]);
     return {
@@ -5288,9 +5777,9 @@ function buildPortalUrl(targetUrl, storefrontPassword) {
     const portalServiceUrl = getPortalServiceUrl();
     return `${portalServiceUrl}/?${params.toString()}`;
 }
-function initIframeHelper$1(iframe, deviceType = EDeviceType.Desktop, rect, onSuccess) {
-    stop();
-    start({
+function startIframe$1(iframe, deviceType = EDeviceType.Desktop, rect, onSuccess) {
+    iframeHelper.stop();
+    iframeHelper.start({
         deviceType: deviceType,
         targetWidth: rect.width,
         targetHeight: rect.height,
@@ -5301,12 +5790,115 @@ function initIframeHelper$1(iframe, deviceType = EDeviceType.Desktop, rect, onSu
         },
     });
     // fixer.recalculate();
-    enableNavigationBlocking();
+    iframeHelper.enableNavigationBlocking();
+}
+
+const DEFAULT_CONFIG = {
+    dbName: 'gx-viz-html-cache',
+    maxEntries: 20,
+    ttlMs: 24 * 60 * 60 * 1000, // 24 hours
+    cacheVersion: 3.0,
+};
+let _config = { ...DEFAULT_CONFIG };
+function getHtmlCacheConfig() {
+    return _config;
+}
+/** Build a full cache key that includes the cache version to handle invalidation. */
+function buildCacheKey(baseKey, shortCircuitStrategy = 0) {
+    return `v${_config.cacheVersion}:${baseKey}:${shortCircuitStrategy}`;
+}
+
+const STORE_NAME = 'entries';
+const IDB_SCHEMA_VERSION = 1;
+function openDb() {
+    const { dbName } = getHtmlCacheConfig();
+    return new Promise((resolve, reject) => {
+        const req = indexedDB.open(dbName, IDB_SCHEMA_VERSION);
+        req.onupgradeneeded = () => {
+            const db = req.result;
+            if (!db.objectStoreNames.contains(STORE_NAME)) {
+                const store = db.createObjectStore(STORE_NAME, { keyPath: 'key' });
+                store.createIndex('timestamp', 'timestamp');
+            }
+        };
+        req.onsuccess = () => resolve(req.result);
+        req.onerror = () => reject(req.error);
+    });
+}
+async function evict(db) {
+    const { maxEntries } = getHtmlCacheConfig();
+    return new Promise((resolve) => {
+        const tx = db.transaction(STORE_NAME, 'readwrite');
+        const store = tx.objectStore(STORE_NAME);
+        const countReq = store.count();
+        countReq.onsuccess = () => {
+            if (countReq.result <= maxEntries) {
+                resolve();
+                return;
+            }
+            const idx = store.index('timestamp');
+            const cursorReq = idx.openCursor();
+            let toDelete = countReq.result - maxEntries;
+            cursorReq.onsuccess = () => {
+                const cursor = cursorReq.result;
+                if (cursor && toDelete > 0) {
+                    cursor.delete();
+                    toDelete--;
+                    cursor.continue();
+                }
+                else {
+                    resolve();
+                }
+            };
+            cursorReq.onerror = () => resolve();
+        };
+        countReq.onerror = () => resolve();
+    });
 }
+const htmlCache = {
+    async get(key) {
+        try {
+            const { ttlMs } = getHtmlCacheConfig();
+            const db = await openDb();
+            return new Promise((resolve) => {
+                const tx = db.transaction(STORE_NAME, 'readonly');
+                const req = tx.objectStore(STORE_NAME).get(key);
+                req.onsuccess = () => {
+                    const entry = req.result;
+                    if (!entry || Date.now() - entry.timestamp > ttlMs) {
+                        resolve(null);
+                    }
+                    else {
+                        resolve(entry);
+                    }
+                };
+                req.onerror = () => resolve(null);
+            });
+        }
+        catch {
+            return null;
+        }
+    },
+    async set(entry) {
+        try {
+            const db = await openDb();
+            await new Promise((resolve, reject) => {
+                const tx = db.transaction(STORE_NAME, 'readwrite');
+                tx.objectStore(STORE_NAME).put(entry);
+                tx.oncomplete = () => resolve();
+                tx.onerror = () => reject(tx.error);
+            });
+            await evict(db);
+        }
+        catch {
+            // ignore cache write errors
+        }
+    },
+};
 
 const CANVAS_ID = 'clarity-heatmap-canvas';
 const ATTENTION_HUES = [240, 210, 180, 150, 120, 90, 60, 30, 0];
-const CANVAS_MAX_HEIGHT = 65535;
+const CANVAS_MAX_HEIGHT$1 = 65535;
 const Z_INDEX = 2147483647;
 const DEFAULT_IFRAME_ID = 'clarity-snapshot-heatmap-iframe';
 const SECONDARY_IFRAME_ID = 'clarity-snapshot-heatmap-iframe-secondary';
@@ -5371,7 +5963,7 @@ class AttentionMapRenderer {
         const body = doc.body;
         const de = doc.documentElement;
         const contentHeight = Math.max(body.scrollHeight, body.offsetHeight, de.clientHeight, de.scrollHeight, de.offsetHeight);
-        canvas.height = Math.min(contentHeight, CANVAS_MAX_HEIGHT);
+        canvas.height = Math.min(contentHeight, CANVAS_MAX_HEIGHT$1);
         canvas.style.top = '0px';
         if (canvas.width <= 0 || canvas.height <= 0 || !this.attentionMapData)
             return;
@@ -5393,7 +5985,7 @@ class AttentionMapRenderer {
         const body = doc.body;
         const de = doc.documentElement;
         const contentHeight = Math.max(body.scrollHeight, body.offsetHeight, de.clientHeight, de.scrollHeight, de.offsetHeight);
-        canvas.height = Math.min(contentHeight, CANVAS_MAX_HEIGHT);
+        canvas.height = Math.min(contentHeight, CANVAS_MAX_HEIGHT$1);
         canvas.style.top = '0px';
         let iframeEl = document.getElementById(this.heatmapIframeId);
         if (!iframeEl) {
@@ -5409,9 +6001,9 @@ class AttentionMapRenderer {
             for (const point of this.attentionMapData) {
                 const timePercent = Math.floor((100 * point.cumulativeTime) / maxCumulativeTime);
                 const colorIndex = timePercent <= 5 ? 0 : Math.min(Math.ceil(timePercent / 10), 8);
-                if (point.scrollPos / 100 <= 1) {
+                if (point.scrollReachY / 100 <= 1) {
                     point.colorIndex = colorIndex;
-                    colorStops[point.scrollPos] = colorIndex;
+                    colorStops[point.scrollReachY] = colorIndex;
                 }
             }
             // Smooth the top portion based on the fold/viewport ratio
@@ -5442,7 +6034,7 @@ class AttentionMapRenderer {
     buildAggregatedData = (doc, contentHeight, iframeEl) => {
         const elementCache = new Map();
         this.attentionMapData = Array.from({ length: 100 }, (_, i) => ({
-            scrollPos: i,
+            scrollReachY: i,
             cumulativeTime: 0,
             colorIndex: 0,
         }));
@@ -5481,63 +6073,526 @@ class AttentionMapRenderer {
                 }
             }
         }
-        return maxTime;
-    };
-    overlay = () => {
-        if (!this.state?.window)
-            return null;
-        const win = this.state.window;
-        const doc = win.document;
-        const de = doc.documentElement;
-        let canvas = doc.getElementById(CANVAS_ID + '-single');
-        if (!canvas) {
-            canvas = doc.createElement('CANVAS');
-            canvas.id = CANVAS_ID + '-single';
-            canvas.width = 0;
-            canvas.height = 0;
-            canvas.style.position = 'absolute';
-            canvas.style.zIndex = `${Z_INDEX}`;
-            canvas.style.display = 'block';
-            de.appendChild(canvas);
-            win.addEventListener('resize', this.reRender, true);
-            this.observer = typeof window.ResizeObserver !== 'undefined' ? new ResizeObserver(this.reRender) : null;
-            this.observer?.observe(doc.body);
+        return maxTime;
+    };
+    overlay = () => {
+        if (!this.state?.window)
+            return null;
+        const win = this.state.window;
+        const doc = win.document;
+        const de = doc.documentElement;
+        let canvas = doc.getElementById(CANVAS_ID + '-single');
+        if (!canvas) {
+            canvas = doc.createElement('CANVAS');
+            canvas.id = CANVAS_ID + '-single';
+            canvas.width = 0;
+            canvas.height = 0;
+            canvas.style.position = 'absolute';
+            canvas.style.zIndex = `${Z_INDEX}`;
+            canvas.style.display = 'block';
+            de.appendChild(canvas);
+            win.addEventListener('resize', this.reRender, true);
+            this.observer = typeof window.ResizeObserver !== 'undefined' ? new ResizeObserver(this.reRender) : null;
+            this.observer?.observe(doc.body);
+        }
+        canvas.width = de.clientWidth;
+        canvas.height = de.clientHeight;
+        canvas.style.left = `${win.pageXOffset}px`;
+        canvas.style.top = `${win.pageYOffset}px`;
+        canvas.getContext('2d')?.clearRect(0, 0, canvas.width, canvas.height);
+        return canvas;
+    };
+}
+
+const CANVAS_MAX_HEIGHT = 65535;
+const REDRAW_INTERVAL = 30;
+class ScrollBucketRenderer {
+    heatmap;
+    lastData = null;
+    dimensionsListener = null;
+    redrawTimeout = null;
+    constructor(heatmap) {
+        this.heatmap = heatmap;
+        this.attachDimensionsListener();
+    }
+    redraw = () => {
+        if (!this.lastData)
+            return;
+        if (this.redrawTimeout)
+            clearTimeout(this.redrawTimeout);
+        this.redrawTimeout = setTimeout(() => this.draw(this.lastData), REDRAW_INTERVAL);
+    };
+    attachDimensionsListener = () => {
+        this.dimensionsListener = () => this.redraw();
+        window.addEventListener('iframe-dimensions-applied', this.dimensionsListener);
+    };
+    detachDimensionsListener = () => {
+        if (this.dimensionsListener) {
+            window.removeEventListener('iframe-dimensions-applied', this.dimensionsListener);
+            this.dimensionsListener = null;
+        }
+        if (this.redrawTimeout) {
+            clearTimeout(this.redrawTimeout);
+            this.redrawTimeout = null;
+        }
+    };
+    reset = () => {
+        // no-op: canvas state is managed by the shared heatmap instance
+    };
+    clear = () => {
+        this.lastData = null;
+        this.detachDimensionsListener();
+    };
+    /**
+     * Render discrete color bands for scrollRevenue / scrollAttention data.
+     * Uses the shared heatmap canvas (same as HeatmapHelper.scroll()) to avoid
+     * duplicate portal canvas management.
+     * Stores data so the canvas can be redrawn when iframe height changes.
+     */
+    renderBucket = async (data) => {
+        if (!this.heatmap)
+            return;
+        this.attachDimensionsListener();
+        this.lastData = data;
+        await this.heatmap.waitForDialogs();
+        this.draw(data);
+    };
+    draw = (data) => {
+        if (!this.heatmap)
+            return;
+        const canvas = this.heatmap.overlay();
+        if (!canvas)
+            return;
+        const context = canvas.getContext('2d');
+        const doc = this.heatmap.state.window.document;
+        const body = doc.body;
+        const de = doc.documentElement;
+        const height = Math.max(body.scrollHeight, body.offsetHeight, de.clientHeight, de.scrollHeight, de.offsetHeight);
+        // Same canvas setup as HeatmapHelper.scroll(): full content height, top=0
+        canvas.height = Math.min(height, CANVAS_MAX_HEIGHT);
+        canvas.style.top = '0px';
+        if (canvas.width <= 0 || canvas.height <= 0)
+            return;
+        const buckets = this.mapToBuckets(data);
+        const maxPercent = buckets.length > 0 ? Math.max(...buckets.map((b) => b.percent)) : 0;
+        // Coldest hue (240 = blue) used as the baseline for buckets with no data
+        const coldColor = 'hsla(240, 100%, 50%, 0.6)';
+        const gradient = context.createLinearGradient(0, 0, 0, canvas.height);
+        if (buckets.length === 0 || maxPercent <= 0) {
+            // No data — fill entire canvas with the coldest color
+            gradient.addColorStop(0, coldColor);
+            gradient.addColorStop(1, coldColor);
+        }
+        else {
+            for (const bucket of buckets) {
+                const stopMid = (bucket.startY + bucket.endY) / 2 / 100;
+                // Same hue direction as HeatmapHelper.scroll() (MaxHue = 240):
+                // high percent → hue 0 (red/hot), low percent → hue 240 (blue/cold)
+                const hue = (1 - bucket.percent / maxPercent) * 240;
+                const color = `hsla(${Math.round(hue)}, 100%, 50%, 0.6)`;
+                gradient.addColorStop(stopMid, color);
+            }
+        }
+        context.fillStyle = gradient;
+        context.fillRect(0, 0, canvas.width, canvas.height);
+    };
+    /**
+     * Convert flat position markers → structured buckets with startY/endY.
+     *
+     * Input positions: [0, 5, 10, 15, ..., 95]
+     *   position=0  → { startY: 0,  endY: 5  }  (special start marker)
+     *   position=10 → { startY: 5,  endY: 10 }
+     *   position=15 → { startY: 10, endY: 15 }
+     */
+    mapToBuckets = (data) => {
+        const sorted = [...data].sort((a, b) => a.position - b.position);
+        const buckets = [];
+        for (let i = 0; i < sorted.length; i++) {
+            const current = sorted[i];
+            let startY;
+            let endY;
+            if (current.position === 0) {
+                // position=0 is the start marker → range 0 to next position
+                const next = sorted[i + 1];
+                if (!next)
+                    continue;
+                startY = 0;
+                endY = next.position;
+            }
+            else {
+                // Each non-zero position is the END of its bucket; start = previous position
+                const prev = sorted[i - 1];
+                startY = prev ? prev.position : 0;
+                endY = current.position;
+            }
+            buckets.push({ startY, endY, value: current.value, percent: current.percent });
+        }
+        return buckets;
+    };
+}
+
+var Event;
+(function (Event) {
+    /* Data */
+    Event[Event["Metric"] = 0] = "Metric";
+    Event[Event["Dimension"] = 1] = "Dimension";
+    Event[Event["Upload"] = 2] = "Upload";
+    Event[Event["Upgrade"] = 3] = "Upgrade";
+    Event[Event["Baseline"] = 4] = "Baseline";
+    Event[Event["Discover"] = 5] = "Discover";
+    Event[Event["Mutation"] = 6] = "Mutation";
+    Event[Event["Region"] = 7] = "Region";
+    Event[Event["Document"] = 8] = "Document";
+    Event[Event["Click"] = 9] = "Click";
+    Event[Event["Scroll"] = 10] = "Scroll";
+    Event[Event["Resize"] = 11] = "Resize";
+    Event[Event["MouseMove"] = 12] = "MouseMove";
+    Event[Event["MouseDown"] = 13] = "MouseDown";
+    Event[Event["MouseUp"] = 14] = "MouseUp";
+    Event[Event["MouseWheel"] = 15] = "MouseWheel";
+    Event[Event["DoubleClick"] = 16] = "DoubleClick";
+    Event[Event["TouchStart"] = 17] = "TouchStart";
+    Event[Event["TouchEnd"] = 18] = "TouchEnd";
+    Event[Event["TouchMove"] = 19] = "TouchMove";
+    Event[Event["TouchCancel"] = 20] = "TouchCancel";
+    Event[Event["Selection"] = 21] = "Selection";
+    Event[Event["Timeline"] = 22] = "Timeline";
+    Event[Event["Page"] = 23] = "Page";
+    Event[Event["Custom"] = 24] = "Custom";
+    Event[Event["Ping"] = 25] = "Ping";
+    Event[Event["Unload"] = 26] = "Unload";
+    Event[Event["Input"] = 27] = "Input";
+    Event[Event["Visibility"] = 28] = "Visibility";
+    Event[Event["Navigation"] = 29] = "Navigation";
+    /**
+     * @deprecated No longer support Network Connection
+     */
+    Event[Event["Connection"] = 30] = "Connection";
+    Event[Event["ScriptError"] = 31] = "ScriptError";
+    /**
+     * @deprecated No longer support Image Error
+     */
+    Event[Event["ImageError"] = 32] = "ImageError";
+    Event[Event["Log"] = 33] = "Log";
+    Event[Event["Variable"] = 34] = "Variable";
+    Event[Event["Limit"] = 35] = "Limit";
+    Event[Event["Summary"] = 36] = "Summary";
+    /**
+     * @deprecated No longer support Box event
+     */
+    Event[Event["Box"] = 37] = "Box";
+    Event[Event["Clipboard"] = 38] = "Clipboard";
+    Event[Event["Submit"] = 39] = "Submit";
+    Event[Event["Extract"] = 40] = "Extract";
+    Event[Event["Fraud"] = 41] = "Fraud";
+    Event[Event["Change"] = 42] = "Change";
+    Event[Event["Snapshot"] = 43] = "Snapshot";
+    Event[Event["Animation"] = 44] = "Animation";
+    Event[Event["StyleSheetAdoption"] = 45] = "StyleSheetAdoption";
+    Event[Event["StyleSheetUpdate"] = 46] = "StyleSheetUpdate";
+    Event[Event["Consent"] = 47] = "Consent";
+    Event[Event["ContextMenu"] = 48] = "ContextMenu";
+    // 49 is reserved for internal use
+    Event[Event["Focus"] = 50] = "Focus";
+    Event[Event["CustomElement"] = 51] = "CustomElement";
+    Event[Event["Chat"] = 52] = "Chat";
+    // Apps specific events
+    Event[Event["WebViewDiscover"] = 100] = "WebViewDiscover";
+    Event[Event["WebViewMutation"] = 101] = "WebViewMutation";
+    Event[Event["MutationError"] = 102] = "MutationError";
+    Event[Event["FragmentVisibility"] = 103] = "FragmentVisibility";
+    Event[Event["Keystrokes"] = 104] = "Keystrokes";
+    Event[Event["BackGesture"] = 105] = "BackGesture";
+    Event[Event["WebViewStatus"] = 106] = "WebViewStatus";
+    Event[Event["AppInstallReferrer"] = 107] = "AppInstallReferrer";
+    // 200-300 reserved for internal use
+})(Event || (Event = {}));
+
+var Constant;
+(function (Constant) {
+    Constant["Empty"] = "";
+    Constant["SvgPrefix"] = "svg:";
+    Constant["DataPrefix"] = "data:";
+    Constant["IFramePrefix"] = "iframe:";
+    Constant["SvgNamespace"] = "http://www.w3.org/2000/svg";
+    Constant["Id"] = "id";
+    Constant["Class"] = "class";
+    Constant["Style"] = "style";
+    Constant["Href"] = "href";
+    Constant["Src"] = "src";
+    Constant["Srcset"] = "srcset";
+    Constant["Hash"] = "#";
+    Constant["Dot"] = ".";
+    Constant["Separator"] = ">";
+    Constant["Tilde"] = "~";
+    Constant["Bang"] = "!";
+    Constant["Period"] = ".";
+    Constant["Comma"] = ",";
+    Constant["DataAttribute"] = "data-";
+    Constant["MaskData"] = "data-clarity-mask";
+    Constant["UnmaskData"] = "data-clarity-unmask";
+    Constant["RegionData"] = "data-clarity-region";
+    Constant["GXDialogModal"] = "gx-dialog-modal";
+    Constant["Type"] = "type";
+    Constant["Submit"] = "submit";
+    Constant["Name"] = "name";
+    Constant["Base"] = "*B";
+    Constant["SameOrigin"] = "*O";
+    Constant["Object"] = "object";
+    Constant["Function"] = "function";
+    Constant["StyleTag"] = "STYLE";
+    Constant["LinkTag"] = "LINK";
+    Constant["InputTag"] = "INPUT";
+    Constant["IFrameTag"] = "IFRAME";
+    Constant["ImageTag"] = "IMG";
+    Constant["TitleTag"] = "TITLE";
+    Constant["BodyTag"] = "BODY";
+    Constant["SvgTag"] = "svg:svg";
+    Constant["BaseTag"] = "BASE";
+    Constant["NativeCode"] = "[native code]";
+    Constant["DocumentTag"] = "*D";
+    Constant["ShadowDomTag"] = "*S";
+    Constant["PolyfillShadowDomTag"] = "*P";
+    Constant["TextTag"] = "*T";
+    Constant["SuspendMutationTag"] = "*M";
+    Constant["ChildList"] = "childList";
+    Constant["Attributes"] = "attributes";
+    Constant["CharacterData"] = "characterData";
+    Constant["Throttle"] = "throttle";
+    Constant["LoadEvent"] = "load";
+    Constant["Pixel"] = "px";
+    Constant["BorderBox"] = "border-box";
+    Constant["Value"] = "value";
+    Constant["MutationObserver"] = "MutationObserver";
+    Constant["JsonLD"] = "application/ld+json";
+    Constant["String"] = "string";
+    Constant["Number"] = "number";
+    Constant["Disable"] = "disable";
+    Constant["HTML"] = "HTML";
+    Constant["Property"] = "property";
+    Constant["Content"] = "content";
+    Constant["Generator"] = "generator";
+    Constant["ogType"] = "og:type";
+    Constant["ogTitle"] = "og:title";
+    Constant["SvgStyle"] = "svg:style";
+    Constant["StyleSheet"] = "stylesheet";
+})(Constant || (Constant = {}));
+
+var ShortCircuitStrategy;
+(function (ShortCircuitStrategy) {
+    ShortCircuitStrategy[ShortCircuitStrategy["None"] = 0] = "None";
+    ShortCircuitStrategy[ShortCircuitStrategy["HashFirstTimestamp"] = 1] = "HashFirstTimestamp";
+    ShortCircuitStrategy[ShortCircuitStrategy["HashFirstTimestampPlusBuffer"] = 2] = "HashFirstTimestampPlusBuffer";
+    ShortCircuitStrategy[ShortCircuitStrategy["HashBeforeDeleted"] = 3] = "HashBeforeDeleted";
+})(ShortCircuitStrategy || (ShortCircuitStrategy = {}));
+
+function isShadowDomNode(tag) {
+    return tag === Constant.ShadowDomTag || tag === Constant.PolyfillShadowDomTag;
+}
+/** Scan the rendered DOM (including nested shadow roots) to collect tag names of shadow host elements. */
+function collectShadowHostTags(root, tags = new Set()) {
+    root.querySelectorAll('*').forEach((el) => {
+        if (el.shadowRoot) {
+            tags.add(el.tagName);
+            collectShadowHostTags(el.shadowRoot, tags);
+        }
+    });
+    return tags;
+}
+/** Build a shadow subtree ID set from all DOM events.
+ *  Two-pass cascade to handle any event ordering:
+ *  Pass 1 — seed *S/*P node IDs.
+ *  Pass 2 — cascade: any node whose parent is in the set is also in the set (repeat until stable). */
+function buildShadowSubtreeIds(allDomEvents) {
+    const subtreeIds = new Set();
+    for (const e of allDomEvents) {
+        const data = e.data;
+        for (const node of data ?? []) {
+            if (isShadowDomNode(node.tag))
+                subtreeIds.add(node.id);
+        }
+    }
+    let changed = true;
+    while (changed) {
+        changed = false;
+        for (const e of allDomEvents) {
+            const data = e.data;
+            for (const node of data ?? []) {
+                if (!subtreeIds.has(node.id) && subtreeIds.has(node.parent)) {
+                    subtreeIds.add(node.id);
+                    changed = true;
+                }
+            }
+        }
+    }
+    return subtreeIds;
+}
+function filterShadowNodes(data, subtreeIds, shadowHostTags) {
+    return (data?.filter((node) => {
+        if (isShadowDomNode(node.tag))
+            return true;
+        if (shadowHostTags.has(node.tag ?? ''))
+            return true;
+        return subtreeIds.has(node.id);
+    }) ?? []);
+}
+/** Extract shadow DOM nodes from merged.dom (initial Discover event, processed by setup()).
+ *  Returns a filtered copy of the dom event, or null if no shadow DOM present. */
+function extractSpecialDom(dom, events, shadowHostTags) {
+    const mutationEvents = events.filter((e) => e.event === Event.Mutation);
+    const subtreeIds = buildShadowSubtreeIds([dom, ...mutationEvents]);
+    const shadowNodes = filterShadowNodes(dom.data, subtreeIds, shadowHostTags);
+    return shadowNodes.length ? { ...dom, data: shadowNodes } : null;
+}
+/** Extract shadow DOM mutations + StyleSheet + CustomElement events from merged.events. */
+function extractSpecialEvents(events, dom, shadowHostTags) {
+    const mutationEvents = events.filter((e) => e.event === Event.Mutation);
+    const subtreeIds = buildShadowSubtreeIds([dom, ...mutationEvents]);
+    const result = [];
+    for (const e of events) {
+        const ev = e.event;
+        if (ev === Event.StyleSheetAdoption ||
+            ev === Event.StyleSheetUpdate ||
+            ev === Event.CustomElement) {
+            result.push(e);
+            continue;
+        }
+        if (ev === Event.Mutation) {
+            const shadowNodes = filterShadowNodes(e.data, subtreeIds, shadowHostTags);
+            if (shadowNodes.length)
+                result.push({ ...e, data: shadowNodes });
+        }
+    }
+    return result;
+}
+
+// utils/retry.ts
+const delay = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
+/**
+ * Retry until the callback returns truthy, or throw if the limit is exceeded.
+ *
+ * @example
+ * await retry(() => doc.readyState === 'complete', { timeout: 5000, label: 'DOM ready' });
+ *
+ * @example
+ * const el = await retry(() => document.getElementById('app'), { maxRetries: 20 });
+ */
+async function retry(callback, options = {}) {
+    const { interval = 100, label = 'Retry' } = options;
+    const maxRetries = options.timeout != null ? Math.ceil(options.timeout / interval) : (options.maxRetries ?? 50);
+    for (let attempt = 0; attempt <= maxRetries; attempt++) {
+        console.log(`🔄 [${label}] attempt ${attempt}/${maxRetries}`);
+        const result = await callback();
+        if (result) {
+            return result;
+        }
+        if (attempt < maxRetries) {
+            await delay(interval);
         }
-        canvas.width = de.clientWidth;
-        canvas.height = de.clientHeight;
-        canvas.style.left = `${win.pageXOffset}px`;
-        canvas.style.top = `${win.pageYOffset}px`;
-        canvas.getContext('2d')?.clearRect(0, 0, canvas.width, canvas.height);
-        return canvas;
-    };
+    }
+    const totalMs = maxRetries * interval;
+    throw new Error(`[${label}] Timed out after ${maxRetries} retries (${totalMs}ms)`);
 }
 
+const perf$2 = createPerfTimer('Render');
+const YIELD_INTERVAL_MS = 16;
+async function yieldToMain() {
+    if ('scheduler' in globalThis && typeof globalThis.scheduler?.yield === 'function') {
+        await globalThis.scheduler.yield();
+    }
+    else {
+        await new Promise((resolve) => setTimeout(resolve, 0));
+    }
+}
+const renderLoop = async (ctx, options) => {
+    const { events, useproxy } = options;
+    const shortCircuitStrategy = options.shortCircuitStrategy ?? ShortCircuitStrategy.None;
+    const hash = options.hash ?? null;
+    const t0 = perf$2.mark('RenderLoop start');
+    let lastYield = performance.now();
+    const totalEvents = events.length;
+    for (let i = 0; i < totalEvents; i++) {
+        const entry = events[i];
+        const entryEvent = entry.event;
+        const now = performance.now();
+        if (now - lastYield > YIELD_INTERVAL_MS) {
+            console.log(`[RenderLoop] ${i}/${totalEvents} time:`, now - lastYield);
+            await yieldToMain();
+            lastYield = performance.now();
+        }
+        switch (entryEvent) {
+            case Event.StyleSheetAdoption:
+            case Event.StyleSheetUpdate:
+                ctx.layout.styleChange(entry);
+                break;
+            case Event.CustomElement:
+                ctx.layout.customElement(entry);
+                break;
+            case Event.Mutation: {
+                const domEvent = entry;
+                ctx.renderTime = domEvent.time;
+                if (ctx.shortCircuitRendering(shortCircuitStrategy, domEvent, hash))
+                    return;
+                ctx.layout.markup(domEvent, useproxy);
+                break;
+            }
+        }
+    }
+    perf$2.measure('RenderLoop', t0);
+};
+
 class GXVisualizer extends Visualizer {
     attentionMap;
+    scrollBucketMap;
     originalClearmap;
     originalSetup;
+    originalScrollmap;
+    originalClickmap;
     constructor() {
         super();
         this.attentionMap = new AttentionMapRenderer(null);
-        // Save references to base implementations before overriding
+        this.scrollBucketMap = new ScrollBucketRenderer(null);
         this.originalSetup = this.setup;
         this.originalClearmap = this.clearmap;
+        this.originalScrollmap = this.scrollmap;
+        this.originalClickmap = this.clickmap;
         this.clearmap = this.clearmapOverride;
         this.setup = this.setupOverride;
+        this.scrollmap = this.scrollmapOverride;
+        this.clickmap = this.clickmapOverride;
     }
-    setupOverride = async (target, options) => {
-        // Clear existing custom renderers before re-initializing (null-safe)
-        this.attentionMap?.clear();
-        // Initialize base Visualizer (sets this.state, this.heatmap, this.layout, etc.)
-        await this.originalSetup(target, options);
-        // Re-create custom renderers with the newly initialized PlaybackState
-        const state = this.state;
-        this.attentionMap = new AttentionMapRenderer(state);
+    htmlRender = async (props) => {
+        const { decoded, target, portalCanvasId, useproxy, logerror } = props;
+        if (!decoded || decoded.length === 0 || !target)
+            return this;
+        try {
+            const merged = this.mergeForHtml(decoded);
+            await this.setup(target, { version: decoded[0].envelope.version, dom: merged.dom, useproxy, portalCanvasId });
+            await this.renderLoop(this, { events: merged.events, target, useproxy });
+        }
+        catch (e) {
+            if (logerror)
+                logerror(e);
+        }
         return this;
     };
-    clearmapOverride = () => {
-        this.originalClearmap();
-        this.attentionMap?.clear();
+    htmlCached = async (cacheKey, options) => {
+        const { decoded, target } = options;
+        if (!decoded || decoded.length === 0 || !target)
+            return this;
+        const fullKey = buildCacheKey(cacheKey, options.shortCircuitStrategy);
+        const cached = await htmlCache.get(fullKey);
+        if (cached) {
+            try {
+                await this.buildHtmlByCached(cached, options);
+                return this;
+            }
+            catch (e) {
+                options?.logerror?.(e);
+            }
+        }
+        await this.buildHtmlForCache(fullKey, options);
+        return this;
     };
     /**
      * Render attention/engagement map.
@@ -5549,75 +6604,256 @@ class GXVisualizer extends Visualizer {
         this.clearmapOverride();
         this.attentionMap.attention(attentionData, avgFold, this, isSecondary);
     };
+    /**
+     * Render discrete color bands for scrollRevenue / scrollAttention data.
+     * @param data - Array of bucket inputs with position markers (0, 5, 10, ..., 95) and percent values
+     */
+    scrollBucket = async (data) => {
+        this.clearmapOverride();
+        await this.scrollBucketMap.renderBucket(data);
+    };
+    scrollmapOverride = (data, averageFold, addMarkers) => {
+        this.clearmapOverride();
+        this.originalScrollmap(data, averageFold, addMarkers);
+    };
+    clickmapOverride = (activity) => {
+        this.clearmapOverride();
+        this.originalClickmap(activity);
+    };
+    buildHtmlByCached = async (cached, options) => {
+        const { target, useproxy, portalCanvasId } = options;
+        if (!cached || !target)
+            throw new Error('Failed to render HTML cached', { cause: { cached, target } });
+        const doc = target.document;
+        try {
+            await this.setup(target, { version: cached.version, useproxy, portalCanvasId });
+            doc.open();
+            doc.writeln(cached.html);
+            doc.close();
+            const process = async () => {
+                this.layout.hydrate(doc);
+                // Replay shadow DOM from initial Discover event
+                if (cached.specialDom) {
+                    this.layout.markup(cached.specialDom, useproxy);
+                }
+                // Replay shadow DOM mutations + StyleSheet + CustomElement
+                await this.renderLoop(this, { ...options, events: cached.specialEvents });
+            };
+            await retry(() => doc.readyState === 'complete', { timeout: 30000, label: '[BuildHtml - Cached] DOM ready' });
+            await process();
+            return this;
+        }
+        catch (e) {
+            throw new Error('Failed to render HTML cached', { cause: e });
+        }
+    };
+    buildHtmlForCache = async (cacheKey, options) => {
+        const { decoded, target, useproxy, portalCanvasId, logerror } = options;
+        if (!decoded || decoded.length === 0 || !target)
+            return this;
+        try {
+            const doc = target.document;
+            const merged = this.mergeForHtml(decoded);
+            await this.setup(target, { version: decoded[0].envelope.version, dom: merged.dom, useproxy, portalCanvasId });
+            await this.renderLoop(this, { events: merged.events, target, useproxy });
+            // if (hasVoidContainerChildren(doc)) return this;
+            await retry(() => doc.readyState === 'complete', { timeout: 30000, label: '[BuildHtml] DOM ready' });
+            const timestamp = Date.now();
+            const version = decoded[0].envelope.version;
+            const html = doc.documentElement.outerHTML;
+            const shadowHostTags = collectShadowHostTags(doc);
+            const specialDom = extractSpecialDom(merged.dom, merged.events, shadowHostTags);
+            const specialEvents = extractSpecialEvents(merged.events, merged.dom, shadowHostTags);
+            void htmlCache.set({ key: cacheKey, html, specialDom, specialEvents, version, timestamp });
+        }
+        catch (e) {
+            if (logerror)
+                logerror(e);
+            console.log(`[BuildHtml] ~ Error:`, e);
+        }
+        return this;
+    };
+    renderLoop = async (ctx, options) => {
+        await renderLoop(ctx, options);
+    };
+    setupOverride = async (target, options) => {
+        // Mirror original Visualizer.setup(): only reset (remove listeners/state), not clear canvas.
+        // The canvas lives in the old window's DOM which will be replaced by originalSetup's reset().
+        this.attentionMap?.reset();
+        this.scrollBucketMap?.reset();
+        await this.originalSetup(target, options);
+        this.attentionMap = new AttentionMapRenderer(this.state);
+        this.scrollBucketMap = new ScrollBucketRenderer(this.heatmap);
+        return this;
+    };
+    clearmapOverride = () => {
+        this.originalClearmap();
+        this.attentionMap?.clear();
+        this.scrollBucketMap?.clear();
+    };
 }
 
-const useHeatmapRender = () => {
-    const viewId = useViewIdContext();
-    const data = useHeatmapDataContext((s) => s.data);
-    const vizRef = useHeatmapVizRectContext((s) => s.vizRef);
-    const setVizRef = useHeatmapVizRectContext((s) => s.setVizRef);
-    const setIframeHeight = useHeatmapVizRectContext((s) => s.setIframeHeight);
-    const setIsRenderViz = useHeatmapVizContext((s) => s.setIsRenderViz);
-    const wrapperHeight = useHeatmapVizRectContext((s) => s.wrapperHeight);
-    const contentWidth = useHeatmapWidthByDevice();
+const perf$1 = createPerfTimer('Render');
+const useHeatmapIframeProcessor = () => {
+    const shopId = useHeatmapConfigStore((s) => s.shopId);
     const deviceType = useHeatmapSettingContext((s) => s.deviceType);
-    const iframeRef = useRef(null);
-    const renderHeatmap = useCallback(async (payloads) => {
-        if (contentWidth === 0 || wrapperHeight === 0)
+    const viewport = useHeatmapViewportByDevice();
+    const setIframeHeight = useHeatmapVizRectContext((s) => s.setIframeHeight);
+    const setIsDomLoaded = useHeatmapVizContext((s) => s.setIsDomLoaded);
+    const helperRef = useRef(null);
+    const pendingRef = useRef(null);
+    const reset = useCallback(() => {
+        pendingRef.current = null;
+    }, []);
+    const run = useCallback((iframe, t0, abort) => {
+        if (viewport.width === 0 || viewport.height === 0) {
+            pendingRef.current = { iframe, t0, abort };
             return;
-        if (!payloads || payloads.length === 0)
+        }
+        startIframe({
+            helperRef,
+            iframe,
+            shopId,
+            deviceType,
+            size: viewport,
+            t0,
+            onSuccess: (height) => {
+                if (abort.signal.aborted)
+                    return;
+                if (height)
+                    setIframeHeight(height);
+                setIsDomLoaded(true);
+                helperRef.current?.startHeightObserver();
+            },
+        });
+    }, [deviceType]);
+    // Retry when dims become available
+    useEffect(() => {
+        if (viewport.width === 0 || viewport.height === 0)
             return;
-        const visualizer = vizRef ?? new GXVisualizer();
-        if (!vizRef)
-            setVizRef(visualizer);
-        setIsRenderViz(false);
-        const iframe = iframeRef.current;
-        if (!iframe?.contentWindow)
+        if (!pendingRef.current)
             return;
-        await visualizer.html(payloads, iframe.contentWindow, viewId);
-        const size = { width: contentWidth, height: wrapperHeight };
-        initIframeHelper(iframe, deviceType, size, (height) => {
-            height && setIframeHeight(height);
-            setIsRenderViz(true);
+        const { iframe, t0, abort } = pendingRef.current;
+        pendingRef.current = null;
+        if (abort.signal.aborted)
+            return;
+        startIframe({
+            helperRef,
+            iframe,
+            shopId,
+            deviceType,
+            size: viewport,
+            t0,
+            onSuccess: (height) => {
+                if (abort.signal.aborted)
+                    return;
+                if (height)
+                    setIframeHeight(height);
+                setIsDomLoaded(true);
+                helperRef.current?.startHeightObserver();
+            },
         });
-        // setIsRenderViz(true);
-    }, [wrapperHeight, contentWidth, deviceType]);
+    }, [viewport]); // eslint-disable-line react-hooks/exhaustive-deps
     useEffect(() => {
-        if (!data || data.length === 0)
-            return;
-        const decoded = decodeArrayClarity(data);
-        renderHeatmap(decoded);
         return () => {
-            setVizRef(null);
+            helperRef.current?.stop();
+            helperRef.current = null;
         };
-    }, [data, renderHeatmap, setVizRef]);
-    return {
-        iframeRef,
-    };
+    }, []);
+    return { run, reset };
 };
-function initIframeHelper(iframe, deviceType = EDeviceType.Desktop, size, onSuccess) {
+// ── Helpers ───────────────────────────────────────────────────────────────────
+function startIframe({ helperRef, iframe, shopId, deviceType = EDeviceType.Desktop, size, t0, onSuccess, }) {
     const docWidth = size.width ?? 0;
     const docHeight = size.height ?? 0;
     if (docHeight === 0)
         return;
-    stop();
-    start({
-        deviceType: deviceType,
+    helperRef.current?.stop();
+    const tHelper = perf$1.mark('IframeHelper.start');
+    const helper = createIframeHelper();
+    helperRef.current = helper;
+    helper.start({
+        deviceType,
         targetWidth: docWidth,
         targetHeight: docHeight,
-        iframe: iframe,
+        iframe,
         debug: true,
+        shopId,
+        heightObserverStartDelayMs: 1000,
         onSuccess: (data) => {
+            perf$1.measure('IframeHelper processing', tHelper);
+            perf$1.measure('Total render', t0);
             iframe.style.height = `${data.height}px`;
             onSuccess(data.height);
         },
     });
-    // fixer.recalculate();
 }
 
+const perf = createPerfTimer('Render');
+const useHeatmapRenderDom = () => {
+    const viewId = useViewIdContext();
+    const data = useHeatmapDataContext((s) => s.data);
+    const excludeClassNames = useHeatmapConfigStore((s) => s.excludeClassNames);
+    const setVizRef = useHeatmapVizRectContext((s) => s.setVizRef);
+    const vizRef = useHeatmapVizRectContext((s) => s.vizRef);
+    const setIsDomLoaded = useHeatmapVizContext((s) => s.setIsDomLoaded);
+    const deviceType = useHeatmapSettingContext((s) => s.deviceType);
+    const heatmapType = useHeatmapSettingContext((s) => s.heatmapType);
+    const elementToShow = useHeatmapDataContext((s) => s.dataInfo?.elementToShow);
+    const dataHash = useHeatmapDataContext((s) => s.dataHash);
+    const iframeRef = useRef(null);
+    const abortRef = useRef(null);
+    const elementToShowRef = useRef(null);
+    const dataHashRef = useRef(null);
+    const heatmapTypeRef = useRef(heatmapType);
+    elementToShowRef.current = elementToShow ?? null;
+    dataHashRef.current = dataHash ?? null;
+    heatmapTypeRef.current = heatmapType;
+    const { run: runIframeSetup, reset: resetIframeSetup } = useHeatmapIframeProcessor();
+    const renderHeatmap = useCallback(async (payloads) => {
+        if (!payloads || payloads.length === 0)
+            return;
+        const iframe = iframeRef.current;
+        const contentWindow = iframe?.contentWindow;
+        if (!contentWindow)
+            return;
+        abortRef.current?.abort();
+        const abort = new AbortController();
+        abortRef.current = abort;
+        resetIframeSetup();
+        const t0 = perf.mark('RenderHeatmap start');
+        const visualizer = vizRef ?? new GXVisualizer();
+        if (!vizRef)
+            setVizRef(visualizer);
+        visualizer.configure({ excludeClassNames });
+        setIsDomLoaded(false);
+        // Phase 1: render DOM — does not depend on contentWidth/wrapperHeight
+        const cacheKey = dataHashRef.current;
+        const options = {
+            decoded: payloads,
+            target: contentWindow,
+            portalCanvasId: viewId,
+            logerror: (error) => {
+                console.error('Error rendering HTML', error);
+            },
+        };
+        await perf.wrap('RenderHtml', () => cacheKey ? visualizer.htmlCached(cacheKey, options) : visualizer.htmlRender(options));
+        if (abort.signal.aborted)
+            return;
+        // Phase 2: iframe setup — deferred to useIframeSetup (handles dims dependency)
+        runIframeSetup(iframe, t0, abort);
+    }, [deviceType]);
+    useEffect(() => {
+        if (!data || data.length === 0)
+            return;
+        renderHeatmap(decodeArrayClarity(data));
+    }, [data, renderHeatmap]);
+    return { iframeRef };
+};
+
 const useReplayRender = () => {
     const data = useHeatmapDataContext((s) => s.data);
-    const setIsRenderViz = useHeatmapVizContext((s) => s.setIsRenderViz);
+    const setIsDomLoaded = useHeatmapVizContext((s) => s.setIsDomLoaded);
     const setIframeHeight = useHeatmapVizRectContext((s) => s.setIframeHeight);
     const visualizerRef = useRef(null);
     const iframeRef = useRef(null);
@@ -5637,7 +6873,7 @@ const useReplayRender = () => {
             version: envelope.version,
             onresize: (height) => {
                 height && setIframeHeight(height);
-                setIsRenderViz(true);
+                setIsDomLoaded(true);
             },
             mobile,
             vNext: true,
@@ -5740,10 +6976,12 @@ const useReplayRender = () => {
 const useHeatmapRenderByMode = (mode) => {
     const heatmapResult = useMemo(() => {
         switch (mode) {
-            case 'heatmap':
-                return useHeatmapRender;
-            case 'replay':
+            case EHeatmapMode.Heatmap:
+                return useHeatmapRenderDom;
+            case EHeatmapMode.Replay:
                 return useReplayRender;
+            default:
+                return useHeatmapRenderDom;
         }
     }, [mode]);
     return heatmapResult();
@@ -5778,148 +7016,6 @@ const useContainerDimensions = (props) => {
     return { containerWidth, containerHeight };
 };
 
-const useContentDimensions = ({ iframeRef }) => {
-    const contentWidth = useHeatmapWidthByDevice();
-    useEffect(() => {
-        if (!contentWidth)
-            return;
-        if (!iframeRef.current)
-            return;
-        // iframeRef.current.width = `${contentWidth}px`;
-    }, [contentWidth, iframeRef]);
-    return { contentWidth };
-};
-
-const useObserveIframeHeight = (props) => {
-    const iframeHeight = useHeatmapVizRectContext((s) => s.iframeHeight);
-    const setIframeHeight = useHeatmapVizRectContext((s) => s.setIframeHeight);
-    const isRenderViz = useHeatmapVizContext((s) => s.isRenderViz);
-    const wrapperHeight = useHeatmapVizRectContext((s) => s.wrapperHeight);
-    const { iframeRef } = props;
-    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)
-            return;
-        try {
-            const iframeDocument = iframe.contentDocument;
-            const iframeBody = iframeDocument?.body;
-            const iframeDocumentElement = iframeDocument?.documentElement;
-            if (!iframeBody || !iframeDocumentElement)
-                return;
-            // iframe.style.height = 'auto'; // TODO: check if this is needed
-            requestAnimationFrame(() => {
-                iframe.style.height = `${wrapperHeight}px`;
-                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, wrapperHeight]);
-    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 || !iframeHeight || !isRenderViz)
-            return;
-        const setupObservers = () => {
-            try {
-                const iframeDocument = iframe.contentDocument;
-                const iframeBody = iframeDocument?.body;
-                if (!iframeBody)
-                    return;
-                // Cleanup existing observers
-                if (resizeObserverRef.current) {
-                    resizeObserverRef.current.disconnect();
-                }
-                if (mutationObserverRef.current) {
-                    mutationObserverRef.current.disconnect();
-                }
-                if (typeof window.ResizeObserver !== 'undefined') {
-                    resizeObserverRef.current = new ResizeObserver(immediateUpdate);
-                    resizeObserverRef.current.observe(iframeBody);
-                    const iframeDocumentElement = iframeDocument?.documentElement;
-                    if (iframeDocumentElement) {
-                        resizeObserverRef.current.observe(iframeDocumentElement);
-                    }
-                }
-                if (typeof window.MutationObserver !== 'undefined') {
-                    mutationObserverRef.current = new MutationObserver(immediateUpdate);
-                    mutationObserverRef.current.observe(iframeBody, {
-                        childList: true,
-                        subtree: true,
-                        attributes: true,
-                        attributeFilter: ['style', 'class'],
-                        characterData: false,
-                    });
-                }
-                updateIframeHeight();
-            }
-            catch (error) {
-                console.warn('Cannot access iframe content:', error);
-            }
-        };
-        if (iframe.contentDocument?.readyState === 'complete') {
-            setupObservers();
-        }
-        else {
-            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, iframeHeight, isRenderViz]);
-    return {};
-};
-
 const useScaleCalculation = (props) => {
     const widthScale = useHeatmapVizContext((s) => s.widthScale);
     const zoomRatio = useHeatmapVizContext((s) => s.zoomRatio);
@@ -5929,9 +7025,10 @@ const useScaleCalculation = (props) => {
     const setScale = useHeatmapVizContext((s) => s.setScale);
     const setIsScaledToFit = useHeatmapVizContext((s) => s.setIsScaledToFit);
     const setMinZoomRatio = useHeatmapVizContext((s) => s.setMinZoomRatio);
-    const { containerWidth, containerHeight, contentWidth, contentHeight } = props;
+    const viewport = useHeatmapViewportByDevice();
+    const { containerWidth, containerHeight, iframeHeight } = props;
     const calculateScaleResult = useCallback(() => {
-        if (containerWidth > 0 && contentWidth > 0 && containerHeight > 0 && contentHeight > 0) {
+        if (containerWidth > 0 && viewport.width > 0 && containerHeight > 0 && iframeHeight > 0) {
             // 1. Calculate available dimensions
             const availableWidth = containerWidth - HEATMAP_CONFIG['padding'] * 2;
             const toolbarHeight = HEATMAP_CONFIG['heightToolbar'] || 0;
@@ -5939,12 +7036,12 @@ const useScaleCalculation = (props) => {
             const availableHeight = containerHeight - toolbarHeight - paddingTotal;
             // 2. Calculate widthScale (base scale to fit content width into container width)
             // This represents 100% zoom (fit to width)
-            const widthScale = Math.min(availableWidth / contentWidth, 1);
+            const widthScale = Math.min(availableWidth / viewport.width, 1);
             // 3. Calculate minZoomRatio (zoom ratio to fit height)
             // At minZoomRatio, the content should fit entirely within the container height
-            // Formula: contentHeight * widthScale * (minZoomRatio / 100) = availableHeight
-            // => minZoomRatio = (availableHeight / (contentHeight * widthScale)) * 100
-            const calculatedMinZoomRatio = (availableHeight / (contentHeight * widthScale)) * 100;
+            // Formula: iframeHeight * widthScale * (minZoomRatio / 100) = availableHeight
+            // => minZoomRatio = (availableHeight / (iframeHeight * widthScale)) * 100
+            const calculatedMinZoomRatio = (availableHeight / (iframeHeight * widthScale)) * 100;
             // Limit minZoomRatio: cannot exceed MAX_ZOOM_RATIO (100%)
             // and should have a reasonable minimum (e.g., 1%)
             const finalMinZoomRatio = Math.max(1, Math.min(calculatedMinZoomRatio, maxZoomRatio));
@@ -5963,7 +7060,7 @@ const useScaleCalculation = (props) => {
             setIsScaledToFit(isCurrentlyFitted);
             setMinZoomRatio(finalMinZoomRatio);
         }
-    }, [containerWidth, containerHeight, contentWidth, contentHeight, zoomRatio, maxZoomRatio]);
+    }, [containerWidth, containerHeight, viewport.width, iframeHeight, zoomRatio, maxZoomRatio]);
     useEffect(() => {
         calculateScaleResult();
     }, [calculateScaleResult]);
@@ -5996,20 +7093,15 @@ const useHeatmapScale = (props) => {
     // 1. Observe container dimensions
     const { containerWidth, containerHeight } = useContainerDimensions({ wrapperRef });
     // 2. Get content dimensions from config
-    const { contentWidth } = useContentDimensions({ iframeRef });
+    const viewport = useHeatmapViewportByDevice();
     // 3. Observe iframe height (now reacts to width changes)
-    useObserveIframeHeight({ iframeRef });
+    // useObserveIframeHeight({ iframeRef });
     // 4. Calculate scale
-    const { widthScale } = useScaleCalculation({
-        containerWidth,
-        containerHeight,
-        contentWidth,
-        contentHeight: iframeHeight,
-    });
+    const { widthScale } = useScaleCalculation({ containerWidth, containerHeight, iframeHeight });
     // 5. Setup scroll sync
     const { handleScroll } = useScrollSync({ widthScale, iframeRef });
     const scaledHeight = iframeHeight * widthScale;
-    const scaledWidth = contentWidth * widthScale;
+    const scaledWidth = viewport.width * widthScale;
     return {
         scaledWidth,
         scaledHeight,
@@ -6215,10 +7307,10 @@ const useScrollmapZones = (options) => {
             const newZones = createZones(scrollmap);
             setZones(newZones);
             setIsReady(true);
-            logger$9.log(`[useScrollmap] Created ${newZones.length} zones in ${mode} mode`);
+            logger$3.log(`[useScrollmap] Created ${newZones.length} zones in ${mode} mode`);
         }
         catch (error) {
-            logger$9.error('[useScrollmap] Error:', error);
+            logger$3.error('[useScrollmap] Error:', error);
             setIsReady(false);
         }
     }, [enabled, scrollmap, mode, createZones]);
@@ -7048,11 +8140,11 @@ const AutoScrollHandler = ({ visualRef }) => {
 };
 
 const PortalAreaRenderer = ({ iframeRef, visualRef, shadowRoot, onAreaCreated, onAreaClick, }) => {
-    const isRenderViz = useHeatmapVizContext((s) => s.isRenderViz);
+    const isDomLoaded = useHeatmapVizContext((s) => s.isDomLoaded);
     const iframeDocument = iframeRef.current?.contentDocument || undefined;
     const { shadowContainer, isReady } = useAreaRendererContainer(iframeDocument, shadowRoot);
-    useAreaRectSync({ iframeDocument, shadowRoot, enabled: isReady && isRenderViz });
-    useAreaPositionsUpdater({ iframeRef, visualRef, enabled: isReady && isRenderViz });
+    useAreaRectSync({ iframeDocument, shadowRoot, enabled: isReady && isDomLoaded });
+    useAreaPositionsUpdater({ iframeRef, visualRef, enabled: isReady && isDomLoaded });
     if (!shadowContainer || !isReady)
         return null;
     return (jsxs(Fragment$1, { children: [jsx(AutoScrollHandler, { visualRef: visualRef }), jsx(AreasPortal, { shadowContainer: shadowContainer, onAreaClick: onAreaClick }), jsx(AreaEditHighlightPortal, { shadowContainer: shadowContainer, iframeRef: iframeRef, customShadowRoot: shadowRoot, onAreaCreated: onAreaCreated })] }));
@@ -7061,7 +8153,7 @@ const PortalAreaRenderer = ({ iframeRef, visualRef, shadowRoot, onAreaCreated, o
 const VizAreaClick = ({ iframeRef, visualRef, shadowRoot, autoCreateTopN = 10, enableOverlapResolution = true, onAreaClick, }) => {
     const clickAreas = useHeatmapDataContext((s) => s.clickAreas);
     const resetView = useHeatmapAreaClickContext((s) => s.resetView);
-    const isRenderViz = useHeatmapVizContext((s) => s.isRenderViz);
+    const isDomLoaded = useHeatmapVizContext((s) => s.isDomLoaded);
     useAreaTopAutoDetect({ autoCreateTopN, shadowRoot, disabled: !!clickAreas?.length });
     useAreaFilterVisible({ iframeRef, enableOverlapResolution });
     useAreaHydration({ shadowRoot });
@@ -7070,7 +8162,7 @@ const VizAreaClick = ({ iframeRef, visualRef, shadowRoot, autoCreateTopN = 10, e
             resetView();
         };
     }, []);
-    if (!iframeRef.current || !isRenderViz)
+    if (!iframeRef.current || !isDomLoaded)
         return null;
     return (jsx(Fragment, { children: jsx(PortalAreaRenderer, { iframeRef: iframeRef, visualRef: visualRef, shadowRoot: shadowRoot, onAreaClick: onAreaClick }) }));
 };
@@ -7201,7 +8293,7 @@ const useAnchorPosition = (calloutRef, props) => {
 const ElementMissing = ({ show = true, visualRef }) => {
     const widthScale = useHeatmapVizContext((s) => s.widthScale);
     const missingElementRef = useRef(null);
-    const wrapperWidth = useHeatmapWidthByDevice();
+    const viewport = useHeatmapViewportByDevice();
     const [scrollPosition, setScrollPosition] = useState({ scrollTop: 0, scrollLeft: 0 });
     useEffect(() => {
         const container = visualRef.current;
@@ -7231,7 +8323,7 @@ const ElementMissing = ({ show = true, visualRef }) => {
     const containerHeight = containerRect?.height ?? 0;
     const topPosition = scrollTop + (containerHeight + elementHeightCenter) / 2;
     const topPositionScaled = topPosition / widthScale;
-    const leftPosition = wrapperWidth / 2;
+    const leftPosition = viewport.width / 2;
     return (jsxs(Fragment, { children: [jsx("div", { className: "missingElement-backdrop", style: {
                     position: 'absolute',
                     top: 0,
@@ -7356,7 +8448,7 @@ const ElementOverlayComponent = (props) => {
     const { type, element, onClick, elementId, hideOutline } = props;
     const widthScale = useHeatmapVizContext((s) => s.widthScale);
     const viewportHeight = useHeatmapVizRectContext((s) => s.iframeHeight);
-    const viewportWidth = useHeatmapWidthByDevice();
+    const viewport = useHeatmapViewportByDevice();
     const overlayStyle = useMemo(() => {
         const isInvalid = !element || (element.width === 0 && element.height === 0);
         if (isInvalid)
@@ -7373,7 +8465,7 @@ const ElementOverlayComponent = (props) => {
     const isHovered = type === 'hovered';
     const badgeWidthScale = isHovered ? 1 : widthScale;
     const showCallout = !!element?.mousePosition && !isHovered;
-    return (jsxs(Fragment$1, { children: [jsx("div", { onClick: onClick, className: `heatmapElement heatmapElement--${type} ${hideOutline ? 'heatmapElement--hide-outline' : ''}`, id: elementId, style: overlayStyle, children: showCallout && jsx(ElementCalloutOverlay, { ...props }) }), jsx(BackdropCanvas, { activeElement: overlayStyle, viewportWidth: viewportWidth, viewportHeight: viewportHeight, show: !isHovered }), jsx(RankBadge, { hash: element.hash, show: isHovered, index: element.rank, elementRect: element, widthScale: badgeWidthScale, clickOnElement: onClick })] }));
+    return (jsxs(Fragment$1, { children: [jsx("div", { onClick: onClick, className: `heatmapElement heatmapElement--${type} ${hideOutline ? 'heatmapElement--hide-outline' : ''}`, id: elementId, style: overlayStyle, children: showCallout && jsx(ElementCalloutOverlay, { ...props }) }), jsx(BackdropCanvas, { activeElement: overlayStyle, viewportWidth: viewport.width, viewportHeight: viewportHeight, show: !isHovered }), jsx(RankBadge, { hash: element.hash, show: isHovered, index: element.rank, elementRect: element, widthScale: badgeWidthScale, clickOnElement: onClick })] }));
 };
 ElementOverlayComponent.displayName = 'ElementOverlay';
 const ElementOverlay = memo(ElementOverlayComponent);
@@ -7438,7 +8530,7 @@ const HeatmapElements = (props) => {
 };
 
 const VizElements = ({ iframeRef, visualRef, wrapperRef }) => {
-    const contentWidth = useHeatmapWidthByDevice();
+    const viewport = useHeatmapViewportByDevice();
     const dataInfo = useHeatmapDataContext((s) => s.dataInfo);
     const vizRef = useHeatmapVizRectContext((s) => s.vizRef);
     const visualizer = {
@@ -7452,7 +8544,7 @@ const VizElements = ({ iframeRef, visualRef, wrapperRef }) => {
     if (!iframeRef.current)
         return null;
     return (jsx(HeatmapElements, { visualizer: visualizer, visualRef: visualRef, iframeRef: iframeRef, wrapperRef: wrapperRef, heatmapInfo: dataInfo, isVisible: true, positionMode: DEFAULT_POSITION_MODE, isHideTopRank: true, iframeDimensions: {
-            width: contentWidth,
+            width: viewport.width,
             position: 'absolute',
             top: 0,
             left: 0,
@@ -7476,45 +8568,6 @@ const VizClickmap = ({ iframeRef, visualRef, wrapperRef }) => {
     }
 };
 
-const IS_ENABLE_MINIMAP = false;
-const Minimap = ({ zones, maxUsers }) => {
-    const scrollType = useHeatmapSettingContext((s) => s.scrollType);
-    const showMinimap = useHeatmapScrollContext((s) => s.showMinimap);
-    const isScrollType = [EScrollType.Attention].includes(scrollType ?? EScrollType.Depth);
-    if (!showMinimap || !isScrollType || !IS_ENABLE_MINIMAP)
-        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 CompScrollZoneTooltip = useHeatmapControlStore((state) => state.controls.ScrollZoneTooltip);
     const tooltipRef = useRef(null);
@@ -7540,17 +8593,9 @@ const ScrollZoneTooltip = ({ zone, position, currentScrollPercent, scrollmap, })
 
 const HoverZones = ({ iframeRef, wrapperRef, position, currentScrollPercent }) => {
     const scrollmap = useHeatmapDataContext((s) => s.scrollmap);
-    // const hoveredZone = useHeatmapVizScrollStore((state) => state.hoveredZone);
-    // const setHoveredZone = useHeatmapVizScrollStore((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(Minimap, { zones: zones, maxUsers: maxUsers })] }));
+    return (jsx(Fragment, { children: jsx(ScrollZoneTooltip, { position: position, currentScrollPercent: currentScrollPercent, scrollmap: scrollmap || [] }) }));
 };
 
 const ScrollOverlay = ({ wrapperRef, iframeRef }) => {
@@ -7716,7 +8761,7 @@ const VizLoadingCanvas = () => {
 const WrapperVisual = ({ children, visualRef, wrapperRef, scaledHeight, iframeHeight, onScroll, }) => {
     const isLoadingCanvas = useHeatmapSettingContext((state) => state.isLoadingCanvas);
     const widthScale = useHeatmapVizContext((s) => s.widthScale);
-    const contentWidth = useHeatmapWidthByDevice();
+    const viewport = useHeatmapViewportByDevice();
     const contentHeight = calcContentHeight();
     return (jsx("div", { ref: visualRef, className: "gx-hm-visual Polaris-Scrollable Polaris-Scrollable--vertical Polaris-Scrollable--scrollbarWidthThin Polaris-Scrollable--scrollbarGutterStable", onScroll: onScroll, style: {
             overflowX: 'hidden',
@@ -7738,7 +8783,7 @@ const WrapperVisual = ({ children, visualRef, wrapperRef, scaledHeight, iframeHe
                 paddingBottom: HEATMAP_STYLE['viz']['paddingBottom'],
                 background: HEATMAP_STYLE['viz']['background'],
             }, children: jsx("div", { className: "gx-hm-wrapper", ref: wrapperRef, style: {
-                    width: contentWidth,
+                    width: viewport.width,
                     height: iframeHeight,
                     transform: `scale(${widthScale})`,
                     transformOrigin: 'top center',
@@ -7751,14 +8796,14 @@ const WrapperVisual = ({ children, visualRef, wrapperRef, scaledHeight, iframeHe
     }
 };
 
-const VizDomRenderer = ({ mode = 'heatmap' }) => {
+const VizDomRenderer = ({ mode }) => {
     const viewId = useViewIdContext();
-    const contentWidth = useHeatmapWidthByDevice();
+    const viewport = useHeatmapViewportByDevice();
     const iframeHeight = useHeatmapVizRectContext((s) => s.iframeHeight);
-    const wrapperHeight = useHeatmapVizRectContext((s) => s.wrapperHeight);
+    // const wrapperHeight = useHeatmapVizRectContext((s) => s.wrapperHeight);
     const wrapperRef = useRef(null);
     const visualRef = useRef(null);
-    const { iframeRef } = useHeatmapRenderByMode(mode);
+    const { iframeRef } = useHeatmapRenderDom();
     const { scaledHeight, handleScroll } = useHeatmapScale({ wrapperRef, iframeRef, visualRef });
     useHeatmapCanvas();
     useRenderCount('VizDomRenderer');
@@ -7766,7 +8811,7 @@ const VizDomRenderer = ({ mode = 'heatmap' }) => {
         const scrollTop = e.currentTarget.scrollTop;
         handleScroll(scrollTop);
     };
-    return (jsxs(WrapperVisual, { visualRef: visualRef, wrapperRef: wrapperRef, scaledHeight: scaledHeight, onScroll: onScroll, iframeHeight: iframeHeight, children: [jsx(VizClickmap, { iframeRef: iframeRef, visualRef: visualRef, wrapperRef: wrapperRef }), jsx("iframe", { ...HEATMAP_IFRAME, id: `clarity-iframe-${viewId}`, ref: iframeRef, width: contentWidth, height: wrapperHeight }), jsx(VizLoadingCanvas, {}), jsx(VizScrollMap, { visualRef: visualRef, iframeRef: iframeRef, wrapperRef: wrapperRef })] }));
+    return (jsxs(WrapperVisual, { visualRef: visualRef, wrapperRef: wrapperRef, scaledHeight: scaledHeight, onScroll: onScroll, iframeHeight: iframeHeight, children: [jsx(VizClickmap, { iframeRef: iframeRef, visualRef: visualRef, wrapperRef: wrapperRef }), jsx("iframe", { ...HEATMAP_IFRAME, id: `clarity-iframe-${viewId}`, ref: iframeRef, width: viewport.width, height: viewport.height }), jsx(VizLoadingCanvas, {}), jsx(VizScrollMap, { visualRef: visualRef, iframeRef: iframeRef, wrapperRef: wrapperRef })] }));
 };
 
 const VizLoading = () => {
@@ -7783,8 +8828,9 @@ const VizLoading = () => {
 const VizDomHeatmap = () => {
     const iframeHeight = useHeatmapVizRectContext((s) => s.iframeHeight);
     const setIframeHeight = useHeatmapVizRectContext((s) => s.setIframeHeight);
+    const setWrapperHeight = useHeatmapVizRectContext((s) => s.setWrapperHeight);
     const setVizRef = useHeatmapVizRectContext((s) => s.setVizRef);
-    const setIsRenderViz = useHeatmapVizContext((s) => s.setIsRenderViz);
+    const setIsDomLoaded = useHeatmapVizContext((s) => s.setIsDomLoaded);
     const setSelectedElement = useHeatmapClickContext((s) => s.setSelectedElement);
     const setHoveredElement = useHeatmapHoverContext((s) => s.setHoveredElement);
     // const setSelectedArea = useHeatmapAreaClickContext((s) => s.setSelectedArea);
@@ -7794,7 +8840,8 @@ const VizDomHeatmap = () => {
     const cleanUp = () => {
         setVizRef(null);
         setIframeHeight(0);
-        setIsRenderViz(false);
+        setWrapperHeight(0);
+        setIsDomLoaded(false);
         setSelectedElement(null);
         setHoveredElement(null);
         // setSelectedArea(null);
@@ -7803,13 +8850,13 @@ const VizDomHeatmap = () => {
     };
     useEffect(() => {
         return cleanUp;
-    }, []);
-    return (jsxs(VizContainer, { isActive: true, children: [jsx(VizDomRenderer, {}), iframeHeight === 0 && jsx(VizLoading, {})] }));
+    }, []); // eslint-disable-line react-hooks/exhaustive-deps
+    return (jsxs(VizContainer, { isActive: true, children: [jsx(VizDomRenderer, { mode: EHeatmapMode.Heatmap }), iframeHeight === 0 && jsx(VizLoading, {})] }));
 };
 VizDomHeatmap.displayName = 'VizDomHeatmap';
 
 const VizLiveRenderer = () => {
-    const contentWidth = useHeatmapWidthByDevice();
+    const viewport = useHeatmapViewportByDevice();
     const iframeHeight = useHeatmapVizRectContext((s) => s.iframeHeight);
     const wrapperHeight = useHeatmapVizRectContext((s) => s.wrapperHeight);
     const visualRef = useRef(null);
@@ -7820,13 +8867,13 @@ const VizLiveRenderer = () => {
         const scrollTop = e.currentTarget.scrollTop;
         handleScroll(scrollTop);
     };
-    return (jsx(WrapperVisual, { visualRef: visualRef, wrapperRef: wrapperRef, scaledHeight: scaledHeight, iframeHeight: iframeHeight, onScroll: onScroll, children: jsx("iframe", { ref: iframeRef, ...HEATMAP_IFRAME, width: contentWidth, height: wrapperHeight, scrolling: "no" }) }));
+    return (jsx(WrapperVisual, { visualRef: visualRef, wrapperRef: wrapperRef, scaledHeight: scaledHeight, iframeHeight: iframeHeight, onScroll: onScroll, children: jsx("iframe", { ref: iframeRef, ...HEATMAP_IFRAME, width: viewport.width, height: wrapperHeight, scrolling: "no" }) }));
 };
 
 const VizLiveHeatmap = () => {
     const iframeHeight = useHeatmapVizRectContext((s) => s.iframeHeight);
     const wrapperHeight = useHeatmapVizRectContext((s) => s.wrapperHeight);
-    useHeatmapLiveStore((state) => state.reset);
+    useHeatmapLiveContext((s) => s.reset);
     const CompVizLoading = useHeatmapControlStore((state) => state.controls.VizLoading);
     // TODO: Remove this after testing
     useEffect(() => {
@@ -7877,11 +8924,11 @@ const ContentTopBar = () => {
         }, children: CompTopBar && jsx(CompTopBar, {}) }));
 };
 
-const HeatmapLayout = ({ data, clickmap, clickAreas, scrollmap, attentionMap, controls, dataInfo, isLoading, isLoadingCanvas, }) => {
+const HeatmapLayout = ({ shopId, data, clickmap, clickAreas, scrollmap, attentionMap, controls, dataInfo, isLoading, isLoadingCanvas, excludeClassNames, }) => {
     useRegisterControl(controls);
     useRegisterData(data, dataInfo);
     useRegisterHeatmap({ clickmap, scrollmap, clickAreas, attentionMap });
-    useRegisterConfig({ isLoading, isLoadingCanvas });
+    useRegisterConfig({ isLoading, isLoadingCanvas, shopId, excludeClassNames });
     // performanceLogger.configure({
     //   enabled: true,
     //   logToConsole: false,
@@ -7911,4 +8958,4 @@ const HeatmapLayout = ({ data, clickmap, clickAreas, scrollmap, attentionMap, co
     }
 };
 
-export { BACKDROP_CONFIG, DEFAULT_SIDEBAR_WIDTH, DEFAULT_VIEW_ID, DEFAULT_ZOOM_RATIO, EClickMode, EClickRankType, EClickType, EDeviceType, EHeatmapMode, EHeatmapType, ELM_CALLOUT_CONFIG, EScrollType, GraphView, HEATMAP_CONFIG, HEATMAP_IFRAME, HEATMAP_STYLE, HeatmapLayout, ViewIdContext, Z_INDEX$1 as Z_INDEX, compareViewPerformance, convertViewportToIframeCoords, createStorePerformanceTracker, createViewContextHook, decodeArrayClarity, decodeClarity, downloadPerformanceReport, getCompareViewId, getMetricsByViewId, getPerformanceReportJSON, getScrollGradientColor, performanceLogger, printPerformanceSummary, scrollToElementIfNeeded, sendPerformanceReport, serializeAreas, trackStoreAction, useAreaCreation, useAreaEditMode, useAreaFilterVisible, useAreaHydration, useAreaInteraction, useAreaPositionsUpdater, useAreaRectSync, useAreaRendererContainer, useAreaTopAutoDetect, useClickedElement, useDebounceCallback, useElementCalloutVisible, useHeatmapAreaClickContext, useHeatmapCanvas, useHeatmapClickContext, useHeatmapCompareStore, useHeatmapConfigStore, useHeatmapCopyView, useHeatmapDataContext, useHeatmapEffects, useHeatmapElementPosition, useHeatmapHoverContext, useHeatmapLiveStore, useHeatmapRenderByMode, useHeatmapScale, useHeatmapScroll, useHeatmapScrollContext, useHeatmapSettingContext, useHeatmapVizContext, useHeatmapVizRectContext, useHeatmapWidthByDevice, useHoveredElement, useMeasureFunction, useRegisterConfig, useRegisterControl, useRegisterData, useRegisterHeatmap, useRenderCount, useScrollmapZones, useTrackHookCall, useViewIdContext, useVizLiveRender, useWhyDidYouUpdate, useWrapperRefHeight, useZonePositions, withPerformanceTracking };
+export { BACKDROP_CONFIG, DEFAULT_SIDEBAR_WIDTH, DEFAULT_VIEW_ID, DEFAULT_ZOOM_RATIO, EClickMode, EClickRankType, EClickType, EDeviceType, EHeatmapDataSource, EHeatmapMode, EHeatmapType, ELM_CALLOUT_CONFIG, EScrollType, GraphView, HEATMAP_CONFIG, HEATMAP_IFRAME, HEATMAP_STYLE, HeatmapLayout, ViewIdContext, Z_INDEX$1 as Z_INDEX, compareViewPerformance, convertViewportToIframeCoords, createStorePerformanceTracker, createViewContextHook, decodeArrayClarity, decodeClarity, downloadPerformanceReport, getCompareViewId, getMetricsByViewId, getPerformanceReportJSON, getScrollGradientColor, isElmInDataInfo, performanceLogger, printPerformanceSummary, scrollToElementIfNeeded, sendPerformanceReport, serializeAreas, trackStoreAction, useAreaCreation, useAreaEditMode, useAreaFilterVisible, useAreaHydration, useAreaInteraction, useAreaPositionsUpdater, useAreaRectSync, useAreaRendererContainer, useAreaTopAutoDetect, useClickedElement, useDebounceCallback, useElementCalloutVisible, useHeatmapAreaClickContext, useHeatmapCanvas, useHeatmapClickContext, useHeatmapCompareStore, useHeatmapConfigStore, useHeatmapCopyView, useHeatmapDataContext, useHeatmapEffects, useHeatmapElementPosition, useHeatmapHoverContext, useHeatmapLiveContext, useHeatmapRenderByMode, useHeatmapScale, useHeatmapScroll, useHeatmapScrollContext, useHeatmapSettingContext, useHeatmapViewportByDevice, useHeatmapVizContext, useHeatmapVizRectContext, useHoveredElement, useMeasureFunction, useRegisterConfig, useRegisterControl, useRegisterData, useRegisterHeatmap, useRenderCount, useScrollmapZones, useTrackHookCall, useViewIdContext, useVizLiveRender, useWhyDidYouUpdate, useWrapperRefHeight, useZonePositions, withPerformanceTracking };