@gemx-dev/heatmap-react 3.5.92-dev.1 → 3.5.92-dev.10

package/dist/esm/index.mjs

@@ -203,6 +203,11 @@ var EHeatmapMode;
     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 +319,16 @@ const useHeatmapConfigStore = create()((set) => {
     return {
         mode: EHeatmapMode.Single,
         sidebarWidth: DEFAULT_SIDEBAR_WIDTH,
-        clickMode: EClickMode.Default,
-        isRendering: true,
         setMode: (mode) => set({ mode }),
         resetMode: () => set({ mode: EHeatmapMode.Single }),
         setSidebarWidth: (sidebarWidth) => set({ sidebarWidth }),
-        setIsRendering: (isRendering) => set({ isRendering }),
     };
 });
 
 const useHeatmapDataStore = create()(subscribeWithSelector((set) => {
     return {
         data: 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 +361,11 @@ const useHeatmapDataStore = create()(subscribeWithSelector((set) => {
             newData.set(viewId, data);
             return { data: newData };
         }),
+        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 +388,14 @@ 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);
             newData.set(toViewId, prev.data.get(fromViewId));
+            newDataSnapshot.set(toViewId, prev.dataSnapshot.get(fromViewId));
             newClickmap.set(toViewId, prev.clickmap.get(fromViewId));
             newClickAreas.set(toViewId, prev.clickAreas.get(fromViewId));
             newDataInfo.set(toViewId, prev.dataInfo.get(fromViewId));
@@ -393,6 +403,7 @@ const useHeatmapDataStore = create()(subscribeWithSelector((set) => {
             newAttentionMap.set(toViewId, prev.attentionMap.get(fromViewId));
             return {
                 data: newData,
+                dataSnapshot: newDataSnapshot,
                 clickmap: newClickmap,
                 clickAreas: newClickAreas,
                 dataInfo: newDataInfo,
@@ -402,12 +413,14 @@ const useHeatmapDataStore = create()(subscribeWithSelector((set) => {
         }),
         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);
             newData.delete(viewId);
+            newDataSnapshot.delete(viewId);
             newClickmap.delete(viewId);
             newClickAreas.delete(viewId);
             newDataInfo.delete(viewId);
@@ -415,6 +428,7 @@ const useHeatmapDataStore = create()(subscribeWithSelector((set) => {
             newAttentionMap.delete(viewId);
             return {
                 data: newData,
+                dataSnapshot: newDataSnapshot,
                 clickmap: newClickmap,
                 clickAreas: newClickAreas,
                 dataInfo: newDataInfo,
@@ -424,6 +438,7 @@ const useHeatmapDataStore = create()(subscribeWithSelector((set) => {
         }),
         resetAll: () => set({
             data: 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]]),
@@ -445,6 +460,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 +511,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 +526,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 +536,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 +547,7 @@ const useHeatmapSettingStore = create()(subscribeWithSelector((set) => {
                 clickMode: newClickMode,
                 scrollType: newScrollType,
                 heatmapType: newHeatmapType,
+                dataSource: newDataSource,
             };
         }),
         clearView: (viewId) => set((prev) => {
@@ -536,6 +560,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 +570,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 +581,7 @@ const useHeatmapSettingStore = create()(subscribeWithSelector((set) => {
                 clickMode: newClickMode,
                 scrollType: newScrollType,
                 heatmapType: newHeatmapType,
+                dataSource: newDataSource,
             };
         }),
         resetAll: () => set({
@@ -568,22 +595,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]]),
+        isRenderedViz: 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 };
+        setIsRenderedViz: (isRenderedViz, viewId = DEFAULT_VIEW_ID) => set((prev) => {
+            const newIsRenderedViz = new Map(prev.isRenderedViz);
+            newIsRenderedViz.set(viewId, isRenderedViz);
+            return { isRenderedViz: newIsRenderedViz };
         }),
         setZoomRatio: (zoomRatio, viewId = DEFAULT_VIEW_ID) => set((prev) => {
             const newZoomRatio = new Map(prev.zoomRatio);
@@ -611,18 +639,18 @@ const useHeatmapVizStore = create()(subscribeWithSelector((set) => {
             return { isScaledToFit: newIsScaledToFit };
         }),
         copyView: (fromViewId, toViewId) => set((prev) => {
-            const newIsRenderViz = new Map(prev.isRenderViz);
+            const newIsRenderedViz = new Map(prev.isRenderedViz);
             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);
+            newIsRenderedViz.set(toViewId, prev.isRenderedViz.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,
+                isRenderedViz: newIsRenderedViz,
                 zoomRatio: newZoomRatio,
                 minZoomRatio: newMinZoomRatio,
                 scale: newScale,
@@ -630,18 +658,18 @@ const useHeatmapVizStore = create()(subscribeWithSelector((set) => {
             };
         }),
         clearView: (viewId) => set((prev) => {
-            const newIsRenderViz = new Map(prev.isRenderViz);
+            const newIsRenderedViz = new Map(prev.isRenderedViz);
             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);
+            newIsRenderedViz.delete(viewId);
             newZoomRatio.delete(viewId);
             newMinZoomRatio.delete(viewId);
             newScale.delete(viewId);
             newIsScaledToFit.delete(viewId);
             return {
-                isRenderViz: newIsRenderViz,
+                isRenderedViz: newIsRenderedViz,
                 zoomRatio: newZoomRatio,
                 minZoomRatio: newMinZoomRatio,
                 scale: newScale,
@@ -649,7 +677,7 @@ const useHeatmapVizStore = create()(subscribeWithSelector((set) => {
             };
         }),
         resetAll: () => set({
-            isRenderViz: new Map([[DEFAULT_VIEW_ID, false]]),
+            isRenderedViz: 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 +1075,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 +1282,11 @@ 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),
+        dataSnapshot: store.dataSnapshot.get(viewId),
         clickmap: store.clickmap.get(viewId),
         clickAreas: store.clickAreas.get(viewId),
         scrollmap: store.scrollmap.get(viewId),
@@ -1199,6 +1296,7 @@ const useHeatmapDataContext = createViewContextHook({
     }),
     getActions: (store, viewId) => ({
         setData: (newData) => store.setData(newData, viewId),
+        setDataSnapshot: (newData) => store.setDataSnapshot(newData, viewId),
         setClickmap: (newClickmap) => store.setClickmap(newClickmap, viewId),
         setClickAreas: (newClickAreas) => store.setClickAreas(newClickAreas, viewId),
         setDataInfoByKey: (key, value) => store.setDataInfoByKey(key, value, viewId),
@@ -1221,6 +1319,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 +1374,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 +1387,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 +1395,7 @@ const useHeatmapSettingContext = createViewContextHook({
 const useHeatmapVizContext = createViewContextHook({
     useStore: useHeatmapVizStore,
     getState: (store, viewId) => ({
-        isRenderViz: store.isRenderViz.get(viewId) ?? false,
+        isRenderedViz: store.isRenderedViz.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 +1403,7 @@ const useHeatmapVizContext = createViewContextHook({
         isScaledToFit: store.isScaledToFit.get(viewId) ?? false,
     }),
     getActions: (store, viewId) => ({
-        setIsRenderViz: (value) => store.setIsRenderViz(value, viewId),
+        setIsRenderedViz: (value) => store.setIsRenderedViz(value, viewId),
         setZoomRatio: (value) => store.setZoomRatio(value, viewId),
         setMinZoomRatio: (value) => store.setMinZoomRatio(value, viewId),
         setMaxZoomRatio: (value) => store.setMaxZoomRatio(value, viewId),
@@ -1311,9 +1437,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 +1446,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 +1455,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 +1478,7 @@ const useHeatmapCopyView = () => {
         clearVizHoverView(viewId);
         clearVizScrollView(viewId);
         clearVizAreaClickView(viewId);
+        clearLiveView(viewId);
     };
     const clearMultipleViews = (viewIds) => {
         viewIds.forEach((viewId) => {
@@ -1369,6 +1494,7 @@ const useHeatmapCopyView = () => {
         resetVizHoverAll();
         resetVizScrollViewAll();
         resetVizClickAreaAll();
+        resetLiveAll();
     };
     return {
         copyView,
@@ -1770,7 +1896,7 @@ class Logger {
     }
 }
 // Export singleton instance
-const logger$9 = new Logger();
+const logger$4 = new Logger();
 // Export factory function để tạo logger với config riêng
 function createLogger(config = {}) {
     const instance = new Logger();
@@ -2159,7 +2285,7 @@ function findElementByHash(props) {
         }
     }
     catch (error) {
-        logger$9.warn(`Invalid selector "${selector}":`, error);
+        logger$4.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 +2307,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$4.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 +2324,7 @@ function hydrateAreas(props) {
             hydratedAreas.push(area);
         }
     }
-    logger$9.info(`Hydrated ${hydratedAreas.length} of ${clickAreas.length} persisted areas`);
+    logger$4.info(`Hydrated ${hydratedAreas.length} of ${clickAreas.length} persisted areas`);
     return hydratedAreas;
 }
 /**
@@ -2902,16 +3028,16 @@ const calcCalloutPositionAbsolute = (props) => {
 
 function validateAreaCreation(dataInfo, hash, areas) {
     if (!dataInfo?.clickMapMetrics || !dataInfo?.totalClicks) {
-        logger$9.warn('Cannot create area: missing heatmap data');
+        logger$4.warn('Cannot create area: missing heatmap data');
         return false;
     }
     if (!hash) {
-        logger$9.warn('Cannot create area: missing hash');
+        logger$4.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$4.warn(`Area already exists for element: ${hash}`);
         return false;
     }
     return true;
@@ -2924,14 +3050,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$4.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$4.info(`New area "${area.selector}" is a parent of ${area.childNodes.size} existing area(s). Will remove children.`);
     }
     return conflicts;
 }
@@ -2982,7 +3108,7 @@ function useAreaCreation(options = {}) {
             }
         }
         catch (error) {
-            logger$9.error('Failed to create area:', error);
+            logger$4.error('Failed to create area:', error);
         }
     }, [dataInfo, areas, addArea, removeArea, removeClickArea, customShadowRoot, onAreaCreated]);
     return {
@@ -3097,16 +3223,16 @@ function useAreaHydration(options) {
             return;
         if (!dataInfo)
             return;
-        logger$9.info(`Hydrating ${clickAreas.length} persisted areas...`);
+        logger$4.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$4.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$4.info(`Successfully hydrated ${hydratedAreas.length} areas`);
     }, [dataInfo, vizRef, isInitializing, clickAreas]);
     useEffect(() => {
         if (!enabled)
@@ -3240,7 +3366,7 @@ function useAreaRectSync(options) {
                 area.rect.update(newRect);
             }
             catch (error) {
-                logger$9.error(`Failed to update rect for area ${area.id}:`, error);
+                logger$4.error(`Failed to update rect for area ${area.id}:`, error);
             }
         });
         buildAreaGraph(areas);
@@ -3345,9 +3471,9 @@ const useAreaClickmap = () => {
 const useClickmap = () => {
     const vizRef = useHeatmapVizRectContext((s) => s.vizRef);
     const clickmap = useHeatmapDataContext((s) => s.clickmap);
-    const isRenderViz = useHeatmapVizContext((s) => s.isRenderViz);
+    const isRenderedViz = useHeatmapVizContext((s) => s.isRenderedViz);
     const start = useCallback(() => {
-        if (!vizRef || !clickmap || clickmap.length === 0 || !isRenderViz)
+        if (!vizRef || !clickmap || clickmap.length === 0 || !isRenderedViz)
             return;
         try {
             vizRef?.clearmap?.();
@@ -3356,7 +3482,7 @@ const useClickmap = () => {
         catch (error) {
             console.error(`🚀 🐥 ~ useClickmap ~ error:`, error);
         }
-    }, [vizRef, clickmap, isRenderViz]);
+    }, [vizRef, clickmap, isRenderedViz]);
     return { start };
 };
 
@@ -3384,7 +3510,7 @@ const useScrollmap = () => {
             vizRef?.scrollmap?.(scrollmap);
         }
         catch (error) {
-            logger$9.error(`🚀 🐥 ~ useScrollmap ~ error:`, error);
+            logger$4.error(`🚀 🐥 ~ useScrollmap ~ error:`, error);
         }
     }, [vizRef, scrollmap]);
     return { start };
@@ -3855,7 +3981,7 @@ var MessageType;
 })(MessageType || (MessageType = {}));
 function useVizLiveIframeMsg(options = {}) {
     const { trustedOrigins = [], onMessage } = options;
-    const addPayload = useHeatmapLiveStore((state) => state.addPayload);
+    const addPayload = useHeatmapLiveContext((s) => s.addPayload);
     const [isReady, setIsReady] = useState(false);
     const iframeRef = useRef(null);
     const isValidOrigin = useCallback((origin) => {
@@ -3881,7 +4007,7 @@ function useVizLiveIframeMsg(options = {}) {
         switch (message.type) {
             case MessageType.GX_DOM_TRACKING_PAYLOAD:
                 if (message.payload) {
-                    const data = decodeClarity(message.payload);
+                    const data = JSON.parse(message.payload);
                     if (data) {
                         addPayload(data);
                     }
@@ -3904,21 +4030,324 @@ function useVizLiveIframeMsg(options = {}) {
     };
 }
 
+/**
+ * Performance tracker — measures render pipeline timings and stores results
+ * in `window.__gemxPerf` for inspection in DevTools.
+ *
+ * Usage:
+ *   perf.startSession('render-1');
+ *   const t = perf.mark('viewport.run');
+ *   perf.measure('viewport.run', t);
+ *   perf.endSession();
+ *
+ *   // In DevTools:
+ *   window.__gemxPerf.latest
+ *   window.__gemxPerf.sessions
+ */
+const s = {
+    enabled: true,
+    current: null,
+    sessions: [],
+    maxSessions: 20,
+};
+// ── 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 mark$1(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 measure$1(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 clear$1() {
+    s.current = null;
+    s.sessions = [];
+    if (typeof window !== 'undefined')
+        delete window.__gemxPerf;
+}
+function enable$1() {
+    s.enabled = true;
+}
+function disable$1() {
+    s.enabled = false;
+}
+// ── Internal ──────────────────────────────────────────────────────────────────
+function flush() {
+    if (typeof window === 'undefined')
+        return;
+    window.__gemxPerf = getReport();
+}
+// ── Singleton export ──────────────────────────────────────────────────────────
+const perf = { startSession, endSession, mark: mark$1, measure: measure$1, getReport, clear: clear$1, enable: enable$1, disable: disable$1 };
+
 /**
  * DOM observation setup — ResizeObserver + MutationObserver.
  * Returns a cleanup function that disconnects both observers.
  */
-createLogger({ enabled: false, prefix: 'IframeHeightObserver' });
+const logger$3 = 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$3.log('DOM observers started (ResizeObserver + MutationObserver)');
+    return () => {
+        resizeObserver.disconnect();
+        mutationObserver.disconnect();
+        logger$3.log('DOM observers disconnected');
+    };
+}
 
 /**
  * Height Observer Processor
  * Background observer — watches for iframe content height changes.
  */
-createLogger({ enabled: true, prefix: 'IframeHeightObserver' });
+// ── Module-level functions ────────────────────────────────────────────────────
+function clearTimers(s) {
+    if (s.throttleTimeout) {
+        clearTimeout(s.throttleTimeout);
+        s.throttleTimeout = null;
+    }
+    if (s.debounceTimeout) {
+        clearTimeout(s.debounceTimeout);
+        s.debounceTimeout = null;
+    }
+}
+function getActualHeight(s) {
+    if (!s.iframe?.contentDocument)
+        return 0;
+    const { documentElement: docEl, body } = s.iframe.contentDocument;
+    const heights = [docEl.scrollHeight, docEl.offsetHeight, body.scrollHeight, body.offsetHeight];
+    const maxHeight = Math.max(...heights.filter((h) => h > 0));
+    s.logger.log('Height sources:', {
+        'documentElement.scrollHeight': docEl.scrollHeight,
+        'documentElement.offsetHeight': docEl.offsetHeight,
+        'body.scrollHeight': body.scrollHeight,
+        'body.offsetHeight': body.offsetHeight,
+        maxHeight,
+    });
+    return maxHeight;
+}
+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.logger.log('Height change processed:', result);
+        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;
+    }
+}
+function handleHeightChange(s) {
+    if (s.isProcessing || s.throttleTimeout)
+        return;
+    s.throttleTimeout = setTimeout(() => {
+        s.throttleTimeout = null;
+        const currentHeight = getActualHeight(s);
+        if (currentHeight === s.lastHeight)
+            return;
+        s.logger.log(`Height changed: ${s.lastHeight}px -> ${currentHeight}px`);
+        if (s.debounceTimeout)
+            clearTimeout(s.debounceTimeout);
+        s.debounceTimeout = setTimeout(() => {
+            s.debounceTimeout = null;
+            processHeightChange(s, currentHeight);
+        }, s.debounceMs);
+    }, s.throttleMs);
+}
+function observe(s) {
+    if (!s.iframe?.contentDocument?.body) {
+        s.logger.warn('Cannot observe height changes: iframe body not found');
+        return;
+    }
+    s.observerCleanup?.();
+    s.lastHeight = s.iframe.contentDocument.documentElement.scrollHeight;
+    s.logger.log('Initial height:', s.lastHeight);
+    s.observerCleanup = setup(s.iframe.contentDocument, () => handleHeightChange(s));
+}
+function start$5(s, cfg) {
+    if (s.running) {
+        s.logger.warn('Observer is already running. Call stop() first.');
+        return;
+    }
+    s.iframe = cfg.iframe;
+    s.config = cfg;
+    s.throttleMs = cfg.throttleMs ?? 25;
+    s.debounceMs = cfg.debounceMs ?? 500;
+    s.running = true;
+    observe(s);
+    s.logger.log('Height observer started');
+}
+function stop$5(s) {
+    if (!s.running)
+        return;
+    s.observerCleanup?.();
+    s.observerCleanup = null;
+    clearTimers(s);
+    s.iframe = null;
+    s.config = null;
+    s.lastHeight = 0;
+    s.isProcessing = false;
+    s.running = false;
+    s.logger.log('Height observer stopped');
+}
+function clear(s) {
+    s.observerCleanup?.();
+    s.observerCleanup = null;
+    clearTimers(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;
+    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,
+        isProcessing: false,
+        throttleMs: 25,
+        debounceMs: 500,
+        running: false,
+    };
+    return {
+        start: (cfg) => start$5(s, cfg),
+        stop: () => stop$5(s),
+        observe: () => observe(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$2 = createLogger({ enabled: false, prefix: 'IframeNavigationBlocker' });
 function configure$1(debug) {
-    logger$8.configure({ enabled: debug });
+    logger$2.configure({ enabled: debug });
 }
 // ─── DOM Utilities ────────────────────────────────────────────────────────────
 function disableAllLinks(doc) {
@@ -3942,10 +4371,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$2.log('Allowed hash navigation:', href);
             return;
         }
-        logger$8.log('Blocked link navigation to:', href);
+        logger$2.log('Blocked link navigation to:', href);
         e.preventDefault();
         e.stopPropagation();
         e.stopImmediatePropagation();
@@ -3959,7 +4388,7 @@ function setupLinkBlocker(doc, isEnabled, onBlocked) {
             return;
         const href = link.getAttribute('href');
         if (href && !href.startsWith('#')) {
-            logger$8.log('Blocked auxclick navigation');
+            logger$2.log('Blocked auxclick navigation');
             e.preventDefault();
             e.stopPropagation();
             e.stopImmediatePropagation();
@@ -3980,7 +4409,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$2.log('Allowed same-page form');
             e.preventDefault();
             const data = {};
             new FormData(form).forEach((value, key) => {
@@ -3989,7 +4418,7 @@ function setupFormBlocker(doc, isEnabled, onBlocked, onFormSubmit) {
             onFormSubmit(form, data);
             return;
         }
-        logger$8.log('Blocked form submission to:', action);
+        logger$2.log('Blocked form submission to:', action);
         e.preventDefault();
         e.stopPropagation();
         e.stopImmediatePropagation();
@@ -4003,7 +4432,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$2.log('Blocked window.open:', url);
         onBlocked(url);
         return null;
     });
@@ -4015,14 +4444,14 @@ function setupUnloadBlocker(win, isEnabled) {
     const beforeUnloadListener = (e) => {
         if (!isEnabled())
             return;
-        logger$8.log('Blocked beforeunload');
+        logger$2.log('Blocked beforeunload');
         e.preventDefault();
         e.returnValue = '';
     };
     const unloadListener = (e) => {
         if (!isEnabled())
             return;
-        logger$8.log('Blocked unload');
+        logger$2.log('Blocked unload');
         e.preventDefault();
         e.stopPropagation();
     };
@@ -4039,65 +4468,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 +4484,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('Navigation blocker started');
+}
+function stop$4(s) {
+    if (!s.running)
+        return;
+    s.cleanups.forEach((fn) => fn());
+    s.cleanups = [];
+    s.listeners.detach();
+    s.isEnabled = false;
+    s.showMessage = false;
+    s.running = false;
+    s.logger.log('Navigation blocker stopped');
+}
+function enable(s) {
+    if (!s.running) {
+        s.logger.warn('Blocker is not running.');
+        return;
+    }
+    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 stop$5() {
-    if (!running$4)
+function enableMessage(s) {
+    if (!s.running) {
+        s.logger.warn('Blocker is not 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.showMessage = true;
+    s.logger.log('Navigation blocking message enabled');
+}
+function disableMessage(s) {
+    if (!s.running) {
+        s.logger.warn('Blocker is not running.');
         return;
     }
-    isEnabled = true;
-    logger$6.log('Navigation blocking enabled');
+    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;
+        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,235 +4628,241 @@ 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('Computed style enforcer 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('Computed style enforcer 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('Computed style enforcer 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++;
-                }
-            }
+        if (computedValue && (!inlineValue || inlineValue !== computedValue) && !isDefaultCssValue(computedValue)) {
+            const originalValue = elementOriginals?.get(prop) || '';
+            if (applyPropertyWithVerification(s, 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.');
+function processAll(s, options = {}) {
+    if (!s.running || !s.doc || !s.win || !s.config) {
+        s.logger.warn('Enforcer is not running.');
         return 0;
     }
     let totalCount = 0;
-    elementsWithViewportUnits$1.forEach((element) => {
-        totalCount += processElement(element, options);
+    s.elementsWithViewportUnits.forEach((element) => {
+        totalCount += processElement(s, element, options);
     });
-    logger$5.log(`Enforced ${totalCount} computed styles for ${elementsWithViewportUnits$1.size} elements`);
+    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);
+}
+
+/**
+ * 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 = [];
+/**
+ * Register a global fix.
+ * Fixes are run in registration order.
+ */
+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;
+        }
+    });
+}
 
 /**
  * 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' });
+const logger$1 = 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. */
+/**
+ * Stateless test-only regex (no `g` flag) — safe to share across calls.
+ * Used exclusively for `.test()` checks before doing a full replacement.
+ */
+const VIEWPORT_RE_TEST = /([-.?\d]+)(vh|svh|lvh|dvh|vw|svw|lvw|dvw)/i;
+/** Fresh `g`-flagged instance for String.replace() callbacks. */
 function createRegex() {
-    return /([-.\\d]+)(vh|svh|lvh|dvh|vw|svw|lvw|dvw)/gi;
+    return /([-.?\d]+)(vh|svh|lvh|dvh|vw|svw|lvw|dvw)/gi;
 }
 // ─── Unit conversion ─────────────────────────────────────────────────────────
 function px(value) {
     return `${value.toFixed(2)}px`;
 }
-function getUnitMap(ctx) {
+function buildUnitMap(ctx) {
     return {
         vh: ctx.targetHeight,
         svh: ctx.targetHeight,
@@ -4452,15 +4874,15 @@ function getUnitMap(ctx) {
         dvw: ctx.targetWidth,
     };
 }
-function toPx(value, unit, ctx) {
+function toPx(value, unit, unitMap, targetHeight) {
     const u = unit.toLowerCase();
     if (u === '%')
-        return (value / 100) * ctx.targetHeight;
-    return (value / 100) * (getUnitMap(ctx)[u] ?? 0);
+        return (value / 100) * targetHeight;
+    return (value / 100) * (unitMap[u] ?? 0);
 }
-function convert(value, unit, ctx) {
+function convert(value, unit, unitMap, targetHeight) {
     const num = parseFloat(value);
-    return isNaN(num) ? value : px(toPx(num, unit, ctx));
+    return isNaN(num) ? value : px(toPx(num, unit, unitMap, targetHeight));
 }
 function isHeightRelated(prop) {
     return HEIGHT_RELATED_PROPERTIES.includes(prop);
@@ -4475,11 +4897,13 @@ function extractProperty(cssText, matchOffset) {
     return m ? m[1].toLowerCase() : '';
 }
 function replaceInText(cssText, ctx) {
+    const unitMap = buildUnitMap(ctx);
+    const { targetHeight } = ctx;
     return cssText.replace(createRegex(), (match, value, unit, offset) => {
         if (unit === '%') {
-            return isHeightRelated(extractProperty(cssText, offset)) ? convert(value, unit, ctx) : match;
+            return isHeightRelated(extractProperty(cssText, offset)) ? convert(value, unit, unitMap, targetHeight) : match;
         }
-        return convert(value, unit, ctx);
+        return convert(value, unit, unitMap, targetHeight);
     });
 }
 // ─── Element tracking ─────────────────────────────────────────────────────────
@@ -4496,11 +4920,11 @@ function trackSelector(selector, propOriginals, ctx) {
                 if (!originals.has(k))
                     originals.set(k, v);
             });
-            trackElement(el, propOriginals);
+            ctx.enforcer?.trackElement(el, propOriginals);
         });
     }
     catch {
-        logger$4.warn('Invalid selector, skipping:', selector);
+        logger$1.warn('Invalid selector, skipping:', selector);
     }
 }
 // ─── CSS processing ───────────────────────────────────────────────────────────
@@ -4508,25 +4932,25 @@ function processInlineStyles(ctx) {
     let count = 0;
     ctx.doc.querySelectorAll('[style]').forEach((el) => {
         const style = el.getAttribute('style');
-        if (style && createRegex().test(style)) {
+        if (style && VIEWPORT_RE_TEST.test(style)) {
             elementsWithViewportUnits.add(el);
             el.setAttribute('style', replaceInText(style, ctx));
             count++;
         }
     });
-    logger$4.log(`Replaced ${count} inline style elements`);
+    logger$1.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)) {
+        if (VIEWPORT_RE_TEST.test(css)) {
             tag.textContent = replaceInText(css, ctx);
             count++;
         }
     });
-    logger$4.log(`Replaced ${count} <style> tags`);
+    logger$1.log(`Replaced ${count} <style> tags`);
     return count;
 }
 function processRule(rule, ctx) {
@@ -4539,7 +4963,7 @@ function processRule(rule, ctx) {
         for (let i = 0; i < style.length; i++) {
             const prop = style[i];
             const value = style.getPropertyValue(prop);
-            if (value && createRegex().test(value)) {
+            if (value && VIEWPORT_RE_TEST.test(value)) {
                 hasVp = true;
                 propOriginals.set(prop, value);
                 style.setProperty(prop, replaceInText(value, ctx), style.getPropertyPriority(prop));
@@ -4550,8 +4974,11 @@ function processRule(rule, ctx) {
             trackSelector(cssRule.selectorText, propOriginals, ctx);
     }
     if ('cssRules' in rule) {
-        for (const r of Array.from(rule.cssRules || [])) {
-            count += processRule(r, ctx);
+        const nested = rule.cssRules;
+        if (nested) {
+            for (let i = 0; i < nested.length; i++) {
+                count += processRule(nested[i], ctx);
+            }
         }
     }
     return count;
@@ -4559,34 +4986,38 @@ function processRule(rule, ctx) {
 /** Processes only inline <style> sheets. Linked sheets are handled by processLinkedStylesheets. */
 function processStylesheets(ctx) {
     let total = 0;
-    Array.from(ctx.doc.styleSheets).forEach((sheet) => {
+    const sheets = ctx.doc.styleSheets;
+    for (let i = 0; i < sheets.length; i++) {
+        const sheet = sheets[i];
         if (sheet.href)
-            return; // deferred to processLinkedStylesheets
+            continue; // deferred to processLinkedStylesheets
         try {
-            for (const rule of Array.from(sheet.cssRules || [])) {
-                total += processRule(rule, ctx);
+            const rules = sheet.cssRules;
+            for (let j = 0; j < rules.length; j++) {
+                total += processRule(rules[j], ctx);
             }
         }
         catch (e) {
-            logger$4.warn('Cannot read stylesheet (CORS?):', e.message);
+            logger$1.warn('Cannot read stylesheet (CORS?):', e.message);
         }
-    });
-    logger$4.log(`Replaced ${total} rules in inline stylesheets`);
+    }
+    logger$1.log(`Replaced ${total} rules in inline stylesheets`);
     return total;
 }
 async function processLinkedStylesheets(ctx) {
     const links = ctx.doc.querySelectorAll('link[rel="stylesheet"]');
     let count = 0;
-    for (const link of Array.from(links)) {
+    for (let i = 0; i < links.length; i++) {
+        const link = links[i];
         // 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);
+            logger$1.log('Skipping cross-origin CSS:', link.href);
             continue;
         }
         try {
             const res = await fetch(link.href);
             let css = await res.text();
-            if (createRegex().test(css)) {
+            if (VIEWPORT_RE_TEST.test(css)) {
                 css = replaceInText(css, ctx);
                 const style = ctx.doc.createElement('style');
                 style.textContent = css;
@@ -4597,15 +5028,15 @@ async function processLinkedStylesheets(ctx) {
             }
         }
         catch (e) {
-            logger$4.warn('Cannot load CSS:', link.href, e);
+            logger$1.warn('Cannot load CSS:', link.href, e);
         }
     }
-    logger$4.log(`Replaced ${count} linked CSS files`);
+    logger$1.log(`Replaced ${count} linked CSS files`);
     return count;
 }
 // ─── Public entry point ───────────────────────────────────────────────────────
 async function process$1(ctx) {
-    logger$4.configure({ enabled: !!ctx.debug });
+    logger$1.configure({ enabled: !!ctx.debug });
     // Reset tracking state from any previous run
     elementsWithViewportUnits = new Set();
     originalValues = new WeakMap();
@@ -4616,8 +5047,8 @@ async function process$1(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`);
+    const count = ctx.enforcer?.processAll({ debug: !!ctx.debug }) ?? 0;
+    logger$1.log(`Enforced ${count} computed styles for ${elementsWithViewportUnits.size} tracked elements`);
 }
 
 /**
@@ -4713,6 +5144,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,23 +5247,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().
@@ -4853,41 +5270,58 @@ 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 ────────────────────────────────────────────────
+    const t1 = perf.mark('phase1.beforeProcess');
     for (const fix of activeGlobal) {
         if (fix.beforeProcess) {
-            logger$2.log(`[beforeProcess] ${fix.name}`);
+            logger.log(`[beforeProcess] ${fix.name}`);
+            const t = perf.mark(`phase1.${fix.name}.beforeProcess`);
             await fix.beforeProcess(ctx);
+            perf.measure(`phase1.${fix.name}.beforeProcess`, t);
         }
     }
     if (shopFix?.beforeProcess) {
-        logger$2.log('[beforeProcess] shop');
+        logger.log('[beforeProcess] shop');
+        const t = perf.mark('phase1.shop.beforeProcess');
         await shopFix.beforeProcess(ctx);
+        perf.measure('phase1.shop.beforeProcess', t);
     }
+    perf.measure('phase1.beforeProcess', t1);
     // ── Phase 2: process ──────────────────────────────────────────────────────
+    const t2 = perf.mark('phase2.process');
     for (const fix of activeGlobal) {
         if (fix.process) {
-            logger$2.log(`[process] ${fix.name}`);
+            logger.log(`[process] ${fix.name}`);
+            const t = perf.mark(`phase2.${fix.name}.process`);
             await fix.process(ctx);
+            perf.measure(`phase2.${fix.name}.process`, t);
         }
     }
+    perf.measure('phase2.process', t2);
     // ── Phase 3: afterProcess ─────────────────────────────────────────────────
+    const t3 = perf.mark('phase3.afterProcess');
     if (shopFix?.afterProcess) {
-        logger$2.log('[afterProcess] shop');
+        logger.log('[afterProcess] shop');
+        const t = perf.mark('phase3.shop.afterProcess');
         await shopFix.afterProcess(ctx);
+        perf.measure('phase3.shop.afterProcess', t);
     }
     for (const fix of activeGlobal) {
         if (fix.afterProcess) {
-            logger$2.log(`[afterProcess] ${fix.name}`);
+            logger.log(`[afterProcess] ${fix.name}`);
+            const t = perf.mark(`phase3.${fix.name}.afterProcess`);
             await fix.afterProcess(ctx);
+            perf.measure(`phase3.${fix.name}.afterProcess`, t);
         }
     }
+    perf.measure('phase3.afterProcess', t3);
     // ── Phase 4: getDimensions ────────────────────────────────────────────────
+    const t4 = perf.mark('phase4.getDimensions');
     return new Promise((resolve) => {
         requestAnimationFrame(() => {
             let dimensions = null;
@@ -4895,14 +5329,14 @@ async function run$1(ctx, activeGlobal, shopFix) {
             if (shopFix?.getDimensions) {
                 dimensions = shopFix.getDimensions(ctx);
                 if (dimensions)
-                    logger$2.log('Dimensions from shop fix:', dimensions);
+                    logger.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);
+                            logger.log(`Dimensions from global fix [${fix.name}]:`, dimensions);
                             break;
                         }
                     }
@@ -4911,7 +5345,8 @@ async function run$1(ctx, activeGlobal, shopFix) {
             if (!dimensions) {
                 dimensions = { height: getFinalHeight(ctx.doc, ctx.win), width: getFinalWidth(ctx.doc) };
             }
-            logger$2.log('Final dimensions:', dimensions);
+            logger.log('Final dimensions:', dimensions);
+            perf.measure('phase4.getDimensions', t4);
             resolve(dimensions);
         });
     });
@@ -4988,232 +5423,286 @@ 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.mark('viewport.run');
     try {
-        return await run$1(ctx, activeGlobal, shopFix);
+        const result = await run$1(ctx, activeGlobal, s.shopFix);
+        perf.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.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,
+    };
 }
-function stop$2() {
-    if (!running$1) {
+
+// ── Module-level functions ────────────────────────────────────────────────────
+function dispatchDimensionsEvent(dimensions) {
+    window.dispatchEvent(new CustomEvent('iframe-dimensions-applied', { detail: dimensions }));
+}
+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.startSession(sessionId);
+    const t0 = perf.mark('orchestrator.process');
+    try {
+        s.logger.log('Processing viewport units...');
+        s.viewportReplacer.start(s.iframe, s.config);
+        s.navigationBlocker.start(s.iframe, { debug: s.config.debug });
+        const result = await s.viewportReplacer.run();
+        perf.measure('orchestrator.process', t0);
+        perf.endSession();
+        s.logger.log('Process completed:', result);
+        s.config.onSuccess?.(result);
+        dispatchDimensionsEvent(result);
     }
-    else {
-        loadListener = handleIframeLoad;
-        iframe.addEventListener('load', loadListener);
+    catch (error) {
+        perf.measure('orchestrator.process', t0);
+        perf.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('Iframe fixer started');
+    initialize(s);
 }
-function handleIframeLoad() {
-    process();
+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('Iframe fixer stopped');
+}
+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(),
+        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();
-}
-
-function start(config) {
-    start$1(config);
+    await s.fixer.recalculate();
 }
-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),
+        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 setIsRenderedViz = useHeatmapVizContext((s) => s.setIsRenderedViz);
+    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);
+    const renderMode = useHeatmapLiveContext((s) => s.renderMode);
+    const storefrontPassword = useHeatmapLiveContext((s) => s.storefrontPassword);
     useHeatmapWidthByDevice();
     const { iframeRef, isReady } = useVizLiveIframeMsg();
     // Handle iframe rendering based on mode
@@ -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) => {
+        setIsRenderedViz(true);
+        startIframe$1(iframe, deviceType, { width: wrapperWidth, height: wrapperHeight }, (height) => {
             height && setIframeHeight(height);
-            setIsRenderViz(true);
+            setIsRenderedViz(true);
         });
         return () => { };
     }, [
@@ -5269,7 +5758,7 @@ function useVizLiveRender() {
         targetUrl,
         htmlContent,
         iframeRef,
-        setIsRenderViz,
+        setIsRenderedViz,
         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,7 +5790,7 @@ function initIframeHelper$1(iframe, deviceType = EDeviceType.Desktop, rect, onSu
         },
     });
     // fixer.recalculate();
-    enableNavigationBlocking();
+    iframeHelper.enableNavigationBlocking();
 }
 
 const CANVAS_ID = 'clarity-heatmap-canvas';
@@ -5551,36 +6040,67 @@ class GXVisualizer extends Visualizer {
     };
 }
 
+// ── Performance timing ────────────────────────────────────────────────────────
+function mark(label) {
+    const t = performance.now();
+    console.log(`[Render] ⏱ ${label}`);
+    return t;
+}
+function measure(label, startMs) {
+    const ms = (performance.now() - startMs).toFixed(1);
+    console.log(`[Render] ✅ ${label} — ${ms}ms`);
+}
+// ── Hook ──────────────────────────────────────────────────────────────────────
 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 setIsRenderedViz = useHeatmapVizContext((s) => s.setIsRenderedViz);
     const wrapperHeight = useHeatmapVizRectContext((s) => s.wrapperHeight);
     const contentWidth = useHeatmapWidthByDevice();
     const deviceType = useHeatmapSettingContext((s) => s.deviceType);
     const iframeRef = useRef(null);
+    const helperRef = useRef(null);
+    const abortRef = useRef(null);
     const renderHeatmap = useCallback(async (payloads) => {
         if (contentWidth === 0 || wrapperHeight === 0)
             return;
         if (!payloads || payloads.length === 0)
             return;
+        // Cancel any in-flight render before starting a new one
+        abortRef.current?.abort();
+        const abort = new AbortController();
+        abortRef.current = abort;
+        const t0 = mark('renderHeatmap start');
         const visualizer = vizRef ?? new GXVisualizer();
         if (!vizRef)
             setVizRef(visualizer);
-        setIsRenderViz(false);
+        setIsRenderedViz(false);
         const iframe = iframeRef.current;
         if (!iframe?.contentWindow)
             return;
+        const tHtml = mark('visualizer.html start');
         await visualizer.html(payloads, iframe.contentWindow, viewId);
-        const size = { width: contentWidth, height: wrapperHeight };
-        initIframeHelper(iframe, deviceType, size, (height) => {
-            height && setIframeHeight(height);
-            setIsRenderViz(true);
+        measure('visualizer.html', tHtml);
+        // Bail out if data changed or component unmounted while we were awaiting
+        if (abort.signal.aborted)
+            return;
+        startIframe({
+            helperRef,
+            iframe,
+            deviceType,
+            size: { width: contentWidth, height: wrapperHeight },
+            t0,
+            onSuccess: (height) => {
+                if (abort.signal.aborted)
+                    return;
+                if (height)
+                    setIframeHeight(height);
+                setIsRenderedViz(true);
+            },
         });
-        // setIsRenderViz(true);
     }, [wrapperHeight, contentWidth, deviceType]);
     useEffect(() => {
         if (!data || data.length === 0)
@@ -5591,33 +6111,46 @@ const useHeatmapRender = () => {
             setVizRef(null);
         };
     }, [data, renderHeatmap, setVizRef]);
+    // Abort render + stop helper when the component unmounts
+    useEffect(() => {
+        return () => {
+            abortRef.current?.abort();
+            helperRef.current?.stop();
+            helperRef.current = null;
+        };
+    }, []);
     return {
         iframeRef,
     };
 };
-function initIframeHelper(iframe, deviceType = EDeviceType.Desktop, size, onSuccess) {
+// ── Helpers ───────────────────────────────────────────────────────────────────
+function startIframe({ helperRef, iframe, 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 = mark('IframeHelper.start');
+    const helper = createIframeHelper();
+    helperRef.current = helper;
+    helper.start({
+        deviceType,
         targetWidth: docWidth,
         targetHeight: docHeight,
-        iframe: iframe,
+        iframe,
         debug: true,
         onSuccess: (data) => {
+            measure('IframeHelper processing', tHelper);
+            measure('Total render', t0);
             iframe.style.height = `${data.height}px`;
             onSuccess(data.height);
         },
     });
-    // fixer.recalculate();
 }
 
 const useReplayRender = () => {
     const data = useHeatmapDataContext((s) => s.data);
-    const setIsRenderViz = useHeatmapVizContext((s) => s.setIsRenderViz);
+    const setIsRenderedViz = useHeatmapVizContext((s) => s.setIsRenderedViz);
     const setIframeHeight = useHeatmapVizRectContext((s) => s.setIframeHeight);
     const visualizerRef = useRef(null);
     const iframeRef = useRef(null);
@@ -5637,7 +6170,7 @@ const useReplayRender = () => {
             version: envelope.version,
             onresize: (height) => {
                 height && setIframeHeight(height);
-                setIsRenderViz(true);
+                setIsRenderedViz(true);
             },
             mobile,
             vNext: true,
@@ -5793,7 +6326,7 @@ const useContentDimensions = ({ iframeRef }) => {
 const useObserveIframeHeight = (props) => {
     const iframeHeight = useHeatmapVizRectContext((s) => s.iframeHeight);
     const setIframeHeight = useHeatmapVizRectContext((s) => s.setIframeHeight);
-    const isRenderViz = useHeatmapVizContext((s) => s.isRenderViz);
+    const isRenderedViz = useHeatmapVizContext((s) => s.isRenderedViz);
     const wrapperHeight = useHeatmapVizRectContext((s) => s.wrapperHeight);
     const { iframeRef } = props;
     const resizeObserverRef = useRef(null);
@@ -5854,7 +6387,7 @@ const useObserveIframeHeight = (props) => {
     }, [updateIframeHeight]);
     useEffect(() => {
         const iframe = iframeRef.current;
-        if (!iframe || !iframeHeight || !isRenderViz)
+        if (!iframe || !iframeHeight || !isRenderedViz)
             return;
         const setupObservers = () => {
             try {
@@ -5916,7 +6449,7 @@ const useObserveIframeHeight = (props) => {
             }
             iframe.removeEventListener('load', setupObservers);
         };
-    }, [iframeRef, iframeHeight, isRenderViz]);
+    }, [iframeRef, iframeHeight, isRenderedViz]);
     return {};
 };
 
@@ -6215,10 +6748,10 @@ const useScrollmapZones = (options) => {
             const newZones = createZones(scrollmap);
             setZones(newZones);
             setIsReady(true);
-            logger$9.log(`[useScrollmap] Created ${newZones.length} zones in ${mode} mode`);
+            logger$4.log(`[useScrollmap] Created ${newZones.length} zones in ${mode} mode`);
         }
         catch (error) {
-            logger$9.error('[useScrollmap] Error:', error);
+            logger$4.error('[useScrollmap] Error:', error);
             setIsReady(false);
         }
     }, [enabled, scrollmap, mode, createZones]);
@@ -7048,11 +7581,11 @@ const AutoScrollHandler = ({ visualRef }) => {
 };
 
 const PortalAreaRenderer = ({ iframeRef, visualRef, shadowRoot, onAreaCreated, onAreaClick, }) => {
-    const isRenderViz = useHeatmapVizContext((s) => s.isRenderViz);
+    const isRenderedViz = useHeatmapVizContext((s) => s.isRenderedViz);
     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 && isRenderedViz });
+    useAreaPositionsUpdater({ iframeRef, visualRef, enabled: isReady && isRenderedViz });
     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 +7594,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 isRenderedViz = useHeatmapVizContext((s) => s.isRenderedViz);
     useAreaTopAutoDetect({ autoCreateTopN, shadowRoot, disabled: !!clickAreas?.length });
     useAreaFilterVisible({ iframeRef, enableOverlapResolution });
     useAreaHydration({ shadowRoot });
@@ -7070,7 +7603,7 @@ const VizAreaClick = ({ iframeRef, visualRef, shadowRoot, autoCreateTopN = 10, e
             resetView();
         };
     }, []);
-    if (!iframeRef.current || !isRenderViz)
+    if (!iframeRef.current || !isRenderedViz)
         return null;
     return (jsx(Fragment, { children: jsx(PortalAreaRenderer, { iframeRef: iframeRef, visualRef: visualRef, shadowRoot: shadowRoot, onAreaClick: onAreaClick }) }));
 };
@@ -7784,7 +8317,7 @@ const VizDomHeatmap = () => {
     const iframeHeight = useHeatmapVizRectContext((s) => s.iframeHeight);
     const setIframeHeight = useHeatmapVizRectContext((s) => s.setIframeHeight);
     const setVizRef = useHeatmapVizRectContext((s) => s.setVizRef);
-    const setIsRenderViz = useHeatmapVizContext((s) => s.setIsRenderViz);
+    const setIsRenderedViz = useHeatmapVizContext((s) => s.setIsRenderedViz);
     const setSelectedElement = useHeatmapClickContext((s) => s.setSelectedElement);
     const setHoveredElement = useHeatmapHoverContext((s) => s.setHoveredElement);
     // const setSelectedArea = useHeatmapAreaClickContext((s) => s.setSelectedArea);
@@ -7794,7 +8327,7 @@ const VizDomHeatmap = () => {
     const cleanUp = () => {
         setVizRef(null);
         setIframeHeight(0);
-        setIsRenderViz(false);
+        setIsRenderedViz(false);
         setSelectedElement(null);
         setHoveredElement(null);
         // setSelectedArea(null);
@@ -7826,7 +8359,7 @@ const VizLiveRenderer = () => {
 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(() => {
@@ -7911,4 +8444,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, performanceLogger, printPerformanceSummary, scrollToElementIfNeeded, sendPerformanceReport, serializeAreas, trackStoreAction, useAreaCreation, useAreaEditMode, useAreaFilterVisible, useAreaHydration, useAreaInteraction, useAreaPositionsUpdater, useAreaRectSync, useAreaRendererContainer, useAreaTopAutoDetect, useClickedElement, useDebounceCallback, useElementCalloutVisible, useHeatmapAreaClickContext, useHeatmapCanvas, useHeatmapClickContext, useHeatmapCompareStore, useHeatmapConfigStore, useHeatmapCopyView, useHeatmapDataContext, useHeatmapEffects, useHeatmapElementPosition, useHeatmapHoverContext, useHeatmapLiveContext, useHeatmapRenderByMode, useHeatmapScale, useHeatmapScroll, useHeatmapScrollContext, useHeatmapSettingContext, useHeatmapVizContext, useHeatmapVizRectContext, useHeatmapWidthByDevice, useHoveredElement, useMeasureFunction, useRegisterConfig, useRegisterControl, useRegisterData, useRegisterHeatmap, useRenderCount, useScrollmapZones, useTrackHookCall, useViewIdContext, useVizLiveRender, useWhyDidYouUpdate, useWrapperRefHeight, useZonePositions, withPerformanceTracking };