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

package/dist/esm/index.mjs

@@ -574,16 +574,16 @@ const useHeatmapSettingStore = create()(subscribeWithSelector((set) => {
 
 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 +611,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 +630,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 +649,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]]),
@@ -1269,7 +1269,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 +1277,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),
@@ -1770,7 +1770,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 +2159,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 +2181,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 +2198,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 +2902,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 +2924,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 +2982,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 +3097,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 +3240,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 +3345,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 +3356,7 @@ const useClickmap = () => {
         catch (error) {
             console.error(`🚀 🐥 ~ useClickmap ~ error:`, error);
         }
-    }, [vizRef, clickmap, isRenderViz]);
+    }, [vizRef, clickmap, isRenderedViz]);
     return { start };
 };
 
@@ -3384,7 +3384,7 @@ const useScrollmap = () => {
             vizRef?.scrollmap?.(scrollmap);
         }
         catch (error) {
-            logger$9.error(`🚀 🐥 ~ useScrollmap ~ error:`, error);
+            logger$4.error(`🚀 🐥 ~ useScrollmap ~ error:`, error);
         }
     }, [vizRef, scrollmap]);
     return { start };
@@ -3908,17 +3908,241 @@ function useVizLiveIframeMsg(options = {}) {
  * 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,
+        }),
+    };
+}
+
+/**
+ * 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$8 = createLogger({ enabled: false, prefix: 'IframeNavigationBlocker' });
+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 +4166,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 +4183,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 +4204,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 +4213,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 +4227,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 +4239,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 +4263,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 +4279,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 stop$5() {
-    if (!running$4)
+function disable(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.isEnabled = false;
+    s.logger.log('Navigation blocking disabled');
+}
+function enableMessage(s) {
+    if (!s.running) {
+        s.logger.warn('Blocker is not running.');
+        return;
+    }
+    s.showMessage = true;
+    s.logger.log('Navigation blocking message enabled');
+}
+function disableMessage(s) {
+    if (!s.running) {
+        s.logger.warn('Blocker is not running.');
         return;
     }
-    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,220 +4423,221 @@ 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) ───────────────────
@@ -4496,11 +4708,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 ───────────────────────────────────────────────────────────
@@ -4514,7 +4726,7 @@ function processInlineStyles(ctx) {
             count++;
         }
     });
-    logger$4.log(`Replaced ${count} inline style elements`);
+    logger$1.log(`Replaced ${count} inline style elements`);
     return count;
 }
 function processStyleTags(ctx) {
@@ -4526,7 +4738,7 @@ function processStyleTags(ctx) {
             count++;
         }
     });
-    logger$4.log(`Replaced ${count} <style> tags`);
+    logger$1.log(`Replaced ${count} <style> tags`);
     return count;
 }
 function processRule(rule, ctx) {
@@ -4568,10 +4780,10 @@ function processStylesheets(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) {
@@ -4580,7 +4792,7 @@ async function processLinkedStylesheets(ctx) {
     for (const link of Array.from(links)) {
         // Skip cross-origin — already in browser CSSOM, handled via processStylesheets
         if (link.href && !link.href.startsWith(ctx.win.location.origin)) {
-            logger$4.log('Skipping cross-origin CSS:', link.href);
+            logger$1.log('Skipping cross-origin CSS:', link.href);
             continue;
         }
         try {
@@ -4597,15 +4809,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 +4828,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 +4925,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 +5028,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,37 +5051,37 @@ function getFinalWidth(doc) {
  *   Phase 3: afterProcess   (shop → global)
  *   Phase 4: getDimensions  (shop → global → default)
  */
-const logger$2 = createLogger({ enabled: false, prefix: 'ViewportReplacer' });
+const logger = createLogger({ enabled: false, prefix: 'ViewportReplacer' });
 function configure(debug) {
-    logger$2.configure({ enabled: debug });
+    logger.configure({ enabled: debug });
 }
 async function run$1(ctx, activeGlobal, shopFix) {
     // ── Phase 1: beforeProcess ────────────────────────────────────────────────
     for (const fix of activeGlobal) {
         if (fix.beforeProcess) {
-            logger$2.log(`[beforeProcess] ${fix.name}`);
+            logger.log(`[beforeProcess] ${fix.name}`);
             await fix.beforeProcess(ctx);
         }
     }
     if (shopFix?.beforeProcess) {
-        logger$2.log('[beforeProcess] shop');
+        logger.log('[beforeProcess] shop');
         await shopFix.beforeProcess(ctx);
     }
     // ── Phase 2: process ──────────────────────────────────────────────────────
     for (const fix of activeGlobal) {
         if (fix.process) {
-            logger$2.log(`[process] ${fix.name}`);
+            logger.log(`[process] ${fix.name}`);
             await fix.process(ctx);
         }
     }
     // ── Phase 3: afterProcess ─────────────────────────────────────────────────
     if (shopFix?.afterProcess) {
-        logger$2.log('[afterProcess] shop');
+        logger.log('[afterProcess] shop');
         await shopFix.afterProcess(ctx);
     }
     for (const fix of activeGlobal) {
         if (fix.afterProcess) {
-            logger$2.log(`[afterProcess] ${fix.name}`);
+            logger.log(`[afterProcess] ${fix.name}`);
             await fix.afterProcess(ctx);
         }
     }
@@ -4895,14 +5093,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 +5109,7 @@ 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);
             resolve(dimensions);
         });
     });
@@ -4988,227 +5186,270 @@ 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(', ')}`);
     try {
-        return await run$1(ctx, activeGlobal, shopFix);
+        return await run$1(ctx, activeGlobal, s.shopFix);
     }
     catch (err) {
-        logger$1.error('Critical error:', err);
-        return { height: doc.body?.scrollHeight || 1000, width: doc.body?.scrollWidth || 1000 };
+        s.logger.error('Critical error:', err);
+        return { height: s.doc.body?.scrollHeight || 1000, width: s.doc.body?.scrollWidth || 1000 };
     }
 }
-
-const logger = createLogger({
-    enabled: false,
-    prefix: 'IframeFixer',
-});
-// ============================================================================
-// State
-// ============================================================================
-let iframe = null;
-let config = null;
-let running$1 = false;
-let loadListener = null;
-// ============================================================================
-// Core API Functions
-// ============================================================================
-function start$2(cfg) {
-    if (running$1) {
-        logger.warn('Fixer is already running. Call stop() first.');
+function updateConfig$1(s, cfg) {
+    if (!s.running || !s.config) {
+        s.logger.warn('Not running. Call start() first.');
         return;
     }
-    iframe = cfg.iframe;
-    config = cfg;
-    running$1 = true;
-    logger.configure({ enabled: !!cfg.debug });
-    logger.log('Iframe fixer started');
-    initialize();
+    s.config = { ...s.config, ...cfg };
+    if (cfg.shopId !== undefined)
+        s.shopFix = cfg.shopId != null ? get(cfg.shopId) : null;
+    s.enforcer.updateConfig(cfg);
+    s.logger.log('Config updated');
+}
+// ── Factory ───────────────────────────────────────────────────────────────────
+function createViewportProcessor() {
+    const s = {
+        logger: createLogger({ enabled: false, prefix: 'ViewportReplacer' }),
+        enforcer: createEnforcer(),
+        listeners: createViewportListeners(),
+        doc: null,
+        win: null,
+        config: null,
+        shopFix: null,
+        running: false,
+    };
+    return {
+        start: (iframe, cfg) => start$2(s, iframe, cfg),
+        stop: () => stop$2(s),
+        run: () => run(s),
+        updateConfig: (cfg) => updateConfig$1(s, cfg),
+        isRunning: () => s.running,
+    };
+}
+
+// ── Module-level functions ────────────────────────────────────────────────────
+function dispatchDimensionsEvent(dimensions) {
+    window.dispatchEvent(new CustomEvent('iframe-dimensions-applied', { detail: dimensions }));
 }
-function stop$2() {
-    if (!running$1) {
+async function process(s) {
+    if (!s.iframe || !s.config)
         return;
-    }
-    // Stop viewport replacer
-    stop$3();
-    stop$5();
-    // Remove load listener
-    if (iframe && loadListener) {
-        iframe.removeEventListener('load', loadListener);
-        loadListener = null;
-    }
-    iframe = null;
-    config = null;
-    running$1 = false;
-    logger.log('Iframe fixer stopped');
-}
-async function initialize() {
-    if (!iframe || !config) {
-        logger.error('iframe not found');
-        config?.onError?.(new Error('iframe not found'));
+    if (!s.iframe.contentDocument || !s.iframe.contentWindow) {
+        s.logger.error('Cannot access iframe document');
+        s.config.onError?.(new Error('Cannot access iframe document'));
         return;
     }
-    // Wait for iframe to load completely
-    if (iframe.contentDocument?.readyState === 'complete') {
-        await process();
+    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();
+        s.logger.log('Process completed:', result);
+        s.config.onSuccess?.(result);
+        dispatchDimensionsEvent(result);
     }
-    else {
-        loadListener = handleIframeLoad;
-        iframe.addEventListener('load', loadListener);
+    catch (error) {
+        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 setIsRenderedViz = useHeatmapVizContext((s) => s.setIsRenderedViz);
     const htmlContent = useHeatmapLiveStore((s) => s.htmlContent);
     const targetUrl = useHeatmapLiveStore((s) => s.targetUrl);
     const deviceType = useHeatmapSettingContext((s) => s.deviceType);
@@ -5254,10 +5495,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 +5510,7 @@ function useVizLiveRender() {
         targetUrl,
         htmlContent,
         iframeRef,
-        setIsRenderViz,
+        setIsRenderedViz,
         setIframeHeight,
     ]);
     return {
@@ -5288,9 +5529,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 +5542,7 @@ function initIframeHelper$1(iframe, deviceType = EDeviceType.Desktop, rect, onSu
         },
     });
     // fixer.recalculate();
-    enableNavigationBlocking();
+    iframeHelper.enableNavigationBlocking();
 }
 
 const CANVAS_ID = 'clarity-heatmap-canvas';
@@ -5557,11 +5798,12 @@ const useHeatmapRender = () => {
     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 renderHeatmap = useCallback(async (payloads) => {
         if (contentWidth === 0 || wrapperHeight === 0)
             return;
@@ -5570,17 +5812,22 @@ const useHeatmapRender = () => {
         const visualizer = vizRef ?? new GXVisualizer();
         if (!vizRef)
             setVizRef(visualizer);
-        setIsRenderViz(false);
+        setIsRenderedViz(false);
         const iframe = iframeRef.current;
         if (!iframe?.contentWindow)
             return;
         await visualizer.html(payloads, iframe.contentWindow, viewId);
-        const size = { width: contentWidth, height: wrapperHeight };
-        initIframeHelper(iframe, deviceType, size, (height) => {
-            height && setIframeHeight(height);
-            setIsRenderViz(true);
+        startIframe({
+            helperRef,
+            iframe,
+            deviceType,
+            size: { width: contentWidth, height: wrapperHeight },
+            onSuccess: (height) => {
+                if (height)
+                    setIframeHeight(height);
+                setIsRenderedViz(true);
+            },
         });
-        // setIsRenderViz(true);
     }, [wrapperHeight, contentWidth, deviceType]);
     useEffect(() => {
         if (!data || data.length === 0)
@@ -5591,33 +5838,41 @@ const useHeatmapRender = () => {
             setVizRef(null);
         };
     }, [data, renderHeatmap, setVizRef]);
+    // Stop the helper when the component unmounts
+    useEffect(() => {
+        return () => {
+            helperRef.current?.stop();
+            helperRef.current = null;
+        };
+    }, []);
     return {
         iframeRef,
     };
 };
-function initIframeHelper(iframe, deviceType = EDeviceType.Desktop, size, onSuccess) {
+function startIframe({ helperRef, iframe, deviceType = EDeviceType.Desktop, size, onSuccess }) {
     const docWidth = size.width ?? 0;
     const docHeight = size.height ?? 0;
     if (docHeight === 0)
         return;
-    stop();
-    start({
-        deviceType: deviceType,
+    helperRef.current?.stop();
+    const helper = createIframeHelper();
+    helperRef.current = helper;
+    helper.start({
+        deviceType,
         targetWidth: docWidth,
         targetHeight: docHeight,
-        iframe: iframe,
+        iframe,
         debug: true,
         onSuccess: (data) => {
             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 +5892,7 @@ const useReplayRender = () => {
             version: envelope.version,
             onresize: (height) => {
                 height && setIframeHeight(height);
-                setIsRenderViz(true);
+                setIsRenderedViz(true);
             },
             mobile,
             vNext: true,
@@ -5793,7 +6048,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 +6109,7 @@ const useObserveIframeHeight = (props) => {
     }, [updateIframeHeight]);
     useEffect(() => {
         const iframe = iframeRef.current;
-        if (!iframe || !iframeHeight || !isRenderViz)
+        if (!iframe || !iframeHeight || !isRenderedViz)
             return;
         const setupObservers = () => {
             try {
@@ -5916,7 +6171,7 @@ const useObserveIframeHeight = (props) => {
             }
             iframe.removeEventListener('load', setupObservers);
         };
-    }, [iframeRef, iframeHeight, isRenderViz]);
+    }, [iframeRef, iframeHeight, isRenderedViz]);
     return {};
 };
 
@@ -6215,10 +6470,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 +7303,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 +7316,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 +7325,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 +8039,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 +8049,7 @@ const VizDomHeatmap = () => {
     const cleanUp = () => {
         setVizRef(null);
         setIframeHeight(0);
-        setIsRenderViz(false);
+        setIsRenderedViz(false);
         setSelectedElement(null);
         setHoveredElement(null);
         // setSelectedArea(null);